/* ════════════════════════════════════════════════════════════════════════════
   Sectorly v2 — numbers.css  (Phase 8c — Numbers Panel 3, 2026-06-01)
   ────────────────────────────────────────────────────────────────────────────

   Styles for the Numbers tab. Identity: the patterns/temporal view —
   NOT a full-density leaderboard. Per spec page 15, four panels will
   eventually live here. This file ships Panel 3 (strategic-position table)
   and reserves the namespace structure for the other three.

   Namespace:
     .numbers__*    — shared tab chrome (panel container, headers, empty)
     .sp-row        — strategic-position row (Panel 3)
     .lc-*          — lap chart (future)
     .sv-*          — stint visualization (future)
     .pva-*         — predicted vs actual (future)
   ════════════════════════════════════════════════════════════════════════════ */


/* ── TAB-LEVEL CHROME ────────────────────────────────────────────────── */

.numbers {
  padding-bottom: 24px;
}

.numbers__panel {
  margin-top: 16px;
  margin-bottom: 24px;
}

.numbers__panel-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 12px;
  padding-bottom: 6px;
}


/* ── HEADLINE COMPONENT (nx-headline) ─────────────────────────────────── */
/*
   One-line analyst-voice note rendered above each panel's content. Three
   severity tiers; in Chunk 1 only "neutral" placeholder copy ships. Chunk
   2 will produce real (text, severity) tuples computed from session state.

   Visual: small dot + text on the same line, with a hairline rule below
   that pulls double duty as the boundary between the headline and the
   panel content.
*/

.nx-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--surface2, rgba(255,255,255,0.06));
  font-family: 'Outfit', sans-serif;
}

.nx-headline__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text3);
  flex: 0 0 6px;
}

.nx-headline__text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text2);
  letter-spacing: 0.005em;
}

/* Neutral — the default. Gray dot, no glow. */
.nx-headline--neutral .nx-headline__dot {
  background: var(--text3, #6b7280);
}

/* Gain — positive race development. Green dot with subtle glow. */
.nx-headline--gain .nx-headline__dot {
  background: #2dd470;
  box-shadow: 0 0 8px rgba(45, 212, 112, 0.6);
}
.nx-headline--gain .nx-headline__text {
  color: var(--text);
}

/* Warn — fan-attention required. Amber dot with stronger glow. */
.nx-headline--warn .nx-headline__dot {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
}
.nx-headline--warn .nx-headline__text {
  color: var(--text);
}


/* ── CLASS GROUP ─────────────────────────────────────────────────────── */

.numbers__class-group {
  margin-bottom: 16px;
}

.numbers__class-group:last-child {
  margin-bottom: 0;
}

.numbers__class-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.numbers__class-stripe {
  width: 14px;
  height: 3px;
  border-radius: 1.5px;
  flex-shrink: 0;
}

.numbers__class-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text2);
}


/* ── EMPTY STATE ─────────────────────────────────────────────────────── */

.numbers__empty {
  padding: 32px 0;
  text-align: center;
}

.numbers__empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.numbers__empty-blurb {
  font-size: 13px;
  color: var(--text3);
  line-height: 1.5;
  max-width: 32ch;
  margin: 0 auto;
}


/* ── STRATEGIC-POSITION TILE (Panel 3, hybrid redesign 2026-06-04) ────── */
/*
   Layout:

     ┌──────┐  ┌─────────────────────┐  ┌──────────┐
     │  3   │  │  #6  Estre          │  │   P2     │
     │ CLASS│  │  Stint 3 · lap 4    │  │   ↑1     │
     └──────┘  └─────────────────────┘  └──────────┘
       screen     identity (#num+driver, context)    divergence

   Variant A typography (Outfit display weights) + one Variant B borrow:
   the inset "screen" framing on the position number with a class-color
   tinted hairline border. HOLD pill replaces the bare repeat when
   effective = actual.

   Sets --screen-tint via class modifier; all four classes share the
   same tile structure, only the border-tint differs.
*/

.sp-tile {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-family: 'Outfit', sans-serif;
}

.sp-tile:last-child {
  border-bottom: none;
}

.sp-tile--retired {
  opacity: 0.5;
}


/* Screen — the inset position-number panel. Inner shadow + gradient
   gives it a slight LCD/scoreboard quality. The hairline border tints
   class-color (or stays neutral for unknown classes). */
.sp-tile__pos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.12) 100%);
  border-radius: 6px;
  border: 1px solid var(--screen-tint, rgba(255,255,255,0.05));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  min-height: 50px;
}

.sp-tile__pos-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.sp-tile__pos-label {
  font-size: 8px;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 4px;
}


/* Per-class screen-border tints. Subtle — the border alone signals the
   class, the bold class-stripe in the group header carries the bigger
   visual weight. */
.sp-tile--gtp    { --screen-tint: rgba(74, 115, 237, 0.30); }
.sp-tile--lmp2   { --screen-tint: rgba(245, 229, 86, 0.26); }
.sp-tile--gtdpro { --screen-tint: rgba(180, 85, 224, 0.30); }
.sp-tile--gtd    { --screen-tint: rgba(45, 212, 112, 0.30); }


/* Identity column — #number + driver name on top, context below. */
.sp-tile__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-tile__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.sp-tile__num {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.sp-tile__driver {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.sp-tile__ctx {
  font-size: 11px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Divergence column — either stacked (effective P + delta) or
   neutral (P + HOLD pill). Right-aligned, fixed-ish width via tabular
   numerics so it doesn't shift between rows. */
.sp-tile__divergence {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
  min-width: 44px;
}

.sp-tile__div-eff {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* When non-divergent, effective is the same as actual — soften it so the
   eye doesn't read it as new information. */
.sp-tile__div-eff--hold {
  color: var(--text3);
  font-weight: 600;
}

.sp-tile__div-delta {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.sp-tile__div-delta--gain {
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green);
}

.sp-tile__div-delta--lose {
  background: color-mix(in srgb, #e57373 18%, transparent);
  color: #e57373;
}

/* HOLD pill — neutral, low-weight, signals "no strategic shift" without
   competing visually with real movement. */
.sp-tile__div-hold {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text3);
  background: rgba(255,255,255,0.04);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  line-height: 1.2;
}


/* ════════════════════════════════════════════════════════════════════════
   PANEL 4 — LAP CHART  (lc-*)
   ════════════════════════════════════════════════════════════════════════ */

/* Class filter chips above the chart */

.lc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.lc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
  font-family: 'Outfit', sans-serif;
}

.lc-chip:hover {
  background: var(--surface2);
  color: var(--text);
}

.lc-chip--active {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--text3);
}

.lc-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}


/* The chart SVG itself */

.lc-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  margin-bottom: 12px;
}


/* Legend below the chart — tappable chips */

.lc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.lc-legend__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text3);
  font-size: 11px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}

.lc-legend__chip:hover {
  background: var(--surface2);
}

.lc-legend__chip--active {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--text3);
}

.lc-legend__num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lc-legend__driver {
  font-weight: 500;
}


/* ════════════════════════════════════════════════════════════════════════
   PANEL 5 — STINT VISUALIZATION  (sv-*)
   ════════════════════════════════════════════════════════════════════════ */

/*
   Lane layout (HTML/SVG hybrid — refactored Chunk 1 to fix text sizing):

     ┌───────────────┐ ┌─────────────────────────────────┐ ┌─────────┐
     │ #6   Estre    │ │  ▓▓▓▓▓│▓▓▓▓│▓▓▓▓▓▓▓             │ │ 3 stints│
     └───────────────┘ └─────────────────────────────────┘ └─────────┘
       HTML label         SVG bar (stretches)               HTML count

   Previously: a single SVG with viewBox 700×28 containing both text and
   shapes. Mobile containers (~393px) scaled the viewBox down, and 11-unit
   SVG text rendered at ~6px visual. Pulling text out into real HTML lets
   CSS govern font size directly while the SVG bar still scales freely.
*/

.sv-lane {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  margin-bottom: 4px;
  gap: 10px;
}

.sv-lane__label {
  flex: 0 0 96px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-family: 'Outfit', sans-serif;
}

.sv-lane__num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.sv-lane__driver {
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.sv-lane__bar {
  flex: 1 1 auto;
  min-width: 0;
  height: 16px;
  display: block;
}

.sv-lane__bar-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sv-lane__meta {
  flex: 0 0 auto;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 56px;
}


/* ════════════════════════════════════════════════════════════════════════
   STRATEGY CUE BADGE  (.strategy-badge)
   ════════════════════════════════════════════════════════════════════════ */
/*
   Small color-coded pill surfaced from car.strategy_story. Used inside
   the Strategic Position tile's divergence column AND inside the stint
   lane's meta column — same component, two contexts.

   Color encoding matches the headline severity language: amber for
   "interesting / pay attention" (LONG), red for "act now" (PIT), green
   for "positive" (BANK). Unknown strategy_story values render with the
   neutral treatment.
*/

.strategy-badge {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.strategy-badge--long {
  background: color-mix(in srgb, var(--amber, #f59e0b) 22%, transparent);
  color:      var(--amber, #f59e0b);
  border: 1px solid color-mix(in srgb, var(--amber, #f59e0b) 40%, transparent);
}

.strategy-badge--pit {
  background: color-mix(in srgb, #e57373 22%, transparent);
  color:      #e57373;
  border: 1px solid color-mix(in srgb, #e57373 40%, transparent);
}

.strategy-badge--bank {
  background: color-mix(in srgb, var(--green) 22%, transparent);
  color:      var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
}

.strategy-badge--neutral {
  background: rgba(255, 255, 255, 0.06);
  color:      var(--text2);
  border: 1px solid rgba(255, 255, 255, 0.10);
}


/* ════════════════════════════════════════════════════════════════════════
   PANEL 4 — PIT CYCLE OUTLOOK  (p4-*)
   ════════════════════════════════════════════════════════════════════════ */
/*
   Per-car lane: [label 96px] [bar (flex)] [status badge auto]
   Same lane width and x-axis grain as Panel 5 so they read as a paired
   timeline when stacked. Bar SVG uses viewBox 0-700 mapped to L0-viewMaxLap
   (computed at render time from globalMaxLap + ~1.5 stints buffer).
*/

.p4-lane {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  margin-bottom: 5px;
}

.p4-label {
  flex: 0 0 96px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-family: 'Outfit', sans-serif;
}

.p4-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.p4-driver {
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.p4-bar {
  flex: 1 1 auto;
  min-width: 0;
  height: 20px;
  display: block;
}

.p4-bar-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Status badge — color-coded by relationship of NOW to predicted window */
.p4-badge {
  flex: 0 0 auto;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  min-width: 80px;
  text-align: center;
}

.p4-badge--inwindow {
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green);
}

.p4-badge--upcoming {
  background: color-mix(in srgb, #38bdf8 14%, transparent);
  color: #38bdf8;
}

.p4-badge--longrun {
  background: color-mix(in srgb, #f59e0b 26%, transparent);
  color: #f59e0b;
  border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
}

.p4-badge--pitnow {
  background: color-mix(in srgb, #e57373 22%, transparent);
  color: #e57373;
}

.p4-badge--fresh {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text3);
}


/* ── STINT PACE SPARKLINE (.sp-tile__pace) ─────────────────────────────── */
/*
   Tiny within-stint pace curve embedded in the Strategic Position tile's
   identity column. Renders below the context line. Reads lap_history
   from /api/numbers (so it updates on the slower 30s cadence — fine,
   since pace decay is gradual). Class-color stroke at low opacity.

   Hidden when the current stint has fewer than 3 timed laps.
*/

.sp-tile__pace {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  min-height: 16px;
}

.sp-tile__pace-svg {
  flex: 0 0 56px;
  height: 16px;
  display: block;
}

.sp-tile__pace-delta {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════════════════
   PANEL 6 — YELLOW BENEFICIARIES  (.fcy-*)
   ════════════════════════════════════════════════════════════════════════ */
/*
   Per-FCY entries listing who pitted under each yellow and how many held.
   Most recent FCY appears first. Self-collapses (no panel chrome) when
   the session has no completed yellows.
*/

.fcy-entry {
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  font-family: 'Outfit', sans-serif;
}
.fcy-entry:last-child {
  border-bottom: none;
}

/* Header line: FCY # · lap range · duration */
.fcy-entry__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.fcy-entry__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--amber, #f59e0b);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  flex: 0 0 auto;
}
.fcy-entry__range {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.fcy-entry__duration {
  font-size: 11px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}

/* Row layout: count label + cars (or hint) */
.fcy-entry__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.fcy-entry__row:last-child {
  margin-bottom: 0;
}

.fcy-entry__count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
  flex: 0 0 auto;
  min-width: 64px;
}
.fcy-entry__count--muted {
  color: var(--text3);
}
.fcy-entry__count--empty {
  color: var(--text3);
  font-weight: 600;
}
.fcy-entry__hint {
  font-size: 12px;
  color: var(--text3);
  font-style: italic;
}

.fcy-entry__cars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

/* Per-car pill — class-color bordered */
.fcy-car {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.fcy-car--gtp {
  border-color: color-mix(in srgb, var(--gtp) 50%, transparent);
  background:   color-mix(in srgb, var(--gtp) 12%, transparent);
}
.fcy-car--lmp2 {
  border-color: color-mix(in srgb, var(--lmp2) 50%, transparent);
  background:   color-mix(in srgb, var(--lmp2) 12%, transparent);
}
.fcy-car--gtdpro {
  border-color: color-mix(in srgb, var(--gtdpro) 50%, transparent);
  background:   color-mix(in srgb, var(--gtdpro) 12%, transparent);
}
.fcy-car--gtd {
  border-color: color-mix(in srgb, var(--gtd) 50%, transparent);
  background:   color-mix(in srgb, var(--gtd) 12%, transparent);
}