/* ════════════════════════════════════════════════════════════════════════════
   Sectorly v2 — leaderboard.css  (Phase 8c — spec-12 slim row)
   ────────────────────────────────────────────────────────────────────────────

   Styles for the rebuilt leaderboard row (live_session.js Phase 8c).
   New `lb-*` class namespace so these don't collide with the legacy
   `car-row` styles still living in components.css — once this is
   confirmed working, the old `car-row*` rules can be deleted.

   Row anatomy (single glance line, ~54px):

     ▮  P2   #31   GTD PRO   ⬡Cadillac  Aitken      +0.3s   ↑0.8  ›

   Design philosophy (spec 12): the row is QUIET until something happens.
   The cue zone (lb-cue) is empty most of the time; stories rise out of a
   calm field. Class color stripe is the primary class anchor; manufacturer
   pill is a secondary brand anchor in restrained brand color.

   Link this AFTER components.css (or paste into it). Only existing tokens
   from tokens.css are used.
   ════════════════════════════════════════════════════════════════════════════ */


/* ── ROW CONTAINER ────────────────────────────────────────────────────── */

.lb-row {
  position: relative;
  display: block;            /* main line + optional expand detail stack */
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out);
}

.lb-row:hover {
  background: var(--surface2);
}

/* Followed rows get a faint purple wash so they stand out in the field. */
.lb-row--followed {
  background: color-mix(in srgb, var(--purple) 8%, var(--surface));
}

/* Retired rows recede — they're informational, not active. */
.lb-row--retired {
  opacity: 0.5;
}


/* ── CLASS COLOR STRIPE (zone 1) ──────────────────────────────────────── */

.lb-row__accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  /* background set inline by JS (class color, or purple when followed) */
}


/* ── MAIN GLANCE LINE ─────────────────────────────────────────────────── */

.lb-row__main {
  display: grid;
  /* pos | num | class | mfr | driver(flex) | gap | cue | chevron */
  grid-template-columns:
    auto    /* pos    */
    auto    /* num    */
    auto    /* class  */
    auto    /* mfr    */
    1fr     /* driver — takes remaining space */
    auto    /* gap    */
    auto    /* cue    */
    auto;   /* chevron */
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 14px;   /* left padding clears the 4px stripe */
  min-height: 54px;
}


/* Zone 2: position-in-class */
.lb-pos {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  min-width: 30px;
  font-variant-numeric: tabular-nums;
}
.lb-pos--p1 {
  color: var(--purple3);
}

/* Zone 3: car number */
.lb-num {
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  /* color set inline by JS (class color) */
  cursor: pointer;
}

/* Zone 4: class label (hidden when a class filter is active) */
.lb-class {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  white-space: nowrap;
}

/* Zone 5b: single driver */
.lb-driver {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.lb-row--followed .lb-driver {
  font-weight: 600;
}

/* Zone 6: class gap */
.lb-gap {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.lb-gap--leader {
  color: var(--purple3);
  font-weight: 700;
}

/* Zone 8: chevron */
.lb-chevron {
  font-size: 18px;
  line-height: 1;
  color: var(--text3);
  transition: transform var(--motion-fast) var(--ease-out);
}
.lb-row--expanded .lb-chevron {
  transform: rotate(90deg);
}


/* ── MANUFACTURER PILL (zone 5a) — restrained brand color ─────────────── */
/* Brand color applied as TEXT + thin border, NOT a solid fill, so it does
   not compete with the class color stripe (spec revision note 3). */

.mfr-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  white-space: nowrap;
  /* color is set per-manufacturer below; the text and border inherit it,
     background stays transparent so it reads as an outline pill */
  background: transparent;
  opacity: 0.85;
}

/* Brand colors. Kept reasonably faithful but muted to sit calmly in a
   dense grid. These set `color`, which drives both text and border. */
.mfr-pill--bmw        { color: #4a9bd4; }
.mfr-pill--porsche    { color: #d4af37; }
.mfr-pill--ford       { color: #3b7dd8; }
.mfr-pill--chevrolet  { color: #d4a017; }
.mfr-pill--lexus      { color: #9aa0a6; }
.mfr-pill--aston      { color: #1f7a6d; }
.mfr-pill--mercedes   { color: #6fb1c4; }
.mfr-pill--ferrari    { color: #e8413a; }
.mfr-pill--lambo      { color: #d98c1f; }
.mfr-pill--mclaren    { color: #e87d1e; }
.mfr-pill--acura      { color: #c44; }
.mfr-pill--cadillac   { color: #b89968; }
.mfr-pill--oreca      { color: #8a8f98; }


/* ── CUE ZONE (zone 7) — the single cue, empty most of the time ───────── */

.lb-cue {
  /* Empty by default — renders nothing, reserves no fixed width so the
     row breathes. When a cue fires, lb-cue--visible styles it. */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lb-cue--visible {
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

/* Per-type cue styling. Restrained — color carries meaning, no loud fills
   except where urgency warrants (pit). */

/* pit: in the pits — neutral chip, the row itself doesn't dim (only
   retired dims) so the PIT chip is the signal. */
.lb-cue--pit {
  background: var(--surface2);
  color: var(--text2);
  text-transform: uppercase;
}

/* retired: muted, no fill — the row is already at reduced opacity. */
.lb-cue--retired {
  color: var(--text3);
  text-transform: uppercase;
}

/* out_lap: warming up — faint purple, transient. */
.lb-cue--out_lap {
  color: var(--purple3);
  text-transform: uppercase;
}

/* gap_trend: directional — green-ish when closing, dim when falling.
   Backend supplies the arrow glyph in the text already. */
.lb-cue--gap_trend {
  color: var(--green);
}

/* strategy_story: a strategic note — neutral, readable. */
.lb-cue--strategy_story {
  color: var(--text2);
  text-transform: uppercase;
}

/* pace: pace state (SAVING / OFF PACE / PUSHING) — purple accent, the
   brand "going purple" connotation for pace. */
.lb-cue--pace {
  color: var(--purple3);
  text-transform: uppercase;
}


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

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