/* =============================================================================
   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, weights 400-700), five sizes, base 15 px.
   Visual pass 2 (2026-09-28): ink #0B2545 text and sidebar, page #E9EFF5, solid chips, module-coloured menu blocks,
   fixed top bar with one --top-total variable behind every sticky offset.
   ============================================================================= */

@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: #0B2545;          /* = ink: the sidebar, the TV wall, the sign-in panel */
  --bca-navy-2: #1B3A5C;

  /* 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;
  --bca-cyan-bright: #14CDF5;
  --bca-green-dark: #237A22; --bca-teal: #087E8B; --bca-slate: #3B4A5C;
  --red: #9B1C1C; --amber: #92400E;
  /* module colours (Release 2): the sidebar banner, the page band, the access editor */
  --mod-company: #3B4A5C; --mod-sales: #167DB2; --mod-money: #237A22; --mod-customers: #087E8B; --mod-warehouse: #00569C; --mod-admin: #3B4A5C; --mod-supply: #3AAA35; --mod-hr: #9A3412; --mod-finance: #5B3A8C;
  /* module icon tints on the ink sidebar (each at least 3:1 on --ink; checked by tests) */
  --mod-company-tint: #94A3B8; --mod-sales-tint: #5AA9DD; --mod-money-tint: #5DBB63; --mod-customers-tint: #5AA9DD; --mod-warehouse-tint: #6E9BDB; --mod-admin-tint: #94A3B8; --mod-supply-tint: #90CF44; --mod-finance-tint: #B9A3E3; --mod-hr-tint: #F0A878;
  --side-text: #D5DEE8; --side-icon: #8FA9C4; --side-chev: #94A3B8; --side-bg: #0F1C2E;
  --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 */
  /* text on a solid zone chip: white or ink, whichever passes 4.5:1 (checked by tests) */

  /* account manager colours: one solid colour per person (-bg is the fill, -fg the text on it, 4.5:1 or better) */
  --am-blue: #167DB2;   --am-blue-bg: #167DB2;   --am-blue-fg: #FFFFFF;
  --am-teal: #0F766E;   --am-teal-bg: #0F766E;   --am-teal-fg: #FFFFFF;
  --am-violet: #7C3AED; --am-violet-bg: #7C3AED; --am-violet-fg: #FFFFFF;
  --am-rose: #DB2777;   --am-rose-bg: #DB2777;   --am-rose-fg: #FFFFFF;
  --am-amber: #D97706;  --am-amber-bg: #D97706;  --am-amber-fg: #0B2545;
  --am-green: #16A34A;  --am-green-bg: #16A34A;  --am-green-fg: #0B2545;
  --am-slate: #64748B;  --am-slate-bg: #64748B;  --am-slate-fg: #FFFFFF;
  --am-cyan: #0E7490;   --am-cyan-bg: #0E7490;   --am-cyan-fg: #FFFFFF;

  /* ground and ink */
  --ground: #F5F7FA;            /* the page (C16) */
  --surface: #FFFFFF;           /* cards */
  --card-border: #E2E8F0; --card-shadow: 0 1px 3px rgba(11, 37, 69, 0.10);
  --table-head: #F1F4F8;
  --ink: #0F1C2E;               /* body text and the sidebar (C16), 16:1 on white */
  --ink-2: #465567;             /* secondary text, labels on the page ground, 7:1 on white */
  --ink-3: #64748B;             /* labels and hints on white cards only (4.8:1 on white, 4.4:1 on the page ground); never below 12 px */
  --ink-4: #8A9BB0;             /* hairline decoration only, never text */
  --placeholder: #5B7089;
  --hair: #E8EDF3;              /* row dividers */
  --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: #FEF3E2;   --tint-amber-fg: #92400E;
  --tint-orange-bg: #FEF3E2;  --tint-orange-fg: #92400E;
  --tint-blue-bg: #E6F0F8;    --tint-blue-fg: #0B4F84;
  --tint-green-bg: #E8F5EC;   --tint-green-fg: #1E6B34;
  --tint-red-bg: #FDECEC;     --tint-red-fg: #9B1C1C;
  --tint-cyan-bg: #E6F0F8;    --tint-cyan-fg: #0B4F84;
  --tint-neutral-bg: #EEF2F6; --tint-neutral-fg: #334155;
  --tint-urgent-bg: #FDECEC;  --tint-urgent-fg: #9B1C1C;   /* C16: overdue is the soft danger chip too */
  /* solid chips (badges, pills, counts): palette fills with white or ink text, whichever passes 4.5:1; no pastel on pastel */
  --solid-amber: #B54708;   --solid-amber-on: #FFFFFF;
  --solid-orange: #9A3412;  --solid-orange-on: #FFFFFF;
  --solid-blue: #167DB2;    --solid-blue-on: #FFFFFF;
  --solid-green: #237A22;   --solid-green-on: #FFFFFF;
  --solid-red: #B42318;     --solid-red-on: #FFFFFF;
  --solid-cyan: #28AEE3;    --solid-cyan-on: #0B2545;
  --solid-neutral: #3B4A5C; --solid-neutral-on: #FFFFFF;
  --solid-urgent: #B42318;  --solid-urgent-on: #FFFFFF;

  /* severity */
  --edge-urgent: #9B1C1C;
  --edge-attention: #92400E;
  --edge-info: var(--bca-blue);
  --edge-clear: var(--bca-green);
  --sev-urgent: #9B1C1C;
  --sev-attention: #92400E;
  --sev-info: #0B4F84;
  --sev-clear: #1E6B34;

  /* status words on navy (TV mode) */
  --tv-done: #90CF44;
  --tv-pending: #BCC4CB;
  --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: 248px; --rail-w: 64px; --th-h: 40px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --top-total: calc(var(--topbar-h) + var(--rule-h) + var(--safe-top));   /* the fixed header's height; app.js keeps it exact; every sticky offset starts here */
  --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(--f3)/1.5 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--bca-blue-deep); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; overflow-wrap: break-word; }   /* D16: one long word (a file path) wraps inside its card, also under wide letter spacing */
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-3); }
.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-deep); font-weight: 600; }
a.link:hover, .link:hover { text-decoration: underline; color: var(--bca-blue-deep); }
::placeholder { color: var(--placeholder); opacity: 1; }
.over, .tbl td.over { color: var(--red); font-weight: 700; }
a.plain { color: var(--ink); font-weight: 600; } a.plain:hover { color: var(--bca-blue-ink); text-decoration: underline; }
:focus-visible { outline: 2px solid #00569C; outline-offset: 2px; border-radius: var(--r-sm); }   /* D19: deep blue, 2 px, everywhere */
@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); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.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); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.tablewrap { overflow-x: auto; }                     /* C4: every table scrolls inside its card when wider than it, never the page */
.tablewrap.fits { overflow: visible; }               /* app.js: the table fits its card, so no scroll container and its headers and person banners stick under the top bar */
@media (max-width: 1023.98px) { .tablewrap { overflow-x: auto; } }

/* ---- frame: fixed top bar (logo, live status, menu button), gradient rule, ink sidebar ---------------------------
   B5: the header is position: fixed on every screen; app.js writes its real height into --top-total, and every
   sticky header (tables, section heads, person banners, the board's day tabs) offsets from that one variable.
   On phones the bar shrinks from 64 to 52 px once scrolled and the sidebar becomes a drawer behind the menu button. */
body.framed { padding-top: var(--top-total); }
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--surface); }
.brand-top { background: var(--surface); height: calc(var(--topbar-h) + var(--safe-top)); padding: var(--safe-top) calc(var(--s5) + var(--safe-right)) 0 calc(var(--s5) + var(--safe-left)); display: flex; align-items: center; gap: var(--s4); transition: height var(--motion); }
.brand-top .logo { width: 150px; height: auto; display: block; transition: width var(--motion); }
.brand-top .menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -8px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); cursor: pointer; }
.brand-top .menu-btn .ic { width: 24px; height: 24px; }
.brand-top .menu-btn:hover, body.menu-open .brand-top .menu-btn { background: var(--ground); }
.brand-top .wsname-top { display: none; font-weight: 700; color: var(--ink); font-size: var(--f3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.brand-top .sync { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--f2); font-weight: 500; white-space: nowrap; }
.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(--red); }
.sync.catching i { background: var(--edge-attention); }
.sync.never i { background: var(--ink-4); }
.sync.live i { background: var(--bca-green); }
.sync.stale { color: var(--red); font-weight: 600; }
.brand-top .stale-pill { display: none; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font: inherit; font-size: var(--f1); font-weight: 700; white-space: nowrap; cursor: pointer; }
.brand-top .stale-pill .ic { width: 14px; height: 14px; }
.stale-banner { display: flex; align-items: center; gap: 10px; background: var(--tint-red-bg); color: var(--red); 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(--red); font-weight: 600; }
.syncline.bad .ic { animation: none; }
.chip.syncing { border-color: var(--bca-cyan); color: var(--bca-blue-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); }
.menu-veil { display: none; }
.frame { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh - var(--top-total)); align-items: start; }
.frame.rail { --side-w: var(--rail-w); }

/* Batch D, D19: the light sidebar (the Stripe / Shopify / Atlassian pattern). #F7F9FC with a 1 px #E2E8F0 right border;
   section labels 12.5 px / 600 in #64748B with an 8 px dot in the module colour, not clickable-looking, a chevron to
   fold; pages 14 px / 500 in #1E293B, 18 px icons in #64748B, 36 px rows, 12 px under the label; hover #EEF2F7; the
   current page on #E6F0F8 in deep blue with a 3 px deep blue bar. Collapsed: one icon per section with a flyout. */
.side { --sb-bg: #F7F9FC; --sb-line: #E2E8F0; --sb-label: #64748B; --sb-text: #1E293B; --sb-icon: #64748B; --sb-hover: #EEF2F7; --sb-on: #E6F0F8; --sb-deep: #00569C;
  position: sticky; top: var(--top-total); align-self: start; height: calc(100vh - var(--top-total)); height: calc(100dvh - var(--top-total)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--sb-bg); border-right: 1px solid var(--sb-line); color: var(--sb-text); display: flex; flex-direction: column; padding: var(--s3) 0 var(--s3); overflow-x: hidden; }
.side > * { flex: none; }                                            /* the list scrolls inside the sidebar; nothing is squeezed to fit */
.side .wsname { padding: 4px var(--s4) var(--s3); }
.side .wsname .lbl { display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-label); font-weight: 600; }
.side .wsname b { display: block; color: var(--sb-text); font-size: 17px; font-weight: 700; margin-top: 2px; line-height: 1.25; }
.side .wsname details { position: relative; }
.side .wsname summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 6px; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; transition: background-color 150ms; }
.side .wsname summary:hover { background: var(--sb-hover); }
.side .wsname summary::-webkit-details-marker { display: none; }
.side .wsname summary .ic { width: 16px; height: 16px; color: var(--sb-icon); }
.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: 1px; padding: 0 8px; }
.side nav a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px 0 12px; border-radius: 6px; color: var(--sb-text); font-size: 14px; font-weight: 500; line-height: 1.2; position: relative; white-space: nowrap; transition: background-color 150ms, color 150ms; }
.side nav .ic { width: 18px; height: 18px; color: var(--sb-icon); flex: none; transition: color 150ms; }
.side nav a:hover { background: var(--sb-hover); color: var(--sb-text); }
.side nav a.on { background: var(--sb-on); color: var(--sb-deep); font-weight: 600; }
.side nav a.on .ic { color: var(--sb-deep); }
.side nav a.on::before { content: ""; position: absolute; left: -8px; top: 4px; bottom: 4px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sb-deep); }
.side .cnt { margin-left: auto; background: var(--sb-on); color: #0B4F84; font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.side nav a.on .cnt { background: var(--sb-deep); color: #fff; }
.side .side-div { border: 0; border-top: 1px solid var(--sb-line); margin: 10px 16px 0; }
.side .grp { margin: 20px 0 0; }
.side .grp .grp-h { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 12px 0 20px; border: 0; background: transparent; color: var(--sb-label); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; text-align: left; }
.side .grp .grp-h .gdot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--sb-label)); flex: none; }
.side .grp .grp-h span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .grp .grp-h .chev { margin-left: auto; width: 14px; height: 14px; color: var(--sb-label); flex: none; transition: transform 150ms; }
.side .grp[data-open="0"] .grp-h .chev { transform: rotate(-90deg); }
.side .grp[data-open="0"] .grp-items { display: none; }
.side .grp .grp-items { padding: 2px 8px 0 20px; }                  /* pages 12 px in from the label */
.side .grp .grp-items a.on::before { left: -20px; }
.side .grp .grp-rail, .side .fly-h { display: none; }
.side .portal { margin: auto 0 0; padding: var(--s3) 8px 0; }
.side .portal a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-radius: 6px; color: var(--sb-text); font-size: 14px; font-weight: 500; transition: background-color 150ms; }
.side .portal a .ic { color: var(--sb-icon); width: 18px; height: 18px; }
.side .portal a:hover { background: var(--sb-hover); }
.side .toggle { margin: 6px 8px 0; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-radius: 6px; color: var(--sb-label); font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; border: 1px solid var(--sb-line); font-family: inherit; width: calc(100% - 16px); text-align: left; transition: background-color 150ms, color 150ms; }
.side .toggle .ic { width: 18px; height: 18px; color: var(--sb-icon); }
.side .toggle .t-exp { display: none; }
.side .toggle:hover { background: var(--sb-hover); color: var(--sb-text); }
.side .userchip { padding: var(--s3) var(--s4) 0; margin-top: var(--s3); border-top: 1px solid var(--sb-line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.side .userchip .txt { flex: 1 1 auto; min-width: 0; }
.side .userchip b { overflow: hidden; text-overflow: ellipsis; }
.side .userchip .av { width: 32px; height: 32px; border-radius: 50%; background: var(--sb-on); color: var(--sb-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.side .userchip b { display: block; font-size: 13px; white-space: nowrap; color: var(--sb-text); }
.side .userchip .role { color: var(--sb-label); font-size: 12px; white-space: nowrap; display: block; }
.side .userchip form { margin-left: auto; }
.side .userchip .btn.quiet { color: var(--sb-label); }
/* Prod 4.3: the sidebar's icons. 20 px, 1.75 stroke (app/nav_icons.py), each in its section's colour; the current page sits on a filled tile.
   The inks are the section colours (the dots) darkened only where the dot itself is under 4.5:1 on the sidebar (Sales, Supply Chain);
   tests/test_p43_nav_icons.py holds every pair to 4.5:1. The dark values apply only under [data-theme="dark"], which nothing sets yet. */
.side { --ink-home: #3B4A5C; --ink-sales: #126F9E; --ink-money: #237A22; --ink-warehouse: #00569C; --ink-supply: #2A7527; --ink-finance: #5B3A8C; --ink-admin: #3B4A5C; --tile-fg: #FFFFFF; }
.side nav.home, .side .portal { --ink: var(--ink-home); }
.side .grp[data-group="sales"] { --ink: var(--ink-sales); }
.side .grp[data-group="money"] { --ink: var(--ink-money); }
.side .grp[data-group="warehouse"] { --ink: var(--ink-warehouse); }
.side .grp[data-group="supply"] { --ink: var(--ink-supply); }
.side .grp[data-group="finance"] { --ink: var(--ink-finance); }
.side .grp[data-group="admin"] { --ink: var(--ink-admin); }
.side nav a { gap: 8px; padding-left: 8px; }
.side nav a .tile, .side .portal a .tile { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background-color 150ms; }
.side nav a .tile .nav-ic, .side .portal a .tile .nav-ic, .side .grp .grp-rail .nav-ic { width: 20px; height: 20px; flex: none; color: var(--ink, var(--sb-icon)); transition: color 150ms; }
.side nav a.on .tile, .side .portal a.on .tile { background: var(--ink, var(--sb-deep)); }
.side nav a.on .tile .nav-ic { color: var(--tile-fg); }
[data-theme="dark"] .side { --sb-bg: #0F1C2E; --sb-line: #24364F; --sb-label: #9AA8BA; --sb-text: #E2E8F0; --sb-icon: #9AA8BA; --sb-hover: #1A2B42; --sb-on: #1E3A5F; --sb-deep: #9CCBF2;
  --ink-home: #A7B4C6; --ink-sales: #66B3E6; --ink-money: #5DBB63; --ink-warehouse: #86ABE3; --ink-supply: #90CF44; --ink-finance: #B9A3E3; --ink-admin: #A7B4C6; --tile-fg: #0F1C2E; }
[data-theme="dark"] .side .cnt { color: #E2E8F0; }
/* collapsed rail (desktop only): one distinct icon per section plus the home items; a section's pages in a flyout */
@media (min-width: 1024px) {
  .rail .side { overflow-x: hidden; }
  .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; margin: 0; }
  .rail .side .wsname .mini { display: block; width: 28px; height: 28px; margin: 0 auto; }   /* E3: the BCA mark, the workspace named on hover */
  .rail .side nav { padding: 0 8px; }
  .rail .side nav.home a, .rail .side .portal a { justify-content: center; padding: 0; min-height: 40px; }
  .rail .side .side-div { margin: 10px 12px 0; }
  .rail .side .grp { margin: 6px 0 0; padding: 0 8px; }
  .rail .side .grp .grp-rail { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 40px; border: 0; border-radius: 6px; background: transparent; color: var(--sb-icon); cursor: pointer; transition: background-color 150ms, color 150ms; }
  .rail .side .grp .grp-rail .ic { width: 20px; height: 20px; }
  .rail .side .grp .grp-rail:hover, .rail .side .grp.fly .grp-rail { background: var(--sb-hover); color: var(--sb-text); }
  .rail .side .grp[data-has-on] .grp-rail { background: var(--sb-on); color: var(--sb-deep); }
  .rail .side .grp[data-has-on] .grp-rail::before { content: ""; position: absolute; left: -8px; top: 4px; bottom: 4px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sb-deep); }
  /* E2: a small pill at the icon's top-right corner, outside the icon's shape (the icon is 20 px, centred) */
  .rail .side .cnt { position: absolute; top: 0; left: calc(50% + 9px); right: auto; margin: 0; min-width: 17px; height: 17px; font-size: 12px; line-height: 1; padding: 0 3px; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; border-radius: 9px; box-shadow: 0 0 0 2px var(--sb-bg); pointer-events: none; }
  .rail .side .grp .grp-items, .rail .side .grp[data-open="0"] .grp-items { display: none; }
  .rail .side .grp.fly .grp-items { display: flex; position: fixed; left: calc(var(--rail-w) + 4px); top: var(--fly-top, 120px); z-index: 60; min-width: 220px; max-height: calc(100vh - var(--fly-top, 120px) - 12px); overflow-y: auto; background: var(--surface); border: 1px solid var(--sb-line); border-radius: 8px; box-shadow: var(--float); padding: 6px; }
  .rail .side .grp.fly .grp-items a { justify-content: flex-start; padding: 0 10px; min-height: 36px; }
  .rail .side .grp.fly .grp-items a .lbl { display: inline; }
  .rail .side .grp.fly .grp-items a.on::before { display: none; }
  .rail .side .grp.fly .grp-items .cnt { position: static; margin-left: auto; }
  .rail .side .grp.fly .fly-h { display: block; padding: 6px 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--sb-label); }
  .rail .side .toggle { justify-content: center; padding: 0; margin: 6px 8px 0; }
  .rail .side .toggle .t-col { display: none; }
  .rail .side .toggle .t-exp { display: inline-block; }
  .rail .side .userchip { justify-content: center; padding: var(--s3) 0 0; }
}
/* D19: tooltips (400 ms; 150 ms on the rail) for icon-only controls and truncated text */
/* E1: a flyout, menu or tooltip in the top layer keeps its own look: the browser's popover defaults (centred, border,
   padding, canvas colours) are reset at zero specificity so every class rule still decides */
:where([popover]) { inset: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
.tip { position: fixed; z-index: 90; pointer-events: none; max-width: 320px; padding: 5px 9px; border-radius: 6px; background: #1E293B; color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.35; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2); opacity: 0; transition: opacity 120ms; }
.tip.show { opacity: 1; }
/* D19: mouse behaviour across the app: a pointer and a visible hover on everything clickable, nothing else */
a[href], button:not(:disabled), summary, select:not(:disabled), label:has(> input[type="checkbox"]), label:has(> input[type="radio"]), input[type="checkbox"], input[type="radio"], [role="button"], tr[data-href] { cursor: pointer; }
button:disabled, .btn[disabled] { cursor: not-allowed; }
.btn { transition: background-color 150ms, border-color 150ms, color 150ms, box-shadow 150ms; }
.tbl tbody tr { transition: background-color 150ms; }
.tbl tbody tr:not(.grp):hover > td { background-color: #F1F5FA; }
tr[data-href]:hover > td a.plain { color: var(--bca-blue-ink); }
.content { padding: var(--s5) var(--s5) var(--s8); min-width: 0; --pad: var(--s5); }
.preview-banner { display: flex; align-items: center; gap: 10px; padding: 8px var(--s5); background: var(--mod-admin); color: #fff; font-weight: 600; }
.preview-banner .ic { width: 18px; height: 18px; }
.tbl.access tr.later td { color: var(--ink-3); }
.modtag { display: inline-block; padding: 2px 10px; border-radius: 4px; color: #fff; font-size: var(--f1); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
/* category band: the module the page belongs to, in its accent colour, phone to desktop */
.band { display: flex; align-items: center; gap: 10px; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--s4); padding: 7px var(--pad); background: color-mix(in srgb, var(--c, var(--bca-blue)) 9%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--c, var(--bca-blue)) 28%, var(--hair)); box-shadow: inset 4px 0 0 var(--c, var(--bca-blue)); font-size: var(--f1); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); min-width: 0; }
.band i { width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--bca-blue)); flex: none; }
.band .lbl { white-space: nowrap; }
.band .sep { color: var(--ink-3); font-weight: 400; }
.band b { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023.98px) {
  .frame { grid-template-columns: minmax(0, 1fr); }
  .brand-top { padding-left: calc(var(--s3) + var(--safe-left)); padding-right: calc(var(--s3) + var(--safe-right)); gap: var(--s3); }
  .brand-top .menu-btn { display: inline-flex; }
  .brand-top .stale-pill { height: 44px; }                                                /* a thumb-sized tap target on the phone */
  .brand-top .wsname-top { display: block; }
  .brand-top .logo { width: 118px; }
  .brand-top .sync [data-sync-text] { display: none; }              /* the dot alone; the words live in the sidebar and on the sync page */
  .brand-top .stale-pill:not([hidden]) { display: inline-flex; }
  body.scrolled .brand-top { height: calc(52px + var(--safe-top)); }
  body.scrolled .brand-top .logo { width: 100px; }
  .stale-banner { display: none; }                                  /* the full message opens from the pill */
  body.stale-open .stale-banner { display: flex; }
  /* C13: the drawer is exactly the visible screen height (dvh: browser bars and the installed app), its list scrolls inside it,
     the last item clears the home indicator, and the page behind is locked (app.js pins the body while it is open). */
  .side { position: fixed; top: var(--top-total); bottom: auto; left: 0; width: min(300px, 86vw); height: calc(100vh - var(--top-total)); height: calc(100dvh - var(--top-total)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateX(-100%); transition: transform var(--motion); z-index: 45; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
  body.menu-open .side { transform: none; box-shadow: 12px 0 32px rgba(11, 37, 69, 0.35); }
  .menu-veil { position: fixed; left: 0; right: 0; bottom: 0; top: var(--top-total); background: rgba(11, 37, 69, 0.45); z-index: 44; overscroll-behavior: contain; touch-action: none; }
  body.menu-open .menu-veil { display: block; }
  body.menu-open { overflow: hidden; position: fixed; left: 0; right: 0; width: 100%; overscroll-behavior: none; }
  .side .toggle { display: none; }
  .content { padding: var(--s4) var(--s4) var(--s8); --pad: var(--s4); }
}

/* 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: 12px; font-weight: 700; }
.cnt.urgent { background: var(--solid-red); color: var(--solid-red-on); }
.cnt.attention { background: var(--solid-amber); color: var(--solid-amber-on); }
.cnt.info { background: var(--solid-blue); color: var(--solid-blue-on); }

/* ---- 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-deep); font-weight: 600; }
.crumbs .sep { color: var(--ink-3); }
.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; border: 1px solid var(--card-border); box-shadow: inset 0 3px 0 var(--c, transparent), var(--card-shadow); 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: calc(var(--top-total) + 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 { flex-wrap: wrap; row-gap: 2px; } .sec > span:not(.n):not(.tot) { flex: 0 1 auto; min-width: min(100%, 14ch); } .sec .tot { min-width: 0; flex: 1 1 16ch; flex-wrap: wrap; justify-content: flex-end; text-align: right; }   /* the title keeps its line; a long note wraps beside it or drops below */
.sec .ic { width: 16px; height: 16px; color: var(--c, var(--bca-blue)); }
.tbl tr.grp td { position: sticky; top: calc(var(--top-total) + var(--stick) + var(--th-h)); z-index: 3; background: var(--ground); font-weight: 600; color: var(--ink); padding: 8px 12px; border-bottom: 1px solid var(--hair); box-shadow: inset 6px 0 0 var(--c, var(--bca-blue)); }
/* B3: a person's group is a full-width deep banner, 52 px, 24 px of space above, their colour on the initials badge; collapsible */
.tbl tr.grp.person td { background: var(--bca-blue-deep); background-clip: padding-box; color: #fff; padding: 0 12px; border-top: 24px solid transparent; border-bottom: 0; box-shadow: none; cursor: pointer; }
.tbl tr.grp.person.house td { background: var(--bca-slate); background-clip: padding-box; }
.tbl tr.grp.person:first-child td { border-top-width: 0; }
.tbl tr.grp.person td .pr { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.tbl tr.grp.person .av { width: 32px; height: 32px; border-radius: 50%; background: var(--c, var(--bca-cyan)); color: var(--on, #fff); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }
.tbl tr.grp.person .name { font-size: 17px; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl tr.grp.person .name a { color: inherit; } .tbl tr.grp.person .name a:hover { text-decoration: underline; color: inherit; }
.tbl tr.grp.person .tot { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: var(--f3); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tr.grp.person .tot .pill.over { background: #fff; color: var(--red); font-weight: 700; font-size: var(--f2); padding: 2px 10px; }
.tbl tr.grp.person .chev { width: 18px; height: 18px; flex: none; transition: transform var(--motion); }
.tbl tr.grp.person.collapsed .chev { transform: rotate(-90deg); }
.tbl tr.grp.person:hover td { background: var(--bca-blue-deep); background-clip: padding-box; filter: brightness(1.06); }
.tbl tr.grp.person.house:hover td { background: var(--bca-slate); background-clip: padding-box; }
.tbl.compact tr.grp.person td, .tbl.onerow tr.grp.person td { padding: 0 12px; }
.tbl tr.grp td.money { box-shadow: none; color: var(--ink-2); }
.tbl tr.grp td.daytot { font-weight: 600; white-space: nowrap; }   /* Prod 2.4: "Day total: $X" and "open $Y" under Amount and Balance */
.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: transparent; background: var(--c, var(--zone-unknown)); color: var(--on, #fff); }
.chip.zone i { display: none; }
.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(--solid-neutral)); color: var(--fg, var(--solid-neutral-on)); }
.chip.am .av { width: 16px; height: 16px; border-radius: 50%; background: var(--fg, #fff); color: var(--bg, var(--ink)); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chip.extra { background: var(--solid-cyan); color: var(--solid-cyan-on); 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(--solid-amber);   color: var(--solid-amber-on); }
.t-orange  { background: var(--solid-orange);  color: var(--solid-orange-on); }
.t-blue    { background: var(--solid-blue);    color: var(--solid-blue-on); }
.t-green   { background: var(--solid-green);   color: var(--solid-green-on); }
.t-red     { background: var(--solid-red);     color: var(--solid-red-on); }
.t-cyan    { background: var(--solid-cyan);    color: var(--solid-cyan-on); }
.t-neutral { background: var(--solid-neutral); color: var(--solid-neutral-on); }
.t-urgent  { background: var(--solid-urgent);  color: var(--solid-urgent-on); }
.badge.void span { text-decoration: line-through; }

/* 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(--solid-green); color: var(--solid-green-on); }
.pill.out { background: var(--solid-blue); color: var(--solid-blue-on); }
.pill.not_started, .pill.empty { background: var(--solid-neutral); color: var(--solid-neutral-on); }
.pill.issues { background: var(--solid-amber); color: var(--solid-amber-on); }
.pill.urgent { background: var(--solid-red); color: var(--solid-red-on); }

/* 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(--red); 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); }
.btn.primary[disabled] { color: var(--ink-4); border-color: var(--hair); background: var(--surface); }   /* E28: a waiting "Call me" never looks ready */
.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(--card-border); 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(--f3); }
.tbl th { position: sticky; top: calc(var(--top-total) + var(--stick)); z-index: 5; background: var(--table-head); text-align: left; font-size: var(--f2); letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 700; padding: 0 12px; height: var(--th-h); border-bottom: 2px solid var(--bca-blue-deep); 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 td.money { font-weight: 600; }
.tbl td.cust, .tbl td.cust a, .tbl td b { font-weight: 600; }
.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; }
/* priority: no full-row pastel fill; a 6 px bar in the priority colour plus the solid chip in the row */
.tbl tr.problem td:first-child { box-shadow: inset 6px 0 0 var(--edge-attention); }
.tbl tr.problem.urgent td:first-child { box-shadow: inset 6px 0 0 var(--edge-urgent); }
.tbl .sub { display: block; font-size: var(--f1); color: var(--ink-2); 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(--f2); }                    /* the dense Zoho column set: 13 px, never smaller */
.tbl.onerow td, .tbl.onerow th { padding: 7px 6px; }
.tbl.onerow .chip.zone { padding: 1px 7px; font-size: 12px; }
.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: var(--top-total); z-index: 8; display: flex; gap: 4px; align-items: stretch; flex-wrap: nowrap; overflow: hidden; 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); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.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(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--s5); align-items: start; }   /* Batch E gate: a fifth route wraps to a second row instead of squeezing every card */
@media (max-width: 1023.98px) { .lanes { grid-template-columns: minmax(0, 1fr); } }
.lane { container: lane / inline-size; 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); }
/* hotfix 2026-09-30 (phone matrix): a route card squeezed by the open stop panel keeps its zone name on one line and its
   release form inside the card (the reason field and the button wrap) */
.lane-h .zn { flex-wrap: wrap; }
.lane-h .zn h2 { white-space: nowrap; }
.lane-h .release { flex-wrap: wrap; }
.lane-h .release .field { flex: 1 1 120px !important; min-width: 0; }
.lane-h .release .btn { max-width: 100%; white-space: normal; height: auto; min-height: 44px; text-align: left; line-height: 1.25; }
.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: repeat(auto-fit, minmax(140px, 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 .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: 12px; 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: 12px; 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: 12px; 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: 1023.98px; 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-3); 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 { display: inline-block; flex: none; width: 16px; height: 16px; color: var(--c, var(--bca-blue)); }   /* .chart svg would otherwise make the icon a block on its own line */
.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: 12px; 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: 1023.98px) { .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: #D9EFC4; }
.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; max-width: 100%; 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: normal; text-align: center; line-height: 1.1; max-width: 62px; }   /* 'Day complete' wraps inside the 88 px ring instead of clipping */
.prog.complete .ring .fill { stroke: var(--bca-green); }
.prog.complete .ring .lbl b, .prog.complete .ring .lbl span { color: var(--zone-green-ink); }
.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; }
@media (max-width: 480px) { .prog { grid-template-columns: minmax(0, 1fr) !important; } .prog .rail { grid-template-columns: 96px minmax(0, 1fr) 52px; } }   /* Gate C: 360 px, the counts ran 8 px off the screen */
.hmonths .m1 { display: none; }
@media (max-width: 480px) { .hmonths .m3 { display: none; } .hmonths .m1 { display: inline; } }   /* Gate C: fifteen "Sep" labels made Customer 360 393 px wide on a 390 px phone */
.prog .pside { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex: none; }
.prog .chip.prob { background: var(--solid-red); color: var(--solid-red-on); 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: 1023.98px) { .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: calc(var(--foot-h, calc(140px + var(--safe-bottom))) + 16px); }   /* Gate C: the last line always scrolls clear of the fixed footer; app.js writes the footer's real height (safe-area inset included) into --foot-h */
/* ---- C14: the pick screen, effortless on a phone. 17 px text, 20 px quantities, 64 px rows, 48 px targets, high contrast; no gesture but a clean tap. */
body.pick-body { overscroll-behavior-y: contain; }
html:has(body.pick-body) { overscroll-behavior-y: contain; }
.pk-head { position: sticky; top: var(--top-total); z-index: 12; background: var(--ground); margin: 0 calc(-1 * var(--pad)) var(--s3); padding: var(--s3) var(--pad) var(--s2); border-bottom: 1px solid var(--card-border); }
.pk-head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }   /* gate: E15's print buttons wrap at 320 px with text spacing */
.pk-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; }
.pk-title h1 { font-size: 20px; line-height: 1.2; margin: 0; color: var(--ink); }
.pk-title .sub { font-size: var(--f3); color: var(--ink-2); margin-top: 2px; }
.pk-progress { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.pk-count { font-size: 17px; font-weight: 700; color: var(--bca-blue-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--card-border); overflow: hidden; }
.pk-bar i { display: block; height: 100%; background: var(--bca-green-dark); transition: width var(--motion); }
.pk-who { display: flex; align-items: center; gap: 6px; font-size: var(--f3); color: var(--ink-2); margin-top: 6px; }
.pk-who .ic { width: 16px; height: 16px; }
.pk-list { display: flex; flex-direction: column; gap: 10px; }
.pk-cat { font-size: var(--f2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin: 8px 0 -2px; }
.pickitem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.pickrow { display: grid; grid-template-columns: auto minmax(0, 1fr) 36px; gap: 10px; align-items: center; min-height: 64px; padding: 10px 10px; border-radius: 12px; background: var(--surface); border: 2px solid var(--card-border); color: var(--ink); text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: pan-y; font: inherit; }
.pickrow .qty { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bca-blue-deep); white-space: nowrap; min-width: 52px; }
.pickrow .txt { min-width: 0; }
.pickrow .name { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; word-break: break-word; }
.pickrow .desc { display: block; font-size: 17px; color: var(--ink-2); line-height: 1.25; margin-top: 2px; }
.pickrow .code { display: block; font-size: var(--f3); color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pickrow .shortnote { display: block; font-size: 17px; font-weight: 700; color: var(--amber); margin-top: 4px; }
.pickrow .shortnote:empty { display: none; }
.pickrow .tick { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--card-border); display: inline-flex; align-items: center; justify-content: center; background: var(--ground); color: transparent; }
.pickrow .tick .ic { width: 22px; height: 22px; stroke-width: 3; }
.pickrow.st-picked, .pickrow.v-confirmed { background: var(--bca-green-dark); border-color: var(--bca-green-dark); color: #fff; }
.pickrow.st-picked .qty, .pickrow.st-picked .desc, .pickrow.st-picked .code, .pickrow.v-confirmed .qty, .pickrow.v-confirmed .desc, .pickrow.v-confirmed .code { color: #fff; }
.pickrow.st-picked .tick, .pickrow.v-confirmed .tick { background: #fff; border-color: #fff; color: var(--bca-green-dark); }
.pickrow.st-short, .pickrow.v-mismatch { background: var(--surface); border-color: var(--amber); box-shadow: inset 6px 0 0 var(--amber); }
.pickrow.st-short .tick, .pickrow.v-mismatch .tick { background: var(--amber); border-color: var(--amber); color: #fff; }
.pickrow:focus-visible { outline: 3px solid var(--bca-cyan); outline-offset: 2px; }
.pk-short { font: inherit; font-size: 17px; font-weight: 700; min-width: 64px; min-height: 64px; padding: 0 6px; border-radius: 12px; border: 2px solid var(--amber); background: var(--surface); color: var(--amber); cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; }
html:has(.pk-foot) { scroll-padding-bottom: calc(var(--foot-h, calc(140px + var(--safe-bottom))) + 8px); }   /* 2026-09-30: a line brought into view (keyboard, find, a tap after a scroll) stops clear of the fixed footer, never under it */
.pk-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--card-border); padding: 8px calc(12px + env(safe-area-inset-right, 0px)) calc(10px + var(--safe-bottom)) calc(12px + env(safe-area-inset-left, 0px)); }
.pk-note { display: block; font-size: var(--f3); color: var(--ink-2); margin: 0 4px 6px; }
.pk-acts { display: flex; gap: 8px; max-width: 720px; margin: 0 auto; }
.pk-acts .tap { flex: 1; min-height: 56px; font-size: 17px; }
.pk-acts .tap.primary:disabled, .pk-acts .tap:disabled { opacity: 0.45; cursor: not-allowed; }
.pk-sheet .sheet-box { font-size: 17px; }
.pk-ordered { margin: 4px 0; font-size: 17px; color: var(--ink-2); }
.pk-stepper { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 8px; margin: 8px 0; }
.pk-stepper .tap { min-height: 64px; font-size: 28px; font-weight: 700; }
.pk-stepper .field { height: 64px; font-size: 32px; font-weight: 700; text-align: center; }
.pk-sheet .reasons label { min-height: 48px; font-size: 17px; }
.pk-sheet .sheet-box .reasons label:has(input:checked), .pk-sheet .reasons label:has(input:checked) { background: #B45309; border-color: #B45309; color: #fff; }   /* Gate C: beats the general sheet rule below, whose pale fill left white text unreadable */
.pk-sheet .field[data-short-note] { height: 48px; font-size: 17px; margin: 6px 0 10px; }
.pk-sheet .row .tap { min-height: 56px; font-size: 17px; }
.pk-toast { position: fixed; left: 12px; right: 12px; bottom: calc(var(--foot-h, calc(140px + var(--safe-bottom))) + 10px); z-index: 25; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 600; box-shadow: var(--float); max-width: 720px; margin: 0 auto; }
.pk-toast button { font: inherit; font-size: 17px; font-weight: 700; min-height: 48px; min-width: 88px; margin-left: auto; padding: 0 16px; border-radius: 10px; border: 2px solid var(--bca-cyan); background: var(--bca-cyan); color: var(--ink); cursor: pointer; }
.pk-toast[hidden] { display: none; }
.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: #EEF6FC; border-color: #167DB2; box-shadow: 0 0 0 1px #167DB2 inset; }   /* F.1: selection is BCA blue, never orange */
.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: 12px; 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: 1024px) { .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: 1; }   /* E12: nothing greyed out for being out of order */
.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: 12px; 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: 17px; color: var(--ink-2); }   /* driver screen: 17 px minimum */
.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; }
/* Dave, 2026-10-03: Partial, Pick-Up and Returned always show on the driver's stop, as smaller secondary buttons under
   the main Delivered slide (56 px), never only under Details (the old rule hid them: its Details selector never matched). */
.dstop .mark .mark-acts { display: flex; gap: 8px; margin-top: 10px; }
.dstop .mark .mark-acts .tap { min-height: 48px; font-size: 17px; font-weight: 600; background: var(--surface, #fff); border: 1px solid #64748B; color: var(--ink, #0F1C2E); padding: 0 8px; gap: 6px; justify-content: center; }
.dstop .codline { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.dstop .codline input { width: 24px; height: 24px; }
/* Dave, 2026-09-28: the COD answer, never pre-ticked (17 px, 48 px targets, one thumb) */
.codbox { border: 2px solid var(--amber); border-radius: 12px; padding: 10px 12px; margin: 8px 0 10px; font-size: 17px; }
.codbox .cod-h { margin-bottom: 8px; }
.codbox .cod-pick, .codbox .cod-methods, .codbox .cod-amt { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.codbox .tap { min-height: 48px; font-size: 17px; flex: 1 1 0; }
.codbox .tap[aria-pressed="true"], .codbox .cod-methods label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.codbox .cod-methods input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.codbox .field { min-height: 48px; font-size: 17px; flex: 1 1 140px; }
.codbox .cod-need { margin: 8px 0 0; font-size: 17px; color: var(--ink-2); }
.codbox.ok .cod-need { display: none; }
.slider:disabled { opacity: 0.45; }
.mark .slide:has(.slider:disabled) { background: var(--ground); border-color: var(--card-border); filter: grayscale(1); opacity: 0.6; }   /* COD not answered yet */
.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: 17px; 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.done .d-acts, .dstop.done .mark, .dstop.done .issue { display: none; }
/* E12: any stop still to go opens with a tap and shows its Navigate, Call, slide and Issue: deliver in any order */
.dstop:not(.current):not(.done):not(.open) .d-acts, .dstop:not(.current):not(.done):not(.open) .mark, .dstop:not(.current):not(.done):not(.open) .issue { display: none; }
.dstop:not(.current):not(.done) { cursor: pointer; }
.dstop.open { border: 2px solid var(--hz, var(--bca-blue)); padding: 16px; }
.dstop .open-hint { display: block; font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.dstop.open .open-hint, .dstop.current .open-hint, .dstop.done .open-hint { display: none; }
.dstop .tag-next { display: table; margin: 4px 0 2px; padding: 2px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; background: var(--bca-blue-deep); color: #FFFFFF; vertical-align: 2px; }
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: 17px; }
[data-issue-sheet] .reasons .tap, [data-issue-sheet] .row .tap { font-size: 17px; }
@media (min-width: 1024px) { .pk-foot { left: var(--side-w); } }                              /* the pick footer never covers the sidebar's Sign out on a desktop */          /* the issue sheet on the driver screen */
/* Gate C: a phone on its side (under 500 px tall). The top bar, the sticky pick header and the fixed footer took about
   290 of 360 px, so a line sat under the header and the Short button could not be tapped. On a short screen the pick
   header scrolls with the page, the top bar keeps one height (no shrink while scrolling), and the footer drops its hint. */
@media (max-width: 1023.98px) and (max-height: 500px) {
  .pk-head { position: static; }
  .brand-top, body.scrolled .brand-top { height: calc(52px + var(--safe-top)); }
  .brand-top .logo, body.scrolled .brand-top .logo { width: 100px; }
  .pk-foot .pk-note { display: none; }
  .pk-acts .tap { min-height: 48px; }
}
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); }
/* Batch D, D7: the photo step, one thumb, 48 px targets, 17 px text */
.mark .photo-step[data-photo-step] { display: grid; gap: 10px; padding: 12px; font-size: 17px; border: 2px solid var(--bca-green); background: var(--surface); }
.mark .photo-step[hidden] { display: none; }
.mark .photo-step .ps-kind { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--card-border); }
.mark .photo-step .ps-btns, .mark .photo-step .ps-acts, .mark .photo-step .ps-reason { display: flex; gap: 8px; flex-wrap: wrap; }
.mark .photo-step .tap { min-height: 48px; font-size: 17px; }
.mark .photo-step .field { min-height: 48px; font-size: 17px; flex: 1 1 180px; }
.mark .photo-step .ps-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.mark .photo-step .thumb { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--card-border); }
.mark .photo-step .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mark .photo-step .thumb .rm { position: absolute; top: 0; right: 0; width: 32px; height: 32px; border: 0; border-radius: 0 0 0 8px; background: rgba(15, 28, 46, 0.78); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.mark .photo-step .ps-need { margin: 0; color: var(--amber); font-weight: 600; }
.mark .photo-step .ps-need.ok { color: var(--tint-green-fg); }
.mark .photo-step .ps-nophoto summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; color: var(--ink-2); }
.mark .photo-step .ps-nophoto[open] { display: grid; gap: 8px; }
.mark-status .uploading { margin-left: 8px; }
.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.offline { color: var(--chip-danger-fg); background: var(--chip-danger-bg); }   /* E25: offline, in the top bar */
.brand-top .pending { white-space: nowrap; flex: none; }                                             /* never wraps the top bar */
.brand-top .pending.offline i { background: var(--chip-danger-fg); }
.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(min(320px, 100%), 1fr)); gap: var(--s4); align-items: start; }
.chart { container: chart / inline-size; min-width: 0; }
.chart-x .half { display: none; }
@container chart (max-width: 520px) { .chart-x .mid { display: none; } .chart-x .half, .chart-x .half-too { display: block; } }   /* E20: labels thin out by the chart's own width */
/* E11: only the chart's own drawing is sized by the card (a bare "svg" rule made the legend's icons giant) */
.chart-plot { display: grid; grid-template-columns: 48px minmax(0, 1fr); }
.chart-y { position: relative; }
.chart-y span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 12px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart svg.chart-svg { display: block; width: 100%; height: 180px; overflow: visible; }
.chart svg.chart-svg .grid { stroke: var(--hair); stroke-width: 1; }
.chart svg.chart-svg .seg { stroke-width: 2.5; stroke-linecap: round; }
.chart svg.chart-svg .seg.soft { stroke-dasharray: 5 5; opacity: 0.55; }
.chart svg.chart-svg .bar.soft { opacity: 0.4; }
.chart svg.chart-svg .hit { cursor: crosshair; }
.chart svg.chart-svg .hit:hover { fill: rgba(15, 23, 42, 0.05); }
.chart-xwrap { margin-left: 48px; }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; font-size: 13px; color: var(--ink); }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chart-legend .sw { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.chart-note { margin: 8px 0 0; }
.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: calc(var(--top-total) + var(--stick)); z-index: 5; background: var(--table-head); font-size: var(--f2); letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 700; text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--bca-blue-deep); }
.week th small { display: block; color: var(--ink-3); 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-3); 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: 12px; 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-3); }
.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: 1023.98px) { .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: #FFFFFF; font-weight: 700; }
.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-3); 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: 1023.98px) { .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, .past-card .correct-menu, .filters, .page-head .acts { display: none !important; }
  .frame { display: block; }
  .content { padding: 0; --pad: 0px; }
  .band { margin: 0 0 var(--s3); padding-left: var(--s4); }
  .tbl th, .sec, .tbl tr.grp td { position: static; }
  .sheet { page-break-after: always; }
  .sheet:last-child { page-break-after: auto; }
}

/* ---- C15: nothing off-screen on the phone. Every pop-up, menu and dialog is a bottom sheet on phone widths; the stop drawer
   starts under the fixed top bar; desktop-only controls (drag handles, hover menus) are hidden; reorder gets buttons. */
.drawer { top: var(--top-total); }
.pop .pop-close { display: none; }
.pop.inline { position: static; box-shadow: none; padding: 10px 0 0; width: auto; }
.sheet-modal .sheet-box { max-height: calc(100dvh - var(--top-total) - 8px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.app-confirm .sheet-box p { font-size: 17px; margin: 0 0 12px; }
.sheet-modal.app-confirm { z-index: 80; }                                   /* E34: a confirm asked from the stop panel or a pop-up sits above both */
.phone-only { display: none; }
@media (max-width: 1023.98px) {
  .phone-only { display: inline-flex; }
  .desktop-only, .stop .grip, .stops.rows .stop.row .grip, .stops.rows .stop.row .hov { display: none !important; }
  .stops.rows .stop.row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "seq who amt" "seq bdg bdg"; }
  .stop .movebtn { position: static; opacity: 1; margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
  details.owner-menu[open]::before { content: ""; position: fixed; inset: 0; background: rgba(15, 28, 46, 0.45); z-index: 58; }
  details.owner-menu[open] > .pop, details.owner-menu[open] > .pop.inline { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; margin: 0; max-height: calc(100dvh - var(--top-total) - 8px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 16px 16px 0 0; box-shadow: var(--float) !important; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important; z-index: 60; }
  .pop .pop-close { display: flex; width: 100%; justify-content: flex-end; margin: 0 0 6px; }
  .pop .pop-close button { font: inherit; font-size: 17px; font-weight: 600; min-height: 44px; padding: 0 14px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--surface); color: var(--bca-blue-deep); cursor: pointer; }
  .pop select.field, .pop input.field { height: 48px; font-size: 17px; }
  .pop .acts .btn { min-height: 48px; font-size: 17px; }
  .side .wsname .menu { position: static; margin: 6px 0 0; box-shadow: none; background: var(--surface); color: var(--ink); border: 1px solid var(--card-border); }   /* D19: the sidebar is light */
  .drawer { left: 0; right: 0; width: auto; bottom: 0; box-shadow: none; border-radius: 0; }
  .drawer-h h2 { font-size: 18px; }
  .drawer-b .stop .movebtn { position: static; }
}

/* ---- C15/C17: phone widths. Buttons are thumb-sized; a table inside a scrolling card is not sticky against the top bar
   (a sticky offset inside a scroll container would push the header down over the rows); KPI labels stay on one line. */
@media (max-width: 1023.98px) {
  .btn, .btn.quiet, .btn.icon { min-height: 44px; }
  .btn.icon { width: 44px; }
  .side nav a, .side nav button, .side .portal a, .side .grp .grp-h { min-height: 44px; }
  .tablewrap .tbl th, .tablewrap .week th { top: 0; }
  .tablewrap .tbl tr.grp td { top: 0; }
  .tablewrap .tbl th, .tablewrap .tbl tr.grp td, .tablewrap .week th { position: static; }   /* short tables in cards: not sticky at all on the phone (C17.1) */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi b { font-size: 12.5px; letter-spacing: 0; text-transform: none; }   /* E20: a tile's label wraps rather than being cut off */
  .kpi .v { font-size: 22px; }
}
@media (max-width: 359.98px) { .kpis { grid-template-columns: minmax(0, 1fr); } }   /* Prod 2.8: sales to the cent ($48,935.35) needs the width below 360 */
.tablewrap.wide .tbl th, .tablewrap.wide .tbl tr.grp td { top: 0; }      /* desktop: a table wider than its card scrolls inside it; its header sticks to the card, not the top bar */
small { font-size: max(12px, 0.85em); }                                       /* nothing under 12 px anywhere (definition of done) */
@media (max-width: 1023.98px) {
  .stop details.owner-menu summary, .owner details.owner-menu summary, .owner .re { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
  .sheet th, .print th { font-size: 12px; }
}

/* ---- C15/C17, second pass: thumb-sized fields and switcher on phones, 17 px on screens used while working, card headers on one
   line with their pills on a row of their own, chips that never leave their card. */
@media (max-width: 1023.98px) {
  .field, input.field, select.field, textarea.field { min-height: 44px; height: 44px !important; font-size: 16px; }
  textarea.field { height: auto !important; min-height: 64px; }
  .side .wsname summary { min-height: 44px; }
  .driver-page, .pick-page { font-size: 17px; }
  .driver-page .tbl, .driver-page th, .driver-page td, .driver-page .btn, .driver-page .f2, .driver-page .sub, .driver-page p, .pick-page .sub, .pick-page .code, .pick-page .pk-who, .pick-page .btn, .pick-page .f2 { font-size: 17px; }
  .driver-page th, .pick-page .pk-cat { font-size: 13px; }
  .blk-h { flex-wrap: wrap; row-gap: 8px; }
  .blk-h h2 { flex: 1 1 100%; min-width: 0; overflow-wrap: break-word; }   /* E20: wraps before it would be cut off */
  .blk-h .more, .blk-h .chip, .blk-h .btn, .blk-h .filters { flex: 0 1 auto; max-width: 100%; }
  .blk-h .btn, .blk-h .chip { white-space: normal; height: auto; min-height: 44px; text-align: left; }
  .chip, .badge { max-width: 100%; white-space: normal; }
  .page-head h1 { font-size: 20px; }
  h1.hello { font-size: 20px; line-height: 1.3; }
  .blk-h h2[title] { cursor: help; }
}

/* ---- C15/C17, third pass */
@media (max-width: 1023.98px) {
  .side .wsname .menu a, .side .wsname .menu button { min-height: 44px; font-size: 17px; }
  .driver-page th, .driver-page .page-head .ctx, .driver-page .d-mos div, .driver-page .d-mos .f1, .driver-page .notif-bar, .driver-page .notif-bar span { font-size: 17px; }
  .blk-h h2 { display: block; line-height: 1.3; }
  .blk-h h2 .ic { vertical-align: -3px; margin-right: 6px; }
  .tbl.access .acts, .access-tools { flex-wrap: wrap; }
  .access-tools form, .access-tools .btn { max-width: 100%; }
}

/* ---- C16: the professional visual system (Batch C, 2026-09-28). Colour is information, not decoration: ink on white, one deep
   blue (#00569C) for links, buttons, focus and the active item, soft status chips with a darker 1 px border, module tints only on
   the dark sidebar, plain white summary cards and tables with no fills. This block replaces the B1-B3 colour rules above
   (module blocks in the sidebar, solid chips, deep person banners, coloured card bars); the earlier rules stay for layout. */
:root {
  --deep: #00569C; --deep-2: #004A86;
  --chip-danger-bg: #FDECEC;  --chip-danger-fg: #9B1C1C;  --chip-danger-bd: #F3C4C4;
  --chip-warning-bg: #FEF3E2; --chip-warning-fg: #92400E; --chip-warning-bd: #F1D6AC;
  --chip-success-bg: #E8F5EC; --chip-success-fg: #1E6B34; --chip-success-bd: #BDDFC7;
  --chip-info-bg: #E6F0F8;    --chip-info-fg: #0B4F84;    --chip-info-bd: #BDD5EA;
  --chip-neutral-bg: #EEF2F6; --chip-neutral-fg: #334155; --chip-neutral-bd: #D5DDE7;
  --th-border: #D5DDE7; --total-border: #C9D3DF; --banner: #EEF3F9; --person-chip: #F1F4F8; --field-border: #CBD5E1; --row-hover: #F8FAFC;
}
h1, .page-head h1, .drawer-h h2, .daytab .n, .lane-h .big .n, .queue .n, .score .v, .kpi .v, .opp .big, .dayhead td, .prog .ring .lbl b { color: var(--ink); }
.page-head h1 .ic, .blk-h h2 .ic, .sec .ic, .queue .ic { color: var(--ink-3); }
a:hover, a.link, .link, a.link:hover, .link:hover, .crumbs a, .btn.quiet, .blk-h .more, a.plain:hover, .owner .phone a, .stop .addr a, .stop .cust a:hover,
.owner .re, .owner details.owner-menu summary, .tbl th a:hover, .hello a, .side .wsname .menu .on, .pickstat.picking { color: var(--deep); }
.hello a { border-bottom-color: var(--deep); }
:focus-visible { outline-color: var(--deep); }
.btn.primary, .tap.primary, .chip.on { background: var(--deep); border-color: var(--deep); color: #fff; }
.daytab.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 3px 0 var(--deep); }      /* the active day: a white tab with a deep bar, not a block of colour */
.daytab.on .d { color: var(--ink-2); } .daytab.on .n { color: var(--deep); }
.btn.primary:hover { background: var(--deep-2); border-color: var(--deep-2); }
.btn { border-color: var(--field-border); }
.btn:hover { border-color: #94A3B8; }
.btn.quiet { border-color: transparent; }
.btn.quiet:hover { background: var(--chip-info-bg); }
.btn.danger { color: var(--chip-danger-fg); background: var(--chip-danger-bg); border-color: var(--chip-danger-bd); }
.field { border-color: var(--field-border); }
.crumbs, .crumbs .sep, .page-head .ctx, .sec .n, .strip, .legend, .board-head .sum, .daytab .d, .lane-h .zn .days, .lane-h .big .u { color: var(--ink-2); }   /* ink-3 is for labels on white cards; on the page ground it is 4.4:1 */
.content > .muted, .content > .dim, .content > p.muted { color: var(--ink-2); }
.brand-rule { background: var(--deep); }          /* the rule under the top bar: one colour, 4 px */

/* D19 replaced the dark C16 sidebar block here; the light sidebar lives with the frame rules above. */

/* summary cards: plain white, label 12.5 px / 600 in ink-2 (Title Case), value 26 px / 600, delta 13 px */
.kpi, a.kpi:hover { box-shadow: none; border: 1px solid var(--card-border); }
a.kpi:hover { border-color: var(--field-border); }
.kpi b { font-size: 12.5px; letter-spacing: 0; text-transform: capitalize; color: var(--ink-2); font-weight: 600; }
.kpi .v { font-size: 26px; font-weight: 600; color: var(--ink); }
.kpi .delta { font-size: 13px; }
.kpi .delta.up, .kpi .delta.good-down { color: var(--chip-success-fg); } .kpi .delta.down, .kpi .delta.bad-up { color: var(--chip-danger-fg); }
.blk, .opp, .queue, .prog { box-shadow: none; border: 1px solid var(--card-border); }
.sec { border-left: 3px solid var(--c, var(--deep)); }

/* tables: header #F1F4F8 13 px / 600 ink-2 Title Case over a 1 px #D5DDE7 border; rows 14 px (the Zoho column set 13 px); no fills;
   totals rows 600 with a 2 px #C9D3DF top, figures aligned with their columns */
.tbl { font-size: 14px; }
.tbl th, .week th { background: var(--table-head); font-size: 13px; font-weight: 600; color: var(--ink-2); text-transform: capitalize; letter-spacing: 0; border-bottom: 1px solid var(--th-border); }
.tbl.compact th { letter-spacing: 0; }
.tbl th a { color: var(--ink-2); }
.tbl.onerow { font-size: 13px; }
.tbl tbody tr:hover td { background: var(--row-hover); }
.tbl tr.grp td { background: var(--surface); box-shadow: none; border-top: 2px solid var(--total-border); border-bottom: 1px solid var(--hair); font-weight: 600; color: var(--ink); }
.tbl tr.grp td.money { color: var(--ink); }
.tbl tr.grp:hover td { background: var(--surface); }
.tbl tr.problem td:first-child { box-shadow: inset 3px 0 0 var(--edge-attention); }
.tbl tr.problem.urgent td:first-child { box-shadow: inset 3px 0 0 var(--edge-urgent); }
.tbl .sub { color: var(--ink-2); }
.call .rk { background: var(--chip-neutral-bg); color: var(--ink); }

/* person banners: an #EEF3F9 band with a 4 px bar in the person's colour, name 16 px / 600, totals in ink-2, overdue as a danger chip */
.tbl tr.grp.person td, .tbl tr.grp.person:hover td { background: var(--banner); background-clip: padding-box; color: var(--ink); filter: none; border-top: 24px solid transparent; border-bottom: 0; box-shadow: inset 4px 0 0 var(--c, var(--deep)); }
.tbl tr.grp.person.house td, .tbl tr.grp.person.house:hover td { background: var(--banner); background-clip: padding-box; box-shadow: inset 4px 0 0 #94A3B8; }
.tbl tr.grp.person:first-child td { border-top-width: 0; }
.tbl tr.grp.person .name { font-size: 16px; font-weight: 600; }
.tbl tr.grp.person .tot { color: var(--ink-2); }
.tbl tr.grp.person .av { width: 28px; height: 28px; font-size: 12px; }
.tbl tr.grp.person .tot .pill.over { background: var(--chip-danger-bg); color: var(--chip-danger-fg); border: 1px solid var(--chip-danger-bd); }

/* soft status chips: 12.5 px / 600, radius 6, tinted fill with a darker 1 px border */
.badge, .pill, .cnt { border-radius: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; }
.badge { padding: 1px 8px 1px 6px; }
.pill { padding: 1px 8px 1px 6px; }
.cnt { min-width: 20px; height: 20px; padding: 0 6px; }
.t-red, .t-urgent, .pill.urgent, .cnt.urgent, .prog .chip.prob, .chip.prob { background: var(--chip-danger-bg); color: var(--chip-danger-fg); border-color: var(--chip-danger-bd); }
.t-amber, .t-orange, .pill.issues, .cnt.attention { background: var(--chip-warning-bg); color: var(--chip-warning-fg); border-color: var(--chip-warning-bd); }
.t-green, .pill.done, .prog .chip.ok { background: var(--chip-success-bg); color: var(--chip-success-fg); border-color: var(--chip-success-bd); }
.t-blue, .t-cyan, .pill.out, .cnt.info, .chip.extra { background: var(--chip-info-bg); color: var(--chip-info-fg); border-color: var(--chip-info-bd); }
.t-neutral, .pill.not_started, .pill.empty { background: var(--chip-neutral-bg); color: var(--chip-neutral-fg); border-color: var(--chip-neutral-bd); }
.daytab.on .n .pill { background: var(--chip-danger-bg); color: var(--chip-danger-fg); border-color: var(--chip-danger-bd); }
.chip { border-radius: 6px; font-size: 12.5px; padding: 2px 8px; background: var(--surface); border: 1px solid var(--chip-neutral-bd); color: var(--ink-2); }
.chip.zone { background: var(--zt, var(--chip-neutral-bg)); color: var(--zi, var(--chip-neutral-fg)); border-color: transparent; }   /* E17: the route's tint and text */
.chip.zone i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--zone-unknown)); flex: none; }
.tbl.onerow .chip.zone { padding: 1px 7px; font-size: 12px; }
.chip.am { background: var(--person-chip); color: var(--ink); border: 1px solid var(--chip-neutral-bd); }
.chip.am .av { width: 18px; height: 18px; background: var(--bg, var(--chip-neutral-fg)); color: var(--fg, #fff); font-size: 12px; letter-spacing: -0.02em; }
.chip.syncing { border-color: var(--chip-info-bd); color: var(--deep); }
.modtag { background: var(--chip-neutral-bg) !important; color: var(--chip-neutral-fg); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; border: 1px solid var(--chip-neutral-bd); border-radius: 6px; }
.band { background: var(--surface); border-bottom: 1px solid var(--card-border); }
.stale-banner { background: var(--chip-danger-bg); color: var(--chip-danger-fg); border-bottom-color: var(--chip-danger-bd); }
.owner.none { background: var(--chip-danger-bg); }
.stop.pickup { background: var(--chip-warning-bg); }
.hs i.dark { background: #1E6B34; }
.prog .ring .fill { stroke: var(--deep); }
.lane { box-shadow: inset 0 3px 0 var(--zc, var(--deep)); }
.lane-h .zn h2 { color: var(--ink); }
.zone-ink { color: var(--ink); }
.prob .ic { color: var(--pe); }

/* the greeting (C7 fills it): a white card with a 3 px deep bar */
.hello { background: var(--surface); border: 1px solid var(--card-border); border-left: 3px solid var(--deep); border-radius: var(--r); padding: 14px 18px; font-size: 24px; color: var(--ink); max-width: none; }

/* money: figures keep tabular numerals; a negative amount reads "−$1,170" (the formatter writes the minus sign) */
.neg { color: var(--chip-danger-fg); }

@media (max-width: 1023.98px) {
  .side nav a, .side nav button, .side .portal a, .side .grp .grp-h { min-height: 44px; }
  .side .grp .grp-h { height: 44px; }
  .kpi .v { font-size: 22px; }
  .hello { font-size: 20px; padding: 12px 14px; }
}

/* ---- C17: phone layout. A small summary table (.aslist, at most ten rows) is a compact list on a phone: one block per row,
   the first cell as its title, the other cells labelled from data-l. A table that fits the phone width (.fits, set by app.js)
   keeps its header sticky directly under the top bar; a table that scrolls sideways inside its card keeps a static header,
   because a sticky header inside a scroll container cannot reach the top bar. A truncated card title opens on tap. */
@media (max-width: 1023.98px) {
  .tablewrap:has(> table.aslist) { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  table.aslist { display: block; font-size: 15px; }
  table.aslist thead { display: none; }
  table.aslist tbody { display: block; }
  table.aslist tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  table.aslist tr:last-child { border-bottom: 0; }
  table.aslist td { display: inline-flex; align-items: baseline; gap: 4px; border: 0; padding: 0; text-align: left; }
  table.aslist td:first-child { flex: 1 1 100%; font-weight: 600; }
  table.aslist td[data-l]::before { content: attr(data-l); color: var(--ink-3); font-weight: 500; font-size: 13px; }
  table.aslist td.money { font-weight: 600; }
  .tablewrap.fits { overflow: visible; }                                    /* fits the phone width: no scroll container, so the header can reach the top bar */
  .tablewrap.fits.long .tbl th { position: sticky; top: var(--top-total); }  /* more than ten rows: the header sticks; short tables never do */
  .blk-h h2.open { white-space: normal; overflow: visible; text-overflow: clip; }
  .driver-page .tbl th { font-size: 17px; }                                 /* the driver screens keep 17 px headers (C16 set 13 px for every table) */
}

/* ---- C18: Create in Zoho. One "New" menu (a primary button on Invoices, a small plus in rows and on Customer 360); the pop is a
   bottom sheet with Close on phones through the owner-menu rules above. */
details.zoho-new { position: relative; display: inline-block; vertical-align: middle; }
details.zoho-new > summary { list-style: none; cursor: pointer; }
details.zoho-new > summary::-webkit-details-marker { display: none; }
details.zoho-new > summary .chev { width: 14px; height: 14px; margin-left: 2px; }
details.zoho-new.compact > summary { width: 32px; height: 32px; padding: 0; justify-content: center; }
.pop.menu { width: 320px; padding: 10px 8px; white-space: normal; }                    /* Gate C: a cell's nowrap must not push the menu past the page edge */
.pop.menu h4 { padding: 4px 8px 2px; margin: 0; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.pop.menu a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 6px; color: var(--ink); font-weight: 500; white-space: normal; text-align: left; }
.pop.menu a:hover { background: var(--row-hover); color: var(--deep); }
.pop.menu a .ic { color: var(--ink-3); flex: none; }
.pop.menu .note { margin: 4px 10px 8px; }
.pop.menu .hr { border-top: 1px solid var(--hair); margin: 6px 0; }
.tbl.matrix tr.action-row td:first-child, .tbl.access tr.action-row td:first-child { padding-left: 24px; color: var(--ink-2); }
@media (max-width: 1023.98px) {
  details.zoho-new.compact > summary { width: 44px; height: 44px; }
  .pop.menu a { min-height: 48px; font-size: 16px; }
}

/* ---- S: shared pieces. The account manager picker, the contact cell, the last-three line and the phone card pattern
   (S7): on phone widths a list renders as .pcards, one .pcard per row with a title row, meta lines and an action row. */
.am-picker { display: inline-flex; align-items: center; gap: 8px; }
.am-picker .field { width: auto; height: 36px; min-width: 180px; }
.contact b { font-weight: 600; }
.contact a[href^="tel:"], .nw, .rel { white-space: nowrap; }                                /* Gate C: a phone number, an invoice number, a short date never breaks across lines */
.last3 { display: inline-block; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.5; }
.pcards { display: none; }
@media (max-width: 1023.98px) {
  .am-picker { width: 100%; }
  .am-picker .field { flex: 1; }
  .pcards { display: flex; flex-direction: column; gap: 10px; }
  .pcards + .tablewrap, .has-pcards .tablewrap { display: none; }
  .pcard { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--r); padding: 12px 14px; }
  .pcard .pc-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
  .pcard .pc-title { font-weight: 600; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
  .pcard .pc-amt { font-weight: 600; white-space: nowrap; }
  .pcard .pc-bal { display: flex; justify-content: space-between; gap: 10px; margin-top: 2px; font-size: 15px; color: var(--ink-2); }   /* Prod 2.4: the balance right under the amount */
  .pcard .pc-bal b { color: var(--ink); font-weight: 600; }
  .pc-day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 8px; padding: 8px 12px; border-radius: var(--r); background: var(--ground); box-shadow: inset 4px 0 0 var(--c, var(--bca-blue)); font-size: 15px; }
  .pc-day .n { color: var(--ink-3); } .pc-day .pc-daytot { margin-left: auto; color: var(--ink-2); } .pc-day .pc-daytot b { color: var(--ink); }
  .pcard .pc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--ink-2); font-size: 14px; }
  .pcard .pc-meta b { color: var(--ink); font-weight: 600; }
  .pcard .pc-line { margin-top: 6px; font-size: 14px; }
  .pcard .pc-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
  .pcard .pc-acts .btn { flex: 1 1 auto; justify-content: center; }
  .pcard.priority { box-shadow: inset 3px 0 0 var(--edge-attention); }
  .pcard.priority.urgent { box-shadow: inset 3px 0 0 var(--edge-urgent); }
}

/* ---- C4: horizontal scrolling. Always-visible 12 px scrollbars (deep thumb on a #DCE7F2 track), a pinned bar at the bottom of the
   window synced with the wide table in view, the # and first columns frozen with a shadow once scrolled, an edge shadow on the
   right while there is more, arrow keys on the focused wrapper. */
.tablewrap.wide { scrollbar-width: auto; scrollbar-color: var(--deep) #DCE7F2; scrollbar-gutter: stable; }
.tablewrap.wide::-webkit-scrollbar { height: 12px; }
.tablewrap.wide::-webkit-scrollbar-track { background: #DCE7F2; }
.tablewrap.wide::-webkit-scrollbar-thumb { background: var(--deep); border-radius: 6px; border: 2px solid #DCE7F2; }
.tablewrap.wide:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
@media (min-width: 1024px) {   /* frozen columns are for desktop widths; a phone keeps every column free to scroll (C15) */
  .tablewrap.wide .tbl th:first-child, .tablewrap.wide .tbl td:first-child { position: sticky; left: 0; z-index: 3; background: var(--surface); }
  .tablewrap.wide .tbl th:first-child { z-index: 6; background: var(--table-head); }
  .tablewrap.wide .tbl tr.grp td:first-child, .tablewrap.wide .tbl tr.grp.person td:first-child { position: sticky; left: 0; }
  .tablewrap.wide.frz2 .tbl th:nth-child(2), .tablewrap.wide.frz2 .tbl td:nth-child(2) { position: sticky; left: var(--frz-w, 40px); z-index: 3; background: var(--surface); }
  .tablewrap.wide.frz2 .tbl th:nth-child(2) { z-index: 6; background: var(--table-head); }
  .tablewrap.wide.can-left .tbl td:first-child, .tablewrap.wide.can-left .tbl th:first-child { box-shadow: 6px 0 8px -6px rgba(15, 28, 46, 0.25); }
  .tablewrap.wide.frz2.can-left .tbl td:first-child, .tablewrap.wide.frz2.can-left .tbl th:first-child { box-shadow: none; }
  .tablewrap.wide.frz2.can-left .tbl td:nth-child(2), .tablewrap.wide.frz2.can-left .tbl th:nth-child(2) { box-shadow: 6px 0 8px -6px rgba(15, 28, 46, 0.25); }
}
.tablewrap.wide .tbl tbody tr:hover td { background: var(--row-hover); }
.tablewrap.wide.can-right { background: linear-gradient(to left, rgba(15, 28, 46, 0.10), rgba(15, 28, 46, 0)) right / 14px 100% no-repeat, var(--surface); background-attachment: scroll, scroll; }
.tablewrap.wide .tbl { background: transparent; }
.tablewrap.wide .tbl td { background-clip: padding-box; }
.hbar { position: fixed; bottom: 0; height: 14px; overflow-x: auto; overflow-y: hidden; z-index: 45; background: #DCE7F2; border-top: 1px solid #C9D3DF; scrollbar-width: auto; scrollbar-color: var(--deep) #DCE7F2; }
.hbar::-webkit-scrollbar { height: 12px; }
.hbar::-webkit-scrollbar-track { background: #DCE7F2; }
.hbar::-webkit-scrollbar-thumb { background: var(--deep); border-radius: 6px; border: 2px solid #DCE7F2; }
.hbar > div { height: 1px; }
@media (max-width: 1023.98px) { .hbar { display: none; } .tablewrap.wide::-webkit-scrollbar { height: 8px; } }
@media print { .hbar { display: none; } }

/* ---- C1: the Call Queue. A notice after logging a call, the log-call sheet (bottom sheet on a phone, centred on the desktop),
   the Also offer line, the called-today section. */
.notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--chip-info-bd); background: var(--chip-info-bg); color: var(--chip-info-fg); margin-bottom: var(--s4); }
.notice.ok { background: var(--chip-success-bg); border-color: var(--chip-success-bd); color: var(--chip-success-fg); }
.notice .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.also { margin-top: 2px; }
.sheet-modal.logcall .sheet-box h3 { margin-bottom: 10px; }
.sheet-modal.logcall .reasons label { min-height: 44px; }
.sheet-modal.logcall .field { margin: 4px 0 10px; }
.sheet-modal.logcall .row { margin-top: 6px; }
@media (min-width: 1024px) {
  .sheet-modal.logcall { align-items: center; }
  .sheet-modal.logcall .sheet-box { max-width: 460px; border-radius: 12px; }
}
details.called-today > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; }
details.called-today > summary::-webkit-details-marker { display: none; }
details.called-today > summary h2 { display: inline-flex; }
body.sheet-open { overflow: hidden; }

/* ---- C8: This Week. Weekday lines, the change chip and a 6 px bar (previous week faint, this week deep; green up, red down). */
.tbl td.lines div { white-space: nowrap; line-height: 1.6; }
.chg { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.chg .bar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.chg .bar i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; background: var(--deep); }
.chg .bar i.prev { background: #C9D3DF; }
.chg .bar i.up { background: var(--chip-success-fg); }
.chg .bar i.down { background: var(--chip-danger-fg); }
.filters .ic.prev { transform: rotate(90deg); } .filters .ic.next { transform: rotate(-90deg); }

/* ---- C10: two drivers on a route. Two initials badges, the mode chip, two lanes side by side on a split route. */
.owner.two .av2 { grid-column: 1; grid-row: 1 / span 3; width: 30px; height: 30px; margin: 22px 0 0 16px; font-size: 12px; z-index: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--zc, var(--bca-blue)); }
.split-lanes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@container lane (min-width: 640px) { .split-lanes { grid-template-columns: repeat(2, minmax(160px, 1fr)); } }   /* E19: side by side only in a wide lane */
.split-lanes .lane-half { min-width: 0; }
.split-lanes .lane-cap { display: flex; align-items: center; gap: 6px; padding: 4px 0 6px; }
.split-lanes .lane-cap .av { width: 20px; height: 20px; border-radius: 50%; background: var(--chip-info-bg); color: var(--chip-info-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.split-lanes .stops.rows { min-height: 48px; border: 1px dashed var(--card-border); border-radius: 8px; padding: 4px; }
.split-lanes .stops.rows .empty { padding: 10px; }
.week .cell .av2 { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }

/* ---- C7: the greeting banner: a white card with a 3 px deep bar, once a day, name in 600 and the line in ink-2 */
.hello.greet { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 18px; margin-bottom: var(--s4); }
.hello.greet b { font-weight: 600; }
.hello.greet .line { color: var(--ink-2); font-size: 17px; }   /* 17 px: the floor on phone screens used while working (Prod 2.3 phone matrix) */
.flag.warn { color: var(--chip-warning-fg); }

/* ---- Batch D, D20: the Call Queue as a week agenda ---- */
.q-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 var(--s4); }
.q-prog { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--r); padding: 10px 14px; }
.q-prog .q-left { grid-column: 1 / -1; color: var(--ink-2); margin-top: -4px; }   /* E6: the positive line under the bar */
.q-bar { height: 8px; border-radius: 4px; background: var(--ground); overflow: hidden; }
.q-bar i { display: block; height: 100%; background: var(--bca-blue-deep); }
/* E8: the overdue calls show three, the rest behind Show all */
.q-more > summary { list-style: none; margin: 4px 0 8px; display: inline-flex; }
.q-more > summary::-webkit-details-marker { display: none; }
.q-more .open-lbl, .q-more[open] .closed-lbl { display: none; }
.q-more[open] .open-lbl { display: inline; }
.q-search { margin: 0 0 var(--s4); max-width: 360px; }
.q-sec { margin: 0 0 var(--s5); }
.q-h { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; margin: 0 0 var(--s3); cursor: default; }
details.q-sec > summary.q-h { cursor: pointer; list-style: none; min-height: 44px; }
.q-h .count { font-weight: 600; font-size: 13px; background: var(--ground); border-radius: 10px; padding: 1px 8px; color: var(--ink-2); }
.q-empty { color: var(--ink-2); margin: 0 0 var(--s3); }
/* ---- E7: the Call Queue's colours. One colour per kind of call, on the section heading, a 4 px bar and a very light
   tint on the row, and the chip; soft tints within the C16 restraint. Red is only Collect first (overdue money). ---- */
.call-kinds, :root {
  --k-catch: #28AEE3;   --k-catch-tint: #F2FAFE;   --k-catch-bg: #E5F5FC;   --k-catch-fg: #0A5469;   --k-catch-bd: #A9DDF3;   /* Dave, Oct 3: BCA cyan; no route uses it (purple was 580 West's) */
  --k-today: #0B4F84;   --k-today-tint: #F5F9FD;   --k-today-bg: #E6F0F8;   --k-today-fg: #0B4F84;   --k-today-bd: #B9D3EA;
  --k-follow: #0F766E;  --k-follow-tint: #F2FAF8;  --k-follow-bg: #E0F4F1;  --k-follow-fg: #115E59;  --k-follow-bd: #A7DCD3;
  --k-due: #64748B;     --k-due-tint: #F8FAFC;     --k-due-bg: #EEF2F6;     --k-due-fg: #334155;     --k-due-bd: #CBD5E1;
  --k-new: #15803D;     --k-new-tint: #F4FAF6;     --k-new-bg: #E8F5EC;     --k-new-fg: #1E6B34;     --k-new-bd: #B7DFC3;
  --k-collect: #B91C1C; --k-collect-bg: #FDECEC;   --k-collect-fg: #9B1C1C; --k-collect-bd: #F5C2C2;
  --k-ntw: #94A3B8;     --k-ntw-tint: #FFFFFF;     --k-ntw-bg: #F1F4F8;     --k-ntw-fg: #475569;     --k-ntw-bd: #D5DDE7;
}
.qs-catch > .q-h { color: var(--k-catch-fg); } .qs-today > .q-h { color: var(--k-today-fg); } .qs-due > .q-h { color: var(--k-due-fg); }
.qs-ntw > .q-h { color: var(--k-ntw-fg); }
.qs-catch > .q-h, .qs-today > .q-h, .qs-due > .q-h, .qs-ntw > .q-h { border-left: 4px solid currentColor; padding-left: 8px; }
.qrow.qk-catch { border-left-color: var(--k-catch); background: var(--k-catch-tint); }
.qrow.qk-today { border-left-color: var(--k-today); background: var(--k-today-tint); }
.qrow.qk-follow { border-left-color: var(--k-follow); background: var(--k-follow-tint); }
.qrow.qk-due { border-left-color: var(--k-due); background: var(--k-due-tint); }
.qrow.qk-new { border-left-color: var(--k-new); background: var(--k-new-tint); }
.qrow.qk-ntw { border-left-color: var(--k-ntw); background: var(--k-ntw-tint); }
.qrow .q-late { color: var(--k-catch-fg); font-weight: 600; margin-top: 4px; }
.badge.kc-catch { background: var(--k-catch-bg); color: var(--k-catch-fg); border-color: var(--k-catch-bd); }
.badge.kc-today { background: var(--k-today-bg); color: var(--k-today-fg); border-color: var(--k-today-bd); }
.badge.kc-follow { background: var(--k-follow-bg); color: var(--k-follow-fg); border-color: var(--k-follow-bd); }
.badge.kc-due { background: var(--k-due-bg); color: var(--k-due-fg); border-color: var(--k-due-bd); }
.badge.kc-new { background: var(--k-new-bg); color: var(--k-new-fg); border-color: var(--k-new-bd); }
.badge.kc-collect { background: var(--k-collect-bg); color: var(--k-collect-fg); border-color: var(--k-collect-bd); }
.badge.kc-ntw { background: var(--k-ntw-bg); color: var(--k-ntw-fg); border-color: var(--k-ntw-bd); }
.qrow .q-meta .over { color: var(--k-collect-fg); }
.q-acts .btn.o-ordered { border-color: var(--k-new); color: var(--k-new-fg); }
.q-acts .btn.o-ordered:hover { background: var(--k-new-bg); }
.q-acts .btn.o-will { border-color: var(--k-today-bd); color: var(--k-today-fg); }
.q-acts .btn.o-will:hover { background: var(--k-today-bg); }
.q-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 var(--s3); padding: 0; font-size: 13px; color: var(--ink-2); }
.q-legend li { display: inline-flex; align-items: center; gap: 6px; }
.q-legend li b { color: var(--ink); font-weight: 600; }
.q-legend .sw { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.q-legend .sw.qk-catch { background: var(--k-catch); } .q-legend .sw.qk-today { background: var(--k-today); } .q-legend .sw.qk-follow { background: var(--k-follow); }
.q-legend .sw.qk-due { background: var(--k-due); } .q-legend .sw.qk-new { background: var(--k-new); } .q-legend .sw.qk-ntw { background: var(--k-ntw); }
.q-legend .sw.qk-collect { background: var(--k-collect); }
.qrow .chip.zone[style*="--zone-unknown"] { --c: var(--k-ntw) !important; --zt: var(--k-ntw-bg) !important; --zi: var(--k-ntw-fg) !important; }   /* the zone-unknown flag is red on the board; here red is only Collect first */
.release-menu > summary { white-space: normal; max-width: 100%; height: auto; min-height: 40px; text-align: left; }   /* E4: the button stays inside its route card */
/* end E7 */
/* ---- E9: keep going. The Today bar runs on into a bonus zone; goals sit quietly beside it; momentum and notes ---- */
.q-bars { display: flex; gap: 4px; align-items: center; min-width: 0; }
.q-bars .q-bar { flex: 3 1 0; }
.q-bonus { flex: 1 1 0; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--ground) 0 6px, #E9F2EC 6px 8px); overflow: hidden; }
.q-bonus i { display: block; height: 100%; background: var(--k-new); }
.q-prog .q-goals { grid-column: 1 / -1; color: var(--ink-3); margin-top: -2px; }
.q-notes { display: grid; gap: 6px; margin: 0 0 var(--s3); }
.q-note { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--k-today-bd); background: var(--k-today-bg); border-radius: var(--r); color: var(--ink); }
.q-note.n-kudos { border-color: var(--k-new-bd); background: var(--k-new-bg); }
.q-note.n-draft_delivered, .q-note.n-decision, .q-note.n-short { border-color: var(--chip-warning-bd); background: var(--chip-warning-bg); }   /* E13, E14: something to finish */
.q-note .ic { width: 18px; height: 18px; flex: none; }
.q-momentum { margin: 0 0 var(--s3); padding: 8px 12px; border-left: 4px solid var(--k-new); background: var(--k-new-tint); border-radius: 0 var(--r) var(--r) 0; }
.q-momentum p { margin: 2px 0; display: flex; gap: 8px; align-items: center; }
.q-momentum .q-wrap { font-weight: 600; }
.q-complete { font-weight: 700; color: var(--k-new-fg); margin: 0 0 var(--s3); display: flex; gap: 8px; align-items: center; }
.qrow.qk-bonus { border-left-color: var(--k-new); background: var(--k-new-tint); }
.badge.kc-bonus { background: var(--k-new-bg); color: var(--k-new-fg); border-color: var(--k-new-bd); }
@media (max-width: 600px) { .q-prog { grid-template-columns: auto minmax(0, 1fr); } .q-prog b.num { grid-column: 1 / -1; } }   /* the numbers under the bars on a phone: the bars keep their width */
.qrow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(180px, 0.8fr); gap: 8px 16px; background: var(--surface); border: 1px solid var(--card-border); border-left: 4px solid var(--card-border); border-radius: var(--r); padding: 12px 14px; margin: 0 0 8px; }
.qrow .q-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qrow .q-why { margin-top: 2px; }
.qrow .q-meta, .qrow .q-also { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.qrow .q-contact { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.qrow .q-person { font-weight: 600; }
.qrow .q-call { min-height: 44px; }
.qrow .q-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qrow .q-acts .q-one { margin: 0; }
.qrow .q-acts .btn { min-height: 40px; }
.lc-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.lc-days[hidden] { display: none; }
.lc-days .tap { display: flex; flex-direction: column; align-items: center; min-height: 56px; min-width: 64px; }
.lc-days .tap small { font-size: 12px; color: var(--ink-2); }
.toast[data-logged] { position: sticky; top: calc(var(--top-total) + 8px); z-index: 12; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 1023.98px) {
  .qrow { grid-template-columns: minmax(0, 1fr); }
  .qrow .q-call { width: 100%; min-height: 56px; justify-content: center; font-size: 18px; }
  .qrow .q-acts .btn, .qrow .q-acts .q-one { flex: 1 1 45%; }
  .qrow .q-acts .q-one .btn { width: 100%; min-height: 48px; }
  .qrow .q-acts .btn { min-height: 48px; }
}
/* D20 visual review: icons keep a gap from their text; an empty day is one line; Note… and the Create-in-Zoho + share the last row */
.q-empty .ic, .qrow .q-late .ic { margin-right: 6px; vertical-align: -2px; }
.q-sec.q-quiet { margin-bottom: var(--s2); }
.q-sec.q-quiet .q-h { color: var(--ink-2); }
@media (max-width: 760px) {
  .qrow .q-acts .btn.quiet { flex: 1 1 30%; }
  .qrow .q-acts > .zoho-new, .qrow .q-acts > [data-zoho-new-disabled] { flex: 0 0 auto; }
}
/* D20 + C16 restraint: the number to call is a soft blue button (tint, deep blue text), not a solid block on every row */
.qrow .q-call { background: var(--chip-info-bg); border-color: var(--chip-info-bd, #B9D3EA); color: var(--bca-blue-deep); font-weight: 700; }
.qrow .q-call:hover { background: #D5E6F4; color: var(--bca-blue-deep); }
/* D14: Ready to charge in the Payment column */
.charge { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; flex-wrap: wrap; }
.charge .badge .ic { width: 13px; height: 13px; margin-right: 3px; }
.charge .charge-btn { min-height: 28px; padding: 0 8px; font-size: 13px; }
.cardfile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--s4); padding: 8px 12px; border: 1px solid var(--card-border); border-radius: var(--r); background: var(--surface); }
.cardfile > .ic { width: 18px; height: 18px; color: var(--bca-blue-deep); }

/* Batch D, D10: one set of pick colours on every pick, verify, board, list and TV view.
   To pick: white with a grey label. Picked: green, one check. Verified: deep blue #00569C, white text, two checks.
   Short or mismatch: amber with the quantity and reason. */
.d10 { --d10-bg: #fff; --d10-fg: #475569; --d10-bd: #CBD5E1; }
.d10.picked { --d10-bg: #E8F5EC; --d10-fg: #166534; --d10-bd: #86C79A; }
.d10.verified { --d10-bg: #00569C; --d10-fg: #fff; --d10-bd: #00569C; }
.d10.short { --d10-bg: #FFF7E6; --d10-fg: #92400E; --d10-bd: #F0B45A; }
.d10.staged { --d10-bg: #F1F5F9; --d10-fg: #334155; --d10-bd: #94A3B8; }
.d10.loaded { --d10-bg: #EEF2FF; --d10-fg: #3730A3; --d10-bd: #A5B4FC; }
span.d10 { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--d10-bg); color: var(--d10-fg); border: 1px solid var(--d10-bd); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
span.d10 .ic { width: 12px; height: 12px; }
.pickstat.none { color: #475569; }
.pickstat.picked { color: #166534; } .pickstat.short { color: #92400E; }
.pickstat.verified { color: #fff; background: #00569C; padding: 1px 8px; border-radius: 999px; }
.pickprog .sq.picked { background: #16A34A; border-color: #16A34A; } .pickprog .sq.short { background: #D97706; border-color: #D97706; }
.pickprog .sq.verified { background: #00569C; border-color: #00569C; }
.verify-mode .pk-head { box-shadow: inset 0 -3px 0 #00569C; }
.verify-mode .pk-bar i { background: #00569C; }
.verify-banner { display: flex; align-items: center; gap: 6px; background: #00569C; color: #fff; padding: 10px 14px; border-radius: 10px; margin: 0 0 10px; font-size: 15px; }
.verify-banner .ic { width: 16px; height: 16px; }
.pickrow.v-confirmed { background: #00569C; border-color: #00569C; }
.pickrow.v-confirmed .tick { color: #00569C; }

/* D11: the route overview */
.pl-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s4); }
.rw { margin-bottom: var(--s4); padding: 16px; border-left: 4px solid var(--c, var(--bca-blue)); }
.rw-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; }
.rw-h h2 { display: flex; align-items: center; gap: 8px; font-size: 20px; margin: 0; }
.rw-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--bca-blue)); display: inline-block; }
.rw-meta { color: var(--ink-2); font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.rw-meta .ic { width: 14px; height: 14px; }
.rw-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.rw-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--surface); min-height: 56px; }
.rw-step .n { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: #F1F5F9; color: #475569; flex: none; }
.rw-step .n .ic { width: 16px; height: 16px; }
.rw-step b { display: block; font-size: 15px; } .rw-step small { display: block; font-size: 13px; color: var(--ink-2); }
.rw-step.done .n { background: #16A34A; color: #fff; }
.rw-step.now { border: 2px solid #00569C; background: #F2F7FC; } .rw-step.now .n { background: #00569C; color: #fff; }
.rw-go { display: flex; width: 100%; justify-content: center; min-height: 56px; font-size: 18px; }
.rw-go.verify { background: #00569C; border-color: #00569C; }
.rw-help { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; }
.rw-ready { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; color: #166534; font-size: 17px; }
.rw-more { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; align-items: flex-start; }
.rw-stops { width: 100%; }
.rw-stops summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
.rw-stops ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rw-stop .rw-in, .rw-stop.done { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border-radius: 10px; background: var(--d10-bg, #fff); color: var(--d10-fg, var(--ink)); border: 1px solid var(--d10-bd, var(--card-border)); }
.rw-stop.done { --d10-bg: #F8FAFC; --d10-fg: var(--ink-2); }
.rw-stop .seq { width: 28px; height: 28px; border-radius: 7px; background: rgba(15, 23, 42, 0.08); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.rw-stop.verified .seq { background: rgba(255, 255, 255, 0.2); }
.rw-stop .nm { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-stop .st { font-size: 13px; white-space: nowrap; }

/* D11: pick by route, Stage and Load (the pick screen's rows, 64 px, 20 px quantities) */
.pr-item .pr-split { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.pr-item .pr-split .sp { font-size: 17px; padding: 2px 8px; border-radius: 6px; background: rgba(15, 23, 42, 0.06); white-space: nowrap; }
.pickrow.st-picked .pr-split .sp { background: rgba(255, 255, 255, 0.18); color: #fff; }
.st-stop .st-invs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0 2px; }
.st-stop .st-invs .btn { min-height: 48px; }
@media (max-width: 640px) { .verify-mode .st-stop { grid-template-columns: minmax(0, 1fr); } }   /* P29 P10: on a phone the Verify card takes the full width, its invoice buttons below it (names were squeezed and broken mid-word) */
.pk-foot [data-disabled] { opacity: 0.45; pointer-events: none; }
.rs-alloc { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow-y: auto; }
.rs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.rs-row small { color: var(--ink-3); font-size: 13px; margin-left: 4px; }
.rs-row .field { width: 96px; font-size: 18px; }
.rs-reasons { border: 0; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.rs-reasons label { min-height: 48px; display: inline-flex; align-items: center; gap: 6px; font-size: 17px; }
[data-route-short] .row .tap { min-height: 56px; font-size: 17px; }   /* a working screen: 17 px, 56 px buttons */
.stepper { display: flex; gap: 8px; align-items: center; }
.stepper .field { width: 110px; text-align: center; font-size: 20px; font-weight: 700; }
.stepper .tap { min-width: 56px; font-size: 22px; }
.toast-undo { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 35; display: flex; align-items: center; gap: 10px; background: #1E293B; color: #fff; padding: 8px 8px 8px 14px; border-radius: 12px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.3); max-width: calc(100vw - 24px); font-size: 15px; }
.toast-undo[hidden] { display: none; }
.toast-undo .btn { min-height: 44px; }
.pending-pill { position: fixed; right: 12px; top: calc(var(--top-total) + 8px); z-index: 34; background: #FFF7E6; color: #92400E; border: 1px solid #F0B45A; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700; }
.pending-pill[hidden] { display: none; }
/* D11: the four steps on the board, stop cards and TV */
.steps { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.steps .stp { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #fff; border: 1px solid #CBD5E1; color: #475569; white-space: nowrap; }
.steps .stp.done { background: #E8F5EC; border-color: #86C79A; color: #166534; }
.steps .stp .ic { width: 12px; height: 12px; }
.steps.tv .stp { font-size: 22px; padding: 4px 12px; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.25); color: #E2E8F0; }
.steps.tv .stp.done { background: rgba(22, 163, 74, 0.2); border-color: rgba(134, 199, 154, 0.6); color: #BBF7D0; }
.steps.tv .stp .ic { width: 18px; height: 18px; }
.tvsteps { margin: 6px 0; }
.override-form { margin: 12px 0 110px; padding: 12px; }
@media (min-height: 501px) { .pickitem, .st-stop { scroll-margin-top: calc(var(--top-total) + 170px); scroll-margin-bottom: 170px; } }   /* D11: a row scrolled into view is never under the sticky header or footer */
@media (max-height: 500px) { .pickitem, .st-stop { scroll-margin-top: calc(var(--top-total) + 8px); scroll-margin-bottom: 80px; } }
/* D11: a phone on its side (under 500 px tall): the header scrolls away so a row always fits between it and the footer */
@media (max-height: 500px) and (orientation: landscape) { .pick-page .pk-head { position: static; } .pick-page .pk-head .sub { display: none; } }
/* D18: the Owner Overview */
.ov-head h1 { font-size: 22px; margin: 0 0 var(--s3); color: var(--ink); }
.ov-needs { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--r); padding: 14px 16px; margin-bottom: var(--s4); }
.ov-needs h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 0 8px; }
.ov-needs h2 .ic { width: 18px; height: 18px; color: var(--chip-danger-fg); }
.need { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.need:first-of-type { border-top: 0; }
.need-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.need-t b { font-size: 16px; font-weight: 600; color: var(--ink); }
.need-m { font-size: 13px; color: var(--ink-2); }
.need.u3 { box-shadow: inset 3px 0 0 var(--chip-danger-fg); padding-left: 10px; }
.need-a { flex: none; min-width: 96px; justify-content: center; }
.need-none { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; color: #166534; font-weight: 600; }
/* Prod 2.10: a tile never grows past its column (min-width 0, minmax(0, 1fr)); long text wraps inside it (the 320 px sweep with WCAG text spacing). */
.ov-pulse { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: var(--s4); }
.pulse { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; padding: 12px 14px; background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--r); color: var(--ink); }
.pulse b { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pulse .v { font-size: 24px; font-weight: 600; }
.pulse .c { font-size: 13px; color: var(--ink-2); }
.pulse.good .c { color: var(--chip-success-fg); } .pulse.bad .c { color: var(--chip-danger-fg); }
.ov-routes, .ov-team, .ov-money, .ov-trends { margin-bottom: var(--s4); }
.ov-routes .row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.aging { display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: #F1F5F9; margin: 6px 0 8px; }
.aging i, .aging-legend i { display: inline-block; }
.aging-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-2); margin: 0 0 8px; }
.aging-legend i { width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.a0 { background: #94A3B8; } .a1 { background: #F0B45A; } .a2 { background: #E08A2E; } .a3 { background: #C2410C; } .a4 { background: #991B1B; }
.ov-money-rows .row { display: flex; justify-content: space-between; align-items: center; min-height: 44px; border-top: 1px solid var(--hair); }
.ov-money-rows .row span { display: inline-flex; align-items: center; gap: 6px; }
.ov-trends summary { cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; } .ov-trends summary h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; margin: 0; }
.ov-chart { width: 100%; height: auto; max-width: 720px; display: block; margin-top: 10px; }
.ov-chart .ax { font-size: 12px; fill: #64748B; } .ov-chart .base { stroke: #CBD5E1; }
.ov-chart .b-sales, .aging-legend i.b-sales { fill: #00569C; background: #00569C; } .ov-chart .b-cash, .aging-legend i.b-cash { fill: #16A34A; background: #16A34A; }
@media (max-width: 1023.98px) { .need { flex-wrap: wrap; } .need-a { width: 100%; min-height: 48px; } .ov-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pulse .v { font-size: 20px; } }
/* D9: in the stop panel, Move stop is a section (the form inline, a heading, the handle labelled) */
.mv-h .mv-l { display: none; }
.drawer-b .movebtn details.owner-menu[data-inline] { display: block; width: 100%; }
.drawer-b .movebtn details.owner-menu[data-inline] > summary { display: inline-flex; list-style: none; }   /* E23: Move stop is a button that opens the form */
.drawer-b .movebtn details.owner-menu[data-inline] > summary .mv-h { width: auto; padding: 0 12px; gap: 6px; }
.drawer-b .movebtn details.owner-menu[data-inline] > summary .mv-l { display: inline; }
.drawer-b .movebtn details.owner-menu[data-inline] > .pop { position: static; width: auto; box-shadow: none; border: 1px solid var(--card-border); margin-top: 8px; }
.drawer-b .movebtn details.owner-menu[data-inline] > .pop .pop-close { display: none; }
/* the phone rule turns every open menu into a bottom sheet with a veil; the panel's Move stop section stays a section */
@media (max-width: 1023.98px) {
  .drawer-b .movebtn details.owner-menu[data-inline][open]::before { content: none; }
  .drawer-b .movebtn details.owner-menu[data-inline][open] > .pop { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; max-height: none; overflow: visible; border-radius: var(--radius, 8px); box-shadow: none !important; padding: 12px !important; z-index: auto; }
}

/* Batch D, D13: the warehouse TV. One screen, no scrolling: sizes are in --u (1 px at 1080 tall), so 1920x1080 reads 40 px
   route names and 28 px names and statuses (nothing under 22 px), 3840x2160 doubles them and 1366x768 scales them down.
   C16 dark theme: navy, colour only as small accents (the route dot, the 8 px status bar). */
body.tv2 { --u: calc(100vh / 1080); margin: 0; height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #0F1C2E; color: #E2E8F0; font-size: calc(28 * var(--u)); }
.tv2-head { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u)); padding: calc(20 * var(--u)) calc(40 * var(--u)) calc(8 * var(--u)); }
.tv2-date b { font-size: calc(44 * var(--u)); font-weight: 700; color: #fff; }
.tv2-view { margin-left: calc(18 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 600; color: #7DD3FC; }
.tv2-right { display: flex; align-items: center; gap: calc(28 * var(--u)); white-space: nowrap; }
.tv2-clock { font-size: calc(56 * var(--u)); font-weight: 700; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.tv2-clock small { font-size: calc(26 * var(--u)); margin-left: calc(6 * var(--u)); color: #CBD5E1; }
.tv2-live { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(24 * var(--u)); color: #CBD5E1; }
.tv2-live i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: #22C55E; display: inline-block; }
.tv2-live.catching i { background: #F59E0B; } .tv2-live.stale i, .tv2-live.never i { background: #EF4444; } .tv2-live.stale, .tv2-live.never { color: #FCA5A5; }
.tv2-body { display: flex; flex-direction: column; min-height: 0; padding: 0 calc(40 * var(--u)); gap: calc(14 * var(--u)); }
.tv2-probs { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(16 * var(--u)); }
.tv2-prob { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); background: #1E293B; border-left: calc(6 * var(--u)) solid #F59E0B; padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(24 * var(--u)); color: #F8FAFC; max-width: 100%; }
.tv2-prob.red { border-left-color: #EF4444; }
.tv2-prob .ic { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex: none; }
.tv2-cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: calc(24 * var(--u)); padding-bottom: calc(8 * var(--u)); }
.tv2-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #13233A; border-radius: calc(16 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); }
.tv2-col h2 { display: flex; align-items: center; gap: calc(14 * var(--u)); margin: 0; font-size: calc(40 * var(--u)); font-weight: 700; color: #fff; line-height: 1.1; min-width: 0; }
.tv2-col h2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv2-dot { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: var(--zc, #94A3B8); flex: none; }
.tv2-col.unknown .tv2-dot { background: #EF4444; }
.tv2-who { font-size: calc(28 * var(--u)); color: #CBD5E1; margin: calc(6 * var(--u)) 0 calc(10 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv2-warn { color: #FCD34D; font-weight: 700; }
.tv2-steps { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.tv2-step { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 600; padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); color: #E2E8F0; }
.tv2-step.done { background: rgba(34, 197, 94, 0.18); border-color: rgba(134, 239, 172, 0.6); color: #BBF7D0; }
.tv2-step .ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.tv2-prog { font-size: calc(26 * var(--u)); color: #CBD5E1; margin-bottom: calc(8 * var(--u)); }
.tv2-prog b { color: #fff; }
.tv2-col .rbar.tv { height: calc(12 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.tv2-stops { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.tv2-stop { flex: none; height: calc(52 * var(--u)); display: grid; grid-template-columns: calc(8 * var(--u)) minmax(0, 1fr) auto; align-items: center; column-gap: calc(16 * var(--u)); padding-right: calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(255, 255, 255, 0.04); }
.tv2-stop[hidden] { display: none; }
.tv2-stop .bar { height: 100%; border-radius: calc(8 * var(--u)) 0 0 calc(8 * var(--u)); background: #64748B; }
.tv2-stop.picked .bar { background: #22C55E; } .tv2-stop.verified .bar { background: #38BDF8; } .tv2-stop.short .bar { background: #F59E0B; }
.tv2-stop .nm { font-size: calc(28 * var(--u)); color: #F8FAFC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv2-stop .st { font-size: calc(24 * var(--u)); color: #CBD5E1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tv2-stop.next { background: rgba(56, 189, 248, 0.16); box-shadow: inset 0 0 0 2px #38BDF8; } .tv2-stop.next .st { color: #7DD3FC; font-weight: 700; }
.tv2-more, .tv2-done { flex: none; height: calc(44 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(24 * var(--u)); color: #94A3B8; padding-left: calc(24 * var(--u)); }
.tv2-done { color: #86EFAC; } .tv2-done .ic { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.tv2-idle { font-size: calc(36 * var(--u)); color: #CBD5E1; padding: calc(40 * var(--u)); }
.tv2-foot { display: flex; justify-content: space-between; gap: calc(20 * var(--u)); padding: calc(8 * var(--u)) calc(40 * var(--u)) calc(14 * var(--u)); font-size: calc(22 * var(--u)); color: #94A3B8; white-space: nowrap; overflow: hidden; }
.tv2-foot span { overflow: hidden; text-overflow: ellipsis; }
.tv2-sum { font-size: calc(24 * var(--u)); color: #CBD5E1; margin-top: calc(2 * var(--u)); }
body.tv2 > .stale-banner.tv { font-size: calc(26 * var(--u)); padding: calc(8 * var(--u)) calc(40 * var(--u)); }
.tv2-col .rbar.tv { flex: none; height: calc(12 * var(--u)); }
.tv2-state { font-size: calc(24 * var(--u)); margin: calc(-4 * var(--u)) 0 calc(10 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* D5 (phone reviewers): the chosen reason on a sheet is dark text on the amber tint, readable; the board's drag handle is a
   desktop control and never shows in the phone drawer; the health strip on Customer 360 never widens the phone page */
.sheet-box .reasons label:has(input:checked) { color: #7C2D12; }
@media (max-width: 1023.98px) { .drawer .grip, .drawer-b .grip { display: none; } }
.hmonths { min-width: 0; max-width: 100%; }
.hmonths > div { min-width: 0; overflow: hidden; }

/* ---- E20: the responsive standard (docs/RESPONSIVE.md) ---------------------------------------------------------- */
[id] { scroll-margin-top: calc(var(--top-total, 68px) + var(--stick, 0px) + 56px); }   /* a jump link lands below the sticky bars */
:where(button, summary, .btn, a.btn, a.chip, .tap) { min-height: 24px; min-width: 24px; }      /* WCAG 2.5.8: 24 by 24 at least; :where() so it never overrides a larger minimum (gate: the phone Needs you button was 32 px) */
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; }
main, .content { min-width: 0; }
.btn, a.btn { max-width: 100%; white-space: normal; overflow-wrap: break-word; }         /* a long label wraps inside its container */
.pcard a { white-space: normal; overflow-wrap: break-word; }

/* ---- E19: the driver header never stacks one word per line; nothing leaves its lane ------------------------------ */
.owner { grid-template-columns: 40px minmax(0, 1fr); }
.owner > .av { grid-column: 1; grid-row: 1 / span 3; }                        /* both avatars in the first column, the names beside them */
.owner.two { grid-template-columns: 76px minmax(0, 1fr); }
.owner.two > .av { justify-self: start; }
.owner.two > .av2 { justify-self: end; margin: 4px 0 0 0; width: 32px; height: 32px; }   /* two avatars side by side, not stacked */
.owner .name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; }
.owner .name .pn { white-space: nowrap; }                                     /* a whole name stays together */
.owner .name .badge { flex-basis: 100%; width: fit-content; margin-top: 4px; }  /* Split / Riding together on its own line */
.owner .phone { white-space: normal; }
.owner .phone a { white-space: nowrap; }
.owner .ovr { overflow-wrap: break-word; }
.owner details.owner-menu { grid-column: 2; grid-row: auto; justify-self: start; }   /* Reassign under the name, never beside it */
.owner details.owner-menu summary { min-height: 32px; }
.owner .re { grid-column: 2; grid-row: auto; justify-self: start; min-height: 32px; }
.lane .rstatus, .lane .tools, .lane .facts, .lane .big { min-width: 0; overflow-wrap: break-word; }
.lane .rstatus .pill, .lane .rstatus .chip { max-width: 100%; white-space: normal; }
.lane.unknown .owner .phone, .lane.unknown .stop .bdg { white-space: normal; }
.lane-half .lane-cap { flex-wrap: wrap; }
.board-page [id], .lanes [id], #problems { scroll-margin-top: calc(var(--top-total, 68px) + var(--daytabs-h, 72px) + 12px); }
.problems .prob .pl { white-space: nowrap; }                                 /* E19: "zone unknown", "carried over" stay together */

/* ---- E17: route colours on the cards. Light means to go, solid means done (design section A) ---------------------- */
.stops.rows .stop.row { background: var(--rt-tint, var(--surface)); color: var(--rt-ink, var(--ink)); border: 1px solid transparent; border-left: 4px solid var(--rt, var(--card-border)); box-shadow: none; opacity: 1; }
.stops.rows .stop.row .who .nm, .stops.rows .stop.row .who .city, .stops.rows .stop.row .amt { color: var(--rt-ink, var(--ink)); }
.stops.rows .stop.row .who .city { opacity: 0.9; }
.stops.rows .stop.row > .seq { background: #FFFFFF; color: var(--rt-ink); box-shadow: inset 0 0 0 1px var(--rt); }
.stops.rows .stop.row.cs-next { outline: 2px solid var(--rt); outline-offset: -2px; }
.stops.rows .stop.row.cs-next > .seq { background: var(--rt-deliv); color: var(--rt-on); box-shadow: none; }
.stops.rows .stop.row .tag-next, .stops.rows .stop.row .tag-from { background: var(--rt-deliv); color: var(--rt-on); border-color: transparent; font-weight: 700; }
.stops.rows .stop.row.cs-done, .stops.rows .stop.row.st-done { background: var(--rt-deliv); border-left-color: var(--rt-deliv); opacity: 1; }
.stops.rows .stop.row.cs-done .who .nm, .stops.rows .stop.row.cs-done .who .city, .stops.rows .stop.row.cs-done .amt { color: var(--rt-on); }
.stops.rows .stop.row.cs-done > .seq.chk, .stops.rows .stop.row.cs-partial > .seq.chk { background: #FFFFFF; color: var(--rt-deliv); border-radius: 50%; box-shadow: none; }
.stops.rows .stop.row > .seq.chk .ic { width: 16px; height: 16px; stroke-width: 3; }
.stops.rows .stop.row.cs-done .badge.pay { background: rgba(255, 255, 255, 0.22); color: var(--rt-on); border-color: transparent; }
.stops.rows .stop.row.cs-partial { background: linear-gradient(90deg, var(--rt-deliv) 0 46px, var(--rt-tint) 46px); }
.stops.rows .stop.row .badge.partial-chip { background: #FFFFFF; color: #8A5A0B; border-color: #EBD6A8; }
.stops.rows .stop.row.cs-returned { background: #FFFFFF; border: 1px solid #E3E9EF; border-left: 4px solid #C0392B; color: #3A4A5C; }
.stops.rows .stop.row.cs-returned .who .nm, .stops.rows .stop.row.cs-returned .who .city, .stops.rows .stop.row.cs-returned .amt { color: #3A4A5C; }
.stops.rows .stop.row.cs-returned > .seq { background: #FDECEA; color: #C0392B; border-radius: 50%; box-shadow: none; }
.stops.rows .stop.row .badge.returned-chip { background: #FDECEA; color: #A33A2F; border-color: #F6C9C3; }
.stops.rows .stop.row.cs-moved { border: 1.5px dashed var(--rt); border-left: 4px solid var(--rt); }
.stops.rows .stop.row.st-problem { box-shadow: none; }
.lane { box-shadow: inset 0 4px 0 var(--zc, var(--bca-blue)); }
.pips { display: flex; gap: 3px; margin: 6px 0 2px; }
.pips i { flex: 1 1 0; height: 6px; border-radius: 3px; background: #E3E9EF; min-width: 4px; }
.pips i.d { background: var(--pd, var(--rt-deliv)); } .pips i.p { background: var(--pr, var(--rt)); } .pips i.r { background: #C0392B; }
details.done-rows > summary.done-h { list-style: none; cursor: pointer; padding: 8px 2px 2px; }
details.done-rows > summary.done-h::-webkit-details-marker { display: none; }

.lane .mos { flex-wrap: wrap; } .lane .mos .pips { flex: 1 1 160px; }
/* ---- E18: the TV uses the board's E17 cards on its dark page, sized for 5 metres at 1920 x 1080 ------------------- */
.tv2-col { background: #16273D; box-shadow: inset 0 calc(6 * var(--u)) 0 var(--zc, #94A3B8); padding-top: calc(22 * var(--u)); }
.tv2-col .pips { gap: calc(4 * var(--u)); margin: calc(4 * var(--u)) 0 calc(12 * var(--u)); flex: none; }
.tv2-col .pips i { height: calc(14 * var(--u)); border-radius: calc(7 * var(--u)); background: #33475F; }
.tv2-col .pips i.d { background: var(--rt-deliv); } .tv2-col .pips i.p { background: var(--rt); } .tv2-col .pips i.r { background: #EF4444; }
.tv2-stop { height: auto; min-height: calc(64 * var(--u)); display: grid; grid-template-columns: calc(44 * var(--u)) minmax(0, 1fr); align-items: center;
  column-gap: calc(14 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u));
  background: var(--rt-tint); color: var(--rt-ink); border-left: calc(6 * var(--u)) solid var(--rt); box-shadow: none; }
.tv2-stop .bar { display: none; }
.tv2-stop .seq { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(10 * var(--u)); display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(36 * var(--u)); font-weight: 700; background: #FFFFFF; color: var(--rt-ink); box-shadow: inset 0 0 0 2px var(--rt); line-height: 1; }
.tv2-stop .seq .ic { width: calc(30 * var(--u)); height: calc(30 * var(--u)); stroke-width: 3; }
.tv2-stop .tx { font-size: calc(28 * var(--u)); line-height: 1.2; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.tv2-stop .tx .nm { font-weight: 700; color: inherit; white-space: normal; overflow: visible; font-size: inherit; }
.tv2-stop .tx .city, .tv2-stop .tx .time, .tv2-stop .tx .more { font-weight: 500; opacity: 0.92; }
.tv2-stop .tx .warn { color: #9B1C1C; font-weight: 600; }
.tv2-stop .tags b { display: inline-block; vertical-align: 0.1em; line-height: 1; font-size: calc(22 * var(--u)); font-weight: 700; padding: calc(2 * var(--u)) calc(10 * var(--u)); border-radius: calc(20 * var(--u)); white-space: nowrap; }
.tv2-stop .tags .st { background: #FFFFFF; color: var(--rt-ink); font-weight: 600; }
.tv2-stop .cod { font-size: calc(24 * var(--u)); line-height: 1; font-weight: 700; white-space: nowrap; color: inherit; }
.tv2-stop .tx .tags:empty, .tv2-stop .tx .cod:empty { display: none; }   /* E18: the pills follow the name inside the two lines, the name gets the width */
.tv2-stop .tag-next, .tv2-stop .tag-from { background: var(--rt-deliv); color: var(--rt-on); }
.tv2-stop.cs-next { box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--rt); }
.tv2-stop.cs-next .seq { background: var(--rt-deliv); color: var(--rt-on); box-shadow: none; }
.tv2-stop.cs-done { background: var(--rt-deliv); color: var(--rt-on); border-left-color: var(--rt-deliv); }
.tv2-stop.cs-done .seq, .tv2-stop.cs-partial .seq { background: #FFFFFF; color: var(--rt-deliv); border-radius: 50%; box-shadow: none; }
.tv2-stop.cs-done .pay { background: rgba(255, 255, 255, 0.22); color: var(--rt-on); }
.tv2-stop.cs-partial { background: linear-gradient(90deg, var(--rt-deliv) 0 calc(70 * var(--u)), var(--rt-tint) calc(70 * var(--u))); }
.tv2-stop .partial-chip { background: #FFFFFF; color: #8A5A0B; }
.tv2-stop.cs-returned { background: #FFFFFF; color: #3A4A5C; border-left-color: #C0392B; }
.tv2-stop.cs-returned .seq { background: #FDECEA; color: #C0392B; border-radius: 50%; box-shadow: none; }
.tv2-stop .returned-chip { background: #FDECEA; color: #A33A2F; }
.tv2-stop.cs-moved { outline: calc(2 * var(--u)) dashed var(--rt); outline-offset: calc(-2 * var(--u)); }
.tv2-stop.next { background: var(--rt-tint); }
.tv2-done { color: #CBD5E1; height: auto; padding: calc(6 * var(--u)) 0 calc(2 * var(--u)); }
.tv2-half { font-size: calc(24 * var(--u)); font-weight: 700; color: #E2E8F0; margin: calc(8 * var(--u)) 0 calc(4 * var(--u)); }
.tv2-note { color: #CBD5E1; font-weight: 500; }
.tv2-who { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tv2-col h2 span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* a crowded lane: delivered cards shrink to one line (check, name, time) before anything else is cut */
.tv2-stops.compact .tv2-stop.is-done { min-height: calc(46 * var(--u)); padding-top: calc(4 * var(--u)); padding-bottom: calc(4 * var(--u)); }
.tv2-stops.compact .tv2-stop.is-done .seq { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.tv2-stops.compact .tv2-stop.is-done .tx { -webkit-line-clamp: 1; font-size: calc(28 * var(--u)); }   /* Prod 2.3: names stay at 28 px from 5 metres (26 px failed E18 on a day with two carried-over alerts) */
.tv2-stops.compact .tv2-stop.is-done .city, .tv2-stops.compact .tv2-stop.is-done .more, .tv2-stops.compact .tv2-stop.is-done .tags, .tv2-stops.compact .tv2-stop.is-done .cod { display: none; }

/* ---- E13: a draft invoice as a stop: dashed outline, grey DRAFT chip, "Draft in Zoho: may still change" ---------------- */
.chip.draft { background: var(--chip-neutral-bg); color: var(--chip-neutral-fg); border: 1px solid var(--chip-neutral-bd); font-weight: 700; letter-spacing: 0.04em; }
.stops.rows .stop.row.is-draft, .stop.is-draft, .dstop.is-draft { outline: 2px dashed #64748B; outline-offset: -2px; }
.stops.rows .stop.row.is-draft.cs-next, .tv2-stop.is-draft.cs-next { outline-color: var(--rt); }   /* a draft that is Next: Next's colour, still dashed */
.draftline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--f1, 13px); color: var(--ink-2); }
.dstop .draftline { font-size: 15px; }
.tv2-stop.is-draft { outline: calc(3 * var(--u)) dashed #94A3B8; outline-offset: calc(-3 * var(--u)); }
.tv2-stop .draft-tag { display: inline-block; font-size: calc(22 * var(--u)); font-weight: 700; padding: 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: #E2E8F0; color: #1E293B; vertical-align: calc(3 * var(--u)); }

/* ---- E14: Needs a zone, Needs a decision, Waiting for stock ------------------------------------------------------------ */
.decide { margin: -2px 0 10px 0; padding: 8px 10px 10px; border: 1px solid var(--chip-neutral-bd); border-top: 0; border-radius: 0 0 8px 8px; background: var(--surface); }
.decide.one { padding: 8px 10px; }
.decide .why { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; font-size: var(--f1, 13px); color: var(--ink-2); font-weight: 600; }
.decide .why .ic { width: 16px; height: 16px; flex: none; }
.decide .opts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.decide .opt-row { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 100%; padding: 2px; border-radius: 8px; background: var(--chip-neutral-bg); }
.decide .opt-row .field { width: auto; min-width: 0; max-width: 100%; height: 36px; }
.decide .btn small { font-weight: 500; opacity: 0.9; }
.decide .btn.rec { box-shadow: 0 0 0 2px var(--bca-cyan); }
.decide .rec-note { margin: 0 0 8px; font-size: var(--f1, 13px); color: var(--ink); }
.lane.waiting .stop.row.hold .seq { background: var(--chip-neutral-bg); color: var(--chip-neutral-fg); }
.notice.add-city { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 var(--s3); }
.notice.add-city .field { height: 36px; }
.deliv-days { display: inline-flex; align-items: center; gap: 4px; font-size: var(--f1, 13px); color: var(--ink-2); }
.deliv-days .ic { width: 14px; height: 14px; }

/* ---- E15: print buttons (design C: after Navigate, Call and Move, a 1 px divider and 12 px, accent-blue outline) --- */
.pdiv { display: inline-block; width: 1px; height: 28px; background: #B8C4D2; margin: 0 6px; vertical-align: middle; flex: none; }
.pbtns { display: inline-flex; gap: 6px; align-items: center; flex: none; }
.btn.icon.pb { color: #00569C; border-color: #8DB3DA; position: relative; }
.btn.icon.pb .pdot { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid #8DB3DA; display: inline-flex; align-items: center; justify-content: center; }
.btn.icon.pb .pdot .ic { width: 10px; height: 10px; }
.btn.icon.pb[aria-busy="true"] { opacity: 0.7; }
/* Release F: on the Invoices list and Customer 360 the pair sits right after the invoice number ("INV-004876 [note]
   [invoice]"). One line where there is room; below that the pair wraps under the number as a unit (minimum width: the
   wider of the number and the pair). From 1024 px, and always in the one-row Invoices table, it never wraps: a table too
   wide for its card scrolls inside it. Small on a desktop (26 px, over the 24 px floor); thumb-sized (44 px) below 1024. */
.invno { display: inline-flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; vertical-align: top; max-width: 100%; }   /* the number on the cell's top line, like its neighbours */
.invno > .nw, .invno > a { flex: none; }
.invno .pbtns { gap: 8px; margin-right: 5px; }                          /* room for the second button's printer dot */
.tbl.onerow .invno { flex-wrap: nowrap; max-width: none; }
@media (min-width: 1024px) {
  .invno { flex-wrap: nowrap; max-width: none; }
  .invno .btn.icon.pb { width: 26px; height: 26px; min-height: 26px; margin-top: -4px; }   /* centred on the number's line */
  .invno .btn.icon.pb .pdot { width: 14px; height: 14px; right: -5px; bottom: -5px; }
  .invno .btn.icon.pb .pdot .ic { width: 9px; height: 9px; }
}
.printline { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.lane-print, .proute { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rw-stop .pbtns { margin-left: auto; }
.print-live { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px; background: #0F1C2E; color: #fff; font-weight: 600; z-index: 60; }
.print-live[hidden] { display: none; }

/* ---- E21: picking, redesigned (design section B). Phone first; the same on a desktop, centred at 560 px ---------------- */
.p2-page { background: #fff; }
.p2 { max-width: 560px; margin: 0 auto; padding: 4px 0 calc(96px + env(safe-area-inset-bottom)); }
.p2-top h1 { margin: 6px 0 2px; font-size: 22px; }
.p2-top .sub { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }
.p2-rc { background: var(--rt-tint); border-left: 5px solid var(--rt); border-radius: 12px; padding: 12px 14px 14px; margin: 0 0 12px; color: var(--rt-ink); }
.p2-rc-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.p2-rc-top b { font-size: 18px; }
.p2-rc .own { font-size: 15px; opacity: 0.9; }
.p2-rc .meta { font-size: 15px; margin: 2px 0 8px; }
.p2-rc .who { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 8px; }
.p2-rc.out { opacity: 0.75; }
.p2 .av { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 15px; background: #fff; color: var(--rt-ink, var(--ink)); font-size: 13px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(15, 28, 46, 0.12); flex: none; }
.p2-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--rt-deliv, var(--bca-blue-deep)); color: var(--rt-on, #fff); font: inherit; font-size: 18px; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; box-sizing: border-box; }
.p2-btn.ghost { background: #fff; color: var(--ink); border: 1px solid #C9D3DE; font-weight: 600; }
.p2-btn.short { background: #B8581F; color: #fff; }
.p2-cancel { display: block; margin: 8px auto 0; min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 15px; }
.p2-links { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0 4px; font-size: 15px; }
.p2-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.p2-measures { color: var(--ink-2); font-size: 13px; }
.p2-empty { color: var(--ink-2); font-size: 17px; padding: 16px 0; }
/* screen 2: the stop */
.p2-h .t { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.p2-h h1 { margin: 6px 0 0; font-size: 22px; min-width: 0; overflow-wrap: anywhere; }
.p2-h .of { color: var(--ink-2); font-size: 15px; white-space: nowrap; }
.p2-h .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--rt-ink); font-size: 15px; margin: 2px 0 8px; }
.p2-h .sq { width: 10px; height: 10px; border-radius: 3px; background: var(--rt); display: inline-block; }
.p2-h .bar { height: 8px; border-radius: 4px; background: #E3E9EF; overflow: hidden; }
.p2-h .bar i { display: block; height: 100%; background: var(--rt-deliv); border-radius: 4px; transition: width 0.2s; }
.p2-h .p2-cnt { color: var(--ink-2); font-size: 15px; margin: 6px 0 8px; }
@media (prefers-reduced-motion: reduce) { .p2-h .bar i { transition: none; } }
.p2-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p2-row { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 36px; align-items: center; gap: 8px; min-height: 64px; padding: 6px 12px 6px 6px; border: 1px solid #DCE3EA; border-radius: 12px; background: #fff; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; box-sizing: border-box; }
.p2-row .q { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.p2-row .q b { font-size: 24px; font-weight: 700; }
.p2-row .q small { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.p2-row .nm { display: flex; flex-direction: column; min-width: 0; }
.p2-row .nm b { font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.p2-row .nm small { font-size: 17px; color: var(--ink-2); line-height: 1.25; }
.p2-row .alike { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 8px; background: #FDF3C4; color: #5C4700; font-size: 15px; font-weight: 600; }
.p2-row .alike.warn { background: #FDECEA; color: #8F2A1F; }
.p2-row .alike.look { background: #E9EFFA; color: #22407A; }
.p2-row .shorttxt:empty { display: none; }
.p2-row .shorttxt { font-size: 15px; font-weight: 600; }
.p2-row .short-link { visibility: hidden; min-height: 48px; min-width: 48px;   /* E26: 48 px on the picker screen */ padding: 0 8px; border: 0; background: none; color: #8A4A1E; font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; }
.p2-row.cur .short-link { visibility: visible; }
.p2-row .tick { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #B8C4D2; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.p2-row .tick .ic { display: none; width: 20px; height: 20px; color: #fff; }
.p2-row .tick .bang { display: none; color: #fff; font-weight: 800; font-size: 18px; }
.p2-row.cur { border: 2px solid var(--rt); padding: 5px 11px 5px 5px; }
.p2-row.st-picked { background: #E6F5EC; border-color: #BFE3CD; }
.p2-row.st-picked .q, .p2-row.st-picked .nm { opacity: 0.72; color: #1F6A43; }
.p2-row.st-picked .tick { background: #2E9A62; border-color: #2E9A62; }
.p2-row.st-picked .tick .ic { display: block; }
.p2-row.st-short { background: #FDEEE3; border-color: #F3C9A8; color: #8A4A1E; }
.p2-row.st-short .nm small { color: #8A4A1E; }
.p2-row.st-short .tick { background: #B8581F; border-color: #B8581F; }
.p2-row.st-short .tick .bang { display: inline; }
.p2-row.carry { border-style: dashed; }
.p2-row:focus-visible { outline: 3px solid var(--bca-cyan); outline-offset: 2px; }
.p2-hint { text-align: center; color: var(--ink-2); font-size: 15px; margin: 16px 0; }
.p2-banner { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-size: 15px; line-height: 1.35; }
.p2-banner.warn { background: #FDEEE3; color: #8A4A1E; }
.p2-banner.info { background: #E9EFFA; color: #22407A; box-shadow: inset 4px 0 0 #3563B8; padding-left: 14px; }
.p2-line { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-size: 15px; }
.p2-line.ok { background: #E6F5EC; color: #1F6A43; }
/* sheets: the short sheet, the count sheet, a new order after the route left */
.p2-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-width: 560px; margin: 0 auto; background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(15, 28, 46, 0.18); padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 90dvh; overflow: auto; box-sizing: border-box; }
.p2-sheet[hidden] { display: none; }
.p2-sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: #C9D3DE; margin: 0 auto 10px; }
.p2-sheet h2 { margin: 0; font-size: 19px; }
.p2-sheet .p2-need { margin: 2px 0 12px; color: var(--ink-2); font-size: 15px; }
.p2-sheet .opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0 0 12px; }
.p2-sheet .opt { min-height: 52px; border-radius: 10px; border: 1px solid #C9D3DE; background: #fff; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); }
.p2-sheet .opt.on { border: 2px solid #B8581F; background: #FDEEE3; color: #8A4A1E; }
.p2-sheet .field { width: 100%; min-height: 48px; font-size: 16px; box-sizing: border-box; }
.p2-sheet .tell { color: var(--ink-2); font-size: 15px; margin: 10px 0 12px; }
body.p2-sheet-open .p2 > :not(.p2-sheet) { filter: saturate(0.6) opacity(0.55); }
.p2-sheet .counter { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 4px 0 16px; }
.p2-sheet .counter .step { width: 64px; height: 52px; border-radius: 10px; border: 1px solid #C9D3DE; background: #fff; font-size: 26px; }
.p2-sheet .counter span { display: flex; flex-direction: column; align-items: center; }
.p2-sheet .counter b { font-size: 40px; line-height: 1; }
.p2-sheet .counter small { color: var(--ink-2); font-size: 15px; }
.p2-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid #C9D3DE; background: #fff; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.p2-opt b { font-size: 17px; }
.p2-opt small { font-size: 15px; color: var(--ink-2); }
.p2-opt.rec { border: 2px solid #2E9A62; background: #E6F5EC; color: #1F6A43; }
.p2-opt.rec small { color: #1F6A43; }
.opt-form { margin: 0; }
/* screens 8, 9, 16: piles */
.p2-piles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p2-pile { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 12px; background: var(--rt-tint); color: var(--rt-ink); border: 1px solid transparent; box-sizing: border-box; }
.p2-pile .c { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p2-pile .c b { font-size: 17px; overflow-wrap: anywhere; }
.p2-pile .c small { font-size: 15px; }
.p2-pile .tag { font-size: 15px; font-weight: 600; white-space: nowrap; }
.p2-pile.done { background: var(--rt-deliv); color: var(--rt-on); }
.p2-pile.next { border: 2px solid var(--rt); background: #fff; }
.p2-pile .pbtns { flex: none; }
.p2-piles.solid .p2-pile { background: var(--rt-deliv); color: var(--rt-on); }
.p2-piles .n { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 4px; border-radius: 50%; background: #fff; color: var(--rt-ink); font-weight: 800; flex: none; box-sizing: border-box; }
.p2-piles .cs { font-weight: 700; white-space: nowrap; }
.p2-piles.load .p2-pile { background: #fff; border: 1px solid #DCE3EA; color: var(--ink); min-height: 56px; cursor: pointer; touch-action: manipulation; }
.p2-piles.load .n { border-radius: 8px; background: var(--rt-deliv); color: var(--rt-on); }
.p2-piles.load .cs b { font-size: 22px; }
.p2-piles.load .cs small { margin-left: 3px; color: var(--ink-2); }
.p2-piles.load .p2-pile.new { border: 2px dashed #3563B8; background: #E9EFFA; color: #22407A; cursor: default; }
.p2-piles.load .p2-pile.new .n { background: #3563B8; color: #fff; }
.p2-piles .look { color: #22407A; }
.p2-card { margin: 16px 0; padding: 12px 14px; border: 1px solid #DCE3EA; border-radius: 12px; }
.p2-card h2 { margin: 0 0 8px; font-size: 17px; }
.p2-helper { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-height: 40px; font-size: 17px; }
/* Release F (docs/E21-ACCURACY.md): the pile check at the truck and the size check at the shelf. 48 px targets, 17 px
   text, 20 px bold quantities; the lines scroll inside the sheet so the count and Pile right stay within one thumb. */
.p2-piles.load .p2-pile.checked { background: #E6F5EC; border-color: #BFE3CD; color: #1F6A43; }
.p2-piles.load .p2-pile .state { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; }
.p2-piles.load .p2-pile .state .ic { width: 18px; height: 18px; }
.p2-check-lines { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; max-height: 30dvh; overflow: auto; }
.p2-check-lines .ln { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 6px 10px; border-radius: 10px; border: 1px solid #DCE3EA; background: #fff; font: inherit; text-align: left; color: var(--ink); touch-action: manipulation; box-sizing: border-box; }
.p2-check-lines .ln .q { font-size: 20px; font-weight: 700; }
.p2-check-lines .ln .nm { display: flex; flex-direction: column; min-width: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.p2-check-lines .ln .nm small { font-size: 17px; font-weight: 600; }
.p2-check-lines .ln .sz { color: #5C4700; }
.p2-check-lines .ln .lk { color: #22407A; }
.p2-check-lines .ln .wr { visibility: hidden; padding: 2px 8px; border-radius: 8px; background: #8F2A1F; color: #fff; font-size: 17px; font-weight: 700; }
.p2-check-lines .ln[aria-pressed=true] { border: 2px solid #8F2A1F; background: #FDECEA; color: #8F2A1F; }
.p2-check-lines .ln[aria-pressed=true] .wr { visibility: visible; }
.p2-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin: 0 0 8px; font-size: 17px; }
.p2-count-n { min-width: 72px; text-align: right; font-size: 34px; font-weight: 800; line-height: 1; }
.p2-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.p2-keys button { min-height: 52px; border-radius: 10px; border: 1px solid #C9D3DE; background: #fff; font: inherit; font-size: 22px; font-weight: 700; color: var(--ink); touch-action: manipulation; }
.p2-check .counter { margin: 0 0 10px; }
.p2-check .p2-banner { font-size: 17px; }
.p2-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 12px; }
.p2-sizes button { min-height: 72px; border-radius: 12px; border: 2px solid #C9D3DE; background: #fff; font: inherit; font-size: 22px; font-weight: 800; color: var(--ink); touch-action: manipulation; }
.p2-foot { display: grid; gap: 8px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); margin-top: 12px; }   /* never over the list (E20) */
.p2-foot.two { grid-template-columns: 1fr 1.4fr; }
.p2-foot .proute { justify-content: center; }

/* ---- E21, screens 13 and 14: the driver's route updates itself; a stop with a short --------------------------------- */
.d-added { margin: 0 0 var(--s4); }
.d-overview { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.d-overview li { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 10px; background: var(--zone-cobalt-tint, #E9EFFA); font-size: 17px; font-weight: 600; }
.d-overview li.done { background: #1F7A4C; color: #fff; }
.d-overview li.next { border: 2px solid #2E9A62; background: #E6F5EC; color: #1F6A43; }
.d-overview li.new { border: 2px dashed #3563B8; background: #E9EFFA; color: #22407A; }
.tag-new { display: inline-block; padding: 2px 10px; border-radius: 10px; background: #3563B8; color: #fff; font-size: 13px; font-weight: 700; margin-left: 8px; }
.dstop.is-new { outline: 2px dashed #3563B8; outline-offset: -2px; }
.d-short { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 6px; padding: 10px 12px; border: 1px solid #F3C9A8; border-radius: 10px; background: #FDEEE3; color: #8A4A1E; font-size: 17px; }
.d-short small { font-size: 15px; }
.d-deliver { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: #E6F5EC; color: #1F6A43; box-shadow: inset 4px 0 0 #2E9A62; font-size: 17px; }
.d-deliver small { font-size: 15px; }

/* ---- Follow-up 1: the release button and its sheet fit inside the route card at every width (E20) ------------------- */
.release-menu { max-width: 100%; }
.release-menu > summary.btn { max-width: 100%; white-space: normal; height: auto; min-height: 36px; text-align: left; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
.release-menu > summary.btn span { min-width: 0; overflow-wrap: anywhere; }
.release-menu .pop.release { width: min(300px, calc(100vw - 32px)); max-width: 100%; box-sizing: border-box; }

/* ---- E23: the stop panel shows the delivery; warnings wrap instead of losing their dates --------------------------- */
.delivered-panel { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--rt-tint, #E6F5EC); color: var(--rt-ink, #1F6A43); box-shadow: inset 4px 0 0 var(--rt-deliv, #1F7A4C); }
.delivered-panel.cs-returned { background: #FDECEA; color: #8F2A1F; box-shadow: inset 4px 0 0 #C0392B; }
.delivered-panel p { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.delivered-panel .dp-zoho { margin: 0; font-size: var(--f1, 13px); }
.dp-photos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.dp-photos a { display: block; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 28, 46, 0.12); }
.dp-photos img { width: 72px; height: 72px; object-fit: cover; display: block; }
.stops.rows .stop.row .bdg .chip.prob.wrap, .chip.prob.wrap { white-space: normal; max-width: 100%; height: auto; line-height: 1.25; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ---- E17 route colours: generated by app/deliveries/palette_css.py; do not edit by hand ---- */
:root {
  --zone-cobalt: #3563B8; --zone-cobalt-ink: #22407A; --zone-cobalt-tint: #E9EFFA; --zone-cobalt-deliv: #2F5AA8; --zone-cobalt-on: #FFFFFF;
  --zone-emerald: #2E9A62; --zone-emerald-ink: #1F6A43; --zone-emerald-tint: #E6F5EC; --zone-emerald-deliv: #1F7A4C; --zone-emerald-on: #FFFFFF;
  --zone-sunflower: #E0B429; --zone-sunflower-ink: #735806; --zone-sunflower-tint: #FDF6DC; --zone-sunflower-deliv: #E3B52A; --zone-sunflower-on: #3B2E00;
  --zone-tangerine: #E07B39; --zone-tangerine-ink: #8A4A1E; --zone-tangerine-tint: #FDEEE3; --zone-tangerine-deliv: #B8581F; --zone-tangerine-on: #FFFFFF;
  --zone-violet: #8A5CC2; --zone-violet-ink: #5A3A85; --zone-violet-tint: #F2ECFA; --zone-violet-deliv: #7A4DB5; --zone-violet-on: #FFFFFF;
  --zone-rose: #D35D8A; --zone-rose-ink: #8A3558; --zone-rose-tint: #FBEAF1; --zone-rose-deliv: #B5446F; --zone-rose-on: #FFFFFF;
  --zone-teal: #1E9AA0; --zone-teal-ink: #0E5A60; --zone-teal-tint: #E4F5F6; --zone-teal-deliv: #137077; --zone-teal-on: #FFFFFF;
  --zone-indigo: #5B63D6; --zone-indigo-ink: #2E3486; --zone-indigo-tint: #ECEDFB; --zone-indigo-deliv: #4048B8; --zone-indigo-on: #FFFFFF;
  --zone-olive: #8A9A2C; --zone-olive-ink: #4E5812; --zone-olive-tint: #F2F5E1; --zone-olive-deliv: #5F6E14; --zone-olive-on: #FFFFFF;
  --zone-slate: #5F7488; --zone-slate-ink: #34495C; --zone-slate-tint: #EDF1F5; --zone-slate-deliv: #4A5E72; --zone-slate-on: #FFFFFF;
  --zone-blue: #167DB2; --zone-blue-ink: #0F4F72; --zone-blue-tint: #E6F1F8; --zone-blue-deliv: #136A98; --zone-blue-on: #FFFFFF;
  --zone-deep: #00569C; --zone-deep-ink: #00467F; --zone-deep-tint: #E6EEF6; --zone-deep-deliv: #00569C; --zone-deep-on: #FFFFFF;
  --zone-cyan: #28AEE3; --zone-cyan-ink: #0B5A73; --zone-cyan-tint: #E5F5FC; --zone-cyan-deliv: #0B6E8F; --zone-cyan-on: #FFFFFF;
  --zone-green: #3AAA35; --zone-green-ink: #1D6A1B; --zone-green-tint: #E9F6E8; --zone-green-deliv: #237A20; --zone-green-on: #FFFFFF;
  --zone-lime: #90CF44; --zone-lime-ink: #396F0E; --zone-lime-tint: #F1F9E6; --zone-lime-deliv: #4C7D12; --zone-lime-on: #FFFFFF;
  --zone-sky: #14B5F5; --zone-sky-ink: #0A5A78; --zone-sky-tint: #E3F6FE; --zone-sky-deliv: #0B6F94; --zone-sky-on: #FFFFFF;
  --zone-navy: #0F2B46; --zone-navy-ink: #0F2B46; --zone-navy-tint: #E7EBF0; --zone-navy-deliv: #0F2B46; --zone-navy-on: #FFFFFF;
  --zone-amber: #D97706; --zone-amber-ink: #92400E; --zone-amber-tint: #FDF1E1; --zone-amber-deliv: #B45309; --zone-amber-on: #FFFFFF;
  --zone-unknown: #B42318; --zone-unknown-ink: #3A4A5C; --zone-unknown-tint: #F4F6F9; --zone-unknown-deliv: #5F6B7A; --zone-unknown-on: #FFFFFF;
  --zone-pickup: #0B2545; --zone-pickup-ink: #0B2545; --zone-pickup-tint: #E8ECF2; --zone-pickup-deliv: #0B2545; --zone-pickup-on: #FFFFFF;
}
.z-cobalt { --rt: var(--zone-cobalt); --rt-ink: var(--zone-cobalt-ink); --rt-tint: var(--zone-cobalt-tint); --rt-deliv: var(--zone-cobalt-deliv); --rt-on: var(--zone-cobalt-on); }
.z-emerald { --rt: var(--zone-emerald); --rt-ink: var(--zone-emerald-ink); --rt-tint: var(--zone-emerald-tint); --rt-deliv: var(--zone-emerald-deliv); --rt-on: var(--zone-emerald-on); }
.z-sunflower { --rt: var(--zone-sunflower); --rt-ink: var(--zone-sunflower-ink); --rt-tint: var(--zone-sunflower-tint); --rt-deliv: var(--zone-sunflower-deliv); --rt-on: var(--zone-sunflower-on); }
.z-tangerine { --rt: var(--zone-tangerine); --rt-ink: var(--zone-tangerine-ink); --rt-tint: var(--zone-tangerine-tint); --rt-deliv: var(--zone-tangerine-deliv); --rt-on: var(--zone-tangerine-on); }
.z-violet { --rt: var(--zone-violet); --rt-ink: var(--zone-violet-ink); --rt-tint: var(--zone-violet-tint); --rt-deliv: var(--zone-violet-deliv); --rt-on: var(--zone-violet-on); }
.z-rose { --rt: var(--zone-rose); --rt-ink: var(--zone-rose-ink); --rt-tint: var(--zone-rose-tint); --rt-deliv: var(--zone-rose-deliv); --rt-on: var(--zone-rose-on); }
.z-teal { --rt: var(--zone-teal); --rt-ink: var(--zone-teal-ink); --rt-tint: var(--zone-teal-tint); --rt-deliv: var(--zone-teal-deliv); --rt-on: var(--zone-teal-on); }
.z-indigo { --rt: var(--zone-indigo); --rt-ink: var(--zone-indigo-ink); --rt-tint: var(--zone-indigo-tint); --rt-deliv: var(--zone-indigo-deliv); --rt-on: var(--zone-indigo-on); }
.z-olive { --rt: var(--zone-olive); --rt-ink: var(--zone-olive-ink); --rt-tint: var(--zone-olive-tint); --rt-deliv: var(--zone-olive-deliv); --rt-on: var(--zone-olive-on); }
.z-slate { --rt: var(--zone-slate); --rt-ink: var(--zone-slate-ink); --rt-tint: var(--zone-slate-tint); --rt-deliv: var(--zone-slate-deliv); --rt-on: var(--zone-slate-on); }
.z-blue { --rt: var(--zone-blue); --rt-ink: var(--zone-blue-ink); --rt-tint: var(--zone-blue-tint); --rt-deliv: var(--zone-blue-deliv); --rt-on: var(--zone-blue-on); }
.z-deep { --rt: var(--zone-deep); --rt-ink: var(--zone-deep-ink); --rt-tint: var(--zone-deep-tint); --rt-deliv: var(--zone-deep-deliv); --rt-on: var(--zone-deep-on); }
.z-cyan { --rt: var(--zone-cyan); --rt-ink: var(--zone-cyan-ink); --rt-tint: var(--zone-cyan-tint); --rt-deliv: var(--zone-cyan-deliv); --rt-on: var(--zone-cyan-on); }
.z-green { --rt: var(--zone-green); --rt-ink: var(--zone-green-ink); --rt-tint: var(--zone-green-tint); --rt-deliv: var(--zone-green-deliv); --rt-on: var(--zone-green-on); }
.z-lime { --rt: var(--zone-lime); --rt-ink: var(--zone-lime-ink); --rt-tint: var(--zone-lime-tint); --rt-deliv: var(--zone-lime-deliv); --rt-on: var(--zone-lime-on); }
.z-sky { --rt: var(--zone-sky); --rt-ink: var(--zone-sky-ink); --rt-tint: var(--zone-sky-tint); --rt-deliv: var(--zone-sky-deliv); --rt-on: var(--zone-sky-on); }
.z-navy { --rt: var(--zone-navy); --rt-ink: var(--zone-navy-ink); --rt-tint: var(--zone-navy-tint); --rt-deliv: var(--zone-navy-deliv); --rt-on: var(--zone-navy-on); }
.z-amber { --rt: var(--zone-amber); --rt-ink: var(--zone-amber-ink); --rt-tint: var(--zone-amber-tint); --rt-deliv: var(--zone-amber-deliv); --rt-on: var(--zone-amber-on); }
.z-unknown { --rt: var(--zone-unknown); --rt-ink: var(--zone-unknown-ink); --rt-tint: var(--zone-unknown-tint); --rt-deliv: var(--zone-unknown-deliv); --rt-on: var(--zone-unknown-on); }
.z-pickup { --rt: var(--zone-pickup); --rt-ink: var(--zone-pickup-ink); --rt-tint: var(--zone-pickup-tint); --rt-deliv: var(--zone-pickup-deliv); --rt-on: var(--zone-pickup-on); }
/* ---- end E17 route colours ---- */

/* Batch E, E25: the phone's sync status (offline, still sending, signed out): below the top bar, never over content */
.sync-banner { margin: 0 0 var(--s4); padding: 10px 12px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; line-height: 1.35; }
.sync-banner.warn { background: var(--chip-warning-bg); color: var(--chip-warning-fg); }
.sync-banner.bad { background: var(--chip-danger-bg); color: var(--chip-danger-fg); }
.sync-banner a { color: inherit; text-decoration: underline; font-weight: 700; }
.sync-banner[hidden] { display: none; }

/* Batch E gate (the phone matrix): later Batch E rules for narrow desktop lanes (E19: 32 px), the release button
   (Follow-up 1: 36 px) and the driver's hints (E12: 13 px) out-ranked the phone rules. On phones: 44 px targets and
   17 px working text again, last in the file so nothing later undoes it. */
@media (max-width: 1023.98px) {
  .owner details.owner-menu summary, .owner .re, .release-menu > summary, .release-menu > summary.btn { min-height: 44px; }
  .mark .mark-acts .tap, .mark .photo-step .tap { min-height: 44px; }
  .dstop .open-hint, .dstop .tag-next { font-size: 17px; }
}
/* Batch E gate (width sweep, 320 px with text spacing): a problem chip on the board wraps inside the page instead of
   pushing it 3 px wide */
.prob { max-width: 100%; flex-wrap: wrap; white-space: normal; border-radius: 16px; }

/* ---- E34: the day strip and the past days ------------------------------------------------------------------------
   The strip scrolls inside itself (never the page): arrow buttons from 640 px up, a swipe below. Minimum width: one
   tab (120 px) between the two arrows; under 640 px the arrows go and the strip takes the full width. Past tabs are
   lighter (no fill, a dashed foot, smaller result line) and the open day keeps the white tab with the deep bar. */
.daytabs .dts { display: flex; gap: var(--s1); align-items: flex-end; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.daytabs .dts-arrow { flex: none; align-self: stretch; width: 40px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--card-border); border-radius: var(--r) var(--r) 0 0; background: var(--surface); color: var(--ink); cursor: pointer; }
.daytabs .dts-arrow:hover:not(:disabled) { background: var(--chip-neutral-bg); }
.daytabs .dts-arrow:disabled { color: var(--ink-2); background: transparent; cursor: default; }
.daytabs .dts-arrow .ic { width: 20px; height: 20px; }
@media (max-width: 639.98px) { .daytabs .dts-arrow { display: none; } }
.daytab.past { background: transparent; box-shadow: inset 0 -2px 0 var(--card-border); }
.daytab.past .n { font-size: var(--f2); font-weight: 500; color: var(--ink-2); flex-wrap: nowrap; white-space: nowrap; }
.daytab.past .n .pill.warn { background: var(--chip-warning-bg); color: var(--chip-warning-fg); border: 1px solid var(--chip-warning-bd); gap: 3px; }
.daytab.past .n .pill.warn .ic { width: 12px; height: 12px; }
.daytab.past.on { box-shadow: inset 0 3px 0 var(--ink-2); background: var(--surface); }
.daytab.past.on .n { color: var(--ink); }
.past-page .board-head .past-tag { align-self: center; }
.past-page .past-issues { display: inline-flex; align-items: center; gap: 4px; color: var(--chip-warning-fg); font-weight: 600; }
.past-page .past-issues .ic { width: 14px; height: 14px; }
.lane-h .past-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stops.rows .stop.row .badge.missed-chip { background: #FFFFFF; color: #8A2F24; border-color: #F6C9C3; font-weight: 700; }
.stops.rows .stop.row.cs-missed { border-left-style: dashed; }
.stops.rows .stop.row .chip.carried-from, .stops.rows .stop.row .chip.carried-to { background: #FFFFFF; color: #5C4A0E; border: 1px solid #E8D9A6; white-space: normal; }
.stops.rows .stop.row .chip.carried-to a { color: inherit; text-decoration: underline; }
.past-card .past-extra { display: grid; gap: 6px; margin-top: var(--s2); }
.past-card .past-extra .flag { display: flex; align-items: center; gap: 6px; margin: 0; }
.past-card .correct-menu > summary { min-height: 44px; }
.past-card form.correct { width: min(340px, calc(100vw - 32px)); }
/* in the desktop stop panel the correction opens inside the panel, as Move stop does, never over the dimmed board;
   below 1024 px the phone rule makes it a bottom sheet */
@media (min-width: 1024px) {
  .drawer-b details.correct-menu[data-inline] > form.pop.correct { position: static; width: auto; box-shadow: none; border: 1px solid var(--card-border); margin-top: 8px; }
}

/* ---- Release F.1: the Call Queue rules (Part 2) and Close this account (Part 3). BCA blue for selection and focus; no
   orange outside route colours; descriptions line up with their title; the phone sheet keeps its buttons at the bottom. ---- */
.qrow.qk-collect { border-left-color: var(--k-collect); background: #FFFAFA; }
.qs-next > .q-h, .qs-later > .q-h { color: var(--k-due-fg); border-left: 4px solid currentColor; padding-left: 8px; }
.qrow .q-hist { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.qrow .q-hist-tag { display: inline-block; border: 1px solid var(--hair); border-radius: 6px; padding: 0 6px; margin-right: 6px; font-size: 12px; }
.wb-close { background: none; border: 0; color: #0B4F84; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 6px; cursor: pointer; }
.wb-more { position: relative; display: none; }
.wb-more > summary { list-style: none; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 10px; font-weight: 600; cursor: pointer; }
.wb-more > summary::-webkit-details-marker { display: none; }
.wb-more .pop { position: absolute; right: 0; top: 48px; background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; box-shadow: 0 6px 20px rgba(15,43,70,.18); min-width: 220px; z-index: 5; padding: 4px; }
.wb-more .pop button, .wb-more .pop a { display: flex; align-items: center; width: 100%; text-align: left; min-height: 48px; background: none; border: 0; font: inherit; padding: 0 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
@media (max-width: 760px) { .pcard .wb-close { display: none; } .pcard .wb-more { display: inline-block; } }
.sheet-modal.closeacct .sheet-box { padding: 0; display: flex; flex-direction: column; max-height: calc(100dvh - var(--top-total, 56px) - 8px); }
.closeacct .cs-body { padding: 16px 16px 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; flex: 1 1 auto; }
.closeacct .cs-foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--surface); flex: none; }
.closeacct h3 { margin: 0 0 4px; font-size: 18px; }
.closeacct .cs-lead { color: var(--ink-2); margin: 0 0 12px; font-size: 14px; }
.closeacct .copt { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: start; border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; background: var(--surface); cursor: pointer; }
.closeacct .copt .cop-h { display: contents; cursor: pointer; }
.closeacct .copt .cop-h > input { width: 20px; height: 20px; margin: 2px 0 0; grid-column: 1; grid-row: 1; }
.closeacct .copt .t { grid-column: 2; grid-row: 1; }
.closeacct .copt .t { font-weight: 700; }
.closeacct .copt .d, .closeacct .copt .more { grid-column: 2; }
.closeacct .copt .d { color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.closeacct .copt .more { margin-top: 10px; }
.closeacct .copt .more[hidden] { display: none; }
.closeacct .copt:has(> .cop-h > input:checked) { border-color: #167DB2; background: #EEF6FC; box-shadow: 0 0 0 1px #167DB2 inset; }
.closeacct .copt.off { opacity: .55; cursor: not-allowed; }
.closeacct .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.closeacct .chips label { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid #9FB3C8; border-radius: 22px; background: var(--surface); font-weight: 600; cursor: pointer; }
.closeacct .chips label:has(input:checked) { background: #0B4F84; border-color: #0B4F84; color: #fff; }
.closeacct .chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.closeacct .chips label:has(input:focus-visible) { outline: 2px solid #00569C; outline-offset: 2px; }
.closeacct .lbl { display: block; font-size: 13px; color: var(--ink-2); margin: 8px 0 2px; font-weight: 600; }
.closeacct .req { color: #0B4F84; font-weight: 700; font-size: 12px; margin-left: 4px; }
.closeacct .opt { color: var(--ink-3); font-weight: 400; font-size: 12px; margin-left: 4px; }
.closeacct .field { width: 100%; min-height: 44px; font-size: 16px; box-sizing: border-box; }
.closeacct textarea.field { min-height: 72px; padding: 8px 10px; font-family: inherit; resize: vertical; }
.closeacct .cs-count { font-size: 12px; color: var(--ink-3); text-align: right; margin-top: 2px; }
.closeacct .cs-count.ok { color: #1E6B34; }
.closeacct .cs-hint { background: #F4F7FA; border-radius: 8px; padding: 8px 10px; color: var(--ink-2); font-size: 14px; margin: 0 0 10px; }
.closeacct .cs-hint[hidden] { display: none; }
.closeacct .cs-callfirst { border: 1px solid #B9D3EA; background: #F5F9FD; border-radius: 10px; padding: 12px; margin: 0 0 12px; }
.closeacct .cs-callfirst p { margin: 0 0 10px; }
.closeacct .cs-callfirst .btn { min-height: 48px; }
.closeacct .cs-warn { background: var(--k-collect-bg); border: 1px solid var(--k-collect-bd); color: var(--k-collect-fg); border-radius: 8px; padding: 8px 10px; font-size: 14px; margin: 8px 0 0; }
.closeacct .row { display: flex; gap: 8px; justify-content: flex-end; }
.closeacct .row .tap { min-height: 48px; padding: 0 18px; }
.closeacct .row .tap.primary[disabled] { background: #C9D6E3; border-color: #C9D6E3; color: #374151; }
@media (max-width: 760px) {
  .sheet-modal.closeacct .sheet-box { border-radius: 16px 16px 0 0; height: min(88dvh, calc(100dvh - var(--top-total, 56px) - 8px)); }
  .closeacct .row .tap { flex: 1 1 0; }
  .closeacct .chips label, .closeacct .field { min-height: 48px; }
}
@media (min-width: 761px) { .sheet-modal.closeacct { align-items: center; padding: calc(var(--top-total, 56px) + 12px) 16px 12px; box-sizing: border-box; } .sheet-modal.closeacct .sheet-box { max-width: 560px; border-radius: 12px; max-height: 100%; } }
.closed-accts .cl-words { display: block; font-size: 14px; color: var(--ink); margin-top: 2px; }
.closed-accts .bb > summary { list-style: none; }
.closed-accts .bb > summary::-webkit-details-marker { display: none; }
.closed-accts .bb .pop { position: absolute; right: 0; background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; box-shadow: 0 6px 20px rgba(15,43,70,.18); padding: 12px; width: min(340px, calc(100vw - 32px)); z-index: 5; }
.closed-accts .bb { position: relative; }
.toast[data-closed] .secs { margin-left: auto; font-size: 13px; color: var(--ink-2); }

/* ---- Release G: delivery sync on the phone. "Waiting to send" (the top bar's pill opens it); the photo step at 48 px
   (corner cases 35, 39: CLAUDE.md working hands); last in the file so nothing earlier undoes it. ---- */
[data-pending] { cursor: pointer; }
.sheet-modal.waitlist .sheet-box { max-height: calc(100dvh - var(--top-total, 56px) - 8px); overflow-y: auto; overscroll-behavior: contain; }
.waitlist h3 { margin: 0 0 8px; font-size: 18px; }
.waitlist .wl-h { margin: 12px 0 6px; font-size: 14px; color: var(--ink-2); }
.waitlist .wl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; border: 1px solid var(--hair); border-left: 4px solid var(--k-due, #64748B); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; }
.waitlist .wl-row.bad { border-left-color: var(--k-collect, #B91C1C); }
.waitlist .wl-row.ok { border-left-color: var(--k-new, #15803D); }
.waitlist .wl-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.waitlist .wl-main b { font-size: 17px; overflow-wrap: anywhere; }
.waitlist .wl-state { font-size: 15px; color: var(--ink-2); }
.waitlist .wl-row.bad .wl-state { color: var(--k-collect-fg, #9B1C1C); }
.waitlist .wl-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.waitlist .tap { min-height: 48px; padding: 0 16px; }
.waitlist .wl-empty { color: var(--ink-2); font-size: 17px; }
.waitlist .row { display: flex; justify-content: flex-end; margin-top: 8px; }
@media (max-width: 1023.98px) {
  .mark .mark-acts .tap, .mark .photo-step .tap { min-height: 48px; }
  .mark .photo-step .thumb .rm { width: 48px; height: 48px; }
  .mark .photo-step .thumb { width: 96px; height: 96px; }
}

/* ---- Release G: the new driver's route (warehouse/g_my_route.html): BCA colours, the next stop large, its actions in the
   bottom half, every route change shown, Undo without a pop-up. ---- */
.g-route .g-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.g-route .g-head h1 { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 22px; color: var(--bca-navy, #0F2B46); }
.g-route .g-cap { margin: 14px 0 6px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.g-route .g-changes { border: 2px solid #167DB2; background: #EEF6FC; border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.g-route .g-changes h2 { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-size: 18px; color: #0B4F84; }
.g-route .g-changes ul { list-style: none; margin: 0 0 10px; padding: 0; }
.g-route .g-changes li { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid #B9D3EA; font-size: 17px; }
.g-route .g-changes li:first-child { border-top: 0; }
.g-route .g-changes li span { color: var(--ink-2); font-size: 15px; }
.g-route .gstop.current { border-width: 2px; box-shadow: 0 2px 10px rgba(15, 43, 70, .12); }
.g-route .gstop.current .d-name b { font-size: 22px; }
.g-route .gstop .d-meta, .g-route .gstop .d-addr { font-size: 17px; }
.g-route .g-actbar { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
  background: var(--surface); padding: 8px; border-radius: 12px; box-shadow: 0 -2px 12px rgba(15, 43, 70, .12); }
.g-route .g-actbar .tap { min-height: 56px; font-size: 18px; justify-content: center; }
.g-route .g-undo { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 30; display: flex; gap: 10px; align-items: center;
  background: #0F2B46; color: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 20px rgba(15, 43, 70, .3); max-width: calc(100vw - 32px); font-size: 17px; }
.g-route .g-undo[hidden] { display: none; }
.g-route .g-undo .tap { min-height: 48px; background: #28AEE3; border-color: #28AEE3; color: #0F2B46; font-weight: 700; }
.g-route .g-undo .secs { font-size: 14px; opacity: .8; }

/* Release G: the board's "Needs attention" panel (exceptions first; behind layout_g_*) */
.g-ex{padding:var(--s4);margin:0 0 var(--s4);border-left:4px solid #B45309}
.g-ex h2{display:flex;align-items:center;gap:var(--s2);font-size:17px;margin:0 0 var(--s3)}
.g-ex ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.g-ex li{display:flex;flex-direction:column;gap:2px;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:8px;min-height:48px;overflow-wrap:anywhere}
.g-ex li[data-drawer-open]{cursor:pointer}
.g-ex li span{font-size:13px}
.g-ex .g-ex-not_in_zoho,.g-ex .g-ex-refused_tap{border-left:4px solid #B91C1C}
.g-ex .g-ex-gone,.g-ex .g-ex-changed,.g-ex .g-ex-short,.g-ex .g-ex-old_partial{border-left:4px solid #B45309}
.g-ex .g-ex-no_driver{border-left:4px solid #1D4ED8}

/* Release G: the English / Español switch on the new layouts */
.g-lang{display:inline-flex;margin-left:auto}
.g-lang .tap{min-height:48px;min-width:48px;padding:0 14px}

/* Release G: "Update ready, tap to refresh" (above the bottom safe area and any sticky footer) */
.update-ready{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;min-height:56px;border:0;border-radius:12px;
  background:var(--bca-blue-ink,#136A98);color:#fff;font:600 17px/1.3 inherit;box-shadow:0 6px 24px rgba(15,28,46,.25);cursor:pointer}
@media (min-width:768px){.update-ready{left:auto;right:24px;width:360px}}

/* Release G (visual review): Navigate and Call are a footer bar for the stop at the door, fixed above the bottom safe
   area, with the page padded so nothing scrolls under it (a bar sticky inside the card covered the card's own lines). */
.g-route .g-actbar { position: fixed; left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); margin: 0; z-index: 20;
  background: var(--surface, #fff); padding: 8px; border-radius: 14px; box-shadow: 0 6px 24px rgba(15, 28, 46, .18); }
@media (min-width: 768px) { .g-route .g-actbar { left: auto; right: 24px; width: 420px; } }
main.g-route { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* Release G: "Changed since picked" on the pile screen: 17 px and 7:1 on a working screen */
.p2-banner[data-pile-changed] { font-size: 17px; color: #5E2E0C; box-shadow: inset 4px 0 0 #B45309; padding-left: 14px; }
/* Release G: "Go back" on "pile ready": reopen a pile that finished by itself (48 px, one thumb) */
.p2-line .p2-back { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; margin-left: 8px; font-weight: 700; color: #0B4F84; text-decoration: underline; text-underline-offset: 3px; }

/* Dave, 2026-10-03: the Delivered slide's label is never cut off (it read "Delivere" at 360 px). The text wraps inside the
   slide with room on the right, at most two lines at 17 px in the 56 px slide; below 400 px the COD amount leaves the
   slide (the COD box right above it shows the amount and must be answered first). */
.mark .slide-label { padding-right: 14px; line-height: 1.15; }
.mark .slide-label .sl-t { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 399.98px) { .mark .slide-label .sl-cod { display: none; } }

/* The version label (Dave, Oct 4): small and muted, just left of "Live · synced"; on phones (no room in the header) at the
   bottom of the menu instead. 12 px, the muted ink (4.5:1 on white). */
.rel-label { font-size: 12px; color: var(--ink-2); white-space: nowrap; margin-left: auto; margin-right: 12px; cursor: default; }
.brand-top .rel-label + .sync { margin-left: 0; }
.rel-label-menu { display: none; font-size: 12px; color: var(--ink-2); margin: 8px 16px; white-space: nowrap; }
@media (max-width: 767.98px) {
  .brand-top .rel-label { display: none; }
  .rel-label-menu { display: block; }
}

/* Prod 2.1: Settings. A toggle switch for on/off (48 px tap target), one number field per list step. */
.toggle-switch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; cursor: pointer; }
.toggle-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-switch .ts-unsaved { font-size: 13px; font-weight: 600; color: var(--tint-amber-fg); background: var(--tint-amber-bg); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }   /* Prod 2.4: until saved; one line, under the switch when there is no room */
.toggle-switch .ts-unsaved[hidden] { display: none; }
.toggle-switch .ts-track { width: 46px; height: 26px; border-radius: 13px; background: var(--field-border); position: relative; transition: background var(--motion); flex: none; }
.toggle-switch .ts-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left var(--motion); }
.toggle-switch input:checked + .ts-track { background: var(--deep); }
.toggle-switch input:checked + .ts-track .ts-knob { left: 23px; }
.toggle-switch input:focus-visible + .ts-track { outline: 3px solid var(--deep); outline-offset: 2px; }
.toggle-switch .ts-lbl { font-size: 14px; color: var(--ink); }
.setting-steps { display: grid; gap: 6px; }
.setting-steps label { display: grid; gap: 2px; }
.setting-steps .field { height: 44px; }

/* Prod 2.1 gate (width sweep, Oct 4): the webhook wording ends with a file path ("docs/ZOHO_WEBHOOKS.md") that cannot
   break, so at 320 px the Safety net card's note ran 18 px past the screen. It and the Webhooks heading may break
   anywhere, and so may any card note (a long word never pushes a card off the screen). */
[data-webhook-words], .kpi > .f1 { min-width: 0; overflow-wrap: anywhere; }

/* Prod 2.3 (PD23-14): "Also deliver <invoice> to <customer> now?" after a delivery: a sheet at the bottom, above the
   phone's safe area; 48 px buttons; it never covers the card the driver is on for long (Not now closes it). */
.also-prompt { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 80; display: grid; gap: 8px;
  max-height: 70dvh; overflow-y: auto; }
.also-row { background: var(--surface); border: 2px solid var(--deep); border-radius: var(--r); box-shadow: 0 8px 24px rgba(15, 28, 46, .25);
  padding: 12px; margin: 0; display: grid; gap: 8px; font-size: 17px; }
.also-q { margin: 0; }
.also-same { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.also-cod { border: 1px solid var(--card-border); border-radius: var(--r); padding: 8px; display: grid; gap: 6px; }
.also-cod input, .also-cod select { min-height: 48px; font-size: 16px; }
.also-opt { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.also-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.also-btns .btn { min-height: 48px; flex: 1 1 140px; justify-content: center; }
.also-err { margin: 0; color: var(--chip-danger-fg); font-weight: 600; }
@media (min-width: 768px) { .also-prompt { left: auto; right: 16px; width: 420px; } }

/* Prod 2.3 (PD23-13): "Same stop as #N" on a card whose customer has another card on the route */
.samestop { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 2px; display: block; }   /* one line of text: "Same stop as #4" */
.samestop a { color: var(--bca-blue-ink); text-decoration: underline; display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; text-align: center; }
.samestop .ic { vertical-align: -3px; margin-right: 4px; }
.samechip { white-space: nowrap; }
.d-inv { display: block; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.tv-inv { font-weight: 600; opacity: .85; }
.p2-same { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); }
/* the COD details appear once Collected or Not collected is chosen (as on the card itself) */
.also-cod .also-yes, .also-cod .also-no { display: none; }
.also-cod:has(input[value="1"]:checked) .also-yes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.also-cod:has(input[value="0"]:checked) .also-no { display: block; width: 100%; }
.also-cod .also-yes select { min-width: 120px; }

/* Prod 2.6 (Dave, Oct 7): Zoho changed the delivery date: the lead's question and the "Moved from" note, under the stop */
.dateq { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--tint-red-fg); border-radius: var(--r); background: var(--tint-red-bg, var(--surface)); }
.dateq .dq-text { margin: 0; display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; color: var(--ink); font-size: var(--f2); line-height: 1.35; }
.dateq .dq-text .ic { color: var(--tint-red-fg); flex: none; margin-top: 2px; }
.dateq .dq-why { color: var(--ink-2); }
.dateq .dq-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dateq .dq-actions .btn { min-height: 44px; }
.datenote { margin: 4px 0 0; display: flex; gap: 6px; align-items: flex-start; font-size: var(--f1); color: var(--ink-2); line-height: 1.35; }
.datenote .ic { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.stops.rows .stop.row .dateq, .stops.rows .stop.row .datenote { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .dateq .dq-actions .btn { min-height: 48px; flex: 1 1 140px; justify-content: center; font-size: 17px; } .dateq .dq-text { font-size: 17px; } }

/* Prod 2.7 (Dave, Oct 7, part C): moving cards between days, extra runs. Targets 48 px on phones (CLAUDE.md §7). */
.move-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.move-tools .pop { width: min(320px, calc(100vw - 32px)); }
.undo-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--card-border); transition: opacity .3s; }
.undo-bar.gone { opacity: 0; }
.move-selected { position: sticky; bottom: 8px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-2, 0 2px 8px rgba(0,0,0,.15)); }
.move-selected[hidden] { display: none; }
.move-selected .field { width: auto; min-width: 0; flex: 1 1 140px; }
.move-sel { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; cursor: pointer; }
.move-sel input { width: 18px; height: 18px; }
.daytab.drop-day { outline: 3px dashed var(--bca-blue); outline-offset: -3px; }
.move-to .move-quick .btn { flex: 1 1 0; }
.move-confirm .confirm-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
/* Prod 2.7 re-check (Dave, Oct 8): 44 px is the floor at every width and for every pointer, not only on touch screens */
[data-extra-run] > summary.btn, [data-move-route] > summary.btn, .move-tools .btn, .move-selected .btn, .move-to .btn, .move-confirm .btn, .undo-bar .btn,
.move-selected .field, .move-to .field, .move-tools .field { min-height: 44px; }
.move-sel { min-width: 44px; min-height: 44px; }
@media (max-width: 1023.98px) {
  .move-sel { min-width: 48px; min-height: 48px; }
  .move-sel input { width: 22px; height: 22px; }
  .move-tools .btn, .move-selected .btn, .move-to .btn, .move-confirm .btn { min-height: 48px; font-size: 17px; }
  .move-selected .field, .move-to .field, .move-tools .field { min-height: 48px; font-size: 17px; }
}

/* Prod 2.6 (Dave, Oct 7): a zone that does not run today but has stops dated today: its own lane, never hidden */
.chip.offsched { background: var(--chip-danger-bg); color: var(--chip-danger-fg); border-color: var(--chip-danger-bd); }

/* Prod 2.6 gate run 2 (the width test at 320 and 390): a long problem chip ("Vasco North doesn't run Wednesday · 2 stops ·
   $1,791 COD") wraps inside the screen instead of pushing the page sideways */
.problems .prob { max-width: 100%; }
.problems .prob .pl, .problems .prob .w { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.problems .prob[data-problem] { border-radius: 14px; }
/* Prod 2.8, phone alerts (Admin > Phone alerts, Sales > Phone alerts, the Team row's topic): every control 44 px tall with
   a mouse too; the topic field takes the row's width and wraps under 640 px; a long topic breaks inside its box */
.pa-page .btn, .pa-page .field, .team .pa-cell .field, .team .pa-cell .btn { min-height: 44px; height: auto; }
.pa-page .pa-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.pa-page .pa-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.pa-page .pa-label { display: grid; gap: 4px; flex: 1 1 260px; min-width: 0; font-weight: 600; }
.pa-page .pa-topic { width: 100%; min-height: 44px; min-width: 0; font-family: var(--mono, ui-monospace, monospace); }
.pa-page .pa-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-page .pa-test { margin: 8px 0 0; }
.pa-page .pa-status { margin: 8px 0 0; overflow-wrap: anywhere; }
.pa-page .pa-topic-show code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: var(--f2); padding: 6px 10px; border-radius: var(--r); background: var(--wash); }
.pa-page .pa-list { display: grid; gap: var(--s3); }
.team .pa-cell .pa-topic { width: 290px; min-height: 44px; font-family: var(--mono, ui-monospace, monospace); }
.team .pa-cell .pa-link { display: inline-flex; margin-top: 4px; }
@media (max-width: 640px) { .pa-page .pa-actions .btn { flex: 1 1 auto; justify-content: center; } }