/*
 * 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(0.25, 0.46, 0.45, 0.94);
   --ease-spring: cubic-bezier(0.34, 1.4, 0.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, 0.4); /* secondary text on dark */
   --border: rgba(240, 237, 230, 0.1); /* A04 hairline */
   --border2: rgba(240, 237, 230, 0.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: 0.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, 0.2);
   color: var(--red);
   border-color: rgba(200, 54, 42, 0.38);
   animation: chip-pulse 2.4s ease-in-out infinite;
}

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

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

.chip-complete {
   background: rgba(42, 122, 122, 0.14);
   color: var(--teal);
   border-color: rgba(42, 122, 122, 0.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, 0.04);
   color: var(--bright);
}
.btn-teal {
   background: rgba(42, 122, 122, 0.2);
   color: var(--teal);
   border: 1px solid rgba(42, 122, 122, 0.35);
}
.btn-teal:hover {
   background: rgba(42, 122, 122, 0.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, 0.06);
}

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

/* F38 — inactive icon opacity 25% */
.icon-inactive {
   opacity: 0.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: 0.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, 0.09); /* dark-on-light hairline */
   --border2: rgba(29, 27, 25, 0.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, 0.4);
   --border: rgba(240, 237, 230, 0.1);
   --border2: rgba(240, 237, 230, 0.16);
}

/* Hover states on light bg */
.main .stage-row:hover,
.main .card-row:hover {
   background: rgba(0, 0, 0, 0.04);
}
.main .stage-row.sel {
   background: rgba(200, 54, 42, 0.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, 0.04);
}
.main ::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.12);
}

/* stog default text is rgba(white,.28) — invisible on light bg */
.main .stog-btn {
   color: rgba(29, 27, 25, 0.32);
}
.main .stog-btn:hover {
   background: rgba(0, 0, 0, 0.06);
   color: var(--bright);
}
.main .stog-btn.s-closed {
   background: rgba(0, 0, 0, 0.05);
   color: rgba(29, 27, 25, 0.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, 0.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, 0.03);
}
.ev-lbl {
   font-size: 8px;
   letter-spacing: 0.16em;
   color: rgba(240, 237, 230, 0.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, 0.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, 0.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, 0.04);
}
.ni.active {
   background: rgba(200, 54, 42, 0.1);
}

/* 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, 0.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, 0.07);
   color: rgba(240, 237, 230, 0.4);
   font-family: var(--fm);
   flex-shrink: 0;
}
.ni.active .ni-badge {
   background: rgba(200, 54, 42, 0.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, 0.4);
   letter-spacing: 0.05em;
}
.sf-ver {
   font-size: 8px;
   color: rgba(240, 237, 230, 0.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, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(42, 122, 122, 0.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, 0.18);
}
.m-dot.closed {
   border-color: rgba(240, 237, 230, 0.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, 0.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, 0.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, 0.2);
   background: rgba(8, 8, 8, 0.7);
   padding: 3px 9px;
   border-radius: 2px;
   border: 1px solid rgba(255, 255, 255, 0.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, 0.1);
   border-radius: 3px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: rgba(240, 237, 230, 0.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, 0.88);
   border: 1px solid rgba(240, 237, 230, 0.1);
   border-radius: 3px;
   font-family: var(--fh);
   font-size: 7px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: rgba(240, 237, 230, 0.4);
   cursor: pointer;
}
.mchip.on {
   color: var(--teal);
   border-color: rgba(42, 122, 122, 0.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, 0.03);
}
.stage-row.sel {
   background: rgba(200, 54, 42, 0.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, 0.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, 0.06);
   color: var(--bright);
}
.stog-btn.s-open {
   background: rgba(42, 122, 122, 0.22);
   color: var(--teal);
}
.stog-btn.s-active {
   background: rgba(200, 54, 42, 0.28);
   color: var(--red);
   animation: chip-pulse 2.4s ease-in-out infinite; /* C19 */
}
.stog-btn.s-closed {
   background: rgba(240, 237, 230, 0.06);
   color: rgba(240, 237, 230, 0.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, 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, 0.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, 0.4);
}
.fld-input::placeholder {
   color: var(--dim);
   opacity: 0.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, 0.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, 0.4);
   background: rgba(200, 54, 42, 0.04);
}
.uz-icon {
   font-size: 24px;
   margin-bottom: 8px;
   opacity: 0.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, 0.03);
}
/* Active event in the chooser — red accent rail on the left. */
.card-row.selected {
   background: rgba(200, 54, 42, 0.06);
   box-shadow: inset 3px 0 0 var(--red);
}
.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, 0.18);
   color: var(--red);
   border: 1px solid rgba(200, 54, 42, 0.3);
}
.cb-upcoming {
   background: transparent;
   color: var(--dim);
   border: 1px dashed var(--border2);
}
.cb-complete {
   background: rgba(42, 122, 122, 0.14);
   color: var(--teal);
   border: 1px solid rgba(42, 122, 122, 0.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, 0.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, 0.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, 0.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, 0.02);
}
.pos-1 {
   color: var(--sun);
   font-family: var(--fh);
}
.pos-2 {
   color: rgba(200, 200, 200, 0.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, 0.25);
   color: var(--teal);
   font-size: 8px;
   font-weight: 700;
   cursor: pointer;
   border: 1px solid rgba(42, 122, 122, 0.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, 0.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, 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, 0.35);
   padding: 3px 8px;
   border-radius: 2px;
   cursor: pointer;
   background: rgba(42, 122, 122, 0.1);
}
.bub-link:hover {
   background: rgba(42, 122, 122, 0.2);
}
.bub-close {
   position: absolute;
   top: 7px;
   right: 9px;
   color: rgba(240, 237, 230, 0.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, 0.2);
   border: 1px solid rgba(42, 122, 122, 0.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, 0.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, 0.2);
   border: 1px solid rgba(200, 54, 42, 0.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, 0.08);
   border-radius: 2px;
}