/* Service Center Tracking: what is the hub's own, on top of the product's shared language (css/base.css: tokens, the app bar,
   controls, tags, tables, dialogs). The hub's header tabs, the lane switch and the Board (which is also the RO list since
   2026-10-12: the scope switch, the filters and the side sheet are here), the Dashboard's results sheet. Used by
   service-tracking.html, service-rotation.html, service-parts.html, service-src.html and service-dashboard.html.

   The concept is a timing board (spec: .agents/handoffs/2026-10-12-service-center-tracking-hub.md, "Visual design"):
   one row per car, an eleven-segment phase rail, a phase clock and a total clock in tabular figures, and one bold element,
   the lap bar. */

:root{
  /* the Board's own tokens (the shared palette and roles are in css/base.css) */
  --rail-off:#d9d7d0;     /* a phase still ahead */
  --rail-done:#3b4a5f;    /* a phase the car has been through */
  --lap-a:#24364f;        /* lap bar segments: two tones of asphalt, so neighbours read apart */
  --lap-b:#4c5d75;
  --lap-ink:#ffffff;
}
:root[data-theme="dark"]{
  --rail-off:#2a3c55;
  --rail-done:#8fa0b6;
  --lap-a:#9fb0c6;
  --lap-b:#7d8fa8;
  --lap-ink:#0d1828;
}

/* ---------- the shell's header: the shared app bar (css/base.css) plus the hub's tabs ---------- */
.tk-head .store-switch .chip{font-size:14px}
/* (the tabs are the shared .ab-nav/.ab-tabs; .tk-nav/.tk-tabs are kept as their names for the pages' scripts and checks) */

/* ---------- the shell's tab badges (every hub page: My jobs' new assignments, the Lanes' open help) ---------- */
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:3px;
  background:var(--signal);color:var(--asphalt);font:700 12px/1 var(--font);font-variant-numeric:tabular-nums}
.tab-badge[data-badge="lanes"],.tab-badge[data-badge="advisor"],.tab-badge[data-badge="calls"]{background:var(--flag);color:#fff}
:root[data-theme="dark"] .tab-badge[data-badge="lanes"],:root[data-theme="dark"] .tab-badge[data-badge="advisor"],:root[data-theme="dark"] .tab-badge[data-badge="calls"]{color:#0d1828}
/* The hub's band carries up to ten tabs (Home, My day, Board, Calls, Rotation, Parts, SRC, Dashboard, My jobs, Lanes). Between the
   tablet row (≤1100px, where the tabs take a line of their own) and a wide screen the band must stay one line rather than drop
   Settings and Sign out under the logo: up to 1440px they are their icons (as on a tablet), with six or more tabs the tabs close
   up, and with nine (up to 1260px) or ten (up to 1500px) the tabs take their own row. Only shown tabs count (hidden ones carry .hidden). */
@media (min-width:1101px) and (max-width:1440px){
  .tk-head .ah-btn .t{display:none}
  .tk-head .ah-btn{padding:0 9px}
  .tk-head:has(.tk-tabs > li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden)) .tk-tabs a{padding-left:9px;padding-right:9px}
}
@media (min-width:1101px) and (max-width:1260px){
  .tk-head:has(.tk-tabs > li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden)){gap:6px 16px;padding-top:6px}
  .tk-head:has(.tk-tabs > li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden)) .tk-nav{order:5;width:calc(100% + 48px);margin:0 -24px;overflow-x:auto;scrollbar-width:none;padding:0 14px}
  .tk-head:has(.tk-tabs > li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden)) .tk-tabs a{padding:10px 10px 9px}
}
@media (min-width:1101px) and (max-width:1500px){
  .tk-head:has(.tk-tabs > li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden)){gap:6px 16px;padding-top:6px}
  .tk-head:has(.tk-tabs > li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden)) .tk-nav{order:5;width:calc(100% + 48px);margin:0 -24px;overflow-x:auto;scrollbar-width:none;padding:0 14px}
  .tk-head:has(.tk-tabs > li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden) ~ li:not(.hidden)) .tk-tabs a{padding:10px 10px 9px}
}
/* ---------- the role screens (Home, My day, My jobs, Lanes, Work queues, Calls): one way to say "not here yet" ----------
   A list the page fills from its first answer says "Loading…" until then, in the same muted line as an empty list (the scripts
   always draw a row or an empty state once they have the answer, so this never stays). */
.adv-queues[aria-busy="true"]:empty::before,.fl-page #names:empty::before,.fl-page #jobs:empty::before,.fl-page #lanes:empty::before,.home-page #cars:empty::before{
  content:"Loading…";display:block;padding:14px 18px;color:var(--muted);font-size:14px;grid-column:1 / -1;list-style:none}
.lane-empty b,.q-empty b{color:var(--ink);font-weight:600}

/* ---------- the page frame ---------- */
.tk-main{padding:18px 24px 48px;max-width:1600px;margin:0 auto}
:root[data-theme="dark"] .seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}

/* ---------- controls the hub adds to the shared ones ---------- */
.tag.lane{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.tag.mail{background:var(--safety-wash);color:var(--safety-ink)}
.tag.flag{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-soft)}
.tag.prio{background:var(--safety-wash);color:var(--safety-ink)}
/* (an RO brought over from the old RO Log: a dashed outline, history rather than state) */
.tag.imp{background:transparent;color:var(--muted);box-shadow:none;outline:1px dashed var(--line);outline-offset:-1px}

/* ---------- dialogs (the shared ones are in css/base.css) ---------- */
dialog h2 .sub{font:500 15px var(--font);color:var(--muted);margin-left:6px}
dialog fieldset{border:0;border-top:1px solid var(--line-soft);margin:0;padding:12px 0 0;display:flex;flex-direction:column;gap:12px;min-width:0}
dialog legend{font:600 15px var(--font-cond);padding:0 8px 0 0;color:var(--ink)}
dialog .row{align-items:start}
dialog input:not([type=checkbox]),dialog select{height:40px}
.dlg-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0 -22px;padding:14px 0 22px;border-top:1px solid var(--line-soft);position:sticky;bottom:-22px;background:var(--panel)}
.checks{display:flex;gap:18px;flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="reduce"]) dialog[open]{animation:tk-in .16s ease-out}
}
@keyframes tk-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- pieces every tab shares (Board, Rotation, Parts, SRC, Dashboard) ---------- */
/* a tab's own sections (Parts: Part orders | Writer stats; SRC: Calendar | Upcoming | Check-in | Fleet): words on a hairline,
   the one you're on underlined in Signal orange, like the header's tabs */
.pt-tabs,.src-tabs{display:flex;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pt-tab,.src-tab{font:600 15px var(--font);color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;padding:11px 14px 9px;cursor:pointer;white-space:nowrap}
.pt-tab:hover,.src-tab:hover{color:var(--ink)}
.pt-tab[aria-selected="true"],.src-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--signal)}
/* a table that scrolls sideways keeps everything inside it (a screen-reader-only heading would otherwise widen the page) */

/* state words: a tag always says its state in words, the colour only backs it up */
.tag{display:inline-flex;align-items:center;font:600 12px/1 var(--font);border-radius:3px;padding:3px 6px;background:var(--line-soft);color:var(--ink);white-space:nowrap}
.tag.wait{background:var(--safety-wash);color:var(--safety-ink)}
.tag.risk,.tag.back{background:var(--flag-wash);color:var(--flag-ink)}
.tag.lane{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.tag.mail{background:var(--safety-wash);color:var(--safety-ink)}
.tag.flag{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-soft)}
.tag.prio{background:var(--safety-wash);color:var(--safety-ink)}
/* (an RO brought over from the old RO Log: a dashed outline, history rather than state) */
.tag.imp{background:transparent;color:var(--muted);box-shadow:none;outline:1px dashed var(--line);outline-offset:-1px}

/* ---------- dialogs ---------- */
dialog{border:0;border-radius:var(--radius-lg);padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 32px);background:var(--panel);color:var(--ink);box-shadow:0 24px 60px var(--shadow)}
dialog::backdrop{background:var(--backdrop)}
dialog form{display:flex;flex-direction:column;gap:14px;padding:22px 24px}
dialog h2{margin:0;font:600 24px/1.1 var(--font-cond)}
dialog h2 .sub{font:500 15px var(--font);color:var(--muted);margin-left:6px}
dialog fieldset{border:0;border-top:1px solid var(--line-soft);margin:0;padding:12px 0 0;display:flex;flex-direction:column;gap:12px;min-width:0}
dialog legend{font:600 15px var(--font-cond);padding:0 8px 0 0;color:var(--ink)}
dialog .row{align-items:start}
dialog input:not([type=checkbox]),dialog select{height:40px}
.dlg-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0 -22px;padding:14px 0 22px;border-top:1px solid var(--line-soft);position:sticky;bottom:-22px;background:var(--panel)}
.hint{font-size:13px;color:var(--muted);margin:0}
.msg{font-size:13px;margin:0}
.msg.err{color:var(--flag-ink)}
.checks{display:flex;gap:18px;flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="reduce"]) dialog[open]{animation:tk-in .16s ease-out}
}
@keyframes tk-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* =====================================================================================================
   The Board
   ===================================================================================================== */

/* ---------- the lap bar: open cars' average time in each phase, as one bar ---------- */
.lap{margin:0 0 18px}
.lap-head{display:flex;align-items:baseline;gap:12px;margin:0 0 8px;flex-wrap:wrap}
.lap-head h2{margin:0;font:600 22px/1.1 var(--font-cond)}
.lap-head .how{font-size:13px;color:var(--muted)}
.lap-bar{display:flex;gap:2px;height:46px;align-items:stretch}
.lap-seg{flex:var(--w) 1 0;min-width:4px;background:var(--lap-a);color:var(--lap-ink);display:flex;flex-direction:column;justify-content:center;padding:0 8px;overflow:hidden;position:relative}
.lap-seg:nth-child(even){background:var(--lap-b)}
.lap-seg:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.lap-seg:last-child{border-radius:0 var(--radius) var(--radius) 0}
/* a phase that stops the shop's clock (waiting on parts or the customer) is hatched: time there isn't the shop's */
.lap-seg.stopped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:repeating-linear-gradient(135deg,var(--safety) 0 4px,transparent 4px 8px)}
.lap-seg .n{font:600 13px/1.1 var(--font-cond);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lap-seg .m{font:500 13px/1.2 var(--font-cond);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lap-seg.narrow .n,.lap-seg.narrow .m{display:none}
.lap-empty{height:46px;display:flex;align-items:center;padding:0 14px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);font-size:14px}
.lap-key{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.lap-key li{white-space:nowrap}
.lap-key b{font:600 13px var(--font-cond);color:var(--ink)}

/* ---------- the toolbar: counts, which cars, lane, view, Check in; then the filters ---------- */
.bar{display:flex;align-items:center;gap:12px 12px;flex-wrap:wrap;margin:0 0 10px}
.counts{display:flex;gap:6px 18px;margin:0;font-size:15px;color:var(--muted);flex-wrap:wrap;align-items:baseline}
.counts b{font:600 20px/1 var(--font-cond);color:var(--ink);margin-right:4px}
.counts .hot b{color:var(--flag-ink)}
.counts .warm b{color:var(--safety-ink)}
/* (a second group of counts: the closed total, the lanes) sits behind a hairline */
.counts .group{display:inline-flex;gap:18px;padding-left:18px;border-left:1px solid var(--line)}
.bar .spacer{flex:1}

/* the filters: one wrapping strip under the toolbar; each menu is a small labelled box */
.filters{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin:0 0 12px}
.filters .find{width:250px;min-height:36px;height:36px;padding:5px 10px;background:var(--panel)}
.picks{display:contents}
.filters-toggle{display:none}
.pick{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 4px 0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);font-size:13px;color:var(--muted);cursor:pointer}
.pick:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 28%,transparent)}
.pick span{white-space:nowrap}
.pick select,.pick input{border:0;background:transparent;min-height:32px;height:32px;padding:2px 6px;width:auto;max-width:160px;font-size:14px;font-weight:600;box-shadow:none}
.pick select:focus,.pick input:focus{box-shadow:none;background:transparent}
.pick.date input{max-width:140px}
.filters .check{padding:0 4px;min-height:36px;color:var(--ink)}
.list-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 0}
.list-foot:has(#shown:empty):has(#moreBtn.hidden){display:none}

/* ---------- timing view: one row per car ---------- */
.timing{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.t-grid{display:grid;grid-template-columns:104px minmax(220px,1fr) 150px 300px 84px 84px 40px;column-gap:16px;align-items:center;padding:0 14px}
.t-labels{font-size:13px;color:var(--muted);min-height:36px;border-bottom:1px solid var(--line)}
.t-labels .r{text-align:right}
.rows .card{border-bottom:1px solid var(--line-soft);position:relative}
.rows .card:last-child{border-bottom:0}
.rows .card > .t-grid{min-height:58px;padding-top:8px;padding-bottom:8px}
.rows .card.at-risk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--flag)}
.rows .card{cursor:pointer}
.rows .card:hover,.rows .card.on{background:var(--raised)}
.rows .card.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--signal)}
/* a closed car is history: quieter, its clocks stopped */
.rows .card.closed .card-veh,.rows .card.closed .tech .who,.rows .card.closed .card-ro{color:var(--muted)}
.rows .card.closed .clock.total{color:var(--muted)}
.ro-cell{min-width:0}
.opened{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.card-ro{font:600 15px var(--font-cond);letter-spacing:.01em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-ro.none{color:var(--muted);font-weight:500}
.car{min-width:0}
.card-veh{font-weight:600;display:flex;align-items:center;gap:6px;min-width:0}
.card-veh .veh{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-ind{display:inline-flex;flex:none;color:var(--muted)}
.card-sub .adv{color:var(--muted)}
.card-sub{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:2px}
.card-sub .cust{color:var(--ink)}
.tech{font-size:14px;min-width:0}
.tech .who{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tech .job{font-size:13px;color:var(--muted);white-space:nowrap}
.tech .unassigned{color:var(--muted)}
.clock{font:600 20px/1 var(--font-cond);text-align:right;white-space:nowrap}
.clock.phase{color:var(--signal-ink)}
.clock.phase.paused{color:var(--muted)}
.clock.total{color:var(--ink)}
/* the words are for screen readers on wide screens (the column heads say them), and shown on phones */
.clock small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;font:500 12px var(--font);color:var(--muted)}

/* the phase rail: one segment per phase (eleven by default), the ones behind filled, the current one orange and taller */
.rail-wrap{min-width:0}
.rail{display:flex;gap:3px;align-items:flex-end;height:14px}
.rail i{flex:1;height:8px;background:var(--rail-off);border-radius:1px}
.rail i.done{background:var(--rail-done)}
.rail i.stop{background-image:repeating-linear-gradient(135deg,transparent 0 3px,rgba(255,255,255,.35) 3px 5px)}
.rail i.now{height:14px;background:var(--signal)}
.rail i.now.stop{background-color:var(--safety)}
.rail-name{font:600 15px/1.2 var(--font-cond);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-name .by{font:400 13px var(--font);color:var(--muted)}
.rail-name.lost{color:var(--flag-ink)}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="reduce"]) .rows.first .rail i.now{animation:tk-breathe 1.4s ease-in-out 1}
}
@keyframes tk-breathe{0%,100%{opacity:1}50%{opacity:.35}}

/* the row's open button (the keyboard's way into the side sheet; a pointer can click anywhere on the car) */
.more{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--muted);cursor:pointer;justify-self:end}
.more:hover,.card:hover .more,.card.on .more{border-color:var(--line);background:var(--panel);color:var(--ink)}
.empty-rows{padding:28px 14px;color:var(--muted)}

/* ---------- columns view: a column per phase ---------- */
.board-cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:10px;overflow-x:auto;align-items:start;padding-bottom:8px}
.col{background:transparent;display:flex;flex-direction:column;gap:6px;min-height:120px}
.col h2{margin:0;padding:6px 2px 6px;font:600 16px/1.2 var(--font-cond);display:flex;align-items:center;gap:8px;border-bottom:3px solid var(--rail-done)}
.col.clock-stopped h2{border-bottom-style:dashed;border-bottom-color:var(--muted)}
.col .count{font:600 15px var(--font-cond);color:var(--muted);margin-left:auto}
.col.unknown h2{color:var(--flag-ink);border-bottom-color:var(--flag)}
.col .empty{color:var(--muted);font-size:13px;padding:6px 2px;margin:0}
.col .cards{display:flex;flex-direction:column;gap:6px}
.col .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:9px 10px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;cursor:pointer}
.col .card:hover{border-color:var(--muted)}
.col .card.at-risk{border-left:3px solid var(--flag)}
.col .card.on{border-left:3px solid var(--signal)}
.col .card .car,.col .card .card-sub{grid-column:1 / -1}
.col .card .card-ro{align-self:center}
.col .card .more{width:30px;height:30px}
.col .card .card-sub .tech{flex-basis:100%;display:flex;gap:8px;align-items:baseline;color:var(--ink)}
.col .card .card-sub .tech .who{display:inline}
.col .card .clocks{grid-column:1 / -1;display:flex;gap:14px;align-items:baseline;margin-top:4px;font-size:13px;color:var(--muted)}
.col .card .clocks b{font:600 17px var(--font-cond);color:var(--ink)}
.col .card .clocks b.phase{color:var(--signal-ink)}
.col .card .clocks b.phase.paused{color:var(--muted)}

/* ---------- RO figures: one technician per row ---------- */
.tech-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.tech-row{display:flex;gap:8px;align-items:center}
.tech-row input{min-width:0}
.tech-row .t-num{flex:1}
.tech-row .t-hrs{flex:2}

/* ---------- the side sheet: one car, opened from its row, like the hard card clipped to its RO ---------- */
dialog.side-sheet{position:fixed;inset:0 0 0 auto;margin:0;width:min(480px,100vw);height:100dvh;max-height:100dvh;max-width:100vw;border-radius:0;display:none;flex-direction:column;overflow:hidden;box-shadow:-18px 0 48px var(--shadow)}
dialog.side-sheet[open]{display:flex;max-height:100dvh}
dialog.side-sheet form{padding:0}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="reduce"]) dialog.side-sheet[open]{animation:tk-slide .2s ease-out}
}
@keyframes tk-slide{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}

.sheet-band{background:var(--head-bg);color:var(--head-ink);padding:16px 22px 16px;flex:none}
.band-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.band-ro{margin:0;font:600 32px/1 var(--font-cond);letter-spacing:.005em}
.band-close{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--head-ink);border:1px solid rgba(255,255,255,.24);border-radius:var(--radius);cursor:pointer}
.band-close:hover{background:rgba(255,255,255,.08)}
.band-veh{margin:8px 0 0;font-size:17px;font-weight:600}
.band-who{margin:2px 0 0;font-size:14px;color:var(--head-muted)}
.band-rail{margin:14px 0 0}
.band-rail .rail i{background:rgba(255,255,255,.18)}
.band-rail .rail i.done{background:rgba(255,255,255,.62)}
.band-rail .rail i.now{background:var(--signal)}
.band-rail .rail i.now.stop{background-color:var(--safety)}
.band-phase{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}
.band-phase .rail-name{margin:0;font-size:17px}
.band-phase .rail-name.lost{color:#ffb3aa}
.band-clocks{font-size:13px;color:var(--head-muted)}
.band-clocks b{font:600 19px var(--font-cond);color:var(--head-ink);margin:0 3px 0 10px}
.band-clocks b.run{color:#ff9a5c}
.band-meta{display:flex;gap:4px 16px;flex-wrap:wrap;margin:10px 0 0;font-size:13px;color:var(--head-muted)}
.band-flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.band-flags .tag{background:rgba(255,255,255,.12);color:var(--head-ink);box-shadow:none;outline:0}
.band-flags .tag.risk,.band-flags .tag.back{background:var(--flag);color:#fff}
.band-flags .tag.wait,.band-flags .tag.prio,.band-flags .tag.mail{background:var(--safety);color:#2a2000}

.sheet-body{flex:1;overflow-y:auto;padding:4px 22px 28px}
.sheet-body > .msg{margin:14px 0 0;padding:8px 12px;border-left:3px solid var(--flag);background:var(--flag-wash)}
.sheet-body > .msg.ok{color:var(--ink);border-left-color:var(--bay);background:var(--bay-wash)}
.sheet-body > .msg.info{color:var(--ink);border-left-color:var(--accent);background:var(--info-bg)}
.sheet-sec{padding:16px 0;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:10px}
.sheet-sec:last-child{border-bottom:0}
.sheet-sec h3{margin:0;font:600 18px/1.15 var(--font-cond)}
.sheet-sec .val{margin:0;font-weight:600}
.sheet-sec .hint .none,.sheet-sec .val .none{color:var(--muted);font-weight:400}
.upnext{margin:0;font-size:14px;color:var(--muted)}
.upnext b{color:var(--ink);font-weight:600}
.inline{display:flex;gap:8px;align-items:center}
.inline select{flex:1;min-width:0;height:40px}
.inline.wrap{flex-wrap:wrap}
.job-form{display:flex;flex-direction:column;gap:12px}
.job-form .row{align-items:start}
.job-form .field.narrow{flex:0 1 140px;min-width:110px}
#checkInForm .field.narrow{flex:0 1 140px;min-width:110px}
.job-form input:not([type=checkbox]),.job-form select{height:40px}
.form-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px 18px;margin:0}
.facts dt{font-size:13px;color:var(--muted)}
.facts dd{margin:2px 0 0;font-weight:600}

/* =====================================================================================================
   The Dashboard: a results sheet. The period's lap bar, one continuous strip of headline figures, then plain tables:
   names on the left, figures on the right, tabular numerals, hairlines between rows and nothing boxed twice.
   ===================================================================================================== */
.sheet-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin:4px 0 20px}
.sheet-title h2{margin:0;font:600 30px/1.05 var(--font-cond);letter-spacing:-.005em}
.sheet-title .whose{margin:4px 0 0;color:var(--muted);font-size:15px}
.sheet-controls{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.date-pick input{width:auto;min-height:36px;height:36px;padding:4px 10px;background:var(--panel)}
.sheet .lap{margin-bottom:22px}
.sheet .lap-head h3{margin:0;font:600 22px/1.1 var(--font-cond)}
/* on the sheet the key is always shown: a results sheet is read for its numbers, and narrow phases carry no label */
.sheet .lap-key{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin-top:8px}

/* the headline strip: one bar of figures split by hairlines, not a row of cards */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));margin:0 0 26px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.strip > div{padding:12px 16px 13px;border-left:1px solid var(--line-soft);min-width:0}
.strip > div:first-child{border-left:0}
.strip dt{font-size:14px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip dd{margin:0}
.strip .v{font:600 34px/1.05 var(--font-cond);color:var(--ink);margin-top:2px;white-space:nowrap}
.strip .v small{font:500 17px var(--font-cond);color:var(--muted);margin-left:2px}
.strip .s{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* a block of the sheet: a heading on the ground, then its table on paint */
.block{margin:0 0 26px;min-width:0}
.block-head{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin:0 0 8px}
.block-head h3{margin:0;font:600 20px/1.15 var(--font-cond)}
.block-head .how{margin:0;font-size:13px;color:var(--muted)}
.block h4{margin:0 0 6px;font:600 15px var(--font-cond);color:var(--muted)}
.block > .tbl-wrap,.block > .empty,.block > .pair-charts,.block > .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.block > .empty{margin:0;padding:16px;color:var(--muted);font-size:14px}
.pair-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:0 24px}
.pair-blocks .stack{min-width:0}
.pair-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:18px 28px;padding:14px 16px}
.pair-charts > div{min-width:0}
.sheet .note{font-size:13px;color:var(--muted);margin:-16px 0 22px}
.block .note{margin:8px 0 0}
.nodash{padding:48px 4px;font-size:16px;color:var(--muted)}

/* tables: names left, figures right; the first column stays put when a wide table scrolls sideways on a phone */
/* (the shared table rules are in css/base.css) */
.dt td:first-child{font-weight:600;color:var(--ink)}
.dt th:first-child,.dt td:first-child{position:sticky;left:0;background:var(--panel)}
.dt tr.total td{font-weight:600;border-top:1px solid var(--ink);border-bottom:0;background:var(--raised)}
.dt tr.total td:first-child{background:var(--raised)}
.dt .cnt{display:inline-block;min-width:2.2em;color:var(--muted);font-size:12.5px}
.dt tr.grp th{text-align:left;font:600 14px var(--font-cond);color:var(--ink);background:var(--raised);padding-top:6px;padding-bottom:6px}
.dt .cnt::before{content:"("}.dt .cnt::after{content:")"}
.dt.wide{min-width:1040px}
.dt.windows td:first-child{font-weight:400;color:var(--muted)}

/* simple bars (written, completed, dispatched): the only chart besides the lap bar */
.bars{display:flex;align-items:flex-end;gap:3px;height:120px;padding:14px 16px 0}
.pair-charts .bars{padding:0}
.bars .col2{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bars .pair{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:calc(100% - 18px)}
.bars .b{flex:1;max-width:22px;min-height:1px;border-radius:2px 2px 0 0}
.bars .b.w{background:var(--lap-a)}
.bars .b.c{background:var(--bay)}
.bars .b.d{background:var(--lap-b)}
.bars .lbl{font-size:11px;color:var(--muted);text-align:center;height:18px;line-height:18px;overflow:visible;white-space:nowrap}
.legend{display:flex;gap:16px;font-size:13px;color:var(--muted);padding:6px 16px 12px}
.legend .b.w{background:var(--lap-a)}.legend .b.c{background:var(--bay)}.legend .b.d{background:var(--lap-b)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.block > .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.panel > .tbl-wrap{border-bottom:1px solid var(--line-soft)}

/* Shift hours */
.shift-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:14px 16px;margin:0}
.shift-form .field{flex:1 1 150px}
#shiftsSec #shMsg{margin:8px 0}
/* a month of shifts is long: the list scrolls in its own box, its heads staying on top */
#shiftsSec #shList > .tbl-wrap{max-height:400px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
#shiftsSec #shList thead th{position:sticky;top:0;background:var(--panel);z-index:1}
#shiftsSec #shList thead th:first-child{z-index:2}
#shiftsSec #shList > .empty{background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
#shiftsSec #shList > .empty{margin:0;padding:14px 16px;font-size:14px;color:var(--muted)}

/* ---------- the wall display (a manager's screen read from across the shop, 1800px and wider) ----------
   The Board grows: bigger clocks, RO and car, a taller rail, so the problem rows read from about three metres. */
@media (min-width:1800px){
  .tk-main{max-width:1840px;padding:22px 32px 56px}
  .lap-bar{height:58px}
  .lap-seg .n{font-size:16px}
  .lap-seg .m{font-size:15px}
  .lap-head h2{font-size:26px}
  .counts{font-size:17px}
  .counts b{font-size:26px}
  .t-grid{grid-template-columns:130px minmax(280px,1fr) 190px 380px 110px 110px 44px;column-gap:22px;padding:0 20px}
  .t-labels{font-size:15px;min-height:42px}
  .rows .card > .t-grid{min-height:76px;padding-top:12px;padding-bottom:12px}
  .card-ro{font-size:20px}
  .opened{font-size:14px}
  .card-veh{font-size:18px}
  .card-sub{font-size:15px}
  .tech{font-size:17px}
  .tech .job{font-size:15px}
  .clock{font-size:30px}
  .rail{height:18px;gap:4px}
  .rail i{height:11px}
  .rail i.now{height:18px}
  .rail-name{font-size:18px;margin-top:6px}
  .rail-name .by{font-size:15px}
  .tag{font-size:13px;padding:4px 7px}
  .col .card .clocks b{font-size:22px}
  .board-cols{grid-auto-columns:minmax(270px,1fr)}
}

/* ---------- narrower screens ---------- */
/* (from a tablet on its side down, the hub's tabs take a row of their own under the band's first line, and scroll sideways if
   they ever outgrow it; Settings and Sign out become their icons: css/base.css) */
@media (max-width:1100px){
  .tk-head{gap:6px 16px;padding:6px 24px 0}
  .tk-nav{order:5;width:calc(100% + 48px);margin:0 -24px;overflow-x:auto;scrollbar-width:none;padding:0 14px}
  .tk-tabs a{padding:10px 10px 9px}
}
/* (between a phone and a wide screen the toolbar reads as two lines: the counts, then the switches with Check in at the end) */
@media (min-width:641px) and (max-width:1500px){
  .bar .counts{flex:1 1 100%}
  .bar .spacer{display:none}
  .bar #checkInBtn{margin-left:auto}
}
@media (max-width:1180px){
  .t-grid{grid-template-columns:86px minmax(170px,1fr) 108px minmax(140px,190px) 64px 64px 36px;column-gap:10px}
}
/* (between the phone layout and the full width the advisor and the opening time leave the row: the side sheet still says them) */
@media (min-width:861px) and (max-width:1180px){ .rows .card-sub .adv,.rows .opened .t{display:none} }
@media (max-width:860px){
  .tk-head{padding:6px 16px 0}
  .tk-nav{width:calc(100% + 32px);margin:0 -16px;padding:0 6px}
  .tk-main{padding:14px 16px 40px}
  .t-labels{display:none}
  /* a row becomes three lines: RO and car, then the rail, then the clocks */
  .rows .card > .t-grid{grid-template-columns:1fr auto auto 40px;grid-template-areas:"ro ro ro more" "car car car car" "tech tech tech tech" "rail rail rail rail" ". phase total total";row-gap:6px;column-gap:14px;padding:12px 14px}
  .rows .card .ro-cell{grid-area:ro;display:flex;align-items:baseline;gap:10px}
  .rows .card .car{grid-area:car}
  .rows .card .tech{grid-area:tech;display:flex;gap:8px;align-items:baseline}
  .rows .card .rail-wrap{grid-area:rail}
  .rows .card .clock.phase{grid-area:phase}
  .rows .card .clock.total{grid-area:total}
  .rows .card .more{grid-area:more}
  .clock{font-size:18px;display:flex;align-items:baseline;gap:6px;justify-content:flex-end}
  .clock small{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .filters .find{flex:1 1 200px;width:auto}
  .sheet-head{align-items:flex-start}
  .strip{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:640px){
  .lap-bar{height:34px}
  .lap-seg .m,.lap-seg .n{display:none}
  .lap-key{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  /* the toolbar: the counts on a line of their own, then the switches side by side; the filters fold behind a button */
  .bar .spacer{display:none}
  .counts{flex:1 1 100%;gap:4px 14px}
  .counts .group{gap:14px;padding-left:14px}
  .bar .seg button{padding:5px 9px}
  .bar [data-tk-lane]{order:4}
  .bar #checkInBtn{order:5;flex:1 1 100%}
  .filters-toggle{display:inline-flex;min-height:36px}
  .picks{display:none}
  .filters.show-picks .picks{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
  .pick{flex:1 1 calc(50% - 4px);min-width:0}
  .pick select,.pick input{flex:1;max-width:none;min-width:0}
  .pick.date{flex-basis:100%}
  .sheet-band{padding:14px 16px}
  .sheet-body{padding:4px 16px 24px}
  .band-ro{font-size:28px}
  .sheet-title h2{font-size:26px}
  .sheet-controls{width:100%}
  .sheet-controls .seg{flex:1 1 auto}
  .sheet-controls .seg button{flex:1;padding:5px 8px}
  .strip{grid-template-columns:1fr 1fr}
  .strip > div{border-left:0;border-top:1px solid var(--line-soft);padding:10px 14px}
  .strip > div:nth-child(even){border-left:1px solid var(--line-soft)}
  .strip > div:nth-child(-n+2){border-top:0}
  .strip > div:last-child:nth-child(odd){grid-column:1 / -1}
  .strip .v{font-size:28px}
  .dt th,.dt td{padding:7px 10px}
}

/* ---------- touch screens (tablets, phones): every control the hub draws is at least 44px for a thumb ----------
   (css/mobile.css covers .btn, inputs and the header's buttons; these are the hub's own controls) */
@media (pointer:coarse){
  .seg button,.pick,.pstat,.pt-tab,.src-tab,.filters .check,.month-nav .btn{min-height:44px}
  .filters .find,.date-pick input{min-height:44px;height:44px}
  .pick select,.pick input{min-height:40px;height:40px}
  .more,.band-close{width:44px;height:44px}
  .col .card .more{width:44px;height:44px}
  .spot .turns .btn{min-height:44px}
}
/* the board sheet's phase history (who moved the car when, by name; "(iPad)" for the Service Scope app): from the iOS thread, 2026-10-20 */
.hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hist li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.hist .h-when{color:var(--muted);font-variant-numeric:tabular-nums;min-width:110px}
.hist .h-who{color:var(--muted)}
.sheet-sec .hint.warn{color:var(--warn)}

/* The dispatcher's accept / reject and the "assigned" tag (2026-10-21; js/tracker-dispatch.js): tags in the board's own tag family,
   the decision's actions beside Assign, and the Reject / hand-back dialog's reasons. */
.tag.ok{background:var(--bay-wash);color:var(--bay-ink)}
.tag.asg-tag.off{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.dsp-acts{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}
.w-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.w-row.held{background:color-mix(in srgb,var(--safety-wash) 35%,var(--panel))}
.dsp-detail{color:var(--ink)}
.dsp-reasons{border:0;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.dsp-reasons legend{font-weight:600;margin-bottom:6px}
.dsp-reason{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.dsp-reason:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.dsp-reason input{width:20px;height:20px;margin:0}
.dsp-dlg textarea{width:100%}
.dsp-box{margin:10px 0;padding:10px 12px;border-radius:8px;background:var(--line-soft)}
.dsp-box.rejected{background:var(--flag-wash);color:var(--flag-ink)}
.dsp-box p{margin:0 0 8px}
.dsp-box .dsp-acts{margin-top:4px}