/* ============================================================
   RESULTS PAGES - shared design system
   ============================================================
   Used by every King of the Hill results page: the index and one
   page per year. Written so adding a year needs no new CSS.

   All classes are prefixed res- so they cannot collide with the
   Longest Mile results page, which still carries its own inline
   lmr- styles and is deliberately untouched.

   Tokens come from global.css. King of the Hill does not scope its
   own palette, so results pages inherit the site blue and mint.

   HEADING RULES (see the block at the top of global.css):
   display headings get negative letter-spacing and an explicit
   line-height; eyebrow labels get positive tracking and their own
   explicit line-height.
   ============================================================ */

.res-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.2px; /* eyebrow label - positive tracking intentional */
  line-height: 1.1;
  color: var(--accent);
}

/* ---------- hero ---------- */
.res-hero {
  padding: 140px 24px 60px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(44, 163, 255, 0.12), transparent 62%),
    linear-gradient(180deg, #080808 0%, #0d1620 55%, #080808 100%);
  text-align: center;
}
.res-hero-inner { max-width: 1000px; margin: 0 auto; }
.res-hero h1 {
  font-size: clamp(32px, 4.6vw, 56px);
  margin: 14px 0 18px;
  color: var(--text-primary);
  text-wrap: balance;
}
.res-hero h1 .accent { color: var(--accent); }
.res-hero-sub {
  font-size: clamp(15px, 1.9vw, 18px);
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto;
}
.res-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 26px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.res-back:hover { color: var(--accent); }
.res-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; }

/* ---------- year switcher ---------- */
.res-yearnav {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.res-yearnav a {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.res-yearnav a:hover { border-color: var(--border-accent); color: var(--accent); }
.res-yearnav a[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #06121d;
}

/* ---------- generic section ---------- */
.res-section { padding: 76px 24px; }
.res-section--alt { background: var(--bg-section); }
.res-inner { max-width: var(--max-width); margin: 0 auto; }
.res-head { text-align: center; margin-bottom: 40px; }
.res-head h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 12px 0 10px;
}
.res-head p {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- champion ---------- */
.res-champion {
  background: var(--bg-section);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 72px 24px;
}
.res-champion-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 44px;
  align-items: center;
}
.res-champion-name {
  font-size: clamp(28px, 4.2vw, 50px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 12px 0 6px;
}
.res-champion-meta { font-size: 14px; color: var(--text-muted); margin-bottom: 26px; }
.res-figures { display: flex; align-items: flex-end; gap: 36px; flex-wrap: wrap; }
.res-figure-value {
  font-size: clamp(48px, 7.4vw, 86px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--accent);
}
.res-figure-value.is-sub {
  font-size: clamp(30px, 4.4vw, 50px);
  color: var(--text-primary);
}
.res-figure-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px; /* eyebrow label - positive tracking intentional */
  line-height: 1.1;
  color: var(--text-muted);
  margin-top: 10px;
}
.res-champion-note {
  margin-top: 26px;
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 520px;
}

/* ---------- portrait, photo over a bib tile ---------- */
.res-portrait {
  width: 190px;
  height: 190px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: linear-gradient(150deg, #1d2b38 0%, #101820 100%);
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The photo sits on top of the bib tile. If the file is missing the img
   removes itself via onerror and the tile shows through, so a card is never
   a broken image or an empty box. */
.res-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.res-portrait-fallback { text-align: center; padding: 10px; }
.res-portrait-bib {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
}
.res-portrait-bib-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px; /* eyebrow label - positive tracking intentional */
  line-height: 1.1;
  color: var(--text-muted);
  margin-top: 6px;
}
.res-portrait--sm { width: 84px; height: 84px; border-radius: 14px; }
.res-portrait--sm .res-portrait-bib { font-size: 24px; }
.res-portrait--sm .res-portrait-bib-label { font-size: 8px; letter-spacing: 1.4px; }

/* ---------- podium ---------- */
.res-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.res-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.res-card:hover { transform: translate3d(0, -3px, 0); border-color: var(--border-accent); }
.res-card--highlight {
  background: linear-gradient(120deg, rgba(44, 163, 255, 0.10), rgba(44, 163, 255, 0.02)), var(--bg-card);
  border: 1px solid var(--border-accent);
}
.res-card-rank {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px; /* eyebrow label - positive tracking intentional */
  line-height: 1.1;
  color: var(--accent);
  margin-bottom: 6px;
}
.res-card-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 6px;
}
.res-card-stat { font-size: 13px; color: var(--text-secondary); }
.res-card-stat strong { color: var(--text-primary); font-weight: 700; }

.res-subhead { display: flex; align-items: center; gap: 16px; margin: 44px 0 18px; }
.res-subhead::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.res-subhead-text {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.2px; /* eyebrow label - positive tracking intentional */
  line-height: 1.1;
  color: var(--accent);
  white-space: nowrap;
}

/* ---------- stat band ---------- */
.res-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}
.res-stat { background: var(--bg-card); padding: 30px 20px; text-align: center; }
.res-stat-value {
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
}
.res-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px; /* eyebrow label - positive tracking intentional */
  line-height: 1.25;
  color: var(--text-muted);
  margin-top: 10px;
}

/* ---------- chart ---------- */
.res-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 24px 22px;
}
.res-chart-wrap { position: relative; }
.res-chart-scroll { overflow-x: auto; }
.res-chart-svg { display: block; width: 100%; min-width: 520px; height: auto; }
.res-grid { stroke: #282828; stroke-width: 1; }
.res-area { fill: var(--accent); fill-opacity: 0.10; stroke: none; }
.res-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.res-dot { fill: var(--accent); }
.res-end-ring { fill: var(--bg-card); }
.res-end { fill: var(--accent); }
.res-tick { fill: #9a9a9a; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.res-tick-y { text-anchor: end; }
.res-tick-x { text-anchor: middle; }
.res-axis-title {
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px; /* eyebrow label - positive tracking intentional */
  text-anchor: middle;
}
.res-note { fill: var(--text-primary); font-size: 12px; font-weight: 700; }
.res-hit { fill: transparent; cursor: crosshair; }
.res-crosshair { stroke: var(--accent); stroke-width: 1; opacity: 0; pointer-events: none; }
.res-crosshair.is-on { opacity: 0.55; }
.res-tooltip {
  position: absolute;
  pointer-events: none;
  background: #05080b;
  border: 1px solid var(--border-accent);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.45;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -120%);
  transition: opacity 0.12s ease;
  z-index: 5;
}
.res-tooltip.is-on { opacity: 1; }
.res-tooltip strong { color: var(--accent); }

.res-tableview-toggle,
.res-chip,
.res-toggle {
  font-family: inherit;
  cursor: pointer;
  border-radius: 999px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.res-tableview-toggle {
  margin-top: 20px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  padding: 9px 18px;
}
.res-tableview-toggle:hover { border-color: var(--border-accent); color: var(--accent); }
.res-tableview { margin-top: 18px; max-height: 320px; overflow-y: auto; }
.res-tableview table { width: 100%; border-collapse: collapse; font-size: 13px; }
.res-tableview th, .res-tableview td {
  text-align: left;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.res-tableview th {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.4px; /* eyebrow label - positive tracking intentional */
  line-height: 1.2;
}

/* ---------- results table ---------- */
.res-controls, .res-table-wrap, .res-table-foot, .res-legend {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.res-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.res-search { flex: 1; min-width: 220px; position: relative; }
.res-search input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 13px 18px 13px 42px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease;
}
.res-search input:focus { border-color: var(--accent); }
.res-search input::placeholder { color: var(--text-muted); }
.res-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  pointer-events: none;
}
.res-chips { display: flex; gap: 8px; }
.res-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  padding: 11px 20px;
}
.res-chip:hover { border-color: var(--border-accent); }
.res-chip.is-active { background: var(--accent); border-color: var(--accent); color: #06121d; }

.res-table-wrap {
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-card);
}
.res-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.res-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1f1f1f;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px; /* eyebrow label - positive tracking intentional */
  line-height: 1.2;
  text-align: left;
  padding: 14px 18px;
}
.res-table tbody tr { border-top: 1px solid var(--border); transition: background 0.15s ease; }
.res-table tbody tr:hover { background: rgba(44, 163, 255, 0.05); }
.res-table td { padding: 13px 18px; color: var(--text-secondary); }
.res-table .res-pos {
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  width: 64px;
}
.res-table .res-bib { color: var(--text-muted); font-variant-numeric: tabular-nums; width: 72px; }
.res-table .res-name { color: var(--text-primary); font-weight: 600; }
.res-table .res-laps {
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  width: 78px;
}
.res-table .res-dist { font-variant-numeric: tabular-nums; width: 96px; }
.res-table tbody tr.is-hidden { display: none; }
.res-table tbody tr.is-target { background: rgba(44, 163, 255, 0.14); box-shadow: inset 3px 0 0 var(--accent); }

.res-empty { display: none; padding: 44px 20px; text-align: center; color: var(--text-muted); font-size: 15px; }
.res-empty.is-on { display: block; }
.res-table-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.res-count { font-size: 13px; color: var(--text-muted); }
.res-toggle {
  background: none;
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 26px;
}
.res-toggle:hover { background: var(--accent-subtle); }
.res-legend { margin-top: 16px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; max-width: 760px; }

/* ---------- index year cards ---------- */
.res-years { display: grid; gap: 18px; max-width: 860px; margin: 0 auto; }
.res-year-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 30px 26px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.res-year-card:hover { transform: translate3d(0, -3px, 0); border-color: var(--border-accent); }
.res-year-card-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.res-year-card-year {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
}
.res-year-card-date { font-size: 13px; color: var(--text-muted); }
.res-year-card-headline {
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.07;
  margin: 14px 0 18px;
  color: var(--text-primary);
}
.res-year-card-figures { display: flex; gap: 0; margin-bottom: 16px; }
.res-year-card-figures > div { flex: 1; max-width: 180px; }
.res-year-card-figures > div + div { border-left: 1px solid var(--border); padding-left: 18px; }
.res-year-card-figures strong {
  display: block;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
}
.res-year-card-figures span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px; /* eyebrow label - positive tracking intentional */
  line-height: 1.2;
  color: var(--text-muted);
  margin-top: 7px;
}
.res-year-card-winner { font-size: 14px; color: var(--text-secondary); margin-bottom: 18px; }
.res-year-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.res-year-card-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; }

/* ---------- cta ---------- */
.res-cta {
  padding: 92px 24px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 100%, rgba(100, 255, 233, 0.08), transparent 62%), var(--bg-section);
  border-top: 1px solid var(--border);
}
.res-cta h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.96;
  margin-bottom: 16px;
}
.res-cta p { font-size: 16px; color: var(--text-secondary); max-width: 540px; margin: 0 auto 30px; }
.res-cta-note { font-size: 14px; color: var(--text-muted); margin-top: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .res-podium { grid-template-columns: 1fr; }
  .res-champion-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  /* Champion tile only. A bare .res-portrait rule here would also hit the
     podium tiles, which are flex items: margin auto lets them eat the row's
     free space and shunt sideways by a different amount on every card. */
  .res-champion-inner > .res-portrait { margin: 0 auto; }
  .res-figures { justify-content: center; }
  .res-champion-note { margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
  .res-hero { padding: 118px 20px 48px; }
  .res-section { padding: 56px 20px; }
  .res-champion { padding: 52px 20px; }
  .res-year-card { padding: 24px 20px 22px; }
  .res-table .res-bib, .res-table thead th.res-bib { display: none; }
  .res-table { font-size: 14px; }
  .res-table td, .res-table thead th { padding: 11px 12px; }
  .res-table .res-pos { width: 46px; }
  .res-table .res-laps { width: 60px; }
  .res-table .res-dist { width: 78px; }
  .res-chart-card { padding: 20px 14px 16px; }
  .res-controls { flex-direction: column; align-items: stretch; }
  .res-chips { justify-content: stretch; }
  .res-chip { flex: 1; padding: 11px 10px; }
  .res-year-card-figures > div + div { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .res-card, .res-year-card, .res-tooltip { transition: none; }
}

/* Joint winners: 2024 had two men finish on the same lap count and split the
   prize, so the champion block has to hold more than one portrait. */
.res-portrait-pair { display: flex; gap: 14px; flex-shrink: 0; }
.res-portrait-pair .res-portrait { width: 130px; height: 130px; }
.res-portrait-pair .res-portrait-bib { font-size: 30px; }
@media (max-width: 900px) {
  .res-champion-inner > .res-portrait-pair { margin: 0 auto; justify-content: center; }
}
@media (max-width: 420px) {
  .res-portrait-pair .res-portrait { width: 104px; height: 104px; }
}

/* A shared champions banner, used when one photo shows the winners together.
   2024 had two men finish side by side, and a single wide frame of the pair
   tells that better than two cropped tiles, and needs nobody identified. */
.res-champion-banner {
  max-width: var(--max-width);
  margin: 0 auto 34px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-accent);
  line-height: 0;
}
.res-champion-banner img { width: 100%; height: auto; display: block; }
.res-champion-inner--stacked { grid-template-columns: 1fr; }

/* Everest reference rules on the elevation chart. Solid hairlines a step off
   the surface, sitting under the data: context for the climb, not a series. */
.res-ref { stroke: #3a4a57; stroke-width: 1; }
.res-ref-label {
  fill: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px; /* eyebrow label - positive tracking intentional */
  text-anchor: start;
}

/* Everest bands on the elevation chart. The tint deepens with height, so the
   top of the plot reads as thinner air. Opacity is set per band inline. */
.res-band { fill: var(--accent); }