/* ============================================================
   DSP HIVE — Inkside design system (U1: tokens + shell)
   Loaded AFTER the inline styles; overrides tokens + chrome.
   Authoritative spec: docs/design-system/design_handoff_inkside_system/
   One ink, one gold, four semantic hues. Gold = brand/award ONLY.
   ============================================================ */

/* ---------- tokens (Inkside) ---------- */
:root, :root[data-theme="light"]{
  --bg:#f5f7fa;            /* bg-50 canvas */
  --panel:#ffffff;         /* panel-0 */
  --panel2:#eef2f8;        /* line-100 / inner wells */
  --line:#e2e8f1;          /* line-200 hairline */
  --line-strong:#c9d4e8;
  --text:#111a2c;          /* text-900 */
  --muted:#67788f;         /* text-500 */
  --dim:#93a3bd;           /* text-300 */
  --body2:#33445f;         /* text-700 secondary body */
  --blue:#2b62d9;
  --blue-deep:#2452c4;     /* chip text blue */
  --blue-soft:#e8effc;
  --green:#177550; --teal:#0e7490;
  --amber:#b0620d;
  --red:#cf3b28;
  --gold:#f2b418; --gold-ink:#8a6a10;
  --ink9:#0f1c33; --ink8:#1a2c4d;
  --side-mut:#93a3bd; --side-dim:#5f7191; --side-ok:#4ec98b; --side-badge:#e5533f;
  /* R365: the ink frame's white and its washes, named once (the sidebar is ink in both themes) */
  --side-on:#ffffff; --side-active:rgba(255,255,255,.12); --side-rule:rgba(255,255,255,.08); --side-hover:rgba(255,255,255,.06);
  --ink-field:#182640; --ink-line:#33456a; --ink-text:#edf1f8; --ink-dim:#6c7e9c; --ink-focus:#5c8df0;
  --ink-btn:#2b62d9; --ink-btn-hover:#2452c4; --ink-link:#9dc0ff;
  /* the dimmed page behind a dialog, and behind the guided tour's spotlight */
  --scrim:rgba(10,12,16,.5); --tour-scrim:rgba(9,12,18,.66);
  /* R369 Daily Report timeline: the lighter end of each bar's gradient, the warm red on the ink band, the hero radius (Jose 10-20) */
  --grad-blue-hi:#5fa0ff;--grad-teal-hi:#2fb3c4;--grad-red-hi:#ff8a76;--grad-amber-hi:#efae4e;--grad-green-hi:#46c483;--band-hot:#ff9a85;--radius-hero:22px;
  --fantastic:#2452c4; --great:#177550; --fair:#b0620d; --poor:#cf3b28;
  --radius:12px; --radius-lg:12px; --radius-sm:8px;
  --shadow:0 1px 3px rgba(15,28,51,.06);                 /* raise-1 */
  --shadow-2:0 2px 8px rgba(15,28,51,.07);               /* raise-2 */
  --shadow-float:0 8px 28px rgba(15,28,51,.16);          /* raise-3 */
  --side-w:208px;
  --zebra:#fbfcfe;
  --m-fast:120ms; --m-base:200ms; --m-slow:280ms;
  --ease:cubic-bezier(.2,.7,.3,1);
  /* paper: what a printed sheet uses in either theme (2.61, Codex #44) */
  --print-ink:#000000; --print-paper:#ffffff; --print-mute:#444444; --print-line:#cccccc; --print-band:#f2f2f2;
  /* Names the page used without a definition (2.87.1, site review): a var()
     with no definition and no fallback is invalid, so 29 borders vanished
     (HR, Tasks) and fallbacks painted light-mode hex in dark. Each is an alias
     of a token above, never a new colour; declared once on :root, they follow
     the dark block's values. tests/test_css_tokens.py keeps it that way. */
  --line-200:var(--line); --line-300:var(--line-strong);
  --ink:var(--text); --panel-2:var(--panel2); --card2:var(--panel2);
  --raise-1:var(--shadow); --shadow-1:var(--shadow);
  --purple:var(--teal);
  --green-soft:color-mix(in srgb,var(--green) 12%,transparent); --green-bg:var(--green-soft);
  --amber-soft:color-mix(in srgb,var(--amber) 14%,transparent);
  --red-50:color-mix(in srgb,var(--red) 10%,transparent);
}
:root[data-theme="dark"]{
  /* dark = the same tokens re-valued on the ink family (never inverted
     per-component — Inkside law) */
  --bg:#0b1322;
  --panel:#111c31;
  --panel2:#182640;
  --line:#233350;
  --line-strong:#33456a;
  --text:#edf1f8;
  --muted:#9faec6;
  --dim:#6c7e9c;
  --body2:#c3cede;
  --blue:#5c8df0;
  --blue-deep:#7fa5f2;
  --blue-soft:#1a2c4d;
  --green:#34b27f; --teal:#38a8c4;
  --amber:#dfa43c;
  --red:#e2604f;
  --gold:#f2b418; --gold-ink:#f2b418;
  --ink9:#0f1c33; --ink8:#1a2c4d;
  --side-mut:#93a3bd; --side-dim:#5f7191; --side-ok:#4ec98b; --side-badge:#e5533f;
  --fantastic:#7fa5f2; --great:#34b27f; --fair:#dfa43c; --poor:#e2604f;
  --shadow:0 1px 3px rgba(0,0,0,.35);
  --shadow-2:0 2px 8px rgba(0,0,0,.38);
  --shadow-float:0 8px 28px rgba(0,0,0,.5);
  --zebra:#141f36;--grad-blue-hi:#8fb6ff;--grad-teal-hi:#5fd0de;--grad-red-hi:#ff9d8c;--grad-amber-hi:#f3c470;--grad-green-hi:#5fd39a;
}

/* ---------- base ---------- */
/* The html element MUST carry the theme background too: body alone leaves
   the UA's default white behind it, and fast scrolling / rubber-banding /
   repaint gaps flash that white through — the "white flashes when you
   scroll" Jose kept seeing (2026-08-06). color-scheme keeps the browser's
   own surfaces (scrollbars, form controls) in the theme as well. */
html{
  background:var(--bg);
  /* overscroll-behavior stays DEFAULT: blocking it killed pull-to-refresh
     on mobile Chrome and made the lock screen bounce oddly (2.5.8). The
     white-flash fix is the background above, not the scroll block. */
  color-scheme:light;
}
html[data-theme="dark"]{color-scheme:dark;}
body{
  background:var(--bg); color:var(--text);
  font-variant-numeric: tabular-nums;
  padding-bottom:0;
}
/* min-width:0 — as a grid item, .wrap must SHRINK below content
   min-width; without it one nowrap rail inflates the whole column to
   its max-width and the page scrolls sideways (Trends, 2026-07-21) */
.wrap{max-width:1320px; padding:20px 28px 60px; min-width:0;}
.fbar>*{min-width:0;}
.chart{min-width:0;}
b, strong, .num, .val{font-variant-numeric: tabular-nums;}

/* ---------- desktop shell: sidebar + main ---------- */
@media (min-width: 900px){
  body{display:grid; grid-template-columns:var(--side-w) 1fr; padding-bottom:0;}
  header.top{grid-column:2;}
  .wrap{grid-column:2; width:100%; margin:0 auto;}
  .nav{display:none;}                    /* phone tabs off on desktop */
  #side{display:flex;}
  body{padding-bottom:0 !important;}
}
/* Inkside: the ink sidebar is the brand anchor on every screen (both
   themes — this panel is already ink, so dark re-values nothing here).
   Gold appears ONLY on the mark + the active-nav marker. */
#side{
  display:flex;
  position:sticky; top:0; height:100vh; grid-column:1; grid-row:1 / span 99;
  flex-direction:column;
  background:var(--ink9);
  border-right:none;
  padding:18px 12px 14px;
  z-index:30;
}
#side .brandrow{display:flex; align-items:center; gap:10px; padding:0 8px 18px;}
#side .brandrow .logo{width:30px; height:30px; flex:0 0 auto;}
#side .brandrow .t{font-weight:700; font-size:14px; color:var(--side-on); letter-spacing:-.01em; line-height:1.15;}
#side .brandrow .s{font-size:10px; color:var(--side-dim); letter-spacing:.1em; font-weight:600;}
/* 4.0: SEVEN flat sections — no groups, no chevrons, no scrolling.
   The whole collapse/expand/ghost-scrollbar apparatus is gone because
   the list can no longer outgrow the sidebar. */
#side .navlist{display:flex; flex-direction:column; gap:2px; margin-top:0;
  flex:1 1 auto;}
#side .navitem{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px;
  font-size:13px; font-weight:400; color:var(--side-mut);
  text-decoration:none; cursor:pointer;
  transition:background var(--m-fast) var(--ease), color var(--m-fast) var(--ease);
}
.nav-badge{margin-left:auto;min-width:17px;height:17px;border-radius:99px;
  background:var(--side-badge);color:var(--side-on);font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 6px;line-height:1;}
#side .navitem.on .nav-badge{background:var(--side-badge);}
#side .navitem svg{width:15px; height:15px; stroke-width:2; flex:0 0 auto;}
#side .navitem:hover{background:var(--side-hover); color:var(--side-on);}
#side .navitem.on{background:var(--side-active); color:var(--side-on); font-weight:600;
  box-shadow:inset 3px 0 0 var(--gold);}
#side .sidefoot{margin-top:auto; padding:14px 10px 0; border-top:1px solid var(--side-rule);
  font-size:10.5px; color:var(--side-dim); display:flex; flex-direction:column; gap:5px;}
#side .sidefoot .hrow{display:flex; align-items:center; gap:7px;}
#side .sidefoot .dot{width:8px;height:8px;border-radius:50%;background:var(--side-ok);}
#side .sidefoot .dot.bad{background:var(--side-badge);}
#side .sidefoot .dim{color:var(--side-dim);}

/* ---------- top bar — Inkside: white strip, hairline, r8 controls ---------- */
header.top{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  padding:8px 26px;
  gap:8px;
}
header.top .brand{font-size:14px; font-weight:700;}
/* Mobile brand mark: the sidebar (which carries the glyph on desktop) is
   hidden below 900px, so the top-bar brand shows the Tier Band glyph there.
   .brand is already display:none at >=900px, so this appears on mobile only. */
header.top .brand .brand-glyph{width:22px; height:22px; flex:0 0 auto;
  vertical-align:middle; margin-right:6px;}
@media (min-width:900px){ header.top .brand{display:none;} }
header.top button, header.top .wkbtn{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  box-shadow:none;
  transition:border-color var(--m-fast) var(--ease), background var(--m-fast) var(--ease);
}
header.top button:hover{border-color:var(--line-strong);}
/* Center each glyph inside its 30px square. grid/flex centering leaves these
   inline SVGs ~2.5px left of center (a UA quirk); absolute + margin:auto is
   pixel-exact. Scoped to the top bar so dialog close buttons stay untouched. */
header.top .icon-btn{position:relative;}
header.top .icon-btn svg{width:15px;height:15px;stroke-width:1.75;
  position:absolute;inset:0;margin:auto;}

/* custom week picker */
.wkwrap{position:relative;display:flex;align-items:center;gap:2px;}
.wkbtn{display:flex;align-items:center;gap:9px;font:inherit;font-size:13px;
  font-weight:550;color:var(--text);padding:8px 13px;cursor:pointer;}
.wkbtn svg{width:15px;height:15px;stroke-width:1.75;color:var(--dim);}
.wkbtn .st{font-size:11px;color:var(--dim);font-weight:450;}
/* ◀ ▶ week steppers — quiet ghosts beside the dropdown (4.5.1) */
.wkstep{width:24px;height:30px;border:none;background:transparent;
  color:var(--dim);font-size:16px;cursor:pointer;padding:0;
  border-radius:8px;transition:color 120ms var(--ease),background 120ms var(--ease);
  box-shadow:none;}
.wkstep:hover{color:var(--blue);background:var(--panel2);border:none;}
.wkpanel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-float);min-width:250px;max-height:330px;overflow-y:auto;
  padding:6px;display:none;}
.wkpanel.open{display:block;}
.wkrow{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:8px;
  font-size:13px;cursor:pointer;color:var(--text);}
.wkrow:hover{background:var(--panel2);}
.wkrow.on{background:var(--blue-soft);color:var(--blue);font-weight:600;}
.wkrow .wdot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.wkrow .ws{margin-left:auto;font-size:11px;color:var(--dim);}

/* ---------- phone tabs ---------- */
.nav{border-top:1px solid var(--line);}
.nav a{color:var(--dim); position:relative; padding:5px 14px 3px; gap:3px;}
/* 2.74: eight tabs in the phone's bottom bar (Fleet joined); the side padding gives the room back so all fit at 390px */
@media (max-width:430px){.nav a{padding-left:3px;padding-right:3px}}
.nav a .i{font-size:0;}                 /* kill emoji/unicode glyphs */
.nav a .i svg{width:20px;height:20px;stroke-width:1.75;}
.nav a.on{color:var(--blue);}
.nav a.on::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:28px;height:2.5px;border-radius:2px;background:var(--blue);}
@media (max-width:899px){
  body{padding-bottom:76px;}
  #side{display:none !important;}
}
/* Narrow phones: the topbar must FIT — brand collapses to "SOGO", tighter
   gaps. (Its natural width was 490px on a 390px screen, so every page
   scrolled sideways — caught by ui_smoke check 5.) */
@media (max-width:560px){
  header.top{padding:10px 8px;gap:4px;}
  header.top .brand{flex:0 1 auto;min-width:0;}
  /* "DSP Hive" is short — the full wordmark fits even at 390px */
  /* 4.0: the Amazon Inbox button joined the topbar — buttons slim down
     so prediction (the only tab that also shows the week picker) still
     fits 390px. NOTE .icon-btn has a FIXED width; shrink that, never
     add padding (padding widened it — caught by ui_smoke). */
  header.top .icon-btn{width:30px;height:30px;}
  .secbar{padding:0 12px;}
  .wkstep{display:none;}  /* steppers are a desktop convenience — the
                             dropdown stays; 390px must keep fitting */
  .wkbtn{padding:8px 10px;gap:6px;}
  .wkbtn .st{display:none;}  /* score lives in the dial right below */
  body.tabpred #ribbon{display:none;}  /* redundant next to the dial */
  .att-t td{padding:6px 6px;}
  .att-pill{font-size:10px;padding:2px 7px;margin-right:3px;}
  .attn{overflow-x:auto;}  /* long license pills scroll inside the panel,
                              never widen the page */
}

/* ---------- controls: segmented filters vs chips ---------- */
.fbar .chips2{gap:0; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:2.5px; box-shadow:var(--shadow);}
.fbar .fsep{background:transparent; width:4px;}
.fbar input[type=date], .fbar input[type=search]{border-radius:8px;}

/* status chips stay tinted-pill (read-only) — sharpen edges */
.st-chip{font-weight:600; letter-spacing:.01em;}
.tag-chip{border-radius:6px;}

/* ---------- cards & panels ---------- */
.panel, .card, .dcard, .qcard, .chart, details.x{
  border:1px solid var(--line); box-shadow:var(--shadow); border-radius:var(--radius);
}
.hero{border:1px solid var(--line); box-shadow:var(--shadow-float);
  border-radius:var(--radius-lg);
  background:linear-gradient(170deg, var(--panel), color-mix(in srgb, var(--panel) 92%, var(--blue-soft)));}
.card{transition:transform 120ms var(--ease), box-shadow 120ms var(--ease), border-color 120ms var(--ease);}
.card:hover{border-color:var(--line-strong);}
.dcard[onclick], .card[onclick], tr[onclick]{cursor:pointer;}
.dcard[onclick]:hover{transform:translateY(-1px); box-shadow:var(--shadow-float);}
.catlabel{color:var(--dim); font-size:11.5px; letter-spacing:.07em; margin:22px 2px 10px;
  display:flex; align-items:center; gap:10px;}
.catlabel::after{content:''; flex:1; height:1px; background:var(--line);}

/* tables */
table.t th{font-size:10.5px; letter-spacing:.06em; color:var(--dim); padding:7px 10px;}
table.t td{padding:8.5px 10px;}
/* hover highlight ONLY on clickable rows — on static tables (e.g. the
   permission matrix) rows scrolling under the cursor strobe with
   highlights ("flashes", Jose 2026-07-21) */
table.t tr[onclick]:hover td{background:color-mix(in srgb, var(--panel2) 55%, transparent);}

/* dialogs */
/* Every floating surface carries an OPAQUE themed background. A dialog or
   panel that inherits `transparent` repaints as the UA's white during
   scroll/compositor work — the flashes Jose kept catching in drawers and
   profiles even after the html-background fix (2.5.10). */
dialog{border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-float); background:var(--panel); color:var(--text);}
.drv-head,.drv-body,.bell-panel,.wkpanel,.pal,
/* 2.12: this rule painted the sign-in card WHITE on the ink lock
   screen (var(--panel) is white in light theme) — the ugly white slab
   Jose reported twice. The card is transparent by design; the ink
   screen behind it IS the surface. */
/* Compositor hint: promote the scrolling surfaces so the browser keeps a
   painted layer instead of re-rasterising (where the white came from).
   2026-08-20 — THE REAL FLASH: a GPU-promoted layer with NO background of
   its own is transparent, so while you scroll FAST the compositor shows
   freshly-rasterised tiles as the browser's default canvas (WHITE) before
   the content paints. Jose reproduced it exactly: "scroll down fast" in
   the permissions dialog. Every promoted scroller now owns an opaque
   background, and dialog scrolling no longer chains to the page. */
.drv-body,#app,.tablewrap{will-change:scroll-position;
  transform:translateZ(0);backface-visibility:hidden}
.drv-body{background:var(--panel);overscroll-behavior:contain;}
#app{background:var(--bg);}
.tablewrap{background:var(--panel);}
dialog{background:var(--panel);}
.bell-panel{overscroll-behavior:contain;}
dialog::backdrop{background:var(--scrim); backdrop-filter:blur(3px);}

/* ---------- skeleton loading ---------- */
.skel-wrap{display:flex;flex-direction:column;gap:14px;padding-top:8px;}
/* 2.12: the shimmer was a WHITE gradient sweeping the page on every
   view change — that is the "white flash" Jose kept reporting across
   the whole app. The placeholder is now a quiet breath of the panel
   tone: visible enough to say "loading", never a flash. */
.skel{border-radius:var(--radius); background:var(--panel2); position:relative; overflow:hidden;}
.skel::after{content:'';position:absolute;inset:0;
  background:color-mix(in srgb, var(--panel) 35%, transparent);
  opacity:0; animation:skelpulse 1.6s ease-in-out infinite;}
@keyframes skelpulse{0%,100%{opacity:0;}50%{opacity:.55;}}
@keyframes shimmer{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
.skel.h-hero{height:230px;border-radius:var(--radius-lg);}
.skel.h-row{height:86px;}
.skel.h-cards{height:150px;}
@media (prefers-reduced-motion: reduce){ .skel::after{animation:none;} }

/* empty states */
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:52px 20px;color:var(--dim);text-align:center;}
.empty svg{width:30px;height:30px;stroke-width:1.5;opacity:.6;}
.empty .et{font-size:14px;font-weight:600;color:var(--muted);}
.empty .eh{font-size:12.5px;max-width:340px;}

/* buttons */
button{transition:background 120ms var(--ease), border-color 120ms var(--ease), transform 120ms var(--ease);}
button:active{transform:scale(.98);}
.linkbtn{box-shadow:var(--shadow);}
.linkbtn svg{width:14px;height:14px;stroke-width:1.75;vertical-align:-2px;margin-right:5px;}

.wkbtn span{white-space:nowrap;}
@media (max-width:899px){
  .wkbtn .st{display:none;}
  .wkbtn{padding:7px 10px; font-size:12.5px;}
}

/* score ribbon (header, all tabs) */
#ribbon{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:6px 12px;box-shadow:var(--shadow);white-space:nowrap;}
#ribbon .rb-score{font-size:14px;letter-spacing:-.01em;}
#ribbon .rb-tier{font-size:10.5px;font-weight:650;padding:2px 8px;border-radius:8px;}
@media (max-width:520px){ #ribbon .rb-wk{display:none;} }

/* chart tooltip + draw-in */
#chart-tip{position:fixed;z-index:80;display:none;pointer-events:none;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-float);padding:8px 11px;font-size:12.5px;min-width:110px;}
#chart-tip b{display:block;margin-bottom:4px;font-size:11.5px;color:var(--muted);}
#chart-tip div{display:flex;justify-content:space-between;gap:14px;}
#chart-tip .tt-k{color:var(--dim);}
#chart-tip .tt-v{font-weight:650;font-variant-numeric:tabular-nums;}
.chart polyline[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;
  animation:fddraw 600ms var(--ease) forwards;}
@keyframes fddraw{to{stroke-dashoffset:0;}}
.chart svg rect[rx]{transform-box:fill-box;transform-origin:bottom;
  animation:fdbar 280ms var(--ease) backwards;}
@keyframes fdbar{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@media (prefers-reduced-motion: reduce){
  .chart polyline[pathLength]{animation:none;stroke-dasharray:none;}
  .chart svg rect[rx]{animation:none;}
}

/* tab crossfade */
#app{animation:fdfade 200ms var(--ease);}
@keyframes fdfade{from{opacity:.55;transform:translateY(3px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){ #app{animation:none;} }

/* refresh spinner */
.spin svg{animation:fdspin 1s linear infinite;}
@keyframes fdspin{to{transform:rotate(360deg);}}

/* Roster link chip shown on phone only (Roster tab folds into Team there) */
.roster-link{display:none; text-decoration:none;}
@media (max-width:899px){
  .roster-link{display:inline-flex; align-items:center; gap:6px;
    font-size:12.5px; padding:6px 12px; border-radius:8px;
    background:var(--panel); border:1px solid var(--line); color:var(--muted);}
}

/* ---------- harmony: retint legacy hardcoded components with tokens ---------- */
.cdot{display:inline-block;width:8px;height:8px;border-radius:50%;
  vertical-align:1px;margin-right:6px;}
.fc .fp{background:color-mix(in srgb,var(--fantastic) 13%,transparent);color:var(--fantastic);}
.fc .f{background:color-mix(in srgb,var(--green) 13%,transparent);color:var(--green);}
.fc .b{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);}
/* named zones turned short coordinate labels into real street names
   that overflowed fixed rows at phone width (2026-07-20) — let badges,
   coach rows and event chips wrap instead of pushing the layout wide */
.badge{overflow-wrap:anywhere;white-space:normal;}
.focus-row{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;
  min-width:0;}
.focus-row>span{min-width:0;overflow-wrap:anywhere;}
.cr-ev{overflow-wrap:anywhere;}
.badge.clean{background:color-mix(in srgb,var(--green) 13%,transparent);color:var(--green);}
.badge.mid{background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue);}
.badge.hot{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);}
.st-not_disputed{background:color-mix(in srgb,var(--dim) 14%,transparent);color:var(--muted);}
.st-filed_pending{background:color-mix(in srgb,var(--blue) 13%,transparent);color:var(--blue);}
.st-approved{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green);}
.st-denied{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);}
.st-expired{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber);}
.pbook{background:var(--blue-soft);color:var(--blue-deep);}
.catlabel svg{width:14px;height:14px;stroke-width:1.75;flex:0 0 auto;}
button svg, a.linkbtn svg{width:13px;height:13px;stroke-width:1.75;
  vertical-align:-2px;margin-right:5px;flex:0 0 auto;}
table.t a svg{width:15px;height:15px;stroke-width:1.75;vertical-align:-3px;
  color:var(--muted);margin:0;}
table.t a:hover svg{color:var(--blue);}
.chip svg,.coach-log svg,.st-chip svg,.wkrow svg{width:12px;height:12px;
  stroke-width:1.75;vertical-align:-2px;margin-right:3px;}
svg:not([width]):not([class]){max-width:16px;max-height:16px;}
.linkbtn svg, .actions svg, .cbtn svg{width:14px;height:14px;stroke-width:1.75;
  vertical-align:-2.5px;margin-right:5px;}
.ai-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;
  padding:3px 10px;border-radius:8px;}
.ai-chip svg{width:12px;height:12px;stroke-width:2;}
.ai-chip.go{background:color-mix(in srgb,var(--blue) 13%,transparent);color:var(--blue);}
.ai-chip.no{background:color-mix(in srgb,var(--dim) 14%,transparent);color:var(--muted);}

/* legacy chrome cleanup */
.dialwrap .num{font-variant-numeric:tabular-nums; letter-spacing:-.025em;}
h2.page{font-size:21px; margin:6px 2px 4px;}
.sub2{margin-bottom:14px;}

/* ---------- What-if ---------- */
.wi-grid{display:grid;grid-template-columns:1fr 250px;gap:14px;align-items:start;}
@media (max-width:760px){.wi-grid{grid-template-columns:1fr;}}
.wi-side{position:sticky;top:72px;text-align:center;}
.wi-big{font-size:42px;font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;line-height:1.1;margin:2px 0;}
.wi-row{display:grid;grid-template-columns:150px 1fr 84px 34px;gap:10px;
  align-items:center;padding:7px 0;border-bottom:1px solid var(--line);}
.wi-row:last-of-type{border-bottom:none;}
.wi-row .wi-l{display:flex;flex-direction:column;font-size:12.5px;line-height:1.35;}
.wi-row .wi-l .dim{font-size:10.5px;}
.wi-row input[type=range]{accent-color:var(--blue);width:100%;min-width:60px;}
.wi-row input[type=number]{width:100%;font-size:12.5px;padding:5px 7px;
  border:0.5px solid var(--line);border-radius:8px;background:var(--panel);
  color:var(--ink);font-variant-numeric:tabular-nums;}
.wi-ms{font-size:12.5px;font-weight:750;text-align:right;font-variant-numeric:tabular-nums;}
@media (max-width:560px){.wi-row{grid-template-columns:1fr 74px 30px;}
  .wi-row .wi-l{grid-column:1 / -1;}}

/* ---------- Briefing ---------- */
.brief{max-width:760px;line-height:1.7;font-size:13.5px;}
.brief h3{font-size:16px;margin:4px 0 8px;}
.brief h4{font-size:13px;margin:16px 0 4px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);}
.brief ul{margin:4px 0 8px;padding-left:20px;}
.brief li{margin:3px 0;}
.brief p{margin:6px 0;}

/* ---------- Command palette (⌘K) ---------- */
dialog.pal{width:min(560px,92vw);padding:0;border:0.5px solid var(--line);
  border-radius:12px;background:var(--panel);color:var(--ink);
  box-shadow:var(--shadow);margin-top:12vh;}
dialog.pal::backdrop{background:var(--scrim);backdrop-filter:blur(2px);}
.pal-in{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--line);}
.pal-in svg{width:16px;height:16px;stroke-width:2;color:var(--muted);flex:0 0 auto;}
.pal-in input{flex:1;border:none;outline:none;background:transparent;
  font-size:14px;color:var(--ink);}
.pal-list{max-height:320px;overflow-y:auto;padding:6px;}
.pal-row{padding:9px 12px;border-radius:12px;font-size:13px;cursor:pointer;}
.pal-row:hover{background:color-mix(in srgb,var(--blue) 7%,transparent);}
.pal-row.sel{background:color-mix(in srgb,var(--blue) 12%,transparent);
  color:var(--blue);font-weight:650;}

/* ---------- goal bar ---------- */
.goalbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:10px 2px 0;padding:9px 14px;font-size:12.5px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);}
.goalbar svg{width:15px;height:15px;stroke-width:1.75;color:var(--blue);flex:0 0 auto;}
.goalbar .goal-edit{margin-left:auto;padding:4px 8px;background:transparent;
  border:none;box-shadow:none;cursor:pointer;color:var(--dim);}
.goalbar .goal-edit:hover{color:var(--blue);}
.goalbar .goal-edit svg{color:inherit;margin:0;}

/* ---------- TV mode ---------- */
body.tvmode #side,body.tvmode header.top,body.tvmode .nav{display:none !important;}
body.tvmode{display:block;padding:0;}
body.tvmode .wrap{grid-column:1;max-width:none;padding:0;}
.tv{min-height:100vh;display:flex;flex-direction:column;padding:34px 48px;gap:10px;}
.tv-head{display:flex;justify-content:space-between;align-items:center;}
.tv-brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:750;}
.tv-brand img{width:34px;height:34px;}
.tv-clock{font-size:24px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;}
.tv-main{flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center;}
.tv-score{text-align:center;}
.tv-score .n{font-size:min(22vw,190px);font-weight:800;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
.tv-score .t{font-size:34px;font-weight:750;margin-top:4px;}
.tv-score .r{font-size:16px;margin-top:8px;}
.tv-side{display:flex;flex-direction:column;gap:16px;}
.tv-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 22px;box-shadow:var(--shadow);}
.tv-card .h{font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);margin-bottom:8px;}
.tv-card .row{display:flex;justify-content:space-between;font-size:16px;padding:5px 0;}
.tv-card .big{font-size:42px;font-weight:800;line-height:1;}
.tv-season{display:flex;gap:8px;align-items:flex-end;padding:0 8px;}
.tv-season .cell{flex:1;display:flex;flex-direction:column;gap:5px;text-align:center;}
.tv-season .cell span{font-size:12.5px;color:var(--dim);}
.tv-foot{text-align:center;font-size:12.5px;padding:6px 0 2px;}

/* ---------- 1-on-1 printable sheet ---------- */
#onesheet{display:none;}
@media print{
  body{display:block !important;padding:0 !important;background:var(--print-paper) !important;}
  body>*{display:none !important;}
  body #onesheet{display:block !important;color:var(--print-ink);background:var(--print-paper);
    font-size:12.5px;line-height:1.55;padding:10px 6px;}
  #onesheet h1{font-size:21px;margin:0 0 2px;}
  #onesheet .os-meta{font-size:11px;color:var(--print-mute);margin-bottom:14px;}
  #onesheet h2{font-size:13px;text-transform:uppercase;letter-spacing:.05em;
    margin:16px 0 6px;border-bottom:1px solid var(--print-line);padding-bottom:3px;}
  #onesheet table{width:100%;border-collapse:collapse;font-size:11px;}
  #onesheet th,#onesheet td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--print-line);}
  #onesheet ul{margin:4px 0;padding-left:18px;}
  #onesheet .os-lines div{border-bottom:1px solid var(--print-line);height:26px;margin-top:14px;}
  #onesheet .os-sign{display:flex;gap:40px;margin-top:44px;}
  #onesheet .os-sign div{flex:1;border-top:1px solid var(--print-ink);padding-top:5px;
    font-size:11px;color:var(--print-mute);}
  body #certsheet{display:flex !important;color:var(--print-ink);background:var(--print-paper);
    min-height:96vh;align-items:center;justify-content:center;}
  #certsheet .cert-frame{border:3px double var(--ink9);border-radius:6px;
    padding:56px 48px;text-align:center;width:100%;max-width:640px;}
  #certsheet .cert-co{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--print-mute);}
  #certsheet .cert-title{font-size:34px;font-weight:800;color:var(--ink9);margin:14px 0 2px;}
  #certsheet .cert-week{font-size:13px;color:var(--print-mute);}
  #certsheet .cert-star{font-size:42px;color:var(--gold);margin:14px 0 6px;}
  #certsheet .cert-name{font-size:24px;font-weight:700;margin-bottom:14px;}
  #certsheet .cert-body{font-size:13.5px;line-height:1.6;color:var(--print-ink);max-width:460px;margin:0 auto;}
  #certsheet .cert-sign{display:flex;gap:60px;margin-top:52px;}
  #certsheet .cert-sign div{flex:1;border-top:1px solid var(--print-ink);padding-top:6px;
    font-size:11px;color:var(--print-mute);}
}
#certsheet{display:none;}

/* the breakdown as a printable page (Save as PDF), like the coaching sheet */
#tdsheet{display:none;}
@media print{
  body #tdsheet{display:block !important;color:var(--print-ink);background:var(--print-paper);font-size:11.5px;line-height:1.45;padding:6px 2px;}
  #tdsheet h1{font-size:16px;margin:0 0 2px;}
  #tdsheet .ts-sub{font-size:11px;color:var(--print-mute);margin-bottom:10px;}
  #tdsheet .ts-inv{border-top:2px solid var(--print-ink);padding-top:8px;margin-top:12px;break-inside:avoid-page;}
  #tdsheet .ts-big{font-size:21px;font-weight:800;}
  #tdsheet table{width:100%;border-collapse:collapse;margin:6px 0;}
  #tdsheet th,#tdsheet td{border-bottom:1px solid var(--print-line);padding:4px 6px;text-align:left;vertical-align:top;}
  #tdsheet th{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--print-mute);}
  #tdsheet td.n,#tdsheet th.n{text-align:right;white-space:nowrap;}
  #tdsheet tr.p td{background:var(--print-band);font-weight:700;}
  #tdsheet .ts-text{white-space:pre-wrap;border:1px solid var(--print-line);padding:8px;margin-top:6px;}
  #tdsheet .ts-foot{margin-top:14px;font-size:10px;color:var(--print-mute);}
}
/* ---------- Six Lines coaching sheet (2.6) — B&W print ---------- */
#sixsheet{display:none;}
@media print{
  html{background:var(--print-paper) !important;}
  body #sixsheet{display:block !important;color:var(--print-ink);background:var(--print-paper);
    font-size:12.5px;line-height:1.5;padding:6px 2px;}
  #sixsheet .sx-band{padding:10px 0 12px;border-top:3px solid var(--print-ink);}
  #sixsheet .sx-band:first-child{border-top:0;padding-top:0;}
  #sixsheet .sx-kick{font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--print-mute);font-weight:700;}
  #sixsheet h1{font-size:22px;margin:2px 0 1px;}
  #sixsheet .sx-sub{font-size:11px;color:var(--print-mute);}
  #sixsheet .sx-stats{display:flex;gap:26px;margin-top:8px;}
  #sixsheet .sx-stats b{font-size:24px;font-variant-numeric:tabular-nums;}
  #sixsheet .sx-stats span{font-size:11px;color:var(--print-mute);display:block;
    line-height:1.25;}
  #sixsheet .sx-recon{font-size:11.5px;margin-top:7px;}
  #sixsheet .sx-h{font-size:13px;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;margin-bottom:5px;}
  #sixsheet .sx-well{font-size:12.5px;line-height:1.9;}
  #sixsheet .sx-well b{white-space:nowrap;}
  #sixsheet .sx-giant{display:flex;gap:14px;align-items:center;margin:4px 0 7px;}
  #sixsheet .sx-giant .g{font-size:42px;font-weight:800;line-height:.95;
    font-variant-numeric:tabular-nums;}
  #sixsheet .sx-giant .gt{font-size:13px;font-weight:800;}
  #sixsheet .sx-giant .gs{font-size:11.5px;color:var(--print-mute);}
  #sixsheet .sx-ev{font-size:11.5px;padding:2px 0;}
  /* Contact compliance had been a bare <table class=sx-ev>: no cell
     padding, no rules, four columns jammed together (Jose, 2026-09-01:
     "too crammed"). A printed sheet a driver signs needs air. */
  #sixsheet .sx-tbl{width:100%;border-collapse:collapse;margin:9px 0 2px;
    font-size:11.5px;}
  #sixsheet .sx-tbl th{text-align:left;font-size:9.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--print-mute);font-weight:700;
    border-bottom:1.5px solid var(--print-ink);padding:0 14px 5px 0;}
  #sixsheet .sx-tbl td{padding:7px 14px 7px 0;border-bottom:1px solid var(--print-line);
    vertical-align:top;line-height:1.4;}
  #sixsheet .sx-tbl tr:last-child td{border-bottom:0;}
  #sixsheet .sx-tbl td:last-child,#sixsheet .sx-tbl th:last-child{
    padding-right:0;}
  #sixsheet .sx-note{font-size:11.5px;line-height:1.65;color:var(--print-ink);
    margin-top:8px;}
  /* a second heading inside a band, for the part of the story that is
     not counted but still has to be told */
  #sixsheet .sx-sub2{font-size:11px;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;margin:14px 0 0;padding-top:8px;
    border-top:1px solid var(--print-line);}
  #sixsheet .sx-win{color:var(--print-mute);}
  #sixsheet .sx-pat{font-size:11.5px;margin-top:6px;}
  #sixsheet .sx-quote{display:inline-block;border:1px solid var(--print-ink);
    border-radius:12px;padding:4px 10px;margin:3px 6px 3px 0;font-size:11.5px;}
  #sixsheet .sx-quote span{color:var(--print-mute);font-size:10.5px;}
  #sixsheet .sx-lines div{border-bottom:1px solid var(--print-ink);height:24px;
    margin-top:14px;}
  #sixsheet .sx-sign{display:flex;gap:40px;margin-top:30px;}
  #sixsheet .sx-sign div{flex:1;border-top:1px solid var(--print-ink);padding-top:5px;
    font-size:11px;color:var(--print-mute);}
  #sixsheet .sx-foot{font-size:10.5px;color:var(--print-mute);margin-top:12px;
    border-top:1px solid var(--print-line);padding-top:6px;}
  #sixsheet .sx-stage{font-size:11.5px;margin-top:10px;}
}

/* ---------- Team v3.13: summary strip, dim zeros, DotW ---------- */
.tsum{display:flex;gap:6px;flex-wrap:wrap;padding:14px 10px;margin-bottom:14px;}
.ts-item{flex:1;min-width:118px;text-align:center;padding:2px 8px;
  display:flex;flex-direction:column;gap:3px;align-items:center;}
.ts-item b{font-size:22px;font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums;}
.ts-item span{font-size:11px;color:var(--dim);line-height:1.35;}
.ts-delta{display:inline-block;font-size:10.5px;padding:1px 8px;border-radius:99px;
  background:color-mix(in srgb,var(--dim) 10%,transparent);color:var(--dim);}
.ts-delta.good{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green);}
.ts-delta.bad{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);}
/* a zero still has to be readable (Jose, 2026-09-01): opacity .45 on
   top of --dim put this near-invisible on white. */
.dimzero{color:var(--dim);opacity:.72;}
.dotw{display:flex;align-items:center;gap:16px;margin-bottom:12px;
  border-left:3px solid var(--gold);}
.dotw-star{width:30px;height:30px;color:var(--gold);flex:none;}
.dotw-star svg{width:100%;height:100%;fill:currentColor;stroke:none;}
.dotw-main{flex:1;min-width:0;}
.dotw-label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
.dotw-name{font-size:16px;}
.dotw-print svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px;}

/* ---------- Team v3.13.1: coach priority rows ---------- */
.crows{padding:4px 0;margin-bottom:4px;}
.crow{display:grid;grid-template-columns:26px 38px minmax(0,1fr) 150px 130px auto;
  gap:12px;align-items:center;padding:11px 16px;cursor:pointer;
  border-bottom:1px solid var(--line);}
.crow:last-child{border-bottom:0;}
.crow:hover{background:color-mix(in srgb,var(--blue) 4%,transparent);}
.crow-done{opacity:.55;}
.cr-rank{font-size:13px;font-weight:800;color:var(--dim);text-align:center;
  font-variant-numeric:tabular-nums;}
.cr-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:800;flex:none;
  background:color-mix(in srgb,var(--dim) 12%,transparent);color:var(--text);}
.cr-av.hot{box-shadow:0 0 0 2px var(--red);color:var(--red);
  background:color-mix(in srgb,var(--red) 10%,transparent);}
.cr-av.warn{box-shadow:0 0 0 2px var(--amber);color:var(--amber);
  background:color-mix(in srgb,var(--amber) 12%,transparent);}
.cr-av.mild{box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 55%,transparent);}
.cr-main{min-width:0;}
.cr-name{display:flex;align-items:center;gap:7px;min-width:0;}
.cr-name b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cr-events{display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden;margin-top:3px;}
.cr-ev{font-size:11.5px;color:var(--muted);background:var(--panel2);
  border:1px solid var(--line);border-radius:6px;padding:1.5px 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;flex:none;}
.cr-rep{font-size:11px;color:var(--red);white-space:nowrap;flex:none;
  display:inline-flex;align-items:center;gap:3px;}
.cr-rep svg{width:11px;height:11px;}
.cr-share{display:flex;align-items:center;gap:8px;}
.cr-bar{flex:1;height:5px;border-radius:99px;overflow:hidden;
  background:color-mix(in srgb,var(--dim) 12%,transparent);}
.cr-bar i{display:block;height:100%;border-radius:99px;background:var(--amber);}
.cr-share span{font-size:11px;color:var(--dim);width:32px;text-align:right;
  font-variant-numeric:tabular-nums;}
.cr-meta{display:flex;flex-direction:column;gap:1px;line-height:1.3;}
.cr-meta b{font-size:13px;font-variant-numeric:tabular-nums;}
.cr-meta b.cr-hot{color:var(--red);}
.cr-meta span{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;}
.cr-meta em{font-style:normal;font-size:11px;color:var(--muted);margin-top:2px;}
.cr-act{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.cr-coach{font-size:11px;color:var(--muted);white-space:nowrap;}
@media(max-width:800px){
  .crow{grid-template-columns:24px 36px minmax(0,1fr) auto;row-gap:9px;}
  .cr-meta{display:none;}
  .cr-act{grid-column:4;grid-row:1;}
  .cr-share{grid-column:3/-1;grid-row:2;}
  .cr-rank{grid-row:1;}
  .cr-av{grid-row:1;}
}

/* ---------- Team v3.13.1: board — numbers, heat, impact bars ---------- */
.tnum td.num,.tnum th.num{text-align:right;font-variant-numeric:tabular-nums;}
.tablewrap{max-height:none;}
.tablewrap table.t th{position:sticky;top:0;background:var(--panel);z-index:2;}
td.ht-warn{background:color-mix(in srgb,var(--amber) 11%,transparent);}
td.ht-bad{background:color-mix(in srgb,var(--red) 12%,transparent);
  color:var(--red);font-weight:600;}
.impcell{white-space:nowrap;}
.impbar{display:inline-block;width:56px;height:5px;border-radius:99px;
  vertical-align:2px;margin-right:8px;overflow:hidden;
  background:color-mix(in srgb,var(--dim) 10%,transparent);}
.impbar i{display:block;height:100%;border-radius:99px;background:var(--red);
  opacity:.75;}
.impbar.wbar{width:48px;}
.impbar.wbar i{background:var(--amber);}

/* ---------- Roster v3.13.1: labeled filters, attention queue, tag cell ---- */
.fgroup{display:flex;align-items:center;gap:7px;}
.flab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);}
.att-tiles{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.att-tile{flex:1;min-width:110px;text-align:center;padding:10px 8px;
  border:1px solid var(--line);border-radius:12px;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;transition:border-color 120ms var(--ease);}
.att-tile:hover{border-color:var(--blue);}
.att-tile.on{border-color:var(--blue);
  background:color-mix(in srgb,var(--blue) 6%,transparent);}
.att-tile b{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;}
.att-tile span{font-size:10.5px;color:var(--dim);letter-spacing:.04em;
  text-transform:uppercase;}
.att-t tr{cursor:pointer;}
.att-t td{padding:7px 10px;}
.att-lic{text-align:right;white-space:nowrap;}
.att-pill{display:inline-block;font-size:10.5px;font-weight:600;
  padding:2px 9px;border-radius:99px;margin-right:5px;white-space:nowrap;
  background:color-mix(in srgb,var(--dim) 10%,transparent);color:var(--muted);}
.att-pill.warn{background:color-mix(in srgb,var(--amber) 14%,transparent);
  color:var(--amber);}
.att-pill.bad{background:color-mix(in srgb,var(--red) 13%,transparent);
  color:var(--red);}
.att-pill.mid{background:color-mix(in srgb,var(--blue) 11%,transparent);
  color:var(--blue);}
.att-pill.stale{background:transparent;border:1px dashed var(--line);
  color:var(--dim);font-weight:500;}
.att-more{font:inherit;font-size:11.5px;color:var(--blue);background:none;
  border:0;padding:8px 2px 0;cursor:pointer;}
.att-stalebar{font-size:11px;margin-top:8px;}
.att-stalebar a{color:var(--dim);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;}
.tagcell{white-space:nowrap;}
.hub-tog{display:inline-block;font-size:10.5px;font-weight:700;
  padding:2.5px 10px;border-radius:99px;cursor:pointer;margin-right:6px;
  border:1px dashed var(--line);color:var(--dim);transition:all 120ms var(--ease);
  opacity:0;}
tr:hover .hub-tog{opacity:1;}
.hub-tog:hover{border-color:var(--blue);color:var(--blue);}
.hub-tog.on{background:var(--blue);border-color:var(--blue);color:var(--on-solid);
  border-style:solid;opacity:1;}
@media(hover:none){.hub-tog{opacity:.6;}}
.tag-add{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;border:1px dashed var(--line);
  color:var(--dim);font-size:13px;cursor:pointer;vertical-align:middle;
  opacity:0;transition:opacity 120ms var(--ease);}
tr:hover .tag-add{opacity:1;}
@media(hover:none){.tag-add{opacity:.6;}}

/* ---------- Disputes v3.13.2: tabs, grouped queue, compact filed rows ---- */
.dtabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:2px 0 16px;}
.dtabs .fchip{font-size:12.5px;padding:7px 15px;border-radius:8px;cursor:pointer;
  color:var(--muted);background:var(--panel);border:1px solid var(--line);
  font-weight:600;transition:all 120ms var(--ease);}
.dtabs .fchip:hover{color:var(--text);border-color:var(--blue);}
.aq-row{border-top:1px solid var(--line);margin-top:10px;padding-top:10px;}
.aq-main{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0;}
.aq-what{font-size:13px;font-weight:600;}
.aq-acts{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:7px;}
.aq-acts button,.aq-acts a{font-size:11.5px;padding:5px 12px;display:inline-flex;
  align-items:center;gap:5px;}
.aq-file{background:var(--blue);color:var(--on-solid);border-color:transparent;}
.aq-already{font-size:11px;color:var(--dim);margin-left:auto;}
.aq-ai{margin-top:6px;font-size:11.5px;}
.aq-draft{margin-top:6px;}
.fw-rows{padding:4px 0;}
.fw-row{display:flex;gap:10px;align-items:center;padding:8px 16px;cursor:pointer;
  border-bottom:1px solid var(--line);min-width:0;}
.fw-row:last-child{border-bottom:0;}
.fw-row:hover{background:color-mix(in srgb,var(--blue) 4%,transparent);}
.fw-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:190px;flex:none;}
.fw-what{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;flex:1;}
.fw-meta{font-size:11px;white-space:nowrap;flex:none;}
.fw-pts{font-size:11.5px;color:var(--amber);font-weight:600;width:44px;
  text-align:right;flex:none;font-variant-numeric:tabular-nums;}
/* ---------- v3.14.1: driver profile drawer — real scrolling ---------- */
dialog.drv[open]{display:flex;flex-direction:column;max-height:86vh;
  padding:0;overflow:hidden;}
.drv-head{display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:16px 20px 10px;border-bottom:1px solid var(--line);
  flex:none;}
.drv-body{overflow-y:auto;padding:4px 20px 18px;min-height:0;
  overscroll-behavior:contain;}
.drv-ev{display:flex;gap:9px;align-items:center;padding:8px 2px;
  border-bottom:1px solid var(--line);font-size:12.5px;flex-wrap:wrap;
  cursor:pointer;}
.drv-ev:hover{background:color-mix(in srgb,var(--blue) 4%,transparent);}
dialog.evd[open]{display:flex;flex-direction:column;max-height:80vh;
  width:min(480px,94vw);padding:0;overflow:hidden;}
.evd-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;
  font-size:12.5px;margin-top:4px;}
.evd-grid>div{display:flex;flex-direction:column;gap:1px;}
.evd-grid span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);}
.evd-tl{font-size:12.5px;color:var(--muted);}
.evd-tl div{padding:4px 0 4px 14px;border-left:2px solid var(--line);
  position:relative;}
.evd-tl div::before{content:'';position:absolute;left:-4.5px;top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--blue);}

/* ---------- v3.18: command dashboard ---------- */
.db-zone{display:flex;flex-direction:column;gap:4px;text-decoration:none;
  color:inherit;font-size:13px;}

/* ---------- v3.17: action center bell ---------- */
.bell-wrap{position:relative;display:inline-flex;}
.bell-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;
  border-radius:99px;background:var(--red);color:var(--on-solid);font-size:9.5px;
  font-weight:800;display:flex;align-items:center;justify-content:center;
  padding:0 4px;pointer-events:none;}
.bell-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:70;
  width:min(420px,92vw);max-height:70vh;overflow-y:auto;display:none;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-float);}
.bell-panel.open{display:block;}
/* Phones: the bell/mail buttons sit mid-bar, so a right-anchored fixed-width
   panel hung off the LEFT edge (bell −45px, mail −11px @390px — reported
   5.9.27). Anchor these popovers to the viewport as an edge-to-edge sheet so
   they're always fully readable. */
@media (max-width:560px){
  .bell-panel{position:fixed;top:56px;left:8px;right:8px;
    width:auto;max-width:none;max-height:78vh;}
}
.bp-head{padding:12px 16px 8px;font-size:13px;font-weight:800;
  border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--panel);}
.bp-tabs{display:flex;gap:4px;padding:0 12px 8px;border-bottom:1px solid var(--line);}
.bp-tabs button{font:inherit;font-size:11.5px;font-weight:650;padding:5px 11px;
  border:none;border-radius:8px;background:transparent;color:var(--muted);
  cursor:pointer;transition:background 120ms var(--ease),color 120ms var(--ease);}
.bp-tabs button.on{background:color-mix(in srgb,var(--blue) 12%,transparent);
  color:var(--blue);}
.bp-tabs button b{font-size:10.5px;background:var(--red);color:var(--on-solid);
  border-radius:8px;padding:1px 6px;margin-left:3px;}
.bp-tabs button.on b{background:var(--blue);}
.bp-item{padding:10px 16px;border-bottom:1px solid var(--line);font-size:12.5px;}
.bp-item:last-child{border-bottom:0;}
.bp-item.unread{box-shadow:inset 3px 0 0 var(--blue);}
.bp-top{display:flex;gap:8px;align-items:baseline;}
.bp-msg{color:var(--muted);margin-top:3px;line-height:1.45;font-size:12.5px;}
.bp-acts{display:flex;gap:6px;margin-top:8px;}
.bp-acts button{font-size:11px;padding:4px 11px;}
.bp-state{font-size:11px;margin-top:6px;}

/* ---------- 4.0: section bar (tabs + pills under the topbar) ----------
   Level 2 = tabs, level 3 = quiet pills. THREE LEVELS IS THE CEILING. */
.secbar{padding:0 22px;border-bottom:1px solid var(--line);
  background:var(--panel);position:sticky;top:0;z-index:40;}
.sec-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;}
.sec-tabs::-webkit-scrollbar{display:none;}
.sec-tab{display:flex;align-items:center;gap:6px;padding:10px 13px 9px;
  font-size:13px;font-weight:550;color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap;
  transition:color 120ms var(--ease),border-color 120ms var(--ease);}
.sec-tab:hover{color:var(--text);}
.sec-tab.on{color:var(--blue);font-weight:650;border-bottom-color:var(--blue);}
.sec-pills{display:flex;gap:5px;padding:8px 0;overflow-x:auto;
  scrollbar-width:none;}
.sec-pills::-webkit-scrollbar{display:none;}
.sec-pill{font-size:12.5px;font-weight:550;padding:4px 12px;border-radius:99px;
  color:var(--muted);text-decoration:none;white-space:nowrap;
  transition:background 120ms var(--ease),color 120ms var(--ease);}
.sec-pill:hover{color:var(--text);background:var(--panel2);}
.sec-pill.on{background:var(--blue-soft);color:var(--blue);font-weight:650;}
/* ---------- 4.1: Scorecard History ---------- */
.ht-table td{vertical-align:middle;}
.ht-table .ht-week{white-space:nowrap;}
.ht-gain{font-size:11px;font-weight:700;margin-left:7px;}
.ht-mark{position:relative;display:inline-flex;margin-left:7px;
  color:var(--dim);cursor:default;vertical-align:middle;}
.ht-mark svg{width:12px;height:12px;}
.ht-mark:hover{color:var(--blue);}
.ht-pop{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%);z-index:60;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:10px 14px;
  box-shadow:var(--shadow-float);white-space:nowrap;font-size:12.5px;}
.ht-mark:hover .ht-pop{display:block;}
.ht-pop b{display:block;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);margin-bottom:5px;}
.ht-pop .ht-step{display:block;padding:2px 0;font-weight:600;}

/* Amazon Inbox badge is BLUE — new mail is information; red badges are
   reserved for actionable counts (the bell + sidebar). */
#mail-badge{background:var(--blue);}
/* ---------- 4.14: clickable notifications ---------- */
.bp-go{cursor:pointer;transition:color 120ms var(--ease);}
.bp-go:hover{color:var(--blue);}

/* ---------- 4.13.4: visible group toggle ---------- */
.sb-toggle{margin-left:auto;font-size:11.5px;font-weight:650;
  color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 35%,transparent);
  border-radius:99px;padding:3px 12px;white-space:nowrap;
  transition:background 120ms var(--ease);}
details.sb-group summary:hover .sb-toggle{background:color-mix(in srgb,var(--blue) 10%,transparent);}
details.sb-group .tg-open{display:none;}
details.sb-group[open] .tg-open{display:inline;}
details.sb-group[open] .tg-closed{display:none;}
details.sb-group summary{padding:10px 12px;}

/* ---------- 4.13.3: safety drawer v3 sections ---------- */
.sb-sec{padding:6px 12px;}
.sb-sec.sb-muted{background:var(--panel2);}
.sb-row{display:grid;grid-template-columns:78px minmax(0,1fr) 44px auto;
  gap:10px;align-items:center;padding:9px 4px;font-size:12.5px;
  border-bottom:1px solid var(--line);cursor:pointer;border-radius:6px;}
.sb-row:last-child{border-bottom:0;}
.sb-row:hover{background:color-mix(in srgb,var(--blue) 7%,transparent);}
.sb-w{font-weight:700;text-align:center;}
.sb-muted .sb-row{cursor:pointer;}

/* ---------- 4.13.2: safety cell + condensed event groups ---------- */
td.safecell{cursor:pointer;}
td.safecell:hover{background:color-mix(in srgb,var(--blue) 9%,transparent);}
details.sb-group summary{display:flex;align-items:center;gap:6px;
  padding:8px 10px;cursor:pointer;list-style:none;font-size:12.5px;
  border-radius:8px;transition:background 120ms var(--ease);}
details.sb-group summary::-webkit-details-marker{display:none;}
details.sb-group summary:hover{background:var(--panel2);}
details.sb-group[open] .dcr-caret{transform:rotate(90deg);}
details.sb-group>table{margin:0 0 6px 18px;width:calc(100% - 18px);}

/* ---------- 4.11: live to-date counts on the board ---------- */
.live-n{color:var(--amber);font-size:11px;font-weight:750;cursor:default;
  white-space:nowrap;}

/* ---------- 4.9.1: collapsed TBA groups in the CC drawer ---------- */
summary.dcr-ghead::-webkit-details-marker{display:none;}
.dcr-caret{display:inline-block;transition:transform 120ms var(--ease);flex:0 0 auto;}
details.dcr-grp[open] .dcr-caret{transform:rotate(90deg);}

/* ---------- 4.9: in-place help ---------- */
/* Quiet-until-hover (the design law): invisible-ish until the title row
   is hovered, then a soft dot; blue on its own hover. */
.help-dot{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--dim);font-size:11.5px;font-weight:700;
  margin-left:9px;padding:0;cursor:pointer;vertical-align:3px;
  opacity:.35;transition:opacity 120ms var(--ease),color 120ms var(--ease),border-color 120ms var(--ease);
  box-shadow:none;line-height:1;}
h2.page:hover .help-dot{opacity:.85;}
.help-dot:hover{color:var(--blue);border-color:var(--blue);opacity:1;}
.hc-steps{margin:6px 0 0;padding-left:22px;font-size:13px;line-height:1.75;
  color:var(--muted);}
.hc-steps li{margin-bottom:10px;}

/* ---------- 4.8: Recognition v2 ---------- */
.rg-podium{display:flex;gap:12px;justify-content:center;align-items:flex-end;
  margin:6px 0 16px;flex-wrap:wrap;}
.rg-pod{text-align:center;padding:14px 18px;border:1px solid var(--line);
  border-radius:12px;cursor:pointer;min-width:150px;background:var(--panel2);
  transition:border-color 120ms var(--ease);}
.rg-pod:hover{border-color:var(--blue);}
.rg-pod.first{padding:20px 22px;border-color:var(--amber);
  background:color-mix(in srgb,var(--amber) 7%,var(--panel2));}
.rg-medal{font-size:24px;margin-bottom:4px;}
.rg-pts{font-size:21px;font-weight:800;color:var(--blue);margin-top:2px;}
.rg-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;}
.rg-week{padding:12px 14px;}
.rg-wk{font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px;}
.rg-line{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;
  padding:3px 0;min-width:0;}
.rg-line b{overflow-wrap:anywhere;text-align:right;}

/* ---------- 4.7: Coaching queue rows ---------- */
.cq-row{display:grid;grid-template-columns:200px minmax(0,1fr) auto;
  gap:6px 14px;padding:12px 18px;border-bottom:1px solid var(--line);
  align-items:start;}
.cq-row:last-child{border-bottom:0;}
.cq-row:hover{background:var(--panel2);}
.cq-name{min-width:0;overflow-wrap:anywhere;}
.cq-chips{display:flex;flex-wrap:wrap;gap:5px;min-width:0;}
.cq-log{white-space:nowrap;align-self:center;}
@media (max-width:700px){
  .cq-row{grid-template-columns:1fr;gap:8px;padding:12px 14px;}
  .cq-log{justify-self:start;}
}

/* ---------- 4.5: Guide help center ---------- */
.hc-wrap{display:grid;grid-template-columns:216px minmax(0,1fr);gap:14px;
  align-items:start;}
.hc-rail{position:sticky;top:64px;padding:12px;}
.hc-sec{font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);padding:10px 6px 4px;}
.hc-item{display:block;padding:6px 9px;border-radius:8px;font-size:13px;
  color:var(--muted);cursor:pointer;transition:background 120ms var(--ease),color 120ms var(--ease);}
.hc-item:hover{background:var(--panel2);color:var(--text);}
.hc-item.on{background:var(--blue-soft);color:var(--blue);font-weight:600;}
.hc-what{font-size:13px;color:var(--text);margin-top:2px;}
/* ---- Help Center (rebuilt) ---- */
.hc-search{width:100%;font:inherit;font-size:14px;background:var(--panel);
  color:var(--text);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;margin:10px 0 6px;box-shadow:var(--shadow-1);}
.hc-search:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);}
.hc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:8px;}
.hc-tile{display:flex;gap:11px;align-items:center;padding:13px 14px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:transform 120ms var(--ease),border-color 120ms var(--ease),box-shadow 120ms var(--ease);}
.hc-tile:hover{transform:translateY(-1px);border-color:var(--line-strong);box-shadow:var(--shadow-float);}
.hc-tile-ic{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;font-size:16px;}
.hc-tile b{font-size:13.5px}
.hc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:9px;margin-top:6px;}
.hc-card{display:flex;gap:11px;align-items:center;padding:12px 13px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:background 120ms var(--ease),border-color 120ms var(--ease);}
.hc-card:hover{background:var(--panel2);border-color:var(--line-strong);}
.hc-card-ic{width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:grid;place-items:center;
  background:var(--panel2);color:var(--muted);font-size:13px;}
.hc-card b{font-size:13px;display:block;}
.hc-card-sub{font-size:11.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.hc-card-chev{margin-left:auto;color:var(--line-strong);font-size:16px;}
.hc-crumb{font-size:12.5px;color:var(--dim);margin-bottom:10px;}
.hc-crumb a{color:var(--blue);cursor:pointer;}
.hc-crumb span{margin:0 5px;}
.hc-article{padding:22px 24px;}
.hc-article .hc-sub{font-size:13.5px;color:var(--muted);margin-top:4px;}
.hc-intro{font-size:14px;line-height:1.7;color:var(--text);margin:14px 0 4px;}
.hc-h{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--gold-ink,var(--text));
  margin:16px 0 3px;padding-top:12px;border-top:1px solid var(--line);}
.hc-body{font-size:13px;line-height:1.7;color:var(--muted);margin:2px 0 0;}
.hc-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
/* People & Usage timeframe rail (5.9.0) */
.uw-bar{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap;}
.uw-pill{font:inherit;font-size:12.5px;font-weight:550;padding:5px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--dim);cursor:pointer;
  transition:border-color var(--m-fast) var(--ease),background var(--m-fast) var(--ease),color var(--m-fast) var(--ease);}
.uw-pill:hover{border-color:var(--line-strong);color:var(--text);}
.uw-pill.on{background:var(--ink9);color:var(--side-on);border-color:transparent;}
@media (max-width:700px){
  .hc-wrap{grid-template-columns:1fr;}
  .hc-rail{position:static;}
}
.bp-foot{padding:10px 16px;border-top:1px solid var(--line);font-size:12.5px;}
.bp-foot a{color:var(--blue);text-decoration:none;}
.bp-row{padding:10px 16px;border-bottom:1px solid var(--line);}
.bp-row:hover{background:var(--panel2);}
.bp-row .bp-t{font-size:12.5px;font-weight:600;line-height:1.35;}
.bp-row .bp-d{font-size:11px;margin-top:2px;}

/* ---------- v3.17: compliance board ---------- */
.cb-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.cb-table th{text-align:left;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);padding:8px 10px;
  border-bottom:1px solid var(--line);}
.cb-table td{padding:9px 10px;border-bottom:1px solid var(--line);}
.cb-week{font-weight:800;white-space:nowrap;}
.cb-week .dim{font-weight:400;font-size:10.5px;display:block;}
.cb-cell{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap;}
.cb-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:-2px 0 14px;font-size:11.5px;color:var(--dim);}
.cb-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.cb-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;flex:0 0 auto;}
.cb-filed{background:color-mix(in srgb,var(--green) 13%,transparent);color:var(--green);}
.cb-awaiting{background:color-mix(in srgb,var(--blue) 11%,transparent);color:var(--blue);}
.cb-partial{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber);}
/* window closed, some unfiled — neutral, nothing to do now (5.9.23) */
.cb-closed{background:color-mix(in srgb,var(--dim) 13%,transparent);color:var(--dim);}
.cb-open{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber);
  border:1px solid var(--amber);}
.cb-missed{background:color-mix(in srgb,var(--red) 13%,transparent);color:var(--red);}
.cb-none{color:var(--dim);background:color-mix(in srgb,var(--dim) 8%,transparent);}
.cb-pending{color:var(--dim);font-weight:400;}
.cb-current td{background:color-mix(in srgb,var(--blue) 4%,transparent);}
.cb-stale{border:1px solid var(--amber);border-radius:12px;padding:10px 14px;
  margin-bottom:12px;font-size:12.5px;background:color-mix(in srgb,var(--amber) 7%,transparent);}

/* ---------- v3.17: zones master-detail ---------- */
.zn-wrap{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:14px;
  align-items:start;}
.zn-list{padding:4px 0;max-height:72vh;overflow-y:auto;}
.zn-row{display:flex;gap:10px;align-items:center;padding:10px 14px;
  cursor:pointer;border-bottom:1px solid var(--line);}
.zn-row:last-child{border-bottom:0;}
.zn-row:hover{background:color-mix(in srgb,var(--blue) 4%,transparent);}
.zn-row.on{background:color-mix(in srgb,var(--blue) 8%,transparent);
  box-shadow:inset 3px 0 0 var(--blue);}
.zn-rowmain{min-width:0;flex:1;}
.zn-name{font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.zn-sub{font-size:11px;display:block;margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.zn-rowright{flex:none;font-size:12.5px;text-align:right;white-space:nowrap;}
.zn-detailwrap{position:sticky;top:70px;}
.zn-panel{padding:16px 18px;}
.zn-head{display:flex;justify-content:space-between;gap:12px;
  align-items:flex-start;flex-wrap:wrap;}
.zn-head>div:first-child{flex:1 1 260px;}
/* R184: chips sit in their own wrapping row under the title; six of them
   on one zone used to push the title into a one-word column and run out
   of the card */
.zn-kinds{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.zn-kinds:empty{display:none;}
.fbar-range{font-size:11.5px;color:var(--dim);margin-left:8px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.zn-kind{font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 10px;border-radius:99px;flex:none;}
.zk-loc{background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue);}
.zk-drv{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber);}
.zk-mix{background:color-mix(in srgb,var(--dim) 10%,transparent);color:var(--dim);}
.zn-odds{font-size:12.5px;margin-top:10px;padding:9px 13px;border-radius:12px;
  background:color-mix(in srgb,var(--dim) 7%,transparent);line-height:1.5;}
.zn-odds.good{background:color-mix(in srgb,var(--green) 9%,transparent);}
.zn-odds.bad{background:color-mix(in srgb,var(--red) 8%,transparent);}
.zn-wrap>*{min-width:0;}   /* let grid items shrink (no min-content blowout) */
@media(max-width:900px){
  .zn-wrap{grid-template-columns:1fr;}
  .zn-detailwrap{position:static;}
  .zn-list{max-height:40vh;}
}

/* ---------- v3.16: hotspots (location intelligence) ---------- */
.hs-spot{border:1px solid var(--line);border-radius:12px;padding:11px 15px;
  margin-bottom:9px;background:var(--panel);}
.hs-spot.hs-mixed{border-left:3px solid var(--amber);}
.hs-top{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
.hs-cell{font-weight:700;font-size:13px;color:var(--blue);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;text-decoration:none;}
.hs-cell svg{width:13px;height:13px;}
.hs-types{font-size:12.5px;color:var(--muted);}
.hs-years{font-size:11px;}
.hs-rec{margin-left:auto;font-size:12.5px;white-space:nowrap;}
.hs-meta{font-size:11.5px;margin-top:5px;}
.hs-arg{font-size:12.5px;margin-top:8px;padding:7px 10px;border-left:2px solid
  var(--green);background:color-mix(in srgb,var(--green) 5%,transparent);
  border-radius:0 8px 8px 0;display:flex;gap:8px;align-items:center;}
.hs-arg svg{width:12px;height:12px;color:var(--green);flex:none;}
.hs-arg .pb-copy{margin-left:auto;}
.hs-evs{margin-top:7px;}
.hs-evrow{display:flex;gap:12px;font-size:11.5px;padding:4px 2px;
  border-bottom:1px solid var(--line);cursor:pointer;}
.hs-evrow:hover{background:color-mix(in srgb,var(--blue) 4%,transparent);}

/* ---------- v3.15: playbook argument cards ---------- */
.pb-arg{border:1px solid var(--line);border-radius:12px;padding:10px 14px;
  margin-top:8px;}
.pb-argtext{font-size:12.5px;line-height:1.55;}
.pb-argmeta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;
  margin-top:7px;font-size:11.5px;}
.pb-rate{font-size:13px;font-weight:800;padding:1px 9px;border-radius:99px;}
.pb-rate.good{background:color-mix(in srgb,var(--green) 13%,transparent);color:var(--green);}
.pb-rate.mid{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber);}
.pb-rate.bad{background:color-mix(in srgb,var(--red) 13%,transparent);color:var(--red);}
.pb-building{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);border:1px dashed var(--line);border-radius:99px;
  padding:1.5px 8px;}
.pb-copy{margin-left:auto;font-size:11px;padding:4px 11px;display:inline-flex;
  align-items:center;gap:4px;}

.mf-banner{display:flex;gap:12px;align-items:center;padding:11px 16px;
  margin-bottom:14px;border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);
  border-left:3px solid var(--amber);border-radius:12px;
  background:color-mix(in srgb,var(--amber) 6%,transparent);font-size:12.5px;}
.mf-flag{color:var(--amber);flex:none;display:flex;}
.mf-flag svg{width:16px;height:16px;}
.mf-main{flex:1;min-width:0;line-height:1.5;}
.mf-banner .cbtn{flex:none;margin:0;}
@media(max-width:700px){
  .fw-what{display:none;}
  .fw-row{flex-wrap:wrap;row-gap:4px;}
  .fw-meta{margin-left:auto;}
  .aq-already{margin-left:0;width:100%;}
}

/* ---------- H1: coach cards v2 + training chips ---------- */
.dcard.cc{cursor:pointer;display:flex;flex-direction:column;gap:7px;}
.cc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.cc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.cc-top .badge{flex:0 0 auto;}
.cc-body{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--muted);line-height:1.5;}
.cc-what{white-space:nowrap;}
.cc-reps{display:flex;flex-wrap:wrap;gap:5px;}
.cc-rep{font-size:11px;}
.cc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:auto;padding-top:2px;}
.cc-foot .coach-log{font-size:11.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cc-foot .cbtn{margin:0;flex:0 0 auto;}
.tag-chip.qual{background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue);}
.tag-chip.lic-bad{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red);margin-left:4px;}
.cc-foot{flex-wrap:wrap;}
.cc-name{white-space:normal;line-height:1.3;}
.tag-chip.tag-x{cursor:pointer;}
.tag-chip.tag-x:hover{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red);}
.tag-chip.tag-add{cursor:pointer;background:transparent;border:1px dashed var(--line-strong);color:var(--muted);}
.tag-chip.tag-add:hover{color:var(--blue);border-color:var(--blue);}
.drv-link{cursor:pointer;}
.drv-link:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}

/* ---------- version log + what's-new toast ---------- */
#side .sidefoot-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
#side-version{display:block;font-size:10.5px;color:var(--side-dim);text-decoration:none;
  padding-top:2px;cursor:pointer;}
#side-version:hover{color:var(--side-on);}
#side-logout{display:inline-flex;align-items:center;gap:5px;background:none;border:none;
  color:var(--side-dim);font:inherit;font-size:11px;cursor:pointer;padding:2px 0;}
#side-logout svg{width:14px;height:14px;}
#side-logout:hover{color:var(--side-on);}
.cl-wrap{display:flex;flex-direction:column;gap:12px;max-width:820px;}
.cl-entry.cl-latest{border-color:color-mix(in srgb,var(--blue) 40%,var(--line));}
.cl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cl-ver{font-weight:800;font-size:14px;color:var(--blue);font-variant-numeric:tabular-nums;}
.cl-title{font-size:14px;}
.cl-date{font-size:11.5px;margin-left:auto;}
.cl-items{margin:8px 0 0;padding-left:20px;font-size:13px;line-height:1.65;}
.cl-items li{margin:3px 0;color:var(--muted);}
.vtoast{position:fixed;bottom:22px;right:22px;z-index:70;display:flex;align-items:center;
  gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:11px 16px;font-size:13px;box-shadow:var(--shadow-float);}
.vtoast svg{width:15px;height:15px;color:var(--blue);}
.vtoast a{color:var(--blue);font-weight:650;text-decoration:none;}
.vtoast button{background:transparent;border:none;box-shadow:none;color:var(--dim);
  cursor:pointer;padding:2px 4px;}
.rday{font-size:11px;padding:2px 7px;border-radius:6px;background:var(--panel2);
  color:var(--muted);font-variant-numeric:tabular-nums;}
.rday.today{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue);font-weight:650;}
.rday.bad{background:color-mix(in srgb,var(--red) 13%,transparent);color:var(--red);}
.ai-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap;}
.ai-row .ai-text{flex:1;min-width:180px;}
.ai-check{width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line-strong);
  background:transparent;color:transparent;cursor:pointer;padding:0;flex:0 0 auto;}
.ai-check:hover{border-color:var(--green);color:var(--green);}

/* ---------- checklists ---------- */
.clitem{display:flex;gap:10px;align-items:flex-start;padding:7px 4px;border-bottom:1px solid var(--line);
  cursor:pointer;border-radius:8px;}
.clitem:hover{background:var(--panel2);}
.clbox{width:22px;height:22px;flex:0 0 auto;border:1.5px solid var(--line-strong);border-radius:8px;
  display:grid;place-items:center;font-size:13px;color:var(--on-solid);margin-top:1px;}
.clitem.on .clbox{background:var(--green);border-color:var(--green);}
.cllabel{font-size:13px;line-height:1.45;display:flex;flex-direction:column;gap:1px;}
.clitem.on .cllabel{color:var(--muted);}
.clval{color:var(--blue);font-variant-numeric:tabular-nums;}
.clwho{font-size:10.5px;}
.clcal{display:flex;gap:3px;align-items:center;margin-top:10px;flex-wrap:wrap;}
.clday{width:10px;height:10px;border-radius:3px;background:var(--panel2);}
.clday.full{background:var(--green);}
.clday.part{background:var(--amber);}
.clday.none{background:var(--panel2);}
/* login */
/* 2.12: the card was var(--panel) = WHITE against the ink pre-auth
   shell, with dark inputs inside it — a white slab on a navy page
   (Jose, mobile). The sign-in card is INK now: one surface, brand
   colours, inputs that belong to it. */
dialog.login{width:min(340px,92vw);border:1px solid var(--ink-line);
  border-radius:12px;background:var(--ink9);color:var(--side-on);
  box-shadow:var(--shadow-float);padding:24px;}
dialog.login input{width:100%;margin-bottom:10px;box-sizing:border-box;
  background:var(--side-hover);border:1px solid var(--ink-line);
  color:var(--side-on);border-radius:8px;padding:11px 13px;}
dialog.login input::placeholder{color:var(--ink-dim);}
dialog.login input:focus{outline:none;border-color:var(--blue);
  background:var(--side-active);}
dialog.login button{width:100%;box-sizing:border-box;padding:11px 16px;
  font-size:14px;font-weight:700;}
dialog.login a{color:var(--ink-link);}
dialog.login::backdrop{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px);}
@media (max-width:899px){
  .nav a[href="#wbr"]{display:none;}     /* WBR is a desktop ritual */
}
.cl-shots{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.cl-shots img{width:180px;border-radius:8px;border:1px solid var(--line);
  transition:transform 120ms var(--ease);}
.cl-shots a:hover img{transform:scale(1.03);}
.tiersline{display:flex;gap:14px;flex-wrap:nowrap;justify-content:center;
  font-size:10px;color:var(--dim);margin:16px 0 0;white-space:nowrap;
  font-variant-numeric:tabular-nums;}

/* ---------- prediction Now / Finish-line basis ---------- */
.basis-tog{position:relative;z-index:4;display:inline-flex;gap:0;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;padding:2px;margin-bottom:6px;}
.basis-tog .bt{font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:6px;
  color:var(--muted);cursor:pointer;transition:background 120ms var(--ease),color 120ms var(--ease);}
.basis-tog .bt.on{background:var(--blue);color:var(--on-solid);}
.finline{font-size:12.5px;color:var(--muted);margin:8px 0 2px;line-height:1.6;}
.finline b{color:var(--text);}
.finline .flink{color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}

/* Manual refresh retired from the topbar (5.8.1); the sticky progress bar
   below still shows when the owner triggers a Console refresh. */
/* Guided tour (overhaul) — a soft glowing spotlight + a polished card */
#tour-hole{position:fixed;z-index:120;pointer-events:none;border-radius:12px;
  box-shadow:0 0 0 9999px var(--tour-scrim),0 0 0 3px var(--blue),
    0 0 24px 5px color-mix(in srgb,var(--blue) 50%,transparent);
  transition:left .3s cubic-bezier(.4,0,.2,1),top .3s cubic-bezier(.4,0,.2,1),
    width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);
  animation:tourpulse 2.4s ease-in-out infinite}
@keyframes tourpulse{
  0%,100%{box-shadow:0 0 0 9999px var(--tour-scrim),0 0 0 3px var(--blue),0 0 18px 3px color-mix(in srgb,var(--blue) 40%,transparent)}
  50%{box-shadow:0 0 0 9999px var(--tour-scrim),0 0 0 3px var(--blue),0 0 34px 9px color-mix(in srgb,var(--blue) 62%,transparent)}}
#tour-card{position:fixed;z-index:121;width:min(374px,90vw);background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-float);
  overflow:hidden;animation:tourin .3s cubic-bezier(.2,.7,.2,1)}
@keyframes tourin{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
.tour-hd{background:var(--ink9);padding:11px 16px;display:flex;align-items:center;gap:8px}
.tour-hd .tour-sec{color:var(--gold);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.tour-hd .tour-cnt{color:var(--side-mut);font-size:11px;margin-left:auto;font-variant-numeric:tabular-nums}
.tour-bd{padding:13px 16px 15px}
.tour-bd h4{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em}
.tour-bd p{margin:6px 0 0;font-size:13px;line-height:1.62;color:var(--muted)}
.tour-dots{display:flex;gap:5px;margin:13px 0 3px}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:all .25s}
.tour-dots i.on{background:var(--blue);width:19px;border-radius:3px}
.tour-chk{display:flex;gap:7px;align-items:center;margin-top:11px;font-size:11.5px;color:var(--dim);cursor:pointer}
.tour-foot{display:flex;gap:8px;align-items:center;margin-top:11px}
/* Re-login banner — impossible to miss, on every page, action in place */
#relogin-banner{position:sticky;top:0;z-index:60;display:flex;align-items:center;
  justify-content:center;gap:14px;flex-wrap:wrap;padding:13px 20px;
  background:var(--red);color:var(--on-solid);font-size:14px;line-height:1.4;
  box-shadow:var(--shadow-2);}
#relogin-banner .rbn-ic{font-size:16px;line-height:1}
#relogin-banner .rbn-txt b{font-weight:800}
#relogin-banner .rbn-act{background:var(--panel);color:var(--red);border:0;
  border-radius:8px;padding:8px 16px;font-weight:800;font-size:13px;
  cursor:pointer;white-space:nowrap;box-shadow:var(--shadow)}
#relogin-banner .rbn-act:hover{background:var(--panel2)}
.refresh-bar{position:sticky;top:0;z-index:25;height:0;overflow:hidden;
  background:var(--panel2);transition:height 200ms var(--ease);display:flex;align-items:center;}
.refresh-bar.on{height:26px;border-bottom:1px solid var(--line);}
.rb-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--blue);
  opacity:.16;transition:width 280ms var(--ease);}
.refresh-bar.ok .rb-fill{background:var(--green);opacity:.22;}
.refresh-bar.bad .rb-fill{background:var(--red);opacity:.20;}
.rb-label{position:relative;font-size:11.5px;color:var(--muted);padding:0 16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (min-width:900px){.refresh-bar{margin-left:0;}}
.cap-chip{cursor:pointer;font-size:12.5px;}
.cap-chip:hover b{text-decoration:underline;}
.ntog{display:flex;gap:9px;align-items:center;font-size:13px;padding:5px 0;
  border-bottom:1px solid var(--line);cursor:pointer;}
.ntog input{accent-color:var(--blue);width:15px;height:15px;}

/* DSP Hive wordmark — single line beside the gold hex mark */
header.top .brand{font-size:13px;white-space:nowrap;}
header.top .brand b{font-weight:800;letter-spacing:.01em;}

/* ============================================================
   U2 (4.21.0) — Inkside core components
   Chips · timeframe rail · tabs+pills · tables · stat strips ·
   tiles · buttons · drawers · empty/loading · help dot
   ============================================================ */

/* buttons + controls: r8, primary blue 12.5/700 */
button, select, .linkbtn, .cbtn{border-radius:8px;}
button{font-weight:600;}

/* chips: Title Case + icon, r99, line-height 1, optical padding */
.st-chip, .cb-cell, .att-pill, .ts-delta, .ai-chip{
  border-radius:99px; line-height:1; font-size:11px; font-weight:700;
  padding:5px 11px 3px;}
.ts-delta{padding:4px 9px 2px;}
.chip{border-radius:99px;}

/* timeframe bar — ONE pill rail, one line always (scrolls inside itself
   on narrow screens, never wraps and never widens the page) */
.fbar .chips2{border-radius:99px; padding:4px; flex-wrap:nowrap;
  white-space:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%;}
.fbar .chips2::-webkit-scrollbar{display:none;}

/* tabs 13/600, active = blue + 2px underline; pills 11.5/600 */
.sec-tab{font-size:13px; font-weight:600; padding:11px 13px 9px;}
.sec-tab.on{font-weight:600;}
.sec-pill{font-size:11.5px; font-weight:600;}
.sec-pill.on{font-weight:600;}

/* data tables: 10px tracked uppercase headers, line-100 separators,
   zebra at 2% ink */
table.t th{font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);}
table.t td{font-size:12.5px; border-bottom-color:var(--panel2); vertical-align:middle; line-height:1.45;}
/* 2.28.1 (Jose: "all icons on top of each other"): a data cell is ONE
   line; only the flexible text column may wrap. Actions inside a cell
   are text links, never boxed buttons stacked under the value. */
table.t td.nw, table.t th.nw{white-space:nowrap;}
table.t td.wrap{min-width:220px;}
table.t a.tl{color:var(--blue); font-weight:600; text-decoration:none; cursor:pointer; margin-left:10px; white-space:nowrap;}
table.t a.tl:hover{text-decoration:underline;}
table.t a.tl.quiet{color:var(--dim); font-weight:500;}
table.t a.tl.quiet:hover{color:var(--red); text-decoration:none;}
table.t .cellrow{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
table.t tbody tr:nth-child(even) td{background:var(--zebra);}
table.t tbody tr[onclick]:hover td{background:color-mix(in srgb, var(--blue) 5%, var(--panel));}
.cb-table th{font-size:10px; letter-spacing:.1em; color:var(--dim);}
.cb-table td{border-bottom:1px solid var(--panel2);}

/* heat cells become rounded cell pills (r6) — tint bg + figure color */
.cellpill{display:inline-block;border-radius:6px;padding:2px 8px;
  font-weight:700;font-variant-numeric:tabular-nums;}
.cellpill.ht-warn{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber);}
.cellpill.ht-bad{background:color-mix(in srgb,var(--red) 13%,transparent);color:var(--red);}
/* legacy full-cell tints retired (kept quiet where still emitted) */
td.ht-warn{background:color-mix(in srgb,var(--amber) 11%,transparent);}
td.ht-bad{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);font-weight:600;}

/* stat strip: hairline dividers between cells, 800 tabular figures */
.tsum{gap:0; padding:14px 0;}
.tsum .ts-item{padding:2px 12px;}
@media (min-width:700px){
  .tsum .ts-item{border-right:1px solid var(--line);}
  .tsum .ts-item:last-child{border-right:none;}
}
.ts-item b{font-size:24px;}
.ts-item span{color:var(--muted);}

/* metric tiles: micro-label 9.5-10/700 +8% uppercase */
.att-tile b{font-size:22px;}
.att-tile span{font-size:10px; letter-spacing:.08em;}

/* section label: 10.5/700 +12% uppercase text-300, NO icon prefix,
   hairline extends full width (Inkside mapping #10) */
.catlabel{font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim);}
.catlabel svg{display:none;}

/* drawers/dialogs: r12 + raise-3, header context sub-line stays */
dialog{border-radius:12px; box-shadow:var(--shadow-float);}
dialog.pal{border-radius:12px;}
dialog.login{border-radius:12px;}
.wkpanel, .bell-panel, .ht-pop{border-radius:12px;
  box-shadow:var(--shadow-float);}

/* empty state: dashed border + one-sentence guidance */
.empty{border:1px dashed var(--line-strong); border-radius:12px;
  padding:26px 20px; margin:6px 0;}
.empty .et{font-size:13px; font-weight:700; color:var(--body2);}
.empty .eh{font-size:11.5px; color:var(--dim);}

/* skeleton bars r5 */
.skel{border-radius:12px;}
.skel.h-hero{border-radius:12px;}

/* help dot: 16px blue-tint circle, always visible next to page titles */
.help-dot{width:16px; height:16px; border:none; background:var(--blue-soft);
  color:var(--blue-deep); font-size:10px; font-weight:700; opacity:1;
  vertical-align:2px;}
h2.page:hover .help-dot{opacity:1;}
.help-dot:hover{background:var(--blue); color:var(--on-solid); opacity:1;}

/* page title 21/700 -2%, one-sentence subtitle 12.5 muted */
h2.page{font-size:21px; font-weight:700; letter-spacing:-.02em;}
.sub2{font-size:12.5px; color:var(--muted);}

/* week chip pill in the top bar */
#ribbon{border-radius:99px;}

/* hero panels: flat white + hairline (gradients are reserved for
   gold/ink hero moments only) */
.hero{background:var(--panel); box-shadow:var(--shadow);}

/* ============================================================
   U3 (4.22.0) — Inkside screen passes
   ============================================================ */

/* Recognition: Driver of the Week = the ink hero panel; gold = award */
.dotw{background:linear-gradient(135deg,var(--ink9),var(--ink8));color:var(--on-solid);
  border:1px solid var(--ink9);border-left:1px solid var(--ink9);
  border-radius:12px;padding:18px 24px;}
.dotw-label{color:var(--gold);font-weight:700;}
.dotw-star{color:var(--gold);}
.dotw .dim,.dotw-main .dim,.dotw .sub,.dotw-main span.dim{color:var(--side-mut);}
.dotw .dotw-name{color:var(--side-on);}
.dotw-print{background:var(--gold);color:var(--ink9);border:none;
  font-weight:800;}
.dotw-print:hover{background:color-mix(in srgb,var(--gold) 85%,var(--side-on));border:none;}
.dotw-print svg{color:var(--ink9);}

/* Season podium: #1 is the gold card (award moment) */
.rg-pod.first{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 7%,var(--panel)),var(--panel));}
.rg-pod.first .rg-medal{color:var(--gold);}

/* gold-accent cards (Zones coaching actions, streak watch) — the only
   places gold touches a content card */
.gold-card{border-left:3px solid var(--gold) !important;
  border-color:color-mix(in srgb,var(--gold) 35%,var(--line));}

/* ============================================================
   5.0.1 — the lock screen (SECURITY: signed-out = mark + sign-in
   form ONLY; the entire shell is hidden until authenticated)
   ============================================================ */
body.locked #side, body.locked header.top, body.locked .secbar,
body.locked #app, body.locked .nav, body.locked #refresh-bar{
  display:none !important;}
/* While locked the PAGE cannot scroll — the few pixels of drift Jose felt
   were the hidden chrome still occupying layout behind the overlay
   (2.5.9). The overlay itself scrolls only when the viewport is too short
   (phone keyboard open), which is the one case scrolling is needed. */
body.locked{overflow:hidden;height:100dvh}
#lockscreen{position:fixed;inset:0;z-index:999;background:var(--ink9);overflow:auto;-webkit-overflow-scrolling:touch;
  display:grid;place-items:center;}
.lock-mark{width:64px;height:64px;}
.lock-card{display:flex;flex-direction:column;align-items:center;gap:10px;
  width:min(320px,88vw);color:var(--side-on);}
.lock-card input{width:100%;padding:11px 14px;border-radius:8px;
  border:1px solid var(--ink-line);background:var(--ink-field);color:var(--ink-text);
  font:inherit;font-size:14px;}
.lock-card input::placeholder{color:var(--ink-dim);}
.lock-card input:focus{outline:none;border-color:var(--ink-focus);}
/* Chrome paints autofilled fields pale blue and ignores background —
   the only override it honours is an inset shadow (Jose's screenshot) */
.lock-card input:-webkit-autofill,
.lock-card input:-webkit-autofill:hover,
.lock-card input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink-text);
  -webkit-box-shadow:0 0 0 1000px var(--ink-field) inset;
  box-shadow:0 0 0 1000px var(--ink-field) inset;
  caret-color:var(--ink-text);transition:background-color 9999s ease-out;}
/* breathing room: the card was edge-to-edge on phones */
.lock-card{padding:26px 22px;border-radius:12px;
  background:var(--side-hover);border:1px solid var(--ink-line);
  box-shadow:var(--shadow-float);}
.lock-card button{width:100%;padding:11px;border-radius:8px;border:none;
  background:var(--ink-btn);color:var(--side-on);font:inherit;font-size:14px;font-weight:700;
  cursor:pointer;}
.lock-card button:hover{background:var(--ink-btn-hover);}

/* Hive Console nav item: pinned to the bottom, separated — the
   platform room is a different altitude than the station sections */
#side .navitem[data-sec="console"]{margin-top:auto;
  border-top:1px solid var(--side-rule);border-radius:0 0 8px 8px;
  padding-top:12px;}
#side .navitem[data-sec="console"].on{border-radius:8px;padding-top:8px;
  margin-top:auto;border-top:1px solid var(--side-rule);}

/* Critical chip inside notification rows: compact inline, never
   overlapping the title (Jose 2026-07-22) */
.bp-t .chip, .amz-title .chip{font-size:10px;padding:2px 8px 1px;
  line-height:1.3;display:inline-block;vertical-align:1px;margin-right:6px;}

/* Coaching Standards (2.6.3 polish) — the approved mock's controls:
   joined segmented pills, blue selected state, clean row grammar.
   The pane was functionally rich but visually bare (Jose, 2026-08-09:
   "still the very simple design"). */
.cs-seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:2px;gap:2px;vertical-align:middle;}
.cs-seg button{border:0;background:transparent;color:var(--muted);
  font:inherit;font-size:12.5px;font-weight:650;padding:5px 13px 4px;
  border-radius:6px;cursor:pointer;line-height:1.2;transition:background .12s;}
.cs-seg button:hover{color:var(--text);}
.cs-seg button.on{background:var(--blue);color:var(--on-solid);font-weight:750;
  box-shadow:var(--shadow);}
.cs-num{width:58px;margin-left:8px;padding:5px 8px 4px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums;text-align:center;background:var(--panel);
  color:var(--text);}
.cs-num:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue);}
.cs-row{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(150px,220px);
  gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-200,var(--line));}
.cs-row:last-of-type{border-bottom:0;}
.cs-row .met{font-weight:680;font-size:13.5px;}
.cs-row .ctx{font-size:11.5px;color:var(--muted);text-align:right;line-height:1.35;}
.cs-topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;}
.cs-impact{font-size:13px;}
.cs-impact b{font-size:14px;}

/* ---------- Inkside control scale (2.11) ----------------------------------
   Jose: buttons "too big… not uniform and elegant." Generic buttons had NO
   base style — browser defaults made them balloon (the Add Row pill). One
   compact scale for every control; emphasis comes from color, never size.
   Class-level styles (icon-btn, qh-chip, fchip…) still win by specificity. */
button{font:inherit;font-size:12.5px;font-weight:650;line-height:1.25;
  padding:6px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--text);cursor:pointer;}
button:hover{border-color:var(--line-300);}
button:disabled{opacity:.45;cursor:default;}
.btn-primary{background:var(--blue);border-color:var(--blue);color:var(--on-solid);}
.btn-primary:hover{filter:brightness(1.07);border-color:var(--blue);}

/* 2.11: numeric columns right-align in EVERY table — .num only worked
   inside .tnum tables, so newer tables (Daily Routes, Road Intelligence)
   silently fell to left-align while inputs sat right (Jose's circle:
   "it has to look uniform across the board"). One rule, one alignment. */
table td.num, table th.num{text-align:right;font-variant-numeric:tabular-nums;}

/* Numeric cell inputs (2.11): digits must stack EXACTLY over the plain
   numbers in the same column. padding+border compensated by the negative
   margin; number-spinners killed — they shove digits left when they
   appear and break the stack (Jose, third alignment report). */
input.cellnum{width:66px;text-align:right;font:inherit;font-size:12.5px;
  font-weight:700;font-variant-numeric:tabular-nums;padding:4px 6px;
  margin-right:-7px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--text);appearance:textfield;
  -moz-appearance:textfield;}
input.cellnum::-webkit-outer-spin-button,
input.cellnum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}


/* 2.12: the week cell's autopsy line overflowed its column and printed
   across the station rows beside it (visible the moment the routes/
   packages line made the cell taller). Clamp the column. */
table.ht-table td.ht-week{width:250px;max-width:250px;overflow:hidden;
  vertical-align:top;}
table.ht-table td.ht-week>div{max-width:230px;white-space:normal;
  overflow-wrap:anywhere;}

/* Scorecard-week chip (2026-08-31): it must be indistinguishable from the
   other timeframe pills — a native <select> sitting beside them read as
   bolted on. The select covers the chip invisibly, so the chip keeps the
   rail's exact shape, colour and hover while still opening a real menu. */
.fchip.wkchip{position:relative;padding-right:22px;}
.fchip.wkchip::after{content:'';position:absolute;right:9px;top:50%;
  width:0;height:0;margin-top:-1px;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:4px solid currentColor;
  opacity:.55;pointer-events:none;}
.fchip.wkchip select{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:0;font:inherit;}

/* Amazon's invoice number, under the type. Long ids that must stay
   verifiable character by character (Jose, 2026-09-01: "I need to have
   the invoice numbers so I can verify everything"). */
.inv-no{font-variant-numeric:tabular-nums;letter-spacing:.02em;
  font-size:10px;line-height:1.35;color:var(--dim);margin-top:3px;
  overflow-wrap:anywhere;cursor:pointer;max-width:260px;}
.inv-no:hover{color:var(--blue);}

/* Customer feedback rows in the driver profile. The category pills used
   to sit inline in a 11.5px text flow: a chip's box is taller than that
   line, so wrapped pills collided and there was one space between them
   (Jose, 2026-09-01: "they are on top of each other... visually really
   bad"). Their own flex rail with a real gap, and a smaller pill. */
.cdf-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  font-size:11.5px;padding:8px 0;border-bottom:1px solid var(--line);}
.cdf-row:last-child{border-bottom:0;}
.cdf-meta{display:inline-flex;align-items:center;gap:6px;min-width:0;
  white-space:nowrap;}
.cdf-tags{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto;
  justify-content:flex-end;min-width:0;}
.cdf-tag{display:inline-block;font-size:10px;line-height:1.4;
  padding:2px 9px;border-radius:99px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);
  color:var(--amber);
  background:color-mix(in srgb,var(--amber) 10%,transparent);}
@media (max-width:520px){
  .cdf-tags{margin-left:0;justify-content:flex-start;}
}

/* ============================================================
   2.16 — the shift gate. First sign-in of the day for a shift role
   lands here and nothing else opens until a shift is picked (Jose,
   2026-09-02: enforced, never a lock on the clock). Same discipline as
   the lock screen: a fixed overlay, no Esc, no outside click.
   ============================================================ */
body.gated{overflow:hidden;height:100dvh}
#shiftgate{position:fixed;inset:0;z-index:998;background:var(--ink9);overflow:auto;
  -webkit-overflow-scrolling:touch;display:grid;place-items:center;padding:24px;}
.gate-card{display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center;
  width:min(820px,100%);}
.gate-mark{width:44px;height:44px;}
.gate-title{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--side-on);line-height:1.15;}
.gate-sub{font-size:14px;color:var(--side-mut);margin-top:10px;}
.gate-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;}
.gate-opt{background:var(--panel);color:var(--text);border-radius:12px;padding:20px 18px;
  display:flex;flex-direction:column;gap:6px;text-align:left;min-height:150px;
  box-shadow:var(--shadow-float);cursor:pointer;border:none;font:inherit;
  transition:transform 120ms var(--ease),box-shadow 120ms var(--ease);}
.gate-opt:hover{transform:translateY(-1px);}
.gate-opt.sel{box-shadow:0 0 0 3px var(--gold),var(--shadow-float);}
.gate-opt .n{font-size:16px;font-weight:700;color:var(--text);}
.gate-opt .d{font-size:12.5px;color:var(--muted);line-height:1.45;}
.gate-opt .w{margin-top:auto;font-size:11px;color:var(--dim);padding-top:8px;}
.gate-note{font-size:12.5px;color:var(--side-dim);}
.gate-note button{background:none;border:none;color:var(--side-mut);text-decoration:underline;
  font:inherit;cursor:pointer;padding:0;}
@media (max-width:700px){
  .gate-opts{grid-template-columns:1fr;}
  .gate-opt{min-height:96px;}
  .gate-title{font-size:24px;}
}
/* The shift chip beside the Home title */
.shift-chip{display:inline-flex;align-items:center;gap:8px;margin-left:8px;font-size:11.5px;}
.shift-chip .lnk{color:var(--blue);cursor:pointer;font-weight:600;}

/* ============================================================
   2.17 — Role Homes: launchpad, shift line, station strip
   ============================================================ */
.home-hero{display:flex;align-items:center;gap:22px;padding:20px 22px;margin-bottom:12px;}
.home-hero .hs{display:flex;flex-direction:column;align-items:center;gap:6px;padding-right:22px;border-right:1px solid var(--line);}
.home-hero .score{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.home-hero .lead{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.3;}
.home-hero .sec{font-size:13px;color:var(--muted);margin-top:4px;}
.home-hero .hr{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.lp{display:grid;gap:12px;margin-bottom:4px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));}
.lpt{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-height:0;position:relative;
  transition:border-color 120ms var(--ease),transform 120ms var(--ease);}
.lpt.drag{opacity:.45;} .lpt.over{border-color:var(--blue);}
.lpt .h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.lpt .h svg{width:15px;height:15px;stroke-width:2;color:var(--blue);flex:0 0 auto;}
.lpt .big{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;}
.lpt .big small{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:0;}
.lpt .line{font-size:12.5px;color:var(--body2);line-height:1.4;}
.lpt .foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:6px;}
.lpt .foot .lbtn,.lpt .foot .primary{margin-left:auto;}
.lpt.red{border-left:3px solid var(--red);} .lpt.amber{border-left:3px solid var(--amber);}
.lpt.green{border-left:3px solid var(--green);} .lpt.blue{border-left:3px solid var(--blue);}
.lpt .grip{margin-left:auto;color:var(--line-strong);cursor:grab;font-size:14px;letter-spacing:-2px;user-select:none;}
.lpt .arr{display:none;gap:4px;margin-left:auto;}
.lpt .arr button{padding:2px 8px;font-size:11px;border-radius:6px;}
.home-shift .step{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 16px;border-top:1px solid var(--panel2);}
.home-shift .step:first-child{border-top:0;}
.home-shift .mk{width:22px;height:22px;border-radius:99px;display:grid;place-items:center;border:2px solid var(--line-strong);background:var(--panel);}
.home-shift .mk svg{width:12px;height:12px;stroke-width:3;}
.home-shift .mk.done{background:var(--green);border-color:var(--green);color:var(--on-solid);}
.home-shift .mk.auto{background:var(--green-soft);border-color:var(--green);color:var(--green);}
.home-shift .mk.now{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);}
.home-shift .t{font-size:13.5px;font-weight:600;} .home-shift .m{font-size:11.5px;color:var(--muted);margin-top:2px;}
.home-shift .who{font-size:11px;color:var(--muted);white-space:nowrap;} .home-shift .who b{color:var(--text);font-weight:600;}
.home-pulse .cell{padding:12px 18px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.home-pulse .cell:first-child{border-top:0;}
.home-pulse .lab{font-size:11px;color:var(--muted);} .home-pulse .fig{font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.home-on .row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--panel2);}
.home-on .row:first-child{border-top:0;}
.home-on .av{width:28px;height:28px;border-radius:99px;background:var(--blue-soft);color:var(--blue-deep);font-weight:700;font-size:10px;display:grid;place-items:center;flex:0 0 auto;}
.home-on .av.q{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber);}
.home-wk{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;}
.home-wk .d{border:1px solid var(--line);border-radius:8px;padding:8px;min-height:60px;background:var(--panel);}
.home-wk .d.today{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-soft);}
.home-wk .d.warn{border-color:color-mix(in srgb,var(--amber) 45%,transparent);} .home-wk .d.urgent{border-color:color-mix(in srgb,var(--red) 40%,transparent);}
.home-wk .dow{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
.home-wk .ev{font-size:11px;font-weight:600;color:var(--body2);margin-top:4px;line-height:1.3;}
@media (max-width:900px){
  .lpt{padding:12px;gap:5px;} .lpt .big{font-size:21px;}
  .lpt .grip{display:none;} .lpt .arr{display:flex;}
  .home-hero{flex-direction:column;align-items:flex-start;gap:12px;}
  .home-hero .hs{border-right:0;padding-right:0;flex-direction:row;}
  .home-hero .lead{font-size:16px;}
}

/* ============================================================
   ONE TIMELINE (2.44, R148, Jose 2026-09-07: "B and 1")
   The day keeps its order; a block is as wide as its tiles; a block
   with one tile is a strip; the rail runs beside the whole day.
   ============================================================ */
.home-frame{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,360px);column-gap:16px;align-items:start;
  grid-template-areas:"hero rail" "day rail" "needs rail";grid-template-rows:auto auto 1fr;}
.home-frame.no-hero{grid-template-areas:"day rail" "needs rail";grid-template-rows:auto 1fr;}
.home-frame.no-rail{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "day" "needs";grid-template-rows:auto auto auto;}
.home-frame.no-rail.no-hero{grid-template-areas:"day" "needs";grid-template-rows:auto auto;}
.home-hero-slot{grid-area:hero;min-width:0;}
.home-day{grid-area:day;min-width:0;}
.home-needs{grid-area:needs;min-width:0;}
.home-rail{grid-area:rail;min-width:0;position:sticky;top:62px;align-self:start;}
.home-rail .grp+.grp{margin-top:22px;}
.home-rail .grp>.catlabel:first-child{margin-top:0;}
/* R154: the Money rail card; R153: the Recognition card with its week */
.home-rail .grp.money{margin-bottom:22px;}
.home-money{margin-bottom:0;}
.home-money .grip,.home-money .arr{display:none;}
.catlabel .cnt{font-weight:500;font-size:11.5px;text-transform:none;letter-spacing:0;color:var(--body2);margin-left:4px;}
.home-rec{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;}
.home-rec .rec-row{display:flex;flex-direction:column;gap:3px;align-items:flex-start;}
.home-rec .rec-pool{display:flex;flex-direction:column;gap:8px;}
.home-rec .rec-pool+.rec-pool{border-top:1px solid var(--line);padding-top:10px;margin-top:2px;}
.home-rec .rec-pool-h{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text);display:flex;align-items:baseline;gap:8px;}
.home-rec .rec-pool-h .dim{font-weight:500;letter-spacing:0;text-transform:none;font-size:11px;}
.home-rec .rec-miss{display:block;}
.home-rec .rec-why,.home-rec .rec-miss{font-size:11.5px;color:var(--muted);line-height:1.4;}
.home-rec .rec-miss{border-top:1px solid var(--panel2);padding-top:8px;display:block;}
.home-rec .rec-miss b{color:var(--body2);font-weight:600;}
.home-rec .rec-last{font-size:12.5px;color:var(--body2);border-top:1px solid var(--panel2);padding-top:8px;line-height:1.4;}
.home-day .day-block:first-child{margin-top:4px;}
.day-h .dim{color:var(--body2);font-weight:500;}
.lp[data-n="1"]{grid-template-columns:minmax(0,1fr);}
.lp[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr));}
.lp[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr));}
.lp[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr));}
.lp[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr));}
.lp[data-n="5"] .lpt{grid-column:span 2;} .lp[data-n="5"] .lpt:nth-child(n+4){grid-column:span 3;}
.lp[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr));}
.is-strip .day-h.m{display:none;}
@media (min-width:701px){
  .is-strip .lp{display:flex;align-items:stretch;margin:0 0 10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;box-sizing:border-box;}
  .is-strip .lp.red{border-left:3px solid var(--red);} .is-strip .lp.amber{border-left:3px solid var(--amber);}
  .is-strip .lp.green{border-left:3px solid var(--green);} .is-strip .lp.blue{border-left:3px solid var(--blue);}
  .is-strip .lp>.day-h{margin:0;flex:0 0 176px;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:12px 16px;border-right:1px solid var(--line);box-sizing:border-box;}
  .is-strip .lpt{flex:1 1 auto;min-width:0;flex-direction:row;flex-wrap:wrap;align-items:center;min-height:0;padding:12px 18px;gap:10px 18px;border:0;border-radius:0;box-shadow:none;}
  .is-strip .lpt.red,.is-strip .lpt.amber,.is-strip .lpt.green,.is-strip .lpt.blue{border-left:0;}
  .is-strip .lpt .h{flex:0 0 auto;}
  .is-strip .lpt .big{white-space:nowrap;}
  .is-strip .lpt .line{flex:1 1 0;min-width:0;}
  .is-strip .lpt .lines{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 18px;flex:1 1 100%;min-width:0;order:10;padding-top:8px;border-top:1px solid var(--panel2);}
  .is-strip .lpt .ln{display:inline-flex;gap:5px;white-space:nowrap;align-items:baseline;}
  .is-strip .lpt .ln .lb{min-width:0;} .is-strip .lpt .ln .who{flex:0 0 auto;}
  .is-strip .lpt .foot{margin:0 0 0 auto;padding:0;}
}
@media (max-width:1567px){
  .home-frame,.home-frame.no-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "rail" "day" "needs";grid-template-rows:auto auto auto auto;}
  .home-frame.no-hero{grid-template-areas:"rail" "day" "needs";grid-template-rows:auto auto auto;}
  .home-rail{position:static;margin-bottom:16px;}
  .home-rail .railgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0 16px;align-items:start;}
  .home-rail .grp+.grp{margin-top:0;}
  .home-rail .grp.rec{grid-column:1 / -1;}
  .home-rail .grp.money{margin-bottom:16px;}
  .home-rail .grp .catlabel{margin-top:16px;}
  .home-rail .grp>.catlabel:first-child{margin-top:0;}
}
@media (max-width:1231px){ .lp[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:899px){
  .lp[data-n="3"],.lp[data-n="4"],.lp[data-n="5"],.lp[data-n="6"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .lp[data-n="5"] .lpt,.lp[data-n="5"] .lpt:nth-child(n+4){grid-column:auto;}
  .lp .lpt:last-child:nth-child(odd){grid-column:1 / -1;}
  .home-rail .railgrid{grid-template-columns:minmax(0,1fr);}
  .home-rail .grp+.grp{margin-top:16px;}
}
/* ---------- 2.18: Checklists, the page ---------- */
.ck-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);}
.ck-ring{width:40px;height:40px;flex:0 0 auto;}
.ck-card .home-shift .step{grid-template-columns:24px minmax(0,1fr) auto;}
.ck-handoff{padding:12px 16px;border-top:1px solid var(--line);background:var(--panel2);}
.ck-note{font-size:12.5px;line-height:1.55;color:var(--body2);white-space:pre-wrap;}
.ck-week td,.ck-week th{padding:9px 10px;white-space:nowrap;}
.ck-week td:first-child{padding-left:16px;}
.ck-shifts{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:900px){.ck-shifts{grid-template-columns:1fr;}}

/* ---------- 2.23: the End Of Shift report prints alone ---------- */
@media print{
  body.printing-eos *{visibility:hidden;}
  body.printing-eos .eos, body.printing-eos .eos *{visibility:visible;}
  body.printing-eos .eos{position:absolute;left:0;top:0;width:100%;box-shadow:none;border:0;}
}
.eos .seclabel:after{display:none;}
@media print{
  body.printing-standup *{visibility:hidden;}
  body.printing-standup .standup, body.printing-standup .standup *{visibility:visible;}
  body.printing-standup .standup{position:absolute;left:0;top:0;width:100%;box-shadow:none;border:0;}
  body.printing-standup .standup input{display:none;}
}

/* ---------- 2.25: mobile Home, direction A (Jose, 2026-09-04) ----------
   One column, one thing at a time: a one-line hero, the tools as a
   swipeable row, the shift or the list as the page, everything else
   behind More. Same for every role. */
.home-more>summary{display:none;}
@media (max-width:700px){
  .home-hero{padding:12px 14px;gap:12px;flex-direction:row;align-items:center;margin-bottom:10px;}
  .home-hero .hs{flex-direction:column;gap:2px;padding-right:12px;border-right:1px solid var(--line);}
  .home-hero .score{font-size:24px;}
  .home-hero .hs .chip{display:none;}
  .home-hero .lead{font-size:14px;line-height:1.3;}
  .home-hero .sec{font-size:11.5px;margin-top:2px;}
  .home-hero .hr{display:none;}
  .lp,.lp[data-n]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin:0 -12px 10px;padding:2px 12px 6px;scrollbar-width:none;grid-template-columns:none;}
  .lp[data-n="1"] .lpt{flex:0 0 100%;}
  .is-strip .lp>.day-h{display:none;} .is-strip .day-h.m{display:flex;}
  .lp .lpt:last-child:nth-child(odd){grid-column:auto;}
  .home-frame,.home-frame.no-hero{grid-template-areas:"hero" "day" "needs" "rail";grid-template-rows:auto auto auto auto;}
  .home-frame.no-hero{grid-template-areas:"day" "needs" "rail";grid-template-rows:auto auto auto;}
  .home-rail{margin-bottom:0;}
  .lp::-webkit-scrollbar{display:none;}
  .lpt{flex:0 0 66%;scroll-snap-align:start;min-height:112px;padding:12px;}
  .lpt .arr{display:none;}
  .home-more{margin-top:12px;}
  .home-more>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:12px 14px;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;font-size:13px;font-weight:600;color:var(--blue);}
  .home-more>summary::-webkit-details-marker{display:none;}
  .home-more>summary::after{content:"›";margin-left:auto;font-size:16px;transition:transform 120ms var(--ease);}
  .home-more[open]>summary::after{transform:rotate(90deg);}
  .home-more[open]>summary{margin-bottom:4px;}
  .home-shift .step{padding:10px 12px;gap:10px;}
  .home-shift .step .who{display:none;}
}


/* ---------- Compliance > Customer Feedback (2.29) and the watch cards (R100) ---------- */
.cdf-toolrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 4px;font-size:12.5px;}
.cdf-toolrow input[type=search]{font:inherit;font-size:13px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 12px;width:260px;}
.cdf-note{border-left:3px solid var(--line-300);font-size:12.5px;padding:12px 16px;margin:10px 0 0;color:var(--muted);}
.cdf-note a{color:var(--blue);font-weight:600;text-decoration:none;}
.cdf-strip .ts-item b{font-size:24px;}
.cdf-under{font-size:12.5px;line-height:1.5;margin:8px 4px 0;}
.cdf-window{padding:18px 20px;}
.cdf-window .set-h{margin:0 0 8px;}
.cdf-line{font-size:13px;line-height:1.55;margin:4px 0;}
.cdf-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.cdf-read{padding:16px 20px;margin-top:14px;border-left:3px solid var(--blue);}
.cdf-read .set-h{margin-bottom:6px;}
.cdf-read a{color:var(--blue);font-weight:600;text-decoration:none;margin-left:6px;}
.cdf-said{padding:16px 18px;}
.cdf-said .set-h{margin-bottom:10px;}
.cdf-bar{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:8px 6px;border-radius:8px;cursor:pointer;}
.cdf-bar:hover,.cdf-bar.on{background:color-mix(in srgb,var(--blue) 6%,transparent);}
.cdf-bar-l{font-size:13px;}
.cdf-bar-n{font-size:13px;font-variant-numeric:tabular-nums;font-weight:700;text-align:right;}
.cdf-bar-t{grid-column:1 / span 2;height:6px;border-radius:99px;background:var(--line);overflow:hidden;}
.cdf-bar-t div{height:100%;border-radius:99px;}
.cdf-praise{padding:16px 20px;margin-top:18px;}
.cdf-praise .set-h{margin-bottom:6px;}
.watch-cards{display:flex;flex-direction:column;gap:14px;}
.watch-card{padding:0;overflow:hidden;}
.wc-head{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--panel2);}
.wc-route{font-size:16px;font-weight:800;letter-spacing:.02em;}
.wc-driver{font-size:13px;color:var(--muted);flex:1;min-width:0;}
.wc-chips{display:flex;gap:8px;}
.wc-row{display:grid;grid-template-columns:72px 1fr auto;gap:8px 18px;align-items:center;padding:14px 20px;border-top:1px solid var(--panel2);}
.wc-row:first-of-type{border-top:0;}
.wc-stop{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;}
.wc-addr{font-size:14px;font-weight:700;line-height:1.4;}
.wc-addr .dcr-tba{margin-left:8px;flex:none;}
.wc-meta{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:3px;}
.wc-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
@media (max-width:700px){.wc-row{grid-template-columns:1fr;}.wc-acts{justify-content:flex-start;}}

/* ---------- the case card: the draft leads, the analysis folds (2.32) ---------- */
.aq-draftbox{margin-top:10px;}
.aq-draftlabel{display:flex;align-items:center;gap:6px;font-size:12.5px;}
.aq-ai-notes{margin-top:8px;}
.aq-ai-notes .aq-ai{font-size:12.5px;color:var(--muted);}

/* stand-up sources: evidence on hover, a clean page at rest (2.35) */
.standup .srcline{display:none;}
.standup div:hover > .srcline{display:block;}
@media (hover:none){.standup .srcline{display:block;}}

/* Address Fixes (2.36) */
.afx-queue{display:flex;flex-direction:column;gap:14px;}
.afx-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--raise-1);overflow:hidden;border-left:3px solid var(--line-300);}
.afx-card.hot{border-left-color:var(--red);}
.afx-card.warm{border-left-color:var(--amber);}
.afx-head{display:flex;align-items:center;gap:12px;padding:14px 18px 10px;flex-wrap:wrap;}
.afx-addr{font-size:16px;font-weight:800;}
.afx-addr small{font-weight:500;color:var(--muted);font-size:13px;margin-left:6px;}
.afx-chips{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;}
.afx-body{display:grid;grid-template-columns:230px minmax(0,1fr) 210px;gap:18px;padding:0 18px 16px;align-items:start;}
.afx-map{position:relative;border-radius:12px;background:var(--panel-2,var(--bg));border:1px solid var(--line);overflow:hidden;min-width:0;}
.afx-tl{width:100%;height:auto;display:block;}
.afx-cap{position:absolute;right:8px;bottom:6px;font-size:10.5px;color:var(--blue);background:var(--panel);padding:2px 7px;border-radius:6px;border:1px solid var(--line);text-decoration:none;}
.afx-ev{font-size:13px;line-height:1.55;min-width:0;}
.afx-ev .what{font-weight:700;margin-bottom:4px;}
.afx-ev .basis{color:var(--muted);}
.afx-evrows{margin-top:8px;font-size:12.5px;line-height:1.6;}
.afx-prop{margin-top:10px;background:var(--blue-soft);border-radius:12px;padding:10px 12px;font-size:13px;}
.afx-prop b{color:var(--blue);}
.afx-prop .why{color:var(--muted);font-size:12.5px;margin-top:3px;}
.afx-hours{font-size:12.5px;margin-top:4px;font-variant-numeric:tabular-nums;}
.afx-answer{margin-top:8px;font-size:12.5px;color:var(--green);}
.afx-acts{display:flex;flex-direction:column;gap:8px;min-width:0;}
.afx-acts .btn{display:block;width:100%;text-align:left;text-decoration:none;}
.afx-meta{font-size:11.5px;color:var(--dim);line-height:1.5;}
.afx-src{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:12.5px;align-items:start;}
.afx-src .k{font-weight:700;white-space:nowrap;}
.afx-src .v{color:var(--muted);}
.afx-src .v b{color:var(--text);font-weight:600;}
.btn{border:1px solid var(--line-300);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;font-weight:600;padding:8px 12px;cursor:pointer;}
.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--on-solid);}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
@media (max-width:900px){.afx-body{grid-template-columns:1fr;}.afx-chips{margin-left:0;}}
.afx-amz{margin-top:8px;font-size:12.5px;color:var(--text);padding:6px 10px;border-left:2px solid var(--line-300);}

/* Home: The Day (2.38) */
.day-block{margin:18px 0 6px;}
.day-h{display:flex;align-items:baseline;gap:10px;margin:0 2px 10px;}
.day-h b{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text);}
.day-h .dim{font-size:12.5px;}
.day-block .lp{margin-bottom:10px;}

/* Home tile line items (2.40): one row per person */
.lpt .lines{display:flex;flex-direction:column;gap:3px;font-size:12.5px;line-height:1.35;}
.lpt .ln{display:flex;align-items:baseline;gap:8px;min-width:0;}
.lpt .ln .lb{flex:0 0 auto;font-weight:700;color:var(--muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase;min-width:64px;}
.lpt .ln .who{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--body2);}
.lpt .ln.amber .who{color:var(--amber);font-weight:600;}
.lpt .ln .pg{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--muted);}

/* ============================================================
   SOFT SIGNAL (2.44, R147, Jose 2026-09-07: "B and 1")
   Replaces the 2.42 Solid States layer on the same class names.
   Tokens: --on-solid (text on the primary button) stays from 2.42;
   the four percentages and the segmented-rail wells below are the
   whole dark theme of the chip system (Jose signed off by picking B).
   ============================================================ */
:root{ --on-solid:#fff; }
:root[data-theme="dark"]{ --on-solid:var(--ink9); }
/* =====================================================================
   SOFT SIGNAL: THE CHIP LAYER. Scoped to so it can share a canvas.
   One formula for every chip:
     fill = color-mix(in srgb, SIG  FILL%,  --panel)
     text = color-mix(in srgb, SIG  INK%,   --text)
   SIG is the semantic token (--red, --amber, --green, --teal, --blue-deep,
   --gold-ink, or --body2 for a plain fact). FILL/INK are the only numbers
   that change between light and dark, so dark is re-valued, never inverted.
   Two silhouettes: OUTCOME = pill r99 with a 6px leading dot in SIG;
   FACT = tag r6, no dot. SELECTION = raised segment or blue-soft tab, blue
   text. COUNT = the sidebar badge, the one solid fill left in the app.
   Light: fill 12, ink 82, hover 18. Dark: fill 18 (amber 22), ink 72, hover 26.
   Every scope is declared three times (explicit dark, nested dark, system
   dark) and once for an explicit light island, so a light stage stays light
   when the page is flipped to dark.
   ===================================================================== */
:root{ --sig-fill:12%; --sig-ink:82%; --sig-hover:18%; --fill-amber:var(--sig-fill);
  --seg-well:color-mix(in srgb, var(--text) 6%, var(--panel)); --seg-on:var(--panel); --seg-edge:0 0 0 0 transparent; }
:root[data-theme="dark"]{ --sig-fill:18%; --sig-ink:72%; --sig-hover:26%; --fill-amber:22%;
  --seg-well:var(--panel2); --seg-on:color-mix(in srgb, var(--text) 9%, var(--panel2)); --seg-edge:inset 0 0 0 1px var(--line-strong); }


/* 1. base box, every family (the plain fact). ONE height: 22px, whatever the font size. */
:is(.chip,.st-chip,.cb-cell,.cdf-tag,.tag-chip,.wbadge,.att-pill,.ts-delta,.badge,.ai-chip,.tier,:where(.fc) .seg,.err-chip,.cellpill,.rb-tier){
  --sig:var(--body2);
  display:inline-flex; align-items:center; gap:6px; box-sizing:border-box;
  height:22px; padding:0 8px; margin:0; border:0; border-radius:6px;
  font-family:inherit; font-size:11px; font-weight:700; line-height:1; letter-spacing:0;
  font-variant-numeric:tabular-nums; white-space:nowrap; vertical-align:middle; text-decoration:none;
  background:color-mix(in srgb, var(--sig) var(--sig-fill), var(--panel));
  color:color-mix(in srgb, var(--sig) var(--sig-ink), var(--text));
  transition:background var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease), color var(--m-fast) var(--ease);
}
:is(.chip,.st-chip,.cb-cell,.cdf-tag,.tag-chip,.badge,.ai-chip,.tier,:where(.fc) .seg,.cellpill) :is(b,strong,.n){ font-weight:800; color:inherit; font-variant-numeric:tabular-nums; }
:is(.chip,.st-chip,.cb-cell,.badge,.ai-chip) svg{ width:12px; height:12px; stroke-width:2; margin:0; flex:0 0 auto; color:var(--sig); vertical-align:0; }
/* the small size: tags, week badges, inbox titles, anything the template sets to 10px. Same 22px box, smaller word. */
:is(.cdf-tag,.tag-chip,.wbadge,.att-pill,.ts-delta,.bp-t .chip,.amz-title .chip,.chip.sm,.st-chip.sm){ font-size:10px; padding:0 7px; }
:is(.fc .seg){ font-size:12.5px; padding:0 9px; }

/* 2. OUTCOME: pill + leading dot. The dot is the signal; the fill is a whisper of it. */
:is(.chip.bad,.chip.hot,.chip.c-up,.chip.warn,.chip.good,.chip.ok,.chip.c-down,.chip.info,.chip.award,
  .st-approved,.st-filed_won,.st-denied,.st-expired,.st-filed_pending,
  .cb-filed,.cb-partial,.cb-open,.cb-missed,.cb-awaiting,
  .badge.clean,.badge.mid,.badge.hot,.cdf-tag.bad,.tag-chip.lic-bad,.err-chip,.att-pill.warn,.att-pill.bad,.att-pill.mid){
  border-radius:99px; padding-left:8px; padding-right:10px; }
:is(.chip.bad,.chip.hot,.chip.c-up,.chip.warn,.chip.good,.chip.ok,.chip.c-down,.chip.info,.chip.award,
  .st-approved,.st-filed_won,.st-denied,.st-expired,.st-filed_pending,
  .cb-filed,.cb-partial,.cb-open,.cb-missed,.cb-awaiting,
  .badge.clean,.badge.mid,.badge.hot,.cdf-tag.bad,.tag-chip.lic-bad,.err-chip,.att-pill.warn,.att-pill.bad,.att-pill.mid)::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--sig); flex:0 0 auto; }
/* an inline icon (clock, check, alert) takes the dot's place: never both */
:is(.chip,.st-chip,.cb-cell,.badge):has(> svg)::before{ display:none; }

/* 3. the hue: one custom property per meaning (semantic color law).
   .chip.bad / .hot / .c-up get their FIRST red rule here: pre-2.42 had none (they fell to grey). */
:is(.chip.bad,.chip.hot,.chip.c-up,.st-denied,.cb-missed,.badge.hot,.cdf-tag.bad,.tag-chip.lic-bad,.err-chip,.att-pill.bad,.ts-delta.bad,.cellpill.ht-bad){ --sig:var(--red); }
:is(.chip.warn,.st-expired,.cb-partial,.cb-open,.badge.mid,.att-pill.warn,.cellpill.ht-warn){ --sig:var(--amber); --sig-fill:var(--fill-amber); }
:is(.chip.good,.chip.ok,.chip.c-down,.st-approved,.st-filed_won,.cb-filed,.badge.clean,.ts-delta.good){ --sig:var(--green); }
:is(.chip.info,.st-filed_pending,.cb-awaiting){ --sig:var(--teal); }
:is(.tag-chip.qual,.att-pill.mid,.fc .fp,.chip.on,.chip.sel,.chip[aria-pressed="true"]){ --sig:var(--blue-deep); }
:is(.fc .f){ --sig:var(--green); } :is(.fc .b){ --sig:var(--red); }
/* gold: fill from --gold, text and DOT from --gold-ink (a --gold dot is 1.72:1 on its own fill in light; --gold-ink is 4.69:1 and equals --gold in dark) */
.chip.award{ --sig:var(--gold-ink); background:color-mix(in srgb, var(--gold) var(--sig-fill), var(--panel)); }
.chip.award::before{ background:var(--gold-ink); }
/* tier chips: the template passes the tier token through --sig (style="--sig:var(--fantastic)"); the hero tier is the same class */
.tier, .rb-tier{ font-size:10.5px; padding:0 9px; }
.tier.hero{ font-size:12.5px; height:24px; padding:0 10px; }

/* 4. quiet facts that stop being boxes: an empty state is text, body2 600 (AA on the current-week wash too) */
.cb-cell:is(.cb-pending,.cb-dash), .chip.empty{ background:transparent; padding:0; height:auto; color:var(--body2); font-weight:600; border-radius:0; }
.cb-cell.cb-dash{ color:var(--dim); font-weight:400; font-size:12.5px; }
.chip.ink{ --sig:var(--text); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text); }
.chip.dim{ --sig:var(--muted); }
.ai-chip{ --sig:var(--body2); cursor:pointer; }
.ai-chip svg{ color:var(--blue-deep); }
.ai-chip.go{ color:color-mix(in srgb, var(--green) var(--sig-ink), var(--text)); }
.tag-chip.tag-add{ background:transparent; border:1px dashed var(--line-strong); color:var(--muted); cursor:pointer; }
.tag-chip.tag-add:hover{ color:var(--blue-deep); border-color:var(--blue); }
.tag-chip.tag-x{ cursor:pointer; }
.tag-chip.tag-x:hover{ --sig:var(--red); background:color-mix(in srgb, var(--red) var(--sig-hover), var(--panel)); }
.att-pill.stale{ background:transparent; border:1px dashed var(--line-strong); color:var(--dim); font-weight:500; }
.wbadge{ --sig:var(--muted); }

/* 5. interaction: hover deepens the tint one notch and lifts raise-1; focus = the app ring.
   Tap chips carry role="button" tabindex="0" from the template, so the ring is reachable by keyboard. */
:is(.chip.tap,.chip[role="button"],a.chip,button.chip,.ai-chip,.cellpill.tap){ cursor:pointer; }
:is(.chip.tap,.chip[role="button"],a.chip,button.chip,.ai-chip,.is-hover):hover,
:is(a,[onclick]):hover > .cb-cell, .is-hover{
  background:color-mix(in srgb, var(--sig) var(--sig-hover), var(--panel)); box-shadow:var(--shadow); }
.chip.award.is-hover, .chip.award.tap:hover{ background:color-mix(in srgb, var(--gold) var(--sig-hover), var(--panel)); }
:is(.chip,.st-chip,.cb-cell,.ai-chip,.tag-chip):focus-visible, .is-focus{ outline:2px solid var(--blue); outline-offset:2px; }
:is(.chip,.st-chip,.cb-cell,.ai-chip,.tag-chip):is([aria-disabled="true"],.disabled,:disabled){ --sig:var(--dim); color:var(--muted); cursor:not-allowed; box-shadow:none; }

/* 6. SELECTION: the timeframe rail is a segmented control (r8 well, r6 segments);
   the selected segment is raised, its text is blue. Third-level nav pills and
   the disputes legend filters are blue-soft tabs. Selection is blue TEXT, never a blue block. */
.fbar .chips2, .chips2.rail{ display:inline-flex; gap:2px; padding:2px; border-radius:8px; background:var(--seg-well); border:1px solid var(--line);
  white-space:nowrap; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%; }
.fbar .chips2::-webkit-scrollbar{ display:none; }
.fchip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border:0; border-radius:6px;
  background:transparent; color:var(--body2); font-size:11.5px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; cursor:pointer; white-space:nowrap;
  transition:background var(--m-fast) var(--ease), color var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease); }
.fchip:hover{ color:var(--text); background:color-mix(in srgb, var(--text) 5%, transparent); }
.fchip.on{ background:var(--seg-on); color:var(--blue-deep); box-shadow:var(--shadow), var(--seg-edge); }
.fchip.on:hover{ background:var(--seg-on); color:var(--blue-deep); }
.fchip b{ font-weight:800; }
.fchip:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
/* the disputes legend: each fchip is a live filter (setDState) wrapping a state pill and its count.
   Rest = neutral fact tag; .on = blue-soft tab + blue-deep text + raise-1. Declared AFTER .fchip.on with
   equal or higher specificity for every state, so a selected filter can never lose its look. */
.legend .fchip{ height:28px; padding:0 9px 0 4px; gap:6px; border-radius:6px; background:color-mix(in srgb, var(--body2) var(--sig-fill), var(--panel)); color:var(--body2); font-size:11px; font-weight:700; box-shadow:none; }
.legend .fchip:hover{ background:color-mix(in srgb, var(--body2) var(--sig-hover), var(--panel)); color:var(--text); }
.legend .fchip.on, .legend .fchip.on:hover{ background:var(--blue-soft); color:var(--blue-deep); box-shadow:var(--shadow); }
.legend .fchip .st-chip{ height:20px; }
.legend .fchip.dq-clear{ background:transparent; color:var(--red); padding:0 8px; }
/* .dtabs sit loose on the canvas (not in a well), so the selected tab takes the blue-soft look, never the raised segment */
.dtabs .fchip{ height:30px; border-radius:6px; }
.dtabs .fchip.on, .dtabs .fchip.on:hover{ background:var(--blue-soft); color:var(--blue-deep); box-shadow:none; }
.sec-pill{ display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:6px; font-size:12.5px; font-weight:600; line-height:1;
  color:var(--body2); background:transparent; border:0; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--m-fast) var(--ease), color var(--m-fast) var(--ease); }
.sec-pill:hover{ color:var(--text); background:color-mix(in srgb, var(--text) 5%, transparent); }
.sec-pill.on{ background:var(--blue-soft); color:var(--blue-deep); font-weight:700; }
.sec-pill:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* 7. COUNT: the sidebar badge. The one solid fill: on ink, tiny, must be found across a room.
   Ink digits (4.57:1) are the layer default; .white shows the README's white digits (3.72:1) for Jose to choose. */
.nav-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; border-radius:99px;
  background:var(--side-badge); color:var(--ink9); font-size:10px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }

/* 8. .fact text and .lbtn controls. A hued fact takes the SAME 82%-toward-ink text as its pill, so it is AA on a hovered row too. */
.fact{ font-size:11.5px; font-weight:600; color:var(--body2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fact b{ color:var(--text); font-weight:700; }
.fact.tap{ cursor:pointer; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:color var(--m-fast) var(--ease), text-decoration-color var(--m-fast) var(--ease); }
.fact.tap:hover{ color:var(--blue-deep); text-decoration-color:currentColor; }
.fact.tap:hover b{ color:var(--blue-deep); }
.fact.red{ color:color-mix(in srgb, var(--red) var(--sig-ink), var(--text)); }
.fact.amber{ color:color-mix(in srgb, var(--amber) var(--sig-ink), var(--text)); }
.fact.blue{ color:var(--blue-deep); }
.lbtn, a.lbtn{ display:inline-flex; align-items:center; justify-content:center; gap:5px; box-sizing:border-box; min-height:32px;
  font-family:inherit; font-size:12.5px; font-weight:700; line-height:1; padding:8px 16px 7px; border-radius:var(--radius-sm);   /* R365: the README's button, every kind (Codex on pull request 190) */
  background:var(--panel); color:var(--blue); border:1px solid var(--line-strong); text-decoration:none; cursor:pointer; white-space:nowrap;   /* README 11: secondary = blue text */
  transition:background var(--m-fast) var(--ease), color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease); }
.lbtn:hover{ border-color:var(--blue); color:var(--blue-deep); }
.lbtn.primary, a.lbtn.primary{ background:var(--blue); color:var(--on-solid); border-color:var(--blue); }
.lpt .foot{ flex-wrap:wrap; }
.lpt .foot .chip{ margin-right:auto; }
.lpt .foot .lbtn{ margin-left:auto; }

/* 9. touch and motion. Selectors repeat the specificity of the rules they override. */
@media (pointer:coarse){
  .fchip{ height:36px; padding:0 12px; }
  .legend .fchip{ height:36px; }
  .sec-pill{ height:36px; }
  .lbtn, a.lbtn{ min-height:40px; }
  :is(.chip.tap,.chip[role="button"],.ai-chip,.fact.tap){ position:relative; }
  :is(.chip.tap,.chip[role="button"],.ai-chip,.fact.tap)::after{ content:""; position:absolute; inset:-8px -2px; }
  :is(a,[onclick]) > .cb-cell{ position:relative; }
  :is(a,[onclick]) > .cb-cell::after{ content:""; position:absolute; inset:-7px -2px; }
}
@media (prefers-reduced-motion:reduce){
  :is(.chip,.st-chip,.cb-cell,.fchip,.sec-pill,.lbtn,.tag-chip,.ai-chip,.fact){ transition-duration:80ms !important; transition-property:opacity !important; }
}

/* ============================================================
   People: the person dialog cards (2.47, model A)
   ============================================================ */
.ud-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;font-size:12.5px;}
.ud-card-h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;}
.ud-card-h .dim{font-weight:500;letter-spacing:0;text-transform:none;font-size:11.5px;}
.ud-lab{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:6px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;}
.ud-lab .dim{font-weight:500;}
.ud-exc{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);}
.ud-exc-row{display:flex;align-items:center;gap:10px;justify-content:space-between;}
.ud-preview{margin-top:10px;font-size:12.5px;color:var(--body2);padding:8px 10px;background:var(--panel);border-radius:8px;border:1px solid var(--line);}
.ud-card select{font:inherit;font-size:12.5px;padding:6px 10px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);}
.seg{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--seg-well);border:1px solid var(--line);flex-wrap:wrap;}
.seg-b{border:0;background:transparent;color:var(--body2);font:inherit;font-size:11.5px;font-weight:600;height:26px;padding:0 10px;border-radius:6px;cursor:pointer;}
.seg-b.on{background:var(--seg-on);color:var(--blue-deep);box-shadow:var(--shadow),var(--seg-edge);}
.lbtn.sm{min-height:24px;padding:3px 8px;font-size:11px;}
@media (pointer:coarse){.seg-b{height:36px;}}
/* the profiles card: the buttons keep to one group and wrap as a group (R172) */
.pp-acts{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
/* R188: the Vehicle Inspections numbers are filters */
.dvic-tile{transition:box-shadow 120ms cubic-bezier(.2,.7,.3,1);}
.dvic-tile:hover{box-shadow:var(--raise-1);}
.dvic-tile.on{outline:2px solid var(--blue);outline-offset:-2px;}
.dvic-tile:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* 2.54: checklist sections, the loadout time step and its history */
.ck-sec{padding:8px 14px 4px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--panel2);background:var(--panel2);}
.lo-edit{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;}
.lo-edit input[type=time]{font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);min-width:0;}
.lo-chart{position:relative;display:flex;align-items:flex-end;gap:6px;overflow-x:auto;padding-bottom:2px;}
.lo-bar{flex:1 0 30px;max-width:56px;min-width:30px;cursor:pointer;text-align:center;}
.lo-col{height:110px;display:flex;align-items:flex-end;}
.lo-col>div{width:100%;border-radius:4px 4px 0 0;transition:opacity 120ms cubic-bezier(.2,.7,.3,1);}
.lo-bar:hover .lo-col>div{opacity:.8;}
.lo-n{height:18px;line-height:18px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.lo-d{height:26px;font-size:10px;line-height:13px;color:var(--dim);}
.lo-target{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--amber);pointer-events:none;}
.lo-bar.on .lo-n,.lo-bar.on .lo-d{color:var(--blue);font-weight:700;}
.lo-bar.on .lo-col{box-shadow:inset 0 -2px 0 var(--blue);}
/* 2.55: the Drivers rank on a coaching row; a counted return */
.cq-rank{display:inline-block;min-width:22px;margin-right:6px;font-size:13px;font-weight:770;color:var(--muted);font-variant-numeric:tabular-nums;}
.t tr.rt-counted td:first-child{box-shadow:inset 3px 0 0 var(--red);}

/* ---------- 2.61 To Dispute, the mix (R256, Jose's pick 10-15): the card
   tells the story (what Amazon owes, where in the week, every line by
   problem with its proof) and the dispute text sits beside it. One column
   on a phone. Tokens only. */
.td-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:4px 0 14px;}
.td-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  box-shadow:inset 3px 0 0 var(--sig,var(--dim));min-width:0;}
.td-tile .td-micro{display:block;}
.td-tile b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--sig,var(--text));line-height:1.25;}
.td-tile span.sub{font-size:11px;color:var(--dim);}
.td-micro{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);}
.td-sec{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin:16px 2px 8px;}
.td-sec::after{content:"";flex:1;height:1px;background:var(--line);}
.td-sec.red{color:var(--red);}
.td-sec.red::after{background:color-mix(in srgb, var(--red) 35%, var(--line));}
.td-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;margin:0 0 14px;padding:0;}
.td-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line);}
.td-head .ttl{font-size:14px;font-weight:700;}
.td-head .per{font-size:12.5px;color:var(--dim);}
.td-head .inv{font-size:11.5px;color:var(--dim);}
.td-head .rt{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.td-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) 170px;gap:24px;padding:18px;
  border-bottom:1px solid var(--line);align-items:center;}
.td-owed .num-hero{font-size:42px;font-weight:800;letter-spacing:-.03em;color:var(--red);font-variant-numeric:tabular-nums;line-height:1.05;}
.td-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--panel2);margin-top:10px;}
.td-bar span{display:block;height:100%;background:color-mix(in srgb, var(--blue) 30%, var(--panel));}
.td-bar span.td-bar-gap{background:var(--red);}
.td-bar-lab{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--dim);margin-top:5px;font-variant-numeric:tabular-nums;}
.td-bar-lab b{color:var(--text);}
.td-sum{font-size:13px;color:var(--muted);line-height:1.45;margin-top:8px;}
.td-week{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;min-width:0;}
.td-week-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.td-leg{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--dim);}
.td-leg:first-of-type{margin-left:auto;}
.td-leg i{width:8px;height:8px;border-radius:2px;display:inline-block;}
.td-leg i.r,.td-wd i.r{background:var(--red);}
.td-leg i.a,.td-wd i.a{background:color-mix(in srgb, var(--amber) 60%, var(--panel));}
.td-week-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:8px;}
.td-wd{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;height:118px;gap:2px;min-width:0;}
.td-wd i{display:block;border-radius:4px;}
.td-wv{font-size:10.5px;font-weight:700;color:var(--amber);text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;}
.td-wv.r{color:var(--red);font-weight:800;}
.td-wl{font-size:10.5px;font-weight:700;color:var(--dim);text-align:center;margin-top:4px;white-space:nowrap;}
.td-wl.r{color:var(--red);}
.td-ring{display:flex;flex-direction:column;align-items:center;gap:4px;}
.td-ring svg circle{fill:none;stroke-width:6;}
.td-ring .bg{stroke:color-mix(in srgb, var(--amber) 18%, var(--panel));}
.td-ring .fg{stroke:var(--amber);stroke-linecap:round;}
.td-ring .n{font-size:21px;font-weight:800;fill:var(--text);font-family:inherit;}
.td-ring .u{font-size:9.5px;font-weight:700;fill:var(--dim);font-family:inherit;letter-spacing:.06em;}
.td-ring-due{font-size:12.5px;font-weight:700;color:var(--muted);text-align:center;}
.td-ring-sub{font-size:11px;color:var(--dim);text-align:center;}
.td-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;padding:18px;align-items:start;}
.td-lh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.td-lh b{font-size:14px;}
.td-lh span{font-size:12.5px;color:var(--dim);}
.td-tbl{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-variant-numeric:tabular-nums;}
.td-tr{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.9fr);
  gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px;align-items:center;}
.td-tr .num{text-align:right;}
.td-tr .td-w{padding-left:34px;}
.td-th{background:var(--panel2);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
.td-th .td-w{padding-left:0;}
.td-how{font-size:12.5px;color:var(--dim);}
.td-red{color:var(--red);font-weight:700;}
.td-prob{display:flex;gap:10px;align-items:flex-start;padding:13px 16px 9px;
  background:color-mix(in srgb, var(--red) 5%, var(--panel));border-bottom:1px solid color-mix(in srgb, var(--red) 18%, var(--line));}
.td-pn{width:24px;height:24px;flex:none;border-radius:99px;background:color-mix(in srgb, var(--red) var(--sig-fill), var(--panel));
  color:var(--red);display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;}
.td-pt{flex:1;min-width:0;font-size:12.5px;color:var(--muted);line-height:1.45;}
.td-pt b{display:block;font-size:14px;color:var(--text);margin-bottom:2px;}
.td-pa{font-size:14px;font-weight:800;color:var(--red);white-space:nowrap;}
.td-proof{display:flex;flex-wrap:wrap;gap:8px;padding:9px 16px 13px 50px;border-bottom:1px solid var(--line);}
.td-proof .chip{--sig:var(--green);}
.td-tot{background:var(--panel2);border-bottom:0;}
.td-tot .td-w{padding-left:0;font-size:14px;}
.td-tot .td-red{font-size:16px;font-weight:800;}
.td-panel{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:12px;}
.td-panel .h b{font-size:14px;}
.td-panel .h div{font-size:12.5px;color:var(--dim);margin-top:2px;line-height:1.4;}
.td-text{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:12.5px;color:var(--muted);
  line-height:1.55;white-space:pre-wrap;max-height:340px;overflow:auto;}
.td-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.td-btns .lbtn,.td-panel>.lbtn{min-height:38px;font-size:12.5px;font-weight:700;}
.td-panel .lbtn.filed{--sig:var(--green);background:color-mix(in srgb, var(--green) var(--sig-fill), var(--panel));
  color:var(--green);border-color:color-mix(in srgb, var(--green) 35%, var(--line));}
.td-note{font-size:12.5px;color:var(--dim);line-height:1.4;}
.td-links{display:flex;flex-direction:column;gap:6px;}
.td-done{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:12px;align-items:start;}
.td-dc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0;}
.td-dc .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.td-dc .hd b{font-size:14px;}
.td-dc .hd .chip,.td-dc .hd .st-chip{margin-left:auto;}
.td-dc .big{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;}
.td-dc .big.good{color:var(--green);}
.td-dc .tx{font-size:12.5px;color:var(--dim);line-height:1.45;}
.td-cw{display:flex;align-items:center;gap:10px;font-size:12.5px;}
.td-cw .w{flex:0 0 auto;min-width:96px;color:var(--dim);white-space:nowrap;}
.td-cw .tr{flex:1;height:6px;border-radius:99px;background:var(--panel2);overflow:hidden;min-width:30px;}
.td-cw .tr span{display:block;height:100%;background:var(--dim);}
.td-cw b{min-width:78px;text-align:right;font-variant-numeric:tabular-nums;}
.td-dc details summary{cursor:pointer;font-size:12.5px;color:var(--blue);}
@media (max-width:1100px){
  .td-done{grid-template-columns:minmax(0,1fr);}
  .td-body{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:760px){
  .td-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .td-top{grid-template-columns:minmax(0,1fr);gap:14px;padding:14px;}
  .td-ring{flex-direction:row;justify-content:center;gap:12px;}
  .td-body{padding:14px;gap:14px;}
  .td-head{padding:12px 14px;}
  .td-tr{grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.95fr);gap:8px;padding:9px 12px;font-size:12.5px;}
  .td-tr .td-w{padding-left:0;}
  .td-tr .td-how{grid-column:1/-1;margin-top:-4px;}
  .td-th span:last-child{display:none;}
  .td-proof{padding:8px 12px 12px;}
  .td-prob{padding:12px 12px 9px;}
  .td-owed .num-hero{font-size:34px;}
}

/* the closed and filed cards fold Every Line into a narrow column */
.td-dc .td-tr{grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.95fr);gap:8px;padding:8px 10px;font-size:12.5px;}
.td-dc .td-tr .td-w{padding-left:0;}
.td-dc .td-tr .td-how{grid-column:1/-1;margin-top:-4px;}
.td-dc .td-th span:last-child{display:none;}
.td-dc .td-proof{padding:8px 10px 10px;}
.td-dc .td-prob{padding:10px;}
.td-proof .chip{white-space:normal;height:auto;min-height:22px;padding:4px 8px;line-height:1.25;text-align:left;max-width:100%;}
.td-wv{overflow:visible;}
@media (max-width:760px){
  .td-th .lg{display:none;}
  .td-week-bars{gap:3px;}
  .td-wv,.td-wl{font-size:9.5px;letter-spacing:-.01em;}
}
@media (max-width:1100px){ .td-dc .td-th .lg{display:none;} }
.td-dc .td-th .lg{display:none;}

/* ---------- 2.67 The Fleet Desk (R266, Jose's pick 10-16): one month of
   fleet invoices, its timeline and six checks. Tokens only. */
#fd-months{margin:0 0 12px;}
.fd-time{padding:16px 20px;margin:0 0 16px;}
.fd-th{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.fd-th b{font-size:16px;}
.fd-th .dim{font-size:12.5px;}
.fd-tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.fd-tl>div{display:flex;flex-direction:column;gap:4px;padding:0 14px;border-left:1px solid var(--line);min-width:0;}
.fd-tl>div:first-child{padding-left:0;border-left:0;}
.fd-tl b{font-size:14px;}
.td-micro.good{color:var(--green);}
.td-micro.warn{color:var(--amber);}
.fd-tx{font-size:12.5px;color:var(--muted);line-height:1.45;}
.fd-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start;}
.fd-main{display:flex;flex-direction:column;gap:12px;min-width:0;}
.fd-step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;gap:12px;}
.fd-step.bad{border-color:color-mix(in srgb, var(--red) 40%, var(--line));}
.fd-step.mute{opacity:.85;}
.fd-n{width:28px;height:28px;flex:none;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  background:var(--panel2);color:var(--muted);}
.fd-step.good .fd-n{background:color-mix(in srgb, var(--green) var(--sig-fill), var(--panel));color:var(--green);}
.fd-step.warn .fd-n{background:color-mix(in srgb, var(--amber) var(--sig-fill), var(--panel));color:var(--amber);}
.fd-step.bad .fd-n{background:color-mix(in srgb, var(--red) var(--sig-fill), var(--panel));color:var(--red);}
.fd-sb{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.fd-sh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.fd-sh b{font-size:14px;}
.fd-sh .st-chip{margin-left:auto;}
.fd-sub{display:flex;flex-direction:column;gap:6px;font-size:12.5px;}
.fd-tbl{border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:12.5px;font-variant-numeric:tabular-nums;}
.fd-tr{display:grid;grid-template-columns:1.3fr 1fr 2.4fr .6fr;gap:10px;padding:8px 12px;border-top:1px solid var(--line);align-items:center;}
.fd-tr:first-child{border-top:0;}
.fd-tr .num{text-align:right;}
.fd-thr{background:var(--panel2);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
.fd-cap{grid-template-columns:1.8fr repeat(6,minmax(0,.7fr));}
.fd-rate{grid-template-columns:2.2fr 1.6fr repeat(3,minmax(0,.9fr));}
.fd-ord{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.fd-oc{border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;}
.fd-oc b{font-size:16px;font-weight:800;}
.fd-side{display:flex;flex-direction:column;gap:12px;}
.fd-side .panel{margin:0;padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.fd-kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;}
.fd-kv span{color:var(--muted);}
.fd-kv b{font-variant-numeric:tabular-nums;text-align:right;}
@media (max-width:1100px){ .fd-grid{grid-template-columns:minmax(0,1fr);} }
@media (max-width:760px){
  .fd-tl{grid-template-columns:minmax(0,1fr);gap:12px;}
  .fd-tl>div{padding:0;border-left:0;}
  .fd-tr{grid-template-columns:1.2fr 1fr .5fr;}
  .fd-tr>span:nth-child(3){grid-column:1/-1;order:9;}
  .fd-cap{grid-template-columns:1.6fr repeat(3,minmax(0,1fr));}
  .fd-cap>span:nth-child(3),.fd-cap>span:nth-child(4),.fd-cap>span:nth-child(5){display:none;}
  .fd-rate{grid-template-columns:1.6fr repeat(3,minmax(0,.9fr));}
  .fd-rate>span:nth-child(2){display:none;}
  .fd-ord{grid-template-columns:minmax(0,1fr);}
}

/* ---------- 2.69 The Vehicle Ledger (R266): every vehicle of the month by day */
.fl-wrap{overflow:auto;max-height:62vh;border:1px solid var(--line);border-radius:12px;background:var(--panel);}
.fl-grid{border-collapse:separate;border-spacing:0;font-size:11.5px;font-variant-numeric:tabular-nums;}
.fl-grid th,.fl-grid td{padding:3px 4px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--line);}
.fl-grid th{position:sticky;top:0;background:var(--panel2);z-index:3;font-size:10px;font-weight:700;color:var(--dim);}
.fl-grid th.fl-dow{top:22px;font-weight:600;color:var(--dim);}
.fl-grid .fl-v{position:sticky;left:0;background:var(--panel);z-index:2;text-align:left;min-width:150px;max-width:200px;overflow:hidden;text-overflow:ellipsis;}
.fl-grid th.fl-v{z-index:4;background:var(--panel2);}
.fl-grid .fl-n{text-align:right;color:var(--dim);}
.fl-c{display:inline-block;width:16px;height:16px;border-radius:4px;box-sizing:border-box;background:transparent;border:1px solid var(--line);}
.fl-c.rr{background:var(--green);border-color:var(--green);}
.fl-c.r{background:color-mix(in srgb, var(--blue) 25%, var(--panel));border-color:color-mix(in srgb, var(--blue) 35%, var(--line));}
.fl-c.u{background:var(--amber);border-color:var(--amber);}
.fl-c.p,.fl-c.pr{background:repeating-linear-gradient(45deg,var(--panel2) 0 3px,var(--panel) 3px 6px);border-color:var(--amber);}
.fl-c.pr{box-shadow:inset 0 0 0 2px var(--amber);}
.fl-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);align-items:center;margin:8px 0;}
.fl-leg span{display:inline-flex;align-items:center;gap:5px;}
.fl-amz td{color:var(--dim);font-size:10.5px;background:var(--panel2);}
@media (max-width:760px){ .fl-wrap{max-height:70vh;} .fl-grid .fl-v{min-width:110px;max-width:130px;} }

/* 2.74: the Tasks icon joined the top bar; at phone width the Predict page's week chip plus six controls must still
   fit 390px, so the buttons and the station chip give a little room back (ui_smoke: #prediction fits 390px) */
@media (max-width:430px){header.top{gap:3px}header.top .icon-btn{width:26px;height:26px;flex:0 0 auto}header.top #stn-btn{padding:0 6px!important}header.top .wkbtn{padding-left:8px;padding-right:8px}header.top #week-btn > svg:first-child{display:none}}

/* ===== R337 (Jose 10-19: "I approve the control set... the same design standard across the board"):
   ONE control set. Every text field, select and text area looks the same, every checkbox and radio
   takes the brand blue, and the four button kinds share one shape. Placed last so it wins over the
   older per-page rules of the same weight; a class built for a special cell (cellnum, the filter
   bars) still decides its own look; a Daily Routes number cell (.cellnum) keeps its own right-aligned style (Codex on pull request 153). Tokens only; motion 120ms on the house easing. */
input:not([type]),input[type=text],input[type=search],input[type=number]:not(.cellnum),input[type=date],input[type=time],
input[type=email],input[type=tel],input[type=password],input[type=url],input[type=month],input[type=datetime-local],
select,textarea{
  font-family:inherit;font-size:13px;color:var(--text);background:var(--panel);
  border:1px solid var(--line-strong);border-radius:8px;padding:6px 10px;min-height:32px;box-sizing:border-box;
  transition:border-color 120ms var(--ease),box-shadow 120ms var(--ease);}
textarea{min-height:64px;line-height:1.45;}
input:not([type]):focus,input[type=text]:focus,input[type=search]:focus,input[type=number]:not(.cellnum):focus,input[type=date]:focus,
input[type=time]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=password]:focus,input[type=url]:focus,
input[type=month]:focus,input[type=datetime-local]:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);}
input:disabled,select:disabled,textarea:disabled{background:var(--panel2);color:var(--muted);cursor:not-allowed;}
input[type=checkbox],input[type=radio]{accent-color:var(--blue);width:16px;height:16px;margin:0 4px 0 0;vertical-align:-3px;cursor:pointer;}
.cbtn,.btn,.linkbtn,a.linkbtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;
  min-height:32px;font-family:inherit;font-size:12.5px;font-weight:700;line-height:1;padding:8px 16px 7px;
  border-radius:8px;background:var(--panel);color:var(--blue);border:1px solid var(--line-strong);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background 120ms var(--ease),color 120ms var(--ease),border-color 120ms var(--ease);}
.cbtn:hover,.btn:hover,.linkbtn:hover{border-color:var(--blue);color:var(--blue-deep);}
.cbtn.primary,.btn.primary,.btn-primary,.lbtn.primary{background:var(--blue);border-color:var(--blue);color:var(--on-solid);}
.cbtn.primary:hover,.btn.primary:hover,.btn-primary:hover,.lbtn.primary:hover{filter:brightness(1.07);color:var(--on-solid);}
.cbtn:focus-visible,.btn:focus-visible,.linkbtn:focus-visible,.lbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.cbtn:disabled,.btn:disabled,.lbtn:disabled{opacity:.55;cursor:not-allowed;}
/* R365: the one small size for every button kind (was 26 hand-sized links) */
.cbtn.sm,.btn.sm,.linkbtn.sm,a.linkbtn.sm{min-height:24px;padding:4px 9px 3px;font-size:11px;}
/* the on/off chip of the approved set (Tasks, Rules first); the segmented choice is the house .seg/.seg-b */
.tog{display:inline-flex;align-items:center;border-radius:99px;padding:5px 11px 3px;line-height:1;font-size:12.5px;font-weight:700;border:1px solid var(--line-strong);color:var(--muted);background:var(--panel);cursor:pointer;user-select:none;}
.tog[aria-pressed="true"]{background:var(--blue-soft);border-color:var(--blue);color:var(--blue);}
.tog:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.saved-ok{color:var(--green);font-size:12.5px;font-weight:650;}
/* R337: the in-page dialog that replaced the browser's alert, confirm and prompt boxes */
dialog.ui-dlg{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);padding:20px 22px 16px;
  width:min(440px,calc(100vw - 32px));box-shadow:var(--shadow-float,var(--shadow));}
dialog.ui-dlg::backdrop{background:color-mix(in srgb,var(--ink9) 42%,transparent);}
dialog.ui-dlg h3{margin:0 0 6px;font-size:16px;font-weight:750;}
dialog.ui-dlg .ui-msg{white-space:pre-wrap;font-size:14px;line-height:1.5;}
dialog.ui-dlg .ui-in{width:100%;margin-top:12px;}
dialog.ui-dlg .ui-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
dialog.ui-dlg .ui-yes.ui-danger{background:var(--red);border-color:var(--red);}

/* Phone width (audit 10-19, real data at 390px): a grid or flex child may
   shrink below its content, so a long word or a wide table scrolls inside
   its own box instead of pushing the page sideways (Playbook, Address
   Fixes and Patterns did). */
.grid>*,.pbx,.pbx>*{min-width:0}
@media(max-width:720px){
  .afx-src{grid-template-columns:1fr}
  .afx-src .k{white-space:normal}
  .pbx-main{width:100%;max-width:100%}
  .pbx-main .chips{flex-wrap:wrap}
}
/* an invoice's dispute chip wraps inside its own cell instead of running
   over the Details column (audit 10-19) */
.td-ban .st-chip{white-space:normal;height:auto;line-height:1.3;max-width:100%;padding-top:4px;padding-bottom:3px}

/* R365 (Jose 10-20: "every single font and tab and all should be at standard"):
   a field the page did not style still reads in the brand typeface with a
   control's corner; a page's own field rule still wins (it is more specific) */
input,select,textarea,button{font-family:inherit;}
input:not([type]),input[type=text],input[type=number]:not(.cellnum),input[type=search],input[type=date],input[type=email],input[type=password],input[type=time],select,textarea{border-radius:8px;}