/* Service Scope: the Board (service-tracking.html), group A restyle 2026-10-14. On top of tracker.css (the Board's layout) and
   servicescope.css (tokens, rows, the rail); the lap bar is css/tracker-lap.css (the Board's one bold element). This file only refines:
   the toolbar and filters, the columns of the RO numbers re-measured for Archivo Semi-Expanded, the columns view's stations, the
   side sheet's sections and RO photos, the Check in dialog's RO plate and the parts question. Nothing here renames a class. */

/* ---------- the toolbar and the filters ---------- */
.bar{gap:10px 12px}
.counts{gap:6px 20px}
.counts span{white-space:nowrap}
.counts .hot b{color:var(--flag-ink)}
.counts .warm b{color:var(--safety-ink)}
.filters .find{border-radius:var(--sf-r-control);min-height:38px;height:38px;padding:6px 12px}
/* the placeholder "Find an RO, car, customer or note" in Atkinson Hyperlegible Next needs more than the old 250 px (system test 2026-10-15) */
@media (min-width:861px){.filters .find{width:300px}}
.pick{border-radius:var(--sf-r-control);min-height:38px;background:var(--panel)}
.pick:hover{border-color:var(--muted)}
.pick:focus-within{border-color:var(--sf-flow-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--sf-flow) 28%,transparent)}
.pick span{font-weight:600}
.pick select,.pick input,.pick select:hover,.pick input:hover{border:0;min-height:34px;height:34px}
.pick select:focus,.pick input:focus{border:0}
.filters .check{gap:8px}

/* ---------- the timing view ---------- */
/* (Archivo Semi-Expanded is wider than the old face: the RO column holds "DEMO-1154" at every width) */
.t-labels{font-weight:600;font-size:12.5px}
.t-grid{grid-template-columns:118px minmax(220px,1fr) 150px 290px 84px 84px 40px}
@media (max-width:1180px){
  .t-grid{grid-template-columns:100px minmax(170px,1fr) 104px minmax(130px,180px) 64px 64px 36px}
}
.empty-rows{padding:24px 18px}
.empty-rows b{display:block;color:var(--ink);font:700 16px/1.25 var(--sf-font-display);margin:0 0 3px}

/* ---------- the columns view: each column head is a station on the line ---------- */
.board-cols{gap:12px}
.col h2{position:relative;padding:6px 2px 9px 20px;border-bottom:2px solid var(--rail-done)}
.col h2::before{content:"";position:absolute;left:2px;top:50%;width:10px;height:10px;margin-top:-6px;border-radius:50%;background:var(--panel);box-shadow:inset 0 0 0 2.5px var(--rail-done)}
.col.clock-stopped h2{border-bottom:2px dashed var(--safety-ink)}
.col.clock-stopped h2::before{border-radius:3px;box-shadow:inset 0 0 0 2.5px var(--safety-ink)}
.col.unknown h2::before{box-shadow:inset 0 0 0 2.5px var(--flag)}
.col .count{font:700 15px var(--sf-font-display)}
/* (a card holds its clocks' screen-reader words: they're placed against the card, so they never widen the page) */
.col .card{position:relative;border-radius:var(--sf-r-control);padding:10px 12px}
.col .card:hover{background:var(--raised)}
.col .card .clocks b{font:600 18px var(--sf-font-display)}

/* ---------- the side sheet: the car's band, then its sections ---------- */
.sheet-sec{gap:10px;padding:18px 0}
.sheet-sec h3{font:700 18px/1.2 var(--sf-font-display)}
.sheet-body > .msg{border-left:0;border-radius:var(--sf-r-control);position:relative;padding:9px 12px 9px 28px}
.sheet-body > .msg::before{content:"";position:absolute;left:11px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--flag)}
.sheet-body > .msg.ok::before{background:var(--bay)}
.sheet-body > .msg.info::before{background:var(--accent)}
.upnext b{font-weight:700}
.facts dd{font-weight:700}
.band-meta{color:var(--head-muted)}
/* the RO photos: square prints with the panel's radius, the button under each */
#secPhotos .ro-photos{gap:10px}
#secPhotos .ro-photos li{width:104px}
#secPhotos .ro-photos a{width:104px;height:104px;border-radius:var(--sf-r-control);border-color:var(--line)}
#secPhotos .ro-photos a:hover{border-color:var(--sf-petrol)}

/* ---------- Check in a car: the RO number is typed onto a plate ---------- */
#checkInDlg #fRo{font:700 22px/1 var(--sf-font-display);letter-spacing:.04em;min-height:52px;height:52px;padding:0 14px;text-transform:none}
#checkInDlg #fRo::placeholder{font:500 15px var(--sf-font-text);letter-spacing:0}
#checkInDlg .ro-match{border:1px solid color-mix(in srgb,var(--safety) 45%,transparent);border-left-width:1px;border-radius:var(--sf-r-panel);position:relative;padding:12px 14px 12px 34px}
#checkInDlg .ro-match::before{content:"";position:absolute;left:14px;top:19px;width:10px;height:10px;border-radius:3px;background:var(--safety)}
#checkInDlg .ro-match h3{font:700 18px/1.2 var(--sf-font-display)}
#checkInDlg .checks{gap:10px 20px}

/* ---------- the parts question and its order form ---------- */
#pqDlg .pq-send textarea{min-height:84px;resize:vertical}
#pqDlg .dlg-foot .spacer,#poDlg .dlg-foot .spacer{flex:1}
#poDlg .po-line{align-items:end}
#poDlg .po-line .field.qty{flex:0 0 76px}
#poDlg .po-line [data-remove]{min-height:40px;min-width:40px}

/* ---------- the wall display ---------- */
@media (min-width:1800px){
  .t-grid{grid-template-columns:150px minmax(280px,1fr) 190px 370px 110px 110px 44px}
  .rows .card-ro{font-size:20px}
  .col h2{font-size:17px}
}
/* ---------- a phone ---------- */
@media (max-width:860px){
  .rows .card-ro{font-size:17px}
}
@media (max-width:640px){
  .counts .group{border-left:0;padding-left:0}
}
@media (pointer:coarse){
  .filters .find{min-height:44px;height:44px}
  .pick{min-height:44px}
  #secPhotos .ro-photos .btn{min-height:44px}
}

/* ================= redesign pass 2026-10-24 (builder C) ================= */
/* the toolbar: what's counted, then which cars, then the filters */
.counts{font-size:15px}
.counts b{font-size:var(--sf-t-lg)}
.seg button{font-size:15px}
.filters .find{font-size:15px}
.pick{font-size:14px}
.pick.date input{width:140px}
.filters .check{font-size:15px}
/* the cars: facts about a car (rental, loaner, lane, no email) are quiet outlines; states keep their colour and word */
.rows .card .tag:is(.flag,.lane,.imp),.rows .card .tag:not([class*=" "]){background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-weight:600}
.rows .card .tag{font-size:13px}
.rows .card.at-risk{background:color-mix(in srgb,var(--flag) 4%,var(--panel))}
.rows .card.at-risk:hover,.rows .card.on{background:var(--raised)}
.card-ro{font-size:16px}
.t-labels{font-size:13.5px}
.col .card{padding:12px 14px}

/* the side sheet reads top-down: the car and its state in the band, the next action (Phase), who has it, the job, then the
   details and the history; each section is named for what it is for */
.sheet-sec{padding:20px 0}
.sheet-sec + .sheet-sec{border-top:1px solid var(--line-soft)}
.sheet-sec h3{font-size:19px;letter-spacing:-.005em}
.sheet-sec label{font-size:15px}
.band-close{width:44px;height:44px}
.band-veh{font-size:18px}
.band-who,.band-meta,.band-clocks{font-size:14px}
#secMove{position:relative}
#secMove::before{content:"";position:absolute;left:-22px;top:20px;bottom:20px;width:4px;border-radius:0 4px 4px 0;background:var(--sf-flow)}
@media (max-width:640px){ #secMove::before{left:-16px} }
dialog.side-sheet :is(button.btn,select,input:not([type=checkbox])){min-height:44px}
@media (max-width:860px){
  .rows .card .tag{font-size:13.5px}
}
@media (min-width:861px){ .filters .find{width:230px} .pick.date input{width:132px} }

/* The sheet's car timeline (2026-10-25): "Waiting on" above it, the role filter, the merged list (tracker-board.js historyHtml). */
.tl-wait{margin:0 0 10px;padding:8px 10px;border-left:3px solid var(--line);background:var(--panel);border-radius:var(--radius)}
.tl-wait.risk{border-left-color:var(--flag)}
.tl-wait .h-when{color:var(--muted);font-variant-numeric:tabular-nums}
.tl-also{margin:4px 0 0;padding-left:18px}
.tl-roles{display:flex;flex-wrap:wrap;margin:0 0 10px;max-width:100%}
.hist li.risk b{color:var(--flag-ink)}