/* =============================================================================
   BCA Sales & Operations Command Center — shared theme (docs/SPEC.md §12, §19), brand system v4,
   slice 7 polish. Tokens, page anatomy, frame (white top bar + navy sidebar
   with module groups), badges, chips, pills, KPI cards, sticky section and
   table headers, Dispatch Board, week roster, TV mode, sign-in, print.
   No literal colours belong in page CSS: everything references a token here.

   Colour roles: navy = structure (sidebar, dark surfaces); BCA blue = actions
   and links; six zone colours = wherever a zone appears; one colour per
   account manager; status colours stay Zoho-matched; red = problems,
   green = done. Ground stays light and cards white so colour reads as
   structure, not noise. Type: IBM Plex Sans (self-hosted, OFL), five sizes.
   ============================================================================= */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-latin-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* base: navy that is not in the logo (sidebar, TV wall, sign-in panel) */
  --bca-navy: #0F2B46;
  --bca-navy-2: #163A5E;

  /* accents from the logo */
  --bca-blue: #167DB2;
  --bca-blue-ink: #136A98;      /* the same blue, darkened enough for 4.5:1 text on white */
  --bca-blue-deep: #00569C;
  --bca-cyan: #28AEE3;
  --bca-green: #3AAA35;
  --bca-green-light: #90CF44;
  --bca-sky: #14B5F5;
  --brand-gradient: linear-gradient(90deg, #00569C 0%, #167DB2 30%, #28AEE3 60%, #90CF44 100%);

  /* zone colours: the raw colour for bands, edges, rings and squares; the -ink variant for text on white */
  --zone-blue: #167DB2;   --zone-blue-ink: #136A98;
  --zone-deep: #00569C;   --zone-deep-ink: #00569C;
  --zone-cyan: #28AEE3;   --zone-cyan-ink: #0B6E8F;
  --zone-green: #3AAA35;  --zone-green-ink: #237A20;
  --zone-lime: #90CF44;   --zone-lime-ink: #3F7D0F;
  --zone-sky: #14B5F5;    --zone-sky-ink: #0B6F94;
  --zone-navy: #0F2B46;   --zone-navy-ink: #0F2B46;
  --zone-violet: #7C3AED; --zone-violet-ink: #5B21B6;
  --zone-rose: #DB2777;   --zone-rose-ink: #9D174D;
  --zone-amber: #D97706;  --zone-amber-ink: #92400E;
  --zone-unknown: #B91C1C; --zone-unknown-ink: #B91C1C;
  --zone-pickup: #F59E0B; --zone-pickup-ink: #92400E;

  /* account manager colours: fg on bg pairs at 4.5:1 or better */
  --am-blue-fg: #0B4F75;   --am-blue-bg: #E1F0F9;   --am-blue: #167DB2;
  --am-teal-fg: #0F766E;   --am-teal-bg: #D9F2EF;   --am-teal: #0F766E;
  --am-violet-fg: #5B21B6; --am-violet-bg: #EDE9FE; --am-violet: #7C3AED;
  --am-rose-fg: #9D174D;   --am-rose-bg: #FCE7F3;   --am-rose: #DB2777;
  --am-amber-fg: #92400E;  --am-amber-bg: #FEF3C7;  --am-amber: #D97706;
  --am-green-fg: #166534;  --am-green-bg: #DCFCE7;  --am-green: #16A34A;
  --am-slate-fg: #334155;  --am-slate-bg: #E2E8F0;  --am-slate: #64748B;
  --am-cyan-fg: #155E75;   --am-cyan-bg: #CFFAFE;   --am-cyan: #0891B2;

  /* ground and ink */
  --ground: #F4F7FA;
  --surface: #FFFFFF;
  --ink: #111827;
  --ink-2: #4B5563;
  --ink-3: #6B7280;
  --ink-4: #9CA3AF;
  --hair: #E5E7EB;
  --wash: rgba(22, 125, 178, 0.06);
  --on-navy: #FFFFFF;
  --on-navy-2: rgba(255, 255, 255, 0.72);
  --on-navy-3: rgba(255, 255, 255, 0.5);

  /* badge tints (text/background pairs meet WCAG AA 4.5:1; checked by tests) */
  --tint-amber-bg: #FEF3C7;   --tint-amber-fg: #78350F;
  --tint-orange-bg: #FFEDD5;  --tint-orange-fg: #7C2D12;
  --tint-blue-bg: #DBEAFE;    --tint-blue-fg: #1E3A8A;
  --tint-green-bg: #DCFCE7;   --tint-green-fg: #14532D;
  --tint-red-bg: #FEE2E2;     --tint-red-fg: #7F1D1D;
  --tint-cyan-bg: #CFFAFE;    --tint-cyan-fg: #164E63;
  --tint-neutral-bg: #F1F5F9; --tint-neutral-fg: #334155;

  /* severity */
  --edge-urgent: #B91C1C;
  --edge-attention: #B45309;
  --edge-info: var(--bca-blue);
  --edge-clear: var(--bca-green);
  --sev-urgent: #B91C1C;
  --sev-attention: #92400E;
  --sev-info: #1E3A8A;
  --sev-clear: #14532D;

  /* status words on navy (TV mode) */
  --tv-done: #90CF44;
  --tv-pending: #FBBF24;
  --tv-partial: #28AEE3;

  /* type: one family, five sizes, four weights */
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f1: 12px; --f2: 13px; --f3: 15px; --f4: 20px; --f5: 32px;
  --t1: 22px; --t2: 28px; --t3: 36px; --t4: 56px; --t5: 72px;

  /* spacing: 4 px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r-sm: 8px; --r: 8px; --r-lg: 8px;
  --float: 0 12px 32px rgba(15, 43, 70, 0.18);
  --motion: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --topbar-h: 64px; --rule-h: 4px; --side-w: 240px; --rail-w: 64px;
  --stick: 0px;   /* top offset for sticky table and section headers (the board's day tabs raise it) */
}

/* ---- base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: var(--f2)/1.5 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--bca-blue-deep); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
h1 { color: var(--bca-blue-deep); }
.num, .money, td.num, .kpi .v, .score .v { font-variant-numeric: tabular-nums; }
.money { text-align: right; }
.ic { width: 14px; height: 14px; flex: none; }
.f1 { font-size: var(--f1); } .f2 { font-size: var(--f2); } .f3 { font-size: var(--f3); }
.f4 { font-size: var(--f4); } .f5 { font-size: var(--f5); letter-spacing: -0.02em; }
.muted { color: var(--ink-3); } .ink2 { color: var(--ink-2); } .dim { color: var(--ink-4); }
.cap { font-size: var(--f1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
a.link, .link { color: var(--bca-blue-ink); font-weight: 600; }
a.link:hover, .link:hover { text-decoration: underline; color: var(--bca-blue-deep); }
a.plain { color: var(--ink); font-weight: 600; } a.plain:hover { color: var(--bca-blue-ink); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--bca-cyan); outline-offset: 2px; border-radius: var(--r-sm); }
.side :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- surfaces ----------------------------------------------------------------- */
.surface { background: var(--surface); border-radius: var(--r); }
.floating { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--float); }
.hairline { border-top: 1px solid var(--hair); }
.tablewrap { background: var(--surface); border-radius: var(--r); }
@media (max-width: 900px) { .tablewrap { overflow-x: auto; } }
.tablewrap.scroll { overflow-x: auto; }   /* wide Zoho column sets scroll inside their surface, never the page */

/* ---- frame: white top bar with the logo, gradient rule, navy sidebar ---------------- */
.brand-top { background: var(--surface); height: var(--topbar-h); display: flex; align-items: center; padding: 0 var(--s5); gap: var(--s5); }
.brand-top .logo { width: 150px; height: auto; display: block; }
.brand-top .sync { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: var(--f2); }
.brand-top .sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--bca-green); display: inline-block; }
.brand-top .sync.stale i, .sync.stale i { background: var(--tint-red-fg); }
.sync.catching i { background: var(--edge-attention); }
.sync.never i { background: #9CA3AF; }
.sync.live i { background: var(--bca-green); }
.sync.stale { color: var(--tint-red-fg); font-weight: 600; }
.stale-banner { display: flex; align-items: center; gap: 10px; background: var(--tint-red-bg); color: var(--tint-red-fg); padding: 8px 16px; font-size: var(--f2); font-weight: 600; border-bottom: 1px solid #FCA5A5; }
.stale-banner .ic { width: 18px; height: 18px; flex: none; }
.stale-banner.tv { font-size: 28px; padding: 14px 32px; background: #7F1D1D; color: #fff; border: 0; }
body.tv .sync { display: inline-flex; align-items: center; gap: 8px; }
body.tv .sync i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: var(--bca-green); }
body.tv .sync.stale { color: #FCA5A5; }
.syncline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--f2); color: var(--ink-2); padding: 6px 0; }
.syncline .ic { width: 16px; height: 16px; animation: spin 1.6s linear infinite; }
.syncline.bad { color: var(--tint-red-fg); font-weight: 600; }
.syncline.bad .ic { animation: none; }
.chip.syncing { border-color: var(--bca-cyan); color: var(--bca-deep); margin-left: 6px; }
.chip.syncing .ic { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[data-invoice].flash, tr[data-invoice].flash td { animation: liveflash 1.6s ease-out; }
@keyframes liveflash { 0% { background-color: #DBEAFE; } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .syncline .ic, .chip.syncing .ic { animation: none; } [data-invoice].flash, tr[data-invoice].flash td { animation: none; } }
.brand-rule { height: var(--rule-h); background: var(--brand-gradient); }
.frame { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh - var(--topbar-h) - var(--rule-h)); }
.frame.rail { --side-w: var(--rail-w); }
.side { background: var(--bca-navy); color: var(--on-navy); display: flex; flex-direction: column; padding: var(--s3) 0 var(--s4); }
.side .wsname { padding: 4px var(--s4) var(--s3); }
.side .wsname .lbl { display: block; font-size: var(--f1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-3); font-weight: 600; }
.side .wsname b { display: block; color: var(--on-navy); font-size: var(--f3); font-weight: 600; margin-top: 2px; }
.side .wsname details { position: relative; }
.side .wsname summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.side .wsname summary::-webkit-details-marker { display: none; }
.side .wsname summary .ic { width: 14px; height: 14px; opacity: 0.7; }
.side .wsname .menu { position: absolute; left: 0; top: 100%; margin-top: 6px; min-width: 200px; background: var(--surface); color: var(--ink); border-radius: var(--r); box-shadow: var(--float); padding: 6px; z-index: 20; }
.side .wsname .menu a, .side .wsname .menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 6px; font: inherit; font-weight: 500; color: var(--ink); background: none; border: 0; text-align: left; cursor: pointer; }
.side .wsname .menu a:hover, .side .wsname .menu button:hover { background: var(--ground); }
.side .wsname .menu .on { font-weight: 700; color: var(--bca-blue-deep); }
.side .wsname .mini { display: none; }
.side nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--s3); }
.side nav a, .side nav button { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r); color: rgba(255, 255, 255, 0.86); font: inherit; font-weight: 500; position: relative; white-space: nowrap; background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; }
.side nav .ic { width: 18px; height: 18px; opacity: 0.9; flex: none; }
.side nav a:hover, .side nav button:hover { background: var(--bca-navy-2); color: var(--on-navy); }
.side nav a.on, .side nav button.on { background: var(--bca-navy-2); color: var(--on-navy); font-weight: 600; }
.side nav a.on::before, .side nav button.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--bca-cyan); }
.side nav .cnt { margin-left: auto; background: var(--bca-cyan); color: var(--bca-navy); }
.side nav.home { padding-bottom: var(--s2); border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: var(--s2); }
.side nav.home a { font-weight: 600; }
/* module groups: collapsible header with a colour accent */
.side .grp { margin: var(--s2) var(--s3) 0; }
.side .grp .grp-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; border: 0; background: none; font: inherit; font-size: var(--f1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-2); font-weight: 600; cursor: pointer; border-radius: var(--r); }
.side .grp .grp-h:hover { color: var(--on-navy); background: rgba(255, 255, 255, 0.05); }
.side .grp .grp-h i { width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--bca-cyan)); flex: none; }
.side .grp .grp-h .chev { margin-left: auto; width: 14px; height: 14px; transition: transform var(--motion); }
.side .grp[data-open="0"] .grp-h .chev { transform: rotate(-90deg); }
.side .grp[data-open="0"] nav { display: none; }
.side .grp nav { padding: 0; }
.side .grp nav a { padding-left: 28px; }
.side .grp nav a.on::before { left: 0; }
.side .grp nav a .ic { opacity: 0.8; }
.side .portal { margin: auto var(--s3) 0; padding-top: var(--s3); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.side .portal a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r); color: var(--on-navy-2); font-size: var(--f2); }
.side .portal a:hover { color: var(--on-navy); background: var(--bca-navy-2); }
.side .toggle { margin: var(--s2) var(--s3) 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r); color: var(--on-navy-2); font-size: var(--f1); cursor: pointer; background: transparent; border: 0; font-family: inherit; }
.side .toggle:hover { background: var(--bca-navy-2); color: var(--on-navy); }
.side .toggle .ic { width: 18px; height: 18px; }
.side .userchip { padding: var(--s3) var(--s4) 0; margin-top: var(--s2); border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; gap: 10px; }
.side .userchip .av { width: 32px; height: 32px; border-radius: 50%; background: var(--bca-cyan); color: var(--bca-navy); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--f1); flex: none; }
.side .userchip b { display: block; font-size: var(--f2); white-space: nowrap; }
.side .userchip .role { color: var(--on-navy-3); font-size: var(--f1); white-space: nowrap; display: block; }
.side .userchip form { margin-left: auto; }
.side .userchip .btn.quiet { color: var(--on-navy-2); }
/* collapsed rail */
.rail .side .wsname { padding: 4px 0 var(--s3); text-align: center; }
.rail .side .wsname b, .rail .side .wsname .lbl, .rail .side .wsname summary .ic, .rail .side .lbl, .rail .side .grp .grp-h, .rail .side .userchip .txt, .rail .side .userchip form { display: none; }
.rail .side .wsname summary { justify-content: center; }
.rail .side .wsname .mini { display: block; font-weight: 700; color: var(--on-navy); }
.rail .side .grp { margin: var(--s2) var(--s2) 0; padding-top: var(--s2); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.rail .side .grp[data-open="0"] nav { display: flex; }
.rail .side nav { padding: 0 var(--s2); }
.rail .side .grp nav { padding: 0; }
.rail .side nav a, .rail .side nav button, .rail .side .grp nav a { justify-content: center; padding: 10px 0; }
.rail .side nav a.on::before, .rail .side nav button.on::before, .rail .side .grp nav a.on::before { left: -8px; }
.rail .side nav .cnt { position: absolute; top: 2px; right: 2px; margin: 0; min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
.rail .side .toggle, .rail .side .portal a { justify-content: center; padding: 10px 0; }
.rail .side .portal { margin: auto var(--s2) 0; }
.rail .side .userchip { justify-content: center; padding: var(--s3) 0 0; }
.content { padding: var(--s5) var(--s5) var(--s8); min-width: 0; }
@media (max-width: 900px) {
  .frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; }
  .side { flex-direction: row; align-items: center; padding: 0 var(--s2); overflow-x: auto; gap: 4px; }
  .side .wsname, .side .userchip, .side .toggle, .side .lbl, .side .grp .grp-h, .side .portal { display: none; }
  .side nav, .side nav.home, .side .grp, .side .grp nav { display: flex; flex-direction: row; padding: 4px 0; margin: 0; gap: 2px; border: 0; }
  .side .grp[data-open="0"] nav { display: flex; }
  .side .grp nav a, .side nav a { padding: 10px; }
  .side nav a.on::before, .side .grp nav a.on::before { display: none; }
  .side nav .cnt { position: absolute; top: 2px; right: 2px; margin: 0; min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
  .content { padding: var(--s4) var(--s4) var(--s8); }
}

/* legacy header for pages without a workspace sidebar */
.top { background: var(--surface); border-bottom: 1px solid var(--hair); }
.top-in { padding: 0 var(--s5); height: 56px; display: flex; align-items: center; gap: var(--s5); }
.live { display: inline-flex; align-items: center; gap: 6px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--bca-green); display: inline-block; }
.cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.cnt.urgent { background: var(--tint-red-bg); color: var(--tint-red-fg); }
.cnt.attention { background: var(--tint-amber-bg); color: var(--tint-amber-fg); }
.cnt.info { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }

/* ---- page anatomy: header, breadcrumbs, KPI strip, section heads ------------------------ */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--f1); color: var(--ink-3); margin-bottom: var(--s2); }
.crumbs a { color: var(--bca-blue-ink); font-weight: 600; }
.crumbs .sep { color: var(--ink-4); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.page-head h1 { font-size: var(--f4); line-height: 1.2; display: flex; align-items: center; gap: 8px; }
.page-head h1 .ic { width: 18px; height: 18px; color: var(--bca-blue); }
.page-head .ctx { color: var(--ink-3); margin: 4px 0 0; font-size: var(--f2); }
.page-head .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.kpi { display: block; background: var(--surface); border-radius: var(--r); padding: var(--s3) var(--s4); min-width: 0; box-shadow: inset 0 3px 0 var(--c, transparent); color: var(--ink); }
a.kpi:hover { box-shadow: inset 0 3px 0 var(--c, var(--bca-blue)), 0 0 0 1px var(--hair); color: var(--ink); }
.kpi b { display: block; font-size: var(--f1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.kpi .v { display: block; font-size: var(--f4); font-weight: 600; color: var(--bca-blue-deep); line-height: 1.2; margin-top: 2px; }
.kpi .delta { display: flex; align-items: center; gap: 4px; font-size: var(--f1); color: var(--ink-3); margin-top: 2px; }
.kpi .delta .ic { width: 12px; height: 12px; }
.kpi .delta.up { color: var(--sev-clear); } .kpi .delta.down { color: var(--sev-urgent); } .kpi .delta.bad-up { color: var(--sev-urgent); } .kpi .delta.good-down { color: var(--sev-clear); }
.kpi svg.spark { display: block; margin-top: 6px; }
.kpi > .f1, .kpi > .dim { display: block; margin-top: 2px; }
.sec { position: sticky; top: var(--stick); z-index: 4; display: flex; align-items: center; gap: var(--s3); padding: 8px 12px; margin: var(--s4) 0 var(--s2); background: var(--ground); border-left: 4px solid var(--c, var(--bca-blue)); font-weight: 600; color: var(--ink); border-radius: 0 var(--r) var(--r) 0; }
.sec .n { color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.sec .tot { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); display: flex; gap: var(--s4); }
.sec .tot b { color: var(--ink); }
.sec .ic { width: 16px; height: 16px; color: var(--c, var(--bca-blue)); }
.tbl tr.grp td { position: sticky; top: calc(var(--stick) + 37px); z-index: 3; background: var(--ground); font-weight: 600; color: var(--ink); padding: 8px 12px; border-bottom: 1px solid var(--hair); box-shadow: inset 4px 0 0 var(--c, var(--bca-blue)); }
.tbl tr.grp td.money { box-shadow: none; color: var(--ink-2); }
.tbl tr.grp td .n { color: var(--ink-3); font-weight: 500; margin-left: 6px; }
.tbl tr.grp:hover td { background: var(--ground); }
.empty { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s3); color: var(--ink-2); }
.empty .mosaic { flex: none; }

/* ---- chips: zone, account manager, generic --------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--f1); font-weight: 600; background: var(--surface); border: 1px solid var(--hair); color: var(--ink-2); white-space: nowrap; line-height: 1.5; }
.chip.on { background: var(--bca-blue); border-color: var(--bca-blue); color: #fff; }
.chip.zone { border-color: var(--hair); color: var(--ink); }
.chip.zone i, .zdot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--zone-unknown)); flex: none; }
.chip.am { border: 0; background: var(--bg, var(--tint-neutral-bg)); color: var(--fg, var(--tint-neutral-fg)); }
.chip.am .av { width: 16px; height: 16px; border-radius: 50%; background: var(--fg, var(--tint-neutral-fg)); color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chip.extra { background: var(--tint-cyan-bg); color: var(--tint-cyan-fg); border-color: transparent; }
.zone-ink { color: var(--ink-c, var(--ink)); font-weight: 600; }
.swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; }

/* ---- badges: text + icon + tint, always ----------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: var(--f1); font-weight: 600; white-space: nowrap; line-height: 1.5; }
.badge .ic { width: 14px; height: 14px; flex: none; }
.t-amber   { background: var(--tint-amber-bg);   color: var(--tint-amber-fg); }
.t-orange  { background: var(--tint-orange-bg);  color: var(--tint-orange-fg); }
.t-blue    { background: var(--tint-blue-bg);    color: var(--tint-blue-fg); }
.t-green   { background: var(--tint-green-bg);   color: var(--tint-green-fg); }
.t-red     { background: var(--tint-red-bg);     color: var(--tint-red-fg); }
.t-cyan    { background: var(--tint-cyan-bg);    color: var(--tint-cyan-fg); }
.t-neutral { background: var(--tint-neutral-bg); color: var(--tint-neutral-fg); }

/* status pills (route status, priorities) */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: var(--f1); font-weight: 700; white-space: nowrap; line-height: 1.5; }
.pill .ic { width: 14px; height: 14px; }
.pill.done { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.pill.out { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.pill.not_started, .pill.empty { background: var(--tint-neutral-bg); color: var(--tint-neutral-fg); }
.pill.issues { background: var(--tint-amber-bg); color: var(--tint-amber-fg); }
.pill.urgent { background: var(--tint-red-bg); color: var(--tint-red-fg); }

/* next action: coloured by severity, with an icon */
.act { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--f2); }
.act .ic { width: 14px; height: 14px; }
.act.urgent { color: var(--sev-urgent); } .act.attention { color: var(--sev-attention); } .act.info { color: var(--sev-info); } .act.clear { color: var(--sev-clear); }

/* problem flags are text, never icons alone */
.flag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--f1); font-weight: 600; }
.flag .ic { width: 13px; height: 13px; }
.flag.warn { color: var(--tint-amber-fg); }
.flag.bad { color: var(--tint-red-fg); }
.flag.info { color: var(--tint-blue-fg); }
.flag.ok { color: var(--tint-green-fg); }

/* severity edge on a row or card: 3 px, no fill */
.edge { position: relative; }
.edge::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--e, var(--bca-blue)); }
.edge.urgent { --e: var(--edge-urgent); } .edge.attention { --e: var(--edge-attention); }
.edge.info { --e: var(--edge-info); } .edge.clear { --e: var(--edge-clear); }

/* ---- buttons ------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--hair); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; transition: border-color var(--motion), background var(--motion); white-space: nowrap; }
.btn:hover { border-color: var(--ink-4); }
.btn.primary { background: var(--bca-blue); border-color: var(--bca-blue); color: #fff; }
.btn.primary:hover { background: var(--bca-blue-deep); border-color: var(--bca-blue-deep); }
.btn.quiet { border-color: transparent; color: var(--bca-blue-ink); background: transparent; }
.btn.quiet:hover { background: var(--wash); }
.btn.icon { padding: 0; width: 28px; height: 28px; justify-content: center; }
.btn.danger { color: var(--tint-red-fg); border-color: var(--tint-red-bg); background: var(--tint-red-bg); }
.btn[disabled] { color: var(--ink-4); cursor: default; border-color: var(--hair); background: var(--surface); }
.tap { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: var(--r); font-weight: 600; font-size: var(--f2); border: 1px solid var(--hair); background: var(--surface); color: var(--ink); }
.tap.primary { background: var(--bca-blue); border-color: var(--bca-blue); color: #fff; }
.field { display: block; width: 100%; height: 40px; padding: 0 var(--s3); border: 1px solid var(--hair); border-radius: var(--r); font: inherit; background: var(--surface); color: var(--ink); }
select.field { height: 40px; }
textarea.field { height: auto; padding: 8px var(--s3); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); align-items: end; }
.form-grid label { display: block; font-size: var(--f1); color: var(--ink-3); font-weight: 600; }
.form-grid label .field { margin-top: 4px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface); font-size: var(--f1); font-weight: 600; cursor: pointer; }
.checks input { margin: 0; }

/* ---- mosaic signature (loading, day progress, all clear) --------------------------------- */
.mosaic { display: block; }
.mosaic-skeleton rect { animation: mosaic-pulse 1.2s ease-in-out infinite; }
@keyframes mosaic-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.allclear { display: flex; align-items: center; gap: var(--s3); color: var(--ink-2); padding: var(--s3) 0; }

/* ---- tables: sticky headers, hairlines only, coloured group rows --------------------------- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--f2); }
.tbl th { position: sticky; top: var(--stick); z-index: 5; background: var(--surface); text-align: left; font-size: var(--f1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.tbl th a { color: var(--ink-2); }
.tbl th a:hover { color: var(--bca-blue-ink); }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.tbl tbody tr:hover td { background: var(--wash); }
.tbl td.money, .tbl th.money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.problem td { background: var(--tint-amber-bg); }
.tbl tr.problem td:first-child { box-shadow: inset 4px 0 0 var(--edge-attention); }
.tbl tr.problem.urgent td { background: var(--tint-red-bg); }
.tbl tr.problem.urgent td:first-child { box-shadow: inset 4px 0 0 var(--edge-urgent); }
.tbl tr.problem:hover td { background: var(--tint-amber-bg); }
.tbl .sub { display: block; font-size: var(--f1); color: var(--ink-3); font-weight: 400; }
.tbl.compact th, .tbl.compact td { padding: 6px 8px; }
.tbl.compact th { letter-spacing: 0.04em; }
.tbl.compact th { white-space: normal; }
.tbl td.cust { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl td.cust a { display: block; overflow: hidden; text-overflow: ellipsis; }
.tbl.onerow td { white-space: nowrap; }
.tbl.onerow { font-size: var(--f1); }
.tbl.onerow td, .tbl.onerow th { padding: 7px 6px; }
.tbl.onerow .chip.zone { padding: 1px 7px; font-size: 11px; }
.tbl.onerow td.cust { max-width: 190px; }
.tbl.onerow .badge { padding: 1px 7px 1px 6px; }
.tbl.team td, .tbl.team th { padding: 6px 8px; vertical-align: middle; }
.tbl.team .field { height: 32px; }
.badge { white-space: nowrap; }
.rel { border-bottom: 1px dotted var(--ink-4); cursor: help; }

/* ---- Dispatch Board ----------------------------------------------------------------------- */
.daytabs { position: sticky; top: 0; z-index: 8; display: flex; gap: var(--s1); align-items: flex-end; flex-wrap: nowrap; overflow-x: auto; background: var(--ground); padding-top: 2px; }
.board-page { --stick: 76px; }
.daytab { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--r) var(--r) 0 0; color: var(--ink-2); min-width: 120px; background: transparent; flex: none; }
.daytab .d { font-size: var(--f2); font-weight: 500; }
.daytab .n { font-size: var(--f4); font-weight: 600; color: var(--bca-blue-deep); line-height: 1.1; display: flex; align-items: center; gap: 8px; }
.daytab .n .pill { padding: 1px 7px; }
.daytab.on { background: var(--bca-blue); color: #fff; }
.daytab.on .d { font-weight: 600; color: #fff; } .daytab.on .n { color: #fff; }
.daytab.on .n .pill { background: #fff; color: var(--tint-red-fg); }
.daytab.today .d::after { content: " · today"; opacity: 0.7; font-weight: 500; }
.board { background: var(--surface); border-radius: 0 var(--r) var(--r) var(--r); padding: var(--s5) var(--s5) var(--s6); }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.board-head h1 { font-size: var(--f4); }
.board-head .sum { color: var(--ink-2); margin: 0; flex: 1; min-width: 280px; }
.board-head .sum b { color: var(--ink); font-weight: 600; }
.problems { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 16px; background: var(--ground); border-radius: var(--r); margin-bottom: var(--s4); }
.prob { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: var(--f2); font-weight: 600; color: var(--ink); background: var(--surface); box-shadow: inset 3px 0 0 var(--pe); }
.prob b { font-size: var(--f3); font-variant-numeric: tabular-nums; }
.prob .w { color: var(--ink-3); font-weight: 500; }
.prob .ic { width: 14px; height: 14px; color: var(--pe); }
.prob.red { --pe: var(--edge-urgent); } .prob.amber { --pe: var(--edge-attention); }
.lanes { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .lanes { grid-template-columns: minmax(0, 1fr); } }
.lane { border-radius: var(--r); box-shadow: inset 0 6px 0 var(--zc, var(--bca-blue)); padding-top: 14px; background: var(--surface); min-width: 0; }
.lane.unknown { --zc: var(--zone-unknown); --zink: var(--zone-unknown-ink); }
.lane.pickups { --zc: var(--zone-pickup); --zink: var(--zone-pickup-ink); }
.lane-h { padding-bottom: var(--s4); margin-bottom: var(--s3); border-bottom: 1px solid var(--hair); }
.lane-h .zn { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lane-h .zn h2 { color: var(--zink, var(--bca-blue-ink)); font-size: var(--f3); display: flex; align-items: center; gap: 8px; }
.lane-h .zn h2 i { width: 10px; height: 10px; border-radius: 2px; background: var(--zc); display: inline-block; }
.lane-h .zn .days { color: var(--ink-3); font-size: var(--f1); }
.lane-h .big { display: flex; align-items: baseline; gap: 6px; margin: var(--s2) 0 var(--s1); }
.lane-h .big .n { font-size: var(--f5); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--bca-blue-deep); }
.lane-h .big .u { color: var(--ink-3); }
.lane-h .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; color: var(--ink-2); font-size: var(--f1); margin-top: var(--s2); }
.lane-h .facts b { color: var(--ink); font-weight: 600; }
.lane-h .mos { margin-top: var(--s3); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lane-h .tools { display: flex; gap: 6px; margin-top: var(--s3); flex-wrap: wrap; align-items: center; }
.owner { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; margin: var(--s3) 0 var(--s2); padding: 12px; border-radius: var(--r); background: var(--ground); position: relative; }
.owner .av { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--bca-blue-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--f2); box-shadow: 0 0 0 3px var(--zc, var(--bca-blue)); grid-row: 1 / span 3; }
.owner .name { font-weight: 600; font-size: var(--f2); line-height: 1.3; grid-column: 2; }
.owner .phone { grid-column: 2; font-size: var(--f1); color: var(--ink-2); line-height: 1.4; white-space: nowrap; }
.owner.none .phone { white-space: normal; }
.owner .phone a { color: var(--bca-blue-ink); }
.owner .ovr { grid-column: 2; font-size: var(--f1); color: var(--tint-amber-fg); font-weight: 600; line-height: 1.4; }
.owner .ovr.plain { color: var(--ink-3); font-weight: 500; }
.owner .re { grid-column: 3; grid-row: 1; font-size: var(--f1); font-weight: 600; color: var(--bca-blue-ink); white-space: nowrap; background: none; border: 0; font-family: inherit; cursor: pointer; padding: 0; }
.lanes[style*="--n: 5"] .owner, .lanes[style*="--n:5"] .owner { grid-template-columns: 36px minmax(0, 1fr); }
.lanes[style*="--n: 5"] .owner .re, .lanes[style*="--n:5"] .owner .re { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 4px; }
.owner.none { background: var(--tint-red-bg); }
.owner.none .av { color: var(--tint-red-fg); box-shadow: 0 0 0 3px var(--tint-red-fg); }
.owner.none .name, .owner.none .phone { color: var(--tint-red-fg); }
.owner details.owner-menu { grid-column: 3; grid-row: 1; }
.owner details.owner-menu summary { list-style: none; cursor: pointer; font-size: var(--f1); font-weight: 600; color: var(--bca-blue-ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.owner details.owner-menu summary::-webkit-details-marker { display: none; }
.owner details.owner-menu .pop { display: block; }
.rstatus { margin-top: 8px; }
.stop { padding: var(--s3) 0; border-bottom: 1px solid var(--hair); position: relative; }
.stop:last-child { border-bottom: 0; }
.stop .r1 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.stop .lead { display: flex; align-items: center; min-width: 0; }
.stop .cust { font-weight: 600; font-size: var(--f2); min-width: 0; overflow-wrap: anywhere; }
.stop .cust a { color: var(--ink); } .stop .cust a:hover { color: var(--bca-blue-ink); text-decoration: underline; }
.stop .val { font-weight: 600; white-space: nowrap; }
.stop .r2 { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-3); font-size: var(--f1); margin-top: 2px; }
.stop .r3 { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.stop .badge { white-space: nowrap; }
.stop .cod { font-weight: 600; color: var(--tint-amber-fg); font-size: var(--f1); display: inline-flex; align-items: center; gap: 4px; }
.stop .flags { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.stop .addr { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: var(--f1); color: var(--ink-2); }
.stop .addr a { display: inline-flex; align-items: center; gap: 4px; color: var(--bca-blue-ink); font-weight: 600; }
.stop.problem { padding-left: 12px; margin-left: -12px; box-shadow: inset 3px 0 0 var(--edge-attention); }
.stop.pickup { background: #FFFBEB; margin: 0 -12px; padding-left: 12px; padding-right: 12px; box-shadow: inset 3px 0 0 var(--zone-pickup); }
.stop.pickup .seq { background: var(--zone-pickup); }
.stop .seq { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; background: var(--zc, var(--ink-3)); color: #fff; font-size: 11px; font-weight: 700; align-items: center; justify-content: center; margin-right: 8px; flex: none; font-variant-numeric: tabular-nums; }
.lane.unknown .stop .seq { background: var(--tint-red-bg); color: var(--tint-red-fg); }
.stop .grip { color: var(--ink-4); margin-right: 6px; cursor: grab; flex: none; }
.stop .grip .ic { width: 14px; height: 14px; }
.stop .ind { padding-left: 56px; }
.stop.dragging { opacity: 0.4; }
/* ---- access matrix editor (Part 18) ---- */
.tbl.matrix td.mcell { white-space: nowrap; }
.tbl.matrix .lvl.full { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #E8F5E4; color: #1F6B1C; font-weight: 600; font-size: var(--f1); }
.tbl.matrix select.lvl-full { border-color: var(--bca-green); }
.tbl.matrix select.lvl-view { border-color: var(--bca-blue); }
.tbl.matrix select.lvl-hidden { color: var(--ink-3); }
.tbl.matrix .chip { margin-left: 6px; font-size: 11px; padding: 1px 8px; }
/* ---- board fix (2026-09-27): compact stop rows on the desktop board ---- */
.stops.rows .stop.row { display: grid; grid-template-columns: auto 28px minmax(0, 1fr) auto; grid-template-areas: "grip seq who amt" "grip seq bdg bdg"; column-gap: 10px; row-gap: 2px; align-items: center;
  min-height: 56px; padding: 6px 10px 6px 8px; margin: 0 0 4px; border-radius: 8px; border: 0; box-shadow: inset 4px 0 0 var(--hz, var(--ink-3)); background: var(--surface); cursor: pointer; position: relative; overflow: hidden; }
.stops.rows .stop.row:focus-visible { outline: 2px solid var(--bca-cyan); outline-offset: 1px; }
.stops.rows .stop.row .grip { grid-area: grip; margin: 0; }
.stops.rows .stop.row > .seq { grid-area: seq; width: 28px; height: 28px; border-radius: 8px; font-size: 13px; font-weight: 700; background: var(--hz, var(--ink-3)); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.stops.rows .stop.row .who { grid-area: who; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; overflow: hidden; line-height: 1.25; color: var(--ink); font-size: var(--f2); }
.stops.rows .stop.row .who .nm { display: block; max-width: 100%; font-weight: 600; font-size: var(--f2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stops.rows .stop.row .who .city { display: block; max-width: 100%; font-size: var(--f1); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stops.rows .stop.row .amt { grid-area: amt; font-weight: 600; font-size: var(--f2); white-space: nowrap; }
.stops.rows .stop.row .bdg { grid-area: bdg; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; overflow: hidden; }
.stops.rows .stop.row .bdg .chip.prob, .stops.rows .stop.row .bdg .chip.prob span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.stops.rows .stop.row .bdg .badge, .stops.rows .stop.row .bdg .chip { font-size: 11px; padding: 1px 8px 1px 6px; line-height: 1.5; }
.stops.rows .stop.row .hov { position: absolute; right: 8px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--motion); background: var(--surface); border-radius: 8px; padding: 2px; }
.stops.rows .stop.row:hover .hov, .stops.rows .stop.row:focus-within .hov, .stops.rows .stop.row .hov details[open] { opacity: 1; }
.stops.rows .stop.row .hov .btn.icon { width: 28px; height: 28px; }
.stops.rows .stop.row:hover .amt { visibility: hidden; }
/* uniform rows (2026-09-27): white card, 4 px home-zone edge and chip; status only by the badge; delivered fade with a green check; problem rows get a thin red outline */
.stops.rows .stop.row.st-done { opacity: 0.6; }
.stops.rows .stop.row.st-done:hover, .stops.rows .stop.row.st-done:focus-within { opacity: 1; }
.stops.rows .stop.row .who .nm .okchk { display: inline-flex; color: var(--bca-green); vertical-align: -3px; margin-right: 4px; }
.stops.rows .stop.row .who .nm .okchk .ic { width: 16px; height: 16px; }
.stops.rows .stop.row.st-problem { box-shadow: inset 4px 0 0 var(--hz, var(--ink-3)), 0 0 0 1px var(--tint-red-fg); }
.stops.rows .stop.row .bdg .chip.prob { color: var(--tint-red-fg); background: transparent; border-color: transparent; padding-left: 0; }
.stops.rows .stop.row .bdg .chip.cod { color: var(--ink-2); background: transparent; border-color: var(--hair); }
.stops.rows .stop.row.moved { animation: liveflash 1.6s ease-out; }
.stops.rows.dropinto { outline: 2px dashed var(--bca-cyan); outline-offset: 4px; border-radius: 8px; }
.stops.rows .stop.row.dropbefore { box-shadow: inset 4px 0 0 var(--hz, var(--ink-3)), 0 -3px 0 var(--bca-cyan); }
.lane.pickups .stops.rows .stop.row, .lane.unknown .stops.rows .stop.row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "seq who amt" "seq bdg bdg"; }
.lane.unknown .stops.rows .stop.row > .seq { background: var(--tint-red-bg); color: var(--tint-red-fg); }
/* the stop drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--surface); box-shadow: -12px 0 32px rgba(15, 43, 70, 0.18); z-index: 40; display: flex; flex-direction: column; transform: translateX(8px); opacity: 0; transition: transform var(--motion), opacity var(--motion); }
.drawer.open { transform: none; opacity: 1; }
.drawer-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--hair); }
.drawer-h h2 { font-size: 20px; margin: 2px 0 0; color: var(--bca-blue-deep); }
.drawer-b { padding: 8px 20px 24px; overflow: auto; flex: 1; }
.drawer-b .stop { border-bottom: 0; }
.drawer-b .stop .ind { padding-left: 0; }
.drawer-b .stop .movebtn { position: static; opacity: 1; margin-top: 10px; }
.drawer-veil { position: fixed; inset: 0; background: rgba(15, 43, 70, 0.28); z-index: 39; }
body.drawer-open { overflow: hidden; }
@media (max-width: 640px) { .stops.rows .stop.row:hover .amt { visibility: visible; } .stops.rows .stop.row .hov { display: none; } }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } .stops.rows .stop.row.moved { animation: none; } }
.stop.dropbefore { box-shadow: inset 0 3px 0 var(--bca-cyan); }
.stop .movebtn { position: absolute; right: 0; top: 10px; opacity: 0; transition: opacity var(--motion); }
.stop:hover .movebtn, .stop .movebtn:focus-within, .stop .movebtn details[open] { opacity: 1; }
.stop details.owner-menu { display: inline-block; position: relative; }
.stop details.owner-menu summary { list-style: none; cursor: pointer; display: inline-flex; }
.stop details.owner-menu summary::-webkit-details-marker { display: none; }
.stop .who { font-size: var(--f1); color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.strip { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-3); font-size: var(--f1); }
.strip b { font-weight: 600; color: var(--ink-2); }
.strip .zdot, .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 6px; }
.pop { position: absolute; right: 0; top: 100%; margin-top: 6px; width: 280px; background: var(--surface); border-radius: var(--r); box-shadow: var(--float); padding: 14px; z-index: 12; text-align: left; font-weight: 400; }
.pop h4 { font-size: var(--f2); font-weight: 600; margin-bottom: 8px; }
.pop select.field, .pop input.field { height: 36px; margin-bottom: 8px; }
.pop .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-3); font-size: var(--f1); margin-top: var(--s3); }

/* ---- AM Desk, lists, Customer 360, overview --------------------------------------------- */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; }
@media (max-width: 1100px) { .desk { grid-template-columns: minmax(0, 1fr); } }
.hello { font-size: var(--f5); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; max-width: 900px; color: var(--bca-blue-deep); }
.hello a { color: var(--bca-blue-ink); border-bottom: 2px solid var(--bca-cyan); }
.hello .q { color: var(--ink-3); font-weight: 500; }
.score { display: flex; gap: var(--s7); margin: var(--s5) 0 var(--s6); flex-wrap: wrap; }
.score div b { display: block; font-size: var(--f1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.score .v { font-size: var(--f4); font-weight: 600; line-height: 1.2; color: var(--bca-blue-deep); }
.score .lw { color: var(--ink-4); font-size: var(--f1); }
.blk { background: var(--surface); border-radius: var(--r); padding: var(--s4) var(--s5) var(--s3); box-shadow: inset 0 3px 0 var(--c, transparent); }
.blk-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--s2); }
.blk-h h2 { font-size: var(--f3); font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.blk-h h2 .ic { width: 16px; height: 16px; color: var(--c, var(--bca-blue)); }
.blk-h .more { color: var(--bca-blue-ink); font-size: var(--f1); font-weight: 600; white-space: nowrap; }
.call { display: grid; grid-template-columns: 24px minmax(0, 1fr) 128px 96px auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--hair); }
.call:first-of-type { border-top: 0; }
.call .rk { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; background: var(--bca-navy); color: #fff; font-size: 11px; font-weight: 700; align-items: center; justify-content: center; }
.call .who { font-weight: 600; }
.call .why { color: var(--ink-2); font-size: var(--f1); margin-top: 2px; }
.call .ph { color: var(--ink-2); font-size: var(--f1); }
.call .gap { color: var(--ink-3); font-size: var(--f1); white-space: nowrap; }
.call .act { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 900px) { .call { grid-template-columns: 24px minmax(0, 1fr); } .call .act { grid-column: 2; justify-content: flex-start; } }
.list { display: flex; flex-direction: column; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.row:first-child { border-top: 0; }
.row .who { font-weight: 600; }
.row .sub2 { color: var(--ink-3); font-size: var(--f1); display: block; font-weight: 400; }
.row .amt { font-weight: 600; white-space: nowrap; }
.opp { background: var(--surface); border-radius: var(--r); padding: var(--s4) var(--s5) var(--s4); box-shadow: inset 0 4px 0 var(--bca-green-light); }
.opp .big { font-size: var(--f3); font-weight: 600; margin: 6px 0 4px; color: var(--bca-blue-deep); }
.opp p { margin: 0; color: var(--ink-2); }
.pen { display: flex; gap: 3px; margin-top: 10px; }
.pen i { height: 6px; flex: 1; border-radius: 2px; background: var(--hair); }
.pen i.on { background: var(--bca-green); }
.pen i.gap { background: var(--tint-amber-bg); outline: 1px dashed var(--tint-amber-fg); }
.hs { display: inline-flex; gap: 2px; vertical-align: middle; }
.hs i { width: 8px; height: 14px; border-radius: 2px; background: var(--tint-red-bg); display: inline-block; }
.hs i.dark { background: #14532D; } .hs i.green { background: var(--bca-green); } .hs i.light { background: var(--bca-green-light); } .hs i.small { background: #FBBF24; }
.queues { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.queue { background: var(--surface); border-radius: var(--r); padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s3); box-shadow: inset 3px 0 0 var(--e, var(--bca-blue)); }
.queue.urgent { --e: var(--edge-urgent); } .queue.attention { --e: var(--edge-attention); } .queue.clear { --e: var(--edge-clear); }
.queue .n { font-size: var(--f4); font-weight: 600; color: var(--bca-blue-deep); min-width: 40px; }
.queue .ic { width: 16px; height: 16px; color: var(--e, var(--bca-blue)); flex: none; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: var(--s4); }
.filters .field { width: auto; height: 32px; }
.dayhead td { background: var(--ground); font-weight: 600; color: var(--bca-blue-deep); }
.aging { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--hair); }
.aging i { display: block; height: 100%; }
.share { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--hair); margin: 6px 0 var(--s3); }
.share i { display: block; height: 100%; background: var(--c); }
/* Day mosaic (SPEC 5.2, Part 12): one square per stop; fill is delivery state, the red dot a problem on top */
/* ---- day progress, option A (2026-09-27): ring for the day, one slim rail per route ---- */
.prog { background: var(--surface); border-radius: var(--r); padding: 14px 20px; margin: var(--s3) 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 28px; align-items: center; min-height: 100px; max-height: 120px; }
.prog .ring { position: relative; width: 88px; height: 88px; flex: none; }
.prog .ring svg { width: 88px; height: 88px; transform: rotate(-90deg); display: block; }
.prog .ring .track { fill: none; stroke: #E6ECF2; stroke-width: 9; }
.prog .ring .fill { fill: none; stroke: var(--bca-blue-deep); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray 400ms ease; }
.prog .ring .lbl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.prog .ring .lbl b { font-size: 22px; font-weight: 600; color: var(--bca-blue-deep); letter-spacing: -0.02em; display: inline-flex; }
.prog .ring .lbl b .ic { width: 26px; height: 26px; color: var(--bca-green); }
.prog .ring .lbl span { font-size: 12px; color: var(--ink-3); margin-top: 4px; white-space: nowrap; }
.prog.complete .ring .fill { stroke: var(--bca-green); }
.prog.complete .ring .lbl b, .prog.complete .ring .lbl span { color: var(--bca-green); }
.prog .rails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; min-width: 0; }
.prog .rail { display: grid; grid-template-columns: 118px minmax(0, 1fr) 52px; gap: 10px; align-items: center; font-size: 12px; }
.prog .rail .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog .rail .ct { color: var(--ink-2); text-align: right; white-space: nowrap; }
.prog .pside { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex: none; }
.prog .chip.prob { background: var(--tint-red-bg); color: var(--tint-red-fg); border-color: transparent; }
.prog .chip.ok { background: #E8F5E4; color: #1F6B1C; border-color: transparent; }
.prog .legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.prog .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.prog .legend i.d, .rbar i.d { background: var(--bca-green); }
.prog .legend i.p, .rbar i.p { background: var(--bca-blue); }
.rbar i.n { background: transparent; }
.prog .legend i.n { background: #D5DDE6; }
.prog.tv .legend i.n { background: rgba(255, 255, 255, 0.25); }
.rbar { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; background: #D5DDE6; min-width: 40px; flex: 1; }
.rbar i { display: block; height: 100%; }
.prog.complete .rbar i.d, .prog.complete .rbar i.p { background: var(--bca-green); }
.lane-h .mos .rbar { flex: 1; }
.rbar.tv { height: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.18); }
.prog.tv { background: var(--bca-navy-2); padding: 24px 34px; margin: 0; border-radius: 20px; gap: 16px 40px; max-height: none; min-height: 180px; }
.prog.tv .ring, .prog.tv .ring svg { width: 150px; height: 150px; }
.prog.tv .ring .track { stroke: rgba(255, 255, 255, 0.18); stroke-width: 14; }
.prog.tv .ring .fill { stroke: var(--bca-cyan); stroke-width: 14; }
.prog.tv.complete .ring .fill { stroke: var(--bca-green-light); }
.prog.tv .ring .lbl b { font-size: 38px; color: var(--on-navy); }
.prog.tv .ring .lbl b .ic { width: 44px; height: 44px; color: var(--bca-green-light); }
.prog.tv .ring .lbl span { font-size: 16px; color: var(--on-navy-2); }
.prog.tv.complete .ring .lbl b, .prog.tv.complete .ring .lbl span { color: var(--bca-green-light); }
.prog.tv .rail { grid-template-columns: 200px minmax(0, 1fr) 86px; font-size: 20px; }
.prog.tv .rail .ct { color: var(--on-navy-2); }
.prog.tv .rbar { height: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.18); }
.prog.tv .legend { font-size: 15px; color: var(--on-navy-2); }
.prog.tv .chip.prob { background: #7F1D1D; color: #fff; font-size: 18px; padding: 6px 14px; }
.prog.tv .chip.ok { font-size: 18px; padding: 6px 14px; }
@media (prefers-reduced-motion: reduce) { .prog .ring .fill { transition: none; } }
@media (max-width: 900px) { .prog { grid-template-columns: auto minmax(0, 1fr); max-height: none; } .prog .rails { grid-template-columns: minmax(0, 1fr); } .prog .pside { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } }
.tvprog { padding: 0 48px 8px; }
@media (max-width: 1500px) { .tvprog { padding: 0 28px 4px; } }

/* slim 6 px bars everywhere else (Part 12): section colour, 2 px gaps between segments, no gradients */
.aging, .share { height: 6px; border-radius: 3px; gap: 2px; background: var(--hair); }
.aging i, .share i { border-radius: 3px; }

/* stop cards carry their home zone colour (Part 11): 3 px left edge and the sequence chip */
.stop.hz { box-shadow: inset 3px 0 0 var(--hz, var(--zc)); padding-left: 12px; margin-left: -12px; }
.stop.hz .seq { background: var(--hz, var(--zc)); }
.stop.hz.problem { box-shadow: inset 3px 0 0 var(--hz, var(--edge-attention)); }
.stop.hz.pickup .seq { background: var(--zone-pickup); }
.tvstop { box-shadow: inset 4px 0 0 var(--hz, transparent); padding-left: 14px; }

/* pick and verify (Part 14): phone first, 44 px targets, high contrast */
.pickline { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.pickline .pick-link { flex: 0 0 auto; min-width: 120px; padding: 0 14px; }
.pickstat { display: inline-flex; align-items: center; gap: 5px; font-size: var(--f1); font-weight: 600; color: var(--ink-3); }
.pickstat .ic { width: 13px; height: 13px; }
.pickstat.picked, .pickstat.short { color: var(--tint-amber-fg); }
.pickstat.verified { color: var(--tint-green-fg); }
.pickstat.picking { color: var(--bca-blue-ink); }
.pick-page { max-width: 720px; padding-bottom: 120px; }
.pick-head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--s3); }
.pick-head .seq { display: inline-flex; width: 44px; height: 44px; border-radius: 10px; background: var(--hz, var(--bca-blue)); color: #fff; font-size: 20px; font-weight: 700; align-items: center; justify-content: center; flex: none; }
.pick-head h1 { font-size: 22px; line-height: 1.2; margin: 0; color: var(--ink); }
.pick-head .sub { font-size: var(--f2); color: var(--ink-2); margin-top: 2px; }
.pick-who { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s3); font-size: var(--f2); }
.pick-who span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair); font-weight: 600; }
.pick-who span.on { background: var(--tint-green-bg); color: var(--tint-green-fg); border-color: transparent; }
.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pickrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 12px; align-items: center; min-height: 64px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 2px solid var(--hair); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; }
.pickrow .name { font-size: 17px; font-weight: 600; line-height: 1.25; word-break: break-word; }
.pickrow .meta { display: block; font-size: var(--f1); color: var(--ink-3); margin-top: 2px; }
.pickrow .qty { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--bca-blue-deep); white-space: nowrap; }
.pickrow .qty small { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.pickrow .tick { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--hair); display: inline-flex; align-items: center; justify-content: center; background: var(--ground); color: transparent; }
.pickrow .tick .ic { width: 24px; height: 24px; }
.pickrow.on { background: var(--tint-green-bg); border-color: var(--bca-green); }
.pickrow.on .tick { background: var(--bca-green); border-color: var(--bca-green); color: #fff; }
.pickrow.on .name { text-decoration: line-through; color: var(--tint-green-fg); }
.pickrow.short { background: var(--tint-amber-bg); border-color: #D97706; }
.pickrow.short .tick { background: #D97706; border-color: #D97706; color: #fff; }
.pickrow .shortnote { font-size: var(--f1); color: var(--tint-amber-fg); font-weight: 600; margin-top: 2px; }
.pickrow:active { transform: scale(0.99); }
.pick-tools { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.pick-tools button, .pickrow-tools button { font: inherit; font-size: var(--f1); font-weight: 600; color: var(--bca-blue-ink); background: none; border: 0; padding: 8px 10px; min-height: 44px; cursor: pointer; }
.pickrow-tools { display: flex; justify-content: space-between; margin: -6px 0 2px; padding: 0 6px; }
.pick-desc { display: none; padding: 8px 12px; margin: -4px 0 4px; font-size: var(--f2); color: var(--ink-2); background: var(--ground); border-radius: 8px; }
.pick-desc.open { display: block; }
.pick-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--hair); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; box-shadow: 0 -4px 14px rgba(15, 43, 70, 0.08); }
.pick-foot .count { font-size: 18px; font-weight: 700; color: var(--bca-blue-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pick-foot .count small { display: block; font-size: var(--f1); font-weight: 500; color: var(--ink-3); }
.pick-foot .tap { flex: 1; min-height: 56px; font-size: 18px; }
.pick-foot .tap.primary:disabled, .pick-foot .tap:disabled { opacity: 0.45; cursor: not-allowed; }
.pick-foot .why { font-size: var(--f1); color: var(--tint-red-fg); font-weight: 600; }
.sheet-modal { position: fixed; inset: 0; background: rgba(15, 43, 70, 0.55); display: none; align-items: flex-end; z-index: 30; }
.sheet-modal.open { display: flex; }
.sheet-modal .sheet-box { background: var(--surface); border-radius: 16px 16px 0 0; width: 100%; max-width: 720px; margin: 0 auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.sheet-box h3 { margin: 0 0 8px; font-size: 18px; }
.sheet-box .reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.sheet-box .reasons label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 10px; font-weight: 600; }
.sheet-box .reasons label:has(input:checked) { background: var(--tint-amber-bg); border-color: #D97706; }
.sheet-box .row { display: flex; gap: 8px; }
.sheet-box .row .tap { flex: 1; }
.sheet-box input[type=number] { font-size: 28px; height: 56px; text-align: center; font-weight: 700; }
.picklist-stop { display: block; padding: 12px 14px; background: var(--surface); border-radius: 12px; border-left: 4px solid var(--hz, var(--bca-blue)); margin-bottom: 8px; color: inherit; }
.picklist-stop .t { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.picklist-stop .m { font-size: var(--f1); color: var(--ink-3); margin-top: 2px; }
.pickprog { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 var(--s3); }
.pickprog .sq { width: 22px; height: 22px; border-radius: 5px; border: 2px solid #C7CFD9; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; }
.pickprog .sq.picking { border-color: var(--bca-blue); }
.pickprog .sq.picked, .pickprog .sq.short { background: #D97706; border-color: #D97706; }
.pickprog .sq.verified { background: var(--bca-green); border-color: var(--bca-green); }
.pickprog .sq.done { background: var(--bca-green-light); border-color: var(--bca-green-light); }
@media (min-width: 901px) { .pick-foot { left: var(--side-w, 240px); } .frame.rail .pick-foot { left: var(--rail-w, 64px); } }

/* driver mode (Part 15): one stop at a time, 18 px essentials, 56 px buttons, bright-sun contrast */
.driver-page { max-width: 760px; }
.driver-page .page-head h1 { font-size: 22px; }
.d-mos { margin-bottom: var(--s3); }
.dstop { background: var(--surface); border-radius: 14px; padding: 14px 14px 12px; margin-bottom: 10px; box-shadow: inset 4px 0 0 var(--hz, var(--bca-blue)), 0 1px 2px rgba(15, 43, 70, 0.06); }
.dstop.current { border: 2px solid var(--bca-blue-deep); padding: 16px; box-shadow: inset 4px 0 0 var(--hz, var(--bca-blue)), 0 4px 16px rgba(15, 43, 70, 0.14); }
.dstop.next { opacity: 0.92; }
.dstop.later, .dstop.done { padding: 10px 14px; }
.dstop.done { opacity: 0.6; }
.dstop .d-top { display: flex; align-items: flex-start; gap: 12px; }
.dstop .d-top .seq { display: inline-flex; width: 40px; height: 40px; border-radius: 10px; background: var(--hz, var(--bca-blue)); color: #fff; font-size: 18px; font-weight: 700; align-items: center; justify-content: center; flex: none; }
.dstop .d-name { flex: 1; min-width: 0; }
.dstop .d-name b { display: block; font-size: 20px; line-height: 1.2; color: var(--ink); }
.dstop.current .d-name b { font-size: 24px; }
.dstop .d-addr { display: block; font-size: 18px; color: var(--ink-2); margin-top: 2px; }
.dstop .d-cod { display: flex; flex-direction: column; align-items: flex-end; font-size: 26px; font-weight: 700; color: var(--tint-amber-fg); line-height: 1; white-space: nowrap; }
.dstop .d-cod small { font-size: 11px; letter-spacing: 0.08em; font-weight: 700; color: var(--ink-3); margin-bottom: 2px; }
.dstop .d-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 10px; font-size: 16px; color: var(--ink-2); }
.dstop .d-meta .ic { width: 16px; height: 16px; }
.dstop .d-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.tap.big { min-height: 56px; font-size: 18px; }
.tap[aria-disabled="true"] { opacity: 0.45; }
.dstop .mark .slide { height: 56px; border-radius: 28px; }
.dstop .mark .slider::-webkit-slider-thumb { width: 50px; height: 50px; }
.dstop .mark .slide-label { font-size: 17px; padding-left: 64px; }
.dstop .mark .mark-acts { display: none; }
.dstop details.dtl[open] .mark-acts { display: flex; }
.dstop .codline { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.dstop .codline input { width: 24px; height: 24px; }
.dstop .issue { margin-top: 10px; }
.dstop .issue-btn { width: 100%; }
.dstop details.dtl { margin-top: 8px; }
.dstop details.dtl summary { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; color: var(--bca-blue-ink); min-height: 44px; cursor: pointer; list-style: none; }
.dstop details.dtl summary::-webkit-details-marker { display: none; }
.dstop .dtl-body { padding: 4px 0 0; display: grid; gap: 8px; }
.dstop .d-items { margin: 0; padding-left: 18px; font-size: 16px; }
.dstop.later .d-acts, .dstop.later .mark, .dstop.later .issue, .dstop.done .d-acts, .dstop.done .mark, .dstop.done .issue, .dstop.next .issue, .dstop.next .mark { display: none; }
details.more { margin: 8px 0; }
details.more summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--bca-blue-ink); cursor: pointer; list-style: none; font-size: 16px; }
details.more summary::-webkit-details-marker { display: none; }
.notif-bar { display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: var(--tint-blue-bg); border-radius: var(--r); margin-bottom: var(--s3); font-size: 16px; }

/* driver actions (SPEC 8, 9) */
[hidden] { display: none !important; }
.mark { margin-top: 10px; display: grid; gap: 8px; }
.mark .slide { position: relative; height: 48px; border-radius: 24px; background: var(--tint-green-bg); border: 1px solid var(--bca-green); overflow: hidden; }
.mark .slider { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; cursor: pointer; z-index: 2; }
.mark .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; border-radius: 50%; background: var(--bca-green); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mark .slider::-moz-range-thumb { width: 44px; height: 44px; border-radius: 50%; background: var(--bca-green); border: 2px solid #fff; }
.mark .slider::-webkit-slider-runnable-track, .mark .slider::-moz-range-track { background: transparent; height: 100%; }
.mark .slide-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; padding-left: 58px; gap: 6px; font-weight: 600; color: var(--tint-green-fg); pointer-events: none; font-size: var(--f2); }
.mark .slide-label .ic { width: 16px; height: 16px; }
.mark .slide.armed .slide-label { opacity: 0.35; }
.mark .mark-acts, .mark .photo-step { display: flex; gap: 8px; flex-wrap: wrap; }
.mark .mark-acts .tap, .mark .photo-step .tap { flex: 1; min-width: 96px; min-height: 40px; }
.mark .photo-step { align-items: center; padding: 8px; background: var(--ground); border-radius: var(--r); }
.mark .tap.primary { background: var(--bca-blue); color: #fff; border-color: var(--bca-blue); }
.mark .tap.quiet { border-style: dashed; }
.mark-status { color: var(--ink-2); min-height: 1em; }
.mark-status.ok { color: var(--tint-green-fg); font-weight: 600; }
.mark-status.bad { color: var(--tint-red-fg); font-weight: 600; }
.mark.done { opacity: 0.6; }
.brand-top .pending { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--tint-amber-fg); background: var(--tint-amber-bg); border-radius: 999px; padding: 3px 10px; font-size: var(--f1); font-weight: 600; }
.brand-top .pending i { width: 7px; height: 7px; border-radius: 50%; background: var(--edge-attention); display: inline-block; }
.brand-top .pending + .sync { margin-left: 12px; }

/* AM Performance charts: inline SVG, theme colours, no libraries (SPEC 18.13) */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s4); }
.chart svg { display: block; width: 100%; height: 180px; overflow: visible; }
.chart svg .grid { stroke: var(--hair); stroke-width: 1; }
.chart-x { position: relative; height: 16px; margin-top: 4px; }
.chart-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.chart-x span:first-child { transform: none; }
.chart-x span:last-child { transform: translateX(-100%); }
.stat { display: inline-block; margin-right: var(--s5); } .stat b { display: block; font-size: var(--f1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .stat .v { font-size: var(--f4); font-weight: 600; color: var(--bca-blue-deep); }

/* ---- week roster ---------------------------------------------------------------------------- */
.week { width: 100%; border-collapse: separate; border-spacing: 0; }
.week th { position: sticky; top: var(--stick); z-index: 5; background: var(--surface); font-size: var(--f1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hair); }
.week th small { display: block; color: var(--ink-4); letter-spacing: 0; text-transform: none; font-weight: 500; }
.week td { padding: 10px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; height: 74px; }
.week td.zone { font-weight: 600; white-space: nowrap; box-shadow: inset 4px 0 0 var(--zc, var(--bca-blue)); color: var(--zink, var(--ink)); }
.week td.zone span { display: block; color: var(--ink-3); font-size: var(--f1); font-weight: 400; }
.week td.off { background: var(--ground); color: var(--ink-4); font-size: var(--f1); }
.cell { display: flex; align-items: flex-start; gap: 8px; }
.cell .av { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--bca-blue-deep); box-shadow: 0 0 0 2px var(--zc, var(--bca-blue)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.cell b { display: block; font-size: var(--f2); }
.cell span { display: block; font-size: var(--f1); color: var(--ink-3); }
.cell.ovr { box-shadow: inset 3px 0 0 var(--edge-attention); padding-left: 8px; }
.cell.ovr .roster { text-decoration: line-through; color: var(--ink-4); }
.cell.ovr .why { color: var(--tint-amber-fg); font-weight: 600; }
.cell.none .av { color: var(--tint-red-fg); box-shadow: 0 0 0 2px var(--tint-red-fg); }
.cell.none b { color: var(--tint-red-fg); }

/* ---- TV mode --------------------------------------------------------------------------------- */
body.tv { background: var(--bca-navy); color: var(--on-navy); font-size: var(--t2); }
.tvtop { display: flex; justify-content: space-between; align-items: center; padding: 28px 48px 0; }
.tvtop .brand { display: flex; align-items: center; gap: 20px; }
.tvtop .t { font-size: var(--t3); font-weight: 600; line-height: 1.1; color: var(--on-navy); }
.tvtop .sub { font-size: var(--t1); color: var(--on-navy-2); }
.tvtop .clock { font-size: var(--t4); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.tvlanes { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 32px; padding: 28px 48px 48px; }
@media (max-width: 1500px) { .tvlanes { gap: 20px; padding: 20px 28px 36px; } .tvlane { padding: 22px 24px; } }
@media (max-width: 900px) { .tvlanes { grid-template-columns: minmax(0, 1fr); } }
.tvlane { background: var(--bca-navy-2); border-radius: 20px; padding: 28px 32px; box-shadow: inset 0 8px 0 var(--zc, var(--bca-blue)); }
.tvlane h2 { font-size: var(--t4); font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; color: var(--on-navy); margin-top: 8px; }
.tvowner { display: flex; align-items: center; gap: 16px; margin-top: 18px; font-size: var(--t2); }
.tvowner .av { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--bca-navy); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--t1); box-shadow: 0 0 0 4px var(--zc, var(--bca-blue)); flex: none; }
.tvowner b { display: block; font-weight: 600; }
.tvowner span { display: block; font-size: var(--t1); color: var(--on-navy-2); }
.tvowner.none .av { background: var(--tint-red-bg); color: var(--tint-red-fg); box-shadow: 0 0 0 4px #F87171; }
.tvowner.none b { color: #FCA5A5; }
.tvlane .big { display: flex; align-items: baseline; gap: 14px; margin: 22px 0 6px; }
.tvlane .big .n { font-size: var(--t5); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--on-navy); }
.tvlane .big .n small { color: rgba(255, 255, 255, 0.45); font-weight: 500; font-size: var(--t4); }
.tvlane .big .u { font-size: var(--t2); color: var(--on-navy-2); }
.tvlane .cod { font-size: var(--t2); color: var(--tv-pending); font-weight: 600; }
.tvlane .mos { margin: 22px 0 26px; }
.tvstop { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 2px solid rgba(255, 255, 255, 0.14); font-size: var(--t2); }
.tvstop .c { font-weight: 600; }
.tvstop .city { color: rgba(255, 255, 255, 0.65); font-size: var(--t1); display: block; font-weight: 400; }
.tvstop .st { font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.tvstop .c { min-width: 0; }
@media (max-width: 1700px) { .tvstop { flex-direction: column; align-items: flex-start; gap: 6px; } .tvstop .st { white-space: normal; font-size: var(--t1); } }
.tvstop .st .ic { width: 24px; height: 24px; }
.st.done { color: var(--tv-done); } .st.pend { color: var(--tv-pending); } .st.part { color: var(--tv-partial); }
.tvidle { padding: 0 48px 40px; font-size: var(--t1); color: rgba(255, 255, 255, 0.65); }
.tvidle b { color: var(--on-navy); }
.tvfoot { position: fixed; left: 0; right: 0; bottom: 0; padding: 14px 48px; font-size: var(--t1); color: rgba(255, 255, 255, 0.55); background: linear-gradient(to top, var(--bca-navy) 70%, transparent); }

/* ---- sign-in and bare pages ------------------------------------------------------------------ */
body.signin { background: var(--surface); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.hero { background: var(--bca-navy); color: var(--on-navy); display: flex; flex-direction: column; justify-content: space-between; padding: var(--s7); }
.hero .tag { font-size: var(--f1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bca-cyan); font-weight: 600; }
.hero h2 { font-size: var(--f5); letter-spacing: -0.02em; line-height: 1.15; max-width: 440px; margin-top: var(--s3); color: var(--on-navy); }
.hero p { color: rgba(255, 255, 255, 0.75); max-width: 440px; font-size: var(--f3); margin-top: var(--s3); }
.hero .markwrap { display: flex; justify-content: center; align-items: center; flex: 1; }
.hero .markwrap svg, .hero .markwrap img { width: 300px; height: 300px; }
.hero .foot { font-size: var(--f1); color: rgba(255, 255, 255, 0.6); }
.pane { display: flex; flex-direction: column; justify-content: center; padding: var(--s7) var(--s8); max-width: 560px; width: 100%; margin: 0 auto; }
.pane .logo { width: 220px; height: auto; display: block; }
.pane h1 { font-size: var(--f4); color: var(--bca-blue-deep); margin: var(--s6) 0 var(--s2); }
.pane p.lead { color: var(--ink-3); margin: 0 0 var(--s5); }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-4); font-size: var(--f1); letter-spacing: 0.06em; text-transform: uppercase; margin: var(--s5) 0 var(--s3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.fine { font-size: var(--f1); color: var(--ink-3); margin-top: var(--s5); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .hero { display: none; } .pane { padding: var(--s6) var(--s4); } }
.bare { max-width: 440px; margin: var(--s8) auto 0; padding: 0 var(--s4); }
.bare .logo { width: 180px; height: auto; display: block; margin-bottom: var(--s5); }
.bare-card { max-width: 440px; }
.content .bare-card { margin: var(--s7) auto 0; }

/* ---- print --------------------------------------------------------------------------------------- */
.print-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.print-head .brand { display: flex; align-items: center; gap: 12px; }
.print-head .brand img { width: 36px; height: 36px; }
.print-head .brand b { font-size: var(--f3); color: var(--bca-blue-deep); }
@media print {
  body { background: #fff; }
  .brand-top, .brand-rule, .side, .no-print, .daytabs, .filters, .page-head .acts { display: none !important; }
  .frame { display: block; }
  .content { padding: 0; }
  .tbl th, .sec, .tbl tr.grp td { position: static; }
  .sheet { page-break-after: always; }
  .sheet:last-child { page-break-after: auto; }
}