/* ============================================================================
   Safety Incident Request — visual design system.

   Ported verbatim from the approved mockup, whose values are traceable to the
   Highland design-system spec (section 7.5). Do not substitute values here:
   the semantic ROLE names (brand, success, info, warning, danger, attention,
   special, accent, neutral, muted) are shared across every Highland app, and
   the API sends role names rather than colours so this file stays the only
   place a role becomes a colour.

   The theme follows the host: DealerPortal embeds this app in an iframe and
   sets html[data-theme] from the user's preference, which is why the dark
   block below exists even though FleetX (a light-only customer portal) has
   none. theme.js applies it standalone.
   ============================================================================ */
  /* ============================================================
     Highland visual design system (§7.5). Every value below is
     traceable to the design-system spec — do not substitute.
     Theme follows the platform: the host sets html[data-theme].
     ============================================================ */
  :root {
    --bg:#F5F5F5; --card:#FFFFFF; --fg:#212121; --muted:#6B6B6B;
    /* Solid surface for native popups (select option lists). --card is translucent in dark, and a
       translucent option list falls back to the OS white behind light text — unreadable. */
    --popup:#FFFFFF;
    --border:rgba(0,0,0,.12); --gray:#3D4043;
    --brand:#338165; --brand-hover:#2C7A5C; --brand-ink:#216B52; --on-brand:#FFFFFF;
    --cta:#FEC92E; --cta-hover:#F8B901; --on-cta:#3A2C00;
    --radius:4px; --radius-lg:8px; --shadow:0 2px 4px rgba(0,0,0,.075);
    /* semantic role fills */
    --success:#37B400; --info:#0058E9; --warning:#FFC000; --danger:#F31700;
    --attention:#E67E22; --special:#8E44AD; --accent:#0E7490; --neutral:#757575; --muted-role:#C6C8C8;
    /* semantic role ink (contrast-safe text on card / tinted grounds) */
    --brand-fg:#2A6B54; --success-fg:#1E7A52; --info-fg:#1F4FBF; --warning-fg:#8A6300;
    --danger-fg:#B0281B; --attention-fg:#A85B14; --special-fg:#7A3A97; --accent-fg:#0F6B73;
    --neutral-fg:#5A6670; --muted-fg:#6B7177;
    /* semantic role tints */
    --brand-bg:#3381651A; --success-bg:#37B4001A; --info-bg:#0058E91A; --warning-bg:#FFC0001A;
    --danger-bg:#F317001A; --attention-bg:#E67E221A; --special-bg:#8E44AD1A; --accent-bg:#0E74901A;
    --neutral-bg:#7575751A; --muted-bg:#C6C8C81A;
    color-scheme: light;
  }
  html[data-theme="dark"] {
    --bg:#191C1F; --card:rgba(255,255,255,.04); --fg:#E9EBED; --muted:#9AA1A8;
    --popup:#25292D;
    --border:rgba(255,255,255,.10); --gray:#9AA1A8;
    --brand-ink:#5FD6A0;
    --brand-fg:#5FD6A0; --success-fg:#5FD6A0; --info-fg:#9AB6FF; --warning-fg:#F4C560;
    --danger-fg:#F08A7F; --attention-fg:#F0A868; --special-fg:#C99BE6; --accent-fg:#54C4CF;
    --neutral-fg:#B7C0C7; --muted-fg:#9AA1A8;
    --brand-bg:rgba(51,129,101,.24); --success-bg:rgba(55,180,0,.20); --info-bg:rgba(0,88,233,.24);
    --warning-bg:rgba(255,192,0,.18); --danger-bg:rgba(243,23,0,.20); --attention-bg:rgba(230,126,34,.20);
    --special-bg:rgba(142,68,173,.24); --accent-bg:rgba(14,116,144,.28);
    --neutral-bg:rgba(255,255,255,.10); --muted-bg:rgba(255,255,255,.06);
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  html, body { margin:0; padding:0; background: var(--bg); color: var(--fg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px; line-height: 1.45; }
  @media (min-width: 768px) { html, body { font-size: 16px; } }
  .muted { color: var(--muted); }
  /* ---------- intranet header ---------- */
  .app-header { background: var(--card); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .9rem 1.25rem; }
  .app-title { font-size: 15px; font-weight: 700; color: var(--fg); cursor: pointer; }
  .nav-links { display: flex; gap: 4px; }
  .nav-link { padding: 8px 14px; border: 1px solid transparent; border-radius: var(--radius);
    background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
  .nav-link:hover { color: var(--fg); }
  .nav-link.active { background: var(--brand-bg); color: var(--brand-fg); }
  .nav-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  /* ---------- shell (full width, no max-width cap) ---------- */
  .container { width: 100%; padding: 22px 24px 48px; }
  .page-header { display:flex; justify-content:space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
  .page-title { font-size: 24px; font-weight: 700; color: var(--fg); margin: 0; }
  .page-sub { font-size: 13px; color: var(--muted); margin: 4px 0 0 0; }
  .breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
  .breadcrumb a { color: var(--brand-ink); cursor: pointer; font-weight: 600; }
  .section-head { display: flex; justify-content: space-between; align-items: center; margin: 28px 0 10px; gap: 12px; }
  .section-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg); }
  /* ---------- chips (roleChips, two-tone per theme) ---------- */
  .chip { display: inline-block; font-weight: 700; font-size: 11px; padding: 2px 9px;
    border-radius: 11px; white-space: nowrap; background: var(--neutral-bg); color: var(--neutral-fg); }
  .chip[data-role="brand"]     { background: var(--brand-bg);     color: var(--brand-fg); }
  .chip[data-role="success"]   { background: var(--success-bg);   color: var(--success-fg); }
  .chip[data-role="info"]      { background: var(--info-bg);      color: var(--info-fg); }
  .chip[data-role="warning"]   { background: var(--warning-bg);   color: var(--warning-fg); }
  .chip[data-role="danger"]    { background: var(--danger-bg);    color: var(--danger-fg); }
  .chip[data-role="attention"] { background: var(--attention-bg); color: var(--attention-fg); }
  .chip[data-role="special"]   { background: var(--special-bg);   color: var(--special-fg); }
  .chip[data-role="accent"]    { background: var(--accent-bg);    color: var(--accent-fg); }
  .chip[data-role="neutral"]   { background: var(--neutral-bg);   color: var(--neutral-fg); }
  .chip[data-role="muted"]     { background: var(--muted-bg);     color: var(--muted-fg); }
  .pill { display:inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 11px; background: var(--neutral-bg); color: var(--neutral-fg); white-space: nowrap; }
  /* ---------- KPI tiles ---------- */
  .kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; }
  .kpi { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--neutral);
    border-radius: var(--radius); padding: 14px 16px; cursor: pointer; }
  .kpi:hover { box-shadow: var(--shadow); }
  .kpi:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .kpi[data-role="brand"]     { border-left-color: var(--brand); }
  .kpi[data-role="info"]      { border-left-color: var(--info); }
  .kpi[data-role="warning"]   { border-left-color: var(--warning); }
  .kpi[data-role="danger"]    { border-left-color: var(--danger); }
  .kpi[data-role="special"]   { border-left-color: var(--special); }
  .kpi[data-role="success"]   { border-left-color: var(--success); }
  .kpi-num { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--fg); }
  .kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-top: 4px; }
  /* ---------- call to action ---------- */
  .cta-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 18px 22px; display: flex; align-items: center;
    justify-content: space-between; gap: 20px; }
  .cta-card h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg); }
  .cta-card .btn { flex-shrink: 0; }
  /* ---------- cards & forms ---------- */
  .form-card, .detail-card { background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px; margin-bottom: 18px; }
  .form-section-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
    letter-spacing: .06em; margin: 22px 0 12px 0; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
  .form-card > .form-section-title:first-child { margin-top: 0; }
  .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; }
  .form-row.cols-1 { grid-template-columns: 1fr; }
  .form-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .field-label { display: block; font-size: 12px; font-weight: 700; color: var(--fg); margin-bottom: 5px; }
  .field-label .req { color: var(--danger-fg); margin-left: 3px; }
  .field-helper { font-size: 12px; color: var(--muted); margin: 3px 0 8px 0; line-height: 1.45; }
  input[type="text"], input[type="email"], input[type="number"], input[type="datetime-local"],
  input[type="date"], select, textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
    font-family: inherit; font-size: 13px; color: var(--fg); background: var(--card); }
  input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-bg); }
  input[readonly] { color: var(--muted); }
  select option, select optgroup { background-color: var(--popup); color: var(--fg); }
  select option:disabled { color: var(--muted); }
  textarea { resize: vertical; min-height: 76px; }
  /* ---------- choice cards ---------- */
  .severity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .severity-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
    cursor: pointer; background: var(--card); user-select: none; }
  .severity-card:hover { border-color: var(--brand); }
  .severity-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .sev-card-title { font-weight: 700; font-size: 13px; margin-bottom: 3px; color: var(--fg); }
  .sev-card-desc { font-size: 12px; line-height: 1.45; color: var(--muted); }
  .severity-card.severity-minor.selected { background: var(--brand-bg); border-color: var(--brand); }
  .severity-card.severity-minor.selected .sev-card-title { color: var(--brand-fg); }
  .severity-card.severity-major.selected { background: var(--danger-bg); border-color: var(--danger-fg); }
  .severity-card.severity-major.selected .sev-card-title { color: var(--danger-fg); }
  .type-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
  .type-picker .chip-check:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
  .chip-check { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
    user-select: none; font-size: 12px; display: inline-flex; align-items: center; color: var(--fg); }
  .chip-check input { margin-right: 6px; width: auto; }
  .chip-check.on { background: var(--brand-bg); border-color: var(--brand); color: var(--brand-fg); }
  /* ---------- report-type picker: an exclusive card, then a grid of combinable ones ---------- */
  .type-picker-groups { margin: 6px 0 4px; }
  .type-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
    user-select: none; transition: opacity .15s, border-color .15s, background .15s; }
  .type-card:hover { border-color: var(--brand); }
  .type-card:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
  .type-card input { width: auto; margin: 2px 0 0 0; flex-shrink: 0; accent-color: var(--brand); }
  .type-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .type-card-title { font-weight: 700; font-size: 13px; color: var(--fg); }
  .type-card-desc { font-size: 12px; line-height: 1.4; color: var(--muted); }
  .type-card.on { background: var(--brand-bg); border-color: var(--brand); }
  .type-card.on .type-card-title { color: var(--brand-fg); }
  .type-card-solo { border-left: 3px solid var(--attention); }
  .type-card-solo:hover { border-color: var(--attention); }
  .type-card-solo input { accent-color: var(--attention); }
  .type-card-solo.on { background: var(--attention-bg); border-color: var(--attention); }
  .type-card-solo.on .type-card-title { color: var(--attention-fg); }
  .type-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .type-divider::before, .type-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
  /* Fixed column counts rather than auto-fill: seven cards at auto-fill widths land as 5 + 2. */
  .type-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
  @media (min-width: 640px)  { .type-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1280px) { .type-grid { grid-template-columns: repeat(4, 1fr); } }
  .solo-on .type-grid .type-card { opacity: .5; }
  .solo-on .type-grid .type-card:hover { opacity: 1; }
  /* ---------- file upload ---------- */
  .file-drop { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--border);
    border-radius: var(--radius); padding: 14px 16px; cursor: pointer; background: var(--card); }
  .file-drop:hover { border-color: var(--brand); }
  .file-drop-icon { width: 32px; height: 32px; background: var(--brand); color: var(--on-brand);
    border-radius: 50%; font-size: 20px; font-weight: 700; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; }
  .file-drop-text { font-size: 12px; line-height: 1.45; }
  .photo-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 10px; }
  .photo-thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
    background: var(--bg); border: 1px solid var(--border); }
  .photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .photo-thumb .pdf-tag { color: var(--fg); font-weight: 700; font-size: 11px; text-align: center;
    padding: 8px; word-break: break-all; }
  .photo-thumb .remove { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
    background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 50%;
    font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  /* ---------- key contacts ---------- */
  .key-contact-row { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1.4fr auto; gap: 8px;
    margin-bottom: 8px; align-items: center; }
  .key-contact-row input { padding: 7px 9px; font-size: 12px; }
  .kc-remove { width: 30px; height: 30px; border-radius: var(--radius); background: transparent;
    color: var(--muted); border: 1px solid var(--border); cursor: pointer; font-size: 14px;
    font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .kc-remove:hover { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-fg); }
  /* ---------- callouts ---------- */
  .info-card { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--danger);
    border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; }
  .info-card h3 { color: var(--danger-fg); margin: 0 0 5px 0; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; border: 0; padding: 0; }
  .info-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg); }
  .severity-banner { border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px;
    font-size: 13px; line-height: 1.5; display: none; }
  .severity-banner.show { display: block; }
  .severity-banner.major { background: var(--danger-bg); border: 1px solid var(--border);
    border-left: 3px solid var(--danger); color: var(--fg); }
  .routing-line { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
  .pulse-dot { width: 7px; height: 7px; background: var(--danger); border-radius: 50%; flex-shrink: 0; }
  /* ---------- after-hours call tree ---------- */
  .call-tree-card { background: var(--card); border: 1px solid var(--border);
    border-left: 3px solid var(--danger); border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: 18px; margin-bottom: 18px; }
  .call-tree-card h3 { color: var(--danger-fg); margin: 0 0 4px 0; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; padding: 0; border: 0; }
  .call-tree-sub { font-size: 12px; color: var(--muted); margin: 0 0 12px 0; }
  .call-tree-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
    padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; }
  .call-tree-num { width: 22px; height: 22px; background: var(--brand); color: var(--on-brand);
    border-radius: 50%; font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; }
  .call-tree-name { font-weight: 700; }
  .call-tree-title { font-size: 11px; color: var(--muted); }
  .call-tree-phone { color: var(--brand-ink); font-size: 13px; text-decoration: none; font-weight: 700; }
  .email-preview { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 14px; font-size: 12px; line-height: 1.5; max-height: 250px; overflow-y: auto; }
  .email-preview .em-line { display: block; margin-bottom: 3px; }
  .email-preview a { color: var(--brand-ink); }
  /* ---------- buttons ---------- */
  .btn { padding: 9px 18px; border-radius: var(--radius); font-family: inherit; font-size: 13px;
    font-weight: 700; cursor: pointer; border: 1px solid transparent; }
  .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .btn-primary { background: var(--brand); color: var(--on-brand); }
  .btn-primary:hover { background: var(--brand-hover); }
  .btn-cta { background: var(--cta); color: var(--on-cta); }
  .btn-cta:hover { background: var(--cta-hover); }
  .btn-secondary { background: transparent; color: var(--fg); border-color: var(--gray); }
  .btn-secondary:hover { background: var(--neutral-bg); }
  .btn-green { background: var(--brand); color: var(--on-brand); }
  .btn-green:hover { background: var(--brand-hover); }
  .btn-outline-green { background: transparent; color: var(--brand-ink); border-color: var(--brand); }
  .btn-outline-green:hover { background: var(--brand-bg); }
  .btn-mini { padding: 4px 10px; font-size: 11px; font-weight: 700; border-radius: var(--radius); white-space: nowrap; }
  .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px;
    padding-top: 18px; border-top: 1px solid var(--border); }
  /* ---------- filters & tables ---------- */
  .filter-bar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
  .filter-bar select, .filter-bar input { padding: 6px 9px; font-size: 12px; width: auto; }
  .filter-bar label { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 4px; }
  .log-table { background: var(--card); border-radius: var(--radius); overflow: hidden; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--border); }
  td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--fg); }
  tr.row-clickable { cursor: pointer; }
  tr.row-clickable:hover td { background: var(--neutral-bg); }
  td.nowrap, th.nowrap { white-space: nowrap; }
  .col-actions { text-align: right; white-space: nowrap; width: 1%; }
  .tbl-compact td { padding: 9px 14px; }
  /* ---------- detail ---------- */
  .detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
  @media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
  .detail-card h3 { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
    letter-spacing: .06em; margin: 0 0 12px 0; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
  .detail-grid-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .detail-field-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .detail-field-value { font-size: 13px; color: var(--fg); margin-top: 2px; }
  .flagged { color: var(--danger-fg); font-weight: 700; }
  .timeline-entry { border-left: 2px solid var(--border); padding: 2px 0 14px 14px; margin-left: 4px; font-size: 12px; }
  .timeline-entry .ts { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
  .timeline-entry .author { font-weight: 700; }
  .rca-card { border-left: 3px solid var(--info); }
  .watchers { font-size: 12px; color: var(--muted); margin-top: 8px; }
  .member-tag { display: inline-block; background: var(--brand-bg); color: var(--brand-fg);
    border-radius: 11px; padding: 2px 9px; font-size: 11px; font-weight: 700; margin: 2px 4px 2px 0; }
  .mgmt-saved { font-size: 11px; color: var(--brand-fg); font-weight: 700; text-transform: none; letter-spacing: 0; }
  .anon-note { font-size: 12px; color: var(--muted); margin-top: 5px; }
  .subsection-warn { color: var(--attention-fg); border-bottom-color: var(--attention) !important; }
  .helper-warn { color: var(--attention-fg); }
  /* ---------- toast ---------- */
  #toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex;
    flex-direction: column; gap: 8px; }
  .toast { background: var(--card); color: var(--fg); border: 1px solid var(--border);
    border-left: 3px solid var(--neutral); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 12px 16px; font-size: 13px; min-width: 260px; }
  .toast.success { border-left-color: var(--brand); }
  .empty { text-align: center; padding: 48px 20px; color: var(--muted); }
  .hidden { display: none !important; }
  /* ---------- mobile ---------- */
  @media (max-width: 768px) {
    .app-header { flex-direction: column; align-items: stretch; gap: 10px; padding: .75rem 1rem; }
    .nav-links { width: 100%; flex-wrap: wrap; gap: 6px; }
    .nav-link { flex: 1 1 45%; padding: 9px 6px; text-align: center; }
    .container { padding: 16px 14px 40px; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .page-title { font-size: 20px; }
    .section-head { flex-direction: column; align-items: stretch; }
    .kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .cta-card { flex-direction: column; align-items: stretch; }
    .form-card, .detail-card { padding: 16px; }
    .form-row, .form-row.cols-3 { grid-template-columns: 1fr; gap: 12px; }
    .detail-grid-fields, .severity-grid, .detail-grid { grid-template-columns: 1fr; }
    input, select, textarea { padding: 10px 12px; font-size: 16px; }
    .btn { padding: 12px 16px; width: 100%; }
    .form-actions { flex-direction: column-reverse; gap: 10px; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar select, .filter-bar input { width: 100%; }
    .log-table { overflow-x: auto; }
    table { min-width: 700px; }
    .key-contact-row { grid-template-columns: 1fr; gap: 6px; padding: 10px;
      border: 1px solid var(--border); border-radius: var(--radius); }
    .kc-remove { width: 100%; }
  }
  /* ---------- print ---------- */
  @media print {
    .app-header, .nav-links, .form-actions, .btn, .filter-bar, #toast-container { display: none !important; }
    .container { padding: 0; }
    .detail-card { box-shadow: none; break-inside: avoid; }
    .detail-grid { grid-template-columns: 1fr; }
  }

  /* ==========================================================================
     Report wizard — additions beyond the mockup.

     The mockup re-rendered the whole form on every category change and then
     restored the typed values back into the new DOM. This build instead
     pre-renders every section once and toggles visibility, which is what the
     step rail below is a render of. Nothing here changes the design system; it
     only adds the chrome that the one-step-at-a-time form needs.
     ========================================================================== */
  .wizard { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
  @media (max-width: 900px) { .wizard { grid-template-columns: 1fr; } }

  /* The rail is an ASIDE, not part of the form: it summarises the form state,
     and putting it in the field flow would drop progress into the tab order
     between two questions. */
  .wizard-rail { position: sticky; top: 16px; }
  @media (max-width: 900px) { .wizard-rail { position: static; } }
  .wizard-rail ol { list-style: none; margin: 0; padding: 0; }
  .wizard-step { display: flex; gap: 9px; align-items: flex-start; padding: 7px 0; font-size: 12px;
    color: var(--muted); line-height: 1.35; }
  .wizard-step .dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
    border: 1px solid var(--border); background: var(--card); display: flex; align-items: center;
    justify-content: center; font-size: 10px; font-weight: 700; }
  .wizard-step.is-done { color: var(--fg); }
  .wizard-step.is-done .dot { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
  .wizard-step.is-current { color: var(--fg); font-weight: 700; }
  .wizard-step.is-current .dot { border-color: var(--brand); border-width: 2px; }
  /* An optional step nobody has touched: not done, and not "go here" either. */
  .wizard-step.is-optional .dot { border-style: dashed; background: transparent; }
  .step-optional { margin-left: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); opacity: .8; }
  .wizard-step.is-blocked { color: var(--danger-fg); font-weight: 700; }
  .wizard-step.is-blocked .dot { background: var(--danger-bg); border-color: var(--danger-fg);
    color: var(--danger-fg); }

  /* A blocking answer keeps the submit button VISIBLE and disabled with the
     reason stated. Hiding it reads as the form being broken rather than as an
     instruction to go and do something first. */
  .wizard-block { background: var(--danger-bg); border: 1px solid var(--border);
    border-left: 3px solid var(--danger); border-radius: var(--radius); padding: 14px 18px;
    margin-bottom: 16px; font-size: 13px; line-height: 1.5; color: var(--fg); }
  .wizard-block b { color: var(--danger-fg); }

  .wizard-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px;
    margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--border); }
  .wizard-actions .status { font-size: 12px; color: var(--muted); margin: 0; flex: 1; }
  @media (max-width: 768px) { .wizard-actions { flex-direction: column-reverse; align-items: stretch; } }

  /* The review panel prints the exact text the submission sends, not a second
     summary that could end up describing the form differently. */
  .wizard-review { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 16px; font-size: 13px; line-height: 1.55; white-space: pre-wrap;
    max-height: 340px; overflow-y: auto; }

  .field-error { font-size: 12px; font-weight: 700; color: var(--danger-fg); margin: 4px 0 0 0; }
  .upload-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 0; border-top: 1px solid var(--border); font-size: 12px; }
  .upload-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .upload-row .state { color: var(--muted); white-space: nowrap; }
  .upload-row .state.failed { color: var(--danger-fg); font-weight: 700; }

  /* ---------- user panel in the header ---------- */
  .user-panel { display: flex; align-items: center; gap: 10px; font-size: 12px; }
  .user-panel img { width: 28px; height: 28px; border-radius: 50%; }
  .user-panel .who { line-height: 1.25; }
  .user-panel .who b { display: block; font-size: 12px; }
  .user-panel .who span { color: var(--muted); font-size: 11px; }
  .header-right { display: flex; align-items: center; gap: 16px; }

  /* ---------- sign-in ---------- */
  .signin-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
  .signin-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 32px; max-width: 420px; width: 100%; text-align: center; }
  .signin-card h1 { font-size: 20px; margin: 0 0 6px; }
  .signin-card p { font-size: 13px; color: var(--muted); margin: 0 0 20px; }

  /* ---------- skeletons ---------- */
  .skeleton { background: var(--neutral-bg); border-radius: var(--radius); height: 14px;
    animation: sir-pulse 1.4s ease-in-out infinite; }
  @keyframes sir-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
  @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }