/* ══ ADMINISTRATION PAGE — the season/championship home (main nav, under Calendar) ══
   Championships tab v1: season-filtered list + full-page editor over the existing
   /api/championships backend. Design record: tools/harness/championship_admin.html.
   Prefix: .adm-  (shared classes reused: .form-input) */

#administration { padding: 22px 26px 60px; max-width: 1280px; }

.adm-head { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #1f2530; }
.adm-head h1 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 24px;
  font-weight: 700; letter-spacing: .3px; }
.adm-head p { margin: 5px 0 0; font-size: 12px; color: #7a8a9b; max-width: 66ch; line-height: 1.5; }

/* sub-tab segmented row (Championships live; the rest land later) */
/* The shell's chrome paints OVER the section editor's sticky lid: that lid
   reaches above the bar to hide slides scrolling through the scroller's top
   padding, and at rest it would otherwise slice the bottom off the seg tabs.
   An opaque, page-coloured subnav above it in the stack settles the order. */
.adm-subnav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
  position: relative; z-index: 7; background: #090b0e; }
.adm-seg { display: inline-flex; background: #0f1318; border: 1px solid #2a3040;
  border-radius: 7px; padding: 2px; gap: 2px; }
.adm-seg-btn { border: none; background: transparent; border-radius: 5px; padding: 6px 13px;
  cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: #7a8a9b;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s; }
.adm-seg-btn .material-symbols-outlined { font-size: 16px; }
.adm-seg-btn:hover { color: #dce3ed; }
.adm-seg-btn.active { background: rgba(var(--accent-rgb, 212,245,66), .15); color: var(--accent, #d4f542); }
.adm-seg-btn.soon { cursor: default; opacity: .55; }
.adm-seg-btn.soon:hover { color: #7a8a9b; }
.adm-soon-chip { font-size: 8.5px; letter-spacing: .8px; border: 1px solid #2a3040;
  border-radius: 999px; padding: 1px 5px; color: #3a4555; }

/* season filter row */
.adm-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.adm-years { display: inline-flex; background: #0f1318; border: 1px solid #2a3040;
  border-radius: 7px; padding: 2px; gap: 2px; }
.adm-year { border: none; background: transparent; border-radius: 5px; padding: 5px 12px;
  cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; color: #7a8a9b; }
.adm-year:hover { color: #dce3ed; }
.adm-year.active { background: rgba(var(--accent-rgb, 212,245,66), .15); color: var(--accent, #d4f542); }
.adm-toolbar .adm-btn { margin-left: auto; }

/* buttons */
.adm-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #2a3040;
  background: #141820; color: #dce3ed; border-radius: 7px; padding: 7px 13px; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; transition: border-color .15s, background .15s; }
.adm-btn:hover { border-color: var(--accent, #d4f542); }
.adm-btn .material-symbols-outlined { font-size: 15px; }
.adm-btn.primary { background: rgba(var(--accent-rgb, 212,245,66), .14);
  border-color: rgba(var(--accent-rgb, 212,245,66), .45); color: var(--accent, #d4f542); }
.adm-btn.primary:hover { background: rgba(var(--accent-rgb, 212,245,66), .22); }
.adm-btn.danger { color: #ef4444; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.06); }
.adm-btn.small { padding: 4px 9px; font-size: 11px; }
.adm-back { display: inline-flex; align-items: center; gap: 7px; border: none; background: none;
  cursor: pointer; color: #7a8a9b; font-family: 'Barlow Condensed', sans-serif; font-size: 12.5px;
  font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 0; margin-bottom: 14px; }
.adm-back:hover { color: var(--accent, #d4f542); }
.adm-back .material-symbols-outlined { font-size: 16px; }

/* championship cards */
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.adm-card { background: #111620; border: 1px solid #2a3040; border-radius: 10px; overflow: hidden;
  cursor: pointer; text-align: left; padding: 0; display: flex; flex-direction: column;
  transition: border-color .15s; color: inherit; font: inherit; }
.adm-card:hover { border-color: var(--accent, #d4f542); }
.adm-card-bar { height: 4px; background: var(--c, #3b82f6); }
.adm-card-body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.adm-card-top { display: flex; align-items: center; gap: 9px; }
.adm-card-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, #3b82f6); flex-shrink: 0; }
.adm-card-name { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700;
  letter-spacing: .3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 9px;
  border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px;
  font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  background: #141820; border: 1px solid #2a3040; color: #7a8a9b; }
.adm-chip.ok { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.35); color: #22c55e; }
.adm-chip.warn { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.4); color: #f59e0b; }
.adm-chip.acc { background: rgba(var(--accent-rgb, 212,245,66), .12);
  border-color: rgba(var(--accent-rgb, 212,245,66), .4); color: var(--accent, #d4f542); }
.adm-card-top .adm-chip { margin-left: auto; }
.adm-card-meta { font-size: 11.5px; color: #7a8a9b; }
.adm-card-next { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.adm-card-next .material-symbols-outlined { font-size: 15px; color: #7a8a9b; }
.adm-pbar { height: 5px; border-radius: 3px; background: #0f1318; overflow: hidden; }
.adm-pbar i { display: block; height: 100%; border-radius: 3px; background: var(--c, #3b82f6);
  width: var(--w, 0%); }
.adm-card.add { border-style: dashed; background: transparent; align-items: center;
  justify-content: center; min-height: 140px; flex-direction: row; gap: 8px; color: #7a8a9b;
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; }
.adm-card.add:hover { color: var(--accent, #d4f542); }
.adm-empty { border: 1px dashed #2a3040; border-radius: 10px; padding: 34px 20px; text-align: center;
  color: #7a8a9b; font-size: 13px; grid-column: 1 / -1; }
.adm-empty b { color: #dce3ed; }

/* editor */
.adm-ed { max-width: 900px; }
.adm-panel { background: #111620; border: 1px solid #2a3040; border-radius: 10px; margin-bottom: 16px; }
.adm-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px 10px; }
.adm-panel-title { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: .3px; display: flex; align-items: center; gap: 8px; }
.adm-panel-title .adm-card-dot { width: 9px; height: 9px; }
.adm-panel-title .material-symbols-outlined { font-size: 17px; color: #7a8a9b; }
.adm-panel-sub { font-size: 11px; color: #7a8a9b; margin-top: 2px; }
.adm-flds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 8px 18px 16px;
  border-top: 1px solid #1f2530; }
.adm-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.adm-fld.wide { grid-column: 1 / -1; }
.adm-fld label { font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; color: #7a8a9b; }
.adm-swatches { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.adm-sw { width: 24px; height: 24px; border-radius: 6px; border: 2px solid transparent;
  cursor: pointer; background: var(--c); padding: 0; }
.adm-sw.on { border-color: #dce3ed; }
.adm-sw.wheel { border-radius: 50%;
  background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); position: relative; overflow: hidden; }
.adm-sw.wheel input[type="color"] { position: absolute; inset: -6px; opacity: 0; cursor: pointer; }
.adm-hex { width: 92px; font-family: Consolas, monospace; font-size: 12px; }

/* rounds */
.adm-round { display: flex; align-items: center; gap: 10px; padding: 10px 18px;
  border-top: 1px solid #1f2530; flex-wrap: wrap; }
.adm-round.noevent { background: rgba(245,158,11,.04); }
.adm-rnum { width: 30px; height: 30px; border-radius: 8px; background: #0f1318;
  border: 1px solid #2a3040; display: grid; place-items: center;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px;
  color: #7a8a9b; flex-shrink: 0; }
.adm-round.noevent .adm-rnum { border-color: rgba(245,158,11,.5); color: #f59e0b; }
.adm-round .adm-rname { flex: 1 1 160px; min-width: 120px; }
.adm-round .adm-rev { flex: 1.4 1 220px; min-width: 170px; }
.adm-rx { background: none; border: none; color: #3a4555; cursor: pointer; padding: 4px;
  border-radius: 4px; display: flex; }
.adm-rx:hover { color: #ef4444; }
.adm-rx .material-symbols-outlined { font-size: 16px; }
.adm-round-foot { padding: 10px 18px 13px; border-top: 1px solid #1f2530; }
.adm-err { margin: 0 0 14px; border: 1px solid rgba(239,68,68,.4); background: rgba(239,68,68,.07);
  color: #ef4444; border-radius: 8px; padding: 9px 13px; font-size: 12.5px; }
.adm-ed-acts { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.adm-ed-acts .adm-btn.danger { margin-right: auto; }

/* light mode */
body.light-mode .adm-head { border-bottom-color: #e8ecf2; }
body.light-mode .adm-subnav { background: #f0f3f8; }
body.light-mode .adm-head p, body.light-mode .adm-card-meta, body.light-mode .adm-panel-sub { color: #8899aa; }
body.light-mode .adm-seg, body.light-mode .adm-years { background: #f0f3f8; border-color: #dde2ec; }
body.light-mode .adm-card, body.light-mode .adm-panel { background: #fff; border-color: #dde2ec; }
body.light-mode .adm-flds, body.light-mode .adm-round, body.light-mode .adm-round-foot { border-top-color: #e8ecf2; }
body.light-mode .adm-btn { background: #f4f6fb; border-color: #dde2ec; color: #1a2030; }
body.light-mode .adm-chip { background: #f4f6fb; border-color: #dde2ec; }
body.light-mode .adm-rnum { background: #f0f3f8; border-color: #dde2ec; }
body.light-mode .adm-pbar { background: #eef1f7; }
body.light-mode .adm-empty { border-color: #dde2ec; color: #8899aa; }
body.light-mode .adm-sw.on { border-color: #1a2030; }

/* phone */
@media (max-width: 700px) {
  #administration { padding: 14px 12px 70px; }
  .adm-flds { grid-template-columns: 1fr; }
  .adm-toolbar .adm-btn { margin-left: 0; flex: 1 1 100%; justify-content: center; }
  .adm-round { row-gap: 8px; }
}

/* ══ v2 — full Administration suite (briefings/standings/docs/contacts) ══ */

/* shell: championship picker beside the sub-tabs */
.adm-champpick { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.adm-champpick select { min-width: 200px; padding: 6px 10px; font-size: 12.5px; }

/* attention strip */
.adm-attn { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.adm-att { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #2a3040;
  background: #111620; color: #dce3ed; border-radius: 999px; padding: 5px 12px 5px 8px;
  cursor: pointer; font-size: 11.5px; transition: border-color .15s; }
.adm-att:hover { border-color: var(--accent, #d4f542); }
.adm-att.warn { border-color: rgba(245,158,11,.45); }
.adm-att-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, #3b82f6); flex-shrink: 0; }
.adm-att-ch { color: #7a8a9b; font-size: 10.5px; }

/* card: round dots + live state + track silhouette + event link */
.adm-dots { display: flex; gap: 5px; align-items: center; min-height: 10px; flex-wrap: wrap; }
.adm-dot { width: 9px; height: 9px; border-radius: 50%; background: #1f2530; border: 1.5px solid #2a3040; }
.adm-dot.run { background: var(--c, #3b82f6); border-color: var(--c, #3b82f6); }
.adm-dot.next { background: transparent; border-color: var(--c, #3b82f6); box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset; }
.adm-dot.future { background: #1f2530; border-color: color-mix(in srgb, var(--c, #3b82f6) 45%, transparent); }
.adm-dot.live { background: #22c55e; border-color: #22c55e; animation: adm-pulse 1.6s infinite; }
@keyframes adm-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } }
.adm-chip.live { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.45); color: #22c55e; }
.adm-card.live { border-color: rgba(34,197,94,.4); }
.adm-card-next { position: relative; min-height: 22px; }
.adm-tmap { flex-shrink: 0; width: 44px; height: 26px; display: grid; place-items: center; opacity: .55; color: var(--c, #3b82f6); }
.adm-tmap svg, .adm-tmap img { max-width: 44px; max-height: 26px; width: auto; height: auto; }
.adm-evlink { cursor: pointer; text-decoration: none; color: inherit; }
.adm-evlink:hover { color: var(--accent, #d4f542); text-decoration: underline; }

/* editor: round move buttons + pickers */
.adm-rmove { display: inline-flex; gap: 2px; margin-left: auto; }
.adm-rx:disabled { opacity: .3; cursor: default; }
.adm-evpick { border-top: 1px solid #1f2530; padding: 8px 18px 12px; }
.adm-evpick-filters { display: flex; gap: 14px; flex-wrap: wrap; padding: 2px 4px 8px; }
.adm-evpick-filters label { display: flex; align-items: center; gap: 6px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; color: #7a8a9b; }
.adm-evpick-filters select { min-width: 120px; padding: 5px 8px; font-size: 12.5px; }
.adm-evpick-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: 12.5px;
  cursor: pointer; border-radius: 6px; }
.adm-evpick-row:hover { background: #141820; }
.adm-evpick-row > span:first-of-type { flex: 1 1 auto; }
.adm-evpick-typechip { flex: 0 0 auto; }
.adm-evpick-date { color: #7a8a9b; font-size: 11.5px; margin-left: auto; }
.adm-evpick-track { color: #3a4555; font-size: 11px; }
.adm-evpick-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
/* Test-day number badge — a distinct volt accent so a T-row never reads as a round. */
.adm-rnum-test { border-color: rgba(139,92,246,.5); color: #a855f7;
  font-variant-numeric: tabular-nums; }
body.light-mode .adm-rnum-test { border-color: rgba(139,92,246,.5); color: #7c3aed; }
.adm-import { border-top: 1px solid #1f2530; padding: 10px 18px 12px; display: flex;
  flex-direction: column; gap: 10px; }
.adm-import textarea { font-size: 12.5px; line-height: 1.5; resize: vertical; }
.adm-imp-preview { display: flex; flex-direction: column; gap: 2px; }
.adm-imp-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12.5px; }
.adm-imp-row .adm-rnum { width: 24px; height: 24px; font-size: 11px; }
.adm-imp-name { flex: 1; }
.adm-imp-date { color: #7a8a9b; font-size: 11.5px; }

/* entries */
.adm-entry .adm-en-num { width: 58px; flex-shrink: 0; }
.adm-entry .adm-en-num input { width: 100%; text-align: center; }
.adm-entry .adm-en-car, .adm-entry .adm-en-label { flex: 1.4 1 180px; min-width: 150px; }
.adm-entry .adm-en-class { flex: 0 1 90px; min-width: 70px; }
.adm-entry .adm-en-drv { flex: 1 1 150px; min-width: 130px; }
.adm-entry.rival { background: rgba(122,138,155,.04); }
/* .adm-en-pick = the entry-row driver picker wrapper (now hosts an .adm-msel);
   .adm-en-picklist is a separate flat checkbox list still used by contacts. */
.adm-en-pick { font-size: 11.5px; color: #7a8a9b; }
.adm-en-picklist { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; background: #141820;
  border: 1px solid #2a3040; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column;
  gap: 5px; min-width: 180px; max-height: 180px; overflow: auto; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.adm-en-picklist label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #dce3ed;
  cursor: pointer; white-space: nowrap; }
.adm-fld .adm-en-picklist { position: static; box-shadow: none; }
.adm-entry .adm-en-pick { flex: 0 1 200px; min-width: 150px; }

/* searchable multiselect (.adm-msel) — drivers per entry + championship crew */
.adm-msel { position: relative; font-size: 11.5px; color: #7a8a9b; width: 100%; }
.adm-msel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 6px 9px; border: 1px solid #2a3040; border-radius: 7px; background: #0f1318; }
.adm-msel > summary::-webkit-details-marker { display: none; }
.adm-msel[open] > summary { border-color: var(--accent, #d4f542); }
.adm-msel-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dce3ed; }
.adm-msel-sum i { color: #7a8a9b; font-style: normal; }
.adm-msel-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; font-size: 10px;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb, 212,245,66), .18); color: var(--accent, #d4f542); }
.adm-msel-badge:empty { display: none; }
.adm-msel-caret { font-size: 16px; color: #3a4555; transition: transform .15s; }
.adm-msel[open] .adm-msel-caret { transform: rotate(180deg); }
.adm-msel-pop { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; min-width: 220px;
  background: #141820; border: 1px solid #2a3040; border-radius: 9px; padding: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 6px; }
.adm-msel-search { font-size: 12px !important; padding: 6px 9px !important; }
.adm-msel-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; }
.adm-msel-opt { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #dce3ed;
  cursor: pointer; padding: 4px 5px; border-radius: 6px; }
.adm-msel-opt:hover { background: rgba(255,255,255,.03); }
.adm-msel-opt input { flex-shrink: 0; }
.adm-msel-opt-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-msel-opt-s { font-size: 10.5px; color: #7a8a9b; text-transform: uppercase; letter-spacing: .4px;
  flex-shrink: 0; }
.adm-msel-empty { font-size: 12px; color: #7a8a9b; padding: 6px 5px; }
/* inside the crew panel the popover has room to sit in flow */
.adm-crew-row .adm-msel { flex: 1 1 320px; min-width: 240px; max-width: 460px; }

/* default crew panel */
.adm-crew-row { align-items: center; }
.adm-crew-lbl { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: #7a8a9b; flex: 0 0 auto; }
.adm-crew-count { font-size: 12px; color: #7a8a9b; }
.adm-crew-foot { justify-content: space-between; gap: 12px; }
.adm-crew-hint { font-size: 11.5px; color: #7a8a9b; flex: 1 1 240px; line-height: 1.4; }
.adm-btn[disabled] { opacity: .4; cursor: default; }
.adm-btn[disabled]:hover { border-color: #2a3040; }

/* crew sync picker */
.adm-crewsync { border-top: 1px solid #1f2530; padding: 10px 18px; display: flex; flex-direction: column; gap: 4px;
  background: rgba(var(--accent-rgb, 212,245,66), .03); }
.adm-crewsync-head { font-size: 12px; color: #9fb0c3; margin-bottom: 4px; }
.adm-crewsync-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #dce3ed;
  cursor: pointer; padding: 3px 0; }
.adm-crewsync-row .adm-rnum { width: 24px; height: 24px; font-size: 11px; }
.adm-crewsync-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-crewsync-date { color: #7a8a9b; font-size: 11.5px; }
.adm-crewsync-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* readiness strip */
.adm-ready-row { display: flex; align-items: center; gap: 10px; padding: 8px 18px;
  border-top: 1px solid #1f2530; flex-wrap: wrap; }
.adm-ready-row .adm-rnum { width: 24px; height: 24px; font-size: 11px; }
.adm-ready-name { font-size: 12.5px; flex: 1 1 160px; min-width: 140px; }
.adm-ready-name i { font-style: normal; color: #7a8a9b; font-size: 11px; }
.adm-ready-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.adm-ready-chips .adm-chip { cursor: pointer; }
.adm-ready-chips .adm-chip:hover { border-color: var(--accent, #d4f542); }

/* ── briefings (.admb-) ─────────────────────────────────────────────────── */
.admb-secrow { align-items: flex-start; }
.admb-secinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; cursor: pointer; }
.admb-sectitle { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.admb-secdesc { font-size: 11.5px; color: #7a8a9b; overflow: hidden; text-overflow: ellipsis; }
.admb-state { font-size: 9px; letter-spacing: .8px; text-transform: uppercase; border-radius: 4px;
  padding: 1.5px 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; }
.admb-state.base { background: #1a212c; color: #7a8a9b; border: 1px solid #2a3040; }
.admb-state.over { background: rgba(59,130,246,.12); color: #60a5fa; border: 1px solid rgba(59,130,246,.4); }
.admb-state.round { background: rgba(168,85,247,.12); color: #c084fc; border: 1px solid rgba(168,85,247,.4); }
/* A section this round drops. The row is quietened rather than removed, so
   the crew can see WHAT was left out and put it back. */
.admb-state.hidden { background: rgba(120,130,145,.14); color: #8b98a9; border: 1px solid #3a4555; }
.admb-sechidden .admb-sectitle { text-decoration: line-through; text-decoration-color: #4a5565; }
.admb-sechidden .admb-sectitle, .admb-sechidden .admb-secdesc { opacity: .62; }
/* ── who wrote it last ───────────────────────────────────────────────
   Its OWN line under the section's meta rather than part of it: the desc is
   ellipsised (and nowrap on a phone), so an author appended to it would be the
   first thing cut. */
.admb-secby { display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  font-size: 10.5px; color: #5f6b7a; }
.admb-secby .material-symbols-outlined { font-size: 13px !important; color: #4a5565; }
.admb-lastedit { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: #5f6b7a; }
.admb-lastedit .material-symbols-outlined { font-size: 13px !important; }
.admb-editmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── the briefing's discussion rail ────────────────────────────────────
   A CONTAINER query, not a media query: the round view is drawn into two hosts
   of very different widths — the Administration page, and the event editor's
   Briefing tab inside a modal narrower than the viewport it sits in. A viewport
   rule would hand that modal a rail it has no room for.
   .admb-roundwrap carries no slide markup, so making it a query container
   cannot disturb the cqw typography a briefing's slides are sized in. */
.admb-roundwrap { container-type: inline-size; display: flex; gap: 18px; align-items: flex-start; }
.admb-roundmain { flex: 1 1 auto; min-width: 0; }
.admb-chatrail { display: none; flex: 0 0 330px; min-width: 0; align-self: flex-start;
  position: sticky; top: 12px; height: min(660px, calc(100dvh - 150px));
  flex-direction: column; overflow: hidden;
  border: 1px solid #2a3040; border-radius: 12px; background: #111620; }
.admb-chathead { display: flex; align-items: center; gap: 8px; flex: none; padding: 11px 13px;
  border-bottom: 1px solid #1f2530; font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9fb0c3; }
.admb-chathead .material-symbols-outlined { font-size: 18px; color: var(--accent, #d4f542); }
.admb-chattag { margin-left: auto; font-size: 10px; letter-spacing: .06em; color: #7a8a9b;
  text-transform: none; border: 1px solid #2a3040; border-radius: 20px; padding: 2px 8px; }
.admb-chatbody { flex: 1; min-height: 0; display: flex; }
.admb-chatn { background: var(--accent, #d4f542); color: #0b0f14; border-radius: 20px;
  padding: 0 6px; font-size: 10px; font-weight: 800; margin-left: 2px; }
/* Wide enough for a third column: the rail appears and the button that stands
   in for it goes. .admb-chatbtn-any is the button on the screens that never get
   a rail (the publish screen, the section editor, whose right-hand side is
   already the slide preview) — it stays at every width. */
@container (min-width: 1150px) {
  .admb-roundwrap .adm-btn.admb-chatbtn { display: none; }
  .admb-chatrail { display: flex; }
}

/* confidential per-car scope: a badge on scoped section rows + the editor control */
.admb-carscope { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
  letter-spacing: .3px; border-radius: 5px; padding: 1.5px 6px; background: rgba(245,158,11,.12);
  color: #fbbf24; border: 1px solid rgba(245,158,11,.4); }
.admb-carscope .material-symbols-outlined { font-size: 13px; }
.admb-carscope-ed label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.admb-carscope-hint { font-size: 10.5px; font-weight: 500; color: #fbbf24; letter-spacing: .2px;
  text-transform: none; }
.admb-carscope-note { font-size: 12px; color: #7a8a9b; }
.admb-carscope-opts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.admb-scope-btn { margin-top: 8px; align-self: flex-start; }
/* A chip names the MODEL and the car id underneath: two entries of the same
   model are only told apart by the id (last-4-VIN + owner). */
.admb-carchip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left; border-radius: 7px; padding: 6px 11px; cursor: pointer;
  background: #141820; color: #9aa7b6; border: 1px solid #2a3040; transition: all .12s; }
.admb-carchip-nm { font-size: 12px; font-weight: 600; }
.admb-carchip-id { font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: #6c7a8a; }
.admb-carchip:hover { border-color: #3a4456; color: #cdd6e0; }
.admb-carchip.on { background: rgba(245,158,11,.14); color: #fbbf24; border-color: rgba(245,158,11,.5); }
.admb-carchip.on .admb-carchip-id { color: rgba(245,158,11,.75); }
.admb-roundrow { cursor: pointer; }
.admb-roundrow:hover { background: #141820; }
.admb-crew { flex-wrap: wrap; gap: 6px; }
/* which round the briefing is for + the event date on round rows */
.admb-roundctx { font-size: 12px; font-weight: 600; color: #9aa7b6; margin: 3px 0 4px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.admb-secmeta { font-size: 11px; font-weight: 500; color: #7a8a9b; }
/* drag-to-reorder base sections */
.admb-draghandle { cursor: grab; touch-action: none; align-self: center; }
.admb-draghandle:active { cursor: grabbing; }
.admb-draghandle:hover { color: #9aa7b6; }
.admb-secrow.admb-dragging { opacity: .45; }
.admb-secrow.admb-drop-above { box-shadow: inset 0 2px 0 0 #3b82f6; }
.admb-secrow.admb-drop-below { box-shadow: inset 0 -2px 0 0 #3b82f6; }
.admb-vrow { align-items: center; }
.admb-vrow .admb-secinfo { cursor: default; }
.admb-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 4px 10px;
  border-radius: 999px; border: 1px solid #2a3040; background: #141820; color: #7a8a9b; }
.admb-pill .material-symbols-outlined { font-size: 13px; }
.admb-pill.ok { border-color: rgba(34,197,94,.4); color: #22c55e; }
.admb-pill.opened { border-color: rgba(245,158,11,.4); color: #f59e0b; }

/* audience switch — crew (mechanics) vs drivers, two independent documents */
.admb-audbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.admb-audtabs { display: inline-flex; background: #0f141c; border: 1px solid #232c38; border-radius: 999px;
  padding: 3px; gap: 2px; }
.admb-audtab { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent;
  color: #8b98a9; font-family: 'Barlow Condensed', sans-serif; font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 6px 15px; border-radius: 999px; cursor: pointer; }
.admb-audtab .material-symbols-outlined { font-size: 17px; }
.admb-audtab:hover { color: #cbd5e2; }
.admb-audtab.on { background: color-mix(in srgb, var(--c, #3b82f6) 22%, transparent); color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #3b82f6) 55%, transparent); }
.admb-audhint { font-size: 12px; color: #7a8a9b; }

/* custom briefings — one event, one role, never published */
.admb-docrow, .admb-dsecrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-top: 1px solid #1f2530;
}
.admb-docrow { cursor: pointer; }
.admb-docrow:hover { background: #131923; }
.admb-docrow-main, .admb-dsec-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.admb-docrow-main b, .admb-dsec-main b { color: #dce3ed; font-size: 14px; }
.admb-docrow-sub, .admb-dsec-sub { font-size: 12px; color: #7a8a9b; }
.admb-rolechip {
  font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--rc, #8b95a7); color: var(--rc, #8b95a7);
}
.admb-rolechip-all { --rc: #7a8a9b; }
.admb-sharechip {
  display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px;
  letter-spacing: .05em; text-transform: uppercase; color: #4ac8a4;
}
.admb-sharechip .material-symbols-outlined { font-size: 13px; }
.admb-dsec-acts { display: flex; gap: 2px; flex-shrink: 0; }
.admb-shareurl { padding: 8px 18px; border-top: 1px solid #1f2530; }
.admb-shareurl code {
  display: block; font-size: 11.5px; color: #7a8a9b; background: #0b0e13;
  border: 1px solid #232a36; border-radius: 8px; padding: 7px 9px; word-break: break-all;
}

/* block editor */
.admb-blocks { display: flex; flex-direction: column; gap: 10px; padding: 10px 18px; border-top: 1px solid #1f2530; }
.admb-block { border: 1px solid #2a3040; border-radius: 8px; padding: 10px 12px; display: flex;
  flex-direction: column; gap: 8px; background: #0f1318; position: relative; }
.admb-block-head { display: flex; align-items: center; }
/* The block body rides a two-level wrapper so the ≤700px accordion can animate
   it; on desktop all three are plain flex columns — the layout is unchanged. */
.admb-bbody, .admb-bin, .admb-bflds { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.admb-bprev { display: none; }   /* the accordion head's one-line preview — phone only */
.admb-block textarea { resize: vertical; font-size: 13px; line-height: 1.5; }
.admb-imgstage { max-width: 320px; position: relative; }
/* An empty image block is a DROP + PASTE target, and says so: a screenshot on
   the clipboard is the commonest briefing picture there is, and a bare "Upload
   image" button never admitted Ctrl+V would work. */
.admb-imgstage.empty { width: 100%; }
.admb-imgdrop { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; width: 100%; min-height: 92px; padding: 12px; cursor: pointer; text-align: center;
  background: rgba(111,125,255,.05); border: 1px dashed #39415a; border-radius: 8px;
  color: #8b98a9; font-family: inherit; transition: border-color .12s, background .12s, color .12s; }
.admb-imgdrop:hover { border-color: #6f7dff; background: rgba(111,125,255,.1); color: #c8d0dd; }
.admb-imgdrop .material-symbols-outlined { font-size: 22px; color: #6f7dff; }
.admb-imgdrop-t { font-size: 12.5px; font-weight: 600; color: #c8d0dd; }
.admb-imgdrop-s { font-size: 11.5px; }
.admb-imgstage.over { outline: 2px dashed #6f7dff; outline-offset: 2px; border-radius: 8px; }
.admb-imgstage.over .admb-imgdrop { border-color: #6f7dff; background: rgba(111,125,255,.12); }
.admb-imgbusy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: 12px; color: #c8d0dd; background: rgba(12,15,24,.72); border-radius: 8px; }
.admb-imgbusy .material-symbols-outlined { font-size: 18px; animation: admb-spin 1s linear infinite; }
@keyframes admb-spin { to { transform: rotate(360deg); } }
body.light-mode .admb-imgdrop { background: #f7f8fc; border-color: #d3d9e6; color: #667788; }
body.light-mode .admb-imgdrop:hover { border-color: #6f7dff; background: #eef0fb; color: #1a2030; }
body.light-mode .admb-imgdrop-t { color: #1a2030; }
body.light-mode .admb-imgbusy { background: rgba(255,255,255,.8); color: #1a2030; }
/* Both caps ride --imgscale and width/height stay auto, so the thumbnail
   shrinks proportionally and its border hugs the picture — see imgScaleAttr.
   Above 100% the height cap grows (the thumb visibly enlarges) while the
   width clamps to the stage, so the editor never overflows its column. */
.admb-imgprev { max-width: min(calc(100% * var(--imgscale, 1)), 100%); max-height: calc(160px * var(--imgscale, 1));
  width: auto; height: auto; border-radius: 6px; border: 1px solid #2a3040; }
/* Image size: a percentage of the width the block is given. The thumbnail above
   shrinks with the slider, and the preview pane shows the real result. */
.admb-imgsize { display: flex; align-items: center; gap: 8px; }
.admb-imgsize > .material-symbols-outlined { font-size: 18px; color: #7a8a9b; }
/* 10–300% is three times the travel the 10–200 slider had, so the track gets
   the room to be aimed with rather than nudged. */
.admb-imgsize input[type=range] { flex: 1; max-width: 300px; accent-color: #6f7dff; }
.admb-imgsize output { font-size: 12px; color: #8b98a9; min-width: 38px; font-variant-numeric: tabular-nums; }
.admb-heading-in { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; }
.admb-divider-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #7a8a9b; padding: 2px 0; }

/* the whole card is the drag handle — cards physically reflow into slide order */
.admb-block { cursor: grab; }
.admb-block:active { cursor: grabbing; }
.admb-block .form-input, .admb-block textarea, .admb-block select, .admb-block input { cursor: auto; }
.admb-bhandle { color: #6b7688; margin-right: 2px; touch-action: none; cursor: grab; }
.admb-bhandle:active { cursor: grabbing; }
/* while a touch drag runs, nothing else may select or scroll under the finger */
body.admb-bdrag-on { user-select: none; -webkit-user-select: none; }
body.admb-bdrag-on .admb-blocks { touch-action: none; }
.admb-block.admb-bdragging { opacity: .35; outline: 2px dashed var(--c, #3b82f6); outline-offset: -1px; }
.admb-block.half { border-style: dashed; }
.admb-wtag, .admb-wbtn.on, .admb-albtn.on { color: var(--c, #3b82f6); }
.admb-wtag { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  border: 1px solid currentColor; border-radius: 20px; padding: 0 7px; margin-left: 8px; opacity: .85; }
/* editor rows — half-width blocks sit side by side exactly as on the slide */
.admb-erow { display: flex; gap: 10px; align-items: stretch; }
.admb-erow > .admb-ecol { flex: 1 1 0; min-width: 0; display: flex; }
.admb-erow > .admb-ecol > .admb-block { flex: 1; }

/* ── slide cards ───────────────────────────────────────────────────────────
   A section is one or more slides. The cards are a GROUPING of the same flat
   block list (a `slidebreak` block starts a new card), so every block handler
   and the live drag are unchanged — and a block dragged across a card boundary
   simply crosses a break. */
.admb-slidecard { border: 1px solid #232a36; border-radius: 10px; margin: 0 18px; background: #0e131a; }
.admb-slidecard.admb-over { border-color: rgba(245,158,11,.45); }
.admb-sc-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 12px;
  border-bottom: 1px solid #1c222c; }
.admb-sc-n { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #9fb0c3; display: flex; align-items: center; gap: 5px; }
.admb-sc-n i { font-style: normal; color: #5d6b7c; font-weight: 600; }
.admb-sc-n .material-symbols-outlined { font-size: 16px; color: var(--accent, #d4f542); }
.admb-sc-sub, .admb-sc-empty { font-size: 11.5px; color: #7a8a9b; }
.admb-sc-empty { padding: 12px 12px 4px; font-style: italic; }
.admb-sc-head .adm-rmove { margin-left: auto; }
/* only shown once the slide actually overflows its 16:9 frame */
.admb-sc-over { display: none; align-items: center; gap: 4px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #f59e0b;
  background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.4); border-radius: 6px; padding: 1px 7px; }
.admb-sc-over .material-symbols-outlined { font-size: 13px; }
.admb-slidecard.admb-over .admb-sc-over { display: inline-flex; }
.admb-sc-body { padding: 10px 12px 2px; display: flex; flex-direction: column; gap: 10px; }
.admb-sc-body > .admb-block, .admb-sc-body > .admb-erow { margin: 0; }
.admb-sc-foot { padding: 4px 12px 10px; position: relative; }
.admb-addmenu { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 8px;
  border: 1px solid #2a3040; border-radius: 9px; background: #141820; }
/* the "+ Add slide" rail between cards — a hairline until hovered */
.admb-slidesep { display: flex; justify-content: center; padding: 5px 18px; }
.admb-slideadd { display: inline-flex; align-items: center; gap: 5px; background: none; cursor: pointer;
  border: 1px dashed #2a3040; border-radius: 20px; padding: 3px 12px; color: #6c7a8a;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; transition: all .12s; }
.admb-slideadd:hover { border-color: var(--accent, #d4f542); color: var(--accent, #d4f542); border-style: solid; }
.admb-slideadd .material-symbols-outlined { font-size: 15px; }
.admb-introcard { border-color: rgba(var(--accent-rgb, 212,245,66), .35); }
.admb-introfld { padding-top: 2px; }
.admb-introtgl { display: flex !important; align-items: center; gap: 7px; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.admb-introtgl input { width: 15px; height: 15px; accent-color: var(--accent, #d4f542); }
/* the intro's lede, in the continuous reader document */
.admb-lede { font-size: 13.5px; color: #9fb0c3; font-style: italic; margin: 0 0 12px; }
.admb-slide-body .admb-lede { font-size: inherit; margin-bottom: 1.4cqh; }

/* filmstrip of the section's slides, under the big preview */
.admb-filmstrip { display: flex; gap: 7px; overflow-x: auto; padding: 10px 2px 2px; scrollbar-width: thin; }
.admb-fthumb { flex: 0 0 140px; background: none; border: none; padding: 0; cursor: pointer; }
.admb-fthumb-in { display: flex; aspect-ratio: 16 / 9; container-type: size; overflow: hidden;
  background: #06080b; border: 1px solid #202634; border-radius: 6px; }
.admb-fthumb-in > .admb-slide { flex: 1; }
/* A thumbnail is a navigator, not a proof: drop the px floors that keep the
   big preview legible so the miniature keeps the slide's real PROPORTIONS
   instead of blowing the title up. (Overflow is measured in the full-size
   frame, never here — see measurePreviewOverflow.) */
.admb-fthumb-in .admb-slide-title { font-size: clamp(7px, 4.2cqw, 84px); }
.admb-fthumb-in .admb-slide h2 { font-size: clamp(6px, 2.75cqw, 50px); }
.admb-fthumb-in .admb-slide-kicker { font-size: clamp(4px, 1.15cqw, 16px); }
.admb-fthumb-in .admb-slide-body,
.admb-fthumb-in .admb-slide-sub { font-size: clamp(4px, 1.62cqw, 21px); }
/* the text-size slider, bottom-right beside the deck controls */
.admb-scale { display: flex; align-items: center; gap: 6px; padding-right: 4px; cursor: pointer; }
.admb-scale .material-symbols-outlined { font-size: 17px; }
.admb-scale input[type="range"] { width: 92px; accent-color: var(--accent, #d4f542); cursor: pointer; }
.admb-scale b { font-variant-numeric: tabular-nums; min-width: 34px; font-weight: 600; }
@media (max-width: 700px) { .admb-scale input[type="range"] { width: 60px; } .admb-scale b { display: none; } }
.admb-fthumb.on .admb-fthumb-in { border-color: var(--accent, #d4f542); }
.admb-fthumb.admb-over .admb-fthumb-in { border-color: rgba(245,158,11,.6); }
.admb-fthumb-n { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: #6c7a8a; padding-top: 3px; }
.admb-fthumb.on .admb-fthumb-n { color: var(--accent, #d4f542); }
/* presenter notes for the focused slide (editor pane) */
.admb-pnotes { display: flex; gap: 8px; margin-top: 10px; padding: 9px 11px; border-radius: 9px;
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.28); font-size: 12px; color: #d7c9a8; }
.admb-pnotes .material-symbols-outlined { font-size: 16px; color: #f59e0b; flex-shrink: 0; }
.admb-pnotes p { margin: 0 0 4px; line-height: 1.5; }
.admb-pnotes p:last-child { margin: 0; }

/* three-way "unsaved section" dialog (the shared confirm is two-button) */
.admb-dlg-backdrop { position: fixed; inset: 0; z-index: 4200; background: rgba(4,6,10,.62);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.admb-dlg { background: #111620; border: 1px solid #2a3040; border-radius: 12px; padding: 18px 20px;
  max-width: 420px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.admb-dlg-t { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #e8edf4; }
.admb-dlg-m { font-size: 13px; color: #9fb0c3; line-height: 1.55; margin: 8px 0 16px; }
.admb-dlg-in { width: 100%; margin-bottom: 14px; }
/* the editor's save state — sits left of Cancel/Save in the footer */
.admb-savestate { margin-right: auto; display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; min-height: 18px; }
.admb-savestate .material-symbols-outlined { font-size: 15px; }
.admb-savestate.dirty { color: #f59e0b; }
.admb-savestate.busy { color: #7a8a9b; }
.admb-savestate.ok { color: #22c55e; }
.admb-savestate.busy .material-symbols-outlined { animation: admb-spin 1.1s linear infinite; }
@keyframes admb-spin { to { transform: rotate(360deg); } }
.admb-dlg-b { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
body.light-mode .admb-dlg { background: #fff; border-color: #dde2ec; }
body.light-mode .admb-dlg-t { color: #1a2030; }
body.light-mode .admb-dlg-m { color: #667788; }

/* section editor — editor column + sticky live slide preview */
/* ── the section editor's head is where you SAVE from ──────────────────────
   Reported as "we have to scroll all the way down again to save": a section
   with a pit-box block is several screens tall and the only Save sat under all
   of it. The head sticks to the top of the scroller and carries the save state
   plus Save/Cancel, so the section can be saved from wherever you are in it.
   The foot keeps its labelled pair — at the end of a long form that is still
   where a hand lands. */
/* ── ...and it is ONE short row, with nothing showing above it ─────────────
   Reported with a screenshot: "the edit section bar is overlapping the thing
   — this should collapse, and the scrolling slides should not appear above it
   again." Two faults in one bar. It carried the paragraph explaining what a
   section is, so the pinned bar was ~85px of a screen the slides need — that
   paragraph now sits in the form BELOW it (.admb-edithint), where it scrolls
   away, and the bar keeps only what you act with: back · what you are editing ·
   the save state · Cancel · Save. The back button moved INTO it as well — it
   ran ADMB.cancelEdit() from above the panel, i.e. the same action the bar's
   own Cancel does, and a control that scrolls out of reach is a control you
   look for.
   The strip of slide that kept appearing above it is the SCROLLER'S PADDING:
   `top: 0` pins the bar to the scrollport's CONTENT box, and the padding above
   that box is still inside the padding box, so anything scrolling through it is
   painted. The gap is 28px on the Administration page, 20px in the event
   editor's Briefing tab and less again on a phone — so rather than measure it,
   ::before paints that gutter in the SURFACE'S OWN COLOUR: invisible at rest
   (it is the colour already there) and an opaque lid once the bar is stuck. */
.admb-edithead { position: sticky; top: 0; z-index: 6; background: #111620;
  border-radius: 10px 10px 0 0; align-items: center; flex-wrap: nowrap;
  padding: 9px 18px; gap: 10px; }
.admb-edithead::before { content: ''; position: absolute; left: 0; right: 0;
  bottom: 100%; height: 40px; background: var(--admb-gutter, #090b0e);
  pointer-events: none; }
.admb-edithead .adm-back { margin-bottom: 0; flex: 0 0 auto; }
.admb-edithead .adm-panel-title { flex: 1 1 auto; min-width: 0; }
.admb-edithead .admb-headt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admb-edithead-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.admb-edithead-acts .admb-savestate { margin-right: 0; white-space: nowrap; }
/* the explainer, in the form where it can be as long as it likes */
.admb-edithint { margin: 0; font-size: 11px; color: #7a8a9b; line-height: 1.5; }
body.light-mode .admb-edithead { background: #fff; }
body.light-mode .admb-edithint { color: #8899aa; }
/* the surface the editor sits ON, per host — what ::before paints the gutter */
.admb-editwrap { --admb-gutter: #090b0e; }
body.light-mode .admb-editwrap { --admb-gutter: #f0f3f8; }
#cal-ev-briefing .admb-editwrap { --admb-gutter: #141820; }
body.light-mode #cal-ev-briefing .admb-editwrap { --admb-gutter: #ffffff; }

.admb-editwrap { display: flex; gap: 16px; align-items: flex-start; }
.admb-editmain { flex: 1 1 auto; min-width: 0; margin: 0; }
/* `min-width: 0` is load-bearing: a flex item's automatic minimum is its
   MIN-CONTENT size, and the filmstrip's thumbs are `flex: 0 0 140px` in a
   nowrap row — so from the third slide on, the pane's minimum (147px per
   slide) overrode its 400px basis and ate the editor column beside it
   (7 slides left the editor 132px of a 1200px row). With the floor at 0 the
   pane keeps its 400px and the strip scrolls sideways, which is what its
   own `overflow-x: auto` was always for. */
.admb-editside { flex: 0 0 400px; min-width: 0; position: sticky; top: 12px; align-self: flex-start;
  border: 1px solid #2a3040; border-radius: 12px; background: #111620; padding: 12px; }
.admb-preview-head { display: flex; align-items: center; gap: 8px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: #9fb0c3; margin-bottom: 10px; }
.admb-preview-head .material-symbols-outlined { font-size: 18px; color: var(--c, #3b82f6); }
.admb-preview-tag { margin-left: auto; font-size: 10.5px; letter-spacing: .08em; color: #7a8a9b;
  text-transform: none; border: 1px solid #2a3040; border-radius: 20px; padding: 2px 9px; }
/* a true 16:9 miniature of the Present slide — a size container so the slide's
   own container-query typography scales down faithfully (see .admb-slide) */
.admb-preview-frame { position: relative; background: #06080b; border: 1px solid #202634; border-radius: 10px;
  aspect-ratio: 16 / 9; overflow: hidden; display: flex; container-type: size; }
.admb-preview-slide { flex: 1; }
.admb-preview-empty { opacity: .5; font-style: italic; }
.admb-preview-hint { font-size: 11px; color: #7a8a9b; line-height: 1.5; margin-top: 10px; }
/* content-overflows-a-slide warning (the preview clips like Present does) */
.admb-over-flag { position: absolute; left: 8px; bottom: 8px; display: none; align-items: center; gap: 5px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #f59e0b; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.4);
  border-radius: 6px; padding: 3px 8px; }
.admb-over-flag .material-symbols-outlined { font-size: 14px; }
.admb-preview-frame.admb-over .admb-over-flag { display: inline-flex; }
@media (max-width: 1024px) {
  /* Stacked, the wrap's own `align-items: flex-start` becomes a CROSS-axis
     rule: the panel sizes to its content instead of the column, so it spilled
     ~26px past a 390px screen and the briefing scrolled sideways. */
  .admb-editwrap { flex-direction: column; align-items: stretch; }
  .admb-editmain { width: 100%; max-width: 100%; }
  .admb-editside { flex-basis: auto; width: 100%; max-width: 100%; position: static; }
}

/* a pair of half-width blocks share a row (reader / present / preview) */
.admb-row { display: flex; gap: 18px; align-items: flex-start; }
.admb-row > .admb-col { flex: 1 1 0; min-width: 0; }
.admb-slide-body .admb-row { gap: 3cqw; margin: 0 0 2cqh; }
@media (max-width: 640px) { .admb-row { flex-direction: column; gap: 0; } }

/* ── shared block styles (slide + reader doc): headings, dividers, steps,
   checklists, key facts, quotes ─────────────────────────────────────────── */
.admb-bhead { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .3px;
  color: #eaf0f7; margin: 0 0 8px; font-size: 1.18em; }
.admb-bdiv { border: none; border-top: 1px solid #2a3444; margin: 4px 0 13px; }
.admb-steps { margin: 0 0 12px; padding-left: 1.4em; }
.admb-steps li { margin: 0 0 5px; }
.admb-checks { list-style: none; margin: 0 0 12px; padding: 0; }
.admb-checks li { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 6px; }
.admb-checks .material-symbols-outlined { color: var(--c, #3b82f6); flex-shrink: 0; }
.admb-keyfacts { margin: 0 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  border: 1px solid #2a3444; border-radius: 9px; overflow: hidden; }
.admb-keyfacts > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px;
  background: rgba(255,255,255,.02); }
.admb-keyfacts dt { color: #8b98a9; }
.admb-keyfacts dd { font-weight: 700; text-align: right; margin: 0; color: #e8edf4; }
@media (max-width: 640px) { .admb-keyfacts { grid-template-columns: 1fr; } }
.admb-quote { margin: 0 0 13px; padding: 4px 0 4px 16px; border-left: 3px solid var(--c, #3b82f6);
  font-weight: 600; line-height: 1.4; color: #eaf0f7; font-size: 1.22em; }
.admb-quote cite { display: block; font-style: normal; font-weight: 500; color: #8b98a9; margin-top: 6px; }

/* the rendered document (reader + blocks) */
.admb-doc { max-width: 720px; background: #111620; border: 1px solid #2a3040; border-radius: 12px;
  overflow: hidden; }
.admb-doc-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--c, #3b82f6) 30%, #111620), #111620);
  border-bottom: 1px solid #2a3040; padding: 22px 26px 16px; }
.admb-doc-kicker { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: #aab7c6; }
.admb-doc-hero h2 { margin: 4px 0 4px; font-family: 'Barlow Condensed', sans-serif; font-size: 26px;
  font-weight: 700; letter-spacing: .3px; }
.admb-doc-meta { font-size: 12px; color: #7a8a9b; }
.admb-doc-tools { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.admb-doc-sec { padding: 16px 26px 6px; border-bottom: 1px solid #1a212c; }
.admb-doc-sec:last-of-type { border-bottom: none; }
.admb-doc-sec h3 { margin: 0 0 10px; font-family: 'Barlow Condensed', sans-serif; font-size: 17px;
  font-weight: 700; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.admb-doc-num { color: var(--c, #3b82f6); font-size: 14px; }
.admb-doc-sec p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: #cfd8e3; }
.admb-doc-sec ul { margin: 0 0 10px; padding-left: 20px; font-size: 13.5px; line-height: 1.7; color: #cfd8e3; }
/* Sized in em from here down, for the reason the weather block is: the same
   markup is drawn in the reader document (a 13px font), on a 16:9 slide (a cqw
   font that scales with the room) and in a 140px filmstrip thumb. The icon was
   a flat 18px, so on a deck it stayed a speck beside type three times its size
   — reported as "the warning, info icon dont scale with text". The em values
   resolve to the old pixels at the reader's 13px, so nothing there moves. */
.admb-callout { display: flex; gap: .77em; align-items: flex-start; border-radius: .62em;
  padding: .77em 1em; font-size: 13px; line-height: 1.55; margin: 0 26px 12px; }
.admb-doc-sec .admb-callout { margin: 0 0 12px; }
.admb-callout .material-symbols-outlined { font-size: 1.38em; flex-shrink: 0; margin-top: .06em; }
.admb-callout.info { background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.3); color: #9ec5f8; }
.admb-callout.warn { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.35); color: #f5c76b; }
.admb-callout.danger { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.35); color: #f19999; }
.admb-fig { margin: 0 0 12px; }
.admb-fig img { max-width: 100%; border-radius: 8px; border: 1px solid #2a3040; }
.admb-fig figcaption { font-size: 11.5px; color: #7a8a9b; margin-top: 5px; }

/* ── the weather block ─────────────────────────────────────────────────────
   Sized in em throughout, deliberately: the same markup is drawn in the reader
   document (a px font), on a 16:9 slide (a cqw font that scales with the room)
   and in a 140px filmstrip thumbnail, and one relative scale covers all three
   with no second block of rules. */
.admb-wxfig { margin: 0 0 12px; }
.wxb-days { display: flex; gap: .5em; flex-wrap: wrap; }
.wxb-day { flex: 1 1 0; min-width: 5.6em; text-align: center; padding: .6em .4em .5em;
  border: 1px solid #2a3040; border-radius: .6em; background: rgba(255, 255, 255, .02); }
/* a seasonal average is NOT a forecast, and the card has to say so on sight */
.wxb-day.is-climate { border-style: dashed; opacity: .82; }
.wxb-dow { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: .08em; font-size: .95em; color: #cfd8e3; }
.wxb-date { font-size: .72em; color: #7a8a9b; }
.wxb-ico .material-symbols-outlined { font-size: 1.9em; line-height: 1.3; color: var(--c, #3b82f6); }
.wxb-sky { font-size: .74em; color: #9fb0c3; }
.wxb-t { margin-top: .15em; }
.wxb-t b { font-size: 1.25em; color: #e8edf4; }
.wxb-t span { font-size: .82em; color: #8b98a9; margin-left: .35em; }
.wxb-m { font-size: .7em; color: #7a8a9b; margin-top: .2em; }
.wxb-m i { font-style: normal; color: #9ec5f8; font-weight: 700; }
.wxb-m em { font-style: normal; display: block; }
.wxb-note { font-size: .68em; color: #7a8a9b; margin-top: .45em; }
.admb-wx-msg { font-size: .8em; color: #7a8a9b; padding: .5em 0; }
.admb-wx-empty .admb-wx-msg { border: 1px dashed #2a3040; border-radius: .6em; padding: .8em; }
/* the editor's "what this block is about" line */
.admb-wx-where { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #9fb0c3; }
.admb-wx-where .material-symbols-outlined { font-size: 16px; color: #7a8a9b; }
body.light-mode .wxb-day { border-color: #dbe1ea; background: rgba(0, 0, 0, .02); }
body.light-mode .wxb-dow { color: #2c3644; }
body.light-mode .wxb-t b { color: #1c2430; }
body.light-mode .wxb-sky { color: #55637a; }
body.light-mode .wxb-date, body.light-mode .wxb-m, body.light-mode .wxb-note,
body.light-mode .admb-wx-msg { color: #6b7788; }
#admb-present.light .wxb-day { border-color: #dbe1ea; background: rgba(0, 0, 0, .03); }
#admb-present.light .wxb-dow { color: #2c3644; }
#admb-present.light .wxb-t b { color: #1c2430; }
#admb-present.light .wxb-sky { color: #55637a; }
#admb-present.light .wxb-date, #admb-present.light .wxb-m,
#admb-present.light .wxb-note { color: #5f6b7a; }
.admb-tblwrap { overflow-x: auto; margin: 0 0 12px; }
.admb-tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.admb-tbl th, .admb-tbl td { padding: 7px 10px; text-align: left; border-bottom: 1px solid #1f2530; }
.admb-tbl th { color: #7a8a9b; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  font-family: 'Barlow Condensed', sans-serif; }
.admb-attach { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #2a3040;
  border-radius: 8px; padding: 7px 12px; font-size: 12.5px; color: #dce3ed; text-decoration: none;
  margin: 0 0 12px; }
.admb-attach:hover { border-color: var(--accent, #d4f542); }
.admb-attach .material-symbols-outlined { font-size: 16px; color: #7a8a9b; }

/* ── block alignment (b.align: centre / right; absent = left) ──────────────
   Offered only on blocks narrower than their column — a picture, a track map,
   a vault chip, a heading, a paragraph. One class does BOTH jobs, and both are
   needed: text-align moves the inline things (an <img>, a line of type), while
   the track map's box turns display:block the moment it takes the circuit's
   aspect ratio and only a margin can move that. align-self is the third case —
   in the EDITOR the block body is a flex column, so a stage centred any other
   way would still be stretched by align-items. */
.admb-al-c { text-align: center; }
.admb-al-r { text-align: right; }
.admb-al-c > .admb-map, .admb-al-c > img { margin-left: auto; margin-right: auto; }
.admb-al-r > .admb-map, .admb-al-r > img { margin-left: auto; margin-right: 0; }
.admb-map.admb-al-c, .admb-imgstage.admb-al-c { align-self: center; }
.admb-map.admb-al-r, .admb-imgstage.admb-al-r { align-self: flex-end; }
/* the chip is inline-flex, so it needs a box to hang the auto margins on */
.admb-attach.admb-al-c, .admb-attach.admb-al-r { display: flex; width: fit-content; margin-left: auto; }
.admb-attach.admb-al-c { margin-right: auto; }
/* Markers are stored as PERCENT of this box, so the box and the drawing must be
   the same rectangle. When the circuit's ratio is known, tmBoxStyle() writes it
   plus a width of min(--tm-maxw, --tm-maxh * ratio) inline, and the svg fills
   the box — so neither cap can letterbox the drawing inside its own box. Each
   surface only supplies the two caps. Uploaded artwork (no known ratio) keeps
   the shrink-wrapped <img> path.
   align-self matters: the editor's block card is a column flex container, and
   the default align-items:stretch would widen this box past the drawing. */
.admb-map { position: relative; display: inline-block; max-width: 100%; color: var(--c, #3b82f6);
  --track-sf: #ffffff; --tm-maxw: 340px; --tm-maxh: 200px; align-self: flex-start; }
.admb-map svg, .admb-map img { max-width: var(--tm-maxw); max-height: var(--tm-maxh);
  width: auto; height: auto; display: block; }
.admb-map[style*="aspect-ratio"] { display: block; }
.admb-map[style*="aspect-ratio"] > svg { width: 100%; height: 100%;
  max-width: none; max-height: none; }
/* the authoring copy is bigger — you are aiming pins at corners */
.admb-map-ed { cursor: crosshair; --tm-maxw: 100%; --tm-maxh: 320px; }
.admb-maptools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; }
.admb-maphint { font-size: 11px; color: #7a8a9b; flex: 1; min-width: 140px; }
.admb-hasmap { background: rgba(var(--accent-rgb, 212,245,66), .16); color: var(--accent, #d4f542);
  border-color: rgba(var(--accent-rgb, 212,245,66), .4); }
.admb-marker-ed { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 6px;
  cursor: grab; }
.admb-marker-ed:active { cursor: grabbing; }
.admb-mk-in { background: transparent; border: none; outline: none; color: inherit; font: inherit;
  min-width: 26px; padding: 0; cursor: text; }
.admb-mk-x { background: none; border: none; color: inherit; opacity: .65; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 1px; }
.admb-mk-x:hover { opacity: 1; }
.admb-marker { position: absolute; transform: translate(-50%, -100%); background: var(--c, #3b82f6);
  color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.admb-marker::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--c, #3b82f6); }
.admb-confirm { position: sticky; bottom: 0; padding: 14px 26px; background: #0f1318f2;
  border-top: 1px solid #2a3040; display: flex; align-items: center; gap: 9px; backdrop-filter: blur(4px); }
.admb-confirm.done { color: #22c55e; font-size: 13px; font-weight: 600; }
.admb-confirm.done .material-symbols-outlined { font-size: 18px; }

/* present mode — always-dark stage, unless the team set a deck background */
/* The stage IS the next-slide button, so a click that drifts a pixel is still a
   click — but the browser reads that drift as a drag and paints the whole slide
   blue. Nothing on a deck is there to be selected, so the overlay refuses
   selection outright; the presenter notes are the one thing a presenter might
   copy, so they keep it. */
#admb-present { position: fixed; inset: 0; z-index: 4000; background: var(--deck-bg, #06080b);
  display: flex; flex-direction: column; cursor: pointer;
  -webkit-user-select: none; user-select: none; }
#admb-present .admb-pnotes-bar { -webkit-user-select: text; user-select: text; }
/* Team branding on the cover: the mark above the title, partners along the
   bottom. Sized in container units like everything else on the slide, so the
   full-screen stage and the editor's miniature agree. */
.admb-cover-logo { max-height: calc(9cqh * var(--ls, 1)); max-width: calc(34cqw * var(--ls, 1));
  width: auto; object-fit: contain; margin-bottom: 2.4cqh; align-self: flex-start; }
.admb-cover-partners { position: absolute; left: 8cqw; right: 8cqw; bottom: 4cqh;
  display: flex; align-items: center; gap: 3cqw; flex-wrap: wrap; opacity: .92; }
.admb-cover-partners img { max-height: calc(5.5cqh * var(--ls, 1));
  max-width: calc(16cqw * var(--ls, 1)); width: auto; object-fit: contain; }
/* Content slides stay content: one small mark, bottom-right, never a strip. */
.admb-slide-mark { position: absolute; right: 4cqw; bottom: 3.4cqh;
  max-height: calc(4.4cqh * var(--ls, 1)); max-width: calc(14cqw * var(--ls, 1));
  width: auto; object-fit: contain; opacity: .5; pointer-events: none; }

/* The stage and the editor preview frame are BOTH size containers, so the slide
   sizes everything (padding + type) in container-query units — identical in the
   full-screen Present stage and the shrunk-down 16:9 editor preview. Low px
   floors keep the miniature legible; the caps hold the full-screen look. */
#admb-present .admb-stage { flex: 1; display: flex; container-type: size; }
/* position: relative on EVERY slide, not just the stage's — the cover's partner
   strip is absolutely positioned, and in an overview thumbnail (or the editor's
   filmstrip) it would otherwise escape to the viewport. */
.admb-slide { position: relative; flex: 1; display: flex; flex-direction: column;
  justify-content: flex-start; padding: 6cqh 8cqw; color: #e8edf4; overflow: hidden; }
/* The kicker is the slide's RUNNING HEAD — it names the section and where this
   slide sits inside it, so on a deck it belongs in the same place on every
   slide. It used to be the first item of a centred column, so it MOVED with the
   content it was labelling: a one-picture slide floated it into the middle of
   the stage, a full one pushed it to the top. It stays at the top-left now and
   everything else centres in the room below, inside .admb-slide-main — which is
   also how driver.html's presenter and the public deck have always laid a slide
   out (kicker, then a `flex: 1` body), so all three finally agree.
   `min-height: 0` is what lets the body shrink-and-clip rather than push. */
.admb-slide-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  justify-content: center; }
.admb-slide.cover h1 { font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(clamp(26px, 4.6cqw, 92px) * var(--sscale, 1));
  margin: 1cqh 0; border-left: .5cqw solid var(--c, #3b82f6); padding-left: 2cqw; }
.admb-slide h2 { font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(clamp(14px, 2.75cqw, 50px) * var(--sscale, 1));
  margin: .7cqh 0 2.4cqh; display: flex; align-items: center; gap: 1.4cqw; }
.admb-slide-kicker { font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(clamp(8px, 1.15cqw, 16px) * var(--sscale, 1));
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c, #3b82f6); }
.admb-slide-sub { font-size: calc(clamp(10px, 1.5cqw, 20px) * var(--sscale, 1)); color: #8b98a9;
  padding-left: 2.6cqw; }
/* Cover = title left, QR right. The code is sized to be read from the floor of
   the room (a scan needs roughly 10x the code's own width in distance), so it
   takes a third of the slide instead of sitting under the text as a thumbnail. */
.admb-slide.cover { flex-direction: row; align-items: center; gap: 4cqw; }
.admb-cover-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  justify-content: center; }
.admb-slide-qr { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: 1.4cqh; width: min(34cqw, calc(34cqh * 1.35)); }
.admb-slide-qr svg { width: 100%; height: auto; display: block; border-radius: 1cqw;
  background: #fff; }
.admb-slide-qr span { font-size: clamp(9px, 1.25cqw, 17px); color: #8b98a9; line-height: 1.5;
  text-align: center; }
/* A phone/narrow stage can't afford two columns — fall back to the stacked cover. */
@container (max-aspect-ratio: 1/1) {
  .admb-slide.cover { flex-direction: column; justify-content: center; }
  .admb-cover-txt { flex: 0 0 auto; }
  .admb-slide-qr { width: min(60cqw, calc(38cqh * 1.0)); margin-top: 3cqh; }
}
.admb-slide-body { font-size: calc(clamp(8.5px, 1.62cqw, 21px) * var(--sscale, 1)); line-height: 1.6;
  max-width: 76cqw; overflow: hidden; }
.admb-slide-body p, .admb-slide-body ul, .admb-slide-body ol { color: #cfd8e3; margin: 0 0 1.4cqh; }
.admb-slide-body ul, .admb-slide-body ol { padding-left: 1.6em; }
.admb-slide-body .admb-callout { margin: 0 0 1.4cqh; font-size: inherit; }
.admb-slide-body .admb-tbl, .admb-slide-body .admb-keyfacts { font-size: inherit; }
.admb-slide-body .admb-bhead, .admb-slide-body .admb-quote { margin-bottom: 1cqh; }
/* A slide picture TAKES the room it is given, it does not merely refuse to
   exceed it. These were max-* caps only, and a cap can only ever shrink — so a
   1200px photo on a 2300px stage painted at 1200px (a third of the slide) while
   the editor's 16:9 miniature, where the same cap genuinely bound, showed it
   filling the slide. Same rule, opposite outcomes; the deck looked broken.
   The width is DRIVEN, and it is driven from the picture's own ratio (--r,
   published by the img's own onload) — the same shape tmBoxStyle() already uses
   for a track map, and the only shape that fills both axes without distorting.
   An explicit width beside a max-height does NOT fall back to the ratio: the
   box keeps the width and takes the cap's height, so a 4:3 photo measures
   558x160 in Chromium. Hence the ratio has to be known, not clamped for.
   The caps stay as the belt-and-braces (and as the answer before --r lands):
   they ride --imgscale so the slider isn't dead until the picture drops under
   the cap, and the outer min() clamps keep it inside the slide at any factor —
   72cqh because the kicker is out of the flow now and only the title is above
   it, 76cqw because that is the body column's own max-width (wider would clip
   at its overflow:hidden).
   The 100% term is the one that matters inside a PAIR: cqw is measured against
   the whole slide, so a half-width picture whose cap beat its own column used
   to spill straight over the block beside it. It can never be wider than the
   box it is in now — above that the COLUMN grows instead (blocksHtml gives a
   scaled block its share of the row), so the neighbour moves aside. */
.admb-slide-body .admb-fig img {
  --fig-h: min(calc(40cqh * var(--imgscale, 1)), 72cqh);
  --fig-w: min(calc(62cqw * var(--imgscale, 1)), 76cqw, 100%);
  width: min(var(--fig-w), calc(var(--fig-h) * var(--r, 1.6)));
  height: auto; max-height: var(--fig-h); max-width: var(--fig-w); }
.admb-slide-body .admb-map { --tm-maxw: 62cqw; --tm-maxh: 40cqh; }
.admb-present-nav { position: fixed; bottom: 16px; right: 18px; display: flex; align-items: center;
  gap: 8px; color: #8b98a9; font-size: 12px; cursor: default; z-index: 2; }
/* a section's intro slide: its name, big, with an optional lede */
.admb-slide.intro { justify-content: center; }
/* the px floor has to be low: this same slide is drawn into a ~140px
   filmstrip thumbnail, where 4.2cqw is under 6px */
.admb-slide-title { font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(clamp(11px, 4.2cqw, 84px) * var(--sscale, 1));
  margin: 1cqh 0; border-left: .5cqw solid var(--c, #3b82f6); padding-left: 2cqw;
  overflow: hidden; }
/* presenter notes strip — never part of the slide, never in a reader payload */
/* right padding reserves the fixed nav's strip, so a long note never runs
   underneath the prev/next buttons */
.admb-pnotes-bar { display: none; align-items: flex-start; gap: 10px; padding: 12px 260px 12px 22px;
  background: #0b0f14; border-top: 1px solid #1c222c; color: #d7c9a8; font-size: 14px;
  max-height: 26vh; overflow-y: auto; cursor: default; }
.admb-pnotes-bar .material-symbols-outlined { font-size: 19px; color: #f59e0b; flex-shrink: 0; }
.admb-pnotes-bar p { margin: 0 0 6px; line-height: 1.55; }
#admb-present.with-notes .admb-pnotes-bar { display: flex; }
/* slide overview (O / Esc) — the same slide markup in a grid of size containers.
   --sscale is RESET here: the presenter's text-size slider exists to make the
   projected stage readable across the room, but a 230px thumbnail rendered at
   180% just overflows its cell. A thumbnail is navigation, always at its own
   natural miniature scale. The backdrop is opaque for the same reason — a
   scaled-up stage ghosting through the grid is unreadable. */
.admb-pgrid { --sscale: 1; display: none; position: fixed; inset: 0; z-index: 1; background: #06080b;
  overflow-y: auto; padding: 26px 22px 74px; cursor: default;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; align-content: start; }
#admb-present.overview .admb-pgrid { display: grid; }
.admb-pgcell { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.admb-pgcell-in { display: flex; aspect-ratio: 16 / 9; container-type: size; overflow: hidden;
  background: #06080b; border: 1px solid #202634; border-radius: 8px; }
.admb-pgcell-in > .admb-slide { flex: 1; }
.admb-pgcell:hover .admb-pgcell-in { border-color: #3a4456; }
.admb-pgcell.on .admb-pgcell-in { border-color: var(--accent, #d4f542); }
.admb-pgcell-n { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 12px;
  letter-spacing: .07em; text-transform: uppercase; color: #7a8a9b; padding-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#admb-present.light .admb-pgrid { background: #f6f8fc; }
#admb-present.light .admb-pgcell-in { background: #f6f8fc; border-color: #dde2ec; }
#admb-present.light .admb-pgcell-n { color: #5f6b7a; }
#admb-present.light .admb-pnotes-bar { background: #fffbef; border-top-color: #e8ecf2; color: #7c5a12; }

/* draft preview — the cover QR is replaced by a "not published" note, plus a
   persistent corner flag so later slides still read as a draft */
.admb-slide-qr.draft { flex-direction: column; align-items: flex-start; gap: 10px;
  width: min(30cqw, 380px); }
.admb-slide-badge { display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(12px, 1.4vw, 16px);
  letter-spacing: .12em; text-transform: uppercase; color: #f59e0b;
  border: 1px dashed #f59e0b; border-radius: 6px; padding: 4px 10px; }
/* The flag row: draft + car-slice chips share one fixed corner, side by side. */
.admb-present-flags { position: fixed; top: 14px; left: 18px; z-index: 1; display: flex;
  gap: 8px; pointer-events: none; }
.admb-present-flag { display: flex;
  align-items: center; gap: 6px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #f59e0b;
  background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .4);
  border-radius: 6px; padding: 5px 10px 5px 8px; pointer-events: none; }
.admb-present-flag .material-symbols-outlined { font-size: 16px; }
#admb-present.light .admb-present-flag { background: rgba(245, 158, 11, .1); }

/* present mode — light stage (toggled per session, defaults to app theme) */
#admb-present.light { background: var(--deck-bg, #f6f8fc); }
#admb-present.light .admb-slide { color: #1a2030; }
#admb-present.light .admb-slide-sub,
#admb-present.light .admb-slide-qr span,
#admb-present.light .admb-present-nav { color: #5f6b7a; }
#admb-present.light .admb-slide-body p, #admb-present.light .admb-slide-body ul,
#admb-present.light .admb-slide-body ol, #admb-present.light .admb-bhead,
#admb-present.light .admb-quote, #admb-present.light .admb-keyfacts dd { color: #2c3644; }
#admb-present.light .admb-keyfacts > div { background: rgba(0,0,0,.03); }
#admb-present.light .admb-keyfacts, #admb-present.light .admb-bdiv { border-color: #dbe1ea; }
#admb-present.light .admb-slide-qr svg { box-shadow: 0 0 0 1px #dde2ec; }
#admb-present.light .admb-present-nav .adm-btn { background: #fff; border-color: #dde2ec; color: #1a2030; }
/* callout / table text is tuned for a dark stage — darken it for the light stage */
#admb-present.light .admb-callout.info { color: #1d4ed8; }
#admb-present.light .admb-callout.warn { color: #b45309; }
#admb-present.light .admb-callout.danger { color: #b91c1c; }
#admb-present.light .admb-tbl th { color: #5f6b7a; }
#admb-present.light .admb-tbl th, #admb-present.light .admb-tbl td { border-bottom-color: #e8ecf2; }
/* The map's track lines follow the STAGE, not the app: the base colour is white
   (a dark stage) and body.light-mode darkens it, so a light deck under a dark
   app drew white-on-white and a dark deck under a light app the reverse. */
#admb-present.light .admb-map { --track-sf: #1a2030; }

/* ── the deck is pinned dark while the app is light ────────────────────────
   Reported as "in dark mode headings are almost invisible": the deck's theme is
   its own (pm_admb_present_theme), but the block styles are shared with the
   READER document, so every unscoped `body.light-mode .admb-*` rule inherited
   straight into a dark stage — a #1a2030 heading on a #06080b slide. Each rule
   below restores that block's own dark value; an id outranks body.light-mode,
   so source order is not what is holding this up. Same wart, same shape as the
   pit-box palette vars further down. */
#admb-present:not(.light) .admb-bhead,
#admb-present:not(.light) .admb-quote { color: #eaf0f7; }
#admb-present:not(.light) .admb-slide-body ol { color: #cfd8e3; }
#admb-present:not(.light) .admb-lede { color: #9fb0c3; }
#admb-present:not(.light) .admb-bdiv { border-top-color: #2a3444; }
#admb-present:not(.light) .admb-keyfacts { border-color: #2a3444; }
#admb-present:not(.light) .admb-keyfacts > div { background: rgba(255,255,255,.02); }
#admb-present:not(.light) .admb-keyfacts dt { color: #8b98a9; }
#admb-present:not(.light) .admb-keyfacts dd { color: #e8edf4; }
#admb-present:not(.light) .admb-tbl th { color: #7a8a9b; }
#admb-present:not(.light) .admb-tbl th,
#admb-present:not(.light) .admb-tbl td { border-bottom-color: #1f2530; }
#admb-present:not(.light) .admb-map { --track-sf: #ffffff; }
#admb-present:not(.light) .wxb-day { border-color: #2a3040; background: rgba(255,255,255,.02); }
#admb-present:not(.light) .wxb-dow { color: #cfd8e3; }
#admb-present:not(.light) .wxb-t b { color: #e8edf4; }
#admb-present:not(.light) .wxb-sky { color: #9fb0c3; }
#admb-present:not(.light) .wxb-date,
#admb-present:not(.light) .wxb-m,
#admb-present:not(.light) .wxb-note,
#admb-present:not(.light) .admb-wx-msg { color: #7a8a9b; }

/* ══════════════════════════════════════════════════════════════════════════
   Several briefings per event, and a band per car.
   .admb-slot*  = one briefing in the event's list (design record:
                  tools/harness/briefing_slots_mockup.html)
   .admb-band*  = the General / per-car bands inside one briefing. The car band
                  wears the amber the per-car scope chip already uses, so
                  "confidential to this car" reads the same everywhere.
   ══════════════════════════════════════════════════════════════════════════ */
.admb-slotrow { cursor: pointer; align-items: center; }
.admb-slotrow:hover { background: #141820; }
.admb-slottime { width: 46px; flex-shrink: 0; border-radius: 8px; background: #0f1318;
  border: 1px solid #2a3040; padding: 3px 0 4px; display: flex; flex-direction: column;
  align-items: center; font-family: 'Barlow Condensed', sans-serif; }
.admb-slottime b { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: #6c7a8a; }
.admb-slottime i { font-style: normal; font-size: 13.5px; font-weight: 700; color: #cdd6e0;
  font-variant-numeric: tabular-nums; }
.admb-slottime.unscheduled i { font-size: 15px; color: #3a4555; }
.admb-audchip { font-family: 'Barlow Condensed', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; border-radius: 4px; padding: 1.5px 6px;
  display: inline-flex; align-items: center; gap: 4px; }
.admb-audchip .material-symbols-outlined { font-size: 12px; }
.admb-audchip.crew { background: rgba(59,130,246,.12); color: #60a5fa; border: 1px solid rgba(59,130,246,.4); }
.admb-audchip.driver { background: rgba(168,85,247,.12); color: #c084fc; border: 1px solid rgba(168,85,247,.4); }
.admb-slotday { display: flex; align-items: center; gap: 9px; padding: 11px 18px 5px;
  border-top: 1px solid #1f2530; }
.admb-slotday b { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: #8b98a9; }
.admb-slotday span { flex: 1; height: 1px; background: #1a212c; }
.admb-slotday .adm-chip { flex: 0 0 auto; }

/* car bands inside one briefing */
.admb-band { border-top: 1px solid #1f2530; }
.admb-band-head { display: flex; align-items: center; gap: 10px; padding: 9px 18px;
  background: #0e131b; flex-wrap: wrap; }
.admb-band.car .admb-band-head { background: rgba(245,158,11,.045);
  box-shadow: inset 3px 0 0 0 rgba(245,158,11,.5); }
.admb-band.gen .admb-band-head { box-shadow: inset 3px 0 0 0 #2a3040; }
.admb-band-nm { font-family: 'Barlow Condensed', sans-serif; font-size: 13.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: #cdd6e0; display: flex; align-items: center; gap: 7px; }
.admb-band.car .admb-band-nm { color: #fbbf24; }
.admb-band-nm .material-symbols-outlined { font-size: 16px; }
.admb-band-sub { font-size: 11.5px; color: #7a8a9b; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.admb-band-count { margin-left: auto; font-family: 'Barlow Condensed', sans-serif; font-size: 11px;
  font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: #6c7a8a; }
.admb-band-empty { padding: 12px 18px 14px; border-top: 1px solid #1f2530;
  font-size: 12.5px; color: #7a8a9b; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admb-band .adm-round { padding-left: 30px; }
/* per-car sign-off: the one thing a band head has to answer before a publish */
.admb-rdy { display: inline-flex; align-items: center; gap: 4px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.admb-rdy .material-symbols-outlined { font-size: 13px; }
.admb-rdy.ok { background: rgba(34,197,94,.13); color: #4ade80; border: 1px solid rgba(34,197,94,.38); }
.admb-rdy.warn { background: rgba(245,158,11,.13); color: #fbbf24; border: 1px solid rgba(245,158,11,.4); }
.admb-rdy.quiet { background: #141820; color: #7a8a9b; border: 1px solid #2a3040; }
.admb-rdybtn { padding: 3px 9px; }
/* A car's OWN version — what its people are actually holding. Deliberately the
   accent colour rather than a state colour: it is a fact, not a warning. */
.admb-carver { display: inline-flex; align-items: center; gap: 4px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  border-radius: 5px; padding: 2px 7px; white-space: nowrap;
  background: rgba(59,130,246,.13); color: #7fb0ff; border: 1px solid rgba(59,130,246,.36); }
.admb-carver .material-symbols-outlined { font-size: 13px; }
/* Public, but the draft has moved past it — dashed, the app's "not the whole story" mark. */
.admb-carver.behind { border-style: dashed; opacity: .8; }
.admb-carver.none { background: #141820; color: #7a8a9b; border: 1px solid #2a3040; }
.admb-doc-mycars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adm-round.admb-pubheld { opacity: .62; }
.admb-bandtoggle { background: none; border: none; color: #3a4555; cursor: pointer; padding: 2px; display: flex; }
.admb-bandtoggle .material-symbols-outlined { font-size: 18px; transition: transform .15s; }
.admb-band.closed .admb-bandtoggle .material-symbols-outlined { transform: rotate(-90deg); }
.admb-band.closed .adm-round, .admb-band.closed .admb-band-empty { display: none; }

/* "Start from…" sheet */
.admb-startopt { display: flex; align-items: center; gap: 11px; padding: 10px 18px;
  border-top: 1px solid #1f2530; cursor: pointer; }
.admb-startopt:hover { background: #141820; }
.admb-startopt.on { background: rgba(var(--accent-rgb,212,245,66),.06);
  box-shadow: inset 3px 0 0 0 var(--accent,#d4f542); }
.admb-startopt .material-symbols-outlined { font-size: 19px; color: #7a8a9b; }
.admb-startopt.on .material-symbols-outlined { color: var(--accent,#d4f542); }
.admb-startinfo { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.admb-startinfo b { font-size: 13px; font-weight: 600; }
.admb-startinfo span { font-size: 11.5px; color: #7a8a9b; }
.admb-newgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 12px 18px 4px;
  border-top: 1px solid #1f2530; }
@media(max-width:700px){ .admb-newgrid { grid-template-columns: 1fr; } }
body.light-mode .admb-slottime { background: #f0f3f8; border-color: #dde2ec; }
body.light-mode .admb-slottime i { color: #1a2030; }
body.light-mode .admb-slottime b { color: #8899aa; }
body.light-mode .admb-slotday span { background: #e8ecf2; }
body.light-mode .admb-band-head { background: #f4f6fb; }
body.light-mode .admb-band.gen .admb-band-head { box-shadow: inset 3px 0 0 0 #dde2ec; }
body.light-mode .admb-band-nm { color: #1a2030; }
body.light-mode .admb-band.car .admb-band-nm { color: #b45309; }
body.light-mode .admb-band, body.light-mode .admb-band-empty,
body.light-mode .admb-startopt, body.light-mode .admb-newgrid { border-top-color: #e8ecf2; }
body.light-mode .admb-slotrow:hover, body.light-mode .admb-startopt:hover { background: #f4f6fb; }
body.light-mode .admb-startinfo b { color: #1a2030; }

/* phone: the day/time badge and the band head stack rather than squeeze */
@media (max-width: 700px) {
  .admb-band-head { row-gap: 6px; }
  .admb-band-count { margin-left: 0; }
  .admb-band .adm-round { padding-left: 18px; }
  .admb-slotrow .adm-chip { margin-left: auto; }
}

/* ── standings (.adms-) ─────────────────────────────────────────────────── */
.adms-pts { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 18px; border-top: 1px solid #1f2530; }
.adms-pt { border: 1px solid #2a3040; background: #0f1318; border-radius: 8px; padding: 6px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; }
.adms-pt b { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; color: #7a8a9b; letter-spacing: .8px; }
.adms-pt span { font-size: 14px; font-weight: 700; }
.adms-pt input { width: 46px; text-align: center; padding: 3px 4px; font-size: 13px; }
.adms-tgl { position: relative; display: inline-block; width: 34px; height: 19px; flex-shrink: 0; }
.adms-tgl input { opacity: 0; width: 0; height: 0; }
.adms-tgl i { position: absolute; inset: 0; border-radius: 999px; background: #1f2530; border: 1px solid #2a3040;
  transition: background .15s; }
.adms-tgl i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: #7a8a9b; transition: transform .15s, background .15s; }
.adms-tgl input:checked + i { background: rgba(var(--accent-rgb, 212,245,66), .25); border-color: var(--accent, #d4f542); }
.adms-tgl input:checked + i::after { transform: translateX(15px); background: var(--accent, #d4f542); }
.adms-tgl input:disabled + i { opacity: .6; }
.adms-chips { flex-wrap: wrap; gap: 7px; }
.adms-rchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #2a3040;
  background: #141820; color: #7a8a9b; border-radius: 999px; padding: 5px 13px; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.adms-rchip .material-symbols-outlined { font-size: 13px; color: #22c55e; }
.adms-rchip:hover { border-color: var(--accent, #d4f542); color: #dce3ed; }
.adms-rchip.sel { background: rgba(var(--accent-rgb, 212,245,66), .14); border-color: var(--accent, #d4f542);
  color: var(--accent, #d4f542); }
.adms-rchip.due { border-color: rgba(245,158,11,.5); color: #f59e0b; }
.adms-tblwrap { overflow-x: auto; border-top: 1px solid #1f2530; }
.adms-tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.adms-tbl th, .adms-tbl td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #1a212c; }
.adms-tbl th { color: #7a8a9b; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  font-family: 'Barlow Condensed', sans-serif; white-space: nowrap; }
.adms-tbl th.adms-num { text-align: right; }
.adms-tbl .form-input { padding: 5px 8px; font-size: 12.5px; }
.adms-pos { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: #7a8a9b; }
.adms-num { text-align: right; font-variant-numeric: tabular-nums; }
.adms-num.dropped { text-decoration: line-through; color: #3a4555; }
.adms-tot { text-align: right; font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.adms-raw { color: #7a8a9b; font-weight: 400; font-size: 11px; margin-left: 5px; }
.adms-tbl tr.lead td { background: rgba(var(--accent-rgb, 212,245,66), .05); }
.adms-carnum { display: inline-grid; place-items: center; min-width: 26px; height: 20px; border-radius: 5px;
  background: #1a212c; border: 1px solid #2a3040; font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 11px; margin-right: 7px; padding: 0 4px; }
.adms-hint { display: block; font-size: 10.5px; color: #7a8a9b; margin-top: 2px; }
.adms-bonus { white-space: nowrap; }
.adms-bonus label { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px;
  font-size: 11.5px; color: #7a8a9b; cursor: pointer; }
.adms-clinch { display: flex; align-items: flex-start; gap: 9px; margin: 0 18px 4px; padding: 10px 13px;
  border: 1px solid rgba(59,130,246,.3); background: rgba(59,130,246,.07); border-radius: 8px;
  font-size: 12.5px; line-height: 1.55; color: #b9d3f7; }
.adms-clinch.won { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); color: #a7e3bf; }
.adms-clinch .material-symbols-outlined { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.adms-chart { padding: 12px 18px 14px; border-top: 1px solid #1f2530; --adms-surface: #111620; }
.adms-chart svg { width: 100%; max-width: 640px; height: auto; display: block; }
.adms-grid { stroke: #1f2530; stroke-width: 1; }
.adms-axis { fill: #7a8a9b; font-size: 9px; font-family: 'Barlow', sans-serif; }
.adms-slabel { fill: #aab7c6; font-size: 9.5px; font-family: 'Barlow', sans-serif; }
.adms-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.adms-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #aab7c6; }
.adms-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ── documents (.admd-) ─────────────────────────────────────────────────── */
.admd-ico { width: 32px; height: 32px; border-radius: 8px; background: #0f1318; border: 1px solid #2a3040;
  display: grid; place-items: center; flex-shrink: 0; }
.admd-ico .material-symbols-outlined { font-size: 17px; color: #7a8a9b; }
.admd-hist { background: #0d1116; border-top: 1px dashed #1f2530; }
.admd-add { border-top: 1px solid #1f2530; }
.adm-btn.icon-only { padding: 6px; }
.adm-btn.icon-only .material-symbols-outlined { font-size: 15px; }
a.adm-btn { text-decoration: none; }

/* ── contacts (.admc-) ──────────────────────────────────────────────────── */
.admc-role { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--accent, #d4f542); opacity: .85; }
.admc-acts { display: inline-flex; gap: 5px; align-items: center; flex-shrink: 0; }

/* ── light mode ─────────────────────────────────────────────────────────── */
body.light-mode .adm-att { background: #fff; border-color: #dde2ec; color: #1a2030; }
body.light-mode .adm-att-ch, body.light-mode .admb-secdesc, body.light-mode .adms-hint { color: #8899aa; }
body.light-mode .admb-secby, body.light-mode .admb-lastedit { color: #8899aa; }
body.light-mode .admb-secby .material-symbols-outlined { color: #a8b4c2; }
body.light-mode .admb-chatrail { background: #fff; border-color: #dde2ec; }
body.light-mode .admb-chathead { color: #556677; border-bottom-color: #eef1f6; }
body.light-mode .admb-chattag { color: #8899aa; border-color: #dde2ec; }
body.light-mode .adm-dot { background: #e8ecf2; border-color: #dde2ec; }
body.light-mode .adm-evpick-row:hover, body.light-mode .admb-roundrow:hover { background: #f4f6fb; }
body.light-mode .admb-block, body.light-mode .adms-pt, body.light-mode .admd-ico { background: #f4f6fb; border-color: #dde2ec; }
body.light-mode .admb-bprev { color: #667788; }
body.light-mode .admb-pill { background: #f4f6fb; border-color: #dde2ec; color: #667788; }
body.light-mode .admb-state.base { background: #eef1f7; border-color: #dde2ec; color: #8899aa; }
body.light-mode .admb-state.hidden { background: #eef1f7; border-color: #d5dbe6; color: #8899aa; }
body.light-mode .admb-sechidden .admb-sectitle { text-decoration-color: #b3bccb; }
body.light-mode .admb-doc, body.light-mode .adm-en-picklist { background: #fff; border-color: #dde2ec; }
body.light-mode .admb-doc-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--c, #3b82f6) 14%, #fff), #fff);
  border-bottom-color: #e8ecf2; }
body.light-mode .admb-doc-sec { border-bottom-color: #eef1f7; }
body.light-mode .admb-doc-sec p, body.light-mode .admb-doc-sec ul { color: #3a4555; }
body.light-mode .admb-confirm { background: #ffffffe8; border-top-color: #e8ecf2; }
body.light-mode .admb-tbl th, body.light-mode .adms-tbl th { color: #8899aa; }
body.light-mode .admb-tbl td, body.light-mode .adms-tbl td { border-bottom-color: #eef1f7; }
/* live preview mirrors the present stage, which defaults to the app theme */
body.light-mode .admb-editside { background: #fff; border-color: #dde2ec; }
body.light-mode .admb-preview-head { color: #556677; }
body.light-mode .admb-preview-frame { background: #f6f8fc; border-color: #e2e7f0; }
body.light-mode .admb-preview-tag { color: #8899aa; border-color: #dde2ec; }
/* Scoped to the whole pane, not just the focused slide: the filmstrip draws the
   same .admb-slide markup, and a thumbnail with dark-stage type on a white card
   is unreadable. */
body.light-mode .admb-fthumb-in { background: #f6f8fc; border-color: #e2e7f0; }
body.light-mode .admb-editside .admb-slide { color: #1a2030; }
body.light-mode .admb-editside .admb-slide-body p,
body.light-mode .admb-editside .admb-slide-body ul { color: #2c3644; }
body.light-mode .admb-editside .admb-slide-sub { color: #5f6b7a; }
body.light-mode .admb-editside .admb-callout.info { color: #1d4ed8; }
body.light-mode .admb-editside .admb-callout.warn { color: #b45309; }
body.light-mode .admb-editside .admb-callout.danger { color: #b91c1c; }
body.light-mode .admb-editside .admb-keyfacts > div { background: rgba(0,0,0,.03); }
body.light-mode .admb-editside .admb-keyfacts,
body.light-mode .admb-editside .admb-bdiv { border-color: #dbe1ea; }
body.light-mode .admb-editside .admb-tbl th { color: #5f6b7a; }
body.light-mode .admb-editside .admb-tbl th,
body.light-mode .admb-editside .admb-tbl td { border-bottom-color: #e8ecf2; }
/* audience switch */
body.light-mode .admb-docrow:hover { background: #f5f7fb; }
body.light-mode .admb-docrow, body.light-mode .admb-dsecrow,
body.light-mode .admb-shareurl { border-top-color: #e8ecf2; }
body.light-mode .admb-docrow-main b, body.light-mode .admb-dsec-main b { color: #1a2030; }
body.light-mode .admb-docrow-sub, body.light-mode .admb-dsec-sub { color: #8899aa; }
body.light-mode .admb-shareurl code { background: #f5f7fb; border-color: #e8ecf2; color: #6b7a8d; }
body.light-mode .admb-audtabs { background: #eef1f7; border-color: #dde2ec; }
body.light-mode .admb-audtab { color: #667788; }
body.light-mode .admb-audtab:hover { color: #2c3644; }
body.light-mode .admb-audhint { color: #8899aa; }
/* new block types (reader doc + preview slide share these) */
body.light-mode .admb-bhead, body.light-mode .admb-quote { color: #1a2030; }
body.light-mode .admb-slide-body ol, body.light-mode .admb-doc-sec ol,
body.light-mode .admb-doc-sec .admb-checks, body.light-mode .admb-editside .admb-slide-body ol { color: #3a4555; }
body.light-mode .admb-bdiv { border-top-color: #e2e7f0; }
body.light-mode .admb-keyfacts { border-color: #dde2ec; }
body.light-mode .admb-keyfacts > div { background: #f6f8fc; }
body.light-mode .admb-keyfacts dt { color: #667788; }
body.light-mode .admb-keyfacts dd { color: #1a2030; }
body.light-mode .admb-heading-in { color: #1a2030; }
body.light-mode .adms-tblwrap, body.light-mode .adms-pts, body.light-mode .adms-chart,
body.light-mode .admb-blocks, body.light-mode .admd-add, body.light-mode .adm-evpick,
body.light-mode .adm-import, body.light-mode .adm-ready-row { border-top-color: #e8ecf2; }
body.light-mode .adms-rchip { background: #f4f6fb; border-color: #dde2ec; color: #667788; }
body.light-mode .adms-carnum { background: #eef1f7; border-color: #dde2ec; }
body.light-mode .adms-num.dropped { color: #b9c2cf; }
body.light-mode .adms-grid { stroke: #e8ecf2; }
body.light-mode .adms-chart { --adms-surface: #ffffff; }
body.light-mode .adms-slabel { fill: #556677; }
body.light-mode .admd-hist { background: #f8fafc; border-top-color: #e8ecf2; }
body.light-mode .adms-tgl i { background: #e8ecf2; border-color: #dde2ec; }
body.light-mode .adm-msel > summary { background: #fff; border-color: #dde2ec; }
body.light-mode .adm-msel-sum { color: #1a2030; }
body.light-mode .adm-msel-pop { background: #fff; border-color: #dde2ec; }
body.light-mode .adm-msel-opt { color: #1a2030; }
body.light-mode .adm-msel-opt:hover { background: #f4f6fb; }
body.light-mode .adm-crewsync { border-top-color: #e8ecf2; }
/* confidential per-car scope — the chips were dark pills on a white panel */
body.light-mode .admb-carchip { background: #f4f6fb; border-color: #dde2ec; color: #667788; }
body.light-mode .admb-carchip-id { color: #8899aa; }
body.light-mode .admb-carchip:hover { border-color: #b9c2cf; color: #1a2030; }
body.light-mode .admb-carchip.on { background: rgba(180,83,9,.10); border-color: rgba(180,83,9,.45); color: #b45309; }
body.light-mode .admb-carchip.on .admb-carchip-id { color: rgba(180,83,9,.75); }
body.light-mode .admb-carscope { background: rgba(180,83,9,.10); border-color: rgba(180,83,9,.4); color: #b45309; }
body.light-mode .admb-carscope-hint { color: #b45309; }
body.light-mode .admb-rdy.quiet { background: #f1f4f8; color: #64748b; border-color: #d7dde6; }
body.light-mode .admb-rdy.ok { background: rgba(22,163,74,.1); color: #15803d; border-color: rgba(22,163,74,.35); }
body.light-mode .admb-rdy.warn { background: rgba(217,119,6,.1); color: #b45309; border-color: rgba(217,119,6,.35); }
body.light-mode .admb-carver { background: rgba(37,99,235,.1); color: #1d4ed8; border-color: rgba(37,99,235,.32); }
body.light-mode .admb-carver.none { background: #f1f4f8; color: #64748b; border-color: #d7dde6; }
body.light-mode .admb-carscope-note { color: #8899aa; }
/* the track line takes the championship colour; only the S/F tick needs a theme */
body.light-mode .admb-map { --track-sf: #1a2030; }
body.light-mode .admb-maphint { color: #8899aa; }
/* slide cards + filmstrip */
body.light-mode .admb-slidecard { background: #f8fafc; border-color: #e2e7f0; }
body.light-mode .admb-sc-head { border-bottom-color: #e8ecf2; }
body.light-mode .admb-sc-n { color: #556677; }
body.light-mode .admb-sc-n i, body.light-mode .admb-sc-sub, body.light-mode .admb-sc-empty { color: #8899aa; }
body.light-mode .admb-addmenu { background: #fff; border-color: #dde2ec; }
body.light-mode .admb-slideadd { border-color: #dde2ec; color: #8899aa; }
body.light-mode .admb-fthumb-n { color: #8899aa; }
body.light-mode .admb-lede { color: #667788; }
body.light-mode .admb-pnotes { background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.3); color: #7c5a12; }
body.light-mode .admb-pnotes .material-symbols-outlined { color: #b45309; }

/* ── phone (≤700px) ─────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .adm-subnav { flex-direction: column; align-items: stretch; }
  .adm-seg { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .adm-seg::-webkit-scrollbar { display: none; }
  .adm-seg-btn { padding: 8px 11px; white-space: nowrap; flex-shrink: 0; }
  .adm-champpick { margin-left: 0; }
  .adm-champpick select { flex: 1; min-width: 0; }
  .adm-attn { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
  .adm-attn::-webkit-scrollbar { display: none; }
  .adm-att { flex-shrink: 0; }
  /* round rows stack: number+name on one line, event select full width */
  .adm-round { row-gap: 8px; }
  .adm-round .adm-rev { flex-basis: 100%; }
  .adm-rmove { margin-left: 0; }
  .adm-entry .adm-en-car, .adm-entry .adm-en-label, .adm-entry .adm-en-drv,
  .adm-entry .adm-en-pick { flex-basis: 100%; }
  .adm-crew-row .adm-msel { flex-basis: 100%; max-width: none; }
  .adm-panel-head { flex-wrap: wrap; }
  .adm-panel-head > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
  .adm-btn, .adm-btn.small { min-height: 38px; }
  .adm-rx { min-width: 38px; min-height: 38px; place-items: center; display: grid; }
  /* the audience switch is a NOWRAP scroller, never a wrapping pill.
     Four tabs (Crew / Drivers / All · by day / Other) out-measure a 390px
     screen, and as flex items they were squeezed until the label broke over
     three lines — which made every tab 80px tall and turned the active
     pill (border-radius 999px) into a circle. Trimmed padding fits all four
     at 390px; the scroller is what keeps a longer label honest. */
  .admb-audbar { gap: 8px; }
  .admb-audtabs { display: flex; max-width: 100%; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .admb-audtabs::-webkit-scrollbar { display: none; }
  .admb-audtab { flex: 0 0 auto; white-space: nowrap; gap: 5px;
    padding: 7px 10px; font-size: 13px; min-height: 38px; }
  .admb-audtab .material-symbols-outlined { font-size: 15px; }
  .admb-audhint { flex: 1 1 100%; }

  /* ── the section LIST becomes phone-shaped ───────────────────────────────
     A section row is "title + what's in it" followed by a rail of SIX icon
     actions. At 390px that rail (6 × 38px touch targets) claimed ~240px of a
     ~354px row and left the section itself a ~100px column: "Radio channels &
     comms" broke over four lines and the meta ellipsised to "0 blo…".
     The row STACKS instead — the section reads across the full width and the
     rail sits under it on its own line, right-aligned so it never crowds the
     text. Nothing moves into a menu: every action stays one tap away. */
  .admb-secrow { flex-wrap: wrap; row-gap: 7px; align-items: center; }
  .admb-secrow .admb-secinfo { flex: 1 1 60%; }
  .admb-secrow .adm-rmove { flex: 1 0 100%; margin-left: 0; justify-content: flex-end; gap: 2px; }
  /* with the full width to itself the meta fits one line, so the ellipsis the
     desc was always styled for finally does its job instead of wrapping */
  .admb-secrow .admb-secdesc { white-space: nowrap; }
  /* the author line is dropped here, not shrunk: the stacked row already
     measures ~98px of a 844px screen and a fourth line would push it past the
     budget the phone layout was built to. It is one tap away — the section
     editor states who wrote it last, above the title field. */
  .admb-secrow .admb-secby { display: none; }
  /* the band's own sentence says WHO reads this band — wrap it rather than cut
     it mid-word ("…and the public shar…" reads as broken, not as brief) */
  .admb-band-sub { flex: 1 1 100%; white-space: normal; }
  /* the head's actions split the row evenly instead of leaving a ragged edge */
  .adm-panel-head > div:last-child .adm-btn { flex: 1 1 auto; justify-content: center; }
  /* ...except the section editor's sticky head, which must stay ONE short row:
     it is pinned to the top of the screen, so every pixel it takes is a pixel
     the section itself does not get. Title left, two icon buttons right; the
     paragraph explaining what a section is, and the save state, are in the
     foot where there is room for them. */
  .admb-edithead { padding: 8px 12px; gap: 8px; }
  /* the back button keeps its target and loses its word; Cancel says the same */
  .admb-edithead .admb-backw { display: none; }
  .admb-edithead .adm-back { min-width: 34px; justify-content: center; }
  .admb-edithint { display: none; }
  .admb-edithead-acts { flex: 0 0 auto; }
  .admb-edithead-acts .admb-savestate { display: none; }
  .admb-edithead-acts .admb-headw { display: none; }
  .admb-edithead-acts .adm-btn { flex: 0 0 auto; min-width: 42px; padding: 0 10px;
    justify-content: center; }
  .admb-doc-hero { padding: 16px 16px 12px; }
  .admb-doc-sec { padding: 12px 16px 4px; }
  .admb-callout { margin: 0 16px 12px; }
  .admb-confirm { padding: 12px 16px; }
  .admb-confirm .adm-btn { width: 100%; justify-content: center; }
  .admb-slide { padding: 5cqh 6cqw; }
  .admb-slide-body { max-width: 90cqw; }
  .adms-tbl th, .adms-tbl td { padding: 7px 8px; }
  .adms-bonus label { margin-right: 6px; }
  .admc-acts { width: 100%; justify-content: flex-end; }
  .adm-ready-chips { width: 100%; }
  /* iOS zoom guard — 15px keeps Safari from zooming while matching the app scale */
  #administration input.form-input, #administration select.form-input,
  #administration textarea.form-input { font-size: 15px; }

  /* ── the section editor becomes phone-shaped ─────────────────────────────
     Slide cards go full-bleed (the 36px double gutter was desktop chrome),
     half-width pairs stack, and the BLOCK LIST is an ACCORDION: each block is
     its head row (type chip + one-line preview) and the editor animates open
     DOWNWARD beneath it (grid-rows 0fr→1fr). The toggle is a class flip on
     the live DOM (ADMB.bTap) — never a repaint, which would reset the scroll
     and the tapped row jumps. */
  .admb-blocks { padding: 10px 10px; }
  .admb-slidecard { margin: 0; }
  /* Two halves sit side by side on the SLIDE but there is no room for that at
     390px, so the pair stacks — and then nothing on screen said it was a pair.
     The bracket + caption is that statement, and it is also the drop feedback:
     drag a block onto another's left or right third and the two land in here. */
  .admb-erow { flex-direction: column; gap: 8px; position: relative;
    border: 1px dashed #2f3646; border-radius: 10px; padding: 25px 8px 8px; }
  .admb-erow::before { content: 'Side by side on the slide'; position: absolute;
    top: 6px; left: 11px; font-size: 10px; letter-spacing: .09em; font-weight: 700;
    text-transform: uppercase; color: #7a8a9b; }
  body.light-mode .admb-erow { border-color: #d3dae6; }
  body.light-mode .admb-erow::before { color: #7b8698; }
  /* the dashed "half" border is what the bracket now says — one statement is enough */
  .admb-erow > .admb-ecol > .admb-block.half { border-style: solid; }
  .admb-erow .admb-wtag { display: none; }
  .admb-block { gap: 0; transition: border-color .26s ease; }
  .admb-block.admb-mopen { border-color: rgba(var(--accent-rgb, 212, 245, 66), .45); }
  .admb-block-head { flex-wrap: wrap; min-height: 40px; cursor: pointer; }
  .admb-bprev { display: block; flex: 1 1 100%; order: 9; margin: 3px 0 0 2px;
    font-size: 12.5px; color: #9aa7b6; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; transition: opacity .2s ease; }
  .admb-block.admb-mopen .admb-bprev { opacity: .4; }   /* fade, don't remove — the head keeps its height */
  .admb-bbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
  .admb-block.admb-mopen .admb-bbody { grid-template-rows: 1fr; }
  .admb-bin { display: block; overflow: hidden; min-height: 0; }
  .admb-bflds { padding-top: 8px; }
  /* the live preview aside already stacks below (the 1024px rule) */
  .admb-editside { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .admb-block, .admb-bbody, .admb-bprev { transition: none; }
}



/* ── Organisation tab: the championship's logos ─────────────────────────────
   Marks are drawn on a light AND a dark chip is wrong for both — the tile
   carries the deck's own background, since that is where they end up. */
.admc-logos { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 2px 2px; }
.admc-logo { position: relative; width: 148px; padding: 12px 12px 8px; border-radius: 10px;
  background: #06080b; border: 1px solid #202634; display: flex; flex-direction: column;
  align-items: center; gap: 8px; }
.admc-logo img { max-width: 100%; max-height: calc(52px * var(--ls, 1)); object-fit: contain;
  transition: max-height .08s linear; }
.admc-logo-s { width: 100%; accent-color: var(--accent, #d4f542); }
.admc-logo-n { font-size: 11px; color: #7a8a9b; text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admc-logo-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0;
  border: none; border-radius: 6px; background: rgba(0,0,0,.45); color: #cfd8e6; cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity .12s; }
.admc-logo:hover .admc-logo-x { opacity: 1; }
.admc-logo-x .material-symbols-outlined { font-size: 15px; }
.admc-logo-empty { font-size: 12.5px; color: #7a8a9b; padding: 6px 2px; }

/* ── pit box block ──────────────────────────────────────────────────────────
   The box keeps a FIXED 16:7 ratio at every size, because every spot is stored
   as a percentage OF THIS BOX. Let the artwork letterbox inside a box of
   another shape and each marker drifts off the thing it points at — the exact
   trap tmBoxStyle() exists to avoid, one block over. */
.admb-pit-box { position: relative; aspect-ratio: 16 / 7; width: 100%; border-radius: 8px;
  background: #0e1319; border: 1px solid #1c2431; overflow: hidden; }
.admb-pit-garage { position: absolute; left: 0; right: 0; top: 0; height: 11%;
  background: repeating-linear-gradient(45deg, #141b24 0 6px, #10161d 6px 12px);
  border-bottom: 1px solid #232c3a; }
.admb-pit-garage.flip { top: auto; bottom: 0; border-bottom: none; border-top: 1px solid #232c3a; }
.admb-pit-fast { position: absolute; left: 0; right: 0; bottom: 0; height: 12%;
  background: #090d12; border-top: 1px dashed #2c3849; }
.admb-pit-fast.flip { bottom: auto; top: 0; border-top: none; border-bottom: 1px dashed #2c3849; }
.admb-pit-band { position: absolute; font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(7px, 1.05cqw, 13px); font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: #46535f; display: flex; align-items: center; gap: 6px; }
.admb-pit-band .material-symbols-outlined { font-size: 13px; }
.admb-pit-band.g { left: 10px; top: 1.2%; }
.admb-pit-band.g.flip { top: auto; bottom: 1.2%; }
.admb-pit-band.f { left: 10px; bottom: 1.6%; }
.admb-pit-band.f.flip { bottom: auto; top: 1.6%; }
.admb-pit-lines { position: absolute; left: 6%; right: 4%; top: 13%; bottom: 14%;
  border: 2px solid #212c39; border-radius: 3px; }
/* The car keeps its OWN ratio and is centred — never stretched to the box and
   never letterboxed inside it. Its width is a share of the box, so it scales
   with the box and every spot holds its position against it.
   --fx/--fy mirror the artwork when the box is flipped; the number is flipped
   BACK, or it reads in a mirror. */
.admb-pit-car { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(var(--fx, 1), var(--fy, 1));
  width: 58%; aspect-ratio: 480 / 220; }
.admb-pit-car svg { width: 100%; height: 100%; display: block; }
.admb-pit-car .pb-num { transform: scale(var(--fx, 1), var(--fy, 1));
  transform-box: fill-box; transform-origin: center; }
/* The car's parts take their colour from a class, never a literal, so ONE
   drawing serves the dark stage, the light one and the painted `livery` mode.
   Each class is a PART, not a shade: body = bodywork, panel = the black aero
   (splitter, sills, bumper, wing, mirrors), roof = the roof panel, glass = the
   screens, win = the openings you see into (engine bay, radiator exit).

   The palette is CUSTOM PROPERTIES, not literals, and that is load-bearing:
   `#admb-present.light .pb-body` carries an id, so a plain `.pb-livery
   .pb-body` could never outrank it. A variable is resolved from the NEAREST
   ancestor that declares it -- and `.pb-livery` sits on the <svg> itself, so
   its declaration beats every theme block by inheritance, whatever their
   specificity. */
:root {
  --pb-body: #2f3947;  --pb-body-line: #5d6e83;
  --pb-panel: #171e27; --pb-panel-line: #46556a;
  --pb-roof: #3b4756;  --pb-roof-line: #5d6e83;
  --pb-win: #12181f;
  --pb-glass: #1e2a3a;
  --pb-tyre: #0f141a;  --pb-tyre-line: #5b6b80;
  --pb-hub: #2b3542;   --pb-hub-line: #6b7c90;
  --pb-lamp: #0d1218;  --pb-lamp-line: #8b9db2;
  --pb-vent: #4f5f74;
  --pb-numbg: #0d1218; --pb-numbg-line: #55667a; --pb-numfg: #8b9bad;
}
.pb-body { fill: var(--pb-body); stroke: var(--pb-body-line); stroke-width: 2; }
.pb-panel { fill: var(--pb-panel); stroke: var(--pb-panel-line); stroke-width: 1.5; }
.pb-roof { fill: var(--pb-roof); stroke: var(--pb-roof-line); stroke-width: 1.5; }
.pb-win { fill: var(--pb-win); }
.pb-glass { fill: var(--pb-glass); }
.pb-tyre { fill: var(--pb-tyre); stroke: var(--pb-tyre-line); stroke-width: 2; }
.pb-hub { fill: var(--pb-hub); stroke: var(--pb-hub-line); stroke-width: 1.5; }
.pb-lamp { fill: var(--pb-lamp); stroke: var(--pb-lamp-line); stroke-width: 2; }
.pb-vent { stroke: var(--pb-vent); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.pb-numbg { fill: var(--pb-numbg); stroke: var(--pb-numbg-line); stroke-width: 1.5; }
.pb-num { fill: var(--pb-numfg); font-family: 'Barlow Condensed', sans-serif;
  font-size: 25px; font-weight: 800; }

/* Painted mode. The geometry is identical -- only the palette changes, plus the
   livery flashes, which carry no colour of their own outside it and so are
   display:none until an ancestor asks for them. --pb-flash is the one hook a
   team colour would ride in on. */
.pb-stripe, .pb-chevron { display: none; }
.pb-livery {
  --pb-flash: #d92b28;
  --pb-body: #f2f5f9;  --pb-body-line: #b4bece;
  --pb-panel: #23272d; --pb-panel-line: #454b55;
  --pb-roof: #ffffff;  --pb-roof-line: #b4bece;
  --pb-win: #1b1f25;
  --pb-glass: #333b45;
  --pb-tyre: #17191d;  --pb-tyre-line: #383c43;
  --pb-hub: #ccd2da;   --pb-hub-line: #8a9099;
  --pb-lamp: #2b3138;  --pb-lamp-line: #6f7883;
  --pb-vent: #9aa4b2;
  --pb-numbg: #16191e; --pb-numbg-line: #4a5058; --pb-numfg: #f2f5f9;
}
.pb-livery .pb-stripe { display: initial; fill: var(--pb-flash); }
.pb-livery .pb-chevron { display: initial; fill: none; stroke: var(--pb-flash);
  stroke-width: 7; stroke-linecap: round; }
.pb-livery .pb-rear { fill: var(--pb-flash); stroke: #7d1c1a; }

/* a spot: the anchor dot is ALWAYS at the true coordinate, whatever each
   surface draws on top of it */
.admb-pit-spot { position: absolute; transform: translate(-50%, -50%); }
.admb-pit-dot { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px;
  border-radius: 50%; background: var(--accent, #d4f542);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 212,245,66), .22); }
.admb-pit-spot.unassigned .admb-pit-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.admb-pit-leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.admb-pit-lead { stroke: var(--accent, #d4f542); stroke-width: 1; stroke-opacity: .55; }
.admb-pit-lead.un { stroke: #f59e0b; }
/* Labels are a % of the BOX wide, not of the slide: the packer divides the
   bands the same way, so a label can never overrun its neighbour. */
.admb-pit-card { position: absolute; transform: translate(-50%, -50%); background: #121821ee;
  border: 1px solid #2a3746; border-left: 2px solid var(--accent, #d4f542); border-radius: 5px;
  padding: .5cqh .9cqw; width: 15%; }
.admb-pit-card.unassigned { border-left-color: #f59e0b; }
.admb-pit-r { font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(7px, 1.05cqw, 15px); letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent, #d4f542); line-height: 1.2; }
.admb-pit-card.unassigned .admb-pit-r { color: #f59e0b; }
.admb-pit-n { font-size: clamp(6.5px, .93cqw, 13px); color: #cfd8e3; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admb-pit-d { font-size: clamp(6px, .84cqw, 12px); color: #7a8a9b; line-height: 1.3; margin-top: .2cqh; }
/* "this one is you" — resolved at read time from the signed-in member, never
   stored, so one slide highlights a different position in every pair of hands
   and highlights nothing on a projector, where nobody is signed in */
.admb-pit-me { display: inline-block; background: var(--accent, #d4f542); color: #10140a;
  border-radius: 3px; padding: 0 .35em; margin-left: .35em; font-weight: 800; }
.admb-pit-card.me { border-color: var(--accent, #d4f542); border-left-width: 3px;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 212,245,66), .35); }
.admb-pit-card.me .admb-pit-n { color: #e8edf4; font-weight: 700; }
.admb-pit-spot.me .admb-pit-dot { width: 13px; height: 13px; margin: -6.5px;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 212,245,66), .35); }
.admb-pit-lead.me { stroke-width: 2; stroke-opacity: 1; }
.admb-pit-fig { align-self: stretch; }
.admb-pit-legend { display: flex; align-items: center; gap: 1.6cqw; margin-top: 1.1cqh;
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(6.5px, .93cqw, 13px);
  letter-spacing: .1em; text-transform: uppercase; color: #6d7d8f; }
.admb-pit-legend i { font-style: normal; display: inline-flex; align-items: center; gap: .5cqw; }
.admb-pit-legend i::before { content: ''; width: .7cqw; height: .7cqw; border-radius: 50%;
  background: var(--accent, #d4f542); }
.admb-pit-legend i.a::before { background: #f59e0b; }
/* the slide gives the map the room a diagram needs */
.admb-slide-body .admb-pit-fig { width: 100%; max-width: none; }

/* ── the editor half ───────────────────────────────────────────────────── */
.admb-pit-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; }
.admb-pit-dial { display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #7a8a9b; }
.admb-pit-dial .form-input { width: auto; padding: 5px 8px; font-size: 12px; }
.admb-pit-no { width: 58px; text-align: center; font-weight: 700; }
.admb-pit-edbox { cursor: crosshair; }
/* The marker inside is absolutely positioned, which would leave this span 0x0 —
   this gives it a real hit area for a finger and a real box for anything
   measuring it. touch-action is what makes the gesture a drag, not a scroll. */
.admb-pit-ed { display: block; width: 30px; height: 30px; cursor: grab; touch-action: none; }
.admb-pit-ed:active { cursor: grabbing; }
.admb-pit-num { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 27px; height: 27px; border-radius: 50%; background: var(--accent, #d4f542); color: #0d1108;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4); font-variant-numeric: tabular-nums; }
.admb-pit-spot.unassigned .admb-pit-num { background: #f59e0b; }
.admb-pit-ed.sel .admb-pit-num { outline: 2px solid #dce3ed; outline-offset: 2px; }
.admb-pit-edcard { cursor: grab; touch-action: none; padding: 5px 8px; min-height: 34px; }
.admb-pit-edcard:active { cursor: grabbing; }
.admb-pit-edcard.sel { border-color: var(--accent, #d4f542); outline: 2px solid #dce3ed;
  outline-offset: 2px; z-index: 4; }
.admb-pit-edcard.manual::after { content: ''; position: absolute; right: 3px; top: 3px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #d4f542); }
.admb-pit-edcard .admb-pit-r, .admb-pit-edcard .admb-pit-n { font-size: 11px; }
.admb-pit-empty { border: 1px dashed #2a3040; border-radius: 9px; padding: 18px 14px;
  text-align: center; color: #5a6678; font-size: 12.5px; margin-top: 10px; }
.admb-pit-empty b { display: block; color: #9fb0c3; margin-bottom: 3px; }
.admb-pit-insp { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.admb-pit-f label { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 11px;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #5a6678; margin-bottom: 4px; }
.admb-pit-foot { display: flex; gap: 7px; }
.admb-pit-cb { position: relative; }
.admb-pit-cb .form-input { padding-left: 32px; padding-right: 34px; }
.admb-pit-cbi { position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  font-size: 17px; color: #5a6678; pointer-events: none; }
.admb-pit-cbx { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: #5a6678; padding: 5px; display: flex; }
.admb-pit-cbx:hover { color: #ef4444; }
.admb-pit-cbx .material-symbols-outlined { font-size: 16px; }
.admb-pit-dd { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: #0c1016; border: 1px solid #2a3040; border-radius: 9px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4); max-height: 232px; overflow-y: auto; padding: 4px; }
.admb-pit-cb.open .admb-pit-dd { display: block; }
.admb-pit-opt { display: flex; align-items: baseline; gap: 7px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 7px 9px; border-radius: 6px;
  color: #dce3ed; font-family: 'Barlow', sans-serif; font-size: 13px; }
.admb-pit-opt:hover { background: #101720; }
.admb-pit-onm { font-weight: 600; }
.admb-pit-orl { font-size: 11.5px; color: #5a6678; }
.admb-pit-oat { margin-left: auto; font-size: 10.5px; color: #f59e0b;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap; }
.admb-pit-none { padding: 10px 9px; font-size: 12.5px; color: #5a6678; }
.admb-pit-warn { display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 11.5px; color: #f59e0b; }
.admb-pit-warn .material-symbols-outlined { font-size: 14px; }
.admb-pit-lab { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  border: 1px solid #1f2530; background: #0f1318; border-radius: 8px; padding: 8px 10px;
  font-size: 12px; color: #7a8a9b; }
.admb-pit-lab .material-symbols-outlined { font-size: 16px; color: #5a6678; }
.admb-pit-lab.on { border-color: rgba(var(--accent-rgb, 212,245,66), .45); }
.admb-pit-lab.on .material-symbols-outlined { color: var(--accent, #d4f542); }
.admb-pit-lab .adm-btn { margin-left: auto; }
.admb-pit-list { margin-top: 12px; display: flex; flex-direction: column; gap: 2px;
  max-height: 260px; overflow-y: auto; }
.admb-pit-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px;
  cursor: pointer; border: 1px solid transparent; background: none; text-align: left;
  color: #dce3ed; font-family: 'Barlow', sans-serif; }
.admb-pit-row:hover { background: #101720; }
.admb-pit-row.sel { background: rgba(var(--accent-rgb, 212,245,66), .07);
  border-color: rgba(var(--accent-rgb, 212,245,66), .3); }
.admb-pit-rn { width: 20px; height: 20px; border-radius: 50%; background: #1a2330; color: #9fb0c3;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 11px;
  font-variant-numeric: tabular-nums; }
.admb-pit-row.sel .admb-pit-rn { background: var(--accent, #d4f542); color: #0d1108; }
.admb-pit-rt { min-width: 0; flex: 1; }
.admb-pit-rt b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 12.5px;
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admb-pit-rt span { display: block; font-size: 11.5px; color: #7a8a9b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admb-pit-row.unassigned .admb-pit-rt span { color: #f59e0b; }
.admb-sc-solo { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #7a8a9b; }
.admb-sc-solo .material-symbols-outlined { font-size: 16px; color: var(--accent, #d4f542); }

/* light mode — the deck already has a light stage, and these are its colours */
body.light-mode .admb-pit-box { background: #eef2f7; border-color: #dde2ec; }
body.light-mode .admb-pit-garage { background: repeating-linear-gradient(45deg, #e2e8f0 0 6px, #eaeff5 6px 12px);
  border-color: #d6dde7; }
body.light-mode .admb-pit-fast { background: #e6ebf2; border-color: #d0d8e4; }
body.light-mode .admb-pit-lines { border-color: #cdd6e2; }
body.light-mode .admb-pit-band { color: #8b98a9; }
body.light-mode .admb-pit-card { background: #ffffffee; border-color: #d5dce7; }
body.light-mode .admb-pit-n { color: #2c3644; }
body.light-mode .admb-pit-d { color: #6b7889; }
body.light-mode .admb-pit-r { color: #5c7000; }
body.light-mode .admb-pit-lead { stroke: #7a9600; }
body.light-mode .admb-pit-dot { background: #7a9600; }
body.light-mode {
  --pb-body: #dfe5ee;  --pb-body-line: #93a2b6;
  --pb-panel: #a9b5c6; --pb-panel-line: #8593a8;
  --pb-roof: #eef2f8;  --pb-roof-line: #93a2b6;
  --pb-win: #7d8b9f;
  --pb-glass: #93a7bf;
  --pb-tyre: #3a4553;  --pb-tyre-line: #6b7889;
  --pb-hub: #e8edf4;   --pb-hub-line: #7b8899;
  --pb-lamp: #c4cddb;  --pb-lamp-line: #6b7889;
  --pb-vent: #a3b0c2;
  --pb-numbg: #eef2f8; --pb-numbg-line: #7b8899; --pb-numfg: #46536a;
}
body.light-mode .admb-pit-dd { background: #fff; border-color: #dde2ec; }
body.light-mode .admb-pit-opt { color: #1a2030; }
body.light-mode .admb-pit-opt:hover { background: #f2f5fa; }
body.light-mode .admb-pit-lab, body.light-mode .admb-pit-empty { color: #5f6b7a; }
body.light-mode .admb-pit-row { color: #1a2030; }
body.light-mode .admb-pit-row:hover { background: #f2f5fa; }

/* the Present stage is its own light world, scoped like every other deck rule */
#admb-present.light .admb-pit-box { background: #eef2f7; border-color: #dde2ec; }
#admb-present.light .admb-pit-card { background: #ffffffee; border-color: #d5dce7; }
#admb-present.light .admb-pit-n { color: #2c3644; }
#admb-present.light .admb-pit-d { color: #6b7889; }
#admb-present.light .admb-pit-r { color: #5c7000; }
#admb-present.light .admb-pit-lead { stroke: #7a9600; }
#admb-present.light .admb-pit-dot { background: #7a9600; }
#admb-present.light .admb-pit-band { color: #8b98a9; }
/* The deck can be pinned dark while the app is light (pm_admb_present_theme),
   and body.light-mode's vars would otherwise inherit straight into it. */
#admb-present:not(.light) {
  --pb-body: #2f3947;  --pb-body-line: #5d6e83;
  --pb-panel: #171e27; --pb-panel-line: #46556a;
  --pb-roof: #3b4756;  --pb-roof-line: #5d6e83;
  --pb-win: #12181f;
  --pb-glass: #1e2a3a;
  --pb-tyre: #0f141a;  --pb-tyre-line: #5b6b80;
  --pb-hub: #2b3542;   --pb-hub-line: #6b7c90;
  --pb-lamp: #0d1218;  --pb-lamp-line: #8b9db2;
  --pb-vent: #4f5f74;
  --pb-numbg: #0d1218; --pb-numbg-line: #55667a; --pb-numfg: #8b9bad;
}
#admb-present.light {
  --pb-body: #dfe5ee;  --pb-body-line: #93a2b6;
  --pb-panel: #a9b5c6; --pb-panel-line: #8593a8;
  --pb-roof: #eef2f8;  --pb-roof-line: #93a2b6;
  --pb-win: #7d8b9f;
  --pb-glass: #93a7bf;
  --pb-tyre: #3a4553;  --pb-tyre-line: #6b7889;
  --pb-hub: #e8edf4;   --pb-hub-line: #7b8899;
  --pb-lamp: #c4cddb;  --pb-lamp-line: #6b7889;
  --pb-vent: #a3b0c2;
  --pb-numbg: #eef2f8; --pb-numbg-line: #7b8899; --pb-numfg: #46536a;
}
#admb-present.light .admb-pit-garage { background: repeating-linear-gradient(45deg, #e2e8f0 0 6px, #eaeff5 6px 12px); }
#admb-present.light .admb-pit-fast { background: #e6ebf2; }
#admb-present.light .admb-pit-lines { border-color: #cdd6e2; }
/* ...and the same restoration the shared block styles need above: the pit box's
   own light-mode rules are unscoped, so a dark-pinned deck under a light app
   drew a white box on a black slide. */
#admb-present:not(.light) .admb-pit-box { background: #0e1319; border-color: #1c2431; }
#admb-present:not(.light) .admb-pit-garage {
  background: repeating-linear-gradient(45deg, #141b24 0 6px, #10161d 6px 12px); }
#admb-present:not(.light) .admb-pit-fast { background: #090d12; }
#admb-present:not(.light) .admb-pit-lines { border-color: #212c39; }
#admb-present:not(.light) .admb-pit-band { color: #46535f; }
/* An id beats the state classes these carry, so each restoration has to step
   around the state it would otherwise flatten (the amber unassigned spot, the
   accent border on your own position). */
#admb-present:not(.light) .admb-pit-card { background: #121821ee; }
#admb-present:not(.light) .admb-pit-card:not(.me) {
  border-top-color: #2a3746; border-right-color: #2a3746; border-bottom-color: #2a3746; }
#admb-present:not(.light) .admb-pit-card:not(.me):not(.unassigned) {
  border-left-color: var(--accent, #d4f542); }
#admb-present:not(.light) .admb-pit-card:not(.me) .admb-pit-n { color: #cfd8e3; }
#admb-present:not(.light) .admb-pit-d { color: #7a8a9b; }
#admb-present:not(.light) .admb-pit-card:not(.unassigned) .admb-pit-r { color: var(--accent, #d4f542); }
#admb-present:not(.light) .admb-pit-lead:not(.un) { stroke: var(--accent, #d4f542); }
#admb-present:not(.light) .admb-pit-spot:not(.unassigned) .admb-pit-dot { background: var(--accent, #d4f542); }

/* ── placing pit-box positions on a phone ─────────────────────────────────
   Reported as "the field to work on is waaaay too small": at 390px the inline
   box is ~350x150 and five labels bury the car. Two answers, both here.

   1. On the inline box the LABEL CARDS come off. They are sized as a share of
      the box, so at that width they overlap each other and hide the car they
      point at — and the numbered list under the editor already names every
      position. The numbered markers stay: they are the placement.
   2. "Place positions" opens the box full-screen, turned 90 degrees. A 16:7
      box rotated into a 390x844 phone lands at about 844x369 — roughly 2.8x
      bigger in each direction, because 844/369 is very nearly 16/7. */
/* The surface is offered at EVERY width, not only on a phone: the inline box is
   as wide as the editor column, so in a narrow window (or the event editor's
   Briefing tab, which is narrower still) it is just as unworkable as at 390px.
   Whether it TURNS is measured, not assumed — see pitFullSize(). */
@media (max-width: 600px) {
  .admb-pit-edbox .admb-pit-edcard,
  .admb-pit-edbox .admb-pit-leads { display: none; }
  /* ...but inside the full-screen surface they are readable again */
  .admb-pit-rot .admb-pit-edcard,
  .admb-pit-rot .admb-pit-leads { display: block; }
}

.admb-pit-full { position: fixed; inset: 0; z-index: 3200; display: flex;
  flex-direction: column; background: #0b0f16; }
body.admb-pitfull-on { overflow: hidden; }
.admb-pf-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid #2a3040; background: #111620; }
.admb-pf-bar b { font-family: 'Barlow Condensed', sans-serif; font-size: 16px;
  letter-spacing: .3px; text-transform: uppercase; }
.admb-pf-bar span { font-size: 11.5px; color: #7a8a9b; flex: 1; min-width: 0; }
.admb-pf-stage { flex: 1; display: grid; place-items: center; overflow: hidden; }
/* The box keeps its own 16:7 and is turned into the screen's long axis. Its
   children counter-rotate so every label and number still reads upright. */
.admb-pf-hold { position: relative; flex: none; }
.admb-pit-rot { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); }
/* .rot is the turned case only — on a wide screen the box already lies along
   the long axis, and turning it there would make it SMALLER. */
.admb-pit-rot.rot { transform: translate(-50%, -50%) rotate(-90deg); }
.admb-pit-rot.rot .admb-pit-card { transform: translate(-50%, -50%) rotate(90deg); }
.admb-pit-rot.rot .admb-pit-num,
.admb-pit-rot.rot .admb-pit-band { transform: rotate(90deg); }
.admb-pf-foot { display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #2a3040; background: #111620; min-height: 60px; }
.admb-pf-foot .form-input { flex: 1; min-width: 0; height: 42px; font-size: 16px; }
.admb-pf-n { width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--accent, #d4f542); color: #0b0f16; display: grid;
  place-items: center; font-weight: 800; font-size: 13px; }
.admb-pf-hint { font-size: 13px; color: #7a8a9b; }

body.light-mode .admb-pit-full { background: #eef2f7; }
body.light-mode .admb-pf-bar,
body.light-mode .admb-pf-foot { background: #fff; border-color: #dde2ec; }
body.light-mode .admb-pf-bar span,
body.light-mode .admb-pf-hint { color: #5f6b7a; }