/* ══════════════════════════════════════════════════════════════════════════
   Stride Plan
   ──────────────────────────────────────────────────────────────────────────
   Everything is driven from the tokens in the first block. The previous
   build carried 54 separate font-size declarations and ~48 distinct pixel
   values, which is why nothing looked deliberate; there is now one type
   scale and one spacing scale and no component sets a raw value.

   Palette is navy + coral. One accent (coral) and one data hue (steel),
   kept apart from the semantic good/warn colours so a warning never has
   to compete with a call to action.
   ══════════════════════════════════════════════════════════════════════ */

/* ── TOKENS — light is the base; every colour is declared here ─────────── */
:root {
  /* Brand */
  --navy-900: #0a1420;
  --navy-800: #0f2032;
  --navy-700: #16304a;
  --navy-600: #1f4265;
  --coral:      #ff6b52;
  --coral-deep: #e8482c;
  --coral-soft: #fff0ec;
  --steel:      #3f93b5;
  --steel-soft: #eaf4f8;

  /* Semantic — deliberately not the accent */
  --good:      #1f8a5f;
  --good-soft: #e6f4ee;
  --warn:      #b4690e;
  --warn-soft: #fdf3e3;

  /* Neutrals, biased cool toward the navy rather than pure grey */
  --paper:    #eef2f6;
  --surface:  #ffffff;
  --surface-2:#f6f8fb;
  --surface-3:#eaeff5;
  --line:     #dae1ea;
  --line-soft:#e9edf3;
  --ink:      #0f1f2e;
  --ink-2:    #3c4c5d;
  --muted:    #64758a;
  --faint:    #8c9cae;

  /* Surfaces that stay dark in both themes (result card, hero, footer) */
  --dark-surface:   #0f2032;
  --dark-surface-2: #16304a;
  --dark-line:      rgba(255, 255, 255, 0.12);
  --dark-ink:       #ffffff;
  --dark-muted:     #9fb3c8;

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans:    'Barlow', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale — 1.25 major third, rounded to whole px */
  --t-3xs: 0.6875rem; /* 11 — micro labels */
  --t-2xs: 0.75rem;   /* 12 — eyebrows, table heads */
  --t-xs:  0.8125rem; /* 13 — captions, help text */
  --t-sm:  0.875rem;  /* 14 — dense UI, table body */
  --t-base:1rem;      /* 16 — body */
  --t-md:  1.125rem;  /* 18 — card titles */
  --t-lg:  1.375rem;  /* 22 — section heads */
  --t-xl:  1.75rem;   /* 28 */
  --t-2xl: 2.25rem;   /* 36 */
  --t-3xl: 3rem;      /* 48 — hero headline (phone) */
  --t-4xl: 4rem;      /* 64 — hero headline (desktop) */
  --t-hero:5.25rem;   /* 84 — the one big result number */

  /* Spacing scale — 4px base, no value off this ladder */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10:2.5rem;
  --s-12:3rem;     --s-16:4rem;     --s-20:5rem;

  /* Radii, shadow, motion */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 32, 50, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 32, 50, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 32, 50, 0.12);
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);

  /* Layout */
  --gutter: 1rem;
  --max-w: 92.5rem; /* 1480 */

  /* Hero and footer photography.
     Alternates are sitting in /img — swapping direction is these three lines
     and nothing else. Set any of them to `none` to fall back to the gradient,
     which is designed to carry the band on its own.
       hero:   hero-city.webp + hero-city-portrait.webp   (in use)
               hero-moor.webp + hero-moor-portrait.webp
       footer: footer-clifftop.webp                       (in use)
               footer-moor.webp
               footer-valley.webp
     Keep the landscape and portrait crops from the SAME scene, or the hero
     appears to change location when a phone rotates. */
  --hero-image:          url('../img/hero-city.webp');
  --hero-image-portrait: url('../img/hero-city-portrait.webp');
  --footer-image:        url('../img/footer-clifftop.webp');
}

/* Dark: system preference, unless an explicit light choice overrides it */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #080f18;
    --surface:  #0f1c29;
    --surface-2:#142433;
    --surface-3:#1b2f42;
    --line:     #24384c;
    --line-soft:#1b2c3d;
    --ink:      #eef4fa;
    --ink-2:    #c2d2e0;
    --muted:    #8ba0b5;
    --faint:    #6a7e93;

    --dark-surface:   #142433;
    --dark-surface-2: #1b2f42;

    --coral-soft: #33160f;
    --steel-soft: #0f2732;
    --good-soft:  #0d2a1f;
    --warn-soft:  #2c1f0a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  }
}

/* Dark: explicit choice — wins over a light OS setting */
:root[data-theme="dark"] {
  --paper:    #080f18;
  --surface:  #0f1c29;
  --surface-2:#142433;
  --surface-3:#1b2f42;
  --line:     #24384c;
  --line-soft:#1b2c3d;
  --ink:      #eef4fa;
  --ink-2:    #c2d2e0;
  --muted:    #8ba0b5;
  --faint:    #6a7e93;

  --dark-surface:   #142433;
  --dark-surface-2: #1b2f42;

  --coral-soft: #33160f;
  --steel-soft: #0f2732;
  --good-soft:  #0d2a1f;
  --warn-soft:  #2c1f0a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* ── RESET ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Numerals line up in columns everywhere they are compared */
.split-table, .pred-table, .res-figure, .res-sub-val,
.sum-val, .band-table { font-variant-numeric: tabular-nums; }

/* Spacing utilities. These exist so index.html carries no style attributes,
   which is what lets the CSP drop 'unsafe-inline' for style-src. */
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mb-3 { margin-bottom: var(--s-3); }
.hd-actions { display: flex; align-items: center; gap: var(--s-2); }
.foot-actions { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }


.share-note {
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--good);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── SHARED PIECES ────────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--display);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
}

/* The coloured full stop that ends every display headline */
.stop { color: var(--coral); }

/* ── TOP BAR ──────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: 3.75rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding-block: var(--s-4);
  font-family: var(--display);
  font-size: var(--t-md);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark b { font-weight: 800; }
/* 400, not 300: Archivo italic is loaded at 400 only. Asking for 300 meant the
   browser synthesised a slant from the roman rather than using the real face. */
.wordmark span { font-weight: 400; font-style: italic; color: var(--muted); }

.topbar-nav { display: none; }
.topbar-spacer { flex: 1; }
.topbar-tools { display: flex; align-items: center; gap: var(--s-2); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-md);
  color: var(--muted);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn svg { width: 1.125rem; height: 1.125rem; }

/* ── NAV (module switcher) ────────────────────────────────────────────── */
.modnav {
  position: sticky;
  top: calc(3.75rem + env(safe-area-inset-top, 0px));
  z-index: 55;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.modnav::-webkit-scrollbar { display: none; }
.modnav-in { display: flex; gap: var(--s-1); min-width: max-content; }

.modtab {
  position: relative;
  padding: var(--s-4) var(--s-3) calc(var(--s-4) - 2px);
  font-family: var(--display);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.modtab:hover { color: var(--ink); }
.modtab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--coral); }

@media (min-width: 60rem) {
  .modnav { display: none; }
  .topbar-nav { display: flex; gap: var(--s-1); }
  .topbar-nav .modtab { padding: var(--s-5) var(--s-4) calc(var(--s-5) - 2px); }
}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--dark-ink);
}
/* Photograph layer. With --hero-image unset this is simply absent and the
   gradient below carries the band on its own. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-image-portrait);
  background-size: cover;
  /* Phone band is roughly square, so a 2:3 source crops hard vertically.
     65% keeps the sun and the runner rather than an empty top-of-sky. */
  background-position: 50% 65%;
}
/* Tonal overlay: keeps the headline legible whatever the photograph does,
   and is what ties a supplied image to the navy/coral palette. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255, 107, 82, 0.20), transparent 60%),
    linear-gradient(105deg,
      var(--navy-900) 0%,
      color-mix(in srgb, var(--navy-800) 88%, transparent) 46%,
      color-mix(in srgb, var(--navy-800) 30%, transparent) 78%,
      transparent 100%),
    linear-gradient(180deg, transparent 40%, rgba(10, 20, 32, 0.75) 100%);
}
/* Phone hero is deliberately compact. This is a tool, not a landing page:
   at full desktop proportions the band ate 502px of an 852px iPhone viewport,
   so you scrolled past the marketing to reach your own numbers. */
.hero-in { padding-block: var(--s-8) var(--s-6); }
.hero-title {
  margin-top: var(--s-2);
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(2.125rem, 8.5vw, var(--t-3xl));
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero-sub {
  margin-top: var(--s-3);
  max-width: 44ch;
  color: var(--dark-muted);
  font-size: var(--t-sm);
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
}
.pill { display: flex; align-items: center; gap: var(--s-2); }
/* On a phone the pills carry their label only — three stacked rows of
   label-plus-description cost ~90px for text nobody reads twice. */
.pill-txt span { display: none; }
.pill-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--dark-line);
  border-radius: var(--r-pill);
  color: var(--coral);
}
.pill-ico svg { width: 1rem; height: 1rem; }
.pill-txt { font-size: var(--t-xs); line-height: 1.3; }
.pill-txt b {
  display: block;
  font-family: var(--display);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pill-txt span { color: var(--dark-muted); }

/* Stacked vertical strapline, top right — desktop only, it has nowhere to
   go on a phone and adds nothing there. */
.hero-strap { display: none; }

@media (min-width: 48rem) {
  .hero::before {
    background-image: var(--hero-image);
    /* The band is far wider than the 3:2 source, so only a horizontal strip
       survives. 38% lands on the skyline, the sun and the runner's torso. */
    background-position: 50% 38%;
  }
  .hero-in { padding-block: var(--s-16) var(--s-12); min-height: 21rem; }
  .hero-title { font-size: var(--t-4xl); }
  .hero-pills { gap: var(--s-3) var(--s-6); margin-top: var(--s-8); }
  .pill { gap: var(--s-3); }
  .pill-txt span { display: inline; }
  .pill-ico { width: 2.25rem; height: 2.25rem; }
}
@media (min-width: 64rem) {
  .hero-strap {
    display: grid;
    gap: 0.35em;
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
  }
  .hero-strap span {
    font-family: var(--display);
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dark-ink);
  }
  .hero-strap::after {
    content: '';
    justify-self: end;
    width: 2.5rem;
    height: 2px;
    margin-top: var(--s-2);
    background: var(--coral);
  }
}

/* ── WORKSPACE GRID ───────────────────────────────────────────────────── */
/* The structural fix. One column on a phone, two at tablet, three on
   desktop — inputs, result and detail all visible at once, so the tabs
   stop being the only way to see your own numbers. */
.workspace { padding-block: var(--s-6) var(--s-12); }

.module { display: none; }
.module.is-active {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 52rem) {
  .module.is-active {
    gap: var(--s-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .col-wide { grid-column: 1 / -1; }
}
@media (min-width: 75rem) {
  .module.is-active { grid-template-columns: 22rem minmax(0, 1fr) minmax(0, 1.05fr); }
  .col-wide { grid-column: auto; }
}

/* ── CARDS ────────────────────────────────────────────────────────────── */
/* Border, fill and shadow are spent by role, not stamped on every block:
   the input card is a plain panel, the result card is the one lifted
   object on the page. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.card-dark {
  background: var(--dark-surface);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: var(--s-5);
  color: var(--dark-ink);
  box-shadow: var(--shadow-lg);
}

.card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.card-title {
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.card-dark .card-title { color: var(--dark-ink); }
.card-note { font-size: var(--t-xs); color: var(--muted); }
.card-dark .card-note { color: var(--dark-muted); }

/* ── FORM PARTS ───────────────────────────────────────────────────────── */
.field + .field { margin-top: var(--s-5); }

.label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-family: var(--display);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.label svg { width: 0.875rem; height: 0.875rem; color: var(--faint); }

/* Segmented control — distances, modes, strategies */
.seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.75rem, 1fr));
  gap: var(--s-2);
}
.seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.seg button {
  padding: var(--s-3) var(--s-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
              color 0.15s var(--ease);
}
.seg button small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-3xs);
  font-weight: 500;
  color: var(--faint);
}
.seg button:hover { border-color: var(--line); background: var(--surface-3); }
.seg button[aria-pressed="true"] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}
.seg button[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.7); }
.seg-accent button[aria-pressed="true"] {
  background: var(--coral);
  border-color: var(--coral);
}
.seg-accent button[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.85); }

/* Clock input — three boxes with their unit beneath, as the mockups have it */
.clock { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--s-2); }
.clock-sep {
  align-self: start;
  padding-top: 0.6rem;
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--faint);
}
.clock-cell { text-align: center; }
.clock-cell input {
  width: 100%;
  padding: var(--s-3) var(--s-1);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ink);
  -moz-appearance: textfield;
}
.clock-cell input::-webkit-outer-spin-button,
.clock-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.clock-cell input:focus { border-color: var(--coral); background: var(--surface); }
.clock-cell span {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Single measure input with a unit suffix */
.measure { position: relative; display: flex; align-items: center; }
.measure input {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.measure input:focus {
  border-color: var(--coral);
  background: var(--surface);
  outline: none;
}
.measure-unit {
  position: absolute;
  right: var(--s-4);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  pointer-events: none;
}
.measure input { padding-right: 3.5rem; }

/* Range with its value read out beside it */
.range-row { display: flex; align-items: center; gap: var(--s-4); }
.range-row input[type="range"] { flex: 1; accent-color: var(--coral); min-width: 0; }
.range-val {
  min-width: 3rem;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  font-family: var(--display);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 0.15s var(--ease), transform 0.08s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1rem; height: 1rem; }
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: var(--coral-deep); }
.btn-primary:disabled { background: var(--faint); cursor: default; }
.btn-ghost {
  width: auto;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px solid var(--line);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-2);
}
.btn-ghost:hover { background: var(--surface-3); }
.btn-quiet {
  width: auto;
  min-height: 2.5rem;
  padding: var(--s-3) 0;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted);
}
.btn-quiet:hover { color: var(--coral); }

/* Unit toggle */
.unit-tog {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
}
.unit-tog button {
  min-height: 2.25rem;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.unit-tog button[aria-pressed="true"] { background: var(--coral); color: #fff; }

/* ── RESULT CARD ──────────────────────────────────────────────────────── */
.res-badge {
  padding: var(--s-1) var(--s-3);
  background: var(--steel);
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
/* Ahead / behind on the dark card. Semantic colour, deliberately not the
   coral accent, and never the only signal — the badge always says which. */
.res-badge.is-good { background: #1f7d59; }
.res-badge.is-warn { background: #b4501a; }

.res-main { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.res-figure {
  font-family: var(--display);
  font-size: clamp(3.25rem, 13vw, var(--t-hero));
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--coral);
}
.res-unit {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-muted);
}
/* The same pace expressed in the other unit. Deliberately a quiet line rather
   than a tile in the sub-row: sat at equal weight beside the answer, a km
   pace reads as though it WERE the answer when miles are selected. */
.res-alt {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--dark-muted);
}
.res-alt b { font-weight: 700; }

.res-subs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--dark-line);
}
.res-sub-lbl {
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-muted);
}
.res-sub-val {
  margin-top: var(--s-1);
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.res-sub-val small { font-size: var(--t-sm); font-weight: 600; color: var(--dark-muted); }

/* The one-line takeaway strip at the bottom of the result card */
.takeaway {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--dark-surface-2);
  border-left: 3px solid var(--coral);
  border-radius: var(--r-sm);
}
.takeaway svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--coral); }
.takeaway p { font-size: var(--t-xs); line-height: 1.45; color: var(--dark-muted); }
.takeaway b { display: block; color: var(--dark-ink); font-size: var(--t-sm); }

/* Empty state — a prompt, not a blank card */
.empty { padding: var(--s-6) 0; }
.empty b {
  display: block;
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--dark-ink);
}
.empty p { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--dark-muted); }

/* ── PACE PROFILE CHART ───────────────────────────────────────────────── */
/* Drawn to one scale, with every axis label naming a value the chart
   actually reaches. The old chart used preserveAspectRatio="none", which
   stretched the stroke non-uniformly. */
.chart-wrap { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--s-2); }
.chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 2px 1.25rem;
  font-size: var(--t-3xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--dark-muted);
}
.chart { width: 100%; height: 9rem; overflow: visible; }
.chart-grid { stroke: var(--dark-line); stroke-width: 1; }
.chart-bar { fill: var(--steel); }
.chart-bar.is-edited { fill: var(--coral); }
.chart-x {
  margin-top: var(--s-2);
  display: flex;
  justify-content: space-between;
  font-size: var(--t-3xs);
  font-variant-numeric: tabular-nums;
  color: var(--dark-muted);
}

.summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.sum-tile {
  padding: var(--s-3) var(--s-4);
  background: var(--dark-surface-2);
  border-radius: var(--r-md);
}
.sum-lbl {
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-muted);
}
.sum-val {
  margin-top: 2px;
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 700;
}
.sum-val small { font-size: var(--t-xs); font-weight: 600; color: var(--dark-muted); }

/* ── TABLES ───────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; margin-inline: calc(var(--s-5) * -1); padding-inline: var(--s-5); }

.split-table, .pred-table { font-size: var(--t-sm); }
.split-table th, .pred-table th {
  padding: 0 var(--s-2) var(--s-2);
  font-family: var(--display);
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.split-table th:first-child, .pred-table th:first-child { text-align: left; }
.split-table td, .pred-table td {
  padding: var(--s-2);
  text-align: right;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.split-table td:first-child, .pred-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
}
.split-table tr:last-child td, .pred-table tr:last-child td { border-bottom: none; }
.split-table tr.is-part td { background: var(--surface-2); }
.split-table tr.is-part td:first-child { color: var(--coral); }
.split-table .cum { font-weight: 600; }
.pred-table tr.is-source td { background: var(--coral-soft); }
.pred-table tr.is-source td:first-child { color: var(--coral); }
.pred-table .pred-alt { color: var(--muted); font-size: var(--t-xs); }

/* Editable pace cell. 31px was too small even with a mouse, and this is the
   one control you use mid-plan with a thumb. */
.pace-edit {
  width: 4.75rem;
  min-height: 2.5rem;
  padding: var(--s-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ink);
}
.pace-edit:focus { border-color: var(--coral); background: var(--surface); outline: none; }
.pace-edit.is-edited {
  border-color: var(--coral);
  background: var(--coral-soft);
  color: var(--coral-deep);
}

/* ── SAVED PLANS DIALOG ───────────────────────────────────────────────── */
dialog {
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: rgba(10, 20, 32, 0.6); backdrop-filter: blur(3px); }
.dlg-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.dlg-bd { padding: var(--s-5); max-height: 60vh; overflow-y: auto; }
.dlg-ft { padding: var(--s-5); border-top: 1px solid var(--line); }

.plan-list { display: grid; gap: var(--s-2); }
.plan-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.plan-row-main { flex: 1; min-width: 0; }
.plan-name {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-meta { font-size: var(--t-xs); color: var(--muted); }
.plan-empty { padding: var(--s-6) 0; font-size: var(--t-sm); color: var(--muted); text-align: center; }

/* ── FOOTER BAND ──────────────────────────────────────────────────────── */
.footband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--dark-ink);
}
/* The footer photograph is below the fold on every viewport, but a CSS
   background is fetched regardless of where the element sits — 66KB, 22% of
   first-load payload, for something nobody has scrolled to yet. JS adds
   .is-loaded shortly before it comes into view. Without JS it simply never
   loads and the gradient carries the band, which it is designed to do. */
.footband::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background-image: none;
  background-size: cover;
  /* Wider again than the hero — 40% holds the horizon glow and the cliffs. */
  background-position: 50% 40%;
  transition: opacity 0.4s var(--ease);
}
.footband.is-loaded::before { background-image: var(--footer-image); }
.footband::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(95deg, var(--navy-900) 0%,
      color-mix(in srgb, var(--navy-900) 70%, transparent) 55%,
      color-mix(in srgb, var(--navy-900) 25%, transparent) 100%),
    linear-gradient(180deg, rgba(10, 20, 32, 0.5), rgba(10, 20, 32, 0.8));
}
.footband-in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-8);
  padding-block: var(--s-12);
  min-height: 13rem;
}
.footband-title {
  font-family: var(--display);
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.footband-sub {
  margin-top: var(--s-3);
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dark-muted);
}
.footband-list { display: grid; gap: 0.35em; }
.footband-list span {
  font-family: var(--display);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.footband-list::after {
  content: ''; width: 2.5rem; height: 2px; margin-top: var(--s-2); background: var(--coral);
}

.legal {
  padding-block: var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.legal-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-xs);
  color: var(--muted);
}
/* Build stamp. Deliberately quiet but always present, so you can confirm
   which build a URL is serving without opening dev tools. */
.build {
  padding: var(--s-1) var(--s-3);
  background: var(--surface-3);
  border-radius: var(--r-pill);
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  white-space: nowrap;
}

/* ── OFFLINE FLAG ─────────────────────────────────────────────────────── */
.offline {
  padding: var(--s-2) var(--gutter);
  background: var(--warn);
  font-size: var(--t-xs);
  font-weight: 600;
  color: #fff;
  text-align: center;
}

/* ── LARGER GUTTERS ───────────────────────────────────────────────────── */
@media (min-width: 48rem)  { :root { --gutter: 1.5rem; } }
@media (min-width: 75rem)  { :root { --gutter: 2.5rem; } }

/* ── TOUCH ────────────────────────────────────────────────────────────── */
/* Anything you tap needs to clear roughly 44px on iOS. The editable pace
   cells sat at 31px, which is a miss on a phone — and they are the one
   control you use mid-plan, with a thumb. */
@media (pointer: coarse) {
  .pace-edit { min-height: 2.75rem; width: 5rem; font-size: var(--t-base); }
  .split-table td, .pred-table td { padding-block: var(--s-2); }
  .modtab { padding-block: var(--s-4); }
}

/* The five tabs have to FIT, not scroll. An edge fade was the previous
   attempt and it was the wrong fix — it advertised that a tab was hidden
   rather than showing it. Shorter labels (in the markup) plus tighter
   metrics here bring the strip from 490px down inside a 375px iPhone SE.
   The strip still scrolls if a device is narrower than that; it just no
   longer needs to on anything current. */
@media (max-width: 59.99rem) {
  .modnav-in { gap: 0; }
  .modtab {
    padding-inline: var(--s-2);
    letter-spacing: 0.06em;
  }
}
@media (max-width: 23.5rem) {
  .modtab { padding-inline: var(--s-1); font-size: var(--t-3xs); }
}

/* ══ PACE BAND — print only ═══════════════════════════════════════════════
   The artefact a runner actually takes to a race: wrist width, high
   contrast, no colour dependency, nothing else on the page.
   ═════════════════════════════════════════════════════════════════════ */
.band { display: none; }

@media print {
  @page { margin: 12mm; }

  body { background: #fff; color: #000; }
  .topbar, .modnav, .hero, .workspace, .footband, .legal, .offline, dialog { display: none !important; }

  .band { display: block; width: 62mm; font-family: var(--sans); color: #000; }
  .band-hd { padding-bottom: 2mm; border-bottom: 1.2pt solid #000; }
  .band-race { font-family: var(--display); font-size: 13pt; font-weight: 800; line-height: 1.1; }
  .band-target { margin-top: 1mm; font-size: 8pt; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .band-table { width: 100%; margin-top: 2mm; font-size: 9pt; font-variant-numeric: tabular-nums; }
  .band-table th {
    padding: 0.8mm 1mm;
    font-size: 6.5pt; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    text-align: right; border-bottom: 0.6pt solid #000;
  }
  .band-table th:first-child { text-align: left; }
  .band-table td { padding: 0.8mm 1mm; text-align: right; border-bottom: 0.3pt solid #999; }
  .band-table td:first-child { text-align: left; font-weight: 700; }
  .band-table .band-cum { font-weight: 700; }
  .band-ft { margin-top: 2mm; font-size: 6.5pt; letter-spacing: 0.04em; }
}