/* HSE incident — per-page styles. Owned by the HSE incident F1 agent.
   Tokens only (--atlas-* / --atlas-hse-*); class prefix .hse-incident-*.
   Shared component/layout styles live in hse-base.css (owned by F0, do not edit). */

/* ── Same-page tab strip (All / Investigations tabs filter an AtlasTable in place,
      not a route change — plain buttons, not NavLink) ─────────────────────────── */
.hse-inc-tabs { display: flex; gap: var(--atlas-space-2); flex-wrap: wrap; margin-bottom: var(--atlas-space-4); }
.hse-inc-tabs .btn { border-radius: var(--atlas-radius-full); }

/* ── Classification grid (Investigation Detail — actual/potential/PTW) ─────── */
.hse-inc-classification { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--atlas-space-3); }
.hse-inc-classification-cell {
    background: var(--atlas-surface-muted); border-radius: var(--atlas-radius-md);
    padding: var(--atlas-space-3) var(--atlas-space-4);
}
.hse-inc-classification-label { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--atlas-hse-muted); font-weight: 700; margin-bottom: var(--atlas-space-2); }
@media (max-width: 992px) { .hse-inc-classification { grid-template-columns: 1fr; } }

/* ── Root-cause taxonomy chips (multi-select, static toggle via 'sel' class) ── */
.hse-inc-chiprow { display: flex; flex-wrap: wrap; gap: var(--atlas-space-2); }
.hse-inc-chip {
    display: inline-flex; align-items: center; gap: .4em;
    font-size: .82rem; font-weight: 600; padding: .5em .95em;
    border-radius: var(--atlas-radius-full); cursor: pointer; user-select: none;
    background: var(--atlas-surface); border: 1px solid var(--atlas-hse-line); color: var(--atlas-text);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hse-inc-chip:hover { border-color: var(--atlas-hse-incident-red); }
.hse-inc-chip.sel {
    background: color-mix(in srgb, var(--atlas-hse-incident-red) 12%, transparent);
    border-color: var(--atlas-hse-incident-red); color: var(--atlas-hse-incident-red);
}
.hse-inc-chip.sel .ph-check { color: var(--atlas-hse-incident-red); }

/* ── Barrier analysis rows ──────────────────────────────────────────────────── */
.hse-inc-barrier { border: 1px solid var(--atlas-hse-line); border-radius: var(--atlas-radius-lg); padding: var(--atlas-space-3) var(--atlas-space-4); margin-bottom: var(--atlas-space-3); }
.hse-inc-barrier:last-child { margin-bottom: 0; }
.hse-inc-barrier-head { display: flex; align-items: center; justify-content: space-between; gap: var(--atlas-space-2); margin-bottom: var(--atlas-space-1); }
.hse-inc-barrier-name { font-weight: 700; color: var(--atlas-hse-navy); }
.hse-inc-barrier-why { font-size: .84rem; color: var(--atlas-hse-muted); }

/* ── Human Factors panel ────────────────────────────────────────────────────── */
.hse-inc-hf-panel {
    border-radius: var(--atlas-radius-lg); padding: var(--atlas-space-4);
    background: color-mix(in srgb, var(--atlas-hse-incident-red) 6%, var(--atlas-surface));
    border: 1px solid color-mix(in srgb, var(--atlas-hse-incident-red) 30%, transparent);
}
.hse-inc-hf-narrative { font-size: .88rem; color: var(--atlas-text); margin-bottom: var(--atlas-space-3); }
.hse-inc-hf-list { margin: 0; padding-left: 1.1em; font-size: .84rem; color: var(--atlas-text); display: flex; flex-direction: column; gap: var(--atlas-space-1); }

/* ── Event timeline / storyboard (tl-item) ──────────────────────────────────── */
.hse-inc-tl { position: relative; padding-left: var(--atlas-space-6); }
.hse-inc-tl-item { position: relative; padding-bottom: var(--atlas-space-4); }
.hse-inc-tl-item:last-child { padding-bottom: 0; }
.hse-inc-tl-item::before {
    content: ''; position: absolute; left: calc(-1 * var(--atlas-space-6) + 3px); top: 2px;
    width: 10px; height: 10px; border-radius: var(--atlas-radius-full); background: var(--atlas-hse-incident-red);
}
.hse-inc-tl-item::after {
    content: ''; position: absolute; left: calc(-1 * var(--atlas-space-6) + 7px); top: 12px; bottom: -6px;
    width: 2px; background: var(--atlas-hse-line);
}
.hse-inc-tl-item:last-child::after { display: none; }
.hse-inc-tl-time { font-family: var(--atlas-font-mono); font-size: .72rem; color: var(--atlas-hse-muted); font-weight: 700; }
.hse-inc-tl-body { font-size: .86rem; color: var(--atlas-text); margin-top: 2px; }

/* ── Close-gate note ─────────────────────────────────────────────────────────── */
.hse-inc-closegate { display: flex; align-items: flex-start; gap: var(--atlas-space-2); font-size: .82rem; color: var(--atlas-hse-muted); background: var(--atlas-surface-muted); border-radius: var(--atlas-radius-md); padding: var(--atlas-space-3); }

/* 2026-07-22: mobile capture chips/photo/submit/textarea, report cards, witness
   Q/A cards and the recording timer were removed along with the mobile screens
   that used them (Report Incident, Report Near Miss, Witness Interview, My
   Reports, Field Investigation Capture) — see docs/hse-mobile-screens-for-trac.md
   for the parked spec. .hse-inc-tl* (timeline) stays: reused by the surviving
   Investigation Detail (§4.4) and Video Library (§4.8) storyboards. */

/* ── Video Library card grid ─────────────────────────────────────────────────── */
.hse-inc-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--atlas-space-4); }
.hse-inc-video-card { background: var(--atlas-surface); border: 1px solid var(--atlas-hse-line); border-radius: var(--atlas-radius-lg); overflow: hidden; }
.hse-inc-video-thumb {
    height: 110px; background: var(--atlas-surface-sunken); display: flex; align-items: center; justify-content: center;
    position: relative; color: var(--atlas-hse-muted); font-size: 1.8rem;
}
.hse-inc-video-badge { position: absolute; bottom: var(--atlas-space-2); right: var(--atlas-space-2); font-family: var(--atlas-font-mono); font-size: .68rem; font-weight: 700; background: color-mix(in srgb, var(--atlas-hse-navy) 80%, transparent); color: var(--atlas-text-on-primary); padding: .15em .5em; border-radius: var(--atlas-radius-xs); }
.hse-inc-video-body { padding: var(--atlas-space-3); display: flex; flex-direction: column; gap: var(--atlas-space-1); }
.hse-inc-video-title { font-weight: 700; font-size: .86rem; color: var(--atlas-text); }
.hse-inc-video-sub { font-size: .76rem; color: var(--atlas-hse-muted); }

/* ── Risk score cross-module ref banner reuses HseAlertBox — no extra rule needed. */

/* ── Small subhead inside AI panel columns (Investigation Detail) ───────────── */
.hse-inc-subhead { font-weight: 700; color: var(--atlas-text); font-size: .82rem; margin-bottom: var(--atlas-space-2); }

/* ── Search bar (Lessons Learned) ────────────────────────────────────────────── */
.hse-inc-search { position: relative; max-width: 420px; }
.hse-inc-search input {
    width: 100%; padding: var(--atlas-space-2) var(--atlas-space-3) var(--atlas-space-2) var(--atlas-space-6);
    border: 1px solid var(--atlas-hse-line); border-radius: var(--atlas-radius-full); font-size: .86rem;
}
.hse-inc-search i { position: absolute; left: var(--atlas-space-3); top: 50%; transform: translateY(-50%); color: var(--atlas-hse-muted); }

/* ── Modal forms (2026-07-22: Investigation Detail + New Investigation +
   Report incident became modals — plan 2026-07-22 A2/A3, no inline CSS) ──── */
.hse-inc-form-label {
    display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--atlas-hse-muted); margin-bottom: var(--atlas-space-1);
}
.hse-inc-bucket-selector { display: grid; grid-template-columns: 1fr 1fr; gap: var(--atlas-space-2); }
.hse-inc-bucket-btn {
    display: flex; flex-direction: column; align-items: center; gap: var(--atlas-space-1);
    padding: var(--atlas-space-3); border: 2px solid var(--atlas-border); background: var(--atlas-surface);
    border-radius: var(--atlas-radius-md); color: var(--atlas-text-secondary);
    font-size: .82rem; font-weight: 500; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.hse-inc-bucket-btn:hover { border-color: var(--atlas-hse-incident-red); color: var(--atlas-hse-incident-red); }
.hse-inc-bucket-btn.active {
    border-color: var(--atlas-hse-incident-red); color: var(--atlas-hse-incident-red);
    background: var(--atlas-hse-no-soft);
}
.hse-inc-bucket-btn i { font-size: 1.5rem; }