/* WORK RUN — shared styles for a "run" view (components/workRun.js) and the Classic | New switch (components/layoutPref.js).
 * Billing New is the first run (billingRun.js); Pay New reuses these. Skin B: tokens only, square corners, gold only as
 * a marker (the pressed stage, the opened row, the one gold bulk button). Same density as the app: 12 px type, one-line
 * 30 px rows, a 2 px rule under the strip and the table head. */

/* ── The Classic | New switch ── */
.emr-layout-seg { display: inline-flex; align-items: center; gap: 0; margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.emr-layout-seg-lbl { font-size: 10.5px; color: var(--text3); margin-right: 5px; }
.emr-layout-seg button { font-weight: 600; font-size: 11px; padding: 2px 8px; border: 1px solid var(--border2); border-right-width: 0; border-radius: 0; background: var(--bg); color: var(--text); cursor: pointer; line-height: 1.4; }
.emr-layout-seg button:last-child { border-right-width: 1px; }
.emr-layout-seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.emr-layout-seg button:focus-visible { outline: 2px solid var(--ink-info); outline-offset: 1px; }

/* ── Stage strip ── */
.run-strip { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: var(--rule-w, 2px) solid var(--rule, var(--text)); background: var(--bg); }
.run-stage { display: grid; gap: 0; text-align: left; padding: 5px 14px 5px 10px; border: 0; border-right: 1px solid var(--border); background: none; color: var(--text); cursor: pointer; min-width: 92px; }
.run-stage b { font-family: var(--emr-font-mono, var(--mono)); font-weight: 800; font-size: 16px; line-height: 1.1; }
.run-stage span { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text3); font-weight: 700; }
.run-stage:hover { background: var(--bg2); }
.run-stage[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--ink-gold); }
.run-stage[aria-pressed="true"] span { color: var(--text); }
.run-stage:focus-visible { outline: 2px solid var(--ink-info); outline-offset: -2px; }
/* STATUS-COLOURED TILES (Ed 2026-10-04: "the stages tiles need to have those colors too"): a tile's count and label take
   its stage's ink and a 3 px cap of it; the pressed tile is FILLED with the ink (ground-coloured text), so it stays the
   unmistakable one. An attention stage with rows turns its cap red (it was a red count; the count now carries the
   stage's own ink). "All" has no stage ink and keeps the plain text colours. */
.run-stage[class*="tone-"] { box-shadow: inset 0 3px 0 var(--run-ink, transparent); }
.run-stage[class*="tone-"] b { color: var(--run-ink, var(--text)); }
.run-stage[class*="tone-"] span { color: var(--run-ink, var(--text3)); }
.run-stage.is-att { box-shadow: inset 0 3px 0 var(--ink-bad); }
.run-stage[aria-pressed="true"],
.run-stage[aria-pressed="true"]:hover { background: var(--run-ink, var(--text)); }
.run-stage[aria-pressed="true"] b,
.run-stage[aria-pressed="true"] span { color: var(--bg); }
.run-stage-sub { min-width: 0; padding: 5px 10px 5px 8px; background: var(--bg2); }
.run-stage-sub b { font-size: 13px; }

/* ── Messages · bulk bar ── */
.run-msg { padding: 5px 12px; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--border); background: var(--bg2); color: var(--text2); }
.run-msg.tone-ok { color: var(--ink-ok); }
.run-msg.tone-warn { color: var(--ink-gold); }
.run-msg.tone-bad { color: var(--ink-bad); }
.run-bulk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 12px; background: var(--text); color: var(--bg); font-size: 12px; }
.run-bulk b { font-family: var(--emr-font-mono, var(--mono)); }
.run-bulk-btn, .run-bulk-clear { border: 1px solid var(--bg); background: transparent; color: var(--bg); padding: 2px 10px; font: inherit; font-weight: 700; font-size: 12px; cursor: pointer; border-radius: 0; }
/* the gold (primary) bulk action — BRIGHT brand gold with near-black ink in BOTH themes (≈10:1). It was var(--ink-gold) +
   var(--text): 3.32:1 light / 1.84:1 dark, under AA for 12 px (aa's measurement 2026-10-04; DEFECT). */
/* The FIXED brand gold, not var(--emr-gold): that is var(--accent), which the user's accent picker can turn dark. */
.run-bulk-btn.is-gold { background: #F5A800; color: #111; border-color: #F5A800; }
.run-bulk-btn:disabled { opacity: .45; cursor: default; }
.run-bulk-clear { border-color: transparent; text-decoration: underline; }
.run-bulk-msg { margin-left: auto; }

/* ── Status inks (Ed 2026-10-04) ── ONE map from a stage tone to its ink, shared by the stage tile, the row's stage chip
   and its next-step button on every New view, so the three read as one system. Only skin-b's existing text inks (no new
   palette). Billing's "invoiced" is mid-pipeline (blue) where Orders' is done (green) — billing-new.css overrides that one. */
:is(.run-stage, .run-chip, .run-next):is(.tone-pending, .tone-pre, .tone-other, .tone-closed) { --run-ink: var(--text2); }
:is(.run-stage, .run-chip, .run-next):is(.tone-assigned, .tone-dispatched, .tone-atrts) { --run-ink: var(--ink-info); }
:is(.run-stage, .run-chip, .run-next):is(.tone-rolling, .tone-moving) { --run-ink: var(--ink-teal, var(--ink-info)); }
:is(.run-stage, .run-chip, .run-next):is(.tone-paperwork, .tone-delivered, .tone-hold) { --run-ink: var(--ink-gold); }
:is(.run-stage, .run-chip, .run-next):is(.tone-ready, .tone-funded) { --run-ink: var(--ink-violet, var(--ink-info)); }
:is(.run-stage, .run-chip, .run-next):is(.tone-invoiced, .tone-settled, .tone-paid) { --run-ink: var(--ink-ok); }
:is(.run-stage, .run-chip, .run-next):is(.tone-needs_truck, .tone-collect) { --run-ink: var(--ink-bad); }
.run-chip[class*="tone-"] { color: var(--run-ink, var(--text2)); }
.run-chip[class*="tone-"]::before { border-color: var(--run-ink, var(--text)); }

/* SLIM NEXT STEP — shared by Orders / Manifests / Billing New (Ed 2026-10-03 "slimmer", again 2026-10-04 "slimmer"):
   no vertical padding — the line box alone makes the 24 px WCAG 2.2 target — 6 px a side, one line. Pay New copies these
   tokens. */
:root { --run-next-h: 24px; --run-next-px: 6px; --run-next-fs: 11px; --run-next-fw: 600; }
:is(#panel-manifest.mfl-new .mfr-run, #panel-orders.ord-new .ord-run, #panel-accounting.acc-new .bill-run) .run-next {
  min-width: 0; min-height: var(--run-next-h); padding: 0 var(--run-next-px); font-size: var(--run-next-fs); font-weight: var(--run-next-fw);
  line-height: calc(var(--run-next-h) - 2px); letter-spacing: .01em; white-space: nowrap; }

/* STICKY COLUMN HEADER (Ed 2026-10-04: "the column header scrolls away, need to fix it in place"): on the three New views
   the head row sticks right under the sticky stage bar. --run-head-top is the bar's MEASURED height (workRun.pinHead —
   the bar wraps at phone width); an opaque ground so rows never show through; the 2 px rule is a shadow because a
   collapsed-table border stays behind with the table instead of travelling with a stuck cell. Under the bar (z 6). */
:is(#panel-manifest.mfl-new .mfr-run, #panel-orders.ord-new .ord-run, #panel-accounting.acc-new .bill-run) .run-table > thead > tr > th {
  position: sticky; top: var(--run-head-top, 0px); z-index: 5; background: var(--bg); border-bottom: 0;
  box-shadow: inset 0 calc(-1 * var(--rule-w, 2px)) 0 var(--rule, var(--text)); }

/* ── Table ── */
.run-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--bg); }
.run-caption { text-align: left; padding: 4px 8px; font-size: 11px; color: var(--text3); }
.run-th { text-align: left; padding: 5px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); border-bottom: var(--rule-w, 2px) solid var(--rule, var(--text)); white-space: nowrap; }
.run-th.is-right { text-align: right; }
.run-th-sel { width: 30px; border-bottom: var(--rule-w, 2px) solid var(--rule, var(--text)); }
.run-row td { padding: 3px 8px; height: 30px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; color: var(--text); }
.run-row { cursor: pointer; }
.run-row:hover td { background: var(--bg2); }
.run-row:focus-visible { outline: 2px solid var(--ink-info); outline-offset: -2px; }
.run-row[aria-expanded="true"] td { background: var(--bg2); }
.run-row[aria-expanded="true"] td:first-child { box-shadow: inset 3px 0 0 var(--ink-gold); }
.run-td-num { font-family: var(--emr-font-mono, var(--mono)); font-weight: 600; text-align: right; }
.run-td-num.is-est { color: var(--text3); font-weight: 500; }
.run-td-load b { font-weight: 700; }
.run-sm { display: block; font-size: 10.5px; color: var(--text3); line-height: 1.1; }
.run-empty td { padding: 18px 12px; color: var(--text3); text-align: center; }

/* ── Stage chip · paperwork · next step ── */
.run-chip { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--text2); }
.run-chip::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: 0; border: 1px solid var(--text); background: var(--bg); }
.run-chip.tone-paperwork { color: var(--ink-gold); } .run-chip.tone-paperwork::before { border-color: var(--ink-gold); }
.run-chip.tone-invoiced::before { background: var(--text3); border-color: var(--text3); }
.run-chip.tone-atrts { color: var(--ink-info); } .run-chip.tone-atrts::before { background: var(--ink-info); border-color: var(--ink-info); }
.run-chip.tone-funded { color: var(--ink-violet, var(--ink-info)); } .run-chip.tone-funded::before { background: var(--ink-violet, var(--ink-info)); border-color: var(--ink-violet, var(--ink-info)); }
.run-chip.tone-paid { color: var(--ink-ok); } .run-chip.tone-paid::before { background: var(--ink-ok); border-color: var(--ink-ok); }
.run-chip.tone-hold { color: var(--ink-gold); } .run-chip.tone-hold::before { background: var(--ink-gold); border-color: var(--ink-gold); }
.run-chip.tone-collect { color: var(--ink-bad); } .run-chip.tone-collect::before { background: var(--ink-bad); border-color: var(--ink-bad); }
.run-chip.tone-pre, .run-chip.tone-other { color: var(--text3); } .run-chip.tone-pre::before, .run-chip.tone-other::before { border-color: var(--text3); }
.run-pw { font-family: var(--emr-font-mono, var(--mono)); font-size: 10.5px; font-weight: 700; color: var(--text3); margin-right: 8px; white-space: nowrap; }
.run-pw.is-miss { color: var(--ink-bad); }
.run-next { border: 1px solid var(--text); background: var(--bg); color: var(--text); padding: 2px 10px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; min-width: 110px; border-radius: 0; }
.run-next.is-go { background: var(--text); color: var(--bg); }
.run-next:disabled { border-color: var(--border2); color: var(--text3); background: var(--bg2); cursor: default; }
/* STATUS-COLOURED NEXT STEP (Ed 2026-10-04: "the button needs to have color that ties in with the status of next step"):
   a step carries its row's stage tone (workRun.nextStep `tone`) and takes that stage's ink — the filled go step is the ink
   with the ground as its text, an available step is ink on the ground. Same pair either way, so the ≥ 4.5:1 skin-b keeps
   for every --ink-* on --bg holds for both. A disabled step stays grey. */
.run-next[class*="tone-"]:not(:disabled) { border-color: var(--run-ink, var(--text)); color: var(--run-ink, var(--text)); background: var(--bg); }
.run-next.is-go[class*="tone-"]:not(:disabled) { background: var(--run-ink, var(--text)); color: var(--bg); }
.run-next:focus-visible { outline: 2px solid var(--ink-info); outline-offset: 1px; }
.run-next-none { color: var(--text3); }
.run-flag { font-size: 10.5px; font-weight: 700; color: var(--ink-gold); margin-left: 6px; }
.run-flag.is-bad { color: var(--ink-bad); }
.run-role { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); margin-left: 4px; }

/* ── The band under an opened row ── */
.run-band td { padding: 0; background: var(--bg2); box-shadow: inset 3px 0 0 var(--ink-gold); border-bottom: var(--rule-w, 2px) solid var(--rule, var(--text)); }
.run-band-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.run-zone { padding: 10px 12px; border-right: 1px solid var(--border); display: grid; gap: 8px; align-content: start; white-space: normal; }
.run-zone:last-child { border-right: 0; }
.run-zone h5 { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); display: flex; gap: 8px; align-items: baseline; }
.run-zone h5 b { margin-left: auto; font-family: var(--emr-font-mono, var(--mono)); font-size: 12px; color: var(--text); letter-spacing: 0; }
@media (max-width: 900px) { .run-band-in { grid-template-columns: 1fr; } .run-zone { border-right: 0; border-bottom: 1px solid var(--border); } }

/* ── Ticks · in-place confirmation (P1-b) ── */
.run-td-sel { width: 30px; text-align: center; }
.run-td-sel input, .run-th-sel input { margin: 0; vertical-align: middle; accent-color: var(--text); }
.run-confirm { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.run-confirm-q { font-size: 11.5px; font-weight: 600; color: var(--text); border-left: 3px solid var(--ink-gold); padding-left: 8px; }
.run-confirm.is-busy { color: var(--text3); font-weight: 600; }
.bill-run-msg:empty { display: none; }

/* ── Band contents: key-value lines, a checklist, a history list (P1-c) ── */
.run-band-loading { color: var(--text3); font-weight: 600; }
.run-lines { display: grid; gap: 2px; }
.run-kv { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 12px; color: var(--text2); }
.run-kv b { font-family: var(--emr-font-mono, var(--mono)); font-weight: 600; color: var(--text); white-space: nowrap; }
.run-kv.is-tot { border-top: var(--rule-w, 2px) solid var(--rule, var(--text)); padding-top: 4px; margin-top: 2px; color: var(--text); }
.run-kv.is-tot b { font-weight: 800; }
.run-kv.is-open b { color: var(--ink-bad); }
.run-kv.is-muted, .run-kv.is-muted b { color: var(--text3); font-weight: 500; }
.run-kv-head { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin-top: 6px; }
.run-chk { display: grid; gap: 3px; font-size: 12px; }
.run-chk span { color: var(--text2); }
.run-chk span.is-no { color: var(--ink-bad); font-weight: 700; }
.run-chk span.is-ok { color: var(--text); }
.run-chk span.is-muted { color: var(--text3); }
.run-hist { margin: 0; padding-left: 16px; display: grid; gap: 3px; font-size: 11.5px; color: var(--text2); }
.run-hist b { font-weight: 600; color: var(--text); }
.run-hist .run-sm { display: inline; margin-left: 6px; }
.run-band-step { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.run-band-link { font-size: 12px; font-weight: 700; color: var(--ink-info); text-decoration: none; }
.run-band-link:hover { text-decoration: underline; }