/*
 * Stage Guides — Component Stylesheet
 *
 * Builds on /tokens.css primitives. Shared by:
 *   - Spectator app  (index.html)
 *   - Admin portal   (admin/index.html)
 *
 * Styling brief groups:
 *   A  Background & Depth     E  Motion & Feel
 *   B  Typography             F  Iconography
 *   C  Status & Chips         G  Admin Portal
 *   D  Navigation & Controls  H  Brand (enforced through choices above)
 *
 * Semantic vars used throughout (dark context default; .main overrides for light):
 *   --surface   panel / card background
 *   --raised    slightly elevated surface (inputs, stat cells)
 *   --carbon    nav / topbar background
 *   --bright    primary text
 *   --dim       secondary / meta text
 *   --dim2      very subtle fill
 *   --border    hairline border
 *   --border2   slightly more visible border
 *   --red  --teal  --sun   brand colours
 *   --fh  --fm  --fn       font stacks
 */

/* ═══════════════════════════════════════════════
   ROOT — timing, radii, and ALL semantic colour vars
   (dark context defaults; .main overrides for light)
═══════════════════════════════════════════════ */
:root {
  /* ── Motion (E29 / E30) ── */
  --dur:         220ms;
  --ease:        cubic-bezier(.25,.46,.45,.94);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);

  /* ── Radii (A03 / D24) ── */
  --r-sm:  3px;
  --r-btn: 4px;

  /* ── Semantic colour layer — dark context (default) ──────────────
     Every rule in this file uses these vars, never --token-* directly
     (except where a dark value must be hard-pinned regardless of
     theme, e.g. inside .main .map-panel).
     Override on a scoped selector to change context, not here.      */
  --void:    var(--token-void);
  --carbon:  var(--token-carbon);
  --surface: var(--token-surface);
  --raised:  var(--token-raised);
  --bright:  var(--token-bright);
  --teal:    var(--token-teal);
  --sun:     var(--token-sun);
  --red:     var(--token-red);
  --dim:     rgba(240,237,230,.40);   /* secondary text on dark */
  --border:  rgba(240,237,230,.10);   /* A04 hairline */
  --border2: rgba(240,237,230,.16);   /* slightly more visible */

  /* ── Font stacks ── */
  --fh: var(--token-font-head);
  --fm: var(--token-font-mono);
  --fn: var(--token-font-narrow);
}

/* ═══════════════════════════════════════════════
   A — BACKGROUND & DEPTH
═══════════════════════════════════════════════ */

/* A06 — frosted glass treatment for headers / nav */
.glass-header {
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

/* ═══════════════════════════════════════════════
   B — TYPOGRAPHY
═══════════════════════════════════════════════ */

/* B07 — stage name: ALL CAPS wide-tracked */
.type-stage-name {
  font-family: var(--fh);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* B10 — meta / secondary text */
.type-meta {
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 0.04em;
}

/* B11 — day section header: condensed bold */
.type-day-hdr {
  font-family: var(--fn);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
   C — STATUS & CHIPS
═══════════════════════════════════════════════ */

/* C19 — slow fade pulse (active / live states) */
@keyframes chip-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}

/* C15 + C16 — 3px radius, solid fill, B14 UPPERCASE TRACKED */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-family: var(--fh);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

/* C17 — active: red system + C19 slow blink */
.chip-active {
  background: rgba(200,54,42,.20);
  color: var(--red);
  border-color: rgba(200,54,42,.38);
  animation: chip-pulse 2.4s ease-in-out infinite;
}

/* C18 — open: teal */
.chip-open {
  background: rgba(42,122,122,.18);
  color: var(--teal);
  border-color: rgba(42,122,122,.32);
}

/* C21 — upcoming: dotted border */
.chip-upcoming {
  background: transparent;
  color: var(--dim);
  border: 1px dashed var(--border2);
}

.chip-complete {
  background: rgba(42,122,122,.14);
  color: var(--teal);
  border-color: rgba(42,122,122,.25);
}

/* ═══════════════════════════════════════════════
   D — NAVIGATION & CONTROLS
═══════════════════════════════════════════════ */

/* D22 — active tab: top underline bar */
.ttab {
  flex: 1;
  padding: 8px 4px;
  font-family: var(--fn);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  border-top: 2px solid transparent;     /* D22 */
  border-bottom: 1px solid transparent;  /* clear bottom gap */
  color: var(--dim);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  margin-bottom: -1px;
}
.ttab.active {
  border-top-color: var(--red);          /* D22 */
  color: var(--red);
}

/* D24 — CTA buttons: 4px radius */
.btn {
  padding: 5px 12px;
  border-radius: var(--r-btn);
  font-family: var(--fh);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-red   { background: var(--red); color: #fff; }
.btn-red:hover { background: #d43c28; }
.btn-ghost {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: rgba(255,255,255,.04); color: var(--bright); }
.btn-teal  {
  background: rgba(42,122,122,.20);
  color: var(--teal);
  border: 1px solid rgba(42,122,122,.35);
}
.btn-teal:hover { background: rgba(42,122,122,.32); }

/* D27 — toast: red left border */
.toast {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 10px 14px;
  font-size: 11px;
  color: var(--bright);
  line-height: 1.4;
}

/* D28 — scroll boundary fade */
.scroll-fade {
  mask-image: linear-gradient(to bottom,
    transparent, black 18px,
    black calc(100% - 18px), transparent);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent, black 18px,
    black calc(100% - 18px), transparent);
}

/* ═══════════════════════════════════════════════
   E — MOTION & FEEL
═══════════════════════════════════════════════ */

/* E32 — row tap flash */
.row-tap { transition: background var(--dur) var(--ease); }
.row-tap:active { background: rgba(200,54,42,.06); }

/* ═══════════════════════════════════════════════
   F — ICONOGRAPHY
═══════════════════════════════════════════════ */

/* F38 — inactive icon opacity 25% */
.icon-inactive { opacity: .25; }

/* F36 — role indicator: dot + text */
.role-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fm);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.role-dot::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   G — ADMIN PORTAL
═══════════════════════════════════════════════ */

/* ── Layout shell ── */

/* G39 + D23 — sidebar: dark, matches body surface */
.sidebar {
  width: 210px;
  min-width: 210px;
  background: var(--surface);   /* D23 matches body */
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  z-index: 10;
  overflow: hidden;
}

/* G39 — main area: light context via CSS var cascade.
   Redefining vars here overrides :root for every descendant.
   Children that need to stay dark (e.g. .map-panel) re-pin below. */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  --surface: var(--token-light);      /* #F5F3F0 — panel bg    */
  --raised:  var(--token-paper);      /* #FAFAF8 — inputs, cells */
  --carbon:  var(--token-paper);      /* #FAFAF8 — topbar bg   */
  --bright:  var(--token-surface);    /* #1D1B19 — ink on light */
  --dim:     var(--token-muted);      /* #7A7A7A — meta text   */
  --border:  rgba(29,27,25,.09);      /* dark-on-light hairline */
  --border2: rgba(29,27,25,.16);

  background: var(--surface);
}

/* Hard-pin dark values for the map panel — it lives inside .main
   but must stay dark regardless of theme.
   Using --token-* here intentionally bypasses the cascade. */
.main .map-panel {
  --surface: var(--token-carbon);
  --raised:  var(--token-surface);
  --carbon:  var(--token-carbon);
  --bright:  var(--token-bright);
  --dim:     rgba(240,237,230,.4);
  --border:  rgba(240,237,230,.10);
  --border2: rgba(240,237,230,.16);
}

/* Hover states on light bg */
.main .stage-row:hover,
.main .card-row:hover   { background: rgba(0,0,0,.04); }
.main .stage-row.sel    { background: rgba(200,54,42,.06); }
.main .fld-input,
.main .fld-textarea     { background: var(--raised); }
.main .fld-select       { background: var(--raised); }
.main .ticker-text:focus { background: rgba(0,0,0,.04); }
.main ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); }

/* stog default text is rgba(white,.28) — invisible on light bg */
.main .stog-btn         { color: rgba(29,27,25,.32); }
.main .stog-btn:hover   { background: rgba(0,0,0,.06); color: var(--bright); }
.main .stog-btn.s-closed { background: rgba(0,0,0,.05); color: rgba(29,27,25,.45); }

/* ── Brand block (sidebar) ── */
.brand {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-logo { width: 36px; height: 36px; flex-shrink: 0; }
.brand-eye {
  font-family: var(--fh);
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--sun);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.brand-name {
  font-family: var(--fh);
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--bright);
  text-transform: uppercase;
  line-height: 1;
}
.brand-sub {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(240,237,230,.4);
  margin-top: 3px;
  text-transform: uppercase;
}

/* ── Event selector (sidebar) ── */
.ev-sel {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
}
.ev-sel:hover { background: rgba(255,255,255,.03); }
.ev-lbl {
  font-size: 8px;
  letter-spacing: 0.16em;
  color: rgba(240,237,230,.22);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ev-name {
  font-family: var(--fh);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bright);
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 4px;
}
.ev-row { display: flex; align-items: center; justify-content: space-between; }
.ev-status { display: flex; align-items: center; gap: 4px; }
.ev-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  animation: chip-pulse 2s infinite;  /* C19 */
}
.ev-stat-txt {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--red);
  text-transform: uppercase;
}
.ev-chev { color: rgba(240,237,230,.4); font-size: 11px; }

/* ── Sidebar nav ── */
.nav { flex: 1; padding: 4px 0; overflow-y: auto; }
.nav-grp {
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(240,237,230,.18);
  text-transform: uppercase;
  padding: 10px 14px 3px;
}
.ni {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
  position: relative;
}
.ni:hover { background: rgba(255,255,255,.04); }
.ni.active { background: rgba(200,54,42,.10); }

/* D22 — active nav item: top underline bar */
.ni.active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--red);
}

.ni-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ni.active .ni-ico { color: var(--red); }
.ni-lbl {
  font-family: var(--fh);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240,237,230,.4);
  flex: 1;
}
.ni.active .ni-lbl { color: var(--bright); }
.ni-badge {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(255,255,255,.07);
  color: rgba(240,237,230,.4);
  font-family: var(--fm);
  flex-shrink: 0;
}
.ni.active .ni-badge {
  background: rgba(200,54,42,.22);
  color: var(--red);
}

.sidebar-foot {
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sf-user { font-size: 9px; color: rgba(240,237,230,.4); letter-spacing: 0.05em; }
.sf-ver  { font-size: 8px; color: rgba(240,237,230,.16); font-family: var(--fm); margin-top: 2px; }

/* ── Topbar — A06 frosted glass ── */
.topbar {
  height: 48px;
  background: var(--carbon);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 10px;
  flex-shrink: 0;
}
.tb-title {
  font-family: var(--fh);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bright);
}
.tb-sep  { color: var(--border2); font-size: 14px; }
.tb-sub  { font-size: 9px; color: var(--dim); letter-spacing: 0.09em; }
.tb-sp   { flex: 1; }

/* ── Content area ── */
.content { flex: 1; overflow: hidden; display: flex; }

/* ── Panels — surface treatment: framed + 6px top accent ── */
.panel {
  width: 340px;
  min-width: 340px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  border-top: 6px solid var(--red);   /* framed with top accent */
  overflow: hidden;
}
.panel.full { width: 100%; min-width: 0; border-right: none; }

.ph {
  padding: 10px 15px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.ph-title {
  font-family: var(--fh);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bright);
}
.ph-meta { font-size: 9px; color: var(--dim); }
.p-body  { flex: 1; overflow-y: auto; }
.p-foot  {
  padding: 8px 15px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Map panel (always dark) ── */
.map-panel {
  flex: 1;
  background: #0b1014;
  position: relative;
  overflow: hidden;
  border-top: 6px solid var(--red);
}
.map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42,122,122,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,122,122,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.t-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.s-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  z-index: 4;
}
.m-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid;
  background: var(--void);
}
.m-dot.open   { border-color: var(--teal); }
.m-dot.active { border-color: var(--red); box-shadow: 0 0 0 5px rgba(200,54,42,.18); }
.m-dot.closed { border-color: rgba(240,237,230,.18); }
.m-lbl {
  font-family: var(--fh);
  font-size: 7.5px;
  letter-spacing: 0.1em;
  color: var(--bright);
  text-transform: uppercase;
  background: rgba(8,8,8,.82);
  padding: 2px 5px;
  border-radius: 2px;
  margin-top: 3px;
  white-space: nowrap;
}
.start-dot {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sun);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(242,193,46,.18);
  z-index: 4;
}
.map-badge {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--fh);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240,237,230,.2);
  background: rgba(8,8,8,.7);
  padding: 3px 9px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.05);
  z-index: 5;
}
.map-zoom {
  position: absolute;
  top: 12px; right: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}
.mz-btn {
  width: 26px; height: 26px;
  background: var(--token-surface); /* intentional: pin to dark warm, not theme surface */
  border: 1px solid rgba(240,237,230,.10);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(240,237,230,.4);
  font-size: 14px;
}
.map-chips {
  position: absolute;
  bottom: 12px; left: 12px;
  display: flex;
  gap: 4px;
  z-index: 5;
}
.mchip {
  padding: 3px 8px;
  background: rgba(14,14,14,.88);
  border: 1px solid rgba(240,237,230,.10);
  border-radius: 3px;
  font-family: var(--fh);
  font-size: 7px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240,237,230,.4);
  cursor: pointer;
}
.mchip.on { color: var(--teal); border-color: rgba(42,122,122,.38); }

/* ── Stage rows ── */

/* A05 — indented separator: starts past the row number */
.stage-row {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  gap: 8px;
  cursor: pointer;
  position: relative;
  transition: background var(--dur) var(--ease);
}
.stage-row::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 39px;   /* A05 indent past sr-num column */
  right: 0;
  height: 1px;
  background: var(--border);
}
.stage-row:hover { background: rgba(255,255,255,.03); }
.stage-row.sel   { background: rgba(200,54,42,.07); }

.sr-num {
  font-family: var(--fh);
  font-size: 9px;
  color: var(--dim);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.stage-row.sel .sr-num { color: var(--red); }
.sr-info { flex: 1; min-width: 0; }

/* B07 — ALL CAPS, letter-spacing 0.06em */
.sr-name {
  font-family: var(--fh);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--bright);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-detail {
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 0.04em;   /* B09 */
  margin-top: 2px;
  font-family: var(--fm);
}

/* Stage status toggle */
.stog {
  display: flex;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.stog-btn {
  padding: 4px 7px;
  font-family: var(--fh);
  font-size: 7px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  color: rgba(240,237,230,.28);
  border: none;
  border-right: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
}
.stog-btn:last-child { border-right: none; }
.stog-btn:hover { background: rgba(255,255,255,.06); color: var(--bright); }
.stog-btn.s-open   { background: rgba(42,122,122,.22); color: var(--teal); }
.stog-btn.s-active {
  background: rgba(200,54,42,.28);
  color: var(--red);
  animation: chip-pulse 2.4s ease-in-out infinite;  /* C19 */
}
.stog-btn.s-closed { background: rgba(240,237,230,.06); color: rgba(240,237,230,.4); }

/* ── Day section divider — B11 condensed bold ── */
.sdiv {
  padding: 7px 15px 4px;
  font-family: var(--fn);    /* B11 condensed */
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  background: rgba(0,0,0,.12);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Forms ── */
.form-section {
  padding: 14px 15px;
  border-bottom: 1px solid var(--border);
}
.form-row { display: flex; gap: 10px; margin-bottom: 10px; }
.form-row:last-child { margin-bottom: 0; }
.fld { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.fld-lbl {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  font-family: var(--fh);
}
.fld-input {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  color: var(--bright);
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  font-family: Arial, sans-serif;
  transition: border-color var(--dur);
  width: 100%;
}
.fld-input:focus { border-color: rgba(200,54,42,.4); }
.fld-input::placeholder { color: var(--dim); opacity: .6; }
.fld-select {
  background: var(--raised);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  color: var(--bright);
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  cursor: pointer;
  width: 100%;
}
.fld-select option { background: var(--carbon); }
.fld-textarea {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  color: var(--bright);
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  font-family: Arial, sans-serif;
  resize: vertical;
  min-height: 70px;
  width: 100%;
}

/* ── Upload zone ── */
.upload-zone {
  border: 2px dashed var(--border2);
  border-radius: 5px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--dur);
  margin: 14px 15px;
}
.upload-zone:hover {
  border-color: rgba(200,54,42,.4);
  background: rgba(200,54,42,.04);
}
.uz-icon  { font-size: 24px; margin-bottom: 8px; opacity: .5; }
.uz-title {
  font-family: var(--fh);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bright);
  margin-bottom: 4px;
}
.uz-sub { font-size: 10px; color: var(--dim); line-height: 1.5; }

/* ── Card rows ── */
.card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.card-row:hover { background: rgba(255,255,255,.03); }
.card-icon {
  width: 32px; height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.card-info { flex: 1; min-width: 0; }
.card-title {
  font-family: var(--fh);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bright);
}
.card-meta { font-size: 9px; color: var(--dim); margin-top: 2px; font-family: var(--fm); }
.card-badge {
  font-family: var(--fh);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
/* C21 — upcoming uses dotted border */
.cb-active   { background: rgba(200,54,42,.18); color: var(--red);  border: 1px solid rgba(200,54,42,.3); }
.cb-upcoming { background: transparent; color: var(--dim); border: 1px dashed var(--border2); }
.cb-complete { background: rgba(42,122,122,.14); color: var(--teal); border: 1px solid rgba(42,122,122,.25); }

/* ── Status foot ── */
.pf-stat { display: flex; align-items: center; gap: 4px; }
.pf-dot  { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.pf-txt  { font-size: 9px; color: var(--dim); letter-spacing: 0.05em; }

/* ── Ticker editor ── */
.ticker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-bottom: 1px solid var(--border);
}
.ticker-drag { color: var(--dim); cursor: grab; font-size: 12px; flex-shrink: 0; }
.ticker-text {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--bright);
  font-size: 12px;
  font-family: var(--fm);
  outline: none;
  min-width: 0;
}
.ticker-text:focus {
  background: rgba(255,255,255,.04);
  padding: 2px 4px;
  border-radius: 2px;
}
.ticker-del {
  width: 18px; height: 18px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.ticker-del:hover { background: rgba(200,54,42,.15); color: var(--red); }

/* ── Results table — G40 comfortable density, G42 red header ── */
.results-table { width: 100%; border-collapse: collapse; }
.results-table th {
  padding: 9px 12px;                         /* G40 */
  font-family: var(--fh);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);                          /* G42 */
  text-align: left;
  border-bottom: 2px solid var(--red);        /* G42 */
  background: rgba(200,54,42,.06);            /* G42 */
}
.results-table td {
  padding: 10px 12px;                         /* G40 */
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--bright);
}
.results-table tr:hover td { background: rgba(255,255,255,.02); }
.pos-1 { color: var(--sun); font-family: var(--fh); }
.pos-2 { color: rgba(200,200,200,.7); font-family: var(--fh); }
.pos-3 { color: #9a7040; font-family: var(--fh); }

/* ── Info bubbles ── */
.info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(42,122,122,.25);
  color: var(--teal);
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(42,122,122,.4);
  flex-shrink: 0;
  font-family: var(--fh);
  transition: all var(--dur);
  vertical-align: middle;
  margin-left: 5px;
}
.info-trigger:hover { background: rgba(42,122,122,.45); }

/* Bubble is position:fixed and a direct child of <body>, so it
   inherits from :root — not from .main. Semantic vars are safe here. */
.bubble {
  position: fixed;
  z-index: 9000;
  background: var(--carbon);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--teal);
  border-radius: 5px;
  padding: 12px 14px;
  max-width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur), transform var(--dur);
}
.bubble.show { opacity: 1; transform: translateY(0); pointer-events: all; }
.bub-title {
  font-family: var(--fh);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 5px;
}
.bub-body  { font-size: 11px; color: var(--bright); line-height: 1.6; }
.bub-link  {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-family: var(--fh);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid rgba(42,122,122,.35);
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  background: rgba(42,122,122,.1);
}
.bub-link:hover { background: rgba(42,122,122,.2); }
.bub-close {
  position: absolute;
  top: 7px; right: 9px;
  color: rgba(240,237,230,.4);
  cursor: pointer;
  font-size: 13px;
}

/* ── Dashboard ── */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.dash-stat { background: var(--surface); padding: 14px 15px; }
.ds-val {
  font-family: var(--fh);
  font-size: 26px;
  color: var(--bright);
  line-height: 1;
  margin-bottom: 3px;
}
.ds-val.red  { color: var(--red); }
.ds-val.teal { color: var(--teal); }
.ds-lbl { font-size: 9px; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; }

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--border);
}
.ai-dot  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.ai-text { font-size: 11px; color: var(--bright); flex: 1; line-height: 1.4; }
.ai-time { font-size: 9px; color: var(--dim); font-family: var(--fm); flex-shrink: 0; white-space: nowrap; }

/* ── Volunteers ── */
.vol-row { display: flex; align-items: center; gap: 10px; padding: 8px 15px; border-bottom: 1px solid var(--border); }
.vol-init {
  width: 28px; height: 28px;
  border-radius: 4px;
  background: rgba(42,122,122,.2);
  border: 1px solid rgba(42,122,122,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 9px;
  color: var(--teal);
  flex-shrink: 0;
}
.vol-info  { flex: 1; min-width: 0; }
.vol-name  { font-size: 11px; font-weight: 700; color: var(--bright); }
.vol-role  { font-size: 9px; color: var(--dim); font-family: var(--fm); margin-top: 1px; }
.vol-station {
  font-family: var(--fh);
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 2px;
  background: rgba(255,255,255,.06);
  color: var(--dim);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.avatar {
  width: 52px; height: 52px;
  border-radius: 8px;
  background: rgba(200,54,42,.2);
  border: 1px solid rgba(200,54,42,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 18px;
  color: var(--red);
  flex-shrink: 0;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }