/* ════════════════════════════════════════════════════════════════════════════
   Sectorly v2 — components.css (Phase 8a — aligned to v1)
   ────────────────────────────────────────────────────────────────────────────

   Visual style restored to match v1's tight, confident, color-rich aesthetic.

   Sections:
     1. Header (sticky, with wordmark + live session pulse + flag + clock)
     2. Pulse animations (v1's scale-based, not box-shadow-based)
     3. Surface card / pill / view container / loading
     4. Off-weekend countdown + event card
     5. Class tabs (pill-shaped, take on class color when active)
     6. Density toggle (Phase 6 retained)
     7. Garage strip (Phase 6 retained, restyled to fit v1 density)
     8. Class divider (between class blocks in leaderboard)
     9. Leaderboard rows (v1 layout: pos | car# | team/driver | gap-stack)
    10. Pace chip / gap-trend pill / battle badge / out-lap / retired
    11. Manufacturer pills
    12. Strategic-density secondary line + expand-on-tap detail
    13. Caution state — overall page tinting under yellow flag
    14. FCY beneficiary overlay (Phase 7 retained)
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   1. HEADER
   ════════════════════════════════════════════════════════════════════════════ */

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;

  background: rgba(10, 10, 12, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);

  /* v1 padding: top safe-area + 10px, then 16px sides. */
  padding: calc(var(--safe-top) + 10px) 16px 0;
}

.app-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-bottom: 10px;
}

.app-header__wordmark-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-header__wordmark {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1;
}

.app-header__wordmark .accent {
  color: var(--purple);
}

.app-header__tagline {
  font-size: 9px;
  font-weight: 500;
  color: var(--text3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Right side of header — live session info. Hidden when no session. */
.app-header__session {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.app-header__session.is-visible {
  display: flex;
}

.app-header__flag-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-header__times {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text3);
}

.app-header__time-elapsed { color: var(--text3); }
.app-header__time-sep     { color: var(--text3); opacity: 0.4; }
.app-header__time-remaining {
  color: var(--text2);
  font-weight: 600;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. PULSE ANIMATIONS (v1 — scale-based)
   ════════════════════════════════════════════════════════════════════════════ */

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0;
  flex-shrink: 0;
}

.is-live .pulse-dot {
  opacity: 1;
  animation: pulse-glow 2s ease infinite;
}

.pulse-dot--refresh {
  animation: pulse-flash 0.8s ease-out forwards !important;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

@keyframes pulse-flash {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 1; transform: scale(2); }
  100% { opacity: 0.4; transform: scale(1); }
}


/* ════════════════════════════════════════════════════════════════════════════
   3. SURFACE / PILL / VIEW / LOADING
   ════════════════════════════════════════════════════════════════════════════ */

.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Flag badge — v1 styling ────────────────────────────────────────────── */

.flag-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  border: 0;  /* unlike .pill — flag uses tinted bg only */
}

.flag-badge--green   { background: rgba(0, 169, 79, 0.15); color: var(--gtd); }
.flag-badge--yellow  {
  background: rgba(255, 214, 0, 0.20);
  color: var(--yellow);
  /* Caution stands out — slow gentle pulse so the eye is drawn */
  animation: flag-yellow-pulse 1.6s ease-in-out infinite;
}
.flag-badge--red     {
  background: rgba(255, 23, 68, 0.20);
  color: var(--red);
  animation: flag-yellow-pulse 1s ease-in-out infinite;
}
.flag-badge--checker { background: rgba(255, 255, 255, 0.08); color: var(--text2); }

@keyframes flag-yellow-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.4); }
}


/* ── View container ───────────────────────────────────────────────────── */

.view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: view-fade-in var(--motion-medium) var(--ease-out) both;
}

@keyframes view-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Loading state ──────────────────────────────────────────────────────── */

.loading {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  color: var(--text3);
  font-size: 13px;
  min-height: 60vh;
}

.loading__wordmark {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text);
  margin-bottom: 8px;
  text-align: center;
}

.loading__wordmark .accent {
  color: var(--purple);
  animation: loading-pulse 1.4s ease-in-out infinite;
}

@keyframes loading-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}


/* ════════════════════════════════════════════════════════════════════════════
   4. COUNTDOWN / EVENT CARD
   ════════════════════════════════════════════════════════════════════════════ */

.countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding-block: 24px;
}

.countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}

.countdown__value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.countdown__label {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}

.countdown__sep {
  font-size: 32px;
  color: var(--text3);
  font-weight: 700;
  margin-top: -2px;
}

.event-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.event-card--unified {
  gap: 10px;
  padding: 24px 20px;
}

.event-card--unified .countdown {
  margin-top: 12px;
  padding-block: 0;
}

.event-card__round {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
}

.event-card__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text);
}

.event-card__sub {
  font-size: 12px;
  color: var(--text2);
}


/* ── SEASON STRIP ────────────────────────────────────────────────────────── */

.season-strip__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 24px;
  margin-bottom: 8px;
  padding-left: 4px;
}

.season-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.season-strip__loading {
  font-size: 12px;
  color: var(--text3);
  text-align: center;
  padding: 16px;
}

.season-round {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out);
}

.season-round:active {
  background: var(--surface2);
}

.season-round.is-next {
  border-color: rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.04);
}

.season-round.is-completed {
  opacity: 0.45;
}

.season-round-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  min-width: 28px;
  flex-shrink: 0;
}

.season-round-info {
  flex: 1;
  min-width: 0;
}

.season-round-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.season-round-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
}

.season-round-dots {
  display: flex;
  gap: 3px;
  margin-left: 4px;
}

.season-class-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.season-round-next-pill {
  font-size: 10px;
  font-weight: 700;
  color: var(--purple);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.season-round-chevron {
  font-size: 14px;
  color: var(--text3);
  margin-left: 4px;
  flex-shrink: 0;
}

.season-sessions {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--motion-medium) var(--ease-out);
}

.season-sessions.open {
  max-height: 200px;
  margin-bottom: 4px;
}

.season-sess-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 50px;
  font-size: 12px;
}

.season-sess-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.season-sess-name {
  flex: 1;
  color: var(--text2);
}

.season-sess-time {
  font-size: 11px;
  color: var(--text3);
}


/* ════════════════════════════════════════════════════════════════════════════
   5. CLASS TABS (v1 — pill, takes class color when active)
   ════════════════════════════════════════════════════════════════════════════ */

.class-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}

.class-tabs::-webkit-scrollbar { display: none; }

.class-tab {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text3);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  transition: background var(--motion-fast) var(--ease-out),
              color      var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}

.class-tab--all.is-active {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
  background: var(--surface2);
}

.class-tab--gtp.is-active {
  border-color: var(--gtp);
  color: var(--gtp);
  background: rgba(232, 232, 232, 0.08);
}

.class-tab--gtdpro.is-active {
  border-color: var(--gtdpro);
  color: var(--gtdpro);
  background: rgba(227, 25, 55, 0.08);
}

.class-tab--gtd.is-active {
  border-color: var(--gtd);
  color: var(--gtd);
  background: rgba(0, 169, 79, 0.08);
}

.class-tab--lmp2.is-active {
  border-color: var(--lmp2);
  color: var(--lmp2);
  background: rgba(91, 155, 213, 0.08);
}


/* ════════════════════════════════════════════════════════════════════════════
   6. DENSITY TOGGLE  (v2 retains; restyled to match v1 chrome density)
   ════════════════════════════════════════════════════════════════════════════ */

.density-toggle {
  display: inline-flex;
  height: 28px;
  padding: 2px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.density-toggle__option {
  padding: 0 12px;
  border-radius: 16px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  transition: background var(--motion-fast) var(--ease-out),
              color      var(--motion-fast) var(--ease-out);
  cursor: pointer;
}

.density-toggle__option--active {
  background: var(--text);
  color: var(--bg);
}


/* ════════════════════════════════════════════════════════════════════════════
   7. GARAGE STRIP  (v2 retains; visual style fitted to v1)
   ════════════════════════════════════════════════════════════════════════════ */

.garage-strip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.garage-strip__header {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 6px;
}

.garage-strip__row {
  display: grid;
  grid-template-columns: 24px 36px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding-block: 4px;
  font-size: 12px;
}

.garage-strip__empty {
  font-size: 12px;
  color: var(--text3);
  padding-block: 4px;
}


/* ════════════════════════════════════════════════════════════════════════════
   8. CLASS DIVIDER (v1 — subtle separator between class blocks)
   ════════════════════════════════════════════════════════════════════════════ */

.class-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 4px;
}

.class-divider__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.class-divider__dot--gtp     { background: var(--gtp); }
.class-divider__dot--lmp2    { background: var(--lmp2); }
.class-divider__dot--gtdpro  { background: var(--gtdpro); }
.class-divider__dot--gtd     { background: var(--gtd); }

.class-divider__name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.class-divider__line {
  flex: 1;
  height: 1px;
  background: var(--border);
}


/* ════════════════════════════════════════════════════════════════════════════
   9. LEADERBOARD ROWS (v1 layout — restored)
   ════════════════════════════════════════════════════════════════════════════ */

.leaderboard {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.car-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--motion-fast) var(--ease-out);
}

.car-row:active {
  background: var(--surface2);
}

.car-row--in-garage {
  border-color: rgba(255, 214, 0, 0.18);
  background: rgba(255, 214, 0, 0.025);
}

.car-row--in-pit {
  opacity: 0.55;
}

.car-row--retired {
  opacity: 0.30;
  filter: grayscale(0.5);
}

.car-row--battle {
  border-color: rgba(168, 85, 247, 0.20);
}

.car-row--out-lap {
  background: linear-gradient(
    90deg,
    rgba(168, 85, 247, 0.06) 0%,
    var(--surface) 60%
  );
}

/* The class-color accent bar on the row's left edge */
.car-row__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}


/* ── Essentials line (always visible) ──────────────────────────────────── */

.car-ess {
  display: flex;
  align-items: center;
  gap: 10px;
}

.car-pos {
  font-size: 16px;
  font-weight: 800;
  min-width: 24px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.car-pos--p1 {
  color: var(--text);
}

/* Position-change chip — v1 brings these in for ~3s after a swap */
.pos-change {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 2px;
  opacity: 0;
  animation: fade-pos 3s ease forwards;
}

.pos-change--up   { color: var(--gtd); background: rgba(0, 169, 79, 0.12); }
.pos-change--down { color: var(--red); background: rgba(255, 23, 68, 0.12); }

@keyframes fade-pos {
  0%, 60% { opacity: 1; }
  100%    { opacity: 0; }
}

.car-num {
  font-size: 13px;
  font-weight: 800;
  min-width: 30px;
  flex-shrink: 0;
  /* color set inline by JS to the class color */
}

/* Main column — team + driver subtext */
.car-main {
  flex: 1;
  min-width: 0;  /* critical for grid/flex truncation */
}

.car-team-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1px;
}

.car-team {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.car-driver-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text2);
  /* allow ellipsis inside */
  min-width: 0;
}

.car-driver {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

/* Two-driver subtext: "Tandy | King" — current driver bolded */
.car-driver__current {
  font-weight: 700;
  color: var(--text);
}

.car-driver__sep {
  margin-inline: 4px;
  color: var(--text3);
}

/* Right column — gap + last-lap stack */
.car-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.car-gap {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text2);
}

.car-gap--leader {
  color: var(--text3);
  font-size: 10px;
  font-weight: 600;
}

.car-last {
  font-size: 10px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}


/* ════════════════════════════════════════════════════════════════════════════
   10. PACE CHIP / GAP-TREND PILL / BATTLE / OUT-LAP / RETIRED / PIT BADGES
   ════════════════════════════════════════════════════════════════════════════ */

/* Gap trend pill — v1 style, more prominent than v2's tiny arrow */
.gap-trend {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.gap-trend--closing { color: var(--gtd); background: rgba(0, 169, 79, 0.16); }
.gap-trend--falling { color: var(--red); background: rgba(255, 23, 68, 0.16); }

/* Sticky/persistent variant — used after a trend has been emitted recently;
   stays visible on the row even briefly after returning to steady. */
.gap-trend--lingering {
  opacity: 0.65;
}

/* Pace chip — strategic-density secondary line */
.pace-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
}

.pace-chip--charging { background: rgba(0, 169, 79, 0.12); color: var(--gtd); }
.pace-chip--fading   { background: rgba(255, 23, 68, 0.12); color: var(--red); }
.pace-chip--steady   { background: rgba(255, 255, 255, 0.05); color: var(--text3); }

/* Battle badge — v1 style (purple-tinted) */
.battle-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--purple);
  background: rgba(168, 85, 247, 0.10);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 3px;
  letter-spacing: 0.04em;
}

/* Out-lap badge — for cars on their first/second lap after a pit stop */
.out-lap-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--purple3);
  background: rgba(192, 132, 252, 0.10);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 3px;
  letter-spacing: 0.04em;
}

/* Retired badge */
.retired-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--red);
  background: rgba(255, 23, 68, 0.12);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 3px;
  letter-spacing: 0.04em;
}

/* PIT badge — v1 style: replaces gap+last lap when in pit */
.pit-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text2);
  padding: 2px 5px;
  border-radius: 3px;
}


/* ════════════════════════════════════════════════════════════════════════════
   11. MANUFACTURER PILLS (v1 — small colored chip beside team name)
   ════════════════════════════════════════════════════════════════════════════ */

.mfr-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text3);
  flex-shrink: 0;
  white-space: nowrap;
}

.mfr-pill--bmw       { background: rgba(30, 100, 200, 0.12);   color: #4488ff; }
.mfr-pill--porsche   { background: rgba(168, 85, 247, 0.12);   color: var(--purple3); }
.mfr-pill--ford      { background: rgba(0, 100, 200, 0.12);    color: #3399ff; }
.mfr-pill--chevrolet { background: rgba(255, 214, 0, 0.12);    color: var(--yellow); }
.mfr-pill--lexus     { background: rgba(200, 50, 50, 0.12);    color: #ff6666; }
.mfr-pill--aston     { background: rgba(0, 169, 79, 0.12);     color: var(--gtd); }
.mfr-pill--mercedes  { background: rgba(192, 192, 192, 0.12);  color: #cccccc; }
.mfr-pill--ferrari   { background: rgba(227, 25, 55, 0.12);    color: var(--gtdpro); }
.mfr-pill--lambo     { background: rgba(255, 214, 0, 0.10);    color: #ffdd44; }
.mfr-pill--mclaren   { background: rgba(255, 120, 0, 0.12);    color: #ff8800; }
.mfr-pill--acura     { background: rgba(200, 30, 30, 0.12);    color: #ff4444; }
.mfr-pill--cadillac  { background: rgba(168, 85, 247, 0.08);   color: var(--purple); }
.mfr-pill--oreca     { background: rgba(91, 155, 213, 0.10);   color: var(--lmp2); }


/* ════════════════════════════════════════════════════════════════════════════
   12. STRATEGIC DENSITY SECONDARY LINE + EXPAND-ON-TAP DETAIL
   ════════════════════════════════════════════════════════════════════════════ */

/* Secondary "strategy" line — only when host has [data-density="strategic"] */
.car-strat {
  display: none;
  gap: 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  align-items: center;
}

[data-density="strategic"] .car-strat {
  display: flex;
}

.strat-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.strat-val {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.strat-lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text3);
}

/* Expand-on-tap detail block — Phase 6.5, kept */
.car-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--motion-medium) var(--ease-out),
              opacity   var(--motion-medium) var(--ease-out);
}

.car-row--expanded .car-detail {
  max-height: 400px;
  opacity: 1;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.car-detail__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}

.car-detail__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text3);
}

.car-detail__value {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin-top: 1px;
}


/* ════════════════════════════════════════════════════════════════════════════
   13. CAUTION STATE — page-level signal under yellow flag
   ════════════════════════════════════════════════════════════════════════════ */

/* When session_state surfaces a yellow flag, the body gets .is-caution.
   The header takes on a subtle yellow border + tint so it's unmissable
   even when scrolled past the leaderboard. */

body.is-caution .app-header {
  background: rgba(48, 40, 0, 0.92);
  border-bottom-color: rgba(255, 214, 0, 0.40);
  box-shadow: 0 1px 0 rgba(255, 214, 0, 0.18) inset;
}


/* ════════════════════════════════════════════════════════════════════════════
   14. FCY PIT-WINDOW EDGE TINT  (Phase 8a — replaced overlay)
   ══════════════════════════════════════════════════════════════════════════
   When session_state surfaces FCY (race + yellow), backend populates each
   car's `fcy.score`. Rather than a modal, the row's left-edge accent bar
   takes on the score color, and the bar widens for prominence.

   When FCY is NOT active, the accent bar reverts to its class-color (set
   via inline style on the .car-row__accent element by the JS).
   ────────────────────────────────────────────────────────────────────── */

.car-row--fcy-pit_now    .car-row__accent { background: var(--green) !important;       width: 4px; }
.car-row--fcy-borderline .car-row__accent { background: var(--yellow-flag) !important; width: 4px; }
.car-row--fcy-stay_out   .car-row__accent { background: var(--text3) !important;       width: 4px; }

/* Tiny tint on the row background as well — subtle, doesn't compete with
   the followed-car yellow tint or the out-lap purple tint. */
.car-row--fcy-pit_now    { box-shadow: inset 0 0 0 1px rgba(0, 230, 118, 0.18); }
.car-row--fcy-borderline { box-shadow: inset 0 0 0 1px rgba(255, 179, 0, 0.18); }


/* ════════════════════════════════════════════════════════════════════════════
   15. POST-SESSION HEADER STATE  (Phase 8a — checker handling)
   ══════════════════════════════════════════════════════════════════════════
   When a session ends, the header pulse, clock, and live flag all become
   misleading. main.js detects checker-as-last-flag and adds .is-finished
   to the body so we can suppress those bits.
   ────────────────────────────────────────────────────────────────────── */

body.is-finished .pulse-dot { animation: none; opacity: 0.3; }
body.is-finished .app-header__times { display: none; }

.app-header__finished {
  display: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text2);
}

/* ════════════════════════════════════════════════════════════════════════════
   16. PHASE 8b — STRATEGY INTELLIGENCE BADGES
   ══════════════════════════════════════════════════════════════════════════
   - Effective position: arrow next to actual position (P5 → P3) when they
     differ. Race-only (backend gates).
   - Strategy story: pill on primary row with narrative label. Race-only.
   - Pace context: replaces pace chip in strategic mode with richer states.
   - Driver category: small badge next to driver name. Bronze gets gold tint.
   - Min drive time: progress bar in expanded detail.
   ────────────────────────────────────────────────────────────────────── */

/* Effective position indicator — sits beside .car-pos when different */
.eff-pos {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.eff-pos--gain { color: var(--gtd); }
.eff-pos--loss { color: var(--red); }


/* Strategy story pill — appears in the team row when set */
.story-pill {
  font-size: 9px;
  font-weight: 700;
  color: var(--purple3);
  background: rgba(168, 85, 247, 0.10);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.story-pill--running_long { color: var(--purple3); background: rgba(168, 85, 247, 0.12); }
.story-pill--off_cycle    { color: var(--yellow);  background: rgba(255, 214, 0, 0.10); }
.story-pill--splash_ready { color: var(--yellow-flag); background: rgba(255, 179, 0, 0.12); }
.story-pill--fresh_tires  { color: var(--gtd);     background: rgba(0, 169, 79, 0.10); }


/* Pace context — extends the existing .pace-chip rules. New states map
   onto the existing color scheme:
     pushing → green (charging variant)
     on_pace → neutral (steady variant)
     saving  → yellow
     off_pace→ red
     warmup  → purple (informational, not a problem)
*/
.pace-chip--on_pace  { background: rgba(255, 255, 255, 0.05); color: var(--text2); }
.pace-chip--pushing  { background: rgba(0, 169, 79, 0.16);   color: var(--gtd); }
.pace-chip--saving   { background: rgba(255, 214, 0, 0.16);  color: var(--yellow); }
.pace-chip--off_pace { background: rgba(255, 23, 68, 0.16);  color: var(--red); }
.pace-chip--warmup   { background: rgba(168, 85, 247, 0.10); color: var(--purple3); }


/* Driver category badge — sits inline in driver row */
.driver-cat {
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: 1px;
}

.driver-cat--Bronze   { background: rgba(180, 110, 40, 0.18);  color: #d4a574; }
.driver-cat--Silver   { background: rgba(192, 192, 192, 0.12); color: #cccccc; }
.driver-cat--Gold     { background: rgba(255, 214, 0, 0.10);   color: var(--yellow); }
.driver-cat--Platinum { background: rgba(168, 85, 247, 0.10);  color: var(--purple3); }


/* Min-drive-time progress bar — in expanded detail panel */
.min-drive {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.min-drive__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text3);
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.min-drive__label-status {
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}

.min-drive__label-status--met { color: var(--gtd); }

.min-drive__bar {
  height: 4px;
  background: var(--surface2);
  border-radius: 2px;
  overflow: hidden;
}

.min-drive__fill {
  height: 100%;
  background: var(--purple);
  transition: width var(--motion-medium) var(--ease-out);
}

.min-drive__fill--met { background: var(--gtd); }


/* ════════════════════════════════════════════════════════════════════════════
   17. RACE-WEEK VIEW
   ══════════════════════════════════════════════════════════════════════════ */

.card-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 12px;
}


/* ── Track profile card ──────────────────────────────────────────────────── */

.track-card {
  margin-top: 12px;
}

.track-card__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}

.track-card__stat-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text3);
}

.track-card__stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.track-card__stat-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--purple);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

.track-card__char {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  font-style: italic;
}


/* ── Weather card ────────────────────────────────────────────────────────── */

.weather-card {
  margin-top: 12px;
}

.weather-card__days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.weather-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 6px;
  background: var(--surface2);
  border-radius: var(--radius);
}

.weather-day__date {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text3);
}

.weather-day__icon {
  width: 48px;
  height: 48px;
  margin-block: 2px -2px;
}

.weather-day__temps {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.weather-day__high {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.weather-day__low {
  font-size: 12px;
  color: var(--text3);
}

.weather-day__summary {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
}

.weather-day__rain {
  font-size: 10px;
  color: var(--lmp2);
  margin-top: 2px;
  font-weight: 600;
}


/* ── Schedule card ───────────────────────────────────────────────────────── */

.schedule-card {
  margin-top: 12px;
}

.schedule-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: var(--radius);
  border-left: 3px solid transparent;
}

.schedule-row--live {
  border-left-color: var(--gtd);
  background: rgba(0, 169, 79, 0.06);
}

.schedule-row--completed {
  opacity: 0.55;
}

.schedule-row__type {
  width: 4px;
  height: 28px;
  border-radius: 2px;
  flex-shrink: 0;
}

.schedule-row__type--practice   { background: var(--text3); }
.schedule-row__type--qualifying { background: var(--purple); }
.schedule-row__type--race       { background: var(--gtd); }

.schedule-row__main {
  flex: 1;
  min-width: 0;
}

.schedule-row__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.schedule-row__context {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-row__time {
  text-align: right;
  font-size: 11px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.schedule-row__status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin-top: 2px;
  color: var(--text3);
}

.schedule-row--live .schedule-row__status {
  color: var(--gtd);
}


/* ════════════════════════════════════════════════════════════════════════════
   18. RECAP / FASTEST / RESULTS / PODIUM CARDS
   ════════════════════════════════════════════════════════════════════════════
   Shared by between_sessions and thats_a_wrap views.
   ────────────────────────────────────────────────────────────────────── */

/* ── Class chip used in recap/fastest rows ─────────────────────────────── */

.recap-card, .fastest-card, .results-card, .podium-card {
  margin-top: 12px;
}


/* ── Recap rows: per-class winner ──────────────────────────────────────── */

.recap-card__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recap-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--surface2);
  border-radius: var(--radius);
}

.recap-row__class {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--bg);
  padding: 3px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 48px;
  text-align: center;
}

.recap-row__main {
  flex: 1;
  min-width: 0;
}

.recap-row__team {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recap-row__driver {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recap-row__car {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  flex-shrink: 0;
}


/* ── Fastest lap rows ──────────────────────────────────────────────────── */

.fastest-card__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fastest-row {
  display: grid;
  grid-template-columns: 56px auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface2);
  border-radius: var(--radius);
}

.fastest-row__class {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--bg);
  padding: 3px 6px;
  border-radius: 3px;
  text-align: center;
}

.fastest-row__lap {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
}

.fastest-row__driver {
  font-size: 11px;
  color: var(--text2);
  min-width: 0;
}

.fastest-row__driver > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fastest-row__lap-num {
  font-size: 9px;
  color: var(--text3);
  margin-top: 1px;
}


/* ── Results card (collapsible class sections) ─────────────────────────── */

.results-card__sections {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.results-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: var(--radius);
  cursor: pointer;
}

.results-card__class-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.results-card__class-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.results-card__count {
  font-size: 11px;
  color: var(--text3);
}

.results-card__chevron {
  font-size: 14px;
  color: var(--text3);
  transition: transform var(--motion-fast) var(--ease-out);
}

.results-card__head:has(+ .open) .results-card__chevron {
  transform: rotate(90deg);
}

.results-card__list {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--motion-medium) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.results-card__list.open {
  max-height: 1500px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.results-row {
  display: grid;
  grid-template-columns: 28px 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  font-size: 12px;
  background: var(--surface2);
}

.results-row:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.results-row:last-child  { border-radius: 0 0 var(--radius) var(--radius); }

.results-row__pos {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text2);
  text-align: center;
}

.results-row__car {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--text);
}

.results-row__main {
  min-width: 0;
}

.results-row__team {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.results-row__driver {
  font-size: 10px;
  color: var(--text3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Podium card ───────────────────────────────────────────────────────── */

.podium-section {
  margin-bottom: 14px;
}

.podium-section:last-child { margin-bottom: 0; }

.podium-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 6px;
}

.podium-section__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.podium-row {
  display: grid;
  grid-template-columns: 44px 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 4px;
  background: var(--surface2);
}

.podium-row--p1 {
  background: linear-gradient(90deg, rgba(255, 214, 0, 0.18) 0%, var(--surface2) 60%);
  border: 1px solid rgba(255, 214, 0, 0.30);
}

.podium-row--p2 {
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.10) 0%, var(--surface2) 60%);
}

.podium-row--p3 {
  background: linear-gradient(90deg, rgba(180, 110, 40, 0.10) 0%, var(--surface2) 60%);
}

.podium-row__rank {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text);
}

.podium-row--p1 .podium-row__rank { color: var(--yellow); }

.podium-row__car {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.podium-row__main {
  min-width: 0;
}

.podium-row__team {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.podium-row__driver {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Wrap hero ────────────────────────────────────────────────────────── */

.wrap-hero__label {
  color: var(--gtd) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   19. GARAGE LAP-TIME CHART (Phase 8b #9a)
   ══════════════════════════════════════════════════════════════════════════ */

.garage-strip__row {
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out);
}

.garage-strip__row:active {
  background: var(--surface2);
}

.garage-strip__chevron {
  font-size: 11px;
  color: var(--text3);
  margin-left: 4px;
}

.garage-strip__chart {
  margin: 4px 0 8px;
  padding: 12px 10px 8px;
  background: var(--surface2);
  border-radius: var(--radius);
}

.lap-chart {
  width: 100%;
}

.lap-chart__empty {
  font-size: 11px;
  color: var(--text3);
  text-align: center;
  padding: 16px 8px;
}

.lap-chart__legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}

.lap-chart__legend strong {
  color: var(--text);
  font-weight: 700;
}

.lap-chart__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: 1px;
}

.lap-chart__dot--best {
  background: var(--purple);
  box-shadow: 0 0 4px rgba(168, 85, 247, 0.6);
}

.lap-chart__outlier-count {
  color: var(--red);
  opacity: 0.7;
}


/* ════════════════════════════════════════════════════════════════════════════
   EMPTY LEADERBOARD STATE
   ════════════════════════════════════════════════════════════════════════════ */

.lb-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text3);
  font-size: 13px;
}