/* Components: everything that is not page chrome. Home (hero, race
   cards, recent moves) and race detail (verdict, standings, measured
   data, notes). Reads the tokens and the raised-box treatment defined
   in styles.css; loads after it, so overrides here win on source order.

   Breakpoints, site-wide, both deliberate:
     820px  content grids collapse to one column (hero, races)
     720px  page chrome stacks (masthead, site header, footer, tables)
   Wide grids need to collapse before the chrome does, so these differ
   on purpose. Custom properties do not work in media queries, so the
   numbers are literals; keep them to these two. */

.space-section {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--border);
}

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.sec-head h2 {
  font-size: 22px;
}

.sec-head h2.sec-head--lg {
  font-size: 36px;
}

.sec-head .muted {
  font-size: 13px;
  color: var(--muted-foreground);
}

/* Verdict — the headline answer */
/* A section that ends in a rule, like .space-section, not a panel. The
   old rule set `border`, then `border-bottom`, on the assumption the
   second replaced the first; it only replaces the bottom edge. With the
   leftover panel resets (padding: 0, transparent, no shadow) that left a
   full box outline with the text sitting directly on it. */
.verdict {
  margin-top: 8px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

.verdict-text {
  font-size: 19px;
  line-height: 1.55;
  margin: 8px 0 0;
  max-width: 78ch;
}

/* KPI methodology cards */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
}

.kpi strong {
  font-size: 13px;
}

.kpi .muted {
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.4;
}

.kpi-src {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
}

/* Standings — positions, not points */
.standings-list {
  border-top: 1px solid var(--border);
}

.standing-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: start;
  gap: 6px 16px;
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/* Zebra: odd rows raised, even rows on the page ground. */
.standing-row:nth-child(even) {
  background: transparent;
}

.standing-rank {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--muted-foreground);
  padding-top: 2px;
}

.standing-main {
  min-width: 0;
}

.standing-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.standing-name {
  font-size: 16px;
  font-weight: 700;
}

.standing-headline {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--foreground);
  line-height: 1.45;
}

.standing-evidence {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.standing-evidence .ev + .ev::before {
  content: " · ";
}

.standing-pos {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  white-space: nowrap;
}

.pos-pill {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
}

.pos-leading { color: var(--lead); }
.pos-challenging { color: var(--challenge); }
.pos-in-the-mix { color: var(--foreground); }
.pos-fading { color: var(--decline); }
.pos-entering { color: var(--foreground); }
.pos-not-competing { color: var(--muted-foreground); }

.trend-icon {
  font-size: 13px;
}

.trend-up { color: var(--lead); }
.trend-down { color: var(--decline); }
.trend-flat { color: var(--muted-foreground); }

.confidence {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  color: var(--muted-foreground);
}

.conf-High { color: var(--lead); }
.conf-Medium { color: var(--muted-foreground); }
.conf-Low { color: var(--decline); }

/* Not-competing rows render compact and muted */
.standing-row--compact {
  grid-template-columns: 28px 1fr auto;
  padding-top: 10px;
  padding-bottom: 10px;
  background: transparent;
}

.standing-row--compact .standing-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-foreground);
}

.standing-row--compact .standing-headline {
  display: none;
}

/* Measured data — published figures only, no composite index */
.measured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.metric-card {
  padding: 18px 20px;
}

.metric-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  margin: 0;
}

.metric-unit {
  display: block;
  margin: 2px 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.metric-rows {
  border-top: 1px solid var(--border);
  padding-top: 4px;
}

.metric-row {
  display: grid;
  grid-template-columns: minmax(88px, 42%) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.metric-name {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-track {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.metric-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--muted-foreground);
}

.metric-row--top .metric-fill {
  background: var(--brand);
}

.metric-value {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.metric-source {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted-foreground);
}

/* Movement */
.movement {
  padding: 16px 18px;
}

.movement p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Notes */
.notes {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.roster-note {
  font-size: 13px;
  color: var(--muted-foreground);
  font-style: italic;
  margin: 0 0 12px;
}

.notes details {
  font-size: 13px;
}

.notes summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--foreground);
}

.notes details ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.notes details li {
  margin-bottom: 6px;
}

.status-line {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted-foreground);
}

/* Space switcher */
.space-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.space-tab {
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  color: var(--muted-foreground);
}

.space-tab:hover {
  border-color: var(--foreground);
  color: var(--foreground);
}

.space-tab.active {
  border-color: var(--foreground);
  color: var(--foreground);
}

/* Home — hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
  padding: 96px 0 64px;
}

/* Same label as .eyebrow (styles.css); only the space below it differs. */
.hero-eyebrow {
  margin-bottom: 14px;
}

.hero-headline {
  max-width: 680px;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.08;
  margin: 0;
}

.hero-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--muted-foreground);
}

.hero-side {
  border-left: 1px solid var(--brand);
  padding-left: 32px;
  margin-top: 30px;
  font-size: 18px;
  font-weight: 300;
  line-height: 29px;
  color: var(--muted-foreground);
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-side {
    border-left: none;
    border-top: 1px solid var(--brand);
    padding-left: 0;
    padding-top: 14px;
    margin-top: 0;
  }
}

/* Home — the races */
.races-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 30px 0 16px;
}

.races-intro h2 {
  font-size: 36px;
}

.races-grid {
  display: grid;
  grid-template-columns: 5fr 2fr;
  gap: 16px;
}

.races-grid--coming {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 16px;
}

@media (max-width: 820px) {
  .races-grid {
    grid-template-columns: 1fr;
  }

  .race-card.featured .race-name {
    font-size: 26px;
  }
}

.race-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  padding: 24px 26px;
  text-decoration: none;
  color: inherit;
}

a.race-card.live:hover {
  border-color: var(--foreground);
  box-shadow: var(--shadow);
}

.race-card.planned {
  background: transparent;
  border-style: dashed;
  min-height: auto;
  padding: 18px 20px;
}

/* Inverse scope. Re-mapping the palette here is what makes every rule
   below correct on the solid-brand card: .race-q, .race-eyebrow, .mini-row,
   .mini-rank, .pos-* and .trend-* go on reading --muted-foreground,
   --border and --lead as usual, and get on-brand values.

   The alternative is an override per element, which is what this used to
   be, and it lost a fight to .trend-icon: a colour set on the element
   itself always beats one inherited from an ancestor rule, however
   specific that ancestor rule is. Re-mapping sidesteps specificity
   entirely, because inheritance is doing the work.

   --brand is deliberately left alone: the card paints itself with it. */
.race-card.accent {
  --foreground: var(--brand-foreground);
  --muted-foreground: color-mix(in oklch, var(--brand-foreground) 78%, transparent);
  --border: color-mix(in oklch, var(--brand-foreground) 20%, transparent);
  --lead: var(--brand-foreground);
  --challenge: var(--brand-foreground);
  --decline: var(--brand-foreground);

  background: var(--brand);
  border-color: var(--brand);
  color: var(--foreground);
}

/* .race-go reads --brand, which this scope keeps as the card's own fill. */
.race-card.accent .race-go {
  color: var(--brand-foreground);
}

.race-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.race-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.race-status {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  padding: 3px 8px;
  border-radius: var(--radius);
  border: 1px solid;
}

.race-status.live {
  color: var(--lead);
  border-color: var(--lead);
  background: var(--brand-wash);
}

/* The chip drops its tint rather than inherit a wash mixed for cream. */
.race-card.accent .race-status.live {
  border-color: color-mix(in oklch, var(--brand-foreground) 60%, transparent);
  background: transparent;
}

.race-status.planned {
  color: var(--muted-foreground);
  border-color: var(--border);
  background: var(--surface);
}

.race-name {
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
}

.race-card.featured .race-name {
  font-size: 40px;
}

.race-card.planned .race-name {
  font-size: 19px;
}

.race-q {
  margin: 0;
  font-size: 13px;
  color: var(--muted-foreground);
}

/* Mini standings preview, inside a race card */
.race-mini-standings {
  margin-top: 12px;
}

.mini-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.mini-row:last-child {
  border-bottom: none;
}

.mini-rank {
  color: var(--muted-foreground);
}

.mini-name {
  font-weight: 700;
}

.mini-pos {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
}

.race-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
}

.race-go {
  font-weight: 700;
  color: var(--brand);
}

/* Sponsor / ad placeholders */
.ad-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 26px;
  border-style: dashed;
  padding: 16px 18px;
}

.ad-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.ad-body {
  font-size: 13px;
  color: var(--muted-foreground);
}

/* Recent moves */
.move-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.move-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.move-space {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brand);
}

.move-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted-foreground);
  cursor: pointer;
}

.move-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.move-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.move-text {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  max-width: 78ch;
}

.move-detail {
  margin-top: 12px;
  padding: 16px 20px;
  max-width: 78ch;
  background: var(--surface);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
}

.move-detail p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--foreground);
}