/* HowFar site. Layout: one centred column (max 1080px) of full-width sections; the demo pairs
   a watch with a readout panel, charts run full width below it. */
:root {
  --bg: #f4f6f4;
  --surface: #ffffff;
  --ink: #142019;
  --ink-2: #48544e;
  --ink-3: #75817b;
  --line: #d9dfdb;
  --line-soft: #e8ece9;
  --accent: #2c6e4f;          /* alpine green: controls, links, the course ahead */
  --accent-ink: #ffffff;
  --accent-soft: #e2efe8;
  --series-p: #2a78d6;        /* "P": with course profile */
  --line-average: #d6453d;    /* demo error chart: average pace so far */
  --line-none: #cc9e1a;       /* HowFar without the course profile (also dashed) */
  --line-profile: #127a45;    /* HowFar with the course profile */
  --series-a: #eb6834;        /* "~": average grade */
  --series-s1: #1baf7a;       /* section 1 */
  --series-s2: #6250d6;       /* section 2 */
  --good: #1a7f37;
  --good-soft: #e3f3e7;
  --warn: #9a5b00;
  --warn-soft: #fbefd9;
  --band: rgba(44, 110, 79, 0.10);
  --terrain: rgba(20, 32, 25, 0.07);
  /* the watch is a physical object: same colours in both themes */
  --bezel: #2f3331;
  --bezel-edge: #1d201f;
  --bezel-mark: #9bc53d;
  --screen: #050605;
  --screen-ink: #f4f6f4;
  --screen-ink-2: #b9c2bd;

  --font-display: "Saira Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-3: 2.75rem;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101513;
    --surface: #181e1b;
    --ink: #e8eeea;
    --ink-2: #b2bdb7;
    --ink-3: #85918b;
    --line: #2b3430;
    --line-soft: #222a26;
    --accent: #6cc196;
    --accent-ink: #0d1411;
    --accent-soft: #1d3127;
    --series-p: #3987e5;
    --line-average: #cc3f3a;
    --line-none: #b98c18;
    --line-profile: #20925a;
    --series-a: #d95926;
    --series-s1: #199e70;
    --series-s2: #9085e9;
    --good: #5cc27a;
    --good-soft: #17301f;
    --warn: #e0a347;
    --warn-soft: #33270f;
    --band: rgba(108, 193, 150, 0.12);
    --terrain: rgba(232, 238, 234, 0.07);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101513;
  --surface: #181e1b;
  --ink: #e8eeea;
  --ink-2: #b2bdb7;
  --ink-3: #85918b;
  --line: #2b3430;
  --line-soft: #222a26;
  --accent: #6cc196;
  --accent-ink: #0d1411;
  --accent-soft: #1d3127;
  --series-p: #3987e5;
  --line-average: #cc3f3a;
  --line-none: #b98c18;
  --line-profile: #20925a;
  --series-a: #d95926;
  --series-s1: #199e70;
  --series-s2: #9085e9;
  --good: #5cc27a;
  --good-soft: #17301f;
  --warn: #e0a347;
  --warn-soft: #33270f;
  --band: rgba(108, 193, 150, 0.12);
  --terrain: rgba(232, 238, 234, 0.07);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* components that set display must still hide */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; } /* anchors land below the pinned bar */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
}
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--step-2); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 600; }
p { margin: 0; }
code, pre, kbd { font-family: var(--font-mono); font-size: 0.875em; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.muted { color: var(--ink-2); }
.small { font-size: var(--step--1); }

/* header */
.site-head { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: var(--surface); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; flex-wrap: wrap; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink); text-decoration: none; }
.wordmark span { color: var(--accent); }
.site-nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--step--1); }
.site-nav a { color: var(--ink-2); text-decoration: none; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 640px) {
  /* one slim row on phones: the links scroll sideways instead of stacking under the pinned bar */
  html { scroll-padding-top: 56px; }
  .site-head .wrap { flex-wrap: nowrap; gap: 14px; padding-block: 8px; }
  .site-nav { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; gap: 16px; }
  .site-nav::-webkit-scrollbar { display: none; }
}

/* sections */
section { padding-block: 48px; }
section + section { border-top: 1px solid var(--line-soft); }
.section-head { display: grid; gap: 8px; max-width: 68ch; margin-bottom: 28px; }
.hero { padding-block: 56px 32px; }
.hero .lede { font-size: var(--step-1); color: var(--ink-2); max-width: 46ch; margin-top: 14px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; font-size: var(--step--1); color: var(--ink-2); }
.hero-facts b { color: var(--ink); font-weight: 600; }

/* buttons and toggles */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 var(--step--1)/1 var(--font-body);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg button {
  font: 600 var(--step--1)/1 var(--font-body); color: var(--ink-2);
  border: 0; background: transparent; padding: 9px 12px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); }

/* demo */
.demo-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 760px) { .demo-grid { grid-template-columns: minmax(0, 1fr); } }
.watch-col { display: grid; gap: 16px; justify-items: center; }

.watch {
  width: min(300px, 78vw);
  aspect-ratio: 1;
  max-width: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4f4c, var(--bezel) 55%, var(--bezel-edge));
  padding: 6.5%;
  position: relative;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}
.watch::before { /* bezel ticks, Enduro-style: a thin ring between the screen and the edge */
  content: ""; position: absolute; inset: 2%;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--bezel-mark) 0 1.2deg, transparent 1.2deg 30deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 88%, #000 89%);
          mask: radial-gradient(circle closest-side, transparent 88%, #000 89%);
  opacity: 0.85;
}
.screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--screen);
  color: var(--screen-ink);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  text-align: center;
  overflow: hidden;
  padding: 12%;
  container-type: size; /* text below is sized from the screen, so any watch size draws the same */
}
.screen .w-label { align-self: end; font: 600 9.5cqi/1.2 var(--font-body); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen .w-time { font: 700 24cqi/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; margin-block: 2.5cqi; white-space: nowrap; }
.screen .w-unit { font: 600 7.5cqi/1 var(--font-body); margin-left: 1.5cqi; letter-spacing: 0; }
.screen .w-time.learning { color: var(--screen-ink-2); }
.screen .w-arrive { align-self: start; font: 500 9cqi/1.2 var(--font-body); color: var(--screen-ink-2); font-variant-numeric: tabular-nums; }
/* full-screen field: the lines top to bottom in the order you meet the points */
.screen.with-then { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.screen.with-then > * { align-self: center; }
.screen .w-minor { font: 500 7cqi/1.2 var(--font-body); color: var(--screen-ink-2); margin-bottom: 1.2cqi; max-width: 80%; font-variant-numeric: tabular-nums; }
.screen .w-minor:has(+ .w-label) { margin-bottom: 2.5cqi; }
/* a line: dot, name (shortened when long), time (always shown) */
.screen .w-minor, .screen .w-then { display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.screen .w-minor .nm, .screen .w-then .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.screen .w-minor .tl, .screen .w-then .tl { flex: none; margin-left: 0.3em; }
.screen .w-minor .dot, .screen .w-then .dot { flex: none; }
.screen .w-minor:empty { display: none; }
/* full-screen field: the unit and the arrival stacked beside the time */
.screen .w-side { display: inline-flex; flex-direction: column; vertical-align: middle; margin-left: 1.5cqi; text-align: left; color: var(--screen-ink); }
.screen .w-side .w-unit { margin-left: 0; }
.screen .w-arr { font: 500 7.5cqi/1.2 var(--font-body); }
/* the dot before each time: how far off it may be */
.screen .dot { display: inline-block; width: 2.4cqi; height: 2.4cqi; border-radius: 50%; margin-right: 1.6cqi; vertical-align: 0.1em; }
.screen .w-time .dot { width: 4.4cqi; height: 4.4cqi; margin-right: 2.6cqi; vertical-align: middle; }
.screen .dot.g { background: #3fcf72; }
.screen .dot.y { background: #f2b630; }
.screen .dot.r { background: #ef5a4f; }
.screen .w-then.note { color: var(--screen-ink-2); }
.screen .w-then:empty { display: none; }
.screen .w-then { min-height: 1.2em; margin-top: 2cqi; font: 500 7cqi/1.2 var(--font-body); color: var(--screen-ink); max-width: 100%; font-variant-numeric: tabular-nums; }
.watch-caption { font-size: var(--step--1); color: var(--ink-3); text-align: center; max-width: 32ch; }

.panel { display: grid; gap: 18px; min-width: 0; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.race-clock { font: 600 var(--step-1)/1 var(--font-display); font-variant-numeric: tabular-nums; margin-left: auto; }
.scrub { width: 100%; accent-color: var(--accent); }
.readout { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; }
.readout dt { color: var(--ink-3); font-size: var(--step--1); padding-top: 2px; }
.readout dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; }
.readout dd b { font-weight: 600; }
/* the row that matters: how far off the prediction was */
.readout .hl { background: var(--accent-soft); padding-block: 6px; }
.readout dt.hl { color: var(--ink); font-weight: 600; border-radius: 8px 0 0 8px; padding-left: 10px; margin-left: -10px; padding-top: 8px; }
.readout dd.hl { border-radius: 0 8px 8px 0; padding-right: 10px; margin-right: -10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: var(--step--1); font-weight: 600; vertical-align: 1px; }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.quiet { background: var(--line-soft); color: var(--ink-2); }
.learned { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 8px; font-size: var(--step--1); color: var(--ink-2); }
/* under the "how far off" chart: what the demo assumes, and what the watch has noticed */
.demo-notes { margin-top: 16px; }
.demo-caption { margin: 0 0 18px; }
.learned b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* charts */
.chart-block { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } /* minmax(0) lets wide charts scroll inside their box */
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.chart-box { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 8px 4px; overflow-x: auto; }
.chart-box svg { display: block; width: 100%; height: auto; cursor: crosshair; }
.chart-box svg.wide { min-width: 560px; } /* full-width charts scroll sideways on phones instead of shrinking their labels */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--step--1); color: var(--ink-2); }
.legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.tip {
  position: absolute; pointer-events: none; z-index: 2;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: var(--step--1); line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tip i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

/* how it works */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 760px) { .cols-3 { grid-template-columns: minmax(0, 1fr); } }
.cols-3 > div { display: grid; gap: 8px; align-content: start; }

/* tools */
.tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .tools-grid { grid-template-columns: minmax(0, 1fr); } }
.gains { margin: 0 0 14px; padding-left: 1.2em; color: var(--ink-2); display: grid; gap: 6px; max-width: 70ch; }
.tools-grid.single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.string-box { display: grid; gap: 8px; }
.string-box pre {
  margin: 0; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 10px 12px; white-space: pre-wrap; word-break: break-all; max-height: 7.5em; overflow: auto;
  color: var(--ink-2);
}
.decode { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--step--1); }
.decode span { background: var(--accent-soft); color: var(--ink); border-radius: 6px; padding: 2px 8px; font-variant-numeric: tabular-nums; }

/* footer */
.site-foot { border-top: 1px solid var(--line); padding-block: 28px; font-size: var(--step--1); color: var(--ink-3); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}


/* results table */
.table-wrap { position: relative; /* keeps the hidden header label inside the scroll box */ overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table.results { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.results th, .results td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.results thead th { color: var(--ink-3); font-weight: 600; }
.results .num { text-align: right; }
.results tr.current td { background: var(--accent-soft); }
.results tr.current td:first-child { font-weight: 600; }
.results tr.baseline td { color: var(--ink-2); }
.findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }
@media (max-width: 760px) { .findings { grid-template-columns: minmax(0, 1fr); } }
.findings > div { display: grid; gap: 8px; align-content: start; }
.caveat { margin-top: 20px; max-width: 80ch; }
.sources { margin-top: 16px; font-size: var(--step--1); color: var(--ink-2); }
.sources summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.sources ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* plain-language page: hero actions, hashtags, annotated watch, how-to and install steps, FAQ */
.hero h1 { max-width: 22ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-actions .btn { text-decoration: none; padding: 11px 18px; font-size: var(--step-0); }
.tags { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.tags li { font: 500 var(--step--1)/1 var(--font-body); color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 10px; }
.foot-tags { color: var(--accent); }

.explain-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
@media (max-width: 760px) { .explain-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.watch.watch-small { width: min(240px, 66vw); }
.callouts { margin: 0; padding-left: 1.3em; display: grid; gap: 14px; max-width: 62ch; }
.callouts li::marker { font-family: var(--font-display); font-weight: 700; color: var(--accent); }
/* "More": details folded in place, so the page reads in short lines */
details.more { margin-top: 6px; }
details.more > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; font-size: var(--step--1); font-weight: 600; color: var(--accent); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "▾"; font-size: 0.85em; transition: transform 0.15s; }
details.more[open] > summary::after { transform: rotate(180deg); }
details.more > :not(summary) { margin-top: 8px; }
.callouts details.more p { color: var(--ink-2); font-size: var(--step--1); }
.demo-howto { margin: 0; }
.demo-howto + details.more { margin-bottom: 18px; }
.callouts .co { margin: 0; }
.pill { display: inline-block; min-width: 1.6em; text-align: center; font: 700 1em/1.35 var(--font-body); background: var(--screen); color: var(--screen-ink); border-radius: 6px; padding: 0 6px; margin: 0 2px; }

.howto { margin: 0 0 28px; padding: 0; list-style: none; counter-reset: howto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .howto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .howto { grid-template-columns: minmax(0, 1fr); } }
.howto li { counter-increment: howto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 12px 46px; position: relative; font-size: var(--step--1); color: var(--ink-2); }
.howto li::before { content: counter(howto); position: absolute; left: 12px; top: 11px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 0.85rem/24px var(--font-display); text-align: center; }
.howto li b { color: var(--ink); }

.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .steps-grid { grid-template-columns: minmax(0, 1fr); } }
.step-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; align-content: start; }
.steps { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--ink-2); font-size: var(--step--1); }
.steps b { color: var(--ink); }

.faq { display: grid; gap: 8px; max-width: 760px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin-top: 10px; color: var(--ink-2); }
.sources p { margin-top: 10px; max-width: 80ch; }
.explain-note { margin-top: 20px; }
.column-notes { padding-left: 1.2em; display: grid; gap: 4px; }
.step-note { margin: 4px 0 0; font-size: var(--step--1); color: var(--ink-2); background: var(--bg); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 8px 12px; }
.alt-install { margin-top: 20px; }
.alt-install .steps { margin-top: 10px; }
.alt-install .step-note { margin-top: 10px; }

/* race prep page */
.prep-hero .howto { margin-top: 24px; }
.privacy-note { margin-top: 14px; }
.prep-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 28px; align-items: start; }
@media (max-width: 860px) { .prep-grid { grid-template-columns: minmax(0, 1fr); } }
.prep-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; } /* wide tables scroll instead of widening the page */
.prep-help { display: grid; gap: 10px; }
.prep-help details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.prep-help summary { cursor: pointer; font-weight: 600; font-size: var(--step--1); }
.prep-help .steps, .prep-help p { margin-top: 10px; }
.drop { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 28px 16px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-title { font: 700 var(--step-1)/1.2 var(--font-display); color: var(--accent); }
.status { min-height: 1.2em; font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.status.error { color: var(--warn); font-weight: 600; }
.prep-table { min-width: 520px; }
.prep-table td, .prep-table th { white-space: normal; }
.output { display: grid; gap: 14px; margin-top: 8px; }
.field { display: grid; gap: 6px; font-size: var(--step--1); color: var(--ink-2); font-weight: 600; max-width: 420px; }
.field.inline { display: inline-grid; margin-top: 8px; }
.field input, .field select { font: 500 var(--step-0)/1.3 var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.output details summary { cursor: pointer; font-weight: 600; }
.output details p { margin-top: 8px; max-width: 70ch; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.small-btn { padding: 6px 10px; font-size: 0.8rem; }
.btn.danger { color: var(--warn); }
.course-summary { margin: 0; }
.lib-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 760px) { .lib-grid { grid-template-columns: minmax(0, 1fr); } }
.lib-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.lib-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 10px; }
.lib-item > div:first-child { display: grid; gap: 2px; }
.lib-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-empty { padding: 4px 0; }
.backup { margin-top: 24px; }
label.btn { cursor: pointer; }
.prep-cta { margin-top: 18px; }

/* race prep: choosing checkpoints */
.cp-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cp-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.prep-table tr.off td { color: var(--ink-3); }
.prep-table tr.off .cp-pick { text-decoration: line-through; }

/* race prep: what's open in each section */
.loaded { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.loaded-kicker { flex-basis: 100%; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.loaded-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.loaded-name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; min-width: 0; cursor: text; }
.loaded-input { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; padding: 4px 8px; width: min(32ch, 100%); min-width: 0; }
.loaded-edit { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer; }
.loaded-edit:hover { color: var(--accent); background: var(--accent-soft); }
.loaded-edit:focus-visible, .loaded-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.loaded-state { font-size: var(--step--1); font-weight: 600; color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.loaded-state.saved { color: var(--good); background: var(--good-soft); }
.loaded-save { margin-left: auto; }

/* race prep: the course drop box once a course is in, and adding points */
.drop.compact { grid-auto-flow: column; justify-content: start; align-items: center; padding: 8px 14px; border-width: 1px; justify-self: start; border-radius: 999px; }
.drop.compact .drop-title { font: 600 var(--step--1)/1 var(--font-body); }
.drop.compact .drop-hint { display: none; }
.add-points { display: grid; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.add-points h3 { margin: 0; }
.add-points p { margin: 0; }
.add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.add-row .small { flex: 1 1 260px; }
.added-tag { display: inline-block; margin-left: 8px; font-size: 0.72rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.add-row .field.inline { display: inline-flex; align-items: center; gap: 8px; margin-top: 0; font-weight: 500; }
#ownName { width: 13em; max-width: 60vw; }
#ownKm { width: 5em; }
svg.pickable { cursor: crosshair; }
.kind { display: inline-block; font: 600 0.72rem/1.4 var(--font-body); border-radius: 999px; padding: 1px 9px; border: 1px solid var(--ink-2); color: var(--ink); background: var(--surface); }
.kind.minor { border-color: var(--line); color: var(--ink-3); }
button.kind { cursor: pointer; }
button.kind:hover { border-color: var(--accent); }
.prep-table tr.minor-row td:first-child { color: var(--ink-2); }
.fit-out summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.fit-out p { margin: 8px 0; max-width: 70ch; }

/* demo: what the runner pasted before the race */

/* race prep: how to get the texts from a computer to the settings */
.tip-box { display: grid; gap: 10px; margin-top: 20px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-width: 760px; }
.tip-box h3, .tip-box p { margin: 0; }

/* language switcher, added to the top bar by tools/build_site.py */
.lang-switch { display: flex; gap: 2px; margin-left: auto; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; }
.lang-switch a { color: var(--ink-3); text-decoration: none; padding: 4px 6px; border-radius: 6px; }
.lang-switch a:hover { color: var(--ink); background: var(--accent-soft); }
.lang-switch a[aria-current] { color: var(--accent); background: var(--accent-soft); }
.site-head .wrap .site-nav { margin-left: auto; }
.site-head .wrap .site-nav + .lang-switch { margin-left: 8px; }
.results th .race-km { display: block; font-weight: 500; font-size: 0.72rem; }
/* results table: headings may wrap, so the columns fit the page */
#results thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
#results thead th .race-km { white-space: nowrap; }
#results thead th:nth-last-child(-n+3) { min-width: 4.5em; }
/* narrow enough to fit the page: tighter cells, row names and race names wrap */
#results { min-width: 0; }
#results th, #results td { padding: 8px 7px; }
#results th:first-child, #results td:first-child { padding-left: 12px; white-space: normal; min-width: 9em; }
#results td:last-child, #results th:last-child { padding-right: 12px; }

/* race prep on the main page: a tinted section, the course with its two kinds of points, four features */
.prep-feature { background: var(--accent-soft); }
.points-fig { margin: 0 0 24px; display: grid; gap: 10px; }
.points-svg { display: block; width: 100%; min-width: 620px; height: auto; }
.pf-area { fill: var(--accent-soft); }
.pf-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.pf-base { stroke: var(--line); stroke-width: 1; }
.pf-drop { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.pf-main { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.pf-minor { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
.pf-main-t { font: 600 13px var(--font-body); fill: var(--ink); }
.pf-minor-t { font: italic 500 12px var(--font-body); fill: var(--ink-2); }
.points-legend { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: var(--step--1); color: var(--ink-2); }
.points-legend b { color: var(--ink); }
.points-legend i { display: inline-block; border-radius: 50%; vertical-align: middle; margin-right: 8px; }
.lg-main { width: 12px; height: 12px; background: var(--ink); }
.lg-minor { width: 9px; height: 9px; background: var(--surface); border: 2px solid var(--ink-2); }
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: minmax(0, 1fr); } }
.features > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.features p { font-size: var(--step--1); }
.prep-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 760px) { .prep-steps { grid-template-columns: minmax(0, 1fr); } }
.prep-feature details.more { margin-top: 16px; display: grid; gap: 10px; }
.chart-box .points-svg { cursor: default; }
.prep-cta .btn { text-decoration: none; }
.needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
@media (max-width: 760px) { .needs { grid-template-columns: minmax(0, 1fr); } }
.needs > div { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 14px 18px; display: grid; gap: 6px; align-content: start; }
.needs p { font-size: var(--step--1); }
.hero-note { margin-top: 18px; max-width: 60ch; font-size: var(--step--1); color: var(--ink-2); background: var(--accent-soft); border-radius: var(--radius); padding: 10px 14px; }
.hero-note b { color: var(--ink); }