/* ══ Padel Console — control-surface styles ══
   Broadcast rack-unit aesthetic: machined dark steel, hairline seams,
   tally-red for anything on air, condensed industrial type. Layout is a
   fixed three-zone deck (operate · air · stats) sized for a laptop
   browser; pre-event configuration lives in the Setup drawer. */

:root {
  /* Steel */
  --steel-0: #0b0c0e;   /* page */
  --steel-1: #121417;   /* panel */
  --steel-2: #191c20;   /* inset (inputs, rows) */
  --steel-3: #22262b;   /* hover */
  --seam: #24282e;
  --seam-strong: #343a42;

  /* Ink */
  --ink: #e8eaed;
  --ink-2: #9aa2ac;
  --ink-3: #646d78;
  --ink-4: #3d434c;

  /* Signals */
  --tally: #ff3d33;              /* ON AIR — the only loud colour */
  --tally-text: #ff6a5f;
  --tally-bg: #2a1210;
  --tally-glow: rgba(255, 61, 51, 0.35);
  --ok: #3fd189;  --ok-bg: #0d2418;
  --warn: #f6b73c; --warn-bg: #251d0a;
  --focus: #5aa2ff; --focus-bg: #12233c;

  /* Type */
  --font-ui: 'Barlow Semi Condensed', system-ui, sans-serif;
  --font-disp: 'Barlow Condensed', var(--font-ui);
  --font-mono: 'IBM Plex Mono', Consolas, monospace;

  --r: 4px;
  --r-lg: 7px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Shell: the deck never scrolls; zones absorb overflow ── */
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  font-size: 13px;
  background:
    radial-gradient(140% 90% at 50% -10%, #16181c 0%, var(--steel-0) 55%),
    var(--steel-0);
  color: var(--ink);
  overflow: hidden;
}
#deck { height: 100%; display: flex; flex-direction: column; padding: 10px 12px 12px; gap: 10px; max-width: 1720px; margin: 0 auto; }

/* ── Top bar ── */
.topbar {
  display: flex; align-items: center; gap: 16px;
  background: var(--steel-1); border: 1px solid var(--seam); border-radius: var(--r-lg);
  padding: 8px 12px; flex-shrink: 0;
}
.brandmark {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-disp); font-size: 17px; font-weight: 700;
  letter-spacing: 2.5px; white-space: nowrap;
}
.brandmark em { font-style: normal; color: var(--ink-3); font-weight: 500; }
.lamp {
  width: 8px; height: 8px; border-radius: 1px; background: var(--ink-4);
  transition: background 0.2s, box-shadow 0.2s;
}
.lamp.on { background: var(--tally); box-shadow: 0 0 8px var(--tally-glow); }

.status {
  flex: 1; min-width: 0; text-align: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.6px;
  color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status.tiebreak { color: var(--warn); font-weight: 600; }
.status.match-over { color: var(--ok); font-weight: 600; }

.topbar-right { display: flex; align-items: center; gap: 8px; }
.clock {
  font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ink-2);
  background: var(--steel-2); border: 1px solid var(--seam);
  padding: 5px 12px; border-radius: var(--r); font-variant-numeric: tabular-nums;
}
.btn {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
  padding: 6px 14px; border-radius: var(--r); cursor: pointer; transition: all 0.15s;
  background: var(--steel-2); border: 1px solid var(--seam-strong); color: var(--ink-2);
}
.btn:hover { color: var(--ink); border-color: var(--ink-3); }
.btn.danger:hover { color: var(--tally-text); border-color: var(--tally); }
.fs-btn { font-size: 15px; padding: 4px 10px; line-height: 1.2; }
.fs-btn.active { color: var(--ink); border-color: var(--ink-3); }

/* ── Deck grid ── */
.deck-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(360px, 400px) minmax(0, 1fr) minmax(280px, 330px);
  gap: 10px;
}
.zone {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding-right: 2px;
  scrollbar-width: thin; scrollbar-color: var(--seam-strong) transparent;
}
.zone::-webkit-scrollbar, .stats-list::-webkit-scrollbar, .highlight-list::-webkit-scrollbar,
.sponsor-list::-webkit-scrollbar, .drawer-body::-webkit-scrollbar { width: 8px; }
.zone::-webkit-scrollbar-track, .stats-list::-webkit-scrollbar-track, .highlight-list::-webkit-scrollbar-track,
.sponsor-list::-webkit-scrollbar-track, .drawer-body::-webkit-scrollbar-track { background: transparent; }
.zone::-webkit-scrollbar-thumb, .stats-list::-webkit-scrollbar-thumb, .highlight-list::-webkit-scrollbar-thumb,
.sponsor-list::-webkit-scrollbar-thumb, .drawer-body::-webkit-scrollbar-thumb {
  background: var(--seam-strong); border-radius: 4px;
}
@media (max-width: 1100px) {
  body { overflow: auto; }
  .deck-grid { grid-template-columns: 1fr; }
  #deck { height: auto; }
  /* stacked: nothing is height-constrained, so the monitor is a fixed box */
  .zone-air .monitor-panel { flex: 0 0 auto; min-height: 0; }
}

/* ── Panels ── */
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0)) , var(--steel-1);
  border: 1px solid var(--seam); border-radius: var(--r-lg);
  padding: 10px 12px 12px; flex-shrink: 0;
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.panel-tag {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 2.5px; white-space: nowrap;
}
.panel-tag::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--ink-4); }
.panel-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.5px; white-space: nowrap; }
.link-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-3); transition: color 0.15s;
}
.link-btn:hover { color: var(--tally-text); }
/* destructive link actions (reset stats, clear all) read as such at rest */
.link-btn.danger { color: #b8534b; }
.link-btn.danger:hover { color: var(--tally-text); }

/* ── Broadcast-styled scoreboard (theme-driven via --o-* vars) ── */
.bug-mimic {
  border-top: 4px solid var(--o-c1, #ffcc08);
  border-bottom: 4px solid var(--o-c1, #ffcc08);
  border-radius: var(--o-radius, 0); overflow: hidden;
}
.bug-mimic .score-row { position: relative; display: flex; align-items: center; gap: 10px; background: var(--o-surface, #000); padding: 6px 8px 6px 0; }
.bug-mimic .score-row::before {
  content: ""; position: absolute; inset: 0;
  background: var(--o-row-gloss); pointer-events: none; z-index: 1;
}
.bug-mimic .score-row > * { position: relative; z-index: 2; }
.team-color-bar { width: 4px; align-self: stretch; border-radius: 2px; background: var(--focus); }
.team-name-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.serve-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.18); transition: all 0.2s;
}
.serve-dot.active { background: var(--o-c1, #ffcc08); box-shadow: 0 0 8px var(--o-c1, #ffcc08); }
/* The console's own condensed face, not the theme's: this cell is ~110px
   and an input can't wrap, so a wide display font (Montserrat caps) would
   push "Durham & Cleveland" below legibility. fitNameInput() steps the
   size down from 23px until the whole name shows. */
.team-name-input {
  background: transparent; border: none; outline: none; width: 100%; min-width: 0;
  border-bottom: 1px dashed transparent; transition: border-color 0.2s;
  font-family: var(--font-disp); text-transform: uppercase; letter-spacing: 0.3px;
  font-size: 23px; font-weight: 700; color: var(--o-surface-text, #fff); padding-top: 2px;
}
.team-name-input:hover, .team-name-input:focus { border-bottom-color: rgba(255, 255, 255, 0.3); }
.set-scores { display: flex; gap: 5px; }
.score-cell, .point-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; }
/* Correction steppers: real targets, but only on reach — the scoreboard
   reads as a clean readout until you go for a number. Opacity, not
   display, so the rows never shift. Touch devices keep them visible. */
.score-arrow, .point-arrow {
  background: none; border: none; font-size: 11px; line-height: 1; cursor: pointer;
  padding: 2px 6px; transition: color 0.15s, opacity 0.12s; color: rgba(255, 255, 255, 0.45);
  opacity: 0;
}
.point-arrow { padding: 2px 8px; }
.score-row:hover .score-arrow, .score-row:hover .point-arrow,
.score-row:focus-within .score-arrow, .score-row:focus-within .point-arrow { opacity: 1; }
.score-arrow:hover, .point-arrow:hover { color: var(--o-c1, #ffcc08); }
@media (hover: none) { .score-arrow, .point-arrow { opacity: 0.7; } }
.game-score {
  text-align: center; cursor: pointer; transition: filter 0.15s;
  background: var(--o-cell, #fff); color: var(--o-cell-text, #000);
  font-family: var(--o-font, inherit); font-size: 25px; font-weight: 700;
  min-width: 54px; padding: 4px 8px 2px;
}
.game-score:hover { filter: brightness(0.9); }
.game-score.ad { color: var(--o-alt, #b43030); }
.set-score {
  text-align: center; border: none; outline: none;
  appearance: textfield; -moz-appearance: textfield;
  background: var(--o-c1, #ffcc08); color: var(--o-c1-text, #000);
  font-family: var(--o-font, inherit); font-size: 19px; font-weight: 700;
  width: 36px; padding: 5px 0 3px;
}
.set-score::-webkit-outer-spin-button, .set-score::-webkit-inner-spin-button { -webkit-appearance: none; }
.set-score.current { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
.set-score.lost { opacity: 0.55; }
.set-score.future { opacity: 0.3; }
.set-score.future:hover, .set-score.future:focus { opacity: 0.75; }

/* ── Players strip — quick edit under the scoreboard; the names ride
   the identity graphics (matchup, lower third, stat card) ── */
.player-strip { margin-top: 9px; border-top: 1px solid var(--seam); padding-top: 8px; }
.strip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.strip-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 1.5px; text-transform: uppercase; }
.strip-note { flex: 1; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.player-grid input {
  min-width: 0; padding: 5px 8px; background: var(--steel-2);
  border: 1px solid var(--seam); border-radius: var(--r);
  color: var(--ink); font-size: 12px; font-family: var(--font-ui); outline: none;
}
.player-grid input:focus { border-color: var(--focus); }
/* Toggle off → names stay stored but leave the graphics; dim to say so */
.player-strip:has(#showPlayersToggle:not(:checked)) .player-grid { opacity: 0.45; }

/* Set navigation is a correction, not a control: the set label always
   shows; the prev/next keys surface when you reach for the scoreboard */
.set-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.set-nav button {
  background: transparent; border: 1px solid transparent; color: var(--ink-3);
  padding: 3px 10px; border-radius: var(--r); font-size: 11px; font-family: var(--font-ui);
  cursor: pointer; transition: all 0.15s; opacity: 0;
}
.panel:hover .set-nav button:not(:disabled), .set-nav:focus-within button:not(:disabled) { opacity: 1; }
.set-nav button:hover:not(:disabled) { border-color: var(--seam-strong); color: var(--ink); background: var(--steel-2); }
.set-nav button:disabled { opacity: 0.25; cursor: default; }
@media (hover: none) { .set-nav button:not(:disabled) { opacity: 0.8; } }
.set-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); letter-spacing: 2px; text-transform: uppercase; }

/* ── Point keys ── */
.point-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex-shrink: 0; }
.point-btn {
  position: relative; border: none; border-radius: var(--r-lg); padding: 16px 10px 15px;
  font-family: var(--font-disp); font-size: 30px; font-weight: 700; letter-spacing: 4px;
  cursor: pointer; transition: transform 0.08s, filter 0.15s; color: #fff;
}
.point-btn:hover { filter: brightness(1.12); }
.point-btn:active { transform: scale(0.975); }
.point-btn .team-label {
  display: block; font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px; margin-bottom: 2px; opacity: 0.85; text-transform: none;
}
.point-btn.flash { animation: btnFlash 0.35s ease; }
@keyframes btnFlash { 0% { filter: brightness(1.7); } 100% { filter: brightness(1); } }

.hotkey-badge {
  position: absolute; top: 7px; right: 8px; font-family: var(--font-mono); font-size: 10.5px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 1px 6px; border-radius: 3px; letter-spacing: 0;
}
.actions .hotkey-badge, .tally-cap .hotkey-badge {
  position: static; background: var(--steel-0); border-color: var(--seam-strong); color: var(--ink-3);
}

/* ── Undo / save row ── */
.actions { display: flex; gap: 10px; flex-shrink: 0; }
.actions button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--steel-1); border: 1px solid var(--seam-strong); color: var(--ink-2);
  padding: 10px; border-radius: var(--r-lg); font-size: 13px; font-weight: 600;
  font-family: var(--font-ui); cursor: pointer; transition: all 0.15s;
}
.actions button:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.actions button:disabled { opacity: 0.35; cursor: default; }
/* Undo is the panic key — heavier presence, amber signal on reach */
.actions #undoBtn { flex: 1.5; font-weight: 700; letter-spacing: 0.5px; background: var(--steel-2); }
.actions #undoBtn:hover:not(:disabled) { border-color: var(--warn); color: var(--warn); }
.actions button.flash-confirm { animation: confirmFlash 0.5s ease; }
@keyframes confirmFlash { 0% { border-color: var(--ok); color: var(--ok); } 100% { } }

/* ── Moments (highlights) ── */
.moments-panel { flex: 1; min-height: 90px; display: flex; flex-direction: column; }
.highlight-btn-row { margin-bottom: 8px; }
.highlight-btn-row input {
  width: 100%; padding: 6px 9px; background: var(--steel-2);
  border: 1px solid var(--seam); border-radius: var(--r);
  color: var(--ink); font-size: 12px; font-family: var(--font-ui); outline: none;
}
.highlight-btn-row input:focus { border-color: var(--focus); }
.highlight-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--seam-strong) transparent; }
.highlight-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 8px; border-radius: var(--r); font-size: 12px;
}
.highlight-item:nth-child(odd) { background: var(--steel-2); }
.highlight-item .hl-label { color: var(--focus); font-weight: 600; margin-right: 8px; cursor: pointer; }
.highlight-item .hl-score { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.highlight-item .hl-time { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; margin-left: 8px; }
.hl-delete {
  background: none; border: none; color: var(--ink-4); cursor: pointer;
  font-size: 14px; transition: color 0.15s; padding: 0 2px;
}
.hl-delete:hover { color: var(--tally-text); }
.stats-empty { font-size: 12px; color: var(--ink-4); padding: 8px 2px; }

/* ── Program monitor ── */
/* The monitor is the air zone's flexible element: every control below
   it keeps its size and the preview takes whatever height is left, so
   the cut tiles, text fields and customs never scroll off screen.
   fitMonitor() sizes the box to the largest 16:9 that fits the panel. */
.zone-air .monitor-panel {
  flex: 1 1 0; min-height: 150px; overflow: hidden;
  display: flex; flex-direction: column;
}
.monitor-panel { padding-bottom: 10px; }
.onair-beacon {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 2.5px;
  color: var(--ink-4); border: 1px solid var(--seam); border-radius: 3px;
  padding: 2px 8px 1px; transition: all 0.2s;
}
.onair-beacon.on {
  color: #fff; background: var(--tally); border-color: var(--tally);
  box-shadow: 0 0 14px var(--tally-glow);
  animation: beaconPulse 1.6s ease-in-out infinite;
}
@keyframes beaconPulse { 50% { box-shadow: 0 0 4px var(--tally-glow); } }
.monitor {
  position: relative; overflow: hidden; flex: 1; min-height: 0;
  width: 100%; margin: 0 auto; cursor: pointer;
  border-radius: var(--r); border: 1px solid var(--seam-strong); background: #000;
}
.monitor.sized { flex: none; } /* explicit width/height from fitMonitor() */
.monitor iframe {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  border: 0; transform-origin: 0 0; pointer-events: none; background: transparent;
}
/* Idle watermark: black without it reads as broken, not as "nothing cut" */
.monitor::after {
  content: "NO GRAPHICS ON AIR"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 4px;
  color: var(--ink-4); opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.monitor.idle::after { opacity: 1; }

/* ── Tally tiles ── */
/* Cut tiles: one uniform thumbnail per graphic, three across on a laptop
   (two on a narrow window) so every tile stays above the fold */
.tally-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex-shrink: 0; }
@media (max-width: 1299px) { .tally-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-frame {
  border: 1px solid var(--seam); border-radius: var(--r-lg); overflow: hidden;
  background: var(--steel-1); cursor: pointer; position: relative;
  transition: border-color 0.15s, box-shadow 0.2s;
}
.cp-frame:hover { border-color: var(--seam-strong); }
.cp-frame:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cp-frame.live { border-color: var(--tally); box-shadow: 0 0 0 1px var(--tally), 0 0 16px var(--tally-glow); }
.cp-view { overflow: hidden; position: relative; background: #101113; }
.cp-view iframe {
  border: 0; display: block; pointer-events: none;
  /* width/height/scale set per tile by fitTiles(): each overlay page
     gets a FIXED viewport sized to its graphic, so the tile shows the
     true layout at any window size (3×-the-tile viewports cropped the
     960px card / 1200px strip mid-name and varied machine to machine) */
  transform-origin: 0 0;
}
/* Every tile the same height. A three-across tile is ~220px wide, so
   124px is the whole 16:9 frame for the full-frame boards and a centred
   band with the graphic at its natural proportions for the rest
   (fitTiles() gives each page its own viewport width). */
.cp-view { height: 124px; }
/* Off air = dimmed thumbnail, so the live ones read from across the
   room. Hover restores it so a card can be checked before it is cut. */
.cp-frame:not(.live) .cp-view { filter: brightness(0.55); transition: filter 0.15s; }
.cp-frame:not(.live):hover .cp-view { filter: brightness(0.9); }
/* County Cup preset: the lower third IS the matchup graphic and the
   board covers "coming up", so the Matchup tile (and its title field
   and URL button) retire. */
body.theme-cc .cp-versus, body.theme-cc .ctx-versus, body.theme-cc .ol-versus { display: none; }
.tally-cap {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; border-top: 1px solid var(--seam); background: var(--steel-1);
}
.tally-name {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink-2);
}
.cp-frame.live .tally-name { color: var(--tally-text); }
.tally-cap .hotkey-badge { margin-left: auto; }
.cp-frame.live .tally-cap::before {
  content: "AIR"; order: 2;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px;
  color: #fff; background: var(--tally); border-radius: 2px; padding: 1px 5px;
}
.cp-note { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Context row (card mode · matchup title) ── */
/* wrap: below ~1300px the nowrap labels would otherwise hold the row
   wider than the zone and put a horizontal scrollbar under the deck */
.context-row { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.ctx {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: var(--steel-1); border: 1px solid var(--seam); border-radius: var(--r-lg);
  padding: 6px 9px;
}
/* Real flex-basis (not 0): with basis 0 the box always "fits" the
   current line, so instead of wrapping it collapses and its nowrap
   label + input spill out of the zone. */
.ctx-grow { flex: 1 1 220px; min-width: 0; }
/* Mode-scoped fields: a text box shows only while the mode that reads
   it is selected (lower third → Text; board → Event or Matchup), so the
   row stays at one or two lines instead of four */
.ctx-l3-text, .ctx-board-match { display: none; }
body.l3-text .ctx-l3-text { display: flex; }
body.board-match .ctx-board-match { display: flex; }
body.board-match .ctx-board-event { display: none; }
.ctx-label {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
  letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
}
.ctx input {
  flex: 1; min-width: 0; padding: 4px 8px; background: var(--steel-2);
  border: 1px solid var(--seam); border-radius: var(--r);
  color: var(--ink); font-size: 12px; font-family: var(--font-ui); outline: none;
}
.ctx input:focus { border-color: var(--focus); }

/* ── Segmented controls ── */
.seg { display: flex; gap: 3px; }
.seg button {
  padding: 4px 10px; font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 1px; cursor: pointer;
  background: var(--steel-2); border: 1px solid var(--seam);
  border-radius: var(--r); color: var(--ink-3); transition: all 0.15s;
}
.seg button:hover { color: var(--ink-2); border-color: var(--seam-strong); }
.seg button.active { background: var(--focus-bg); border-color: var(--focus); color: var(--focus); }

/* ── Badge controls (Setup drawer) ── */
.badge-manual { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.seg.badge-style-seg { margin: 8px 0 4px; }
.badge-manual input[type="text"] {
  flex: 1; min-width: 0; padding: 6px 9px; background: var(--steel-2);
  border: 1px solid var(--seam); border-radius: var(--r);
  color: var(--ink); font-size: 12px; font-family: var(--font-ui); outline: none;
}
.badge-manual input[type="text"]:focus { border-color: var(--focus); }

/* ── Toggles ── */
.toggle { position: relative; width: 38px; height: 20px; cursor: pointer; flex-shrink: 0; }
.toggle input { display: none; }
.toggle .slider {
  position: absolute; inset: 0; background: var(--steel-3); border-radius: 10px;
  border: 1px solid var(--seam-strong);
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.toggle .slider::before {
  content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink-3); top: 3px; left: 3px;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.toggle input:checked + .slider { background: var(--focus-bg); border-color: var(--focus); }
.toggle input:checked + .slider::before { background: var(--focus); transform: translateX(18px); }

/* ── Stats zone ── */
.zone-stats { display: flex; }
.zone-stats .stats-section { flex: 1; min-height: 140px; display: flex; flex-direction: column; }
.stats-list {
  flex: 1; min-height: 50px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  scrollbar-width: thin; scrollbar-color: var(--seam-strong) transparent;
}
.stat-row, .stats-auto-row {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 7px;
  padding: 5px 8px; border-radius: var(--r); background: var(--steel-2);
  border: 1px solid transparent;
}
.stats-auto-row, .stat-row.no-story { grid-template-columns: 1fr auto auto; }
.stats-auto-row { margin-bottom: 8px; background: transparent; border: 1px dashed var(--seam-strong); }
.stat-row.active, .stats-auto-row.active { background: var(--focus-bg); border-color: var(--focus); }
/* Row text wraps rather than truncates: the badge rows ARE the on-air
   text, and a clipped "Holds Durham & Cleveland 4/10…" hides what is live */
.stat-label { min-width: 0; font-size: 13px; color: var(--ink-2); line-height: 1.3; overflow-wrap: anywhere; }
.stat-value { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-weight: 600; white-space: nowrap; }

/* Tabbed rows: Badge tab shows the exact on-air text, Story tab the
   head-to-head pairs. Whole row is the control; on air = tally red. */
.stat-row.badge-row { grid-template-columns: 1fr auto auto; cursor: pointer; }
.stat-row.story-row { grid-template-columns: 1fr auto auto auto; cursor: pointer; }
.stat-row.badge-row:hover, .stat-row.story-row:hover { border-color: var(--seam-strong); }
.badge-text {
  min-width: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  line-height: 1.35; overflow-wrap: anywhere;
}
.row-state {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--tally-text); white-space: nowrap;
}
.stat-row.badge-row.live, .stat-row.story-row.live {
  background: var(--tally-bg); border-color: var(--tally);
}
.stat-row.badge-row.live .badge-text, .stat-row.story-row.live .stat-label { color: var(--ink); }
.stat-pin {
  background: var(--steel-0); border: 1px solid var(--seam-strong); color: var(--ink-3);
  font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 3px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.stat-pin:hover { border-color: var(--focus); color: var(--ink); }
.stat-row.active .stat-pin, .stats-auto-row.active .stat-pin { background: var(--focus); color: #fff; border-color: var(--focus); }
/* Actions surface on reach (hover/keyboard), stay put on the active row —
   the panel reads as a stats sheet until you go for a control. */
.stat-row .stat-pin, .stats-auto-row .stat-pin { opacity: 0; transition: opacity 0.12s, border-color 0.15s, color 0.15s; }
.stat-row:hover .stat-pin, .stat-row:focus-within .stat-pin, .stat-row.active .stat-pin,
.stats-auto-row:hover .stat-pin, .stats-auto-row:focus-within .stat-pin, .stats-auto-row.active .stat-pin { opacity: 1; }

/* "8s" timed buttons: hidden at rest where there is a pointer (thirteen
   identical buttons are noise), half-visible on touch (the courtside
   iPad has no hover), armed = tally red while counting down */
.stat-pin.timed-btn { min-width: 30px; text-align: center; }
.stat-row .stat-pin.timed-btn { opacity: 0; }
@media (hover: none) { .stat-row .stat-pin.timed-btn { opacity: 0.55; } }
.stat-row:hover .stat-pin.timed-btn, .stat-row:focus-within .stat-pin.timed-btn { opacity: 1; }
.stat-row .stat-pin.timed-btn.armed { opacity: 1; background: var(--tally); border-color: var(--tally); color: #fff; }

/* ── Custom graphics (uploaded full-frame overlays) ── */
.customs-list { display: flex; flex-direction: column; gap: 4px; }
.custom-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px; border-radius: var(--r); background: var(--steel-2);
  border: 1px solid transparent;
}
.custom-row.live { border-color: var(--tally); }
.custom-thumb {
  width: 46px; height: 26px; object-fit: contain; display: block;
  background: #000; border: 1px solid var(--seam); border-radius: 3px;
}
.custom-name { min-width: 0; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custom-row.live .custom-name { color: var(--tally-text); }
.custom-row.live .custom-air { background: var(--tally); border-color: var(--tally); color: #fff; }

/* ── Setup drawer ── */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(5, 6, 8, 0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.22s; z-index: 50;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw;
  background: var(--steel-1); border-left: 1px solid var(--seam-strong);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.5);
  transform: translateX(102%); transition: transform 0.24s cubic-bezier(0.2, 0.85, 0.25, 1);
  z-index: 60; display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--seam); flex-shrink: 0;
}
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 20px; scrollbar-width: thin; scrollbar-color: var(--seam-strong) transparent; }
.drawer-sec { padding: 14px 0 4px; border-bottom: 1px solid var(--seam); }
.drawer-sec:last-child { border-bottom: none; }
.sec-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 10px;
}
.summary-note { color: var(--ink-3); letter-spacing: 0.5px; text-transform: none; }

.select-row { display: flex; gap: 8px; margin-bottom: 8px; }
.select-row select {
  flex: 1; min-width: 0; background: var(--steel-2); border: 1px solid var(--seam-strong);
  color: var(--ink); padding: 7px 9px; border-radius: var(--r);
  font-size: 12px; font-family: var(--font-ui); outline: none; cursor: pointer;
}
.select-row select:focus { border-color: var(--focus); }

.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; }
/* scorebug shape switch: only meaningful under the County Cup theme */
.bug-style-row { display: none; }
body.theme-cc .bug-style-row { display: flex; }
.setting-row + .setting-row { border-top: 1px solid var(--seam); }
.setting-label { font-size: 12.5px; color: var(--ink-2); }

.sponsor-add-row { display: flex; gap: 8px; margin: 10px 0 8px; }
.sponsor-add-row input {
  flex: 1; min-width: 0; padding: 7px 9px; background: var(--steel-2);
  border: 1px solid var(--seam); border-radius: var(--r);
  color: var(--ink); font-size: 12px; outline: none; font-family: var(--font-ui);
}
.sponsor-add-row input:focus { border-color: var(--focus); }
.sponsor-add-row button {
  background: var(--steel-2); border: 1px solid var(--seam-strong); color: var(--ink-2);
  padding: 7px 14px; border-radius: var(--r); font-size: 12px; font-weight: 600;
  font-family: var(--font-ui); cursor: pointer; transition: all 0.15s;
}
.sponsor-add-row button:hover { border-color: var(--focus); color: var(--ink); }
.sponsor-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--seam-strong) transparent; }
.sponsor-row {
  display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 7px;
  padding: 5px 8px; border-radius: var(--r); background: var(--steel-2);
}
.sponsor-row.off { opacity: 0.45; }
.sponsor-row .sponsor-name {
  min-width: 0; background: transparent; border: none; outline: none;
  color: var(--ink); font-size: 12.5px; font-family: var(--font-ui);
  border-bottom: 1px dashed transparent; transition: border-color 0.2s;
}
.sponsor-row .sponsor-name:hover, .sponsor-row .sponsor-name:focus { border-bottom-color: var(--seam-strong); }
.sponsor-row select {
  max-width: 120px; background: var(--steel-0); border: 1px solid var(--seam-strong);
  color: var(--ink-2); font-size: 10.5px; padding: 3px 5px;
  border-radius: 3px; outline: none; cursor: pointer; font-family: var(--font-ui);
}
.sponsor-hint { font-size: 11px; color: var(--ink-3); margin-top: 8px; line-height: 1.55; }
.sponsor-hint code { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }

/* ── Auth banner: saves are being rejected (key missing/wrong) ── */
.auth-banner {
  display: none; position: fixed; left: 50%; transform: translateX(-50%); top: 10px;
  z-index: 400; max-width: min(92vw, 560px);
  background: #6e1616; border: 1px solid #c24040; color: #ffd9d9;
  padding: 8px 16px; border-radius: var(--r); font-size: 12.5px; line-height: 1.4;
  cursor: pointer; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.auth-banner.show { display: block; }
.auth-banner:hover { background: #7e1a1a; }

/* ── Player name inputs (setup drawer) ── */
.player-pair { display: flex; gap: 8px; margin-top: 8px; }
.player-pair input {
  flex: 1; min-width: 0; padding: 6px 9px; background: var(--steel-2);
  border: 1px solid var(--seam); border-radius: var(--r);
  color: var(--ink); font-size: 12px; font-family: var(--font-ui); outline: none;
}
.player-pair input:focus { border-color: var(--focus); }

.overlay-link-row { display: flex; gap: 5px; flex-wrap: wrap; }
.overlay-link-row button {
  flex: 1; min-width: 70px; padding: 6px 6px; font-size: 11px; cursor: pointer;
  background: var(--steel-2); border: 1px solid var(--seam-strong); font-family: var(--font-ui);
  border-radius: var(--r); color: var(--ink-2); transition: all 0.15s;
}
.overlay-link-row button:hover { border-color: var(--focus); color: var(--ink); }

/* Team colour swatches, inline beside the name inputs on the scoreboard */
.team-swatch {
  width: 20px; height: 20px; padding: 0; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
  background: none; cursor: pointer;
}
.team-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.team-swatch::-webkit-color-swatch { border: none; border-radius: 50%; }

.hotkey-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.hotkey-row + .hotkey-row { border-top: 1px solid var(--seam); }
.hotkey-label { font-size: 12.5px; color: var(--ink-2); }
.hotkey-capture {
  min-width: 52px; background: var(--steel-2); border: 1px solid var(--seam-strong);
  color: var(--ink); font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r); cursor: pointer; transition: all 0.15s;
}
.hotkey-capture:hover { border-color: var(--focus); }
.hotkey-capture.listening { border-color: var(--warn); color: var(--warn); animation: listenPulse 1s ease-in-out infinite; }
@keyframes listenPulse { 50% { opacity: 0.6; } }

/* ── Hotkey sheet: ? toggles, Esc closes — the live bindings for
   whoever is covering the console ── */
.hk-sheet {
  position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center;
  background: rgba(5, 6, 8, 0.7);
}
.hk-sheet.open { display: flex; }
.hk-card {
  width: min(92vw, 520px); max-height: 90vh; overflow-y: auto;
  background: var(--steel-1); border: 1px solid var(--seam-strong); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); padding: 14px 18px 16px;
}
.hk-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.hk-grid > div { padding: 6px 0; border-top: 1px solid var(--seam); font-size: 13px; color: var(--ink-2); }
.hk-grid .hk-group {
  grid-column: 1 / -1; padding: 14px 0 4px; border-top: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3);
}
.hk-grid .hk-group + div, .hk-grid .hk-group + div + div { border-top: none; }
.hk-grid .hk-key {
  justify-self: end; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--steel-2); border: 1px solid var(--seam-strong); border-radius: 3px;
  padding: 2px 9px; min-width: 38px; text-align: center;
}
.hk-foot { margin-top: 12px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }