/* ============================================================================
   Bromont 2026 — On-Air Scorebug overlay
   ----------------------------------------------------------------------------
   Designed for an OBS Browser Source at 1920×1080 with transparent BG.
   Uses tokens from ds/tokens.css + ds/colors_and_type.css.
   ============================================================================ */

html, body {
  margin: 0;
  padding: 0;
  /* Transparent canvas — OBS composites over the program feed. */
  background: transparent;
  /* Prevent any chrome from appearing while Babel compiles. */
  color: var(--air-fg-on-dark);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.overlay-root {
  position: fixed;
  inset: 0;
  pointer-events: none; /* never block any underlying browser interaction */
}

/* 10% title-safe inset visualizer (opt-in via ?safe=1) */
.title-safe {
  position: absolute;
  inset: 10% 5%;
  border: 1px dashed color-mix(in srgb, var(--bromont-teal) 60%, transparent);
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   Shared: status pill
   ---------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 5px;
  border-radius: 999px;
  font: 700 14px/1 var(--font-headline);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--bromont-night) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--air-fg-on-dark) 18%, transparent);
}
.pill-dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: #FF3B3B;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6);
  animation: pill-pulse 1.4s ease-in-out infinite;
}
@keyframes pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 59, 59, 0); }
}
.pill-live { color: #fff; }
.pill-held { color: #FFD27A; border-color: rgba(255, 210, 122, 0.5); }
.pill-warn { color: #FFD27A; background: color-mix(in srgb, #FFD27A 20%, var(--bromont-night)); border-color: rgba(255, 210, 122, 0.7); }
.pill-elim { color: #fff; background: var(--bromont-flag); border-color: var(--bromont-flag); }
.pill-done { color: var(--bromont-teal); border-color: color-mix(in srgb, var(--bromont-teal) 50%, transparent); }
.pill-neutral { color: var(--air-fg-on-dark-mute); }

/* ============================================================================
   LOWER-THIRD (?layout=l3)
   Sits in the bottom 1/4 of frame, respecting FEI broadcast safe-area.
   Height ~144px. Anchored to bottom of canvas with safe-area padding.
   ============================================================================ */
.l3 {
  position: absolute;
  left: var(--safe-x);
  right: var(--safe-x);
  bottom: var(--safe-y);
  height: 144px;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr) 132px 1px 360px 220px;
  align-items: stretch;
  gap: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bromont-night) 94%, transparent) 0%,
    color-mix(in srgb, var(--bromont-indigo-700, #232A77) 94%, transparent) 100%
  );
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 1px 0 color-mix(in srgb, var(--bromont-teal) 30%, transparent) inset;
  transform-origin: bottom left;
  animation: l3-in 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes l3-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.l3-rail {
  /* The "Bromont teal" accent rail down the left side. Brand contract. */
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--bromont-teal);
}
.l3[data-elim="true"] .l3-rail { background: var(--bromont-flag); }
.l3[data-over="true"]:not([data-elim="true"]) .l3-rail {
  background: linear-gradient(180deg, var(--bromont-flag), var(--bromont-teal));
}

/* Order cell */
.l3-order {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0 8px;
  background: color-mix(in srgb, var(--bromont-night) 30%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--air-fg-on-dark) 8%, transparent);
}
.l3-order-num {
  font: 700 72px/0.95 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--air-fg-on-dark);
}
.l3-order-of {
  margin-top: 4px;
  font: 600 13px/1 var(--font-headline);
  letter-spacing: 0.18em;
  color: var(--air-fg-on-dark-mute);
}

/* Who cell */
.l3-who {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 28px;
  min-width: 0;
}
.l3-rider {
  font: 800 44px/1.05 var(--font-display);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--air-fg-on-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.l3-horse {
  margin-top: 8px;
  font: 500 22px/1.2 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--air-fg-on-dark-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.l3-dot { margin: 0 10px; color: var(--bromont-teal); }
.l3-class { color: var(--bromont-teal); font-weight: 700; }

/* Flag cell */
.l3-flag {
  display: flex; align-items: center; justify-content: center;
  font: 800 56px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--air-fg-on-dark);
  background: color-mix(in srgb, var(--bromont-night) 20%, transparent);
}

.l3-divider {
  width: 1px;
  background: color-mix(in srgb, var(--air-fg-on-dark) 14%, transparent);
  margin: 14px 0;
}

/* Clock cell */
.l3-clock {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 24px;
}
.l3-clock-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 6px;
}
.l3-allowed {
  font: 600 13px/1 var(--font-headline);
  letter-spacing: 0.16em;
  color: var(--air-fg-on-dark-mute);
  text-transform: uppercase;
}
.l3-allowed b { color: var(--air-fg-on-dark); font-weight: 700; }
.l3-clock-num {
  font: 600 64px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--air-fg-on-dark);
}
.l3-clock-num .sep {
  color: var(--bromont-teal);
  animation: clock-blink 1s steps(2, end) infinite;
}
.l3[data-phase="paused"] .l3-clock-num .sep,
.l3[data-phase="done"]   .l3-clock-num .sep,
.l3[data-phase="pre"]    .l3-clock-num .sep { animation: none; }
.l3-clock-num .ms {
  color: var(--air-fg-on-dark-mute);
  font-size: 0.55em;
  margin-left: 4px;
}
.l3[data-over="true"] .l3-clock-num { color: var(--bromont-flag); }
@keyframes clock-blink { 50% { opacity: 0.25; } }

/* Faults cell */
.l3-faults {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: color-mix(in srgb, var(--bromont-indigo) 60%, transparent);
  position: relative;
}
.l3-faults::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 1px;
  background: color-mix(in srgb, var(--bromont-teal) 40%, transparent);
}
.l3-faults-label {
  font: 700 14px/1 var(--font-headline);
  letter-spacing: 0.20em;
  color: var(--air-fg-on-dark-mute);
  text-transform: uppercase;
}
.l3-faults-num {
  margin-top: 4px;
  font: 700 64px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--air-fg-on-dark);
}
.l3-faults-sub {
  margin-top: 6px;
  font: 500 13px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--air-fg-on-dark-mute);
}
.l3[data-elim="true"] .l3-faults { background: var(--bromont-flag); }
.l3[data-elim="true"] .l3-faults-num { font-size: 48px; }

/* ============================================================================
   CORNER BUG (?layout=bug)
   Compact top-left scoreboard, ~440×220.
   ============================================================================ */
.bug {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 460px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bromont-night) 94%, transparent) 0%,
    color-mix(in srgb, var(--bromont-indigo-700, #232A77) 94%, transparent) 100%
  );
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px color-mix(in srgb, var(--bromont-teal) 18%, transparent);
  transform-origin: top left;
  animation: bug-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bug-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.bug::before {
  /* Brand accent rail */
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--bromont-teal);
}
.bug[data-elim="true"]::before { background: var(--bromont-flag); }

.bug-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 0 22px;
}
.bug-order {
  font: 700 22px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--air-fg-on-dark);
  letter-spacing: -0.005em;
}
.bug-order .lbl { color: var(--bromont-teal); margin-right: 2px; }
.bug-order .of {
  font-size: 14px;
  color: var(--air-fg-on-dark-mute);
  margin-left: 6px;
  letter-spacing: 0.08em;
}

.bug-who {
  padding: 8px 18px 12px 22px;
}
.bug-rider {
  font: 800 30px/1.05 var(--font-display);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--air-fg-on-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bug-line {
  margin-top: 4px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font: 500 16px/1.2 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bug-horse {
  color: var(--air-fg-on-dark-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bug-country {
  font: 700 18px/1 var(--font-display);
  color: var(--bromont-teal);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.bug-stats {
  display: grid;
  grid-template-columns: 1fr 132px;
  align-items: stretch;
  border-top: 1px solid color-mix(in srgb, var(--air-fg-on-dark) 10%, transparent);
}
.bug-clock {
  display: flex; align-items: center;
  padding: 12px 18px 12px 22px;
  font: 600 42px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--air-fg-on-dark);
}
.bug-clock .sep { color: var(--bromont-teal); animation: clock-blink 1s steps(2, end) infinite; }
.bug[data-phase="paused"] .bug-clock .sep,
.bug[data-phase="done"]   .bug-clock .sep,
.bug[data-phase="pre"]    .bug-clock .sep { animation: none; }
.bug-clock .ms { color: var(--air-fg-on-dark-mute); font-size: 0.5em; margin-left: 4px; }
.bug[data-over="true"] .bug-clock { color: var(--bromont-flag); }

.bug-faults {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bromont-indigo) 60%, transparent);
  padding: 8px 0;
}
.bug-faults-num {
  font: 800 36px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--air-fg-on-dark);
}
.bug-faults-label {
  margin-top: 4px;
  font: 700 11px/1 var(--font-headline);
  letter-spacing: 0.20em;
  color: var(--air-fg-on-dark-mute);
}
.bug[data-elim="true"] .bug-faults { background: var(--bromont-flag); }

.bug-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 18px 12px 22px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--air-fg-on-dark-mute);
}
.bug-foot b { color: var(--air-fg-on-dark); }
.bug-foot .dot { color: var(--bromont-teal); }
.bug-foot .tc { color: var(--bromont-teal); }
.bug-class {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--bromont-teal) 60%, transparent);
  border-radius: 3px;
  color: var(--bromont-teal);
  letter-spacing: 0.10em;
}