/* ══ PIT BOX — the PHONE shape (.pbp-*) ═══════════════════════════════════
   Design record: tools/harness/pitbox_phone_v4.html (the 16-frame mockup —
   its source is pitbox_phone_v4_src.html). Below 600px the shell stops
   squeezing the desktop page and paints THIS shape instead: one sticky top
   (event · car segment · apps) + a countdown band, then card lists a thumb
   can work through; a secondary screen REPLACES the board (back · title ·
   car chips + a slim clock line + the screen's actions as a chip strip).
   Every module's renderPhone() builds from these atoms, so the eight screens
   read as one system. Tokens are the shell's own (--pb-*), so light mode is
   the one override block in pitbox.css; only the cold/hot pair is new. */
.pb-scope { --pbp-cold: #60a5fa; --pbp-hot: #f87171; --pbp-best: #c084fc; }
body.light-mode .pb-scope { --pbp-cold: #2563eb; --pbp-hot: #dc2626; --pbp-best: #a21caf; }

/* ── Root ── */
/* Every atom below is scoped to the phone root (or a body-hung sheet): the
   DESKTOP Pace screen already owns .pbp-card / .pbp-tiles / .pbp-note /
   .pbp-legend / .pbp-chart / .pbp-dot / .pbp-ses in pitbox-screens.css, and
   an unscoped twin would restyle it. The resets below stop those desktop
   rules leaking the other way into the phone's atoms. */
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-card { padding: 0; margin: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tiles { margin: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-note { max-width: none; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-legend { margin-bottom: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-chart { overflow: visible; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-dot { stroke: none; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-ses { overflow: visible; scroll-snap-type: none; }
#pb-root.pbp { padding: 0 0 84px; gap: 0; display: block; max-width: none; }
.pbp .material-symbols-outlined { font-size: 22px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-top { position: sticky; top: 0; z-index: 5; background: var(--pb-card); border-bottom: 1px solid var(--pb-border); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-r1 { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-ev { font-family: var(--pb-cond); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--pb-dim); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-seg { display: flex; border: 1px solid var(--pb-border); border-radius: 10px; overflow: hidden; height: 38px; flex: none; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-seg button { min-width: 52px; padding: 0 11px; font-family: var(--pb-cond); font-weight: 800; font-size: 17px; color: var(--pb-dim); display: flex; align-items: center; gap: 5px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-seg button.on { background: var(--accent); color: var(--pb-on-accent); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-seg .d { width: 7px; height: 7px; border-radius: 50%; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-ib { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--pb-text); flex: none; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-ib:active { background: var(--pb-card2); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-band { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 12px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-band .cd { font-family: var(--pb-cond); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: .01em; color: var(--accent); font-variant-numeric: tabular-nums; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-band .cd.hot { color: var(--pb-warn); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-cdl { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-cdl b { font-family: var(--pb-cond); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-cdl span { font-size: 13px; color: var(--pb-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pill { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 15px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--pb-border); color: var(--pb-dim); white-space: nowrap; flex: none; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pill.ok { color: var(--pb-ok); border-color: var(--pb-ok); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pill.warn { color: var(--pb-warn); border-color: var(--pb-warn); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pill.danger { color: var(--pb-danger); border-color: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pill.acc { background: var(--accent); color: var(--pb-on-accent); border-color: var(--accent); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pill .material-symbols-outlined { font-size: 16px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-hd { height: 48px; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 2px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-hd h2 { margin: 0; font-family: var(--pb-cond); font-weight: 700; font-size: 21px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-carchip { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border-radius: 9px; background: var(--accent); color: var(--pb-on-accent); font-family: var(--pb-cond); font-weight: 800; font-size: 17px; margin-right: 6px; flex: none; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-carchip.off { background: transparent; color: var(--pb-dim); border: 1px solid var(--pb-border); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-slim { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-top: 1px solid var(--pb-border2); font-size: 13.5px; color: var(--pb-dim); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-slim b { color: var(--accent); font-family: var(--pb-cond); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-slim b.hot { color: var(--pb-warn); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-slim .sp, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sh .sp, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-row .sp { flex: 1; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-slim .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A screen's headerActions become ONE horizontally-scrolling chip strip. */
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 12px; border-top: 1px solid var(--pb-border2); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt::-webkit-scrollbar { display: none; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt > * { flex: none !important; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt .pb-btn, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt .pbp-chip, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt button, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt select, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt label { height: 40px; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--pb-border); background: var(--pb-card2); font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--pb-dim); display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-family: var(--body, inherit); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt .pb-btn-acc, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt .on { background: var(--pb-text); color: var(--pb-page); border-color: var(--pb-text); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt .pb-btn-w { display: inline; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt .pb-btn-icon { width: auto; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-subt .n { background: var(--accent); color: var(--pb-on-accent); min-width: 18px; height: 18px; border-radius: 9px; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-content { padding: 12px 12px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-in { animation: pbp-in .18s ease-out; }
@keyframes pbp-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pbp-in { animation: none; } }

/* ── Atoms ── */
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sh { display: flex; align-items: center; gap: 8px; font-family: var(--pb-cond); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--pb-dim); padding: 2px 2px 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sh .n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--pb-card2); border: 1px solid var(--pb-border); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--pb-text); letter-spacing: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sh .n.danger { background: var(--pb-danger); color: #fff; border-color: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sh .n.warn { background: var(--pb-warn); color: #fff; border-color: var(--pb-warn); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sh a, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sh button.lnk { font-family: var(--body, inherit); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); text-decoration: none; min-height: 40px; padding: 0 4px; display: inline-flex; align-items: center; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-card { background: var(--pb-card); border: 1px solid var(--pb-border); border-radius: 14px; overflow: hidden; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-card.acc { border-color: var(--accent); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-card.danger { border-color: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border-top: 1px solid var(--pb-border2); text-align: left; width: 100%; color: inherit; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-card > .pbp-row:first-child, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-card > .pbp-row.first { border-top: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-row .m { flex: 1; min-width: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-row .t { font-weight: 600; font-size: 15px; line-height: 1.25; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-row .s { font-size: 13px; color: var(--pb-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-row .s.wrap { white-space: normal; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-row .s b { color: var(--pb-text); font-weight: 600; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-row .s b.bad { color: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-row .r { display: flex; align-items: center; gap: 6px; flex: none; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-row .chev { color: var(--pb-dim); font-size: 22px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-row.done { opacity: .55; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--pb-border); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-dot.doing, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-dot.prog { background: var(--accent); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-dot.blocked, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-dot.block { background: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-dot.done { background: var(--pb-ok); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-dot.todo { background: transparent; border: 2px solid var(--pb-dim); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tb { font-family: var(--pb-cond); font-weight: 800; font-size: 15px; color: var(--accent); min-width: 36px; flex: none; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-av { width: 30px; height: 30px; border-radius: 50%; background: var(--pb-card2); border: 1px solid var(--pb-border); display: inline-flex; align-items: center; justify-content: center; font-family: var(--pb-cond); font-weight: 800; font-size: 13px; color: var(--pb-text); flex: none; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-av.me { background: var(--accent); color: var(--pb-on-accent); border-color: var(--accent); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-av.role { border-style: dashed; font-size: 11px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-av.none { border-style: dashed; color: var(--pb-dim); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tchip { font-family: var(--pb-cond); font-weight: 700; font-size: 13.5px; padding: 2px 7px; border-radius: 6px; background: var(--pb-card2); color: var(--pb-dim); white-space: nowrap; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tchip.warn, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tchip.amb { background: var(--pb-warn); color: #fff; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tchip.danger, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tchip.red { background: var(--pb-danger); color: #fff; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tchip.ok { background: var(--pb-ok); color: #fff; }
/* A phone has no hover, so a board row carries the job's first lines
   inline (capped in _phStepsHTML) — the work order, one tap away, has
   all of them. */
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-steplist { margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--pb-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-steplist i { font-style: normal; opacity: .5; margin: 0 4px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-steplist span.done { text-decoration: line-through; opacity: .6; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-steplist span.more { color: var(--pb-text); font-weight: 600; margin-left: 5px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-prog { height: 4px; border-radius: 2px; background: var(--pb-card2); overflow: hidden; margin-top: 6px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-prog i { display: block; height: 100%; background: var(--accent); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 16px; border-radius: 12px; font-weight: 700; font-size: 15px; border: 1px solid var(--pb-border); background: var(--pb-card); color: var(--pb-text); white-space: nowrap; font-family: var(--body, inherit); text-transform: none; letter-spacing: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-btn.pri { background: var(--accent); color: var(--pb-on-accent); border-color: var(--accent); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-btn.ghost { background: transparent; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-btn.danger { color: var(--pb-danger); border-color: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-btn.sm { height: 38px; padding: 0 12px; font-size: 14px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-btn .material-symbols-outlined { font-size: 20px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-btn:disabled { opacity: .45; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-bar { display: flex; gap: 8px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-bar .pbp-btn { flex: 1; min-width: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-chk { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex: none; color: var(--pb-dim); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-chk.on { color: var(--pb-ok); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--pb-dim); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-chk.on .pbp-tick { border-color: var(--pb-ok); background: var(--pb-ok); color: #fff; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tick .material-symbols-outlined { font-size: 18px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-row.ticked .t { text-decoration: line-through; color: var(--pb-dim); }
.pbp .pb-banner { display: none; }
.pbp .pb-banner.on { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 0; border-left: 0; background: var(--pb-info); color: #fff; font-weight: 600; font-size: 14.5px; line-height: 1.3; min-height: 0; flex-wrap: nowrap; }
.pbp .pb-banner.attn { background: var(--pb-warn); color: #1a1200; }
.pbp .pb-banner.urgent { background: var(--pb-danger); color: #fff; }
.pbp .pb-banner .ic { margin: 1px 0 0; color: inherit; font-size: 22px; flex: none; }
.pbp .pb-banner .tx { flex: 1; min-width: 0; }
.pbp .pb-banner .meta { display: block; flex-basis: 100%; font-weight: 500; opacity: .8; font-size: 12.5px; margin-top: 2px; color: inherit; text-align: left; }
.pbp .pb-banner .pb-btn { background: transparent; border: 0; color: inherit; min-height: 44px; width: 44px; padding: 0; margin: -8px -8px -8px 0; flex: none; }
.pbp .pb-banner .pb-btn .pb-btn-w, .pbp .pb-banner .pb-btn:not(.pb-btn-icon) { display: none; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tile { position: relative; height: 74px; border: 1px solid var(--pb-border); border-radius: 14px; background: var(--pb-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--pb-cond); font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; color: var(--pb-text); min-width: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tile .material-symbols-outlined { color: var(--accent); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tile .b { position: absolute; top: 6px; right: 8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--pb-on-accent); font-size: 12px; display: flex; align-items: center; justify-content: center; letter-spacing: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tile .b.danger, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tile .b.bad { background: var(--pb-danger); color: #fff; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tile .b.warn { background: var(--pb-warn); color: #fff; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-kv .k { background: var(--pb-card); border: 1px solid var(--pb-border); border-radius: 12px; padding: 10px 10px 8px; min-height: 64px; min-width: 0; text-align: left; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-kv .k label { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-dim); font-weight: 600; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-kv .k b { display: block; font-family: var(--pb-cond); font-weight: 800; font-size: 24px; line-height: 1.1; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-kv .k b small { font-size: 14px; font-weight: 600; color: var(--pb-dim); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-kv .k.warn b { color: var(--pb-warn); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-kv .k.danger b { color: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-kv .k.ok b { color: var(--pb-ok); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pc { background: var(--pb-card2); border-radius: 10px; padding: 6px 6px 5px; text-align: center; min-width: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pc label { display: block; font-size: 11px; letter-spacing: .06em; color: var(--pb-dim); font-weight: 600; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pc b { display: block; font-family: var(--pb-cond); font-weight: 800; font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pc.cold b { color: var(--pbp-cold); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pc.hot b { color: var(--pbp-hot); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pc small { display: block; font-size: 11px; color: var(--pb-warn); font-weight: 600; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-pc input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--pb-border); text-align: center; font: inherit; font-family: var(--pb-cond); font-weight: 800; font-size: 19px; color: var(--pbp-cold); padding: 0; height: 26px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-inp { display: flex; align-items: center; gap: 8px; height: 48px; border: 1px solid var(--pb-border); border-radius: 12px; background: var(--pb-card); padding: 0 12px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-inp input, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-inp select { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--pb-text); font-size: 16px; height: 44px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-inp .u { color: var(--pb-dim); font-size: 14px; font-weight: 600; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-note { font-size: 14px; color: var(--pb-dim); line-height: 1.4; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--pb-card2); border: 1px solid var(--pb-border); font-size: 12px; font-weight: 600; color: var(--pb-dim); white-space: nowrap; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tag.info { color: var(--pb-info); border-color: var(--pb-info); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tag.ok { color: var(--pb-ok); border-color: var(--pb-ok); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tag.danger { color: var(--pb-danger); border-color: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tag.warn { color: var(--pb-warn); border-color: var(--pb-warn); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tag.acc { background: var(--accent); color: var(--pb-on-accent); border-color: var(--accent); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tag .material-symbols-outlined { font-size: 14px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tags { display: flex; gap: 6px; flex-wrap: wrap; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tl { position: relative; padding-left: 22px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tl::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--pb-border); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tl .pbp-row { padding-left: 0; position: relative; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tl .pbp-row::before { content: ""; position: absolute; left: -18px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--pb-dim); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tl .pbp-row.now::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .25); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-tl .pbp-row.past { opacity: .55; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-time { font-family: var(--pb-cond); font-weight: 700; font-size: 17px; min-width: 44px; flex: none; font-variant-numeric: tabular-nums; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-ses { font-family: var(--pb-cond); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; background: var(--pb-info); color: #fff; white-space: nowrap; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-verdict { padding: 12px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-verdict .vh { display: flex; align-items: center; gap: 8px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-verdict .vh b { font-family: var(--pb-cond); font-weight: 800; font-size: 20px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-verdict p { font-size: 14.5px; margin: 6px 0 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-verdict .who { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-cr { display: grid; grid-template-columns: 1fr repeat(var(--n, 2), minmax(0, 92px)); align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--pb-border2); min-height: 48px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-cr .cn { font-weight: 600; min-width: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-cr .cn small { display: block; color: var(--pb-dim); font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fb { height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--pb-cond); font-weight: 800; font-size: 14px; background: var(--pb-card2); color: var(--pb-dim); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fb.u1 { background: #fde68a; color: #3a2a00; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fb.u2 { background: #f59e0b; color: #fff; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fb.u3 { background: #b45309; color: #fff; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fb.o1 { background: #c7d2fe; color: #1e1b4b; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fb.o2 { background: #6366f1; color: #fff; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fb.o3 { background: #3730a3; color: #fff; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-hdrow { display: grid; grid-template-columns: 1fr repeat(var(--n, 2), minmax(0, 92px)); gap: 6px; padding: 6px 12px 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-dim); font-weight: 600; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-hdrow span { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-hdrow span:first-child { text-align: left; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-diff { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px 8px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--pb-border2); min-height: 44px; font-size: 14.5px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-diff .o { color: var(--pb-dim); text-decoration: line-through; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-diff .n { font-weight: 700; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-diff .material-symbols-outlined { font-size: 18px; color: var(--pb-dim); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-diff .why { font-size: 12.5px; color: var(--pb-ok); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-diff .why.bad { color: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-vs { display: flex; gap: 8px; align-items: center; padding: 12px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-vs .v { flex: 1; min-width: 0; border: 1px solid var(--pb-border); border-radius: 10px; padding: 8px 10px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-vs .v b { font-family: var(--pb-cond); font-weight: 800; font-size: 22px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-vs .v span { font-size: 12.5px; color: var(--pb-dim); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-brk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-brk .k { background: var(--pb-card); border: 1px solid var(--pb-border); border-radius: 12px; padding: 10px 12px; min-width: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-brk .k label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-dim); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-brk .k label .material-symbols-outlined { font-size: 16px; color: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-brk .k .v { margin-top: 6px; display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; gap: 6px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-brk .k .v b { font-family: var(--pb-cond); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-brk .k .v b small { font-size: 12px; color: var(--pb-dim); font-weight: 600; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-brk .k.danger { border-color: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-brk .k b.bad { color: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-meter { height: 6px; border-radius: 3px; background: var(--pb-card2); margin-top: 6px; overflow: hidden; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-meter i { display: block; height: 100%; background: var(--pb-ok); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-meter i.warn { background: var(--pb-warn); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-meter i.danger { background: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fuelbig { display: flex; align-items: flex-end; gap: 14px; padding: 14px 12px 10px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fuelbig .big { font-family: var(--pb-cond); font-weight: 800; font-size: 64px; line-height: .9; font-variant-numeric: tabular-nums; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fuelbig .big small { font-size: 22px; color: var(--pb-dim); font-weight: 700; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fuelbig .sub2 { font-size: 14px; color: var(--pb-dim); padding-bottom: 6px; min-width: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fuelbig .sub2 b { display: block; color: var(--pb-text); font-size: 16px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fuelbar { margin: 0 12px 12px; height: 12px; border-radius: 6px; background: var(--pb-card2); position: relative; overflow: hidden; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fuelbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-fuelbar b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--pb-danger); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-cnt { display: flex; gap: 8px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-cnt button { flex: 1; height: 44px; border: 1px solid var(--pb-border); border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--pb-dim); min-width: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-cnt button.on { background: var(--accent); color: var(--pb-on-accent); border-color: var(--accent); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-chart { background: var(--pb-card); border: 1px solid var(--pb-border); border-radius: 14px; padding: 10px 8px 6px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-chart svg { width: 100%; height: auto; display: block; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-legend { display: flex; gap: 12px; padding: 6px 6px 2px; font-size: 13px; color: var(--pb-dim); flex-wrap: wrap; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-lap { display: grid; grid-template-columns: 36px 1fr 74px 60px; gap: 8px; align-items: center; padding: 0 12px; height: 42px; border-top: 1px solid var(--pb-border2); font-size: 14.5px; font-variant-numeric: tabular-nums; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-lap b { font-family: var(--pb-cond); font-weight: 800; font-size: 17px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-lap .best { color: var(--pbp-best); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-lap.hd, :is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-ptab.hd { height: 30px; min-height: 30px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-dim); font-weight: 600; border-top: 0; padding: 6px 12px 4px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-ptab { display: grid; grid-template-columns: 1fr 70px 70px 70px; gap: 6px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--pb-border2); min-height: 48px; font-size: 14.5px; width: 100%; text-align: left; color: inherit; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-ptab .v { font-family: var(--pb-cond); font-weight: 800; font-size: 17px; text-align: right; font-variant-numeric: tabular-nums; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-ptab.hd span { text-align: right; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-ptab.hd span:first-child { text-align: left; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-ptab .s { font-size: 12.5px; color: var(--pb-dim); font-weight: 400; }
/* Sheets (the shell's .pb-dlg is already a bottom sheet ≤600px) */
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-opt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 4px; border-top: 1px solid var(--pb-border2); width: 100%; text-align: left; color: inherit; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-opt:first-child { border-top: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-opt .m { flex: 1; min-width: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-opt .t { font-weight: 600; display: block; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-opt .s { font-size: 13px; color: var(--pb-dim); display: block; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-opt .material-symbols-outlined { color: var(--pb-dim); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 2px 0 8px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sig { padding: 4px 12px; border: 1px dashed var(--pb-border); border-radius: 12px; font-size: 14px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sig .pbp-row { padding-left: 0; padding-right: 0; min-height: 44px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sig .pbp-row .material-symbols-outlined { color: var(--pb-ok); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sig .pbp-row.open .material-symbols-outlined { color: var(--pb-warn); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-ta { width: 100%; min-height: 88px; border: 1px solid var(--pb-border); border-radius: 12px; background: var(--pb-input); color: var(--pb-text); font: inherit; font-size: 16px; padding: 10px 12px; resize: none; outline: 0; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-step { display: flex; align-items: center; gap: 10px; height: 38px; }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-step .material-symbols-outlined { font-size: 24px; color: var(--pb-dim); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-step.on { color: var(--pb-ok); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-step.on .material-symbols-outlined { color: var(--pb-ok); }
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-empty { padding: 28px 12px; text-align: center; color: var(--pb-dim); font-size: 14px; border: 1px dashed var(--pb-border); border-radius: 14px; }

/* The shell's own sheets (assign, dialogs) already go bottom-sheet ≤600px.
   Only the SCREENS sheet is new: tiles + two rows. */
:is(.pbp, .pb-dlg-ovl, .pb-asgn-ovl) .pbp-sheet-grid .pbp-tiles { grid-template-columns: repeat(4, 1fr); }


/* ══ module block · tyres-setup (merged from pitbox-phone-tyres-setup.css) ══ */
/* ══ PIT BOX PHONE — the TYRES (.pbpt-*) and SETUP (.pbps-*) screens ═══════
   Module-specific rules only; every atom (.pbp-card/.pbp-row/.pbp-pc/.pbp-diff
   /.pbp-vs/.pbp-btn/.pbp-bar/.pbp-tag) comes from pitbox-phone.css. Tokens are
   the shell's own (--pb-*), so light mode needs nothing here. Design record:
   tools/harness/pitbox_phone_v4_src.html (tyresHtml / setupHtml). */

/* ── Tyres ── */
.pbpt-root, .pbps-root { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pbpt-body { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.pbpt-cmp { margin-left: 4px; vertical-align: 2px; }
.pbpt-tags { flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
.pbpt-tags .pbp-tag .material-symbols-outlined { font-size: 14px; }
.pbpt-when { margin-top: -2px; }
.pbpt-bar { margin-top: 4px; }
/* card buttons: the mockup's .btn.sm at a 44px thumb target */
.pbp-btn.pbpt-b { height: 44px; padding: 0 12px; font-size: 14px; }
.pbpt-set .pbp-row .s b { color: var(--pb-text); }
.pbpt-set .pbp-row .s b.bad { color: var(--pb-danger); }
.pbpt-ref .pbp-row .t { font-variant-numeric: tabular-nums; }
/* inline editors (cold · hot · tread) live INSIDE the card body */
.pbpt-edit { display: flex; flex-direction: column; gap: 8px; }
.pbpt-edit .pbp-pc input.pbt-ci, .pbpt-edit .pbp-pc input.pbpt-hi { width: 100%; height: 30px; border: 0; border-bottom: 1px solid var(--pb-border); border-radius: 0; background: transparent; font-family: var(--pb-cond); font-weight: 800; font-size: 19px; color: var(--pbp-cold); padding: 0; text-align: center; }
.pbpt-edit .pbp-pc input.pbt-ci.sug { background: rgba(var(--accent-rgb), .12); border-bottom-color: var(--accent); }
.pbpt-edit .pbp-pc.hot input { color: var(--pbp-hot); }
.pbpt-edit .pbp-pc.tread input { color: var(--pb-text); }
.pbpt-edit .pbp-pc input:focus { outline: 0; border-bottom-color: var(--accent); }
.pbpt-frow { display: flex; gap: 8px; }
.pbpt-frow > * { flex: 1; min-width: 0; }
.pbpt-edit .pbp-inp input, .pbpt-edit .pbp-inp input.pbt-ci, .pbpt-edit .pbp-inp input.pbpt-hi { width: auto; flex: 1; min-width: 0; height: 44px; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 16px; text-align: left; color: var(--pb-text); padding: 0; }
.pbpt-edit .pbp-inp select { font-size: 16px; color: var(--pb-text); }
.pbpt-edit .pbp-inp .u { flex: none; }
/* the change plan's day chips (only when the event spans days) */
.pbpt-days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.pbpt-days::-webkit-scrollbar { display: none; }
.pbpt-days button { height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--pb-border); background: var(--pb-card); font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--pb-dim); flex: none; }
.pbpt-days button.on { background: var(--pb-text); color: var(--pb-page); border-color: var(--pb-text); }
.pbpt-root .pbp-row .pbp-tb[role="button"] { min-height: 44px; display: inline-flex; align-items: center; }

/* ── Setup ── */
.pbps-tb { min-width: 40px; }
.pbps-ses { min-width: 52px; text-align: center; flex: none; }
.pbps-sel .pbp-tb { text-decoration: underline; text-underline-offset: 3px; }
.pbps-cmp .pbp-diff > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbps-cmp .pbp-diff.pbps-same { color: var(--pb-dim); font-size: 13.5px; min-height: 36px; }
.pbps-pick { height: auto; min-height: 48px; }
.pbps-pick .u { flex: none; }
.pbps-pick select { font-size: 16px; color: var(--pb-text); min-width: 0; }
.pbps-root .pbp-row .s .pbs-fbc { vertical-align: middle; }
/* the real car-shaped sheet inside the phone column */
.pbps-sheet { min-width: 0; }
.pbps-sheet .pbs-swsheet { border-radius: 14px; }
.pbps-sheet .pbs-swsheet-h { padding: 12px; }
.pbps-sheet .pbs-btn, .pbps-sheet .pbs-iconbtn { min-height: 40px; }
.pbps-sheet .pbs-swsheet-f .pbs-btn { flex: 1; justify-content: center; }
.pbps-root .pbs-bolt { color: var(--pbp-best, #c084fc); font-size: 18px; }
.pbps-sheet .pbs-btn, .pbps-sheet .pbs-chip { text-transform: none; letter-spacing: 0; font-size: 14px; }
.pbps-sheet .pbs-swsheet-f .pbs-swsheet-hint { flex-basis: 100%; text-align: center; }


/* ══ module block · fuel-timing-pace (merged from pitbox-phone-fuel-timing-pace.css) ══ */
/* ══ PIT BOX PHONE — fuel · timing · pace (module-specific rules) ═══════════
   The atoms live in pitbox-phone.css; this file carries only what those three
   screens add on top (.pbpf- fuel · .pbpm- timing · .pbpp- pace). Tokens are
   the shell's own (--pb-*), so light mode needs no block of its own; the only
   literal colours are the chart's series palette, painted inline by the
   module (the app's validated categorical order). */

/* ── shared: neutralise the DESKTOP pace rules that share these class names
   (.pbp-card / .pbp-ses / .pbp-note / .pbp-legend in pitbox-screens.css) ── */
#pb-root.pbp .pbp-card { padding: 0; margin: 0; }
#pb-root.pbp .pbp-ses { display: inline-block; overflow: visible; padding: 2px 8px; gap: 0; }
#pb-root.pbp .pbp-note { max-width: none; font-size: 14px; }
#pb-root.pbp .pbp-legend { margin: 0; }
#pb-root.pbp .pbp-chart { overflow: visible; }

/* ── FUEL ── */
.pbpf-log { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pbpf-log .pbp-btn { width: 100%; }
.pbpf-log .pbp-btn span[id] { margin: 0 2px 0 4px; }
.pbpf-plan { display: inline-flex; align-items: center; gap: 2px; font-family: var(--body, inherit); letter-spacing: 0; text-transform: none; }
.pbpf-plan b { font-family: var(--pb-cond); font-weight: 800; font-size: 16px; color: var(--pb-text); min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.pbpf-plan .pbp-ib { width: 40px; height: 40px; border: 1px solid var(--pb-border); border-radius: 10px; }
.pbpf-plan .pbp-ib .material-symbols-outlined { font-size: 20px; }
.pbpf-stint { min-height: 48px; }
.pbpf-stint .s { white-space: normal; }
.pbpf-tl { padding: 0 12px 0 34px; }
.pbpf-tl .pbp-row .t small { color: var(--pb-dim); font-weight: 500; }
.pbpf-car + .pbpf-car { margin-top: 8px; }
.pbpf, .pbpm, .pbpp { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pbpf-car { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pbp-fuelbig .big { white-space: nowrap; }

/* ── TIMING ── */
.pbpm-tl { padding: 0 12px 0 34px; }
.pbpm-tl .pbp-row .t { white-space: normal; }
.pbpm-end { font-size: 13px; color: var(--pb-dim); font-weight: 500; white-space: nowrap; }
.pbpm-tl .pbp-row .r { flex-wrap: wrap; justify-content: flex-end; max-width: 42%; }
.pbpm-other .t { color: var(--pb-dim); }
.pbp-subt .pbpm-tog .material-symbols-outlined { font-size: 18px; }

/* ── PACE ── */
.pbpp-kv .k small { display: block; font-family: var(--body, inherit); font-size: 12px; color: var(--pb-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbpp-kv .k b { font-size: 20px; }
.pbpp-chart svg text { font-variant-numeric: tabular-nums; }
.pbpp-legend { padding: 8px 4px 2px; gap: 8px 12px; align-items: center; }
.pbpp-lg { display: inline-flex; align-items: center; gap: 0; min-height: 32px; padding: 0 4px; border-radius: 8px; font-size: 13px; color: var(--pb-text); font-weight: 600; }
.pbpp-lg .material-symbols-outlined { font-size: 16px; margin-right: 3px; color: var(--pb-dim); }
.pbpp-bestdot { width: 8px !important; height: 8px !important; border-radius: 4px !important; background: var(--pbp-best); }
#pb-root.pbp .pbp-ptab { grid-template-columns: minmax(0, 1fr) 62px 62px 56px; gap: 4px; padding: 8px 10px; }
#pb-root.pbp .pbp-ptab .v { font-size: 16px; }
.pbpp-drv { display: block; min-width: 0; }
.pbpp-drv i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pbpp-drv b { font-weight: 600; }
.pbpp-drv .s { display: block; white-space: normal; line-height: 1.25; }
.pbp-ptab.off { opacity: .42; }
.pbp-ptab .v.lead { color: var(--accent); }
.pbp-ptab.hd span:first-child { text-align: left; }
.pbp-lap .bad { color: var(--pb-danger); font-weight: 600; }
.pbp-lap .best { color: var(--pbp-best); font-weight: 700; }
.pbp-lap .dim { color: var(--pb-dim); }
.pbp-lap.pit b { color: var(--pb-dim); font-weight: 600; }
.pbp-subt .pbpp-csv:disabled { opacity: .45; }


/* ══ module block · feedback-brakes (merged from pitbox-phone-feedback-brakes.css) ══ */
/* ══ PIT BOX PHONE — Feedback (.pbpfb-*) + Brakes (.pbpb-*) module rules ═══
   Design record: tools/harness/pitbox_phone_v4.html (feedbackHtml / brakesHtml).
   Everything structural comes from the shell's atoms in pitbox-phone.css
   (.pbp-verdict .pbp-cr .pbp-fb .pbp-hdrow .pbp-diff .pbp-vs .pbp-brk
   .pbp-meter .pbp-kv …); only what those two screens add lives here, on the
   --pb-* tokens so light mode needs no second block. */

/* ── Feedback ── */
.pbpfb { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pbpfb-ses { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.pbpfb-ses::-webkit-scrollbar { display: none; }
.pbpfb-ses .pbp-chip, .pbpfb-cars .pbp-chip { height: 40px; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--pb-border); background: var(--pb-card2); font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--pb-dim); flex: none; display: inline-flex; align-items: center; gap: 6px; }
.pbpfb-ses .pbp-chip.on, .pbpfb-cars .pbp-chip.on { background: var(--pb-text); color: var(--pb-page); border-color: var(--pb-text); }
.pbpfb-ses .pbp-chip .n { background: var(--accent); color: var(--pb-on-accent); min-width: 18px; height: 18px; border-radius: 9px; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.pbpfb-best { font-size: 13px; color: var(--pb-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pbpfb .pbp-verdict .vh { flex-wrap: wrap; row-gap: 4px; }
.pbpfb .pbp-verdict .vh b { min-width: 0; }
.pbpfb-open { color: var(--accent); min-height: 48px; }
.pbpfb-open .t { font-weight: 600; }
.pbpfb-open .material-symbols-outlined { color: var(--pb-dim); }
.pbpfb-ok { min-height: 52px; }
.pbpfb-ok .material-symbols-outlined { color: var(--pb-dim); }
/* four or more driver columns: the 92px cells give way and the chips tighten */
.pbpfb-corners[data-n="3"] .pbp-cr, .pbpfb-corners[data-n="3"] .pbp-hdrow { grid-template-columns: 1fr repeat(3, minmax(0, 72px)); }
.pbpfb-corners[data-n="4"] .pbp-cr, .pbpfb-corners[data-n="4"] .pbp-hdrow,
.pbpfb-corners[data-n="5"] .pbp-cr, .pbpfb-corners[data-n="5"] .pbp-hdrow,
.pbpfb-corners[data-n="6"] .pbp-cr, .pbpfb-corners[data-n="6"] .pbp-hdrow { grid-template-columns: minmax(64px, 1fr) repeat(var(--n), minmax(0, 1fr)); gap: 4px; }
.pbpfb-corners[data-n="4"] .pbp-fb, .pbpfb-corners[data-n="5"] .pbp-fb, .pbpfb-corners[data-n="6"] .pbp-fb { font-size: 12.5px; }
.pbpfb .pbp-diff > span:first-child { min-width: 0; }
.pbpfb .pbp-diff .why.same { color: var(--pb-dim); }
.pbpfb .pbp-diff .o, .pbpfb .pbp-diff .n { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pbpfb-v { font-family: var(--pb-cond); font-weight: 800; font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pbpfb .pbp-note b { color: var(--pb-text); }

/* ── Brakes ── */
.pbpb { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pbpb[hidden], .pbpb-slot[hidden] { display: none; }
.pbpb-cars { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pbpb-cars::-webkit-scrollbar { display: none; }
.pbpb-cars .pbp-chip { height: 40px; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--pb-border); background: var(--pb-card2); font-family: var(--pb-cond); font-weight: 800; font-size: 16px; color: var(--pb-dim); flex: none; display: inline-flex; align-items: center; }
.pbpb-cars .pbp-chip.on { background: var(--accent); color: var(--pb-on-accent); border-color: var(--accent); }
.pbpb .pbp-brk .k label { gap: 6px; }
.pbpb .pbp-brk .k .v { flex-wrap: wrap; row-gap: 0; }
.pbpb .pbp-brk .k .v > span { flex: none; }
.pbpb .pbp-brk .k .v b { white-space: nowrap; margin-left: auto; }
.pbpb-swap { margin-top: 6px; color: var(--pb-danger); font-size: 13px; }
.pbpb-swap.ok { color: var(--pb-dim); }
.pbpb-lnk { display: inline; padding: 0; min-height: 0; font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; background: none; border: 0; }
.pbpb-swap.ok .pbpb-lnk { color: var(--pb-text); }
.pbpb-kv { grid-template-columns: repeat(var(--n, 3), 1fr); }
.pbpb-kv .k b.pbpb-small { font-size: 18px; margin-top: 6px; }
.pbpb-hrow { min-height: 48px; }
.pbpb-hrow .pbp-ses { min-width: 58px; text-align: center; }
.pbpb-hrow .t.bad { color: var(--pb-danger); }
/* The Stock chip shows the SAME pane the desktop mounts (brake-stock.js's own
   ≤600px board) — its scope bar is the shell's chip strip here, and the
   board's sticky control row would fight the shell's own sticky top. */
.pbpb-slot .pbx-bt-bar, .pbpb-slot .pbk-cars, .pbpb-slot .pbk-packed { display: none; }
.pbpb-slot .bs-modal-right.bsc-ph .bsc-top { position: static; }
.pbpb-slot .bs-modal { display: block; }
.pbpb-slot .bs-modal-body { display: block; }
.pbpb-slot .bs-form-panel:empty { display: none; }