/* ══ PIT BOX v3 — the SHELL (.pb-*) ══ Anatomy: header → clock band (timeline · countdown · car · fuel readouts) → wall-message banner → nav strip → stage (main | secondary screen). Design record: tools/harness/pitbox_v3_countdown.html. Every surface the shell hangs off (wall, dialogs, assign, phone bar) carries .pb-scope, which is where the tokens live — so light mode is ONE override block on body.light-mode .pb-scope. Screen modules style their own bodies in css/pages/pitbox-screens.css and read the same --pb-* tokens. */ .pb-scope { --pb-page: #090b0e; --pb-card: #111620; --pb-card2: #141820; --pb-input: #0f1318; --pb-border: #2a3040; --pb-border2: #1f2530; --pb-text: #dce3ed; --pb-dim: #7a8a9b; --pb-muted: #3a4555; --pb-danger: #ef4444; --pb-ok: #22c55e; --pb-warn: #f59e0b; --pb-info: #6366f1; --pb-ring-track: #1f2530; --pb-on-accent: #0b0e12; --pb-shadow: 0 12px 34px rgba(0, 0, 0, .55); --pb-cond: 'Barlow Condensed', 'Barlow', sans-serif; color: var(--pb-text); } body.light-mode .pb-scope { --pb-page: #f4f6fb; --pb-card: #ffffff; --pb-card2: #f4f6fb; --pb-input: #f0f3f8; --pb-border: #dde2ec; --pb-border2: #e8ecf2; --pb-text: #1a2030; --pb-dim: #8899aa; --pb-muted: #b0b8c4; --pb-ring-track: #e3e8f0; --pb-on-accent: #ffffff; --pb-shadow: 0 10px 30px rgba(20, 30, 50, .14); } #pitbox { overflow-y: auto; } #pb-root { max-width: 1560px; margin: 0 auto; padding: 12px 18px 40px; display: grid; gap: 12px; min-width: 0; } /* ── The chrome is PINNED; only the stage scrolls (desktop) ──────────────── The page used to be one scroller, so reading down a job board or a set table took the event title, the session clock band and the screen nav off the top of the screen — on a page whose whole point is the countdown. The four chrome nodes stay put and `.pb-stage` becomes the scrollport. Scoped ≥601px on purpose: below that `render()` forks to `_renderPhone()`, which builds a different tree (`#pb-root.pbp`) with its own ONE sticky top and `.pbp-content` — these rules must not reach it. `height: 100%` on #pitbox is the same mechanism the work-order takeover already relies on (`#pitbox.pb-has-wo`), so the height genuinely resolves. The stage keeps clipping on X — that is what hides the secondary screen off-stage before it slides in — and per spec `overflow-x: clip` beside a scrolling Y computes to `hidden`, which clips just the same. Every `display` rule here is keyed on `.active` — `.page { display: none }` is (0,1,0) and a bare `#pitbox` is (1,0,0), so an unqualified display here paints the whole Pit Box UNDER whatever page you are actually on (reported as "in some other tabs i see the pit box screen"). */ @media (min-width: 601px) { #pitbox.active { display: flex; flex-direction: column; height: 100%; overflow: hidden; } #pb-root:not(.pbp):not(.pb-wo-open) { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; width: 100%; } #pb-root:not(.pbp):not(.pb-wo-open) > #pb-top, #pb-root:not(.pbp):not(.pb-wo-open) > #pb-band, #pb-root:not(.pbp):not(.pb-wo-open) > #pb-banner, #pb-root:not(.pbp):not(.pb-wo-open) > #pb-navrow { flex: 0 0 auto; } #pb-root:not(.pbp):not(.pb-wo-open) > .pb-stage { flex: 1; min-height: 0; overflow-y: auto; overflow-x: clip; /* The bottom breathing room #pb-root used to carry now belongs to the scrollport, or the last row would sit flush against the frame. */ padding-bottom: 40px; /* Own the overscroll: a wheel past the end of the stage must not start scrolling the page behind it. */ overscroll-behavior: contain; } } /* ── Condensed chrome: the band folds to a summary as the stage scrolls ──── Reported with a screenshot of the board reduced to a strip at the bottom of the window: "the top bar with timing and everything takes a lot of space on the screen, it should collapse to a summary when scrolling down". The chrome above is PINNED, so what it costs it costs for as long as the page is open — ~440px before the first job row on a laptop, and the board is the page. It is ONE class on #pb-root over the SAME nodes the band already paints, not a second summary bar: #pb-cd keeps being patched in place by the one-second tick, the car pill keeps following the rail, and there is nothing that can drift out of step with the expanded state. Everything hidden here is either a control you scroll back up for (the day switcher) or context the board's own head already carries. Scoped ≥601px like the pinned-chrome block: the phone fork builds its own tree with a single sticky top and must not be reached. The class is `.pb-tight`, NOT `.pb-cond` — `--pb-cond` is the Barlow Condensed font token used 59 times in this file, and a class one grep away from a variable is a class nobody can search for. */ @media (min-width: 601px) { /* The HEIGHT of the three chrome boxes is animated in JS (`_tightAnimate`, a FLIP) — the fold flips flex-direction and drops rows out of the flow, and no transition can follow that. What CSS still owns is everything that only RESIZES, and it is declared on the BASE rather than inside `.pb-tight`, or it eases on the way down and snaps on the way back up. Keep these in step with `_TIGHT_MS` / `_TIGHT_EASE` in pitbox.js. */ #pb-root:not(.pbp):not(.pb-wo-open) > #pb-top, #pb-root:not(.pbp):not(.pb-wo-open) > #pb-band, #pb-root:not(.pbp):not(.pb-wo-open) .pb-cd, #pb-root:not(.pbp):not(.pb-wo-open) .pb-cd-lbl, #pb-root:not(.pbp):not(.pb-wo-open) .pb-ev, #pb-root:not(.pbp):not(.pb-wo-open) .pb-nv { transition: padding .19s cubic-bezier(.4, 0, .2, 1), height .19s cubic-bezier(.4, 0, .2, 1), font-size .19s cubic-bezier(.4, 0, .2, 1), letter-spacing .19s cubic-bezier(.4, 0, .2, 1); } #pb-root.pb-tight > #pb-top { padding: 0; } #pb-root.pb-tight .pb-title, #pb-root.pb-tight .pb-sub { display: none; } /* The band: three columns on one line — what · which car · how long left. */ #pb-root.pb-tight .pb-band { padding: 5px 14px; align-items: center; gap: 14px; } #pb-root.pb-tight .pb-band-l { flex-direction: row; align-items: baseline; gap: 12px; } #pb-root.pb-tight .pb-band-head { gap: 10px; flex-wrap: nowrap; min-width: 0; } #pb-root.pb-tight .pb-ev { font-size: 15px; letter-spacing: .04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #pb-root.pb-tight .pb-dayline { white-space: nowrap; } /* Scrolled away: the timeline, the day switcher, the weather, the nags and the fuel readouts. Each is a full row of its own and none of them answers "how long have I got" — which is the only thing the summary owes you. */ #pb-root.pb-tight .pb-tl, #pb-root.pb-tight .pb-dayses, #pb-root.pb-tight .pb-daysw, #pb-root.pb-tight .pb-wx, #pb-root.pb-tight .pb-nags, #pb-root.pb-tight .pb-band-fuel, #pb-root.pb-tight .pb-cd-sub { display: none; } #pb-root.pb-tight .pb-band-car { flex-direction: row; align-items: baseline; gap: 8px; padding-left: 14px; min-width: 0; } #pb-root.pb-tight .pb-band-car .pb-lbl { display: none; } #pb-root.pb-tight .pb-band-r { flex-direction: row; align-items: baseline; gap: 10px; min-width: 0; padding-left: 14px; } #pb-root.pb-tight .pb-cd { font-size: 30px; } #pb-root.pb-tight .pb-cd-lbl { font-size: 11px; letter-spacing: .1em; } /* The nav strip STAYS — it is how you leave the screen you are on — but it gives back a row's worth of height. */ #pb-root.pb-tight .pb-nv { height: 32px; font-size: 12.5px; padding: 0 11px; } #pb-root.pb-tight .pb-nv .material-symbols-outlined { font-size: 18px; } } /* Tablet (601–1100px) is where the fold is worth most: the band's four columns are STACKED at this width, so unfolded it is ~450px of a ~1000px window and the board is a strip. Folded it goes back to one row, the event pickers stand down (a navigation control you scroll up for, exactly like the day switcher — the band still names the event you are in) and the screen strip scrolls sideways rather than wrapping onto a second 40px row. */ @media (min-width: 601px) and (max-width: 1100px) { #pb-root.pb-tight .pb-band { grid-template-columns: minmax(0, 1fr) auto auto; } #pb-root.pb-tight .pb-band-car, #pb-root.pb-tight .pb-band-r { border-top: 0; padding-top: 0; } #pb-root.pb-tight .pb-pick, #pb-root.pb-tight .pb-live-back { display: none; } /* At this width the summary's one line is a fight over ~360px, and the date is the loser: "24 UREN …" beside a full "Wed 26 Aug · day 1 of 4" tells you less than the event's own name does. */ #pb-root.pb-tight .pb-dayline { display: none; } #pb-root.pb-tight .pb-navstrip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; } #pb-root.pb-tight .pb-navstrip::-webkit-scrollbar { display: none; } #pb-root.pb-tight .pb-nv { flex: 0 0 auto; } } @media (prefers-reduced-motion: reduce) { /* `_tightAnimate` checks the same query and skips the height animation; this is the other half. The selectors MIRROR the base block above rather than being written short — `#pb-root:not(.pbp):not(.pb-wo-open) > #pb-band` is (2,2,0) and a bare `#pb-root > #pb-band` is (2,0,0), so the short form loses and the transitions ran on regardless (a pre-existing miss this rule inherited). */ #pb-root:not(.pbp):not(.pb-wo-open) > #pb-top, #pb-root:not(.pbp):not(.pb-wo-open) > #pb-band, #pb-root:not(.pbp):not(.pb-wo-open) .pb-cd, #pb-root:not(.pbp):not(.pb-wo-open) .pb-cd-lbl, #pb-root:not(.pbp):not(.pb-wo-open) .pb-ev, #pb-root:not(.pbp):not(.pb-wo-open) .pb-nv { transition: none; } } /* A work order takes over the whole page (PB.openJob → #pb-root becomes the shared WorkOrder markup). The shared .wk-wo fills its parent via flex:1, so #pb-root must stop being a centered, max-width, block container and become a full-bleed flex column — exactly what #wk-root does on the Workshop page. Keyed off an EXPLICIT class render() toggles on #pitbox (older WebView2 doesn't re-evaluate an ancestor :has() on a dynamic class toggle); the :has() rule stays as belt-and-braces and MUST be its own rule (an engine that can't parse :has() drops the whole selector list). */ #pitbox.active.pb-has-wo { display: flex; flex-direction: column; height: 100%; overflow: hidden; } #pitbox.active:has(> #pb-root.pb-wo-open) { display: flex; flex-direction: column; height: 100%; overflow: hidden; } #pb-root.pb-wo-open { max-width: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; } /* The deadline strip above an open work order. `flex: 0 0 auto` is what keeps the WorkOrder (a flex:1 sibling) filling the rest — without it the strip and the panel would share the height and the composer would land mid-screen. */ .pb-wo-clock { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 7px 16px; border-bottom: 1px solid var(--pb-border); background: var(--pb-card2); } .pb-wo-clock-back { display: inline-flex; align-items: center; gap: 6px; color: var(--pb-dim); font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; min-height: 32px; } .pb-wo-clock-back:hover { color: var(--pb-text); } .pb-wo-clock-back .material-symbols-outlined { font-size: 19px; } .pb-wo-clock-ev { font-family: var(--pb-cond); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } .pb-wo-clock-car { font-family: var(--pb-cond); font-weight: 800; font-size: 13px; color: var(--accent); } .pb-wo-clock-lbl { font-size: 11.5px; color: var(--pb-dim); } .pb-wo-clock-cd { font-family: var(--pb-cond); font-weight: 800; font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; } .pb-wo-clock-cd.hot { color: var(--pb-warn); } @media (max-width: 600px) { .pb-wo-clock { padding: 6px 10px; gap: 8px; } .pb-wo-clock-back .t, .pb-wo-clock-ev { display: none; } .pb-wo-clock-cd { font-size: 18px; } } .pb-loading, .pb-none { color: var(--pb-dim, #7a8a9b); font-size: 13px; padding: 18px 4px; } .pb-empty { padding: 60px 0; text-align: center; } .pb-sp { flex: 1; } .pb-dim { color: var(--pb-dim); } .pb-acc { color: var(--accent) !important; } .pb-note { font-size: 12.5px; color: var(--pb-dim); line-height: 1.4; } .pb-lbl { font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; font-size: 11px; color: var(--pb-dim); } /* The element reset MUST NOT outrank the component classes. `.pb-scope button` is (0,1,1) and `font:` is a SHORTHAND, so it was silently winning family + size + weight over `.pb-nv`, `.pb-btn`, `.pbb-chip`, every screen's own buttons — leaving the whole page's chrome in body Barlow 16px/400 instead of the condensed 700/800 the design specifies (letter-spacing and text-transform survived, which is why it read as "the wrong font" rather than as no styling at all). `:where()` contributes ZERO specificity, so the reset still beats the UA sheet and loses to any class that follows. */ :where(.pb-scope) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } .pb-scope button:disabled { cursor: default; opacity: .5; } .pb-scope .material-symbols-outlined { font-size: 20px; line-height: 1; vertical-align: middle; } :where(.pb-scope) :is(input, select, textarea) { font: inherit; color: inherit; } /* ── Shared atoms ── */ .pb-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 11.5px; border: 1px solid var(--pb-border); color: var(--pb-dim); white-space: nowrap; } .pb-pill .material-symbols-outlined { font-size: 14px; } .pb-pill.blocked { background: rgba(239, 68, 68, .14); border-color: var(--pb-danger); color: var(--pb-danger); } .pb-pill.ready { background: rgba(34, 197, 94, .14); border-color: var(--pb-ok); color: var(--pb-ok); } .pb-pill.togo { background: rgba(245, 158, 11, .14); border-color: var(--pb-warn); color: var(--pb-warn); } .pb-pill.accent { background: rgba(var(--accent-rgb), .16); border-color: var(--accent); color: var(--accent); } .pb-pill.info { background: rgba(99, 102, 241, .14); border-color: var(--pb-info); color: var(--pb-info); } .pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 7px; border: 1px solid var(--pb-border); background: var(--pb-card2); color: var(--pb-text); font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 13px; white-space: nowrap; cursor: pointer; transition: border-color .12s; } .pb-btn:hover { border-color: var(--pb-dim); } .pb-btn .material-symbols-outlined { font-size: 18px; } .pb-btn-acc { background: var(--accent); border-color: var(--accent); color: var(--pb-on-accent); } .pb-btn-acc:hover { opacity: .9; } .pb-btn-danger { border-color: var(--pb-danger); color: var(--pb-danger); } .pb-btn-sm { min-height: 32px; padding: 0 10px; font-size: 12px; } .pb-btn-sm .material-symbols-outlined { font-size: 16px; } .pb-btn-icon { width: 40px; padding: 0; } .pb-btn-sm.pb-btn-icon { width: 32px; } .pb-btn.pb-live { border-color: var(--accent); color: var(--accent); } .pb-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--pb-border); border-radius: 8px; color: var(--pb-dim); background: var(--pb-card2); cursor: pointer; } .pb-iconbtn:hover { border-color: var(--pb-dim); color: var(--pb-text); } .pb-chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pb-border); background: var(--pb-card); font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 12px; color: var(--pb-dim); white-space: nowrap; } .pb-chip.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .12); } .pb-chip .material-symbols-outlined { font-size: 16px; } .pb-seg { display: inline-flex; border: 1px solid var(--pb-border); border-radius: 999px; padding: 2px; background: var(--pb-card); } .pb-seg button { height: 28px; padding: 0 8px; border-radius: 999px; color: var(--pb-dim); display: inline-flex; align-items: center; } .pb-seg button .material-symbols-outlined { font-size: 16px; } .pb-ava { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pb-card2); border: 1px solid var(--pb-border); font-family: var(--pb-cond); font-weight: 700; font-size: 11px; letter-spacing: .04em; color: var(--pb-text); flex: 0 0 auto; } .pb-ava.me { border-color: var(--accent); color: var(--accent); } .pb-panel { background: var(--pb-card); border: 1px solid var(--pb-border); border-radius: 10px; padding: 12px; } .pb-panel > h3 { margin: 0 0 8px; font-family: var(--pb-cond); font-size: 13px; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; display: flex; align-items: center; gap: 8px; } .pb-kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; } .pb-kv .k { color: var(--pb-dim); } .pb-kv .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .pb-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pb-fld input, .pb-fld select, .pb-fld textarea { height: 40px; border: 1px solid var(--pb-border); border-radius: 7px; background: var(--pb-input); padding: 0 10px; font-size: 14px; width: 100%; color: var(--pb-text); } .pb-fld textarea { height: auto; min-height: 64px; padding: 8px 10px; resize: vertical; } .pb-st { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-family: var(--pb-cond); font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; } .pb-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pb-st-todo { color: var(--pb-dim); background: var(--pb-card2); } .pb-st-prog { color: var(--accent); background: rgba(var(--accent-rgb), .1); } .pb-st-block { color: var(--pb-danger); background: rgba(239, 68, 68, .12); } .pb-st-done { color: var(--pb-ok); background: rgba(34, 197, 94, .12); } .pb-st-warn { color: var(--pb-warn); background: rgba(245, 158, 11, .12); } .pb-scr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pb-scr-head h2 { margin: 0; font-family: var(--pb-cond); font-size: 20px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; } /* ── Header ── */ .pb-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pb-brand { display: flex; align-items: center; gap: 10px; } .pb-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; color: var(--pb-on-accent); } /* Matches the global `.page h1` spec (base.css) — the same size and tracking Workshop, Stock, Fleet and the Dashboard use — so the page title reads as part of the app rather than as its own thing. */ .pb-title { margin: 0; font-family: var(--pb-cond); font-size: 22px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; } .pb-sub { color: var(--pb-dim); font-size: 12.5px; } .pb-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* The role control: a segment of every role AT OR BELOW your own. A mechanic has one option, so they get the plain chip and no control — there is no way up the ladder here, only down. `.viewing` says so out loud (the driver portal's rule: a narrowed view is never silent chrome). */ .pb-roleseg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid var(--pb-border); background: var(--pb-card2); } .pb-roleseg > button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; border: 0; background: none; cursor: pointer; font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 12px; color: var(--pb-dim); white-space: nowrap; } .pb-roleseg > button .material-symbols-outlined { font-size: 16px; } .pb-roleseg > button:hover { color: var(--pb-text); } .pb-roleseg > button.on { background: var(--accent); color: var(--pb-on-accent); } .pb-roleseg.viewing { border-color: var(--pb-warn); background: rgba(245, 158, 11, .12); } .pb-roleseg.viewing > button.on { background: var(--pb-warn); color: var(--pb-on-accent); } .pb-roleseg-l { font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .09em; font-weight: 700; font-size: 11px; color: var(--pb-warn); padding: 0 6px 0 8px; } @media (max-width: 1240px) { .pb-roleseg > button:not(.on) .w { display: none; } .pb-roleseg > button:not(.on) { padding: 0 8px; } } .pb-rolechip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--pb-border); font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 12px; color: var(--pb-dim); } .pb-rolechip .material-symbols-outlined { font-size: 16px; } .pb-rolechip[data-role="engineer"] { border-color: var(--pb-info); color: var(--pb-info); } .pb-rolechip[data-role="manager"] { border-color: var(--accent); color: var(--accent); } .pb-ev-sel { background: var(--pb-card2); border: 1px solid var(--pb-border); border-radius: 9px; color: var(--pb-text); font: inherit; font-size: 13px; padding: 7px 10px; max-width: 260px; height: 36px; } .pb-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pb-pick-y { max-width: 108px; } .pb-pick-c { max-width: 190px; } .pb-pick-e { max-width: 260px; } .pb-live-back { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid rgba(var(--accent-rgb), .5); border-radius: 9px; background: rgba(var(--accent-rgb), .1); color: var(--accent); font-family: var(--pb-cond); font-size: 12.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 6px 12px; max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pb-live-back:hover { background: rgba(var(--accent-rgb), .18); } .pb-live-back .material-symbols-outlined { font-size: 16px; } /* ── Clock band ── */ .pb-band { background: var(--pb-card); border: 1px solid var(--pb-border); border-radius: 10px; padding: 12px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 18px; align-items: stretch; } .pb-band-l { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .pb-band-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pb-ev { font-family: var(--pb-cond); font-size: 20px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; } .pb-dayline { color: var(--pb-dim); font-size: 13px; } .pb-daysw { display: inline-flex; border: 1px solid var(--pb-border); border-radius: 999px; padding: 2px; margin-left: auto; } .pb-daysw button { height: 30px; padding: 0 12px; border-radius: 999px; font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 12px; color: var(--pb-dim); } .pb-daysw button.on { background: var(--accent); color: var(--pb-on-accent); } .pb-wx { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--pb-border); color: var(--pb-dim); font-size: 12.5px; white-space: nowrap; } .pb-wx b { color: var(--pb-text); font-weight: 600; } .pb-wx .material-symbols-outlined { font-size: 16px; } /* 84px, not 66: the extra 18 is the procedure lane under the track. `flex: 0 0 auto` is load-bearing — `.pb-band-l` is a COLUMN flex container, so the default `flex-shrink: 1` sizes this to the space left over and the declared height is only a maximum. Without it the strip measured 55px and the procedure ticks hung 25px out the bottom of the band. Third instance of this trap today: see `.pbt-pksrch` and the `.crew-ev-e` note in CLAUDE.md. */ .pb-tl { position: relative; height: 84px; flex: 0 0 auto; border-top: 1px solid var(--pb-border2); padding-top: 8px; } .pb-tl-axis { position: absolute; left: 0; right: 0; top: 8px; height: 14px; } .pb-tl-axis span { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--pb-muted); font-family: var(--pb-cond); letter-spacing: .06em; } .pb-tl-track { position: absolute; left: 0; right: 0; top: 28px; height: 34px; border-radius: 6px; background: var(--pb-card2); } .pb-tl-ses { position: absolute; top: 0; height: 34px; border-radius: 5px; background: rgba(99, 102, 241, .18); border: 1px solid rgba(99, 102, 241, .5); padding: 0 8px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; white-space: nowrap; cursor: default; box-sizing: border-box; } .pb-tl-ses .n { font-family: var(--pb-cond); font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; line-height: 1; } .pb-tl-ses .t { font-size: 10.5px; color: var(--pb-dim); line-height: 1.2; } .pb-tl-ses.done { opacity: .42; } /* The session block is a door into its pre-session procedure. */ .pb-tl-ses { cursor: pointer; } .pb-tl-ses:hover { filter: brightness(1.18); } .pb-tl-ses:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .pb-tl-ses.hasproc { border-bottom-width: 3px; } /* ── the pre-session procedure, ON the timeline ─────────────────────────────── The ask was "this should be displayed in the timeline", so each step is a tick in its own lane under the track rather than something you only find by opening a dialog. Labels are ellipsised and the whole marker is clipped to the strip — steps five minutes apart on a ten-hour axis WILL sit on top of each other, and the tooltip (and the dialog) are the readable form. */ /* The ticks are emitted INSIDE `.pb-tl-track` (that is where the session blocks are built), and the track is itself `position: absolute` — so `top` here resolves against the TRACK, not the strip. The track is 34px tall, so 36px hangs the lane just below it; measured against `.pb-tl`'s own box that is 64–80px of its 84. Setting 64 here put them 29px past the strip. */ .pb-tl-proc { position: absolute; top: 36px; height: 16px; display: flex; align-items: center; gap: 3px; transform: translateX(-3px); cursor: pointer; max-width: 120px; } .pb-tl-proc i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--pb-warn, #f59e0b); box-shadow: 0 0 0 2px var(--pb-card); } .pb-tl-proc .pl { font-family: var(--pb-cond); font-size: 10.5px; letter-spacing: .04em; color: var(--pb-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-tl-proc:hover .pl { color: var(--pb-text); } .pb-tl-proc::before { content: ""; position: absolute; left: 2px; top: -6px; width: 2px; height: 8px; background: var(--pb-warn, #f59e0b); opacity: .5; } .pb-tl-ses.next { background: rgba(var(--accent-rgb), .16); border-color: var(--accent); } .pb-tl-ses.pit { background: repeating-linear-gradient(135deg, rgba(245, 158, 11, .22) 0 4px, transparent 4px 8px); border: 1px dashed var(--pb-warn); } .pb-tl-now { position: absolute; top: 22px; bottom: 0; width: 2px; background: var(--pb-danger); transform: translateX(-1px); z-index: 2; } .pb-tl-now::before { content: "NOW"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-family: var(--pb-cond); font-size: 10px; letter-spacing: .1em; color: var(--pb-danger); font-weight: 800; } /* The picked day SPELLED OUT, under the strip that draws its shape. The timeline can only ever be the shape: a 20-minute session on a ten-hour axis is 25px wide, so its own name clips to "QU…" and the day switcher shows you a day you cannot read. One line, never wrapping — a band that grew a row when the day got busy would undo the fold this sits above — so a very full day scrolls sideways with every session still legible. */ .pb-dayses { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; /* The last chip must read as "there is more this way", not as a clipped name — the very thing this row exists to stop. The mask is fixed to the BOX (not the content), so it stays at the cut edge as you scroll; the trailing spacer is the same width, so at the end of the run — and on a day short enough not to scroll at all — the fade lands on the spacer and no session is ever dimmed for nothing. */ mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%); } .pb-dayses::after { content: ""; flex: 0 0 18px; } .pb-dayses::-webkit-scrollbar { display: none; } .pb-dses { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--pb-border); background: var(--pb-card2); color: var(--pb-text); cursor: pointer; white-space: nowrap; } .pb-dses:hover { border-color: var(--pb-dim); } .pb-dses:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .pb-dses .n { font-family: var(--pb-cond); font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; } .pb-dses .t { font-size: 11px; color: var(--pb-dim); font-variant-numeric: tabular-nums; } .pb-dses-proc { align-self: center; font-size: 10px; font-weight: 700; line-height: 14px; min-width: 14px; text-align: center; padding: 0 3px; border-radius: 999px; background: rgba(245, 158, 11, .16); color: var(--pb-warn); } .pb-dses.done { opacity: .45; } .pb-dses.next { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); } .pb-dses.next .t { color: var(--pb-text); } .pb-dses.now { border-color: var(--pb-danger); background: rgba(239, 68, 68, .12); } .pb-dses.now .t { color: var(--pb-danger); } .pb-dses-none { font-size: 12px; color: var(--pb-muted); font-style: italic; } .pb-nags { display: flex; flex-wrap: wrap; gap: 6px; } .pb-nag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .5); color: var(--pb-warn); font-size: 12px; font-weight: 600; } .pb-nag .material-symbols-outlined { font-size: 15px; } .pb-band-car-slot { display: contents; } .pb-band-car { display: flex; flex-direction: column; justify-content: center; gap: 4px; border-left: 1px solid var(--pb-border2); padding-left: 18px; min-width: 120px; } .pb-bc-num { font-family: var(--pb-cond); font-weight: 800; font-size: 28px; line-height: 1; } .pb-band-car.blocked .pb-bc-num { color: var(--pb-danger); } .pb-band-car.togo .pb-bc-num { color: var(--pb-warn); } .pb-band-car.ready .pb-bc-num { color: var(--pb-ok); } .pb-bc-cars { display: flex; gap: 6px; align-items: center; } .pb-bc-cars button { font-family: var(--pb-cond); font-weight: 800; font-size: 22px; line-height: 1; color: var(--pb-dim); padding: 2px 4px; border-radius: 6px; } .pb-bc-cars button.on { color: var(--pb-text); background: var(--pb-card2); } .pb-band-fuel { display: flex; flex-direction: column; justify-content: center; gap: 6px; border-left: 1px solid var(--pb-border2); padding-left: 18px; min-width: 150px; } .pb-band-fuel:empty { display: none; } .pb-fuelro { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; min-height: 40px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--pb-border); background: var(--pb-card2); text-align: left; } .pb-fuelro:hover { border-color: var(--pb-dim); } .pb-fuelro .cn { font-family: var(--pb-cond); font-weight: 800; font-size: 15px; grid-row: span 2; align-self: center; } .pb-fuelro .v { font-family: var(--pb-cond); font-weight: 800; font-size: 16px; line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; } .pb-fuelro .v .material-symbols-outlined { font-size: 16px; } .pb-fuelro.add .v { color: var(--pb-warn); } .pb-fuelro.ok .v { color: var(--pb-ok); } .pb-fuelro.none .v { color: var(--pb-dim); } .pb-fuelro .s { font-size: 11px; color: var(--pb-dim); } .pb-band-r { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; min-width: 250px; border-left: 1px solid var(--pb-border2); padding-left: 18px; } .pb-cd-lbl { font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--pb-dim); font-weight: 700; text-align: right; } .pb-cd { font-family: var(--pb-cond); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--pb-text); } .pb-cd.hot { color: var(--pb-warn); } .pb-cd-sub { font-size: 12.5px; color: var(--pb-dim); display: flex; gap: 10px; margin-top: 4px; font-variant-numeric: tabular-nums; } .pb-cd-sub b { color: var(--pb-text); font-weight: 600; } /* ── Wall-message banner (main screen) ── */ .pb-banner { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px 6px 0; border: 1px solid var(--pb-border); border-left: 6px solid var(--pb-info); border-radius: 8px; background: rgba(99, 102, 241, .08); flex-wrap: wrap; } .pb-banner.on { display: flex; } .pb-banner .ic { margin-left: 12px; color: var(--pb-info); font-size: 20px; } .pb-banner .tx { font-weight: 600; font-size: 15px; min-width: 0; flex: 1 1 200px; } .pb-banner .meta { font-size: 12px; color: var(--pb-dim); } .pb-banner.attn { border-left-color: var(--pb-warn); background: rgba(245, 158, 11, .1); } .pb-banner.attn .ic { color: var(--pb-warn); } .pb-banner.urgent { border-left-color: var(--pb-danger); background: rgba(239, 68, 68, .1); } .pb-banner.urgent .ic { color: var(--pb-danger); } .pb-bn-cnt { font-size: 11.5px; color: var(--pb-dim); text-align: right; font-variant-numeric: tabular-nums; } .pb-bn-cnt.over { color: var(--pb-danger); } .pb-bn-tone { display: flex; gap: 6px; flex-wrap: wrap; } .pb-bn-tone .pb-chip.t-attn.on { border-color: var(--pb-warn); color: var(--pb-warn); background: rgba(245, 158, 11, .12); } .pb-bn-tone .pb-chip.t-urgent.on { border-color: var(--pb-danger); color: var(--pb-danger); background: rgba(239, 68, 68, .12); } .pb-bn-hist { display: flex; flex-direction: column; gap: 4px; } .pb-bn-hrow { display: grid; grid-template-columns: 6px 1fr; gap: 10px; padding: 6px 8px; border-radius: 7px; background: var(--pb-card2); font-size: 13px; } .pb-bn-hrow i { border-radius: 3px; background: var(--pb-info); } .pb-bn-hrow.attn i { background: var(--pb-warn); } .pb-bn-hrow.urgent i { background: var(--pb-danger); } .pb-bn-hrow.live { outline: 1px solid var(--accent); } /* ── Nav strip ── */ .pb-navrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pb-navstrip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pb-nv { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid transparent; font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: 13.5px; color: var(--pb-dim); } .pb-nv:hover { border-color: var(--pb-border); } .pb-nv.on { background: var(--pb-card); border-color: var(--accent); color: var(--pb-text); box-shadow: 0 0 0 1px var(--accent) inset; } .pb-nv .cnt, .pb-phbar .cnt { font-size: 12px; padding: 0 6px; height: 18px; line-height: 18px; border-radius: 999px; background: rgba(var(--accent-rgb), .16); color: var(--accent); } .pb-nv .cnt.bad, .pb-phbar .cnt.bad { background: rgba(239, 68, 68, .16); color: var(--pb-danger); } .pb-ph-only { display: none; } /* ── Stage: main + secondary screen ── */ .pb-stage { position: relative; overflow: clip; min-width: 0; } .pb-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: transform .26s ease-out, opacity .26s ease-out; } .pb-stage.sub .pb-main { transform: translateX(-40px); opacity: .35; pointer-events: none; height: 0; overflow: hidden; visibility: hidden; } .pb-sec { position: relative; transform: translateX(60px); opacity: 0; transition: transform .26s ease-out, opacity .26s ease-out; display: none; flex-direction: column; gap: 10px; min-width: 0; } .pb-sec.on { display: flex; } .pb-sec.in { transform: none; opacity: 1; } .pb-sec-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--pb-card); border: 1px solid var(--pb-border); border-radius: 10px; padding: 8px 12px; } .pb-sec-h h2 { margin: 0; font-family: var(--pb-cond); font-size: 20px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; } .pb-sec-h .back { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px 0 6px; border-radius: 7px; font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 13px; color: var(--pb-dim); } .pb-sec-h .back:hover { background: var(--pb-card2); color: var(--pb-text); } .pb-sec-car { font-family: var(--pb-cond); font-weight: 800; font-size: 16px; letter-spacing: .04em; color: var(--pb-dim); } .pb-sec-acts { display: flex; gap: 6px; flex-wrap: wrap; } /* Phone: the secondary header keeps back · title · car chips · ONE primary action (.pb-keep, set by _secHeadHTML). */ @media (max-width: 600px) { .pb-sec-acts > :not(.pb-keep) { display: none; } } .pb-wx-rain { color: var(--pb-warn, #f59e0b); } .pb-cdmini { font-family: var(--pb-cond); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; } .pb-cdmini .pb-lbl { font-size: 10.5px; } .pb-cdmini.hot, .pb-cdmini .pb-cd-v.hot { color: var(--pb-warn); } .pb-carchips2 { display: inline-flex; gap: 6px; flex-wrap: wrap; } .pb-carchips2 button { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pb-border); font-family: var(--pb-cond); font-weight: 800; font-size: 14px; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; background: var(--pb-card2); } .pb-carchips2 button.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .pb-carchips2 .dot, .pb-carchips .dot { width: 8px; height: 8px; border-radius: 50%; } .pb-sec-b { display: flex; flex-direction: column; gap: 10px; min-width: 0; } @media (prefers-reduced-motion: reduce) { .pb-main, .pb-sec { transition: none !important; } .pb-sec { transform: none; } .pb-stage.sub .pb-main { transform: none; } } /* ── Car rail ── */ .pb-rail-slot { min-width: 0; } .pb-ring { position: relative; width: var(--sz, 60px); height: var(--sz, 60px); flex: 0 0 auto; } .pb-ring svg { width: var(--sz, 60px); height: var(--sz, 60px); transform: rotate(-90deg); display: block; } .pb-ring .tr { stroke: var(--pb-ring-track); } .pb-ring .ar { stroke: var(--pb-ok); transition: stroke-dashoffset .35s; } .pb-ring.blocked .ar { stroke: var(--pb-danger); } .pb-ring.togo .ar { stroke: var(--pb-warn); } .pb-ring .pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pb-cond); font-weight: 800; font-size: calc(var(--sz, 60px) * .25); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .pb-carhead { display: flex; flex-direction: row; align-items: center; gap: 14px; background: var(--pb-card); border: 1px solid var(--pb-border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 10px 14px; flex-wrap: wrap; } .pb-ch-id { min-width: 0; } .pb-ch-id .num { font-family: var(--pb-cond); font-weight: 800; font-size: 24px; line-height: 1; display: flex; align-items: center; gap: 8px; } .pb-ch-id .mdl { color: var(--pb-dim); font-size: 12.5px; margin-top: 3px; } .pb-ch-stats { margin-left: auto; } .pb-ministats { display: grid; grid-template-columns: repeat(5, minmax(74px, 1fr)); gap: 4px; } .pb-ms { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 5px 8px; border-radius: 6px; background: var(--pb-card2); border: 1px solid var(--pb-border2); min-height: 44px; cursor: pointer; } .pb-ms:hover { border-color: var(--pb-dim); } .pb-ms .material-symbols-outlined { font-size: 17px; color: var(--pb-dim); } .pb-ms .v { font-family: var(--pb-cond); font-weight: 700; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .pb-ms.bad .v, .pb-ms.bad .material-symbols-outlined { color: var(--pb-danger); } .pb-ms.warn .v, .pb-ms.warn .material-symbols-outlined { color: var(--pb-warn); } .pb-ms.ok .v { color: var(--pb-ok); } .pb-carstrip { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } .pb-cs-chip { cursor: pointer; position: relative; display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; align-items: center; min-width: 250px; padding: 8px 12px 8px 10px; border: 1px solid var(--pb-border); border-left: 4px solid var(--pb-border); border-radius: 10px; background: var(--pb-card); text-align: left; flex: 0 0 auto; } .pb-cs-chip.blocked { border-left-color: var(--pb-danger); } .pb-cs-chip.togo { border-left-color: var(--pb-warn); } .pb-cs-chip.ready { border-left-color: var(--pb-ok); } .pb-cs-chip.sel { border-color: var(--accent); border-left-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .pb-cs-chip .num { font-family: var(--pb-cond); font-weight: 800; font-size: 20px; line-height: 1; display: flex; align-items: center; gap: 6px; } .pb-cs-chip .mdl { color: var(--pb-dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .pb-cs-chip .row { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; } .pb-cs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pb-danger); display: inline-block; } .pb-cs-chip.all { grid-template-columns: 1fr; min-width: 110px; text-align: center; color: var(--pb-dim); } .pb-cs-chip.all .num { justify-content: center; font-size: 16px; } .pb-signed { height: 26px; } /* ── Your line ── */ .pb-yline { display: grid; grid-template-columns: auto 1fr auto 1fr auto auto; align-items: center; gap: 14px; background: var(--pb-card); border: 1px solid var(--pb-border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 10px 14px; } .pb-yl-who { display: flex; align-items: center; gap: 10px; } .pb-yl-who .pb-lbl { display: block; } .pb-yl-who .nm { font-weight: 600; } .pb-yl-item { display: flex; align-items: center; gap: 10px; min-width: 0; } .pb-yl-item[role="button"] { cursor: pointer; } .pb-yl-item .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-yl-item .m { color: var(--pb-dim); font-size: 12.5px; white-space: nowrap; } .pb-yl-sep { width: 1px; height: 34px; background: var(--pb-border2); } .pb-yl-next { color: var(--pb-dim); } .pb-yl-next .t { color: var(--pb-text); } .pb-ok-ic { color: var(--pb-ok); } /* ── Main layout: board + quick checks · engineer rail ── */ .pb-eb-layout { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .pb-eb-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* `align-self`/`align-content: start` both matter: as a grid ITEM the rail is stretched to the board's height, and a stretched grid with auto rows hands the spare height to the rows — which is what left a dead gap between the fuel card and the setup card. */ .pb-eb-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; align-self: start; align-content: start; } @media (min-width: 1400px) { .pb-eb-layout.has-rail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; } .pb-eb-rail { grid-template-columns: 1fr; } } .pb-railcard .pb-diff { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; } .pb-su-f { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; min-height: 30px; font-size: 13px; border-bottom: 1px dashed var(--pb-border2); } .pb-su-f .k { color: var(--pb-dim); } .pb-su-f .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; display: flex; align-items: center; gap: 6px; } .pb-su-f.chg { background: rgba(var(--accent-rgb), .1); border-radius: 5px; padding: 0 6px; border-bottom-color: transparent; } .pb-su-f.chg .old { color: var(--pb-dim); text-decoration: line-through; font-weight: 500; } .pb-su-f.chg .new { color: var(--accent); font-weight: 800; } /* fallback job list (board module absent) */ .pb-fallback { display: flex; flex-direction: column; gap: 8px; } .pb-jlist { display: flex; flex-direction: column; gap: 4px; } .pb-jrow { --u: var(--pb-info); display: grid; grid-template-columns: 10px auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; min-height: 44px; width: 100%; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--pb-border2); border-left: 3px solid var(--u); background: var(--pb-card2); text-align: left; font-size: 13px; } .pb-jrow:hover { border-color: var(--pb-dim); border-left-color: var(--u); } .pb-jrow.blocked { border-color: var(--pb-danger); background: rgba(239, 68, 68, .07); } .pb-jrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pb-muted); display: block; } .pb-jrow .dot.prog { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); } .pb-jrow .dot.block { background: var(--pb-danger); } .pb-jrow .dot.done { background: var(--pb-ok); } .pb-jrow .ti { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pb-jrow .car, .pb-jrow .due { font-size: 12px; color: var(--pb-dim); white-space: nowrap; } .pb-jrow .who { font-size: 12px; color: var(--pb-dim); white-space: nowrap; text-decoration: underline dotted; text-underline-offset: 3px; } .pb-jrow .who.mine { color: var(--accent); font-weight: 600; } .pb-jrow .who.none { color: var(--pb-warn); font-style: italic; } /* ── Quick checks + editor ── */ .pb-checks { display: flex; gap: 6px; flex-wrap: wrap; } .pb-chk { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pb-border); background: var(--pb-card); font-size: 13px; font-weight: 600; color: var(--pb-text); } .pb-chk .material-symbols-outlined { font-size: 18px; color: var(--pb-dim); } .pb-chk.on { border-color: var(--pb-ok); color: var(--pb-ok); } .pb-chk.on .material-symbols-outlined { color: var(--pb-ok); } .pb-chk-promote { font-size: 10.5px; color: var(--pb-dim); border: 1px dashed var(--pb-border); border-radius: 8px; padding: 1px 6px; font-family: var(--pb-cond); letter-spacing: .05em; } .pb-chk-promote:hover { color: var(--accent); border-color: var(--accent); } .pb-qc-ed { display: flex; flex-direction: column; gap: 6px; } .pb-qc-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px 4px 4px; border: 1px solid var(--pb-border); border-radius: 9px; background: var(--pb-card2); } .pb-qc-row.drag { opacity: .4; } .pb-qc-row.over { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); } .pb-qc-row .grip { cursor: grab; color: var(--pb-dim); font-size: 20px; flex: 0 0 auto; touch-action: none; } .pb-qc-row input[type=text] { flex: 1 1 120px; min-width: 0; height: 34px; border: 1px solid var(--pb-border); border-radius: 7px; background: var(--pb-card); color: var(--pb-text); padding: 0 10px; font-size: 14px; } .pb-qc-row input[type=text]:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .pb-qc-per { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--pb-border); background: var(--pb-card); font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 11px; color: var(--pb-dim); white-space: nowrap; } .pb-qc-per.on { border-color: var(--pb-info); color: var(--pb-info); background: rgba(99, 102, 241, .12); } .pb-qc-per .material-symbols-outlined { font-size: 16px; } .pb-qc-rm { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 7px; color: var(--pb-dim); } .pb-qc-rm:hover { color: var(--pb-danger); background: rgba(239, 68, 68, .12); } .pb-qc-add { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .pb-qc-add input { flex: 1 1 160px; min-width: 0; height: 38px; border: 1px dashed var(--pb-border); border-radius: 8px; background: transparent; color: var(--pb-text); padding: 0 12px; font-size: 14px; } .pb-qc-tpl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pb-qc-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--pb-border2); } .pb-qc-foot label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; } .pb-qc-foot input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; } /* ── Crew fold + QR fold ── */ .pb-crewfold { border: 1px solid var(--pb-border); border-radius: 10px; background: var(--pb-card); } .pb-crewfold summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: 13px; } .pb-crewfold summary::-webkit-details-marker { display: none; } .pb-crewfold summary .material-symbols-outlined { font-size: 18px; } .pb-crewgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px; padding: 0 8px 8px; } .pb-crew-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; min-height: 40px; padding: 3px 4px; border-radius: 7px; } .pb-crew-row .nm { font-weight: 600; font-size: 13px; line-height: 1.15; } .pb-crew-row .rl { color: var(--pb-dim); font-size: 11.5px; } .pb-crew-row .on { font-size: 12px; color: var(--pb-dim); white-space: nowrap; } .pb-crew-row .on b { color: var(--pb-text); font-weight: 600; } .pb-crew-row .free { color: var(--pb-ok); font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .07em; font-size: 11.5px; font-weight: 700; } .pb-qr { display: flex; gap: 14px; align-items: center; padding: 8px 12px 12px; } .pb-qr-box { width: 120px; height: 120px; border-radius: 8px; background: #fff; padding: 6px; flex: 0 0 auto; } .pb-qr-code { width: 100%; height: 100%; display: block; } .pb-qr-t { font-size: 12.5px; color: var(--pb-dim); line-height: 1.4; display: flex; flex-direction: column; gap: 6px; } .pb-qr-t b { color: var(--pb-text); display: block; } /* ── Assign dialog (roles on the car + people; hangs off ) ──────────── .pb-asgn-ovl is the class twin: the shared work order's own assign dialog (workorder.js #wo-asgn-ovl) reuses this exact chrome. */ #pb-asgn-ovl, .pb-asgn-ovl { position: fixed; inset: 0; z-index: 900; background: rgba(5, 8, 12, 0.6); display: flex; align-items: center; justify-content: center; padding: 18px; } .pb-asgn { width: min(480px, 100%); max-height: min(80vh, 640px); overflow-y: auto; background: #12161e; border: 1px solid #2a3040; border-radius: 12px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; color: #dce3ed; } .pb-asgn-h { display: flex; align-items: center; gap: 8px; } .pb-asgn-h b { font-size: 14px; color: #e6ecf3; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pb-asgn-x { background: none; border: 0; color: #7a8a9b; cursor: pointer; padding: 4px; display: inline-flex; } .pb-asgn-x:hover { color: #e6ecf3; } .pb-asgn-k { font-family: var(--pb-cond, 'Barlow Condensed', sans-serif); font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #5a6678; margin-top: 4px; } .pb-asgn-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } .pb-asgn .pb-btn { min-height: 34px; } @media (max-width: 600px) { #pb-asgn-ovl, .pb-asgn-ovl { align-items: flex-end; padding: 0; } .pb-asgn { width: 100%; border-radius: 14px 14px 0 0; max-height: 86dvh; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .pb-asgn .jl-as-chip { height: 38px; border-radius: 19px; } } body.light-mode .pb-asgn { background: #ffffff; border-color: #dde2ec; color: #1a2030; } body.light-mode .pb-asgn-h b { color: #1a2030; } body.light-mode .pb-asgn-x:hover { color: #1a2030; } /* ── Dialog (wall message · QR · sign-off) — hangs off ── */ .pb-dlg-ovl { position: fixed; inset: 0; z-index: 910; background: rgba(5, 8, 12, .55); display: flex; align-items: center; justify-content: center; padding: 18px; } .pb-dlg { width: min(520px, 100%); max-height: min(88vh, 720px); overflow: auto; background: var(--pb-card); border: 1px solid var(--pb-border); border-radius: 12px; box-shadow: var(--pb-shadow); display: flex; flex-direction: column; } .pb-dlg-h { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--pb-border2); } .pb-dlg-h h2 { margin: 0; font-family: var(--pb-cond); font-size: 18px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; } .pb-dlg-h > button { margin-left: auto; } .pb-dlg-b { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; } .pb-dlg-f { padding: 12px 16px; border-top: 1px solid var(--pb-border2); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } @media (max-width: 600px) { .pb-dlg-ovl { align-items: flex-end; padding: 0; } .pb-dlg { width: 100%; border-radius: 14px 14px 0 0; max-height: 90dvh; } .pb-dlg-f { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } .pb-fld input, .pb-fld select, .pb-fld textarea, .pb-qc-row input[type=text], .pb-qc-add input { font-size: 16px; } } /* ── Wall mode (hangs off ) ── */ .pb-wall { position: fixed; inset: 0; background: var(--pb-page); color: var(--pb-text); z-index: 4000; display: flex; flex-direction: column; padding: 24px 32px; gap: 18px; font-size: 22px; overflow: hidden; } /* A real button, because a garage monitor may have no keyboard — but sized and coloured to stay out of the way of a poster read from across the box. 44px tall so a gloved thumb can find it. */ .pb-wall .wx-esc { position: absolute; right: 32px; top: 24px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--pb-border); border-radius: 999px; background: var(--pb-card2); color: var(--pb-dim); cursor: pointer; font-family: var(--pb-cond); letter-spacing: .1em; text-transform: uppercase; font-size: 12px; } .pb-wall .wx-esc:hover { color: var(--pb-text); border-color: var(--pb-dim); } .pb-wall .wx-esc .material-symbols-outlined { font-size: 18px; } @media (max-width: 600px) { .pb-wall .wx-esc { right: 12px; top: 12px; padding: 0 12px; } .pb-wall .wx-esc span:not(.material-symbols-outlined) { display: none; } } .pb-wall .wh { display: flex; align-items: flex-end; gap: 24px; } .pb-wall .wcd { font-family: var(--pb-cond); font-weight: 800; font-size: clamp(80px, 12vw, 160px); line-height: .9; font-variant-numeric: tabular-nums; letter-spacing: .01em; } .pb-wall .wcd.hot { color: var(--pb-warn); } .pb-wall .wlbl { font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .14em; font-size: clamp(14px, 1.6vw, 22px); color: var(--pb-dim); font-weight: 700; } .pb-wall .wev { margin-left: auto; text-align: right; padding-right: 220px; } .pb-wall .wev .ev { font-family: var(--pb-cond); text-transform: uppercase; font-size: clamp(18px, 2.4vw, 32px); font-weight: 800; letter-spacing: .05em; } .pb-wall .wev .t { color: var(--pb-dim); font-size: clamp(14px, 1.3vw, 20px); } .pb-wall .wbanner { display: none; align-items: center; gap: 22px; padding: 12px 22px; border-radius: 10px; border-left: 12px solid var(--pb-info); background: rgba(99, 102, 241, .12); min-height: 64px; } .pb-wall .wbanner.on { display: flex; } .pb-wall .wbanner .tx { font-family: var(--pb-cond); font-weight: 800; font-size: clamp(28px, 3vw, 44px); line-height: 1.05; letter-spacing: .01em; flex: 1 1 auto; min-width: 0; } .pb-wall .wbanner .meta { color: var(--pb-dim); font-size: clamp(13px, 1.1vw, 17px); white-space: nowrap; text-align: right; line-height: 1.3; } .pb-wall .wbanner.attn { border-left-color: var(--pb-warn); background: rgba(245, 158, 11, .14); } .pb-wall .wbanner.attn .tx { color: var(--pb-warn); } .pb-wall .wbanner.urgent { border-left-color: var(--pb-danger); background: rgba(239, 68, 68, .16); } .pb-wall .wbanner.urgent .tx { color: var(--pb-danger); } .pb-wall .wcols { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 18px; min-height: 0; } .pb-wall .wcar { background: var(--pb-card); border: 1px solid var(--pb-border); border-radius: 12px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; border-top: 6px solid var(--pb-ok); min-width: 0; } .pb-wall .wcar.blocked { border-top-color: var(--pb-danger); } .pb-wall .wcar.togo { border-top-color: var(--pb-warn); } .pb-wall .wn { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .pb-wall .wn .num { font-family: var(--pb-cond); font-weight: 800; font-size: clamp(34px, 4vw, 56px); line-height: 1; } .pb-wall .wn .drv { color: var(--pb-dim); font-size: clamp(14px, 1.2vw, 18px); } .pb-wall .wn .pb-pill { height: 26px; font-size: 13px; } .pb-wall .wn .load { margin-left: auto; font-family: var(--pb-cond); font-weight: 800; font-size: clamp(16px, 1.5vw, 22px); font-variant-numeric: tabular-nums; text-align: right; line-height: 1.1; } .pb-wall .wn .load.over { color: var(--pb-warn); } .pb-wall .wn .load small { display: block; font-size: .6em; color: var(--pb-dim); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .pb-wall .wlist { display: flex; flex-direction: column; gap: 5px; overflow: auto; } /* Sentence case, deliberately: the group label INTERPOLATES data — the session name ("To do before Race 1") and the count — and `text-transform: uppercase` rewrites what `inner_text()` (and a screen reader) reads back. The condensed face + weight 800 + tracking already read as a group header. */ .pb-wall .wg { font-family: var(--pb-cond); letter-spacing: .08em; font-size: clamp(13px, 1.1vw, 16px); font-weight: 800; padding: 8px 4px 2px; color: var(--pb-dim); display: flex; gap: 8px; align-items: center; } .pb-wall .wg.b { color: var(--pb-danger); } .pb-wall .wg.p { color: var(--accent); } .pb-wall .wi { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border-radius: 7px; background: var(--pb-card2); border-left: 5px solid var(--pb-border); font-size: clamp(16px, 1.3vw, 22px); font-weight: 600; } .pb-wall .wi.blocked { border-left-color: var(--pb-danger); } .pb-wall .wi.doing { border-left-color: var(--accent); } .pb-wall .wi.ok { border-left-color: var(--pb-ok); } .pb-wall .wi.togo { border-left-color: var(--pb-warn); } .pb-wall .wi.nag { color: var(--pb-warn); font-size: clamp(14px, 1.1vw, 18px); } .pb-wall .wi.done { opacity: .45; font-size: 16px; min-height: 32px; } .pb-wall .wi .r { margin-left: auto; color: var(--pb-dim); font-size: .8em; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; } .pb-wall .wi .r.un { color: var(--pb-warn); font-style: italic; } .pb-wall .wi .wk-job-id { height: 24px; font-size: 14px; display: inline-flex; align-items: center; } .pb-wall .wcrew { display: flex; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--pb-border); padding-top: 12px; font-size: clamp(14px, 1.2vw, 18px); } .pb-wall .wcrew span { display: inline-flex; align-items: center; gap: 8px; } .pb-wall .wcrew b { font-weight: 600; } .pb-wall .wcrew .free { color: var(--pb-ok); font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .08em; font-size: .8em; font-weight: 800; } /* Everyone not on a job is one count, not a name each (2026-08-26). */ .pb-wall .wcrew .wfree, .pb-wall .wcrew .wnone { color: var(--pb-dim); font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .08em; font-size: .85em; font-weight: 800; } .pb-wall .wcrew .wfree { margin-left: auto; } /* ── Phone bar (≤600px, hangs off , above the app's bottom nav) ── */ .pb-phbar { display: none; } .pb-carchips { gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; } .pb-carchips button { flex: 0 0 auto; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pb-border); font-family: var(--pb-cond); font-weight: 800; font-size: 15px; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; background: var(--pb-card); } .pb-carchips button.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } /* ── Responsive ── */ @media (max-width: 1100px) { .pb-band { grid-template-columns: 1fr; } .pb-band-r, .pb-band-fuel, .pb-band-car { border-left: 0; padding-left: 0; border-top: 1px solid var(--pb-border2); padding-top: 8px; } .pb-band-r { flex-direction: row; align-items: baseline; gap: 14px; } .pb-band-fuel { flex-direction: row; flex-wrap: wrap; } .pb-band-car { flex-direction: row; align-items: center; gap: 10px; } } @media (max-width: 600px) { #pb-root { padding: 8px 10px 140px; gap: 8px; } .pb-sub, .pb-btn-w { display: none; } .pb-top .pb-pick { flex: 1 1 100%; } .pb-pick-y, .pb-pick-c, .pb-pick-e { max-width: none; flex: 1 1 30%; min-width: 0; } .pb-band { padding: 10px 12px; } .pb-band-head { gap: 6px; } .pb-dayline { flex: 1 1 100%; } .pb-daysw { margin-left: 0; } .pb-ev { font-size: 16px; } .pb-tl, .pb-wx, .pb-cdmini { display: none; } .pb-band-r { padding-top: 6px; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .pb-cd-lbl { white-space: nowrap; text-align: left; } .pb-cd-sub { flex-wrap: wrap; } .pb-cd { font-size: 44px; } .pb-fuelro { flex: 1 1 150px; min-width: 0; } .pb-navstrip { display: none; } .pb-navrow { justify-content: flex-end; } .pb-ph-only { display: flex; } .pb-yline { grid-template-columns: 1fr auto auto; gap: 8px 10px; } .pb-yl-who, .pb-yl-sep, .pb-yl-next, .pb-yl-item .m { display: none; } .pb-yl-item { overflow: hidden; } .pb-carhead { padding: 8px 10px; } .pb-ch-stats { margin-left: 0; flex: 1 1 100%; } .pb-ministats { grid-template-columns: repeat(5, 1fr); } .pb-carstrip { display: none; } .pb-eb-rail { grid-template-columns: 1fr; } .pb-sec-h h2, .pb-scr-head h2 { font-size: 17px; } .pb-sec-h .back .w { display: none; } .pb-qc-row { flex-wrap: wrap; } .pb-qc-row input[type=text] { flex-basis: 100%; order: 1; } .pb-qc-row .grip { order: 0; } .pb-qc-per, .pb-qc-rm, .pb-qc-row .pb-seg { order: 2; } .pb-jrow { grid-template-columns: 10px auto minmax(0, 1fr) auto; } .pb-jrow .due, .pb-jrow .car { display: none; } .pb-phbar { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); background: var(--pb-card); border-top: 1px solid var(--pb-border); border-bottom: 1px solid var(--pb-border); padding: 6px 6px; z-index: 150; } .pb-phbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center; border-radius: 7px; font-family: var(--pb-cond); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 11px; color: var(--pb-dim); position: relative; } .pb-phbar button .material-symbols-outlined { font-size: 22px; } .pb-phbar button.on { color: var(--accent); background: rgba(var(--accent-rgb), .12); } .pb-phbar .cnt { position: absolute; top: 2px; right: 8px; } .pb-wall { padding: 14px; font-size: 18px; } .pb-wall .wev { padding-right: 0; } .pb-wall .wcols { grid-auto-flow: row; overflow: auto; } .pb-wall .wcrew { display: none; } .pb-wall .wbanner { gap: 10px; padding: 10px 12px; border-left-width: 8px; flex-wrap: wrap; } .pb-wall .wbanner .meta { white-space: normal; text-align: left; } } /* No bottom nav above 767px: the phone bar sits on the viewport edge. */ @media (min-width: 601px) { .pb-phbar { display: none !important; } } /* ═ LIVE — presence chips + the "this moved under you" tint (2026-08-25) ═════ Both are ADVISORY chrome: a chip says who else has a thing open, a tint says a value you can see changed while you were reading it. Nothing here disables anything. Tokens only (--pb-*), so light mode comes for free. */ .pb-presw { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; } .pb-presw:not(:empty) { margin-left: 6px; } .pb-ava.pb-pres { width: 20px; height: 20px; font-size: 9.5px; cursor: default; color: hsl(var(--pb-pres-h, 210) 70% 62%); border-color: hsl(var(--pb-pres-h, 210) 70% 62% / .55); background: hsl(var(--pb-pres-h, 210) 70% 62% / .14); } body.light-mode .pb-ava.pb-pres { color: hsl(var(--pb-pres-h, 210) 62% 38%); border-color: hsl(var(--pb-pres-h, 210) 62% 38% / .45); background: hsl(var(--pb-pres-h, 210) 62% 38% / .10); } .pb-ava.pb-pres.more { color: var(--pb-dim); border-color: var(--pb-border); background: var(--pb-card2); } /* "· with Nina" on the secondary-screen header. */ .pb-secwith { display: inline-flex; align-items: center; } .pb-with { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 8px 2px 4px; border: 1px solid var(--pb-border); border-radius: 999px; background: var(--pb-card2); } .pb-with .t { font-family: var(--pb-cond); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--pb-dim); white-space: nowrap; } .pb-with .pb-presw { margin-left: 0; } @keyframes pb-live-chg { 0% { background: rgba(var(--accent-rgb), .30); } 100% { background: transparent; } } .pb-live-chg { animation: pb-live-chg 1.2s ease-out; border-radius: 4px; } /* Reduced motion still gets the STATEMENT — a static mark, no fade. */ @media (prefers-reduced-motion: reduce) { .pb-live-chg { animation: none; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); } } @media (max-width: 600px) { .pb-with .t { display: none; } .pb-with { padding: 2px 4px; } }