/* TIMELESS — page-specific component styles */

/* ------------------------------------------------------------------- hero */
.section-hero {
  position: relative;
  padding-top: var(--tl-sp-9);
  padding-bottom: var(--tl-sp-7);
  overflow: hidden;
}
.section-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 640px; z-index: -1;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, color-mix(in srgb, var(--tl-deep-blue) 38%, transparent), transparent 70%);
  pointer-events: none;
}
.hero-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
/* Same rule as .brand-mark: inline SVG, dark-first, light is the override. */
.hero-logo { width: 84px; height: auto; color: var(--tl-white); margin-bottom: var(--tl-sp-6); display: block; }
:root[data-theme="light"] .hero-logo { color: var(--tl-deep-blue); }
.hero-name-block { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero-name-row { display: flex; align-items: center; gap: var(--tl-sp-3); justify-content: center; flex-wrap: wrap; }
.hero-name-row .hero-name { margin-bottom: 0; }
.hero-name-edit { font-size: var(--tl-fs-base); }
.hero-name-form { display: flex; align-items: center; gap: var(--tl-sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--tl-sp-3); }
.hero-name-input { min-width: 260px; font-size: var(--tl-fs-lg); }
.hero-badges { display: flex; gap: var(--tl-sp-2); margin-bottom: var(--tl-sp-5); }
.hero-name { font-size: var(--tl-fs-display); letter-spacing: var(--tl-tracking-display); margin-bottom: var(--tl-sp-3); }
.hero-name-tbd { color: var(--tl-text-dim); font-style: italic; }
.hero-name-candidate { color: var(--tl-text-faint); font-size: var(--tl-fs-sm); margin-top: calc(-1 * var(--tl-sp-2)); margin-bottom: var(--tl-sp-5); }
.hero-dates { font-size: var(--tl-fs-lg); font-weight: var(--tl-fw-bold); color: var(--tl-accent); margin-bottom: var(--tl-sp-2); }
.hero-audience { max-width: 56ch; color: var(--tl-text-dim); font-size: var(--tl-fs-lg); }
.hero-countdown {
  margin-top: var(--tl-sp-4); display: inline-block; padding: var(--tl-sp-2-5) var(--tl-sp-5);
  background: var(--tl-bg-raised); border: 1px solid var(--tl-border); border-radius: var(--tl-radius-pill);
  font-weight: var(--tl-fw-semibold); font-size: var(--tl-fs-sm); box-shadow: var(--tl-shadow-sm);
}

/* ------------------------------------------------------------------ stats */
.stat-tile {
  background: var(--tl-bg-raised); border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg);
  padding: var(--tl-sp-5); transition: border-color var(--tl-dur-3) var(--tl-ease), transform var(--tl-dur-3) var(--tl-ease);
}
.stat-tile:hover { border-color: var(--tl-border-strong); }
.stat-tile-warn { border-color: color-mix(in srgb, var(--tl-warn) 45%, transparent); background: var(--tl-warn-bg); }
.stat-value { font-size: var(--tl-fs-h2); font-weight: var(--tl-fw-bold); line-height: var(--tl-lh-none); letter-spacing: var(--tl-tracking-tight); }
.stat-label { margin-top: var(--tl-sp-2); font-weight: var(--tl-fw-semibold); font-size: var(--tl-fs-sm); color: var(--tl-text); }
.stat-sub { color: var(--tl-text-faint); font-size: var(--tl-fs-xs); margin-top: var(--tl-sp-0-5); }

/* -------------------------------------------------------------- timeline */
.timeline-block { margin-bottom: var(--tl-sp-7); }
.show-days { display: flex; flex-wrap: wrap; gap: var(--tl-sp-3); margin-bottom: var(--tl-sp-5); }
.show-day { display: flex; gap: var(--tl-sp-4); align-items: center; flex: 1 1 260px; }
.show-day-date {
  font-weight: var(--tl-fw-bold); text-align: center; color: var(--tl-accent); flex-shrink: 0;
  min-width: 64px; border-right: 1px solid var(--tl-border); padding-right: var(--tl-sp-3); line-height: var(--tl-lh-compact);
}
.show-day-body { flex: 1; }
.running-order-title { font-size: var(--tl-fs-lg); margin: var(--tl-sp-5) 0 var(--tl-sp-2); }
.running-order { list-style: decimal; margin-left: 1.4em; color: var(--tl-text-dim); }
.running-order li { margin-bottom: var(--tl-sp-0-5); }

.timeline-legend { margin-bottom: var(--tl-sp-3); }
.timeline-month { margin-bottom: var(--tl-sp-4); }
.timeline-month h4 { font-size: var(--tl-fs-sm); text-transform: uppercase; letter-spacing: var(--tl-tracking-5); color: var(--tl-text-faint); margin-bottom: var(--tl-sp-2); font-weight: var(--tl-fw-semibold); }
.timeline-list { list-style: none; border-left: 2px solid var(--tl-border); }
.timeline-item { display: flex; align-items: flex-start; gap: var(--tl-sp-3); padding: var(--tl-sp-2) 0 var(--tl-sp-2) var(--tl-sp-4); position: relative; }
/*
 * The rail (.timeline-list's border-left) runs behind every marker. This
 * used to "erase" a gap in it by painting a background patch the same flat
 * colour as the page (--tl-bg) behind each glyph — which only works when the
 * page background IS that flat colour. Against the ambient gradient (see
 * .bg-ambient in base.css) the page behind the rail is rarely --tl-bg
 * exactly, so every marker over the gradient's lighter/blue region rendered
 * as a visibly wrong solid patch — a blob, not a dot.
 *
 * Fixed size + its own opaque surface colour + a border means this no longer
 * needs to match whatever is behind it — it reads as a small filled marker
 * dot sitting ON the rail (the standard timeline pattern) rather than a
 * disguised hole in it, so it looks correct against any background,
 * including a gradient that changes as you scroll past it. 14px keeps the
 * existing -7px offset centred on the 2px rail exactly as before.
 */
.timeline-marker {
  position: absolute; left: -7px; top: 14px; width: 14px; height: 14px; line-height: 14px;
  text-align: center; border-radius: var(--tl-radius-pill);
  background: var(--tl-bg-raised-2); border: 1px solid var(--tl-border-strong);
  color: var(--tl-text-faint); font-size: var(--tl-fs-3xs);
}
.timeline-item.timeline-gate .timeline-marker { color: var(--tl-cat-mid); border-color: var(--tl-cat-mid); font-size: var(--tl-fs-2xs); }
.timeline-item.timeline-overdue .timeline-marker { color: var(--tl-danger); border-color: var(--tl-danger); }
.timeline-date { flex-shrink: 0; width: 56px; font-weight: var(--tl-fw-semibold); font-size: var(--tl-fs-sm); color: var(--tl-text-dim); }
.timeline-body { font-size: var(--tl-fs-sm); }
.timeline-gate .timeline-body { color: var(--tl-cat-mid); }

/* ------------------------------------------------------------------ money */
.scenario-grid { margin-bottom: var(--tl-sp-7); align-items: stretch; }
.scenario-card { border-top: 3px /* accent border, not spacing */ solid var(--tl-border-strong); display: flex; flex-direction: column; gap: var(--tl-sp-3); }
.scenario-card.cat-worst { border-top-color: var(--tl-cat-worst); }
.scenario-card.cat-mid { border-top-color: var(--tl-cat-mid); }
.scenario-card.cat-best { border-top-color: var(--tl-cat-best); }
.scenario-head { display: flex; gap: var(--tl-sp-3); align-items: center; }
.scenario-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.cat-worst .scenario-dot { color: var(--tl-cat-worst); }
.cat-mid .scenario-dot { color: var(--tl-cat-mid); }
.cat-best .scenario-dot { color: var(--tl-cat-best); }

.scenario-bar-row { display: flex; align-items: center; gap: var(--tl-sp-2); margin-bottom: var(--tl-sp-1-5); }
.scenario-bar-label { width: 50px; font-size: var(--tl-fs-xs); color: var(--tl-text-faint); flex-shrink: 0; }
.scenario-bar-track { flex: 1; height: 12px; background: var(--tl-bg-sunken); border: 1px solid var(--tl-border); border-radius: var(--tl-radius-xs); overflow: hidden; display: flex; }
.scenario-bar-seg { height: 100%; display: block; }
/* var(--tl-info), not var(--tl-turquoise) directly: --tl-info is already
   re-tuned per-theme (see tokens.css), so this segment stays legible next
   to .seg-sponsor in light mode instead of both collapsing onto the same
   deep-blue accent. */
.seg-trading { background: var(--tl-info); }
.seg-sponsor { background: var(--tl-light-blue); }
:root[data-theme="light"] .seg-sponsor { background: var(--tl-deep-blue); }
.seg-cost { background: var(--tl-text-faint); }

.scenario-legend { display: flex; flex-wrap: wrap; gap: var(--tl-sp-3); font-size: var(--tl-fs-xs); color: var(--tl-text-dim); }
.scenario-legend .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: var(--tl-sp-1); vertical-align: middle; }
.scenario-net { font-size: var(--tl-fs-h3); font-weight: var(--tl-fw-bold); }
.scenario-sponsors { font-size: var(--tl-fs-xs); }

.money-finding { margin: var(--tl-sp-5) 0; }
.money-finding strong { display: block; margin-bottom: var(--tl-sp-1); color: var(--tl-text); }

.curve-row { display: flex; gap: var(--tl-sp-3); margin: var(--tl-sp-4) 0 var(--tl-sp-7); flex-wrap: wrap; }
.curve-chip {
  flex: 1 1 100px; text-align: center; background: var(--tl-bg-raised); border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-md); padding: var(--tl-sp-3);
}
.curve-chip-be { border-color: var(--tl-cat-mid); background: var(--tl-warn-bg); }
.curve-pct { font-weight: var(--tl-fw-bold); font-size: var(--tl-fs-lg); }
.curve-net { color: var(--tl-text-dim); font-size: var(--tl-fs-sm); }
.curve-be-label { font-size: var(--tl-fs-xs); font-weight: var(--tl-fw-bold); color: var(--tl-cat-mid); margin-top: var(--tl-sp-0-5); }

.row-subtotal td { font-style: italic; color: var(--tl-text-dim); }
.row-total td { border-top: 2px solid var(--tl-border-strong); font-size: var(--tl-fs-base); }

.money-footer { margin-top: var(--tl-sp-7); }
.money-footer h4 { margin-bottom: var(--tl-sp-2); color: var(--tl-text); }
.bullet-list { list-style: disc; margin-left: 1.2em; color: var(--tl-text-dim); font-size: var(--tl-fs-sm); }
.bullet-list li { margin-bottom: var(--tl-sp-2); }
.bullet-list-tight li { margin-bottom: 3px; /* deliberate micro-nudge, not on the spacing scale */ }
.fx-note { margin-top: var(--tl-sp-4); font-size: var(--tl-fs-xs); }

/* --------------------------------------------------- partners (sponsors) */
.sponsor-card {
  background: var(--tl-bg-raised); border: 1px solid var(--tl-border); border-radius: var(--tl-radius-md);
  padding: var(--tl-sp-4); border-left: 3px solid var(--tl-border-strong);
}
.sponsor-pledged { border-left-color: var(--tl-cat-best); }
.sponsor-indicated { border-left-color: var(--tl-cat-mid); }
.sponsor-live { border-left-color: var(--tl-accent); }
.sponsor-older { border-left-color: var(--tl-border-strong); opacity: 0.9; }
.sponsor-dead { border-left-color: var(--tl-text-faint); opacity: 0.55; }
.sponsor-amount { font-weight: var(--tl-fw-bold); margin-top: var(--tl-sp-2); color: var(--tl-text); }
.sponsor-contact { margin-top: var(--tl-sp-2); word-break: break-word; }
.sponsor-note { font-size: var(--tl-fs-sm); color: var(--tl-text-dim); margin-top: var(--tl-sp-2); margin-bottom: 0; }

/* ----------------------------------------------------------------- venues */
.venue-card { padding: 0; overflow: hidden; }
.venue-body { padding: var(--tl-sp-5); }
.venue-body h3 { margin-top: var(--tl-sp-2); }
.venue-stats { display: flex; gap: var(--tl-sp-5); margin: var(--tl-sp-4) 0; flex-wrap: wrap; }
.venue-stats > div { flex: 1 1 140px; }
.venue-stats strong { font-size: var(--tl-fs-lg); color: var(--tl-text); }
.venue-body .callout { margin-top: var(--tl-sp-4); }

/* -------------------------------------------------------------- responsive */
/* --tl-bp-sm (640px) */
@media (max-width: 640px) {
  .hero-name-input { min-width: 0; width: 100%; }
}
/* --tl-bp-xl (860px) — .section-hero's own padding-top/bottom (set below)
   loads AFTER base.css's .section relief rules and wins on specificity ties,
   so the hero needs its own step-down here or it keeps the full 144px/64px
   desktop rhythm at every width, which alone used to eat roughly a third of
   a 390×844 phone screen before any content appeared. */
@media (max-width: 860px) {
  .section-hero { padding-top: var(--tl-sp-7); padding-bottom: var(--tl-sp-6); }
}
@media (max-width: 700px) {
  .section-hero { padding-top: var(--tl-sp-6); padding-bottom: var(--tl-sp-5); }
  .hero-logo { width: 64px; margin-bottom: var(--tl-sp-4); }
}