/* Pit Box v3 — secondary screens. One banner per module; each block owns its own
   prefix and its own light-mode + ≤600px rules. Append only; never edit another block. */

/* ═ SETUP (.pbs-) ═ */
/* Ported from legacy pitbox.css (.pb-sw* / .pb-su* / .pb-tb*) + the mockup's
   .su-* history / families / compare shapes, renamed .pbs-. */
.pbs-root { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pbs-none { color: #5a6678; font-size: 12.5px; padding: 18px 0; }
.pbs-none .pbs-btn { margin-left: 8px; }
.pbs-spacer { flex: 1; }
.pbs-note { font-size: 12.5px; color: #7a8a9b; line-height: 1.4; }
.pbs-lbl { font-family: 'Barlow Condensed', sans-serif; letter-spacing: .09em; font-weight: 600; font-size: 11px; color: #7a8a9b; }
.pbs-jid { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; background: #0f1318; border: 1px solid #2a3040; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .05em; flex: 0 0 auto; white-space: nowrap; vertical-align: middle; color: #dce3ed; }
.pbs-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .07em; font-weight: 700; font-size: 11.5px; border: 1px solid #2a3040; color: #7a8a9b; white-space: nowrap; vertical-align: middle; }
.pbs-pill.sm { height: 18px; font-size: 10px; padding: 0 6px; }
.pbs-pill.ready { background: rgba(74, 200, 164, .14); border-color: #4ac8a4; color: #4ac8a4; }
.pbs-pill.togo { background: rgba(224, 166, 75, .14); border-color: #e0a64b; color: #e0a64b; }
.pbs-pill.accent { background: rgba(var(--accent-rgb), .16); border-color: var(--accent); color: var(--accent); }
.pbs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 7px; border: 1px solid #2a3040; background: #141820; color: #9aa7b8; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.pbs-btn:hover { border-color: #7a8a9b; color: #dce3ed; }
.pbs-btn:disabled { opacity: .45; cursor: default; }
.pbs-btn .material-symbols-outlined { font-size: 16px; }
.pbs-btn.sm { min-height: 30px; padding: 0 9px; font-size: 11.5px; }
.pbs-btn-acc { background: var(--accent); border-color: transparent; color: #0f1218; }
.pbs-btn-acc:hover { opacity: .88; color: #0f1218; }
.pbs-iconbtn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 7px; border: 1px solid #2a3040; background: none; color: #7a8a9b; cursor: pointer; }
.pbs-iconbtn:hover { border-color: #7a8a9b; color: #dce3ed; }
.pbs-iconbtn .material-symbols-outlined { font-size: 18px; }
.pbs-chip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid #2a3040; background: #141820; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 12px; color: #7a8a9b; white-space: nowrap; cursor: pointer; }
.pbs-chip .material-symbols-outlined { font-size: 16px; }
.pbs-chip.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.pbs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pbs-link { font-size: 11.5px; color: var(--accent); text-decoration: underline dotted; text-underline-offset: 3px; min-height: 28px; background: none; border: 0; cursor: pointer; font-family: inherit; }
.pbs-in { background: #141820; border: 1px solid #2a3040; border-radius: 7px; color: #dce3ed; font: inherit; font-size: 12.5px; padding: 6px 8px; min-width: 0; }
.pbs-in:focus { border-color: var(--accent); outline: none; }
.pbs-saved { font-size: 11px; color: #4ac8a4; min-width: 48px; text-align: right; }
.pbs-fbc { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: 11px; border: 1px solid #2a3040; white-space: nowrap; vertical-align: middle; }
.pbs-fbc.us { background: rgba(224, 166, 75, .16); border-color: #e0a64b; color: #e0a64b; }
.pbs-fbc.os { background: rgba(99, 102, 241, .16); border-color: #6366f1; color: #8b8df5; }
.pbs-fbc.neu { background: rgba(74, 200, 164, .14); border-color: #4ac8a4; color: #4ac8a4; }
.pbs-fbcell { white-space: nowrap; }
.pbs-fbcell .pbs-fbc + .pbs-fbc { margin-left: 3px; }
.pbs-panel { background: #141820; border: 1px solid #1a1f28; border-radius: 10px; padding: 12px; }
.pbs-panel h3 { margin: 0 0 8px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: #9aa7b8; }

/* ── History (one row per session) ── */
.pbs-hist { border: 1px solid #1a1f28; border-radius: 10px; background: #141820; overflow: hidden; }
.pbs-ph { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #1a1f28; flex-wrap: wrap; }
.pbs-ph h3 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; }
.pbs-best { font-variant-numeric: tabular-nums; color: var(--accent); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; }
.pbs-tblwrap { overflow-x: auto; max-width: 100%; }
.pbs-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.pbs-tbl th { text-align: left; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: #7a8a9b; font-weight: 700; padding: 4px 6px; border-bottom: 1px solid #1a1f28; white-space: nowrap; }
.pbs-tbl td { padding: 7px 6px; border-bottom: 1px solid #1a1f28; font-variant-numeric: tabular-nums; vertical-align: middle; }
.pbs-tbl td.r, .pbs-tbl th.r { text-align: right; }
.pbs-tbl td.lap { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap; }
.pbs-hr { cursor: pointer; }
.pbs-hr:hover td { background: #0f1318; }
.pbs-hr.best td.lap { color: var(--accent); font-weight: 800; }
.pbs-hr.planned td { color: #7a8a9b; }
.pbs-hs { cursor: pointer; }
.pbs-hs td { background: #0f1318; font-size: 12.5px; }
.pbs-hs.sel td { box-shadow: inset 3px 0 0 var(--accent); }
.pbs-hs:hover td { background: #131820; }
.pbs-exp { display: inline-grid; place-items: center; width: 22px; height: 22px; color: #7a8a9b; vertical-align: middle; }
.pbs-exp .material-symbols-outlined { font-size: 18px; transition: transform .15s; }
.pbs-bolt { font-size: 16px; color: var(--accent); vertical-align: middle; }

/* ── Layout: list | sheet ── */
.pbs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; align-items: start; }
.pbs-sheetcol { min-width: 0; }
.pbs-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pbs-srch { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 1px solid #2a3040; border-radius: 7px; background: #141820; }
.pbs-srch .material-symbols-outlined { color: #7a8a9b; font-size: 18px; }
.pbs-srch input { border: 0; background: none; width: 100%; min-width: 0; color: #dce3ed; font: inherit; font-size: 13px; outline: none; }
.pbs-it { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 9px; border: 1px solid #1a1f28; background: #141820; text-align: left; width: 100%; color: inherit; font: inherit; cursor: pointer; }
.pbs-it:hover { border-color: #2a3040; }
.pbs-it.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pbs-it .nm { font-weight: 600; display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.pbs-it .m { font-size: 12px; color: #7a8a9b; line-height: 1.35; }
.pbs-rating { color: #e0a64b; }
.pbs-fam .exp { font-size: 18px; color: #7a8a9b; transition: transform .15s; vertical-align: middle; }
.pbs-fam.open > .pbs-it .exp { transform: rotate(90deg); }
.pbs-fam.arch > .pbs-it { opacity: .7; }
.pbs-archtog { color: #7a8a9b; }
.pbs-vers { display: flex; flex-direction: column; gap: 3px; padding: 4px 0 4px 12px; border-left: 2px solid #1a1f28; margin: 2px 0 4px 12px; }
.pbs-ver { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 44px; padding: 4px 8px; border-radius: 7px; border: 1px solid transparent; background: none; text-align: left; font: inherit; font-size: 12.5px; color: inherit; cursor: pointer; width: 100%; }
.pbs-ver:hover { background: #0f1318; }
.pbs-ver.sel { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.pbs-ver .vt { display: flex; flex-direction: column; min-width: 0; }
.pbs-ver .vt b { font-weight: 600; }
.pbs-ver .vd { color: #7a8a9b; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbs-ver .lap { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; color: #7a8a9b; }
.pbs-famact { display: flex; gap: 6px; padding: 0 0 6px 24px; flex-wrap: wrap; }
.pbs-suadd { border: 1px dashed #2a3040; border-radius: 8px; padding: 7px 10px; color: #5a6678; font-size: 12px; width: 100%; text-align: left; background: none; cursor: pointer; font-family: inherit; }
.pbs-suadd:hover { color: var(--accent); border-color: var(--accent); }

/* ── The car-shaped sheet ── */
.pbs-swsheet { background: #141820; border: 1px solid #1a1f28; border-radius: 12px; overflow: hidden; min-width: 0; }
.pbs-swsheet-h { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid #1a1f28; flex-wrap: wrap; }
.pbs-swsheet-t { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pbs-diff { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; padding: 6px 15px; background: #0f1318; border-bottom: 1px dashed #2a3040; color: #9aa7b8; }
.pbs-cmp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 15px; border-bottom: 1px solid rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .06); }
.pbs-cmp-ic { color: var(--accent); }
.pbs-cmp .vs { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbs-cmp .side { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pbs-cmp .vs .lap { font-variant-numeric: tabular-nums; color: #7a8a9b; font-weight: 700; }
.pbs-cmp .delta.gain { color: #4ac8a4; }
.pbs-cmp .delta.loss { color: #ef4444; }
.pbs-swbody { padding: 12px 15px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pbs-swsec { border: 1px solid #1a1f28; border-radius: 10px; padding: 10px 12px; background: #0f1318; min-width: 0; }
.pbs-swsec-t { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: #7a8a9b; margin-bottom: 8px; }
.pbs-swsec-p { font-size: 9.5px; color: #3a4555; letter-spacing: .5px; margin-left: 8px; }
.pbs-swrows { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 16px; }
.pbs-swf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; font-size: 12.5px; min-height: 30px; padding: 2px 0; min-width: 0; border-bottom: 1px dashed #1a1f28; }
.pbs-swf .k { color: #7a8a9b; font-size: 11.5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbs-swf .k u { text-decoration: none; color: #3a4555; font-size: 10px; }
.pbs-swf .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.pbs-swf .was { font-size: 10.5px; color: #5a6678; font-variant-numeric: tabular-nums; }
.pbs-swf.chg { background: rgba(var(--accent-rgb), .1); border-radius: 5px; padding: 2px 6px; border-bottom-color: transparent; }
.pbs-swf.chg .old { color: #7a8a9b; text-decoration: line-through; font-weight: 500; }
.pbs-swf.chg .arr { color: #5a6678; }
.pbs-swf.chg .new { color: var(--accent); font-weight: 800; }
.pbs-swf.chg .pbs-swin { border-color: rgba(var(--accent-rgb), .55); color: var(--accent); }
.pbs-swv { font-weight: 600; }
.pbs-swin { width: 70px; flex: 0 0 auto; height: 30px; background: #141820; border: 1px solid #2a3040; border-radius: 6px; color: #dce3ed; font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; padding: 0 6px; }
.pbs-swin:focus { border-color: var(--accent); outline: none; }
.pbs-swnose { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5a6678; margin-bottom: 8px; }
.pbs-swnose .material-symbols-outlined { font-size: 15px; }
.pbs-swcar { display: grid; grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr); gap: 10px; }
.pbs-swcorner { border: 1px solid #1a1f28; border-radius: 10px; padding: 9px 11px; background: #141820; min-width: 0; }
.pbs-swcorner[data-c="FL"], .pbs-swcorner[data-c="RL"] { border-left: 3px solid #2a3040; }
.pbs-swcorner[data-c="FR"], .pbs-swcorner[data-c="RR"] { border-right: 3px solid #2a3040; }
.pbs-swc-t { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .04em; color: #9aa7b8; margin-bottom: 6px; }
.pbs-swaxle { border: 1px dashed #2a3040; border-radius: 10px; padding: 9px 10px; align-self: center; background: rgba(20, 24, 32, .6); min-width: 0; }
.pbs-swaxle-t { font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #5a6678; text-align: center; margin-bottom: 4px; }
.pbs-swaxle .pbs-swin { width: 58px; }
.pbs-swsheet-f { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-top: 1px solid #1a1f28; flex-wrap: wrap; justify-content: flex-end; }
.pbs-swsheet-f .pbs-note { margin-right: auto; }
.pbs-swsheet-hint { font-size: 11.5px; color: #5a6678; }

/* ── Mechanic delta tick list ── */
.pbs-delta { display: flex; flex-direction: column; gap: 6px; padding: 0 15px 12px; }
.pbs-delta h4 { margin: 0; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; font-size: 12px; color: #7a8a9b; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbs-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 46px; padding: 4px 8px; border-radius: 7px; border: 1px solid #1a1f28; background: #0f1318; text-align: left; font: inherit; font-size: 14px; color: inherit; width: 100%; cursor: pointer; }
.pbs-step:hover { border-color: #7a8a9b; }
.pbs-step .bx { width: 24px; height: 24px; border-radius: 6px; border: 2px solid #7a8a9b; display: grid; place-items: center; }
.pbs-step .bx .material-symbols-outlined { font-size: 18px; }
.pbs-step.done .bx { background: #4ac8a4; border-color: #4ac8a4; color: #fff; }
.pbs-step.done .tx { text-decoration: line-through; color: #7a8a9b; }
.pbs-step .by { font-size: 11.5px; color: #7a8a9b; white-space: nowrap; }

/* ── Template builder ── */
.pbs-builder { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.pbs-tbhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pbs-tbtitle { font-size: 14.5px; font-weight: 700; }
.pbs-tbchip { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #7a8a9b; border: 1px solid #2a3040; border-radius: 10px; padding: 2px 9px; }
.pbs-tbsub { font-size: 11.5px; color: #5a6678; margin-bottom: 8px; }
.pbs-tbsec { background: #141820; border: 1px solid #1a1f28; border-radius: 12px; padding: 11px 13px; margin-bottom: 10px; }
.pbs-tbsec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.pbs-tbname { width: 220px; max-width: 100%; font-weight: 600; }
.pbs-tbplace { width: auto; font-size: 11.5px; color: #7a8a9b; }
.pbs-tbfields { display: flex; flex-direction: column; gap: 6px; }
.pbs-tbf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pbs-tbf .pbs-in { flex: 1 1 120px; }
.pbs-tbunit { flex: 0 0 74px !important; }
.pbs-tbscope { flex: 0 0 92px !important; font-size: 11.5px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .pbs-layout { grid-template-columns: 1fr; }
  .pbs-swcar { grid-template-columns: 1fr 1fr; }
  .pbs-swaxle { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .pbs-swcar { grid-template-columns: 1fr; }
  .pbs-swrows { grid-template-columns: 1fr; }
  .pbs-swsheet-h, .pbs-diff, .pbs-cmp, .pbs-swbody, .pbs-swsheet-f { padding-left: 10px; padding-right: 10px; }
  .pbs-swin, .pbs-srch input, .pbs-in { font-size: 16px; }
  .pbs-swin { width: 78px; height: 36px; }
  .pbs-step { min-height: 48px; }
  .pbs-btn { min-height: 40px; }
  .pbs-tbl { font-size: 12px; }
}

/* ── Light mode ── */
body.light-mode .pbs-swin, body.light-mode .pbs-in, body.light-mode .pbs-srch { background: #ffffff; border-color: #dde2ec; color: #1a2030; }
body.light-mode .pbs-srch input { color: #1a2030; }
body.light-mode .pbs-hist, body.light-mode .pbs-swsheet, body.light-mode .pbs-tbsec, body.light-mode .pbs-panel,
body.light-mode .pbs-it, body.light-mode .pbs-btn, body.light-mode .pbs-chip { background: #ffffff; border-color: #e8ecf2; }
body.light-mode .pbs-btn, body.light-mode .pbs-chip { color: #4a5565; }
body.light-mode .pbs-chip.on { color: #5b7a00; border-color: #5b7a00; }
body.light-mode .pbs-swsec, body.light-mode .pbs-swcorner, body.light-mode .pbs-diff, body.light-mode .pbs-step,
body.light-mode .pbs-hs td, body.light-mode .pbs-hr:hover td, body.light-mode .pbs-ver:hover, body.light-mode .pbs-jid { background: #f8f9fc; border-color: #e8ecf2; color: #1a2030; }
body.light-mode .pbs-ph, body.light-mode .pbs-tbl th, body.light-mode .pbs-tbl td, body.light-mode .pbs-swsheet-h, body.light-mode .pbs-swsheet-f, body.light-mode .pbs-vers { border-color: #e8ecf2; }
body.light-mode .pbs-swaxle { background: #eef1f6; border-color: #cdd5e0; }
body.light-mode .pbs-swaxle-t, body.light-mode .pbs-swc-t, body.light-mode .pbs-swnose, body.light-mode .pbs-swf .k,
body.light-mode .pbs-note, body.light-mode .pbs-lbl, body.light-mode .pbs-it .m, body.light-mode .pbs-ver .vd { color: #55606f; }
body.light-mode .pbs-swf .k u, body.light-mode .pbs-swf .was, body.light-mode .pbs-none { color: #8a95a5; }
body.light-mode .pbs-swv, body.light-mode .pbs-swsheet-t, body.light-mode .pbs-ph h3, body.light-mode .pbs-it .nm { color: #1a2030; }
body.light-mode .pbs-btn-acc { color: #ffffff; background: var(--accent); }
body.light-mode .pbs-hr.best td.lap, body.light-mode .pbs-best, body.light-mode .pbs-swf.chg .new { color: #5b7a00; }
body.light-mode .pbs-fbc.os { color: #4f51d6; }

/* ═ FUEL (.pbu-) ═ pitbox-fuel.js */
.pbu { display: flex; flex-direction: column; gap: 14px; }
.pbu-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pbu-head h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 3px; font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #dce3ed; }
.pbu-head p { margin: 0; font-size: 12.5px; color: #7a8a9b; max-width: 70ch; }
.pbu-car { border: 1px solid #1f2530; border-radius: 12px; background: #10141a; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pbu-car-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pbu-car-h b { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: .6px; color: #dce3ed; }
.pbu-car-h small { font-size: 12px; color: #7a8a9b; }
/* No text-transform: the chip reads "Next · <session name>" — DATA. */
.pbu-ses { margin-left: auto; font-family: 'Barlow Condensed', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; padding: 3px 9px; border-radius: 6px; background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.pbu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pbu-tile { border: 1px solid #1f2530; border-radius: 10px; padding: 10px; text-align: center; background: #141820; }
.pbu-tile .k { display: block; margin-bottom: 4px; font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #7a8a9b; }
.pbu-tile .v { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 800; line-height: 1.05; color: #dce3ed; font-variant-numeric: tabular-nums; }
.pbu-tile .s { display: block; margin-top: 3px; font-size: 11px; color: #5a6678; }
.pbu-tile.add { border-color: #e0a64b; }  .pbu-tile.add .v { color: #e0a64b; }
.pbu-tile.ok { border-color: #34d399; }   .pbu-tile.ok .v { color: #34d399; }
.pbu-step { display: inline-flex; align-items: center; gap: 6px; justify-content: center; margin-top: 6px; }
.pbu-step .pb-btn { padding: 5px 8px; }
/* FU-06: where the engineer's plan lives (run plan / server / this browser only) */
.pbu-step .pbu-plansrc { white-space: nowrap; }
.pbu-step .pbu-plansrc.local { color: #e0a64b; }
.pbu-panel { border: 1px solid #1f2530; border-radius: 10px; background: #141820; padding: 11px 13px; }
.pbu-panel h4 { margin: 0 0 8px; font-family: 'Barlow Condensed', sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #9aa7b8; }
.pbu-now { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbu-now input { width: 76px; text-align: center; font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; padding: 6px 8px; border-radius: 8px; border: 1px solid #2a3040; background: #0f1318; color: #dce3ed; font-variant-numeric: tabular-nums; }
.pbu-now .pbu-l { font-size: 12px; color: #7a8a9b; }
.pbu-now .pbu-sp { flex: 1; }

/* ── Set fuel: two TYPED fields, Add derived ────────────────────────────────
   Replaces the ±1 stepper. Both fields hold an ABSOLUTE litre figure — what is
   in the car, and what should be in it — because that is what a crew actually
   knows; the amount to add is arithmetic and is shown, not asked for. */
.pbu-set { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.pbu-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pbu-f .k { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: 11px; color: #7a8a9b; }
.pbu-fi { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #2a3040; background: #0f1318; border-radius: 8px; padding: 0 10px 0 0; }
.pbu-fi input { width: 92px; text-align: center; font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; padding: 7px 4px 7px 10px; border: 0; background: none; color: #dce3ed; font-variant-numeric: tabular-nums; min-width: 0; }
.pbu-fi input:focus { outline: none; }
.pbu-fi:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pbu-fi input:disabled { opacity: .55; cursor: not-allowed; }
.pbu-fi .u { font-size: 12px; color: #7a8a9b; }
/* Hide the spin buttons: the field is typed or pasted, and a 0.5 L spinner on a
   fuel figure invites the same click-fifty-times problem the stepper had. */
.pbu-fi input::-webkit-outer-spin-button, .pbu-fi input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pbu-fi input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.pbu-f .pbu-plansrc { font-size: 11px; color: #7a8a9b; white-space: nowrap; }
.pbu-f .pbu-plansrc.local { color: #e0a64b; }
.pbu-fadd { justify-content: flex-end; }
.pbu-addv { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; line-height: 1.5; color: #7a8a9b; font-variant-numeric: tabular-nums; }
.pbu-addv.add { color: var(--pb-warn, #f5a623); }
.pbu-addv.ok { color: var(--pb-ok, #34d66f); }
.pbu-save { margin-left: auto; }
/* The board's rail card sets the target without opening the screen. */
.pb-rc-tgt { display: inline-flex; align-items: center; gap: 4px; }
.pb-rc-tgt input { width: 62px; text-align: right; border: 1px solid #2a3040; background: #0f1318; color: inherit; border-radius: 6px; padding: 2px 6px; font: inherit; font-variant-numeric: tabular-nums; }
.pb-rc-tgt input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pb-rc-tgt input::-webkit-outer-spin-button, .pb-rc-tgt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pb-rc-tgt input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.pb-rc-tgt .u { font-size: 11px; color: #7a8a9b; }
.pbu-note { margin: 8px 0 0; font-size: 11.5px; color: #5a6678; }
.pbu-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; color: #cfd8e3; font-variant-numeric: tabular-nums; }
.pbu-tbl th { text-align: left; font: 700 10.5px 'Barlow Condensed', sans-serif; letter-spacing: .7px; text-transform: uppercase; color: #7a8a9b; padding: 5px 8px; border-bottom: 1px solid #1f2530; }
.pbu-tbl td { padding: 6px 8px; border-bottom: 1px solid #171d26; }
.pbu-tbl .r { text-align: right; }  .pbu-tbl .dim { color: #7a8a9b; font-size: 11.5px; }
.pbu-hist { display: flex; flex-direction: column; gap: 6px; }
.pbu-hi { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 6px 8px; border-left: 2px solid #2a3040; font-size: 12.5px; color: #cfd8e3; }
.pbu-hi.now { border-left-color: var(--accent); }
.pbu-hi .t { font-size: 11.5px; color: #7a8a9b; font-variant-numeric: tabular-nums; }
.pbu-hi b { font-variant-numeric: tabular-nums; color: #dce3ed; }
.pbu-empty { font-size: 12.5px; color: #5a6678; padding: 6px 0; }
/* clock-band readout (drawn by the shell via PBFuel.readoutHtml) */
.pbu-ro { 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 #1f2530; background: #141820; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.pbu-ro:hover { border-color: #7a8a9b; }
.pbu-ro .cn { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; grid-row: span 2; align-self: center; color: #dce3ed; }
.pbu-ro .v { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px; line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; }
.pbu-ro .v .material-symbols-outlined { font-size: 16px; }
.pbu-ro.add .v { color: #e0a64b; }  .pbu-ro.ok .v { color: #34d399; }  .pbu-ro.na .v { color: #7a8a9b; }
.pbu-ro .s { font-size: 11px; color: #7a8a9b; }
body.light-mode .pbu-head h3, body.light-mode .pbu-car-h b, body.light-mode .pbu-tile .v, body.light-mode .pbu-hi b, body.light-mode .pbu-ro .cn { color: #1a2030; }
body.light-mode .pbu-car, body.light-mode .pbu-tile, body.light-mode .pbu-panel, body.light-mode .pbu-ro { background: #fff; border-color: #e2e7f0; }
body.light-mode .pbu-tile.add { border-color: #d99a2b; }  body.light-mode .pbu-tile.ok { border-color: #23a86f; }
body.light-mode .pbu-now input { background: #fff; border-color: #dde2ec; color: #1a2030; }
body.light-mode .pbu-fi, body.light-mode .pb-rc-tgt input { background: #fff; border-color: #dde2ec; }
body.light-mode .pbu-fi input { color: #1a2030; }
body.light-mode .pbu-f .k, body.light-mode .pbu-fi .u, body.light-mode .pb-rc-tgt .u, body.light-mode .pbu-f .pbu-plansrc { color: #5a6a7b; }
body.light-mode .pbu-addv { color: #5a6a7b; }
body.light-mode .pbu-tbl { color: #37404f; }  body.light-mode .pbu-tbl td { border-bottom-color: #eef1f6; }
body.light-mode .pbu-hi { color: #37404f; }
@media (max-width: 600px) {
  .pbu-grid { grid-template-columns: 1fr 1fr; }
  .pbu-grid .pbu-tile:last-child { grid-column: span 2; }
  .pbu-now input { font-size: 16px; }
  /* Under 16px iOS zooms the page in and never comes back. */
  .pbu-set { gap: 10px; }
  .pbu-fi input { font-size: 16px; width: 100%; }
  .pbu-f, .pbu-fi { width: 100%; }
  .pbu-save { margin-left: 0; width: 100%; justify-content: center; }
  .pbu-hi { grid-template-columns: 70px 1fr; }
}

/* ═ BRAKES (.pbk-) ═ pitbox-brakes.js */
/* The pane itself is the car's real Consumables ▸ Brakes markup (bt-* / bs-*); only the
   in-screen car picker, the packed note and the header scope bar are ours. */
.pbk-cars { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
/* No text-transform: the chip is the car NUMBER (data, may carry letters). */
.pbk-carchip { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .4px; line-height: 1; padding: 8px 15px; border-radius: 9px; cursor: pointer; background: #12151d; border: 1px solid #232a36; color: #9aa7b8; transition: color .12s, border-color .12s, background .12s; }
.pbk-carchip:hover { color: #dce3ed; border-color: #313a48; }
.pbk-carchip.on { background: rgba(var(--accent-rgb), .16); border-color: var(--accent); color: var(--accent); }
.pbk-host .pbk-scopebar { margin-bottom: 14px; }
/* NB `.pbk-bar` below is the 46x5px meter inside a strip chip. The scope
   bar (On car / Stock / History) carried that class too, so the door into
   the Consumables board was being painted as a 5px sliver in the header —
   the `.rp-sheet` collision again. It is `.pbk-scopebar` now. */
.pbk-packed { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 9px; border: 1px dashed #2a3040; font-size: 12.5px; color: #9aa7b8; }
.pbk-packed .material-symbols-outlined { font-size: 17px; color: var(--accent); }
.pbk-packed b { color: #dce3ed; }
.pbk-empty { padding: 40px 0; text-align: center; color: #7a8a9b; font-size: 13px; }
.pbk-host .bsc-packed-tog.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .12); }
body.light-mode .pbk-carchip { background: #fff; border-color: #e2e7f0; color: #55606f; }
body.light-mode .pbk-carchip:hover { color: #1a2030; border-color: #cfd6e2; }
body.light-mode .pbk-carchip.on { background: rgba(var(--accent-rgb), .14); border-color: var(--accent); color: var(--accent); }
body.light-mode .pbk-packed { border-color: #dde2ec; color: #55606f; }  body.light-mode .pbk-packed b { color: #1a2030; }
@media (max-width: 600px) { .pbk-carchip { padding: 10px 14px; } }
/* the strip above the pane (BR-02 / BR-05 / BR-06): peak temp, under-min, spares, per-axle note */
.pbk-strip { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.pbk-strip:empty { display: none; }
.pbk-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pbk-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px; border-radius: 9px; border: 1px solid #232a36; background: #12151d; font-size: 12.5px; color: #9aa7b8; font-variant-numeric: tabular-nums; }
.pbk-chip .material-symbols-outlined { font-size: 16px; }
.pbk-chip b { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 800; color: #dce3ed; }
.pbk-chip .pbk-lim { font-size: 11px; color: #5a6678; }
.pbk-chip.ok { border-color: rgba(52, 211, 153, .45); }   .pbk-chip.ok .material-symbols-outlined { color: #34d399; }
.pbk-chip.warn { border-color: rgba(224, 166, 75, .6); }  .pbk-chip.warn .material-symbols-outlined, .pbk-chip.warn b { color: #e0a64b; }
.pbk-chip.bad { border-color: rgba(239, 68, 68, .6); background: rgba(239, 68, 68, .08); }  .pbk-chip.bad .material-symbols-outlined, .pbk-chip.bad b { color: #f87171; }
.pbk-chip.na { opacity: .7; }
.pbk-bar { position: relative; display: inline-block; width: 46px; height: 5px; border-radius: 3px; background: #232a36; overflow: hidden; }
.pbk-bar::after { content: ''; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: #34d399; }
.pbk-chip.bad .pbk-bar::after { background: #f87171; }
.pbk-notes { display: flex; flex-direction: column; gap: 5px; }
.pbk-note { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 9px; border: 1px solid #1f2530; border-left-width: 3px; background: #10141a; font-size: 12.5px; color: #cfd8e3; }
.pbk-note .material-symbols-outlined { font-size: 17px; color: #7a8a9b; flex: 0 0 auto; }
.pbk-note-t { flex: 1 1 auto; min-width: 0; }
.pbk-note.ok { border-left-color: #34d399; color: #9aa7b8; }
.pbk-note.warn { border-left-color: #e0a64b; }  .pbk-note.warn .material-symbols-outlined { color: #e0a64b; }
.pbk-note.bad { border-left-color: #f87171; }   .pbk-note.bad .material-symbols-outlined { color: #f87171; }
.pbk-note-btn { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; min-height: 28px; padding: 3px 10px; border-radius: 7px; border: 1px solid #2a3040; background: #141820; color: #dce3ed; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.pbk-note-btn .material-symbols-outlined { font-size: 15px; color: inherit; }
.pbk-note-btn:hover { border-color: #7a8a9b; }
.pbk-note-btn.acc { border-color: var(--accent); color: var(--accent); }
body.light-mode .pbk-chip { background: #fff; border-color: #e2e7f0; color: #55606f; }  body.light-mode .pbk-chip b { color: #1a2030; }
body.light-mode .pbk-bar { background: #e2e7f0; }
body.light-mode .pbk-note { background: #fff; border-color: #e2e7f0; color: #37404f; }
body.light-mode .pbk-note-btn { background: #fff; border-color: #dde2ec; color: #1a2030; }
@media (max-width: 600px) { .pbk-note { flex-wrap: wrap; } .pbk-note-btn { min-height: 38px; } }

/* ═ TIMING (.pbm-) ═ pitbox-timing.js */
.pbm { display: flex; flex-direction: column; gap: 14px; }
.pbm-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pbm-title { flex: 1; min-width: 240px; }
.pbm-title h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 3px; font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.pbm-title p { margin: 0; font-size: 12.5px; color: #7a8a9b; max-width: 70ch; }
.pbm-car { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: .5px; padding: 2px 9px; border-radius: 6px; background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.pbm-tog { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid #2a3040; border-radius: 9px; background: #141820; color: #9aa7b8; font-family: 'Barlow Condensed', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 7px 13px; }
.pbm-tog:hover { border-color: #7a8a9b; color: #dce3ed; }
.pbm-tog .material-symbols-outlined { font-size: 17px; }
.pbm-tog.on { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.pbm-day { border: 1px solid #1f2530; border-radius: 12px; background: #10141a; overflow: hidden; }
.pbm-dtoday { border-color: rgba(var(--accent-rgb), 0.35); }
.pbm-dayhead { display: flex; align-items: baseline; gap: 9px; padding: 9px 14px; border-bottom: 1px solid #1f2530; background: #0f1318; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #dce3ed; }
.pbm-dayhead small { font-size: 12px; font-weight: 600; letter-spacing: .4px; color: #7a8a9b; }
.pbm-daytag, .pbm-daytoday { font-size: 10px; letter-spacing: .7px; padding: 2px 7px; border-radius: 5px; background: #1a1f28; color: #7a8a9b; }
.pbm-daytoday { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.pbm-row { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid #171c24; }
.pbm-row:first-of-type { border-top: none; }
.pbm-t { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .5px; color: #dce3ed; }
.pbm-t small { font-size: 11px; font-weight: 600; color: #5a6678; }
.pbm-plus { color: var(--accent); }
.pbm-n { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: #dce3ed; }
.pbm-n small { font-size: 11.5px; color: #7a8a9b; }
.pbm-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pbm-where { font-size: 11.5px; color: #7a8a9b; }
.pbm-chip { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: #1a1f28; color: #7a8a9b; }
.pbm-chips { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.pbm-chipw { background: rgba(96, 165, 250, 0.14); color: #8ab4f8; }
.pbm-chipo { background: rgba(224, 166, 75, 0.14); color: #e0a64b; }
.pbm-state { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; }
.pbm-statenow { background: #ef4444; color: #fff; }
.pbm-statenext { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.pbm-now { background: rgba(239, 68, 68, 0.07); }
.pbm-next { background: rgba(var(--accent-rgb), 0.05); }
.pbm-win .pbm-n, .pbm-win .pbm-t { color: #9aa7b8; }
.pbm-notmine { opacity: .55; }
body.light-mode .pbm-day { background: #ffffff; border-color: #e8ecf2; }
body.light-mode .pbm-dayhead { background: #f8f9fc; border-color: #e8ecf2; color: #1a2030; }
body.light-mode .pbm-row { border-color: #eef1f6; }
body.light-mode .pbm-t, body.light-mode .pbm-n { color: #1a2030; }
body.light-mode .pbm-title h3 { color: #1a2030; }
body.light-mode .pbm-car, body.light-mode .pbm-chips,
body.light-mode .pbm-statenext, body.light-mode .pbm-tog.on { color: #5b7a00; }
body.light-mode .pbm-tog { background: #ffffff; border-color: #dde2ec; color: #6b7a8d; }
body.light-mode .pbm-chip, body.light-mode .pbm-daytag { background: #eef1f6; color: #6b7a8d; }
body.light-mode .pbm-daytoday { color: #5b7a00; }
@media (max-width: 600px) {
  .pbm-row { grid-template-columns: 62px 1fr; }
  .pbm-meta { grid-column: 2; justify-content: flex-start; }
}

/* ═ PACE (.pbp-) ═ pitbox-pace.js */
.pbp { display: flex; flex-direction: column; }
.pbp-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.pbp-head h3 { margin: 0 0 3px; font-size: 16px; color: #dce3ed; }
.pbp-head p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #7a8a9b; max-width: 640px; }
.pbp-head .pbp-tog { margin-left: auto; flex: none; }
.pbp-tog.on { border-color: rgba(var(--accent-rgb), .5); color: var(--accent); background: rgba(var(--accent-rgb), .1); }
body.light-mode .pbp-head h3 { color: #1a2230; }  body.light-mode .pbp-head p { color: #55606f; }
.pbp-ses { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.pbp-seschip { flex: 0 0 auto; scroll-snap-align: start; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 128px; background: #141820; border: 1px solid #1f2530; border-radius: 10px; padding: 8px 12px; transition: all .15s; }
.pbp-seschip:hover { border-color: #2f3947; }
.pbp-seschip.active { border-color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.pbp-sesnm { font: 700 12px 'Barlow Condensed', sans-serif; letter-spacing: .5px; text-transform: uppercase; color: #dce3ed; }
.pbp-seschip.active .pbp-sesnm { color: var(--accent); }
.pbp-sesn { font-size: 11px; color: #7a8a9b; }
.pbp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pbp-tile { background: #141820; border: 1px solid #1a1f28; border-radius: 12px; padding: 11px 14px; display: flex; flex-direction: column; gap: 2px; }
.pbp-tile .k { font: 700 10.5px 'Barlow Condensed', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #7a8a9b; }
.pbp-tile .v { font-size: 21px; font-weight: 700; color: #dce3ed; font-variant-numeric: tabular-nums; }
.pbp-tile .s { font-size: 11.5px; color: #7a8a9b; }
.pbp-card { background: #141820; border: 1px solid #1a1f28; border-radius: 12px; padding: 13px 14px; margin-bottom: 14px; }
.pbp-cardhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.pbp-cardhead h4 { margin: 0; font-size: 14px; color: #dce3ed; }
.pbp-cardhead .pb-btn { margin-left: auto; }
.pbp-note { font-size: 11.5px; line-height: 1.5; color: #7a8a9b; max-width: 620px; }
.pbp-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.pbp-lg { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: #10141b; border: 1px solid #1f2530; border-radius: 999px; padding: 5px 11px; font-size: 12px; color: #cfd8e3; transition: all .15s; }
.pbp-lg:hover { border-color: #2f3947; }
.pbp-lg i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pbp-lgt { color: #7a8a9b; font-variant-numeric: tabular-nums; }
.pbp-lg.ghost { color: #7a8a9b; }
.pbp-chart { width: 100%; overflow-x: auto; }
.pbp-chart svg { width: 100%; height: auto; display: block; }
.pbp-grid { stroke: #202734; stroke-width: 1; }
.pbp-axis { stroke: #2a3342; stroke-width: 1; }
.pbp-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pbp-dot { stroke: #141820; stroke-width: 2; }
.pbp-dot.over { fill-opacity: .35; }
.pbp-ytxt, .pbp-xtxt { fill: #7a8a9b; font-size: 10.5px; font-family: 'Barlow', sans-serif; }
.pbp-ytxt { text-anchor: end; }
.pbp-slbl { font: 700 11px 'Barlow', sans-serif; }
.pbp-tblwrap { overflow-x: auto; border: 1px solid #1f2530; border-radius: 10px; }
.pbp-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; color: #cfd8e3; font-variant-numeric: tabular-nums; }
.pbp-tbl th { position: sticky; top: 0; background: #10141b; text-align: left; font: 700 10.5px 'Barlow Condensed', sans-serif; letter-spacing: .7px; text-transform: uppercase; color: #7a8a9b; padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid #1f2530; }
.pbp-tbl td { padding: 7px 10px; border-bottom: 1px solid #171d26; white-space: nowrap; }
.pbp-tbl tbody tr:last-child td { border-bottom: none; }
.pbp-tbl tbody tr:hover { background: #171d26; }
.pbp-tbl tr.off { opacity: .42; }
.pbp-tbl tr.pit { color: #7a8a9b; }
.pbp-tbl .num { text-align: right; }
.pbp-tbl .nm { font-weight: 600; color: #dce3ed; }
.pbp-tbl .dim { color: #7a8a9b; }
.pbp-tbl .strong { font-weight: 700; color: #dce3ed; }
.pbp-tbl .lead { color: var(--accent); font-weight: 700; }
.pbp-tbl .warn { color: #e0a64b; }
.pbp-tbl .sb { color: #b57ce0; font-weight: 700; }
.pbp-tbl .sw { width: 22px; padding-right: 0; }
.pbp-tbl .sw i { display: block; width: 9px; height: 9px; border-radius: 50%; }
.pbp-tbl tr[onclick] { cursor: pointer; }
body.light-mode .pbp-seschip { background: #fff; border-color: #e2e7f0; }
body.light-mode .pbp-seschip.active { border-color: var(--accent); }
body.light-mode .pbp-sesnm { color: #1a2030; }
body.light-mode .pbp-seschip.active .pbp-sesnm { color: var(--accent); }
body.light-mode .pbp-sesn,
body.light-mode .pbp-tile .k,
body.light-mode .pbp-tile .s,
body.light-mode .pbp-note,
body.light-mode .pbp-lgt,
body.light-mode .pbp-tbl .dim { color: #6b7688; }
body.light-mode .pbp-tile,
body.light-mode .pbp-card { background: #fff; border-color: #e2e7f0; }
body.light-mode .pbp-tile .v,
body.light-mode .pbp-cardhead h4,
body.light-mode .pbp-tbl .nm,
body.light-mode .pbp-tbl .strong { color: #1a2030; }
body.light-mode .pbp-lg { background: #fff; border-color: #e2e7f0; color: #55606f; }
body.light-mode .pbp-lg:hover { border-color: #cfd6e2; }
body.light-mode .pbp-grid { stroke: #eceff4; }
body.light-mode .pbp-axis { stroke: #dde2ea; }
body.light-mode .pbp-dot { stroke: #fff; }
body.light-mode .pbp-ytxt,
body.light-mode .pbp-xtxt { fill: #6b7688; }
body.light-mode .pbp-tblwrap { border-color: #e2e7f0; }
body.light-mode .pbp-tbl { color: #37404f; }
body.light-mode .pbp-tbl th { background: #f6f8fb; color: #6b7688; border-bottom-color: #e2e7f0; }
body.light-mode .pbp-tbl td { border-bottom-color: #eef1f6; }
body.light-mode .pbp-tbl tbody tr:hover { background: #f6f8fb; }
body.light-mode .pbp-tbl .sb { color: #7a3fb0; }
@media (max-width: 600px) {
  .pbp-tiles { grid-template-columns: 1fr 1fr; }
  .pbp-head .pbp-tog { margin-left: 0; }
}

/* ═ TYRES (.pbt-) ═ pitbox-tyres.js */
.pbt-root { --pbt-card: #141820; --pbt-card2: #0f1318; --pbt-input: #0f1318; --pbt-border: #2a3040; --pbt-border2: #1f2530;
  --pbt-text: #dce3ed; --pbt-dim: #7a8a9b; --pbt-muted: #3a4555; --pbt-ok: #22c55e; --pbt-warn: #f59e0b; --pbt-danger: #ef4444; --pbt-info: #6366f1;
  --pbt-accent: var(--accent, #d4f542); --pbt-accent-rgb: 212, 245, 66;
  display: flex; flex-direction: column; gap: 12px; color: var(--pbt-text); font-size: 13px; min-width: 0; }
body.light-mode .pbt-root { --pbt-card: #ffffff; --pbt-card2: #f4f6fb; --pbt-input: #f0f3f8; --pbt-border: #dde2ec; --pbt-border2: #e8ecf2;
  --pbt-text: #1a2030; --pbt-dim: #6b7a8c; --pbt-muted: #b0b8c4; --pbt-accent: var(--accent, #5a7a00); --pbt-accent-rgb: 90, 122, 0; }
.pbt-loading, .pbt-none { padding: 20px; color: var(--pbt-dim); display: flex; align-items: center; gap: 8px; }
.pbt-sp { flex: 1 1 auto; }
.pbt-dim { color: var(--pbt-muted); }
.pbt-lbl { font-family: 'Barlow Condensed', sans-serif; font-size: 11.5px; letter-spacing: .07em; font-weight: 700; color: var(--pbt-dim); }
.pbt-note { font-size: 12px; color: var(--pbt-dim); line-height: 1.35; }
.pbt-help { cursor: help; text-decoration: underline dotted; }
.pbt-carhead { display: flex; align-items: center; gap: 6px; font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: .03em; margin-top: 6px; }
.pbt-carhead .material-symbols-outlined { color: var(--pbt-dim); }
.pbt-linkbtn { background: none; border: 0; color: var(--pbt-dim); cursor: pointer; padding: 0 2px; vertical-align: middle; }
.pbt-linkbtn:hover { color: var(--pbt-text); }

/* buttons / seg / chips */
.pbt-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--pbt-border); border-radius: 8px;
  background: var(--pbt-card); color: var(--pbt-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pbt-btn:hover { border-color: var(--pbt-dim); }
.pbt-btn:disabled { opacity: .5; cursor: default; }
.pbt-btn.sm { min-height: 32px; padding: 0 10px; }
.pbt-btn.icon { padding: 0; width: 36px; justify-content: center; }
.pbt-btn.sm.icon { width: 32px; }
/* Correct / remove on a logged cold reading: present, but quiet until the
   row is hovered — the numbers are what the row is for. */
.pbt-rowbtn { min-height: 26px; padding: 0 7px; font-size: 11.5px; opacity: 0; transition: opacity .12s; }
.pbt-coldrow:hover .pbt-rowbtn, .pbt-rowbtn:focus-visible { opacity: 1; }
@media (hover: none) { .pbt-rowbtn { opacity: 1; } }
.pbt-btn.acc { background: var(--pbt-accent); border-color: transparent; color: #0f1218; }
.pbt-btn.acc:hover { opacity: .88; }
.pbt-btn .material-symbols-outlined { font-size: 16px; }
.pbt-seg { display: inline-flex; border: 1px solid var(--pbt-border); border-radius: 8px; overflow: hidden; background: var(--pbt-card); flex-wrap: wrap; }
.pbt-seg button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 11px; border: 0; background: none; color: var(--pbt-dim); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border-right: 1px solid var(--pbt-border2); }
.pbt-seg button:last-child { border-right: 0; }
.pbt-seg button.on { background: rgba(var(--pbt-accent-rgb), .14); color: var(--pbt-accent); }
.pbt-seg button .material-symbols-outlined { font-size: 16px; }
.pbt-tabs { align-self: flex-start; }
.pbt-tabs button { min-height: 36px; padding: 0 14px; }
.pbt-cnt { font-size: 11px; padding: 0 6px; border-radius: 999px; background: rgba(var(--pbt-accent-rgb), .16); color: var(--pbt-accent); margin-left: 4px; }
.pbt-pill { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--pbt-border); font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: .06em; font-weight: 700; color: var(--pbt-dim); white-space: nowrap; margin-right: 4px; }
.pbt-pill.ok { border-color: var(--pbt-ok); color: var(--pbt-ok); background: rgba(34, 197, 94, .12); }
.pbt-pill.warn { border-color: var(--pbt-warn); color: var(--pbt-warn); background: rgba(245, 158, 11, .14); }
.pbt-pill.acc { border-color: var(--pbt-accent); color: var(--pbt-accent); background: rgba(var(--pbt-accent-rgb), .14); }
.pbt-pill.life.amb { border-color: var(--pbt-warn); color: var(--pbt-warn); background: rgba(245, 158, 11, .14); }
.pbt-pill.life.red { border-color: var(--pbt-danger); color: var(--pbt-danger); background: rgba(239, 68, 68, .14); }
.pbt-srctag { display: inline-flex; align-items: center; gap: 3px; font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; letter-spacing: .05em; color: var(--pbt-muted); margin-left: 6px; }
.pbt-srctag.site { color: var(--pbt-info); }
.pbt-plantag { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 5px; border: 1px dashed var(--pbt-border); background: none; color: var(--pbt-dim); font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; letter-spacing: .05em; cursor: pointer; margin-left: 6px; }
.pbt-plantag:hover { border-color: var(--pbt-accent); color: var(--pbt-accent); }
.pbt-plantag .material-symbols-outlined { font-size: 13px; }
.pbt-cmp { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--pbt-border); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: .05em; font-weight: 700; color: var(--pbt-dim); }
.pbt-cmp.wet { border-color: var(--pbt-ok); color: var(--pbt-ok); background: rgba(34, 197, 94, .12); }
.pbt-rim { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--pbt-border); font-family: 'Barlow Condensed', sans-serif; letter-spacing: .06em; font-size: 11px; font-weight: 700; color: var(--pbt-dim); }
.pbt-rim .material-symbols-outlined { font-size: 16px; }
.pbt-rim.on { border-color: var(--pbt-accent); color: var(--pbt-accent); background: rgba(var(--pbt-accent-rgb), .14); }
.pbt-rim.on .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.pbt-nm { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .03em; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pbt-cyc { color: var(--pbt-dim); cursor: help; text-decoration: underline dotted; }
.pbt-cyc small { color: var(--pbt-muted); }

/* ambient + cards + packing head + toolbar */
.pbt-amb { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--pbt-dim); background: var(--pbt-card); border: 1px solid var(--pbt-border2); border-radius: 10px; padding: 9px 14px; }
.pbt-amb b { color: var(--pbt-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pbt-card { border: 1px solid var(--pbt-border); border-radius: 10px; background: var(--pbt-card); overflow: hidden; min-width: 0; }
.pbt-ph { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--pbt-border2); flex-wrap: wrap; }
.pbt-ph h3 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; }
.pbt-pack { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--pbt-dim); padding: 2px 0; }
.pbt-pack b { color: var(--pbt-text); }
.pbt-pack a { color: var(--pbt-accent); text-decoration: underline dotted; cursor: pointer; font-weight: 600; }
.pbt-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbt-srch { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 1px solid var(--pbt-border); border-radius: 7px; background: var(--pbt-input); min-width: 200px; flex: 1 1 220px; max-width: 360px; }
.pbt-srch input { border: 0; background: none; height: 100%; min-width: 0; width: 100%; color: var(--pbt-text); font: inherit; outline: none; }
.pbt-srch .material-symbols-outlined { color: var(--pbt-dim); font-size: 18px; }

/* tables */
.pbt-tblwrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.pbt-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.pbt-tbl th { position: sticky; top: 0; z-index: 1; background: var(--pbt-card2); text-align: center; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; color: var(--pbt-dim); font-weight: 700; padding: 6px; border-bottom: 1px solid var(--pbt-border2); border-right: 1px solid var(--pbt-border2); }
.pbt-tbl th small { display: block; font-weight: 600; color: var(--pbt-muted); letter-spacing: .04em; text-transform: none; }
.pbt-tbl th.l, .pbt-tbl td.l { text-align: left; }
.pbt-tbl td { padding: 0 6px; height: 40px; border-bottom: 1px solid var(--pbt-border2); border-right: 1px solid var(--pbt-border2); text-align: center; font-variant-numeric: tabular-nums; vertical-align: middle; }
.pbt-tbl td:last-child, .pbt-tbl th:last-child { border-right: 0; }
.pbt-tbl td.cold { background: rgba(99, 102, 241, .14); color: var(--pbt-info); font-weight: 600; }
.pbt-tbl td.hot { background: rgba(239, 68, 68, .13); color: var(--pbt-danger); font-weight: 600; }
.pbt-tbl td.delta { background: rgba(245, 158, 11, .14); color: var(--pbt-warn); font-weight: 600; }
.pbt-tbl td.tread { background: rgba(34, 197, 94, .12); color: var(--pbt-ok); font-weight: 600; }
.pbt-tbl td.tread small { display: block; font-size: 10px; color: var(--pbt-dim); }
.pbt-tbl td.tag { color: var(--pbt-dim); font-family: 'Barlow Condensed', sans-serif; letter-spacing: .06em; font-size: 11px; }
.pbt-tbl td.note { text-align: left; color: var(--pbt-dim); white-space: normal; min-width: 120px; }
.pbt-tbl td.tid { font-size: 11.5px; color: var(--pbt-dim); font-family: 'Barlow Condensed', sans-serif; letter-spacing: .03em; }
.pbt-tbl td.tgt { color: var(--pbt-dim); }
.pbt-tbl td.tgt span { display: inline-block; padding: 1px 6px; border: 1px dashed var(--pbt-border); border-radius: 5px; }
.pbt-tbl td.tgt small { display: block; font-size: 10px; color: var(--pbt-muted); }
.pbt-tbl td.inp { padding: 2px 3px; }
.pbt-tbl td.sub { padding: 0; background: var(--pbt-card2); text-align: left; }
.pbt-tbl tr.pbt-set { cursor: pointer; }
.pbt-tbl tr.pbt-set:hover td { background: var(--pbt-card2); }
.pbt-tbl tr.pbt-set.mounted td.name { box-shadow: inset 3px 0 0 var(--pbt-accent); }
.pbt-tbl tr.pbt-set.open td { background: rgba(var(--pbt-accent-rgb), .05); }
.pbt-tbl tr.pbt-set.away td { opacity: .55; }
.pbt-tbl .pbt-exp { width: 32px; height: 32px; border-radius: 6px; display: inline-grid; place-items: center; color: var(--pbt-dim); }
.pbt-tbl .pbt-exp .material-symbols-outlined { transition: transform .15s; }
.pbt-tbl tr.open .pbt-exp .material-symbols-outlined { transform: rotate(90deg); }
.pbt-tbl .pbt-pick { width: 20px; height: 20px; accent-color: var(--pbt-accent); cursor: pointer; }
.pbt-ci { width: 66px; height: 36px; text-align: center; border: 1px solid var(--pbt-info); border-radius: 6px; background: var(--pbt-input); color: var(--pbt-text); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; padding: 0 4px; }
.pbt-ci.sug { background: rgba(var(--pbt-accent-rgb), .12); border-color: var(--pbt-accent); }
.pbt-ci.tmp { border-color: var(--pbt-border); width: 56px; }
.pbt-ci.nt { border-color: var(--pbt-border); width: 150px; text-align: left; }
.pbt-ci.ti { border-color: var(--pbt-ok); }
.pbt-ci.ts { border-color: var(--pbt-border); width: 110px; text-align: left; }
.pbt-in.sm { height: 32px; padding: 0 6px; font-size: 12px; }
@keyframes pbt-flash { 0%, 100% { background: transparent; } 30%, 70% { background: rgba(var(--pbt-accent-rgb), .45); } }
.pbt-tbl td.pbt-flash { animation: pbt-flash 1.4s ease-in-out 2; box-shadow: inset 0 0 0 2px var(--pbt-accent); color: var(--pbt-text); }
.pbt-spark { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pbt-spark .sp1 { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--pbt-dim); font-variant-numeric: tabular-nums; }
.pbt-spark svg { width: 48px; height: 16px; overflow: visible; }
.pbt-spark polyline { fill: none; stroke: var(--pbt-ok); stroke-width: 1.5; }
.pbt-spark circle { fill: var(--pbt-ok); }
.pbt-spark b { color: var(--pbt-text); }
.pbt-adj { padding: 8px 10px 10px 44px; display: flex; flex-direction: column; gap: 8px; }
.pbt-ah { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbt-tnum { color: var(--pbt-text); }
.pbt-np { border: 1px dashed var(--pbt-border); border-radius: 10px; background: transparent; }
.pbt-np summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: .08em; font-weight: 700; color: var(--pbt-dim); flex-wrap: wrap; }
.pbt-np summary::-webkit-details-marker { display: none; }
.pbt-np summary .material-symbols-outlined { transition: transform .15s; font-size: 18px; }
.pbt-np[open] summary .material-symbols-outlined { transform: rotate(90deg); }
.pbt-np summary .pbt-note { letter-spacing: 0; font-weight: 400; }
.pbt-np .pbt-tblwrap { border-top: 1px dashed var(--pbt-border); }

/* change plan */
.pbt-tphead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--pbt-card); border: 1px solid var(--pbt-border); border-radius: 10px; padding: 10px 12px; }
.pbt-tphead h3 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; }
.pbt-tpgrid { display: grid; gap: 1px; background: var(--pbt-border2); border: 1px solid var(--pbt-border); border-radius: 10px; overflow: hidden; min-width: 720px; }
.pbt-tpch { background: var(--pbt-card2); padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; min-height: 46px; justify-content: center; }
.pbt-tpch .n { font-family: 'Barlow Condensed', sans-serif; letter-spacing: .09em; font-weight: 800; font-size: 12.5px; }
.pbt-tpch .s { font-size: 11px; color: var(--pbt-dim); }
.pbt-tpch.gap { background: repeating-linear-gradient(135deg, var(--pbt-card2) 0 6px, var(--pbt-card) 6px 12px); }
.pbt-tpch.gap .n { color: var(--pbt-warn); }
.pbt-tpch.up { background: rgba(var(--pbt-accent-rgb), .14); }
.pbt-tpch.up .n { color: var(--pbt-accent); }
.pbt-tprh { background: var(--pbt-card); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.pbt-tpc { background: var(--pbt-card); min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 6px 8px; text-align: left; font: inherit; font-size: 12.5px; color: var(--pbt-muted); border: 0; cursor: pointer; }
.pbt-tpc.gap { background: repeating-linear-gradient(135deg, var(--pbt-card) 0 6px, var(--pbt-card2) 6px 12px); }
.pbt-tpc:hover { outline: 1px solid var(--pbt-dim); outline-offset: -1px; }
.pbt-tpc.on { color: var(--pbt-text); }
.pbt-tpc.ses.on { background: rgba(99, 102, 241, .14); box-shadow: inset 3px 0 0 var(--pbt-info); }
.pbt-tpc.gap.on { box-shadow: inset 3px 0 0 var(--pbt-warn); }
.pbt-tpc.gap.on.fit { box-shadow: inset 3px 0 0 var(--pbt-ok); }
.pbt-tpc.gap.on.warn { outline: 1px solid var(--pbt-warn); outline-offset: -1px; background: rgba(245, 158, 11, .12); }
.pbt-tpc .tp-l { font-weight: 600; line-height: 1.2; }
.pbt-tpc .tp-l small { display: block; color: var(--pbt-dim); font-weight: 500; }
.pbt-tpc .material-symbols-outlined { font-size: 18px; color: var(--pbt-dim); }
.pbt-tpconf { display: flex; gap: 4px; align-items: flex-start; color: var(--pbt-warn); font-size: 11px; line-height: 1.2; white-space: normal; }
.pbt-tpdiff { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--pbt-border2); background: var(--pbt-card2); font-size: 13px; margin-bottom: 6px; }
.pbt-tpdiff.add .material-symbols-outlined { color: var(--pbt-ok); }
.pbt-tpdiff.rm .material-symbols-outlined { color: var(--pbt-danger); }
.pbt-tpdiff.chg .material-symbols-outlined, .pbt-tpdiff.keep .material-symbols-outlined { color: var(--pbt-warn); }

/* dialogs + popover (hang off <body> — .main-content's z-index:1 trap) */
.pbt-ov { position: fixed; inset: 0; z-index: 4100; background: rgba(5, 8, 12, .55); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 14px; opacity: 0; transition: opacity .16s; overflow-y: auto; }
.pbt-ov.on { opacity: 1; }
.pbt-dlg { --pbt-card: #141820; --pbt-card2: #0f1318; --pbt-input: #0f1318; --pbt-border: #2a3040; --pbt-border2: #1f2530; --pbt-text: #dce3ed; --pbt-dim: #7a8a9b; --pbt-muted: #3a4555; --pbt-ok: #22c55e; --pbt-warn: #f59e0b; --pbt-danger: #ef4444; --pbt-info: #6366f1; --pbt-accent: var(--accent, #d4f542); --pbt-accent-rgb: 212, 245, 66;
  width: min(560px, 100%); max-height: 90vh; background: var(--pbt-card); color: var(--pbt-text); border: 1px solid var(--pbt-border); border-radius: 14px; display: flex; flex-direction: column; margin: auto 0; font-size: 13px; }
.pbt-dlg.wide { width: min(900px, 100%); }
body.light-mode .pbt-dlg { --pbt-card: #ffffff; --pbt-card2: #f4f6fb; --pbt-input: #f0f3f8; --pbt-border: #dde2ec; --pbt-border2: #e8ecf2; --pbt-text: #1a2030; --pbt-dim: #6b7a8c; --pbt-muted: #b0b8c4; --pbt-accent: var(--accent, #5a7a00); --pbt-accent-rgb: 90, 122, 0; }
.pbt-dlg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--pbt-border2); }
.pbt-dlg-h b { font-size: 15px; }
.pbt-dlg-b { padding: 12px 16px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.pbt-dlg-f { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--pbt-border2); }
.pbt-f { display: flex; flex-direction: column; gap: 4px; }
.pbt-f > span { font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--pbt-dim); }
.pbt-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pbt-in { background: var(--pbt-input); border: 1px solid var(--pbt-border); border-radius: 8px; color: var(--pbt-text); font: inherit; font-size: 13px; padding: 8px 10px; width: 100%; min-height: 36px; }
.pbt-in:focus { border-color: var(--pbt-accent); outline: none; }
.pbt-sec h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--pbt-dim); }
.pbt-roles { display: flex; gap: 6px; flex-wrap: wrap; }
.pbt-cmpgrid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.pbt-cmpchip { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border: 1px solid var(--pbt-border); border-radius: 8px; background: var(--pbt-card2); color: var(--pbt-text); text-align: left; font: inherit; cursor: pointer; }
.pbt-cmpchip.on { border-color: var(--pbt-accent); box-shadow: 0 0 0 1px var(--pbt-accent) inset; }
.pbt-cmpchip .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--pbt-border); flex: 0 0 auto; }
.pbt-cmpchip b { display: block; font-weight: 600; }
.pbt-cmpchip small { color: var(--pbt-dim); font-size: 11.5px; }
.pbt-bulk { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 6px; align-items: center; }
.pbt-bulk .pbt-in { height: 40px; text-align: center; border-color: var(--pbt-info); font-size: 14px; }
/* `.pbt-srch` carries `flex: 1 1 220px` for the toolbar ROW it was written for.
   `.pbt-dlg-b` is a COLUMN flex container, so inside the dialog that grow and
   that basis resolve against the HEIGHT — beating `height: 40px` and painting
   the search box ~250px tall. Same trap as `.crew-ev-e` in the phone filter
   sheet, in the opposite direction (it grows here, it squashed there). The
   `flex: 0 0 auto` is the fix; `max-width: none` alone only made it wider. */
.pbt-pksrch { max-width: none; flex: 0 0 auto; }

/* Target hot, per corner: the 4-up the rest of the app uses for a car's
   corners (FL FR / RL RR reading like the car seen from above). `flex: 0 0
   auto` because `.pbt-dlg-b` is a COLUMN flex container — see the note above. */
.pbt-corn4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 0 0 auto; }
.pbt-corn { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pbt-corn .pbt-in { text-align: center; font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pbt-tgrow { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
@media (max-width: 600px) { .pbt-corn .pbt-in { font-size: 16px; } }
.pbt-pkrow { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--pbt-border2); cursor: pointer; }
.pbt-pkrow:hover { background: var(--pbt-card2); }
.pbt-pkrow.on { background: rgba(var(--pbt-accent-rgb), .07); }
.pbt-pkrow input { width: 20px; height: 20px; accent-color: var(--pbt-accent); }
.pbt-pkrow .m { font-size: 12px; color: var(--pbt-dim); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pbt-pkempty { padding: 20px; text-align: center; color: var(--pbt-dim); }
.pbt-scancam { aspect-ratio: 4/3; max-height: 220px; border: 2px dashed var(--pbt-border); border-radius: 12px; display: grid; place-items: center; color: var(--pbt-dim); background: repeating-linear-gradient(135deg, rgba(128, 128, 128, .06) 0 6px, transparent 6px 12px); position: relative; text-align: center; }
.pbt-scancam .material-symbols-outlined { font-size: 46px; }
.pbt-scancam::after { content: ""; position: absolute; inset: 22% 18%; border: 2px solid var(--pbt-accent); border-radius: 8px; opacity: .7; }
.pbt-print { overflow-x: auto; }
.pbt-print table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.pbt-print th { text-align: left; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; color: var(--pbt-dim); padding: 6px; border-bottom: 2px solid var(--pbt-border); }
.pbt-print td { padding: 6px; border-bottom: 1px solid var(--pbt-border2); font-variant-numeric: tabular-nums; }
.pbt-print td.c { text-align: center; }
.pbt-print td.cold { color: var(--pbt-info); font-weight: 700; }
.pbt-print td.warn { color: var(--pbt-warn); }
.pbt-print small { color: var(--pbt-dim); }
.pbt-print .pt-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pbt-print .pt-title { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.pbt-pop { position: fixed; z-index: 4200; min-width: 220px; max-width: 320px; background: #141820; border: 1px solid #2a3040; border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .55); padding: 4px; display: flex; flex-direction: column; color: #dce3ed; }
body.light-mode .pbt-pop { background: #ffffff; border-color: #dde2ec; color: #1a2030; box-shadow: 0 10px 30px rgba(20, 30, 50, .14); }
.pbt-pop .pbt-ph { padding: 6px 10px 4px; border: 0; }
.pbt-pop button { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; width: 100%; }
.pbt-pop button:hover { background: rgba(128, 128, 128, .12); }
.pbt-pop button:disabled { opacity: .5; cursor: not-allowed; }
.pbt-pop button .material-symbols-outlined { font-size: 18px; color: #7a8a9b; }

/* phone */
@media (max-width: 600px) {
  .pbt-root { gap: 10px; }
  .pbt-pack { font-size: 12px; }
  .pbt-np summary .pbt-note { flex-basis: 100%; }
  .pbt-srch { min-width: 0; flex-basis: 100%; max-width: none; }
  .pbt-toolbar .pbt-seg { flex-basis: 100%; }
  .pbt-adj { padding-left: 10px; }
  .pbt-ci, .pbt-in, .pbt-srch input { font-size: 16px; }
  .pbt-btn { min-height: 40px; }
  .pbt-btn.sm { min-height: 36px; }
  .pbt-tpgrid { min-width: 560px; }
  .pbt-tpgrid[style] { grid-template-columns: 140px repeat(auto-fill, minmax(130px, 1fr)) !important; }
  .pbt-ov { padding: 0; align-items: flex-end; }
  .pbt-dlg { width: 100%; max-height: 92dvh; border-radius: 14px 14px 0 0; margin: auto 0 0; }
  .pbt-dlg-f { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .pbt-f2 { grid-template-columns: 1fr; }
  .pbt-bulk { grid-template-columns: auto repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .pbt-tbl td.pbt-flash { animation: none; } .pbt-ov { transition: none; } }
/* ═ end TYRES ═ */

/* ═ BOARD (.pbb-) ═ — pitbox-board.js. The jobs board on the main screen:
   pulse strip, readiness bar, filter chips, sort, the cars × deadlines grid,
   by-session bands, the compact job row (+ timing chip), hover card, and the
   two slide-in panels (composer, templates). Dark values are the app's
   palette (pitbox.css); light-mode block at the end. Phone rules ≤600px. */
.pbb-root { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pbb-root .sp { flex: 1 1 auto; }
.pbb-root .lbl, .pbb-lbl { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; color: #7a8a9b; }
.pbb-note { font-size: 12.5px; color: #7a8a9b; line-height: 1.4; }
.pbb-note.bad { color: #ef4444; }
.pbb-none { padding: 18px; color: #7a8a9b; font-size: 13px; text-align: center; border: 1px dashed #2a3040; border-radius: 10px; }
/* The board opens on MINE for a mechanic; with nothing assigned yet the
   lanes are empty while the tiles above still count the car's whole load.
   This says which filter is hiding the work, and offers the way back. */
.pbb-nonefilter { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; margin-bottom: 10px; flex-wrap: wrap; }
.pbb-nonefilter .material-symbols-outlined { font-size: 19px; color: var(--accent); flex: 0 0 auto; }
body.light-mode .pbb-none { border-color: #dde2ec; color: #5a6678; }
.pbb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pbb-head h2 { margin: 0; font-family: "Barlow Condensed", sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: #dce3ed; }
.pbb-head .drv { color: #7a8a9b; font-size: 13px; }
.pbb-seg { display: inline-flex; border: 1px solid #2a3040; border-radius: 999px; padding: 2px; background: #141820; }
.pbb-seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #9aa7b8; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 12px; }
.pbb-seg button.on { background: var(--accent); color: #0f1218; }
.pbb-seg button .material-symbols-outlined { font-size: 16px; }
.pbb-seg.sm { padding: 1px; }
.pbb-seg.sm button { height: 28px; padding: 0 6px; }
.pbb-seg.sm button:disabled { opacity: .35; cursor: default; }
.pbb-chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #2a3040; background: #141820; color: #9aa7b8; cursor: pointer; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 12px; white-space: nowrap; }
.pbb-chip:hover { border-color: #5a6678; color: #dce3ed; }
.pbb-chip.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.pbb-chip:disabled { opacity: .45; cursor: default; }
.pbb-chip .c { font-variant-numeric: tabular-nums; opacity: .8; }
.pbb-chip .material-symbols-outlined { font-size: 16px; }
.pbb-ava { width: 20px; height: 20px; border-radius: 50%; background: #2a3040; color: #dce3ed; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; letter-spacing: 0; }
.pbb-pill { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; border-radius: 999px; border: 1px solid #2a3040; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 10px; color: #9aa7b8; vertical-align: middle; margin-left: 6px; white-space: nowrap; }
.pbb-pill .material-symbols-outlined { font-size: 12px; }
.pbb-pill.plan { border-color: #0ea5e9; color: #0ea5e9; }
.pbb-pill.tpl { color: #7a8a9b; background: transparent; }
.pbb-pill.ready { border-color: #4ac8a4; color: #4ac8a4; }
.pbb-pill.togo { border-color: #e0a64b; color: #e0a64b; }
.pbb-pill.blocked { border-color: #ef4444; color: #ef4444; }

/* pulse strip + readiness bar */
.pbb-pulse { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(240px, 2fr); gap: 8px; }
.pbb-stat { background: #141820; border: 1px solid #2a3040; border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; text-align: left; min-height: 56px; color: #dce3ed; cursor: pointer; }
.pbb-stat:hover { border-color: #5a6678; }
.pbb-stat.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pbb-stat .v { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.pbb-stat.prog .v { color: var(--accent); }
.pbb-stat.block .v { color: #ef4444; }
.pbb-stat.done .v { color: #4ac8a4; }
.pbb-next { background: #141820; border: 1px solid var(--accent); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; }
.pbb-next .t { display: flex; align-items: center; gap: 8px; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; font-size: 13px; flex-wrap: wrap; color: #dce3ed; }
.pbb-next .t .material-symbols-outlined { font-size: 18px; color: var(--accent); }
.pbb-next .t .sub { color: #7a8a9b; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12.5px; font-family: Barlow, sans-serif; }
.pbb-next .t .bad { color: #ef4444; }
.pbb-next .t .un { color: #e0a64b; }
.pbb-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: #1f2530; }
.pbb-bar i { display: block; height: 100%; background: #4ac8a4; }
.pbb-bar i.prog { background: var(--accent); }
.pbb-bar i.bad { background: #ef4444; }
.pbb-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbb-sortctl { display: inline-flex; align-items: center; gap: 6px; }
.pbb-sortctl select { height: 34px; border: 1px solid #2a3040; border-radius: 999px; background: #141820; padding: 0 10px; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 12px; color: #dce3ed; }

/* the grid */
/* A deadline column has a FLOOR: seven of them in a 1200px pane used to
   compute to ~130px, which is not a column, it is a sliver. Past the floor
   the board scrolls sideways like any wide matrix. No sticky children live
   in here, so becoming a scrollport costs nothing (the .wk-grid lesson). */
.pbb-board { display: grid; grid-template-columns: 180px repeat(var(--pbb-n, 4), minmax(190px, 1fr)); gap: 1px; background: #1f2530; border: 1px solid #2a3040; border-radius: 10px; overflow-x: auto; overflow-y: hidden; }
.pbb-board.lanes { grid-template-columns: repeat(var(--pbb-n, 4), minmax(190px, 1fr)); }
.pbb-ch { background: #1a1f28; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; min-height: 48px; justify-content: center; }
.pbb-ch .n { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; font-size: 13px; color: #dce3ed; }
.pbb-ch .s { font-size: 11.5px; color: #7a8a9b; font-variant-numeric: tabular-nums; }
.pbb-ch .s .over { color: #e0a64b; }
.pbb-ch.up { background: rgba(var(--accent-rgb), .14); }
.pbb-ch.up .n { color: var(--accent); }
.pbb-ch.over { background: rgba(239, 68, 68, .08); }
.pbb-ch.over .n { color: #ef4444; }
.pbb-row { display: contents; }
.pbb-rh { background: #141820; padding: 10px; display: flex; flex-direction: column; gap: 4px; text-align: left; border: 0; border-left: 4px solid #2a3040; color: #dce3ed; min-width: 0; }
button.pbb-rh { cursor: pointer; }
.pbb-rh.blocked { border-left-color: #ef4444; }
.pbb-rh.togo { border-left-color: #e0a64b; }
.pbb-rh.ready { border-left-color: #4ac8a4; }
.pbb-rh .num { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 20px; line-height: 1; }
.pbb-rh .cnt { font-size: 12px; color: #7a8a9b; font-variant-numeric: tabular-nums; }
.pbb-rh .drv { font-size: 11.5px; color: #7a8a9b; line-height: 1.2; }
.pbb-tri { display: flex; height: 5px; border-radius: 999px; overflow: hidden; background: #1f2530; width: 100%; }
.pbb-tri i { display: block; height: 100%; }
.pbb-tri .d { background: #4ac8a4; } .pbb-tri .p { background: var(--accent); } .pbb-tri .b { background: #ef4444; }
.pbb-cell { background: #141820; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-height: 64px; min-width: 0; container-type: inline-size; container-name: pbbcell; }

.pbb-cell.up { background: rgba(var(--accent-rgb), .05); }
.pbb-cell .empty { color: #55606f; font-size: 12px; padding: 8px 4px; }
.pbb-cap { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: #7a8a9b; font-weight: 700; padding: 6px 4px 1px; }
.pbb-cap:first-child { padding-top: 2px; }

/* the compact job row */
.pbb-j { cursor: pointer; --u: #6366f1; position: relative; display: grid; grid-template-columns: 10px auto minmax(64px, 1fr) auto minmax(0, 38%); align-items: center; gap: 7px; min-height: 42px; width: 100%; padding: 4px 8px 4px 10px; border-radius: 6px; border: 1px solid #1f2530; border-left: 3px solid var(--u); background: #1a1f28; text-align: left; font-size: 13px; color: #dce3ed; box-sizing: border-box; overflow: hidden; }
.pbb-j:hover, .pbb-j:focus-visible { border-color: #5a6678; border-left-color: var(--u); outline: none; }
.pbb-j.blocked { border-color: #ef4444; background: rgba(239, 68, 68, .07); }
.pbb-j.done { opacity: .55; }
.pbb-j.done .ti { text-decoration: line-through; }
.pbb-j i.dot { width: 9px; height: 9px; border-radius: 50%; background: #55606f; display: block; }
.pbb-j i.dot.prog { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }
.pbb-j i.dot.block { background: #ef4444; }
.pbb-j i.dot.done { background: #4ac8a4; }
.pbb-j .ti { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.pbb-j .ti .lbl { margin-right: 4px; }
.pbb-j .prg { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 12px; color: #7a8a9b; font-variant-numeric: tabular-nums; }
/* nowrap in an auto track sizes to max-content, so a long role list ran out
   of the card (reported 2026-08-26: "text leaking out of the cards"). The
   track is capped at 38% of the chip now and the text ellipsises inside it.
   The cap matters as much as the clip: an auto track takes its content
   size BEFORE the 1fr title gets anything, so a long role list did not
   just overflow, it starved the title to nothing. The title also keeps a
   64px floor so it is never rendered as a bare ellipsis. */
.pbb-j .who { font-size: 12px; color: #7a8a9b; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pbb-j .who.mine { color: var(--accent); font-weight: 600; }
.pbb-j .who.none { color: #e0a64b; font-style: italic; }
.pbb-j .twc { grid-column: 2 / -1; grid-row: 2; justify-self: start; padding: 2px 0 1px; }
.pbb-j .twc:empty { display: none; }
.pbb-tw { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 999px; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; font-size: 10.5px; white-space: nowrap; cursor: help; }
.pbb-tw .material-symbols-outlined { font-size: 13px; }
.pbb-tw.amb { background: rgba(224, 166, 75, .16); color: #e0a64b; border: 1px solid #e0a64b; }
.pbb-tw.red { background: rgba(239, 68, 68, .16); color: #ef4444; border: 1px solid #ef4444; }
.pbb-take { grid-column: 1 / -1; justify-self: end; height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 12px; }
.pbb-take .material-symbols-outlined { font-size: 15px; }
.pbb-take.re { border-color: transparent; color: #7a8a9b; opacity: 0; height: 24px; }
.pbb-j:hover .pbb-take.re, .pbb-j:focus-within .pbb-take.re { opacity: 1; }
.pbb-j.big { min-height: 52px; font-size: 14px; }

/* The all-cars board is 7 deadline columns wide, so a cell can be ~130px —
   and the chip's one-line grid (dot · T-nn · title · progress · who) gave
   the TITLE whatever was left, which was a character and an ellipsis
   (reported 2026-08-26: "manager view cant make out jobs"). Below ~210px
   the chip stacks instead: the title takes the full width on its own line
   and the meta drops beneath it. Nothing is hidden and the board still
   fits — it just stops pretending it is a wide screen.
   NB .pbb-cell holds only px-sized chips, so making it a query container
   cannot disturb any cqw typography (the briefings-rail rule). */
/* 340px, not 210: even a 295px lane cell could only give the title ~83px on
   one line once the badge, the progress and the who had taken their share.
   Stacking is simply the better read at anything short of a wide cell. */
@container pbbcell (max-width: 340px) {
  .pbb-j { grid-template-columns: 10px auto minmax(0, 1fr); row-gap: 1px; padding-top: 6px; padding-bottom: 6px; align-items: start; }
  .pbb-j i.dot { margin-top: 4px; }
  .pbb-j .wk-job-id { grid-column: 2; grid-row: 1; }
  .pbb-j .prg { grid-column: 3; grid-row: 1; justify-self: end; }
  .pbb-j .ti { grid-column: 2 / -1; grid-row: 2; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .pbb-j .who { grid-column: 2 / -1; grid-row: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pbb-j .twc { grid-column: 2 / -1; grid-row: 4; }
}


/* by session */
.pbb-tl { display: flex; flex-direction: column; gap: 10px; }
.pbb-band { background: #141820; border: 1px solid #2a3040; border-radius: 10px; overflow: hidden; }
.pbb-band .bh { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #1a1f28; border-bottom: 1px solid #1f2530; }
.pbb-band .bh .n { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; font-size: 13px; color: #dce3ed; }
.pbb-band .bh .s { font-size: 12px; color: #7a8a9b; font-variant-numeric: tabular-nums; }
.pbb-band.up .bh { background: rgba(var(--accent-rgb), .14); }
.pbb-band.up .bh .n { color: var(--accent); }
.pbb-band.over .bh { background: rgba(239, 68, 68, .1); }
.pbb-band.over .bh .n { color: #ef4444; }
.pbb-cg { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 8px 10px; border-top: 1px solid #1f2530; align-items: start; }
.pbb-cg:first-of-type { border-top: 0; }
.pbb-cg .cgh { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pbb-cg .cgh .num { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 18px; line-height: 1; color: #dce3ed; }
.pbb-cg .cgh .pbb-pill { margin-left: 0; }
.pbb-cg .list { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* hover card — off <body>, above everything on the page */
.pbb-pop { position: fixed; z-index: 860; width: 280px; background: #141820; border: 1px solid #2a3040; border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); padding: 10px 12px; display: none; pointer-events: none; color: #dce3ed; font-size: 13px; }
.pbb-pop.on { display: block; }
.pbb-pop .h { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 6px; }
.pbb-pop .note { margin-top: 6px; font-size: 12px; color: #9aa7b8; }
/* The job's own lines in the hover card (2026-08-26) — a count says there
   is work, the lines say whether you can do it now. */
.pbb-pop-steps { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid #1f2530; display: flex; flex-direction: column; gap: 3px; }
.pbb-pop-steps li { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.35; color: #b8c2d0; }
.pbb-pop-steps li .material-symbols-outlined { font-size: 15px; line-height: 1.2; flex: 0 0 auto; color: #55606f; }
.pbb-pop-steps li.done { color: #7a8a9b; text-decoration: line-through; }
.pbb-pop-steps li.done .material-symbols-outlined { color: #4ac8a4; text-decoration: none; }
.pbb-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; }
.pbb-kv .k { color: #7a8a9b; }
.pbb-kv .bad { color: #ef4444; }

/* slide-in panels (composer + templates) — off <body>, over the nav rails */
.pbb-scrim { position: fixed; inset: 0; background: rgba(5, 8, 12, .45); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 840; }
.pbb-scrim.on { opacity: 1; pointer-events: auto; }
.pbb-panel { position: fixed; top: 0; right: 0; bottom: 0; box-sizing: border-box; width: min(660px, 100vw); background: #141820; border-left: 1px solid #2a3040; box-shadow: -12px 0 30px rgba(0, 0, 0, .4); transform: translateX(102%); transition: transform .22s; z-index: 850; display: flex; flex-direction: column; color: #dce3ed; }
.pbb-panel.on { transform: none; }
@media (prefers-reduced-motion: reduce) { .pbb-panel, .pbb-scrim { transition: none; } }
.pbb-ph { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #2a3040; }
.pbb-ph h2 { margin: 0; font-family: "Barlow Condensed", sans-serif; font-size: 19px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.pbb-ph .sub { font-size: 12.5px; color: #7a8a9b; margin-top: 2px; }
.pbb-ph .pbb-x { margin-left: auto; width: 36px; padding: 0; justify-content: center; }
.pbb-pb { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.pbb-pf { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid #2a3040; }
.pbb-pf .pbb-note { margin-right: auto; }
.pbb-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.pbb-comp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pbb-comp-grid .fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pbb-comp-grid .fld.w2 { grid-column: span 2; }
.pbb-comp-grid .fld.w3 { grid-column: span 3; } .pbb-comp-grid .fld.w6 { grid-column: span 6; }
/* A <select> does not shrink its TEXT — it clips it. At 1/6 of a 660px panel
   the Due-before field is ~105px, so "FP1 · 10:00 · up next" rendered as
   "FP1 · 10:0(" and the one field you must read to plan the day was the one
   field you could not. It gets two columns; Title gives one up for it. */
.pbb-comp-grid .fld select { text-overflow: ellipsis; }
.pbb-comp-grid .fld.acts { flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: 6px; }
.pbb-comp-grid input, .pbb-comp-grid select, .pbb-comp-grid textarea { height: 36px; border: 1px solid #2a3040; border-radius: 7px; background: #0f1318; color: #dce3ed; padding: 0 10px; font: inherit; font-size: 13.5px; min-width: 0; }
.pbb-comp-grid textarea { height: 96px; padding: 8px 10px; resize: vertical; }
.pbb-comp-grid input:focus, .pbb-comp-grid select:focus, .pbb-comp-grid textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.pbb-roles { display: flex; gap: 6px; flex-wrap: wrap; }

/* Composer people — a searchable dropdown, not a chip wall. Roles are a bounded
   vocabulary and stay chips; the crew of a 24-hour entry is not, and one chip
   per person pushed the rest of the form off the panel. The tokens resolve
   because `.pbb-panel` carries `.pb-scope` (see panelNode) — so light mode is
   free and needs no override block of its own. */
.pbb-ppl { position: relative; min-width: 0; }
.pbb-pplbtn {
  display: flex; align-items: center; gap: 6px; width: 100%; height: 36px;
  padding: 0 6px 0 10px; text-align: left; cursor: pointer;
  background: var(--pb-input); border: 1px solid var(--pb-border); border-radius: 7px;
  color: var(--pb-text); font: inherit; font-size: 13.5px;
}
.pbb-pplbtn:hover { border-color: var(--pb-dim); }
.pbb-ppl.open .pbb-pplbtn { border-color: var(--accent); }
.pbb-ppl-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbb-ppl-lbl.empty { color: var(--pb-dim); }
.pbb-ppl-caret { font-size: 20px; color: var(--pb-dim); flex: 0 0 auto; }
.pbb-pplmenu {
  display: none; position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--pb-card); border: 1px solid var(--pb-border); border-radius: 10px;
  box-shadow: var(--pb-shadow); padding: 6px;
}
.pbb-ppl.open .pbb-pplmenu { display: block; }
.pbb-comp-grid .pbb-pplq { width: 100%; margin-bottom: 6px; }
.pbb-ppl-list { max-height: 236px; overflow-y: auto; }
.pbb-ppl-opt {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px;
  font-size: 13px; color: var(--pb-text); cursor: pointer;
}
.pbb-ppl-opt:hover { background: var(--pb-card2); }
.pbb-ppl-opt input { width: 15px; height: 15px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.pbb-ppl-opt .pbb-ava { flex: 0 0 auto; }
.pbb-ppl-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbb-ppl-opt small { color: var(--pb-dim); font-size: 11px; white-space: nowrap; }
.pbb-ppl-none { padding: 8px; font-size: 12.5px; color: var(--pb-dim); }

/* Composer parts — the wear-tracked line is marked, because the section's own
   caption is only true of that one. */
.pbb-lblsub { font-weight: 600; letter-spacing: 0; text-transform: none; color: #6a7a8b; }
.pbb-parts { display: flex; flex-direction: column; gap: 4px; }
.pbb-parts-none { padding: 9px 10px; border: 1px dashed #2a3040; border-radius: 8px; font-size: 12.5px; color: #6a7a8b; }
.pbb-part { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #2a3040; border-radius: 8px; background: #0f1318; }
.pbb-part .ic { font-size: 17px; color: #5a6a7b; flex: 0 0 auto; }
.pbb-part .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #dce3ed; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbb-part .sub { margin-left: 7px; font-weight: 500; color: #5a6a7b; font-size: 11.5px; }
.pbb-part.si { border-color: #2b4a3a; }
.pbb-part.si .ic { color: #4ea87a; }
.pbb-part .si-t { margin-left: 7px; padding: 1px 6px; border-radius: 999px; background: rgba(78, 168, 122, .16); color: #6cc79a; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pbb-part .rm { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; color: #5a6a7b; border-radius: 6px; cursor: pointer; }
.pbb-part .rm:hover { background: #1a2030; color: #ef4444; }
.pbb-part .rm .material-symbols-outlined { font-size: 16px; }
.pbb-partbtns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pbb-comp-grid .pbb-partin { flex: 1 1 180px; }
body.light-mode .pbb-part { background: #ffffff; border-color: #dde2ec; }
body.light-mode .pbb-part .nm { color: #1a2030; }
body.light-mode .pbb-part.si { border-color: #bfe0cd; }
body.light-mode .pbb-part .si-t { background: #e6f4ec; color: #1f7a4d; }
body.light-mode .pbb-parts-none { border-color: #dde2ec; }
.pbb-tnote { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: #1a1f28; border: 1px solid #1f2530; font-size: 12.5px; color: #7a8a9b; line-height: 1.4; }
.pbb-tnote .material-symbols-outlined { font-size: 18px; color: #6366f1; flex: 0 0 auto; }
.pbb-tg { border: 1px solid #2a3040; border-radius: 10px; background: #1a1f28; overflow: hidden; }
.pbb-tgh { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: 13px; border-bottom: 1px solid #1f2530; }
.pbb-tgh .material-symbols-outlined { font-size: 18px; color: #7a8a9b; }
.pbb-tgh .lbl { margin-left: auto; font-weight: 600; }
.pbb-trows { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.pbb-trow { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 3px 4px; border: 1px solid #2a3040; border-radius: 8px; background: #141820; }
.pbb-trow.drag { opacity: .4; }
.pbb-trow.over { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.pbb-trow .grip { cursor: grab; color: #7a8a9b; font-size: 20px; flex: 0 0 auto; touch-action: none; }
.pbb-trow input[type=text] { flex: 1 1 120px; min-width: 0; height: 34px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #dce3ed; padding: 0 8px; font: inherit; font-size: 14px; }
.pbb-trow input[type=text]:hover { border-color: #2a3040; }
.pbb-trow input[type=text]:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: #0f1318; }
.pbb-trow select, .pbb-trow input[type=number] { height: 32px; border: 1px solid #2a3040; border-radius: 7px; background: #0f1318; padding: 0 6px; font-size: 12.5px; color: #dce3ed; }
.pbb-trow input[type=number] { width: 62px; text-align: right; }
.pbb-trow .st { font-size: 11.5px; color: #7a8a9b; white-space: nowrap; }
.pbb-trow .stbtn { background: transparent; border: 1px dashed #2a3040; border-radius: 6px; height: 26px; padding: 0 6px; cursor: pointer; }
.pbb-trow .jn { font-size: 11px; color: var(--accent); white-space: nowrap; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.pbb-rm { width: 32px; height: 32px; border: 0; background: transparent; color: #7a8a9b; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pbb-rm:hover { color: #ef4444; background: rgba(239, 68, 68, .1); }
.pbb-rm .material-symbols-outlined { font-size: 20px; }
.pbb-tadd { display: flex; align-items: center; gap: 8px; padding: 2px 6px 6px; }
.pbb-tadd .material-symbols-outlined { color: #7a8a9b; }
.pbb-tadd input { flex: 1 1 140px; min-width: 0; height: 36px; border: 1px dashed #2a3040; border-radius: 8px; background: transparent; color: #dce3ed; padding: 0 10px; font: inherit; font-size: 14px; }
.pbb-tempty { padding: 10px; font-size: 12.5px; color: #7a8a9b; }
.pbb-difflist { display: flex; flex-direction: column; gap: 4px; }
.pbb-diff { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; background: #141820; border: 1px solid #1f2530; font-size: 13px; }
.pbb-diff .material-symbols-outlined { font-size: 18px; color: #7a8a9b; flex: 0 0 auto; }
.pbb-diff.add .material-symbols-outlined, .pbb-diff .ok { color: #4ac8a4; }
.pbb-diff.chg .material-symbols-outlined { color: var(--accent); }
.pbb-diff.rm .material-symbols-outlined { color: #ef4444; }
.pbb-diff .dim { color: #55606f; }

/* Named job templates: the list of template cards, and the load dialog. */
.pbb-tcard { border: 1px solid #2a3040; border-radius: 10px; background: #1a1f28; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.pbb-tch { display: flex; align-items: center; gap: 8px; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: 15px; color: #dce3ed; }
.pbb-tch .material-symbols-outlined { font-size: 19px; color: var(--accent); flex: 0 0 auto; }
.pbb-tch b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbb-tch .lbl { margin-left: auto; flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #7a8a9b; }
.pbb-tcd { font-size: 12.5px; color: #7a8a9b; line-height: 1.4; }
.pbb-tcj { display: flex; flex-wrap: wrap; gap: 4px; }
.pbb-tjc { font-size: 12px; color: #b8c2d0; background: #141820; border: 1px solid #1f2530; border-radius: 6px; padding: 2px 7px; }
.pbb-tjc.more { color: #7a8a9b; border-style: dashed; }
.pbb-tca { display: flex; flex-wrap: wrap; gap: 6px; }
.pbb-tca .pb-btn { min-height: 34px; }
/* An empty template cannot be loaded, and must not look like it can —
   .pb-btn carries no disabled state of its own. */
.pbb-tca .pb-btn:disabled, .pbb-pf .pb-btn:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.6); }
.pbb-tmeta { display: flex; flex-wrap: wrap; gap: 8px; }
.pbb-tmeta label { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #7a8a9b; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.pbb-tmeta input { height: 36px; border: 1px solid #2a3040; border-radius: 8px; background: #141820; color: #dce3ed; padding: 0 10px; font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; }
.pbb-tmeta input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.pbb-back { flex: 0 0 auto; }
.pbb-tload { display: flex; flex-direction: column; gap: 10px; }
.pbb-tlrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pbb-tlrow > span { flex: 0 0 78px; font-size: 11px; color: #7a8a9b; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.pbb-tlrow select { flex: 1 1 220px; min-width: 0; height: 38px; border: 1px solid #2a3040; border-radius: 8px; background: #141820; color: #dce3ed; padding: 0 8px; font: inherit; font-size: 13.5px; }
.pbb-tlcars { display: flex; flex-wrap: wrap; gap: 6px; }
.pbb-tlcar { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid #2a3040; border-radius: 8px; background: #141820; font-size: 13px; color: #dce3ed; cursor: pointer; }
.pbb-tlcar input { accent-color: var(--accent); }

/* light mode */
body.light-mode .pbb-root .lbl, body.light-mode .pbb-lbl, body.light-mode .pbb-note { color: #5a6678; }
body.light-mode .pbb-head h2, body.light-mode .pbb-ch .n, body.light-mode .pbb-rh, body.light-mode .pbb-j, body.light-mode .pbb-band .bh .n, body.light-mode .pbb-cg .cgh .num, body.light-mode .pbb-stat, body.light-mode .pbb-next .t, body.light-mode .pbb-pop, body.light-mode .pbb-panel { color: #1a2030; }
body.light-mode .pbb-seg, body.light-mode .pbb-chip, body.light-mode .pbb-stat, body.light-mode .pbb-next, body.light-mode .pbb-sortctl select, body.light-mode .pbb-rh, body.light-mode .pbb-cell, body.light-mode .pbb-band, body.light-mode .pbb-pop, body.light-mode .pbb-panel, body.light-mode .pbb-trow, body.light-mode .pbb-diff { background: #ffffff; border-color: #dde2ec; }
body.light-mode .pbb-sortctl select, body.light-mode .pbb-chip, body.light-mode .pbb-seg button { color: #1a2030; }
body.light-mode .pbb-seg button.on { color: #0f1218; }
body.light-mode .pbb-chip.on { color: var(--accent); }
body.light-mode .pbb-board { background: #e8ecf2; border-color: #dde2ec; }
body.light-mode .pbb-pop-steps { border-top-color: #dde2ec; }
body.light-mode .pbb-pop-steps li { color: #3a4555; }
body.light-mode .pbb-ch, body.light-mode .pbb-band .bh, body.light-mode .pbb-j, body.light-mode .pbb-tg, body.light-mode .pbb-tnote { background: #eef1f6; border-color: #dde2ec; }
body.light-mode .pbb-j.blocked { background: rgba(239, 68, 68, .07); border-color: #ef4444; }
body.light-mode .pbb-bar, body.light-mode .pbb-tri { background: #dde2ec; }
body.light-mode .pbb-comp-grid input, body.light-mode .pbb-comp-grid select, body.light-mode .pbb-comp-grid textarea, body.light-mode .pbb-trow select, body.light-mode .pbb-trow input[type=number], body.light-mode .pbb-trow input[type=text]:focus { background: #ffffff; color: #1a2030; border-color: #dde2ec; }
body.light-mode .pbb-trow input[type=text], body.light-mode .pbb-tadd input { color: #1a2030; }
body.light-mode .pbb-ava { background: #dde2ec; color: #1a2030; }
body.light-mode .pbb-tcard, body.light-mode .pbb-tlcar { background: #ffffff; border-color: #dde2ec; }
body.light-mode .pbb-tch, body.light-mode .pbb-tjc, body.light-mode .pbb-tmeta input, body.light-mode .pbb-tlrow select, body.light-mode .pbb-tlcar { color: #1a2030; }
body.light-mode .pbb-tjc, body.light-mode .pbb-tmeta input, body.light-mode .pbb-tlrow select { background: #eef1f6; border-color: #dde2ec; }

/* phone */
@media (max-width: 900px) {
  .pbb-pulse { grid-template-columns: repeat(2, 1fr); }
  .pbb-next { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .pbb-head h2 { font-size: 17px; }
  .pbb-board, .pbb-board.lanes { display: flex; flex-direction: column; gap: 0; background: #141820; }
  .pbb-board .pbb-ch { display: none; }
  .pbb-board .pbb-rh { border-left: 0; border-top: 4px solid #2a3040; border-bottom: 1px solid #1f2530; }
  .pbb-board .pbb-rh.blocked { border-top-color: #ef4444; } .pbb-board .pbb-rh.togo { border-top-color: #e0a64b; } .pbb-board .pbb-rh.ready { border-top-color: #4ac8a4; }
  .pbb-board .pbb-cell { min-height: 0; padding: 4px 6px; }
  .pbb-board .pbb-cell:empty, .pbb-board .pbb-cell.blank { display: none; }
  .pbb-cell .empty { display: none; }
  .pbb-cell::before { content: attr(data-h); font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .09em; font-size: 10.5px; color: #7a8a9b; font-weight: 700; padding: 4px 2px 0; }
  .pbb-j { grid-template-columns: 10px auto minmax(0, 1fr) auto; min-height: 46px; }
  .pbb-j .prg { display: none; }
  .pbb-take.re { opacity: 1; }
  .pbb-cg { grid-template-columns: 1fr; }
  .pbb-comp-grid { grid-template-columns: 1fr 1fr; }
  .pbb-comp-grid .fld.w3, .pbb-comp-grid .fld.w6 { grid-column: span 2; }
  .pbb-comp-grid input, .pbb-comp-grid select, .pbb-comp-grid textarea, .pbb-trow input[type=text], .pbb-tadd input { font-size: 16px; }
  .pbb-pplbtn { height: 44px; font-size: 15px; }
  .pbb-ppl-opt { min-height: 44px; font-size: 15px; }
  .pbb-ppl-opt input { width: 18px; height: 18px; }
  .pbb-ppl-list { max-height: 44dvh; }
  .pbb-trow { flex-wrap: wrap; }
  .pbb-trow input[type=text] { flex-basis: 100%; order: 1; }
  .pbb-trow .grip { order: 0; }
  .pbb-trow select, .pbb-trow input[type=number], .pbb-trow .st, .pbb-trow .jn, .pbb-seg.sm, .pbb-rm { order: 2; }
  .pbb-pop { display: none !important; }
  body.light-mode .pbb-board, body.light-mode .pbb-board.lanes { background: #ffffff; }
}

/* ═ FEEDBACK (.pbf-) ═ — pitbox-feedback.js. Verdict cards, compare panel,
   corner tables, track map, the legacy matrix, export. Own tokens on .pbf. */
/* The tokens must be declared on the HEADER host as well as the screen body.
   `headerActions()` renders `.pbf-hact` into the shell's `#pb-sec-acts`, which
   is OUTSIDE `.pbf` — so scoping them to `.pbf` alone left `--pbf-input` and
   `--pbf-border` unresolved up there, and the two scope selects fell back to
   the literal dark defaults in their own rule: a black select on a white
   header, in light mode only. A custom property resolves from the nearest
   ancestor that DECLARES it, so the fix is to declare it on both hosts rather
   than to add a light-mode override per control. */
.pbf, .pbf-hact { --pbf-card: #141820; --pbf-card2: #1a1f28; --pbf-border: #1f2530; --pbf-border2: #2a3040;
  --pbf-text: #dce3ed; --pbf-dim: #7a8a9b; --pbf-input: #0f1319;
  --pbf-ok: #34d66f; --pbf-warn: #f5a623; --pbf-info: #7c83f5; --pbf-danger: #ef4444; --pbf-ring: #243046; }
.pbf { display: flex; flex-direction: column; gap: 10px; color: var(--pbf-text); font-size: 13px; min-width: 0; }
body.light-mode .pbf, body.light-mode .pbf-hact { --pbf-card: #ffffff; --pbf-card2: #f0f3f8; --pbf-border: #dde2ec; --pbf-border2: #cfd6e2;
  --pbf-text: #1a2030; --pbf-dim: #5a6a7b; --pbf-input: #ffffff; --pbf-ring: #dfe5ee; --pbf-info: #5b62e0; --pbf-warn: #c47d00; }
/* The header host inherits the shell's colour, so the selects must state their
   own or a light-mode select keeps `color: inherit` from a dark-tuned header. */
.pbf-hact { color: var(--pbf-text); }
.pbf-lbl { font-family: 'Barlow Condensed', sans-serif; letter-spacing: .09em; font-weight: 600; font-size: 11px; color: var(--pbf-dim); }
.pbf-note { font-size: 12.5px; color: var(--pbf-dim); line-height: 1.4; }
.pbf-sp { flex: 1; }
.pbf-tnum { font-variant-numeric: tabular-nums; }
.pbf-na { color: #4a5563; }
.pbf-bad { color: var(--pbf-danger); }
.pbf-acc { color: var(--accent); }
.pbf-empty { background: var(--pbf-card); border: 1px solid var(--pbf-border); border-radius: 10px; padding: 18px 16px; }
.pbf-empty b { display: block; font-size: 14px; margin-bottom: 4px; }
.pbf-empty p { margin: 0 0 8px; font-size: 12.5px; color: var(--pbf-dim); line-height: 1.5; }
.pbf-loading { color: var(--pbf-dim); font-size: 12.5px; padding: 14px 4px; }
.pbf-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; background: var(--pbf-card2); border: 1px solid var(--pbf-border); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .05em; flex: 0 0 auto; white-space: nowrap; }
.pbf-tag:empty { display: none; }
.pbf-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 11.5px; border: 1px solid var(--pbf-border); color: var(--pbf-dim); white-space: nowrap; }
.pbf-pill.ready { background: rgba(52, 214, 111, .14); border-color: var(--pbf-ok); color: var(--pbf-ok); }
.pbf-ava { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pbf-card2); border: 1px solid var(--pbf-border); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .04em; color: var(--pbf-text); flex: 0 0 auto; }
/* buttons, segs, chips */
.pbf-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(--pbf-border); background: var(--pbf-card2); color: var(--pbf-text); font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 13px; white-space: nowrap; cursor: pointer; }
.pbf-btn:hover { border-color: var(--pbf-dim); }
.pbf-btn:disabled { opacity: .45; cursor: default; }
.pbf-btn .material-symbols-outlined { font-size: 16px; }
.pbf-btn.primary { background: var(--accent); border-color: var(--accent); color: #0b0d10; }
.pbf-btn.sm { min-height: 32px; padding: 0 10px; font-size: 12px; }
.pbf-seg { display: inline-flex; border: 1px solid var(--pbf-border); border-radius: 999px; padding: 2px; background: var(--pbf-card); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pbf-seg::-webkit-scrollbar { display: none; }
.pbf-seg button { height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: none; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 12px; color: var(--pbf-dim); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.pbf-seg button.on { background: var(--accent); color: #0b0d10; }
.pbf-seg button .material-symbols-outlined { font-size: 16px; }
.pbf-seg button .c { font-variant-numeric: tabular-nums; opacity: .75; margin-left: 3px; }
.pbf-chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pbf-border); background: var(--pbf-card); font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 12px; color: var(--pbf-dim); white-space: nowrap; cursor: pointer; }
.pbf-chip.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.pbf-chip .material-symbols-outlined { font-size: 16px; }
.pbf-rate { font-size: 11px; color: var(--accent); background: none; border: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; min-height: 28px; padding: 0 4px; font-family: inherit; }
.pbf-cmpck { display: inline-flex; align-items: center; gap: 5px; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 11.5px; color: var(--pbf-dim); cursor: pointer; }
.pbf-cmpck input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
/* header actions (scope + export) */
.pbf-hact { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pbf-scope { display: inline-flex; align-items: center; gap: 4px; color: var(--pbf-dim, #7a8a9b); }
.pbf-scope .material-symbols-outlined { font-size: 18px; }
.pbf-scope select, .pbf-export select { height: 34px; border: 1px solid var(--pbf-border, #1f2530); border-radius: 7px; background: var(--pbf-input, #0f1319); color: inherit; padding: 0 8px; font-size: 12.5px; font-family: inherit; }
.pbf-export { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pbf-export-note { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.pbf-export-note .material-symbols-outlined { font-size: 15px; }
/* top bar */
.pbf-top, .pbf-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--pbf-card); border: 1px solid var(--pbf-border); border-radius: 10px; padding: 8px 12px; min-width: 0; }
.pbf-bar.acc { border-color: rgba(var(--accent-rgb), .5); }
.pbf-bar:empty { display: none; }
/* rating chips */
.pbf-c { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: 11.5px; border: 1px solid var(--pbf-border); white-space: nowrap; }
.pbf-c.sm { height: 20px; font-size: 11px; padding: 0 6px; }
.pbf-c.us { background: rgba(245, 166, 35, .16); border-color: var(--pbf-warn); color: var(--pbf-warn); }
.pbf-c.os { background: rgba(124, 131, 245, .16); border-color: var(--pbf-info); color: var(--pbf-info); }
.pbf-c.neu { background: rgba(52, 214, 111, .14); border-color: var(--pbf-ok); color: var(--pbf-ok); }
.pbf-c b { font-weight: 800; opacity: .75; }
.pbf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pbf-border2); }
.pbf-p { display: inline-grid; place-items: center; width: 26px; height: 22px; border-radius: 5px; background: var(--pbf-card2); border: 1px solid var(--pbf-border2); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; }
.pbf-p.bad { border-color: var(--pbf-danger); color: var(--pbf-danger); }
.pbf-p.ok { border-color: var(--pbf-ok); color: var(--pbf-ok); }
.pbf-split { display: inline-flex; gap: 3px; padding: 2px; border: 1px dashed var(--pbf-border); border-radius: 999px; }
/* verdict cards */
.pbf-vrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.pbf-v { background: var(--pbf-card); border: 1px solid var(--pbf-border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pbf-v.cmp { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35); }
.pbf-vh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbf-vh b { font-weight: 600; }
.pbf-who { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.pbf-drv { display: inline-flex; align-items: center; gap: 5px; }
.pbf-dialwrap { display: flex; flex-direction: column; gap: 4px; }
.pbf-dial { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(124, 131, 245, .5), var(--pbf-ring) 50%, rgba(245, 166, 35, .55)); }
.pbf-dial i { position: absolute; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--pbf-text); border: 3px solid var(--pbf-card); transform: translateX(-50%); box-shadow: 0 0 0 1px var(--pbf-border); }
.pbf-dial .z { position: absolute; left: 50%; top: -3px; width: 2px; height: 16px; background: var(--pbf-dim); transform: translateX(-1px); }
.pbf-dv { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px; line-height: 1; margin-top: 6px; }
.pbf-dv.us, .pbf-cmphead .big.us { color: var(--pbf-warn); }
.pbf-dv.os, .pbf-cmphead .big.os { color: var(--pbf-info); }
.pbf-dv.neu, .pbf-cmphead .big.neu { color: var(--pbf-ok); }
.pbf-lim { display: flex; flex-direction: column; gap: 3px; font-size: 13px; border-left: 3px solid var(--pbf-warn); padding: 4px 10px; background: var(--pbf-card2); border-radius: 0 7px 7px 0; }
.pbf-worst { display: flex; gap: 6px; flex-wrap: wrap; }
.pbf-ag { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pbf-dim); }
.pbf-ag .material-symbols-outlined { font-size: 16px; }
.pbf-ag.ok { color: var(--pbf-ok); }
.pbf-ag.bad { color: var(--pbf-danger); }
/* corner grid (by driver / by setup / compare) */
.pbf-wrap { overflow-x: auto; max-width: 100%; }
.pbf-grid { display: grid; gap: 1px; background: var(--pbf-border2); border: 1px solid var(--pbf-border); border-radius: 10px; overflow: hidden; min-width: 760px; }
.pbf-rh { background: var(--pbf-card); padding: 6px 10px; display: flex; align-items: center; gap: 6px; min-height: 44px; text-align: left; font-size: 13px; color: var(--pbf-text); border: 0; font-family: inherit; }
button.pbf-rh { cursor: pointer; width: 100%; }
.pbf-rh.head { background: var(--pbf-card2); }
.pbf-rh.sub { padding-left: 34px; background: var(--pbf-card2); min-height: 36px; }
.pbf-rh.ok { color: var(--pbf-dim); }
.pbf-rh.cap { background: var(--pbf-card2); color: var(--pbf-dim); min-height: 34px; }
.pbf-rh .exp { font-size: 18px; color: var(--pbf-dim); transition: transform .15s; }
.pbf-rh.open .exp { transform: rotate(90deg); }
.pbf-band { background: rgba(124, 131, 245, .12); padding: 6px 10px; display: flex; align-items: center; gap: 8px; min-height: 36px; }
.pbf-band.su { background: var(--pbf-card2); }
.pbf-band.su.dl, .pbf-sub.dl { background: rgba(var(--accent-rgb), .08); }
.pbf-sub { background: var(--pbf-card2); padding: 6px 8px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-height: 40px; flex-wrap: wrap; }
.pbf-cell { background: var(--pbf-card); display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px; }
.pbf-cell.sub { background: var(--pbf-card2); min-height: 36px; }
.pbf-cell.txt { font-size: 12px; color: var(--pbf-dim); text-align: left; justify-content: flex-start; line-height: 1.3; flex-direction: column; align-items: flex-start; gap: 3px; }
.pbf-cell.stack { flex-direction: column; gap: 0; }
.pbf-cell .ini { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pbf-dim); margin-top: 3px; text-align: center; }
.pbf-read { background: var(--pbf-card); padding: 6px 10px; display: flex; align-items: center; min-height: 44px; font-size: 12.5px; color: var(--pbf-dim); }
.pbf-read b { color: var(--pbf-text); }
.pbf-read.sub { background: var(--pbf-card2); min-height: 36px; }
/* delta in words */
.pbf-d { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; line-height: 1.25; color: var(--pbf-dim); text-align: left; }
.pbf-d .material-symbols-outlined { font-size: 18px; flex: 0 0 auto; }
.pbf-d b { font-weight: 700; color: var(--pbf-text); }
.pbf-d.same { color: var(--pbf-dim); }
.pbf-d.better { color: var(--pbf-ok); }   .pbf-d.better b { color: var(--pbf-ok); }
.pbf-d.worse { color: var(--pbf-danger); } .pbf-d.worse b { color: var(--pbf-danger); }
.pbf-d.chg { color: var(--pbf-warn); }     .pbf-d.chg b { color: var(--pbf-warn); }
/* compare panel */
.pbf-cmp { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--accent); border-radius: 10px; padding: 10px; background: rgba(var(--accent-rgb), .04); min-width: 0; }
.pbf-cmphead { display: grid; gap: 1px; background: var(--pbf-border2); border: 1px solid var(--pbf-border); border-radius: 10px; overflow: hidden; min-width: 640px; }
.pbf-cmphead > div { background: var(--pbf-card); padding: 6px 10px; min-height: 38px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }
.pbf-cmphead > div.l { background: var(--pbf-card2); }
.pbf-cmphead .big { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px; line-height: 1; }
.pbf-cmphead .gain { color: var(--pbf-ok); font-weight: 700; }
.pbf-cmphead .loss { color: var(--pbf-danger); font-weight: 700; }
.pbf-limcol { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.pbf-limcol .lim { border-left: 3px solid var(--pbf-warn); padding: 2px 8px; background: var(--pbf-card2); border-radius: 0 6px 6px 0; font-size: 12.5px; line-height: 1.3; }
.pbf-verdict { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--pbf-border); background: var(--pbf-card); font-size: 14px; line-height: 1.35; }
.pbf-verdict .material-symbols-outlined { color: var(--accent); font-size: 22px; flex: 0 0 auto; }
.pbf-verdict b { font-weight: 700; }
/* track map */
.pbf-map { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: start; border: 1px solid var(--pbf-border); border-radius: 10px; background: var(--pbf-card); padding: 10px; }
.pbf-mapbox { position: relative; width: 100%; max-width: 640px; margin: 0 auto; color: var(--pbf-text); --track-sf: var(--pbf-card2); }
.pbf-mapbox .pbf-mapsvg, .pbf-mapbox .pbf-mapimg { width: 100%; height: 100%; display: block; opacity: .55; }
.pbf-leader { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pbf-leader line { stroke: var(--pbf-dim); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.pbf-leader circle { fill: var(--pbf-dim); }
.pbf-pin { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 2.5px solid var(--pbf-card); background: var(--pbf-border2); color: var(--pbf-text); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 12px; display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--pbf-border); transition: background .2s, width .2s, height .2s; }
.pbf-pin.us { background: var(--pbf-warn); color: #0b0d10; }
.pbf-pin.os { background: var(--pbf-info); color: #0b0d10; }
.pbf-pin.na { background: transparent; border: 1px dashed var(--pbf-dim); color: var(--pbf-dim); box-shadow: none; }
.pbf-mapside { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pbf-mapside .row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-height: 28px; flex-wrap: wrap; }
.pbf-mapleg { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--pbf-dim); }
.pbf-mapleg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; background: var(--pbf-border2); }
.pbf-mapleg i.us { background: var(--pbf-warn); } .pbf-mapleg i.os { background: var(--pbf-info); }
.pbf-mapleg i.na { background: transparent; border: 1px dashed var(--pbf-dim); }
/* the legacy MATRIX (corners x driver.session.setup columns), ported as-is */
.pbf-mx { display: flex; flex-direction: column; gap: 8px; }
.pbf-mxsub { margin: 10px 0 4px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--pbf-dim); }
.pbf-mwrap { overflow-x: auto; border: 1px solid var(--pbf-border); border-radius: 10px; }
.pbf-mtable { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 12.5px; color: var(--pbf-text); }
.pbf-mtable th { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--pbf-dim); padding: 9px 12px; background: var(--pbf-card2); position: sticky; top: 0; white-space: nowrap; text-align: center; }
.pbf-mtable td { padding: 8px 12px; border-top: 1px solid var(--pbf-border); vertical-align: top; text-align: center; }
.pbf-mv { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font-weight: 800; font-family: 'Barlow Condensed', sans-serif; }
.pbf-mph { font-style: normal; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 9px; opacity: .75; margin-left: 4px; letter-spacing: .5px; }
.pbf-mz { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pbf-ring); }
.pbf-mtable .pbf-mcorner { text-align: left; position: sticky; left: 0; background: var(--pbf-card); min-width: 150px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; white-space: nowrap; z-index: 1; }
.pbf-mtable thead .pbf-mcorner { background: var(--pbf-card2); }
.pbf-mtable .pbf-mcorner i { font-style: normal; font-family: 'Barlow', sans-serif; font-weight: 400; font-size: 11.5px; color: var(--pbf-dim); margin-left: 6px; }
.pbf-mtable .pbf-mread { text-align: left; min-width: 165px; max-width: 240px; font-size: 11.5px; color: var(--pbf-dim); white-space: normal; }
.pbf-mtable .pbf-mread b { color: var(--pbf-text); font-weight: 600; }
.pbf-mok { color: var(--pbf-ok); font-weight: 600; }
.pbf-mwarn { color: var(--pbf-warn); font-weight: 700; }
.pbf-mgrp { background: rgba(var(--accent-rgb), .05); padding: 7px 10px !important; }
.pbf-mgrp-s { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .5px; color: var(--pbf-text); }
.pbf-mgrp-set { display: inline-block; margin-left: 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .7px; text-transform: uppercase; color: var(--accent); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 99px; padding: 1px 8px; }
.pbf-mgrp-d { margin-left: 8px; font-size: 10.5px; color: var(--pbf-dim); text-transform: none; }
.pbf-mcol { min-width: 74px; }
.pbf-msep { border-left: 2px solid var(--pbf-border2); }
.pbf-mrow, .pbf-mokrow { cursor: pointer; }
.pbf-mrow:hover td { background: rgba(var(--accent-rgb), .03); }
.pbf-mexp { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 5px; background: var(--pbf-card2); border: 1px solid var(--pbf-border2); color: var(--pbf-dim); font: 700 11px/1 'Barlow', sans-serif; vertical-align: 1px; }
.pbf-mopen .pbf-mexp { color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.pbf-mphrow td { background: var(--pbf-card2); padding: 5px 12px; }
.pbf-mphrow .pbf-mcorner { background: var(--pbf-card2); padding-left: 38px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--pbf-dim); }
.pbf-mokrow td { background: rgba(52, 214, 111, .03); font-size: 11px; color: var(--pbf-dim); text-align: left; }
.pbf-mokrow .pbf-mcorner b { color: var(--pbf-ok); font-weight: 700; }
.pbf-mblock td { background: var(--pbf-card2); text-align: left; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pbf-dim); padding: 9px 12px; }
.pbf-movrow .pbf-mcorner, .pbf-mlimrow .pbf-mcorner { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 12px; }
.pbf-mlim { min-width: 130px; max-width: 220px; margin: 0 auto; text-align: left; font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; }
/* phone */
@media (max-width: 900px) { .pbf-map { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .pbf-top, .pbf-bar { padding: 8px 10px; gap: 8px; }
  .pbf-top .pbf-lbl { flex: 1 1 100%; }
  .pbf-vrow { grid-template-columns: 1fr; }
  .pbf-hact, .pbf-export { width: 100%; }
  .pbf-export select, .pbf-scope select { height: 40px; font-size: 16px; flex: 1 1 auto; min-width: 0; }
  .pbf-btn { min-height: 44px; }
  .pbf-rh, .pbf-cell, .pbf-read { min-height: 44px; }
  .pbf-seg button { height: 36px; }
  .pbf-grid { min-width: 640px; }
  .pbf-cmphead { min-width: 520px; }
}
/* ═ end FEEDBACK (.pbf-) ═ */

/* ── pre-session procedure editor (shell dialog) ─────────────────────────────
   Rows of "when" + "what". The two inputs are TYPED INTO, so `procSet` only
   updates state — only add/remove repaint, or the caret would be destroyed on
   every keystroke (the runplan-fields rule). */
.pb-proc { display: flex; flex-direction: column; gap: 8px; }
.pb-proc-head, .pb-proc-row { display: grid; grid-template-columns: 116px minmax(0, 1fr) 34px; gap: 8px; align-items: center; }
.pb-proc-head { padding: 0 2px; }
.pb-proc-row input { height: 38px; border: 1px solid var(--pb-border); border-radius: 7px; background: var(--pb-card2); color: var(--pb-text); padding: 0 10px; font: inherit; font-size: 14px; min-width: 0; }
.pb-proc-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pb-proc-row .pb-proc-t { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-proc-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pb-proc-empty { padding: 10px 2px; }
@media (max-width: 600px) {
  /* Under 16px iOS zooms the page in and never comes back. */
  .pb-proc-row input { font-size: 16px; height: 44px; }
  .pb-proc-head, .pb-proc-row { grid-template-columns: 104px minmax(0, 1fr) 40px; }
}

/* Composer: notes, the critical tick and the door into the full job maker. */
.pbb-cnotes { min-height: 54px; resize: vertical; padding: 8px 10px !important; height: auto !important; }
.pbb-crit { display: inline-flex; align-items: center; gap: 6px; height: 36px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.pbb-crit input { width: 16px; height: 16px; accent-color: var(--pb-danger, #ef4444); flex: 0 0 auto; }
.pbb-crit .material-symbols-outlined { font-size: 17px; color: var(--pb-danger, #ef4444); }
.pbb-comp-grid .fld.acts .pbb-sp { flex: 1; }
.pbb-comp-grid .fld.acts .material-symbols-outlined { font-size: 16px; }