/* ===== origin: backend/static/admin.html <style> block (the only one), moved verbatim by spec-ui-10 ===== */
  /* ------------------------------------------------------------------ */
  /*  Design intent: this is the admin tool. It is a workbench, not a   */
  /*  showroom. Density, scannability, and zero-surprise interaction    */
  /*  are the brief. Strategy doc §9: "functional rather than pretty".  */
  /* ------------------------------------------------------------------ */

  :root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --border: #dde1e6;
    --border-strong: #c1c7cd;
    --ink: #121619;
    --ink-soft: #4d5358;
    --ink-faint: #878d96;
    --accent: #0f62fe;
    --accent-soft: #d0e2ff;
    --row-hover: #eef1f4;
    --row-zebra: #fafbfc;

    /* status pill colours */
    --pill-trial-bg: #fef3c7;     --pill-trial-fg: #78350f;
    --pill-active-bg: #dcfce7;    --pill-active-fg: #14532d;
    --pill-lapsed-bg: #fee2e2;    --pill-lapsed-fg: #7f1d1d;
    --pill-cancelled-bg: #e5e7eb; --pill-cancelled-fg: #374151;

    /* claim status pill colours - cooler tones to differentiate */
    --claim-draft-bg: #e5e7eb;    --claim-draft-fg: #374151;
    --claim-packet-bg: #dbeafe;   --claim-packet-fg: #1e3a8a;
    --claim-accountant-bg: #ede9fe;    --claim-accountant-fg: #4c1d95;
    --claim-submitted-bg: #cffafe; --claim-submitted-fg: #155e75;
    --claim-refund-bg: #dcfce7;   --claim-refund-fg: #14532d;

    /* spec-ui-01 §6: the stage-5 frame's palette, by NAME, for tomorrow's
       panels. Additive — no existing rule is retrofitted. The frame's --ink
       (#1a1a1a) is NOT applied to --ink above (every rule reads it); it is
       --frame-ink until a density/colour pass decides. */
    --frame-ink: #1a1a1a;
    --rule: #c9c6c0;
    --hair: #e6e3dd;
    --sea:  #14555f;
    --warn: #a8630f;
    --bad:  #8f2318;
    --go:   #2f6b34;

    /* spec-ui-02 §2: the stage-5 frame's tokens, --f-* so nothing that reads
       --ink / --border today changes by accident. §4 rewrites the SHELL rules
       (body, topbar, panel, tables outside .subtable, links) to use them; the
       fenced rules (dl, .subtable, .grid-2, inline JS styles) keep theirs. */
    --f-bg:      #f7f6f3;   /* page */
    --f-panel:   #ffffff;   /* panel field */
    --f-head:    #faf9f6;   /* panel header strip */
    --f-ink:     #1a1a1a;
    --f-soft:    #5b5b5b;
    --f-faint:   #8f8b83;
    --f-rule:    #c9c6c0;   /* borders */
    --f-hair:    #e6e3dd;   /* internal dividers */
    --f-sea:     #14555f;   /* primary action, links */
    --f-go:      #2f6b34;
    --f-warn:    #a8630f;
    --f-bad:     #8f2318;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; }
  /* spec-ui-09 §6: the one font change — the root size. Was the browser
     default (16px, never set) with body pinned at 14px, which would have
     made a root bump inert; body now follows the root. Panel heads (.82em)
     and the customer name (rem) scale with it; the px sizes listed in the
     session-1 report do not — that is the visual pass's job. */
  html { font-size: 17px; }
  body {
    background: var(--f-bg);     /* spec-ui-02 §4.1: the warm field is the point */
    color: var(--f-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text",
                 system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }

  /* App shell --------------------------------------------------------- */
  .topbar {
    background: var(--f-panel);  /* spec-ui-02 §4.5: matches the panels, not floating */
    border-bottom: 1px solid var(--f-rule);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .brand { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
  .brand .sub { font-weight: 500; color: var(--ink-faint); margin-left: 6px;
                font-size: 13px; }
  .health-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #94a3b8; margin-right: 6px;
    transition: background-color 0.2s;
  }
  .health-dot.ok { background: var(--f-go); }    /* spec-ui-02 §4.10 */
  .health-dot.bad { background: var(--f-bad); }
  .topbar-status { font-size: 12px; color: var(--ink-soft); margin-left: auto; }
  /* spec-ui-17 §2: the top bar's admin features, as buttons rather than
     text links — the owner's distinction between features and work. A
     button with nowhere to go is disabled, never hidden, so the bar keeps
     its shape from page to page. */
  .topbar-nav { display: flex; gap: 6px; margin-left: 18px; align-items: center; }
  .topbar-btn {
    padding: 4px 10px; font-size: 12px; font-family: inherit;
    border: 1px solid var(--f-rule); border-radius: 4px;
    background: var(--f-panel); color: var(--f-sea);
    text-decoration: none; cursor: pointer; white-space: nowrap;
  }
  .topbar-btn:hover:not([disabled]):not(.is-off) { background: var(--f-head); }
  .topbar-btn[disabled], .topbar-btn.is-off {
    color: var(--f-faint); border-color: var(--f-hair);
    background: var(--f-bg); cursor: not-allowed; pointer-events: none;
  }
  .topbar-btn.is-here { border-color: var(--f-sea); font-weight: 600; }

  /* List view --------------------------------------------------------- */
  .listview { padding: 20px 24px; }
  .toolbar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
  }
  .search {
    flex: 1; max-width: 420px;
    display: flex; align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.12);
  }
  .search svg { width: 14px; height: 14px; color: var(--ink-faint); flex-shrink: 0; }
  .search input {
    border: 0; outline: 0; flex: 1; background: transparent;
    padding: 8px 8px; font: inherit; color: var(--ink);
  }
  .search input::placeholder { color: var(--ink-faint); }
  .filter-group {
    display: flex; gap: 1px; background: var(--border);
    border-radius: 6px; overflow: hidden; padding: 1px;
  }
  .filter-pill {
    background: var(--surface);
    border: 0;
    padding: 6px 12px;
    font: inherit; font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
  }
  .filter-pill:hover { background: var(--row-hover); }
  .filter-pill.active { background: var(--ink); color: white; }
  .filter-pill .pill-count { margin-left: 6px; opacity: .65; font-variant-numeric: tabular-nums; }
  .count {
    margin-left: auto; color: var(--ink-soft); font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  /* Table ------------------------------------------------------------- */
  .tablewrap {
    background: var(--f-panel);  /* spec-ui-02 §4.8 */
    border: 1px solid var(--f-rule);
    border-radius: 4px;
    overflow: hidden;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }
  thead th {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--f-soft);        /* spec-ui-02 §4.8 */
    padding: 10px 16px;
    background: var(--f-head);
    border-bottom: 1px solid var(--f-hair);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    position: sticky; top: 0; z-index: 1;
  }
  thead th:hover { background: var(--row-hover); }
  thead th .sort-arrow {
    display: inline-block; margin-left: 4px; opacity: 0.4; font-size: 10px;
    transition: opacity 0.15s, transform 0.15s;
  }
  thead th.sorted .sort-arrow { opacity: 1; }
  thead th.sorted-desc .sort-arrow { transform: rotate(180deg); }

  tbody tr {
    border-bottom: 1px solid var(--f-hair);   /* spec-ui-02 §4.8 */
    cursor: pointer;
    transition: background 0.08s;
  }
  tbody tr:nth-child(even) { background: var(--row-zebra); }
  tbody tr:hover { background: var(--row-hover); }
  tbody tr:last-child { border-bottom: 0; }
  tbody td {
    padding: 9px 16px;
    color: var(--ink);
  }
  tbody td.muted { color: var(--ink-faint); }
  tbody td.email { color: var(--ink-soft); font-size: 13px; }
  tbody td.tier { font-weight: 600; color: var(--ink-soft); }

  /* Pills ------------------------------------------------------------- */
  .pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
    line-height: 1.5;
    white-space: nowrap;
  }
  .pill.trial     { background: var(--pill-trial-bg);     color: var(--pill-trial-fg); }
  .pill.active    { background: var(--pill-active-bg);    color: var(--pill-active-fg); }
  .pill.lapsed    { background: var(--pill-lapsed-bg);    color: var(--pill-lapsed-fg); }
  .pill.cancelled { background: var(--pill-cancelled-bg); color: var(--pill-cancelled-fg); }

  /* spec-ui-08 §4 vocabulary; the legacy three keep reading until mapped */
  .pill.draft            { background: var(--claim-draft-bg);     color: var(--claim-draft-fg); }
  .pill.pack_ready       { background: var(--claim-packet-bg);    color: var(--claim-packet-fg); }
  .pill.submitted        { background: var(--claim-submitted-bg); color: var(--claim-submitted-fg); }
  .pill.paid             { background: var(--claim-refund-bg);    color: var(--claim-refund-fg); }
  .pill.withheld         { background: var(--pill-trial-bg);      color: var(--pill-trial-fg); }
  .pill.withdrawn        { background: var(--pill-cancelled-bg);  color: var(--pill-cancelled-fg); }
  .pill.packet_generated { background: var(--claim-packet-bg);    color: var(--claim-packet-fg); }
  .pill.sent_to_accountant    { background: var(--claim-accountant-bg);     color: var(--claim-accountant-fg); }
  .pill.refund_received  { background: var(--claim-refund-bg);    color: var(--claim-refund-fg); }

  /* Empty / loading / error ------------------------------------------ */
  .state-msg {
    padding: 60px 20px;
    text-align: center;
    color: var(--ink-faint);
  }
  .state-msg .strong {
    display: block; font-weight: 600; color: var(--ink-soft);
    font-size: 15px; margin-bottom: 4px;
  }
  .skeleton {
    height: 14px; background: linear-gradient(90deg,#eef1f4,#dde1e6,#eef1f4);
    background-size: 200% 100%; border-radius: 3px;
    animation: shimmer 1.4s infinite linear;
  }
  @keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }

  /* Detail view ------------------------------------------------------- */
  .detailview { padding: 20px 24px; max-width: 1100px; }
  .back-link {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 0; padding: 4px 0;
    color: var(--f-sea); font: inherit; font-size: 13px;   /* spec-ui-02 §4.7 */
    cursor: pointer; margin-bottom: 14px;
  }
  .back-link:hover { color: var(--f-ink); }

  .detail-head {
    background: var(--f-panel);
    border: 1px solid var(--f-rule);
    border-radius: 4px;
    padding: 20px 22px;
    margin-bottom: 16px;
  }
  .detail-head h1 {
    margin: 0 0 4px; font-size: 1.5rem; font-weight: 700;   /* spec-ui-09 §6: scales with the root */
    letter-spacing: -0.01em;
  }
  .detail-head .meta {
    color: var(--ink-soft); font-size: 13px;
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  }
  .detail-head .meta .dot { color: var(--ink-faint); }
  .detail-head .pills { margin-top: 10px; display: flex; gap: 6px; }

  .grid-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-bottom: 16px;
  }
  @media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }
  /* spec-ui-11 §2: the B1 strip — three cells, one row; one column under 900px */
  .b1-strip { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 16px; align-items: start; margin-bottom: 16px; }
  @media (max-width: 900px) { .b1-strip { grid-template-columns: 1fr; } }
  .panel {
    background: var(--f-panel);  /* spec-ui-02 §4.2: flat corner, no depth — the
                                    field colour does the separating */
    border: 1px solid var(--f-rule);
    border-radius: 4px;
    overflow: hidden;
  }
  .panel h2 {                    /* spec-ui-02 §4.3: the frame's header strip */
    margin: 0;
    padding: 8px 12px;
    font-size: .82em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--f-soft);
    background: var(--f-head);
    border-bottom: 1px solid var(--f-hair);
    display: flex; align-items: center; gap: 8px;
  }
  .panel h2 .badge {
    background: var(--ink); color: white;
    border-radius: 10px; padding: 1px 8px;
    font-size: 11px; letter-spacing: 0;
    text-transform: none; font-weight: 600;
  }
  .panel .body { padding: 12px; }   /* spec-ui-02 §4.4 */

  dl { margin: 0; display: grid; grid-template-columns: 130px 1fr;
       row-gap: 8px; column-gap: 14px; }
  dt { color: var(--ink-faint); font-size: 13px; }
  dd { margin: 0; font-size: 13.5px; }
  dd.muted { color: var(--ink-faint); font-style: italic; }

  /* Sub-tables for trips/claims (compact) */
  .subtable { width: 100%; border-collapse: collapse; }
  .subtable th, .subtable td {
    padding: 8px 14px; text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .subtable th {
    color: var(--ink-faint); font-weight: 600;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #fafbfc;
  }
  .subtable tr:last-child td { border-bottom: 0; }
  .subtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
  /* spec-ui-16 §5: a numeric column's HEADER was left-aligned while its
     values were right-aligned — the inconsistency the owner noticed when
     reading a table of figures. Text columns and status pills stay left. */
  .subtable th.num { text-align: right; }
  /* spec-ui-12 §0.3: B3's Actions column. `.panel` clips (overflow: hidden),
     so a nowrap cell of buttons in the narrow right-hand column lost their
     ends — "→ Submitted to HM…", "Withdr…" — and could not be clicked. The
     cell takes its content's width and the buttons wrap onto a second line
     rather than running past the edge. Minimal; session 5 gives claims its
     own page. */
  .subtable th.claim-actions, .subtable td.claim-actions { width: 1%; white-space: normal; }
  .subtable td.claim-actions > div {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  }

  .empty-line {
    padding: 18px; text-align: center;
    color: var(--ink-faint); font-size: 13px; font-style: italic;
  }

  /* Visually hidden — for screenreader-only labels */
  .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  /* ---- spec-ui-01: regions and shells (additive; appended, never edited above) ---- */
  /* The region id before every panel title — how we and Jo name the same thing. */
  .region-id {
    font: 500 11px ui-monospace, Menlo, monospace;
    color: var(--f-faint);       /* spec-ui-02 §4.9 */
    margin-right: 8px;
    letter-spacing: .04em;
  }
  /* An unwired panel's empty state: names what will fill it and where the data is. */
  .panel-empty {
    color: var(--f-soft);
    font-size: 13px;
    line-height: 1.55;
    padding: 4px 0;
  }
  /* B2's one-line band: left rule, pale field, room for a pill and a date. */
  .status-band {
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
    border-left: 4px solid var(--f-rule);
    padding: 10px 12px;
    background: var(--f-head);
  }

  /* ---- spec-ui-03 §1: B2's band, wired. Colour is the ONLY thing the panel
     decides — by days in hand: green > 60, amber 15–60, red ≤ 14. The
     figures come from the payload's derived block; nothing is computed here. */
  .status-band.go   { border-left-color: var(--f-go); }
  .status-band.warn { border-left-color: var(--f-warn); }
  .status-band.bad  { border-left-color: var(--f-bad); }
  .status-band.ended { border-left-color: var(--f-faint); }   /* spec-ui-04 §1: run ended — no red */
  /* spec-ui-04 §2: the effective date beneath a blank colour-layer field */
  /* spec-ui-04 §6: a tree field no branch reaches — greyed, not hidden */
  .unreachable label, .unreachable select { opacity: .5; }
  .reach-reason { font-size: 12px; color: var(--f-faint); margin: -8px 0 10px; min-height: 0; }
  /* spec-ui-04 §7: question selection and the sent tag */
  .q-head input[type=checkbox], .oi-record-head input[type=checkbox] { margin: 0 6px 0 0; vertical-align: -1px; }
  .tag.sent { border-color: var(--f-go); color: var(--f-go); text-transform: none; letter-spacing: 0; }
  .tag.bad { border-color: var(--f-bad); color: var(--f-bad); }
  /* INTERIM, retire when B109 / B153 land: the onshore and held-nights holds (amber, in their own words) */
  .tag.hold { border-color: var(--f-warn); color: var(--f-warn); text-transform: none; letter-spacing: 0; }
  .oi-row.deferred { opacity: .6; }   /* spec-ui-05 §5.5: asked when the trip ends */
  /* spec-ui-05 §3: the customer entered this trip */
  .provenance {
    border-left: 3px solid var(--f-sea); background: var(--f-head);
    padding: 6px 10px; margin-bottom: 10px; font-size: 13px; font-weight: 600;
  }
  .provenance .note { font-weight: 400; }
  .copy-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 10px; font-size: 13px; }
  /* spec-ui-04 §5: the date widget's invalid state */
  .date-input.invalid { border-color: var(--f-bad) !important; }
  .date-err { color: var(--f-bad); font-size: 12px; margin: -8px 0 10px; }
  .eff-date { font-size: 12px; margin-top: -8px; margin-bottom: 10px; }
  .eff-date.ok { color: var(--f-faint); }
  .eff-date.bad { color: var(--f-bad); font-weight: 600; }
  dd .eff-date { margin: 0; }
  .status-band .band-pill {
    display: inline-block; padding: 2px 10px; border-radius: 11px;
    font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap;
    background: var(--f-faint);
  }
  /* spec-ui-08 §3: the reconciliation variance — the band's warm emphasis */
  .recon { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin: 6px 0 4px; font-size: 13px; }
  .recon-pill { display: inline-block; padding: 2px 10px; border-radius: 11px; font-size: 12px; font-weight: 600;
                color: #fff; white-space: nowrap; background: var(--f-warn); font-variant-numeric: tabular-nums; }
  .recon-why { flex-basis: 100%; }
  .status-band.go   .band-pill { background: var(--f-go); }
  .status-band.warn .band-pill { background: var(--f-warn); }
  .status-band.bad  .band-pill { background: var(--f-bad); }
  .status-band .band-main { font-weight: 600; font-size: 15px; }
  .status-band .band-note { color: var(--f-soft); font-size: 13px; }
  .status-band a { color: var(--f-sea); }

  /* ---- spec-ui-03 §2: B9 — the walk, the coverage, the traces, the defects.
     Shared with B6 (§3): .sec-lbl, .defect-row, .rec, .tag, .note, .mono. */
  .sec-lbl {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--f-faint); margin: 14px 0 6px;
  }
  .sec-lbl:first-child { margin-top: 0; }
  .note { color: var(--f-soft); font-size: 12.5px; }
  .mono { font: 500 12px ui-monospace, Menlo, monospace; }
  .why-status { margin-left: auto; font-size: 12px; color: var(--f-soft);
                text-transform: none; letter-spacing: 0; font-weight: 500; }
  .run-meta { margin-top: 6px; }
  .walk tr.break-row td { color: var(--f-bad); background: #fbf1ef; border-left: 3px solid var(--f-bad); }
  .cov-ranges { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; font-size: 13px; }
  .cov-ranges .range { white-space: nowrap; }
  /* spec-ui-07 §4: the v5 frame — two columns above 1080 px, one below;
     work on the left, reference on the right. Panels stay 1px / 4px / no
     shadow / --f-head strip / 12px body (spec-ui-02 §4). */
  .detailview { max-width: 1500px; }
  .cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr); gap: 16px; align-items: start; }
  @media (max-width: 1080px) { .cols { grid-template-columns: 1fr; } }
  .cols .panel { margin-bottom: 16px; }
  .cols .panel:last-child { margin-bottom: 0; }
  /* spec-ui-14 §1: the customer page and the claims page put their panels
     straight into .detailview now that the two-column frame is gone, so the
     spacing .cols used to give them has to come from here too. */
  .detailview > .panel { margin-bottom: 16px; }
  .detailview > .panel:last-child { margin-bottom: 0; }
  /* spec-ui-06 §2: the timeline's time-ashore rows and the add-time-abroad form */
  tr.gap-row { cursor: default; background: var(--f-head); }
  tr.gap-row:hover { background: var(--f-head); }
  tr.gap-row td { color: var(--f-soft); font-size: 12.5px; padding-top: 5px; padding-bottom: 5px; }
  tr.gap-row .gap-label { font-style: italic; }
  tr.gap-form-row { cursor: default; }
  .gap-form { padding: 10px 12px; }
  .gap-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
  .gap-form .acts { display: flex; gap: 8px; margin-top: 4px; }
  .ev-none { color: var(--f-warn); font-weight: 600; }
  /* ---- spec-ui-12 §2: the trip expansion, as the owner drew it -------------
     One block inside B5 — the four labelled groups, then the trip's questions,
     then the admin log. The pencil is top-right; editing swaps the read view
     for the same fields in the SAME block, never a second, larger box. No
     tint, no yellow: the owner's words for the old one were "one of the worst
     visual areas of the whole place, inherited terrible legacy design".
     The groups lay out as many across as the width allows and stack to one
     under 900px, where the whole page is already one column. */
  td.trip-expansion {
    background: var(--f-head); padding: 14px 20px 16px;
    border-bottom: 1px solid var(--f-rule);
  }
  td.trip-expansion.editing { background: var(--f-panel); }
  .trip-expansion-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .trip-expansion-title { font-weight: 600; font-size: 13.5px; display: flex; align-items: baseline; gap: 8px; }
  .trip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 22px; }
  @media (max-width: 900px) { .trip-grid { grid-template-columns: 1fr; } }
  .trip-grid-head {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--f-soft);
    border-bottom: 1px solid var(--f-hair); padding-bottom: 3px; margin-bottom: 6px;
  }
  .trip-grid-line { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 2px 0; }
  .trip-grid-label { color: var(--f-soft); min-width: 74px; }
  .trip-grid-value.none { color: var(--ink-faint); }
  /* editing uses the same field groups as the read view; field() already
     carries its own block spacing inline, so the columns need nothing added.
     spec-ui-13 §2: the read view's last column is the change log — it wraps
     inside its own column, which .trip-log-line already does. */
  .trip-reason { max-width: 520px; margin-top: 12px; }
  .trip-sec-head {
    font-size: 12px; font-weight: 700; margin: 16px 0 6px;
    padding-top: 10px; border-top: 1px solid var(--f-hair);
  }
  .trip-questions .oi-row.q { margin: 6px 0; }
  .trip-answered { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13px; padding: 2px 0; color: var(--f-soft); }
  /* spec-ui-12 §5: a node answered by an admin is settled — shown as
     answered, with the reason and who, and no buttons to press. */
  .trip-answered.locked { border-left: 2px solid var(--f-rule); padding-left: 8px; }
  /* the reason asked at the moment of answering (D-lk) */
  .reason-ask { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .reason-input {
    flex: 1 1 280px; min-width: 200px; padding: 4px 8px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 5px;
    background: var(--surface); color: var(--ink); font-family: inherit;
  }
  .trip-log-line {
    display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
    font-size: 12.5px; padding: 3px 0; border-bottom: 1px solid var(--f-hair);
  }
  .trip-log-line:last-child { border-bottom: 0; }
  .trip-log-when { color: var(--f-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .trip-log-move { font-weight: 600; }
  .trip-log-reason { color: var(--f-soft); font-style: italic; }
  /* spec-ui-07 §4: one-line trip rows */
  .trip-vessel { font-weight: 600; white-space: nowrap; }
  .trip-dates, .trip-days { white-space: nowrap; }
  .trip-route { color: var(--f-soft); font-size: 12.5px; }
  .tag.open-marker { margin-left: 6px; border-color: var(--f-warn); color: var(--f-warn); text-transform: none; letter-spacing: 0; }
  /* spec-ui-12 §1: the marker is a link to the trip's questions in B6; it
     keeps the tag's look and takes the underline only on hover. */
  a.tag.open-marker { text-decoration: none; cursor: pointer; }
  a.tag.open-marker:hover { text-decoration: underline; }
  /* spec-ui-07 §2–§3: B6 sections (not collapsibles), the outstanding list, evidence on file */
  .oi-section-head {
    font-size: 13px; font-weight: 700; padding: 6px 0; margin: 10px 0 6px;
    border-bottom: 1px solid var(--f-hair); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .oi-group:first-child .oi-section-head { margin-top: 0; }
  .oi-customer-head .note { margin-left: auto; }
  details.cust-rec { border-left: 2px solid var(--f-hair); margin: 4px 0; padding: 4px 0 4px 10px; font-size: 13px; }
  details.cust-rec > summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
  details.cust-rec > summary .cust-rec-label { font-weight: 600; }
  details.cust-rec > summary .cust-rec-count { font-variant-numeric: tabular-nums; min-width: 1.5em; text-align: right; font-weight: 600; }
  details.cust-rec.deferred { opacity: .6; }
  .cust-q { padding: 4px 0 4px 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
  .cust-q.deferred { color: var(--f-soft); }
  .cust-answer-link { font-size: 12px; color: var(--f-sea); }
  .cust-answer { flex-basis: 100%; }
  .ev-on-file { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 4px; }
  .ev-btn { font-size: 12px; padding: 2px 8px; }
  /* spec-ui-05 §5: Remind; the ladder tag (B8 itself is gone — spec-ui-07 §1) */
  .thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .msg { border: 1px solid var(--f-hair); border-radius: 4px; padding: 8px 10px; font-size: 13px; max-width: 80%; }
  .msg.outbound { align-self: flex-end; background: var(--f-head); }
  .msg.inbound  { align-self: flex-start; background: var(--f-panel); border-color: var(--f-rule); }
  .msg-meta { font-size: 12px; color: var(--f-soft); margin-bottom: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
  .msg-subject { font-weight: 600; margin-bottom: 2px; }
  .msg-body { white-space: pre-wrap; }
  .compose .acts { display: flex; gap: 8px; margin-top: 6px; }
  /* spec-ui-17 §3: the channel is FIXED to Support183 and is not a control,
     so it reads as a statement above the composer rather than a selector. */
  .msg-fixed-channel {
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
    padding: 6px 8px; margin-bottom: 10px; font-size: 12.5px;
    border-left: 3px solid var(--f-rule); background: var(--f-head);
  }
  details.paste { margin-top: 12px; font-size: 13px; }
  details.paste summary { cursor: pointer; color: var(--f-sea); }
  .remind-btn { margin-left: 8px !important; }
  .oi-record-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .tag.sent.overdue { border-color: var(--f-warn); color: var(--f-warn); }
  /* spec-ui-09 §5: A1 — the broadcast panel on its own page (#/notices) */
  .broadcast-head { margin-bottom: 6px; font-size: 13px; }
  .broadcast .acts { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px; }
  .broadcast .acts > div { margin-bottom: 0; }
  /* spec-ui-05 §4: the queue grid's conditional colour and the quiet footer */
  td.q-go   { color: var(--f-go);   font-weight: 600; }
  td.q-warn { color: var(--f-warn); font-weight: 600; }
  td.q-bad  { color: var(--f-bad);  font-weight: 600; }
  td.num { text-align: center; font-variant-numeric: tabular-nums; }
  /* spec-ui-09 §2: numeric and status columns centred; Customer left */
  th.q-center, td.q-center { text-align: center; }
  .q-name { font-weight: 600; }
  /* spec-ui-04 §3: one line per record, one open at a time */
  .trace-line {
    display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
    padding: 5px 8px; border-top: 1px solid var(--f-hair); font-size: 13px; cursor: pointer;
  }
  .trace-line:first-child { border-top: 0; }
  .trace-line:hover { background: var(--row-hover); }
  .trace-line.open { background: var(--f-head); }
  .trace-line .trace-rec { font-weight: 600; }
  .trace-flag {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    border-radius: 2px; padding: 0 5px; border: 1px solid var(--f-rule); color: var(--f-soft);
    min-width: 92px; text-align: center;
  }
  .trace-line.f-error .trace-flag  { border-color: var(--f-bad);  color: var(--f-bad); }
  .trace-line.f-open  .trace-flag  { border-color: var(--f-warn); color: var(--f-warn); }
  .trace-line.f-review .trace-flag { border-color: var(--f-warn); color: var(--f-warn); }
  .trace-line.f-ok .trace-flag     { border-color: var(--f-go);   color: var(--f-go); }
  .trace-detail { padding: 6px 12px 10px 28px; border-left: 3px solid var(--f-hair); margin: 0 0 6px 8px; }
  .trace-run { padding: 4px 0; font-size: 13px; }
  .trace-run-head { font-weight: 500; }
  .trace-steps { margin: 4px 0 6px; padding-left: 26px; font-size: 12.5px; line-height: 1.6; }
  .rec { color: var(--f-sea); }
  a.rec { text-decoration: none; }
  a.rec:hover { text-decoration: underline; }
  .tag {
    border: 1px solid var(--f-rule); border-radius: 2px; padding: 0 5px;
    font-size: 11px; color: var(--f-soft); text-transform: uppercase; letter-spacing: .04em;
  }
  .defect-row {
    border-left: 3px solid var(--f-bad); background: #fbf1ef;
    padding: 6px 10px; margin: 4px 0; font-size: 13px;
  }
  .defect-row.advisory { border-left-color: var(--f-warn); background: var(--f-head); }
  .defect-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
  .defect-msg { margin-top: 2px; }

  /* ---- spec-ui-03 §3: B6 — open items. Groups, rows, the guide form. ---- */
  .oi-group { margin-bottom: 12px; }
  .oi-group-head {
    font-size: 13px; font-weight: 700; padding: 6px 0; cursor: default;
    border-bottom: 1px solid var(--f-hair); margin-bottom: 6px;
  }
  summary.oi-group-head { cursor: pointer; }
  summary.oi-group-head:hover { color: var(--f-sea); }
  details.oi-hidden > summary {
    cursor: pointer; font-size: 13px; color: var(--f-soft); padding: 8px 10px;
    background: var(--f-head); border: 1px dashed var(--f-rule); border-radius: 3px;
  }
  details.oi-hidden[open] > summary { margin-bottom: 10px; }
  .group-note { margin: 2px 0 8px; }
  .oi-record { border-top: 1px solid var(--f-hair); padding: 8px 0; }
  .oi-record-head { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
  .oi-row { padding: 6px 0 6px 10px; font-size: 13px; }
  .oi-row.q { border-left: 2px solid var(--f-hair); margin: 4px 0; }
  .oi-row.judge { border-left: 2px solid var(--f-warn); margin: 4px 0; }
  .oi-row.judge > summary { cursor: pointer; }
  .oi-row.judge > summary:hover { color: var(--f-sea); }
  .oi-body { padding: 6px 0 4px 14px; }
  .oi-body .ask { margin-bottom: 6px; }
  .q-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
  .opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
  .opt-btn {
    padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer;
    background: var(--f-panel); color: var(--f-ink);
    border: 1px solid var(--f-rule); border-radius: 3px; text-align: left;
  }
  .opt-btn:hover { border-color: var(--f-sea); color: var(--f-sea); }
  .opt-btn:disabled { opacity: .5; cursor: default; }
  .opt-btn.raw { font-family: ui-monospace, Menlo, monospace; border-style: dashed; }
  .err { color: var(--f-bad); font-size: 12px; min-height: 14px; margin-top: 4px; }
  .guide { margin-top: 8px; padding: 8px 10px; background: var(--f-head); border: 1px solid var(--f-hair); border-radius: 3px; }
  .guide .preamble { font-size: 12.5px; color: var(--f-soft); margin: 6px 0; line-height: 1.5; }
  .guide .check-src { margin: -4px 0 4px 26px; }
  .guide .acts { display: flex; gap: 8px; margin-top: 8px; }
  .stop-block {
    border-left: 3px solid var(--f-bad); background: #fbf1ef;
    padding: 8px 10px; margin: 8px 0; font-size: 13px;
  }
  .disabled-note {
    border-left: 3px solid var(--f-warn); background: var(--f-head);
    padding: 8px 10px; margin: 8px 0; font-size: 13px;
  }

  /* ---- spec-ui-02 §5: the broadcast composer (A1) — reserved, not built ----
     Outbound: it writes to every customer's app, so it must never read as a
     search field. Heavier border by design; heading strip + tag say so. */
  .broadcast {
    border: 2px solid var(--f-ink);
    border-radius: 4px;
    background: var(--f-head);
    padding: 10px 12px;
  }
  .broadcast .tag {
    border: 1px solid var(--f-ink);
    border-radius: 2px;
    padding: 1px 6px;
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: .05em;
  }