/* ============================================================================
   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;
}

/* ------------------------------------------------------------- track hero
   Depth is done with a perspective transform on a flat SVG plus a stacked
   shadow — no 3D library, no images, about 5 KB of markup. The lane dashes
   drift and the sun pulses slowly; both stop under reduced motion.        */
.track-scene {
  position: relative;
  width: min(560px, 92vw);
  margin: 26px auto 6px;
  perspective: 900px;
}
.track-tilt {
  transform: rotateX(52deg) rotateZ(-4deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 40px 40px rgba(11, 16, 32, .30));
}
:root[data-theme="dark"] .track-tilt { filter: drop-shadow(0 40px 46px rgba(0, 0, 0, .72)); }
.track-scene svg { width: 100%; height: auto; overflow: visible; display: block; }

.tk-dash { animation: tkDrift 6s linear infinite; }
.tk-runner { animation: tkStride 2.6s ease-in-out infinite; transform-origin: center; }
.tk-sun { animation: tkPulse 7s ease-in-out infinite; transform-origin: center; }
.tk-cloud-a { animation: tkFloat 26s linear infinite; }
.tk-cloud-b { animation: tkFloat 34s linear infinite 4s; }

@keyframes tkDrift { to { stroke-dashoffset: -60; } }
@keyframes tkStride { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(6px, -3px) } }
@keyframes tkPulse { 0%, 100% { opacity: .85 } 50% { opacity: 1 } }
@keyframes tkFloat { from { transform: translateX(-40px) } to { transform: translateX(460px) } }

@media (prefers-reduced-motion: reduce) {
  .tk-dash, .tk-runner, .tk-sun, .tk-cloud-a, .tk-cloud-b { animation: none; }
}

/* The runner stands OUTSIDE the tilted plane, otherwise the rotateX lays the
   figure flat on the track. Absolute positioning over the scene is the
   cheapest way to get a standing figure on a receding ground plane. */
.track-figure {
  position: absolute; left: 50%; bottom: 8%;
  width: 15%; max-width: 84px; transform: translateX(-52%);
  filter: drop-shadow(0 6px 6px rgba(11, 16, 32, .35));
  pointer-events: none;
}
.track-shadow { position: absolute; left: 50%; bottom: 7%; width: 17%; transform: translateX(-52%); pointer-events: none; }

.track-cap {
  text-align: center; color: var(--muted); font-size: .84rem;
  margin: 14px auto 0; max-width: 46ch;
}

/* ------------------------------------------------------------ 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); }

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