/* scout/scout.css — mobile-first, single-screen. Light, high-contrast, big tap targets.
   Deliberately tiny and self-contained — no shared stylesheet, no framework. */

:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --ink: #16202e;
  --ink-soft: #56657a;
  --muted: #8a97a8;
  --line: #dfe5ee;
  --line-strong: #c7d0dd;
  --primary: #1763ff;
  --primary-strong: #0c49d6;
  --primary-soft: #e7efff;
  --ok-bg: #e6f7ec; --ok-ink: #137a3a;
  --warn-bg: #fdecec; --warn-ink: #c0392b;
  /* alliance colours (Red / Blue) — used for the match team inputs + tags */
  --red: #e5484d; --red-soft: #fdecec;
  --blue: #1763ff; --blue-soft: #e7efff;
  /* the app's one chrome accent — the wizard timeline + Screen-1 selection (round chip, match-number
     stepper). The desktop app's indigo --primary, shared so both halves of Game Buddy match; kept
     clear of every hue that already carries meaning: team red/blue, edit amber, "saved" green. */
  --match: #4f46e5; --match-soft: #eef0fe; --match-ring: rgba(79,70,229,.26);
  /* the neutral "bonus" accent: the white/amber glow that ties a held Control Bonus's C box to the
     two end-blocks that earned it. Neutral (not team-coloured) so it pops even on a same-colour block. */
  --cb-glow: #ffb02e;
  /* EDIT AMBER — rings a field that changed since the match was published (the read-only → edit →
     republish lifecycle). Distinct from team red/blue and the green "saved" hint so a changed value reads
     unambiguously as "edited, not yet republished". */
  --amber: #f59e0b; --amber-soft: rgba(245, 158, 11, .16); --amber-ink: #92600a;
  --radius: 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  /* notch-safe padding on phones */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.loading { color: var(--muted); padding: 24px; }

/* one centred column that never gets too wide on a tablet/desktop */
.screen {
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.head h1 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.head .sub { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; }
.head.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.head-right { display: flex; align-items: center; gap: 12px; }

/* sync indicator: a quiet green dot when synced; an amber "N ↑" pill only when rows are queued */
.sync-dot { display: inline-flex; align-items: center; justify-content: center; }
.sync-dot.ok { width: 11px; height: 11px; border-radius: 99px; background: var(--ok-ink); }
.sync-dot.pending {
  font-size: 11px; font-weight: 800; white-space: nowrap;
  color: var(--warn-ink); background: var(--warn-bg); padding: 3px 9px; border-radius: 99px;
}
/* "disconnected" (network/other) — code is valid but the backend is unreachable. A muted, NON-RED
   slashed hollow circle (red is reserved for alliances). Tappable to retry. */
.sync-dot.offline {
  position: relative; width: 14px; height: 14px; border-radius: 99px;
  border: 2px solid var(--muted); background: transparent; cursor: pointer;
}
.sync-dot.offline::after {
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px;
  margin-left: -1px; background: var(--muted); border-radius: 1px; transform: rotate(45deg);
}
/* "access code invalid" — reached the server but the code was rejected (effectively logged out). A red
   "!" badge: the device needs action. Red here is header chrome, never a team context. Tap to re-enter. */
.sync-dot.badcode {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
  font-size: 12px; font-weight: 900; line-height: 1;
  color: #fff; background: var(--warn-ink); cursor: pointer;
}

.link {
  font: inherit; font-size: 13px; font-weight: 600;
  background: none; border: 0; color: var(--primary-strong);
  padding: 4px; cursor: pointer; text-decoration: underline;
}

/* top bar: optional back arrow + title on the left, pill + gear on the right */
.topbar { gap: 8px; }
.tb-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tb-left h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  font: inherit; font-size: 22px; line-height: 1;
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--ink-soft); cursor: pointer; border-radius: 12px;
}
.icon-btn:active { background: var(--primary-soft); }
.icon-btn[disabled] { opacity: .35; cursor: default; }
/* in-flight feedback for the Matches re-sync (#3e) */
.icon-btn.spin { animation: icon-spin .7s linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }
.tb-left .icon-btn { margin-left: -8px; font-size: 28px; }
/* the gear reads as a deliberate control, a touch larger + boxed */
.head-right .icon-btn { font-size: 26px; color: var(--ink-soft); }

/* home brand: app logo + a personalised greeting */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.greeting { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* identity row: Event (left) + Team (right) as two distinct key:value pills */
.id-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: -2px; }
.id-pill {
  display: inline-flex; align-items: baseline; gap: 6px; min-width: 0;
  padding: 5px 12px; border-radius: 99px; font-size: 13px;
  border: 1px solid transparent;
}
.id-pill .k { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.id-pill .v { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-pill.event { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.id-pill.team  { background: var(--primary-soft); border-color: transparent; color: var(--primary-strong); }
.id-pill.team .k { color: var(--primary); opacity: .7; }

/* hairline + breathing space between the header section and the mode list */
.hr { height: 1px; background: var(--line); margin: 6px 0 2px; }

/* mode hub: a stack of big tappable mode cards, each with an icon tile */
.hub { display: flex; flex-direction: column; gap: 12px; }
.mode-card {
  position: relative; font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; min-height: 66px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color .14s, transform .08s, box-shadow .14s;
}
.mode-card:active { transform: scale(.99); }
.mode-card:not(.soon):hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.mc-icon {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 24px;
  background: var(--primary-soft);
}
.mc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.mc-desc { font-size: 13.5px; color: var(--ink-soft); }
.mode-card.soon { cursor: default; opacity: .55; }
.mode-card.soon .mc-icon { background: var(--bg); }
.mc-soon {
  position: absolute; right: 14px; top: 14px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px;
}
/* draft-count badge on the Match card */
.mc-badge {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  min-width: 24px; height: 24px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; color: #fff; background: var(--primary); border-radius: 99px;
}

/* stage timeline: a connected wizard — numbered dots joined by a line, tappable/swipeable */
.timeline { display: flex; padding-bottom: 2px; }
.tl-step {
  position: relative; font: inherit; flex: 1 1 0; min-width: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 2px 2px 0; background: none; border: 0; color: var(--muted);
  transition: color .12s;
}
/* the connector line runs between adjacent dot centres */
.tl-step:not(:first-child)::before {
  content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px;
  background: var(--line-strong); z-index: 0;
}
.tl-dot {
  position: relative; z-index: 1;
  width: 26px; height: 26px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  background: var(--surface); color: var(--muted); border: 2px solid var(--line-strong);
  transition: background .12s, color .12s, border-color .12s;
}
.tl-lab { font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* progress states use the one chrome accent (purple) — never team red/blue, never green.
   done = filled dot + ✓ + filled connector behind you; on = filled dot + number + a soft halo */
.tl-step.done { color: var(--match); }
.tl-step.done .tl-dot { background: var(--match); color: #fff; border-color: var(--match); }
.tl-step.done:not(:first-child)::before { background: var(--match); }
.tl-step.on { color: var(--ink); }
.tl-step.on .tl-dot { background: var(--match); color: #fff; border-color: var(--match);
  box-shadow: 0 0 0 3px var(--match-ring); }

.stage-body { display: block; }
/* a published match opens READ-ONLY: the whole capture body is inert (one switch disables every control
   at once) and gently dimmed. The header, chip, timeline + foot sit OUTSIDE the body, so the Edit toggle,
   navigation, and the share action stay live. The topbar `Edit` lifts the lock. */
.stage-body.locked { pointer-events: none; opacity: .82; }

/* ── edit-lifecycle v3 chrome — STATUS (passive) is separated from ACTIONS (buttons) ──────────────── */

/* record-scoped topbar: the leave/Cancel slot keeps the title hard-left; compact text actions on the right */
.match-topbar .tb-slot { display: flex; align-items: center; }
/* compact topbar ACTION buttons (Edit / Done / Cancel / Discard) — distinct from the full-width footer btns */
.tb-action {
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
.tb-action:active { background: var(--primary-soft); }
.tb-action.primary { border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong)); }  /* Done / Republish = filled accent */
.tb-action.ghost { border-color: transparent; background: none; color: var(--primary-strong); padding-left: 4px; }
.tb-action.danger { color: var(--warn-ink); border-color: var(--warn-ink); }     /* Discard = outline danger */

/* the status row: the passive chip, with its two resolutions (Discard · Republish) pushed to the right when
   a published match has unpublished edits. Wraps on a narrow phone (buttons drop below the chip). */
.edits-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: -2px 0 2px; }
.edits-actions { display: flex; gap: 8px; margin-left: auto; }

/* publish-status CHIP (passive) — colour encodes the publish state. Never tappable. */
.status-chip {
  padding: 3px 10px; border-radius: 99px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 6px;
}
.status-chip.local     { background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line-strong); }
.status-chip.published { background: var(--ok-bg); color: var(--ok-ink); }
.status-chip.published::before { content: "✓"; font-size: 11px; }   /* a meaningful tick; other states rely on colour */
.status-chip.editing,
.status-chip.pub-dirty { background: var(--amber-soft); color: var(--amber-ink); }

/* F2 — the current stage names itself above the body, so "where am I" doesn't rely on the timeline dot alone */
.stage-title { margin: 2px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }

/* footer: Back + the forward slot (Next / Publish / Republish). A hidden forward lets Back fill the row. */
.stage-nav { display: flex; gap: 12px; }
.stage-nav .btn { flex: 1; }
.stage-nav .btn:disabled { opacity: .4; cursor: default; }
.stage-nav .btn[hidden] { display: none; }

/* EDIT AMBER — a field changed since publish. An amber ring (+ faint fill) on whatever control owns the
   leaf: scorecard inputs/pills, goal combos, the "C" marks, park glyphs, observation pills/chips, notes,
   and the Setup round/number/team fields. Reads clearly against the team red/blue and "saved" green. */
.changed { box-shadow: 0 0 0 2px var(--amber) !important; border-radius: 8px; }
.changed.goal-combo, .changed.park-x { background: var(--amber-soft); }
.in.changed, textarea.changed { background: var(--amber-soft); }

.soon-stage { padding: 20px 2px; }
.soon-title { margin: 0; font-size: 16px; font-weight: 800; }

/* match Setup: generous breathing room; compact Red/Blue rows (label left, short input) with a
   centred swap between them and a one-tap "Us" fill */
.stack.setup { gap: 20px; }
.teams { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.team-row { display: flex; align-items: center; gap: 12px; margin: 0; }
.team-row .flab { width: 46px; flex: none; margin: 0; }
.team-row.red .flab  { color: var(--red); }
.team-row.blue .flab { color: var(--blue); }
.teams .team-in { width: 152px; flex: none; text-align: center; }
.team-in.red  { border-color: var(--red); }
.team-in.red:focus  { box-shadow: 0 0 0 3px var(--red-soft); }
.team-in.blue { border-color: var(--blue); }
.team-in.blue:focus { box-shadow: 0 0 0 3px var(--blue-soft); }

/* "Us" quick-fill: one tap drops our team onto this side; .on = this side is currently us */
.us-btn {
  font: inherit; font-size: 13px; font-weight: 800;
  min-height: 40px; padding: 0 13px; flex: none;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: 99px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .08s;
}
/* when active ("this side is us") the chip takes its own side's alliance colour — reinforcing the
   side rather than introducing a third hue */
.us-btn.on { color: #fff; border-color: transparent; }
.team-row.red  .us-btn.on { background: var(--red); }
.team-row.blue .us-btn.on { background: var(--blue); }
.us-btn:active { transform: scale(.97); }

/* swap is between two stacked boxes → an up/down glyph, centred across the row */
.swap-wrap { display: flex; justify-content: center; width: 100%; }
.swap-btn {
  font: inherit; font-size: 20px; line-height: 1;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: 99px; cursor: pointer;
}
.swap-btn:active { background: var(--primary-soft); transform: rotate(180deg); }
.saved-hint { margin: 0; min-height: 18px; font-size: 13px; font-weight: 700; color: var(--ok-ink); text-align: center; }

/* matches list: saved/published match drafts to reopen */
.draft-list { display: flex; flex-direction: column; gap: 10px; }
.draft-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 4px 8px 4px 4px;
}
.draft-main {
  flex: 1; min-width: 0; font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  /* a <button> doesn't inherit page text colour (UA forces ButtonText/black), so set it
     explicitly or the title renders black on the dark surface; team tags override per-team */
  background: none; border: 0; padding: 12px; color: var(--ink);
}
.draft-title { font-size: 16px; font-weight: 800; }
.draft-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.team-tag { font-weight: 800; }
.team-tag.red { color: var(--red); }
.team-tag.blue { color: var(--blue); }
.draft-sub .vs { color: var(--muted); font-weight: 600; font-size: 12px; }
/* OUR team (identity.ourTeam) is marked wherever its number shows, so it's spotted at a glance — keeps the
   alliance red/blue colour and adds a thin amber UNDERLINE (a soft glow washed out; an underline reads
   clearly yet stays distinct from the amber edit-RING/fill on changed fields). */
.team-tag.our { border-bottom: 2px solid var(--amber); padding-bottom: 1px;
  box-shadow: 0 3px 6px -3px var(--amber); }
.team-in.our { box-shadow: inset 0 -2px 0 var(--amber); }
/* matches-list filter row: a small funnel icon, then the All / Our-team chips */
.list-filter { margin: 2px 0 0; flex-wrap: wrap; align-items: center; }
.filter-ico { width: 15px; height: 15px; color: var(--ink-soft); flex: none; margin-right: 2px; }
/* the card's right column: the publish-status chip, and (when dirty) a quick Republish under it */
.draft-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.card-republish { font-size: 13px; padding: 6px 12px; white-space: nowrap; }
.icon-btn.del { font-size: 17px; width: 38px; height: 38px; }
.empty { padding: 8px 2px; }

/* attribution: WHO recorded an observation (D4). On a standalone card it sits on the RIGHT beside the
   status (muted, only shown for someone else's match — your own is obvious). Inside a multi-obs group it's
   the row's primary identity, on the left. */
.obs-scout { font-size: 14px; font-weight: 700; color: var(--ink); }
.obs-scout.side { font-size: 12px; font-weight: 700; color: var(--muted); }

/* a multi-observation match (D4): a header (label + teams + badges) over one row per scout's take. The
   group owns the card border; the inner rows are hairline-separated and borderless. */
.match-group { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.group-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px; }
.group-badges { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.obs-count { font-size: 12px; font-weight: 800; color: var(--muted); }
.warn-badge { font-size: 11px; font-weight: 800; color: var(--amber-ink); background: var(--amber-soft); padding: 2px 8px; border-radius: 99px; }
.obs-list { display: flex; flex-direction: column; }
.obs-list .draft-row { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 2px 8px 2px 4px; }
.obs-main { flex-direction: row; align-items: center; }

/* conflict (S2) — a red-tinted alert chip, distinct from the amber edit state */
.status-chip.conflict { background: var(--red-soft); color: var(--red); }
.other-event-hint { margin: 6px 2px 0; }

/* Observations read-back (read-only): per-team card; one block per scout's impression. Hairline-separated
   like the match obs rows, but each block stacks who+status, the ratings, capability chips, and the note. */
.team-count { margin-left: auto; }
.obs-list .obs-imp { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.obs-imp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.obs-ratings { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-pill { display: inline-flex; align-items: baseline; gap: 5px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; }
.rt-lab { font-size: 12px; font-weight: 700; color: var(--muted); }
.rt-val { font-size: 13px; font-weight: 800; color: var(--ink); }
.obs-caps { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-chip { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--line); }
.cap-chip.yes { background: var(--match-soft); color: var(--match); border-color: var(--match-ring); }
.cap-chip.no  { background: var(--bg); color: var(--ink-soft); }
.obs-note { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); white-space: pre-wrap; }

/* Team filter (Observations) — a combobox: a typeahead .in field + a dropdown of the event's teams. */
.combo { position: relative; }
.combo-field { position: relative; display: flex; align-items: center; }
.combo-in { padding-right: 42px; }                          /* room for the × */
.combo-clear {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: none; align-items: center; justify-content: center;
  font: inherit; font-size: 20px; line-height: 1; color: var(--muted);
  background: none; border: 0; border-radius: 99px; cursor: pointer;
}
.combo-clear.show { display: inline-flex; }
.combo-clear:active { background: var(--bg); }
.combo-panel {
  display: none; position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 248px; overflow-y: auto; padding: 4px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(22, 32, 46, .12);
}
.combo.open .combo-panel { display: block; }
.combo-opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: inherit; text-align: left; cursor: pointer; color: var(--ink);
  padding: 11px 12px; min-height: 44px; background: none; border: 0; border-radius: 10px;
}
.combo-opt:hover, .combo-opt.sel { background: var(--primary-soft); }
.combo-opt-team { font-weight: 800; }
.combo-opt-count { font-size: 12px; font-weight: 700; color: var(--muted); }
.combo-empty { padding: 12px; color: var(--muted); font-size: 14px; }
.filter-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* conflict resolver (S2/M2): the message, an optional per-field clash picker, then the three actions */
.conflict-card { display: flex; flex-direction: column; gap: 12px; }
.conflict-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.conflict-actions .btn { flex: 1; min-width: 120px; }
.clash-list { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px; }
.clash-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.clash-path { font-size: 13px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-right: auto; }

.settings-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* the swappable per-screen body; a column with the same rhythm as the screen */
.stack { display: flex; flex-direction: column; gap: 14px; }

/* fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.flab { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.in {
  font: inherit;
  width: 100%;
  min-height: 46px;            /* comfortable thumb target */
  padding: 11px 13px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.in:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.big-in { font-size: 20px; font-weight: 700; letter-spacing: 0.04em; }

/* the event picker: the <select> reuses .in but needs an explicit chevron (native appearance reset) */
select.event-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; }
select.event-select:invalid { color: var(--muted); }   /* the disabled "Select event…" placeholder reads muted */
.event-control { display: flex; flex-direction: column; gap: 6px; }
.msg.sm { min-height: 0; font-size: 12.5px; font-weight: 600; }
.note { resize: vertical; line-height: 1.4; }
/* per-team iso notes — two stacked boxes, each with a slight alliance-coloured border */
.team-notes { display: flex; flex-direction: column; gap: 8px; }
.team-note.red  { border-color: rgba(229,72,77,.55); }
.team-note.blue { border-color: rgba(23,99,255,.55); }
.team-note.red:focus  { border-color: var(--red);  box-shadow: 0 0 0 3px var(--red-soft);  }
.team-note.blue:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

/* 1–5 rating: a full-width segmented row of big tappable cells */
.seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.seg-b {
  font: inherit; font-size: 17px; font-weight: 700;
  min-height: 48px;
  border: 0; border-left: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft);
  cursor: pointer; transition: background .12s, color .12s;
}
.seg-b:first-child { border-left: 0; }
.seg-b.on { background: var(--primary); color: #fff; }
.seg-b:active { background: var(--primary-soft); }

/* tri-state capability toggles (Descorer / Stack grabber): tap a row to cycle Unknown → Yes → No.
   Colours stay inside the reserved palette — indigo --primary = the affirmative "Yes" (a selection,
   like .seg-b.on); a muted fill = "No"; a dashed neutral pill = "Unknown". No red/blue/green/amber. */
.tri-group { display: flex; flex-direction: column; gap: 8px; }
.tri {
  font: inherit; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 0 14px; text-align: left;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.tri:active { background: var(--primary-soft); }
.tri-lab { font-size: 15px; font-weight: 600; }
.tri-state {
  flex: none; min-width: 70px; text-align: center; padding: 4px 12px; border-radius: 99px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
.tri[data-val="unknown"] .tri-state { color: var(--muted); background: var(--bg); border: 1px dashed var(--line-strong); }
.tri[data-val="yes"] { border-color: var(--primary); }
.tri[data-val="yes"] .tri-state { color: #fff; background: var(--primary); }
.tri[data-val="no"] .tri-state { color: var(--ink-soft); background: rgba(120, 140, 170, .16); }

/* round-type chips (single-select; tap the active chip again to clear) — centred under "Match" */
/* the stage banner heading Screen 1 — reuses the .scoreboard panel + .sb-banner verbatim (identical
   to the Isolation / Interaction banners), just without the LED grid below it */
.setup-board { flex: none; }
.setup-board .sb-banner { border-bottom: 0; }

.match-id { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  font: inherit; font-weight: 700; font-size: 14px;
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--line-strong); border-radius: 99px;
  background: var(--surface); color: var(--ink-soft);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s, transform .08s;
}
.chip.on { background: var(--match); border-color: transparent; color: #fff; }
.chip:active { transform: scale(.98); }

/* numeric stepper: −  [editable value]  + */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.step-b {
  font: inherit; font-size: 22px; font-weight: 700;
  width: 48px; min-height: 46px; border: 0;
  background: var(--surface); color: var(--match); cursor: pointer;
}
.step-b:active { background: var(--match-soft); }
.step-v {
  width: 60px; padding: 0 6px; font: inherit; font-size: 18px; font-weight: 800;
  text-align: center; color: var(--ink);
  background: var(--surface); border: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.step-v:focus { outline: none; background: var(--match-soft); }

/* bottom actions row: a primary button + a light secondary link */
.actions { display: flex; align-items: center; gap: 14px; }
.actions .btn { flex: 1; }

/* buttons */
.btn {
  font: inherit; font-weight: 700; font-size: 16px;
  padding: 12px 16px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: filter .14s, transform .08s;
}
.btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); border-color: transparent; color: #fff; }
.btn.primary:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.99); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.big { min-height: 52px; margin-top: 2px; }
.btn.danger { background: var(--red); border-color: transparent; color: #fff; }
.btn.danger:hover { filter: brightness(1.06); }

/* ── modal confirm sheet (discard-guard) — backdrop + centred card ── */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(8, 12, 18, .55);
}
.sheet {
  width: 100%; max-width: 360px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 18px 18px 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
}
.sheet-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.sheet-msg { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.4; }
.sheet-actions { display: flex; gap: 10px; }
.sheet-actions .btn { flex: 1; min-height: 46px; }

/* status / validation messages */
.msg { margin: 0; min-height: 20px; font-size: 14px; font-weight: 600; }
.msg.ok { color: var(--ok-ink); }
.msg.warn { color: var(--warn-ink); }

/* ── Match Screen 2 (Isolation): the field as goal "tubes" you tap blocks into ── */
.stack.iso { gap: 16px; }

/* an actual-scoreboard look: a dark panel with bright, glowing, monospaced digits — kept dark in
   both colour schemes (a real scoreboard is dark). A banner names the stage, the 3-col grid below. */
.scoreboard { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  background: #0c1016; border: 1px solid #04070b; border-radius: 12px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 26px rgba(0,0,0,.65); }
/* the stage-name banner across the top of the board — a thicker bar carrying the Reset (left) and DQ
   (right) controls at its ends, with the stage name centred between them */
.sb-banner { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.06); }
.sb-title { flex: 1 1 auto; text-align: center; text-transform: uppercase; letter-spacing: .26em;
  font-size: 13px; font-weight: 800; color: #aeb9c8; text-indent: .26em; }
.sb-bz { flex: none; display: flex; }
/* the 3-column grid: red | centre labels | blue, three rows (WP · score · bonus). A faint side wash
   (red left / blue right, fading toward the centre) keeps each half identifiable with no RED/BLUE text */
.sb-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  row-gap: 5px; column-gap: 8px; padding: 9px 12px 11px;
  background: linear-gradient(90deg, rgba(229,72,77,.20), rgba(229,72,77,0) 42%),
              linear-gradient(270deg, rgba(70,130,255,.22), rgba(70,130,255,0) 42%); }
.sb-grid > * { justify-self: center; }
/* the centre-column row labels */
.sb-lbl { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #8893a4; white-space: nowrap; }
/* WP / Bonus tap pills — a signed value the scout cycles; tinted red/blue, dimmed when 0 */
.sb-pill { min-width: 46px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 12px; border-radius: 999px; border: 0; cursor: pointer; line-height: 1;
  font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sb-pill.red  { color: #ff7378; background: rgba(229,72,77,.18); }
.sb-pill.blue { color: #6aa0ff; background: rgba(70,130,255,.20); }
.sb-pill.zero { opacity: .4; }
.sb-pill:active { transform: scale(.95); }
/* G5 — a WIN PTS pill set by hand (wpEdited) no longer auto-tracks the score; mark it with a small amber
   corner dot. Amber is the existing edit-state accent (not a new colour); a DOT keeps it distinct in form
   from the publish-lifecycle `.changed` amber RING, so a pill that's both edited-and-changed reads cleanly.
   Reset returns win points to auto. */
.sb-pill.wp.man { position: relative; }
.sb-pill.wp.man::after { content: ""; position: absolute; top: 3px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 1.5px #0d1426; }
/* the big glowing score — an always-editable numeric input styled to look like a plain LED number */
.sb-score-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sb-num { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
  font-size: 42px; font-weight: 800; line-height: .98; letter-spacing: .01em; font-variant-numeric: tabular-nums;
  width: 3ch; min-width: 3ch; text-align: center; border: 0; background: none; padding: 0; outline: none; cursor: text; }
.sb-num.red  { color: #ff5a5f; text-shadow: 0 0 11px rgba(255,70,80,.55); caret-color: #ff5a5f; }
.sb-num.blue { color: #4d86ff; text-shadow: 0 0 11px rgba(70,130,255,.6); caret-color: #4d86ff; }
/* Not-recorded score (value null → empty input): the borderless LED would be invisible, so show a
   faint tappable box so the scout sees there's a score to enter. It vanishes once a digit is typed. */
.sb-num::placeholder { color: transparent; }
.sb-num:placeholder-shown { background: rgba(255,255,255,.05); border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.sb-num:focus, .sb-num:placeholder-shown:focus { background: rgba(255,255,255,.07); border-radius: 8px; box-shadow: none; }
.sb-mid { color: #39424f; font-size: 28px; font-weight: 700; }
/* per-side status tag under the score — empty until a DQ, then a small chip in the team's colour */
.sb-tag { min-height: 13px; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.sb-tag.red  { color: #ff7378; }
.sb-tag.blue { color: #6aa0ff; }
/* a DQ'd side dims its score + pills (the "DQ" tag shows below the score) */
.scoreboard.dq-red  .sb-num.red,  .scoreboard.dq-red  .sb-pill.red  { opacity: .4; }
.scoreboard.dq-blue .sb-num.blue, .scoreboard.dq-blue .sb-pill.blue { opacity: .4; }

/* the banner-end controls (Reset / DQ): compact icon-over-label chips that sit in the dark banner */
.sb-ctl { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 46px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  background: rgba(255,255,255,.05); color: #aeb9c8; font: inherit; cursor: pointer; }
.sb-ctl .ctl-ic { font-size: 15px; line-height: 1; }
.sb-ctl .ctl-lab { font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.sb-ctl:active { transform: scale(.97); }
.sb-ctl.reset.armed { border-color: var(--warn-ink); color: var(--warn-ink); background: var(--warn-bg); }
.sb-ctl.dq.on.red  { border-color: var(--red);  color: var(--red);  background: var(--red-soft); }
.sb-ctl.dq.on.blue { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

/* the field perimeter — a rounded frame + faint foam tint around ALL the controls (goals, X, park
   zones, + buttons), so the screen reads as a top-down field. The gap rows below carry the spacing
   between the goals and the Centre X (so it's smaller here). */
.iso-field { display: flex; flex-direction: column; gap: 4px; position: relative;
  padding: 14px 12px; background: rgba(120,140,170,.05); }

/* the field is wrapped in .field-panel, which carries the frame + a "Score" banner (matching the
   scoreboard / Observations titled-banner rhythm — but light, since the field is a light top-down view).
   The field itself keeps its interior layout + foam tint and drops its own border to the panel. */
.field-panel { border: 1.5px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.field-banner { background: rgba(120,140,170,.12); border-bottom-color: var(--line-strong); }
.field-banner .sb-title { color: var(--ink-soft); }

/* a gap row carrying the two Control-Bonus "C" marks, sat between a Long Goal and the Centre X. Each C
   sits at the midpoint of the line joining its Long-Goal end (~10% from the field edge) and its
   centre-arm tip (~40% from the edge) → ≈25% / 75% across, which holds at any width. */
.cb-row { position: relative; height: 26px; }
.cb-row .cx-c { position: absolute; top: 50%; }
.cb-row .cx-c.tl, .cb-row .cx-c.bl { left: 25%; transform: translate(-50%, -50%); }
.cb-row .cx-c.tr, .cb-row .cx-c.br { left: 75%; transform: translate(-50%, -50%); }

/* a Long Goal: the tube spans the middle, flanked by the red (left) and blue (right) capture combos */
.goal.long { display: flex; align-items: center; gap: 7px; }

/* the capture combo beside a goal end — ONE bordered control: a checkbox (left) + a count box (right),
   attached, with a 0.5px alliance-coloured border around both and a hairline between them */
.goal-combo { flex: none; display: inline-flex; align-items: stretch; height: 30px; overflow: hidden;
  border: 0.5px solid; border-radius: 7px; }
.goal-combo.red  { border-color: var(--red);  }
.goal-combo.blue { border-color: var(--blue); }
/* checkbox: a grey ✓ when off, turning red when scored (both combos — the alliance is already carried by
   the combo's coloured border + the internal divider). */
.gc-check { flex: none; width: 24px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-right: 0.5px solid; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 900; line-height: 1; color: var(--muted); }
.goal-combo.red  .gc-check { border-right-color: var(--red); }
.goal-combo.blue .gc-check { border-right-color: var(--blue); }
/* lit ✓ takes the combo's alliance colour — red on the red side, blue on the blue side */
.goal-combo.red  .gc-check.on { color: var(--red);  background: var(--red-soft);  }
.goal-combo.blue .gc-check.on { color: var(--blue); background: var(--blue-soft); }
.gc-check:active { transform: scale(.96); }
/* count box: slightly wider than the checkbox, no own border (the combo border wraps both) */
.gc-box { flex: none; width: 32px; text-align: center; font-size: 17px; font-weight: 800;
  font-variant-numeric: tabular-nums; padding: 0 2px; border: 0; outline: none; background: transparent; color: var(--ink); }
.gc-box:focus { background: rgba(127,139,156,.12); }

/* the Long Goal trough — 15 fixed cells (each a block, empty cells greyed) so it keeps the same size
   whether full or empty, plus two white-tape bars dividing left | mid | right. */
/* overflow VISIBLE (not hidden) so a contributing end-block's Control-Bonus glow isn't clipped at the
   tube edge; the blocks sit inside the padding, so the rounded container still reads clean. The
   padding (5px 9px) gives blocks breathing room off the goal walls — matched on the centre tubes
   below so all four goals share the same inset. */
.tube.long { flex: 1 1 auto; min-width: 0; min-height: 28px; display: flex; align-items: center; gap: 3px;
  padding: 5px 9px; border-radius: 9px; background: rgba(120,140,170,.10); border: 1px solid var(--line-strong); overflow: visible; }
/* empty segments holding the 6 · 3 · 6 proportion (no block cells now) */
.tube.long .seg { min-width: 0; }
.tube.long .seg.s6 { flex: 6; }
.tube.long .seg.s3 { flex: 3; }
/* the white-tape segment boundary — a thin bar with a small gap each side */
.tube.long .tape { flex: none; width: 2px; align-self: stretch; margin: 2px 1.5px; border-radius: 1px; background: var(--muted); }

/* the middle row: red park zone · the Centre-Goal X · blue park zone */
/* negative side margins cancel the .iso-field padding so the park zones sit flush against the perimeter */
.center-row { display: flex; align-items: center; justify-content: space-between; margin: 0 -12px; gap: 4px; }

/* the two Centre Goals as a crossing X at 90° — sized to ~half a Long Goal (22.6" vs 48.8"). Two empty
   rotated troughs: upper runs BL↔TR (rotate −45°), lower TL↔BR (rotate +45°); they overlap at the
   crossing with Mid (upper) drawn on top. Capture combos sit at the four arm tips. */
.center-x { position: relative; flex: none; width: 230px; height: 168px; }
.cg-tube { position: absolute; top: 50%; left: 50%; width: 154px; height: 26px; margin: -13px 0 0 -77px;
  border-radius: 8px; background: rgba(120,140,170,.10); border: 1px solid var(--line-strong); }
.cg-tube.upper { transform: rotate(-45deg); z-index: 1; }  /* Mid on top of Low */
.cg-tube.lower { transform: rotate(45deg); }
/* a capture combo at each diagonal arm tip, nudged outward from the tip so it clears the X arms */
.center-x .cx-combo { position: absolute; transform: translate(-50%, -50%); z-index: 3; }
.cx-combo.tl { left: 44px;  top: 16px; }
.cx-combo.tr { left: 186px; top: 16px; }
.cx-combo.bl { left: 44px;  top: 152px; }
.cx-combo.br { left: 186px; top: 152px; }
/* the Control-Bonus indicator (positioned by .cb-row, above/below) — a tap button cycling none → red →
   blue. Grey = nobody, red/blue = holder. */
.cx-c { z-index: 2; padding: 0; font-family: inherit; cursor: pointer;
  width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; border: 1.5px solid var(--line-strong); color: var(--muted); background: var(--surface); }
.cx-c.red  { color: #fff; background: var(--red);  border-color: var(--red); }
.cx-c.blue { color: #fff; background: var(--blue); border-color: var(--blue); }

/* a HELD Control Bonus gains a white/amber glow so a set corner reads as active at a glance */
.cx-c.cb-win { box-shadow: 0 0 0 1.5px #fff, 0 0 9px 2px var(--cb-glow); }

/* park zones on the field edges — faint alliance tint, with a tappable barrier X. Square (not rounded)
   to read as a field barrier flush against the perimeter. */
.park-zone { flex: none; width: 42px; height: 66px; border-radius: 0;
  display: flex; align-items: center; justify-content: center; border: 1px solid; }
.park-zone.red  { background: rgba(229,72,77,.10); border-color: rgba(229,72,77,.40); }
.park-zone.blue { background: rgba(23,99,255,.10); border-color: rgba(23,99,255,.40); }
.park-x { width: 100%; height: 100%; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 26px; font-weight: 900; line-height: 1; color: var(--muted); opacity: .35; }
.park-x.on { opacity: 1; }
.park-zone.red  .park-x.on { color: var(--red); }
.park-zone.blue .park-x.on { color: var(--blue); }

/* ── Match Screen 3 (Interaction): a Screen-2 twin (scorecard + field) plus a single scorecard-style
   Observations board and per-team notes. The scorecard, field, park zones and notes all reuse the
   Isolation styles above; only the Observations board below is new. ── */
.stack.int { gap: 16px; }
.stack.wrap { gap: 16px; }

/* Observations board — reuses the dark .scoreboard panel; a 3-col grid (red wash left · centred label ·
   blue wash right) like the score grid, one row per question with that side's control on its side. */
.obs-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  row-gap: 9px; column-gap: 10px; padding: 11px 12px 13px;
  background: linear-gradient(90deg, rgba(229,72,77,.20), rgba(229,72,77,0) 42%),
              linear-gradient(270deg, rgba(70,130,255,.22), rgba(70,130,255,0) 42%); }
.obs-grid > * { justify-self: center; }
/* a full-width hairline separating the question groups (Descoring · Field play · Loaders · Parking) */
.obs-hr { grid-column: 1 / -1; justify-self: stretch; height: 1px; margin: 1px 0; background: rgba(255,255,255,.12); }

/* a value pill (Descorer / Time cycle, Crossed / Parked boolean) — the sb-pill look, but on its own
   type scale so all Observations pills match: "Scoring"-sized (12px) and NOT bold (the scoreboard's
   sb-pill is 16px/900 — too large/heavy here). A set value keeps its side colour; an unset "–", gated,
   or disabled value reads grey so it looks "off" (not a faint-tinted colour). */
.obs-pill { min-width: 62px; font-size: 12px; font-weight: 600; }
.obs-pill:disabled { cursor: default; }
.obs-pill.zero { color: #8893a4; opacity: 1; background: rgba(255,255,255,.04); }

/* a side's small multi-toggle group (Obstructed: Scoring/Parking · Used Aisle: Top/Bottom) — stacked
   vertically (one pill above the other) so the two-pill rows stay narrow and the panel fits the width */
.obs-group { display: inline-flex; flex-direction: column; align-items: stretch; gap: 5px; }
/* off: grey, reads as inactive/"disabled"; on: a leading ✓ (added in JS) + the side colour, faintly
   tinted — NOT a solid white-on-colour fill */
.obs-mini { font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  min-height: 30px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #8893a4;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s, transform .08s; }
.obs-mini:active { transform: scale(.95); }
.obs-mini.red.on  { color: #ff7378; background: rgba(229,72,77,.16); border-color: rgba(229,72,77,.55); }
.obs-mini.blue.on { color: #6aa0ff; background: rgba(70,130,255,.18); border-color: rgba(70,130,255,.55); }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f141b; --surface: #19212c; --ink: #e7edf5; --ink-soft: #a7b4c4;
    --muted: #7f8b9c; --line: #283342; --line-strong: #38465a;
    --primary-soft: #16294d;
    --ok-bg: #15311f; --ok-ink: #5fd089; --warn-bg: #3a1d1d; --warn-ink: #f08a7f;
    --red: #f0676b; --red-soft: #3a1d1d; --blue: #4d86ff; --blue-soft: #16294d;
    --match: #818cf8; --match-soft: #1b2440; --match-ring: rgba(129,140,248,.40);
    --amber: #fbbf24; --amber-soft: rgba(251, 191, 36, .20); --amber-ink: #fcd34d;
  }
  /* keep the blue-on-dark chips legible on the dark wash */
  .id-pill.team { color: #b9d2ff; }
  .id-pill.team .k { color: #8fb4ff; }
}