/* ============================================================================
   run.css — RunIndia-only layer on top of styles.css + data.css
   1) the site accent
   2) the 3D track hero — pure SVG/CSS, no images, no JS libraries
   3) calculator, chart, plan and route components
   Everything animated here is switched off under prefers-reduced-motion.
   ========================================================================== */

/* ---------------------------------------------------------------- accent */
body[data-site="run"] { --accent: #c2410c; --accent-2: #9a3412; --accent-3: #f97316; --accent-soft: #fff1e9; }
:root[data-theme="dark"] body[data-site="run"] { --accent: #fb923c; --accent-2: #fdba74; --accent-3: #ea580c; --accent-soft: rgba(251, 146, 60, .13); }

body[data-site="run"] {
  --track:    #b4462c;   /* synthetic track red   */
  --track-2:  #8f3521;   /* track, shaded         */
  --lane:     #f8fafc;   /* lane lines            */
  --infield:  #4d7c3f;   /* grass                 */
  --infield-2:#3f6733;
  --sky-1:    #fde3c7;
  --sky-2:    #f8b26a;
  --sun:      #fb923c;
  --good:     #16a34a;
  --ok:       #84cc16;
  --warn:     #eab308;
  --bad:      #f97316;
  --vbad:     #dc2626;
  --sev:      #7f1d1d;
}
:root[data-theme="dark"] body[data-site="run"] {
  --track:   #7c3520;
  --track-2: #5a2617;
  --lane:    #cbd5e1;
  --infield: #2f5227;
  --infield-2: #24401e;
  --sky-1:   #1e293b;
  --sky-2:   #33415c;
}

/* ============================================================================
   THE PACE BAND — this site's set piece (AAA+++ §5, "race bib / stopwatch")
   The paper band a runner tapes to their wrist: a perforated card with the
   target on the stub and the cumulative clock printed against a ruler of
   kilometre ticks.

   The drawing hand is the point of difference and it is enforced here, once:
   NO ROUND CAPS ANYWHERE. Every stroke on this drawing is a flat butt cap on
   a graduated timing tick, punched perforations are circles that are holes
   rather than dots, and the finish is a chequered block with square corners.
   Round caps belong to fuel, 1.6px round to yoga, square terminals to move —
   graduated flat timing ticks belong to run and to nothing else.

   Server-rendered, fixed viewBox: the drawing is complete with JavaScript off
   and costs exactly 0.00 CLS. Nothing here animates.
   ========================================================================== */
.pace-band { margin: 22px 0 0; }
.pb-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
/* The band keeps a minimum drawn width and scrolls inside its own container
   on a phone. Shrinking it to 375px instead would make the split labels
   illegible, and a ruler you cannot read the clock off is not a ruler. */
.pace-band svg { display: block; width: 100%; min-width: 660px; height: auto; }

.pb-card { fill: var(--paper-2); stroke: var(--line-2); stroke-width: 1; }
:root[data-theme="dark"] .pb-card { fill: var(--surface); }
/* Bib pin-holes. Punched, so they are the paper's colour, not the card's. */
.pb-pin { fill: var(--paper); stroke: var(--line-2); stroke-width: 1; }
.pb-perf { fill: var(--paper); stroke: var(--line-2); stroke-width: .8; }

.pb-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  fill: var(--muted); text-transform: uppercase;
}
.pb-spec { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; fill: var(--faint); }
.pb-right { text-anchor: end; }

/* The giant target. Serif at full optical size for weight, but TABULAR —
   the deliberate divergence from .stat-display's proportional display
   numerals, because on a pace tool the figures are read as a column and a
   column that jiggles looks unmeasured. */
.pb-time {
  font-family: var(--serif); font-weight: 400; fill: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  letter-spacing: -.02em;
}
.pb-pace {
  font-family: var(--mono); font-size: 30px; font-weight: 600; fill: var(--accent);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em;
}
.pb-rule { stroke: var(--line-2); stroke-width: 1; }

/* The ruler. Three graduated tick heights, all butt-capped, all flat. */
.pb-base { stroke: var(--ink-2); stroke-width: 1.2; stroke-linecap: butt; }
.pb-tick { stroke: var(--line-2); stroke-width: 1; stroke-linecap: butt; }
.pb-major path { stroke: var(--ink-2); stroke-width: 1.4; stroke-linecap: butt; }
.pb-key path { stroke: var(--accent); stroke-width: 2.2; stroke-linecap: butt; }

.pb-split {
  font-family: var(--mono); font-size: 11px; fill: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums; text-anchor: middle;
}
.pb-key .pb-split { fill: var(--ink); font-weight: 600; }
.pb-km {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  fill: var(--muted); text-anchor: middle;
}
.pb-key .pb-km { fill: var(--accent); }

.pb-flag rect { fill: var(--ink); }
.pb-flag .pb-flag-o { fill: var(--paper); stroke: var(--ink); stroke-width: .8; }

.pace-band figcaption {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
  color: var(--faint); text-transform: uppercase;
}

/* ------------------------------------------------- hero entrance (§3.7)
   Kicker -> h1 -> answer, 60 ms apart, once, above the fold only. The eyebrow
   and h1 are emitted by the shared shell and carry no class of their own, so
   the choreography is attached here rather than by editing the shared module.
   Gated behind no-preference: reduced-motion readers get the finished page. */
@media (prefers-reduced-motion: no-preference) {
  body[data-site="run"] .hero .eyebrow { animation: aaa-rise var(--t-slow) var(--ease-out) both; }
  body[data-site="run"] .hero h1 { animation: aaa-rise var(--t-slow) var(--ease-out) both; animation-delay: 60ms; }
}

/* In-content links draw their underline rather than swapping colour (§3.6).
   The .draw class is applied explicitly where the markup is authored; this
   extends the same behaviour to the long-form prose without asking every
   sentence to carry a class. */
body[data-site="run"] .prose a:not(.chip):not(.rel-card),
body[data-site="run"] .tnote a,
body[data-site="run"] .sec-note a {
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  transition: background-size var(--t-med) var(--ease-out);
}
body[data-site="run"] .prose a:hover, body[data-site="run"] .prose a:focus-visible,
body[data-site="run"] .tnote a:hover, body[data-site="run"] .tnote a:focus-visible,
body[data-site="run"] .sec-note a:hover, body[data-site="run"] .sec-note a:focus-visible {
  background-size: 100% 1px;
}

/* ------------------------------------------------------------ hero stats */
.pace-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft); color: var(--accent-2);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  padding: 5px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
}
:root[data-theme="dark"] .pace-badge { color: var(--accent); }

/* ------------------------------------------------------------ calculators */
.calc .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .calc .row-3 { grid-template-columns: 1fr 1fr; } }

.timefield { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.timefield input { text-align: center; }
.timefield span {
  display: block; text-align: center; font-size: .68rem;
  color: var(--muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .07em;
}

.out-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
}
.out-cell { text-align: center; }
.out-cell b {
  display: block; font-size: clamp(1.5rem, 5.2vw, 2.1rem); font-weight: 800;
  letter-spacing: -.04em; color: var(--accent); line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.out-cell span { display: block; font-size: .76rem; color: var(--muted); margin-top: 6px; }

.seg-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.seg-row button {
  border: 1px solid var(--line); background: var(--card, transparent); color: var(--fg);
  border-radius: 999px; padding: 7px 14px; font-size: .82rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.seg-row button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.calc-note {
  font-size: .8rem; color: var(--muted); margin-top: 14px;
  padding-top: 12px; border-top: 1px dashed var(--line);
}

/* --------------------------------------------------------------- results */
.splitbox { margin-top: 18px; }
.splitbox table { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- plan table */
.plan-table td, .plan-table th { vertical-align: top; }
.plan-table .d-rest { color: var(--muted); }
.plan-table .d-q { font-weight: 650; color: var(--accent-2); }
:root[data-theme="dark"] .plan-table .d-q { color: var(--accent); }
.plan-table .d-long { font-weight: 650; }
.plan-week { white-space: nowrap; }
.plan-total { font-variant-numeric: tabular-nums; white-space: nowrap; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
.legend b { color: var(--fg); font-weight: 650; }

@media print {
  .netbar, .site-head, .crumbs, .ring, .site-foot, .pf-cinema, .plan-cta { display: none !important; }
  .plan-table { font-size: .74rem; }
  a[href]:after { content: ""; }
}

/* ------------------------------------------------------------ route cards */
.routes { display: grid; gap: 14px; margin-top: 8px; }
.route {
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  background: var(--card, transparent);
  border-left: 4px solid var(--accent);
}
.route h3 { margin: 0 0 4px; font-size: 1.04rem; letter-spacing: -.015em; }
.route .r-area { font-size: .8rem; color: var(--muted); }
.route .r-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.route .r-tag {
  font-size: .74rem; font-weight: 650; border-radius: 999px; padding: 4px 10px;
  background: var(--accent-soft); color: var(--accent-2);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
:root[data-theme="dark"] .route .r-tag { color: var(--accent); }
.route .r-tag.plain { background: transparent; color: var(--muted); border-color: var(--line); }
.route p { margin: 0; font-size: .92rem; line-height: 1.62; }

/* --------------------------------------------------------------- AQI bands */
.aqi { display: grid; gap: 6px; margin: 16px 0; }
.aqi-row {
  display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: start;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
}
.aqi-row b { font-variant-numeric: tabular-nums; font-size: .84rem; }
.aqi-row .aqi-name { font-weight: 700; font-size: .9rem; }
.aqi-row .aqi-do { font-size: .86rem; color: var(--muted); display: block; margin-top: 2px; line-height: 1.55; }
.aqi-row[data-b="good"] { border-left: 5px solid var(--good); }
.aqi-row[data-b="ok"] { border-left: 5px solid var(--ok); }
.aqi-row[data-b="warn"] { border-left: 5px solid var(--warn); }
.aqi-row[data-b="bad"] { border-left: 5px solid var(--bad); }
.aqi-row[data-b="vbad"] { border-left: 5px solid var(--vbad); }
.aqi-row[data-b="sev"] { border-left: 5px solid var(--sev); }

/* ------------------------------------------------------------ race header */
.race-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.race-fact { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.race-fact .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.race-fact .v { font-weight: 700; margin-top: 4px; font-size: .96rem; }

.warnbox {
  border: 1px solid color-mix(in srgb, var(--vbad) 40%, transparent);
  background: color-mix(in srgb, var(--vbad) 7%, transparent);
  border-radius: 12px; padding: 14px 16px; margin: 18px 0;
  font-size: .9rem; line-height: 1.6;
}
.warnbox b { color: var(--vbad); }

/* The race-date band. Hairline-ruled and calm, like the YMYL armour: a red
   alert box over a date reads as liability panic, and the reader stops
   believing the rest of the page. The date the page was checked is printed
   in the band itself, because "confirm with the organiser" without a
   last-checked date is an instruction with no evidence attached. */
.datecheck {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0; margin: 22px 0 0; color: var(--ink-2);
  font-size: .93rem; line-height: 1.62;
}
.datecheck .kicker { display: block; margin-bottom: 6px; }
.datecheck p { margin: 0; }

/* ---------------------------------------------------------------- chips++ */
.sub { margin: 26px 0 10px; font-size: 1rem; letter-spacing: -.01em; }
.hint-inline { font-size: .82rem; color: var(--muted); }