/* Free tool pages and climb pages. Loaded only on those pages. Values come from tokens.css and base.css. */

/* Page top */
.tool-hero { padding: var(--sp-8) 0 var(--sp-6); }
.crumbs { margin-bottom: var(--sp-4); font-size: var(--fs-base); color: var(--c-text-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--c-line); }
.crumbs a { color: var(--c-accent-text); text-decoration: none; }
.crumbs a:hover { color: var(--c-ink); }
.tool-hero h1 { font-size: var(--fs-4xl); line-height: 1.02; letter-spacing: -0.01em; max-width: 20ch; }
.tool-intro { margin-top: var(--sp-4); max-width: 56ch; font-size: var(--fs-lg); line-height: 1.5; }

/* The calculator: what you type on the left, the answer on the right */
.tool-work { padding-bottom: var(--sp-8); }
/* minmax(0, ...) lets a wide table shrink its column instead of pushing the page wider than a phone. */
.tool { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6); align-items: start; }
.tool-fields { display: grid; gap: var(--sp-5); padding: var(--sp-6); background: var(--c-surface-alt);
  border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.field { display: grid; gap: var(--sp-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { padding: 0; color: var(--c-ink); font-weight: 600; }
.field > legend { margin-bottom: var(--sp-2); }
.field-help { font-size: var(--fs-sm); color: var(--c-text-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.tool input[type="number"], .tool input[type="text"], .tool select {
  width: 100%; min-height: var(--tap-min); padding: var(--sp-2) var(--sp-3); background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-ink); font: inherit;
  font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.tool input:focus-visible, .tool select:focus-visible { outline: 2px solid var(--c-accent-text); outline-offset: 1px; }
.tool input[aria-invalid="true"] { border-color: var(--c-error); }
.input-unit { position: relative; display: flex; align-items: center; }
.input-unit input { padding-right: var(--sp-8); }
.input-unit .unit { position: absolute; right: var(--sp-3); color: var(--c-text-muted); pointer-events: none; }
.input-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.input-trio { grid-template-columns: repeat(3, 1fr); }
/* Parts a calculator hides until they are needed. Beats the display set on .field and friends. */
.tool [hidden] { display: none; }

/* Choices: radio buttons drawn as pills */
.choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-text);
  cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.choice:hover span { border-color: var(--c-accent-text); }
.choice input:checked + span { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-paper); font-weight: 600; }
.choice input:focus-visible + span { outline: 2px solid var(--c-accent-text); outline-offset: 2px; }
.choice-small span { min-height: 36px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.choices-stack { display: grid; gap: var(--sp-2); }
.choices-stack .choice span { width: 100%; border-radius: var(--r-md); }
.unit-switch { display: flex; gap: var(--sp-2); }

/* The answer */
.tool-result { position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: grid; gap: var(--sp-4);
  padding: var(--sp-6); background: var(--c-surface); border: 1px solid var(--c-accent); border-radius: var(--r-lg); }
.result-label { font-size: var(--fs-base); color: var(--c-text-muted); }
.result-big { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-5xl); line-height: 1; color: var(--c-ink);
  font-variant-numeric: tabular-nums; }
.result-sub { font-size: var(--fs-lg); color: var(--c-text); }
.result-note { font-size: var(--fs-sm); color: var(--c-text-muted); }
.result-empty { color: var(--c-text-muted); }
.result-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-4); margin: 0;
  padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.result-stats div { display: flex; flex-direction: column; }
.result-stats dd { order: -1; margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.1;
  color: var(--c-ink); font-variant-numeric: tabular-nums; }
.result-stats dt { font-size: var(--fs-sm); color: var(--c-text-muted); }
.result-table, .tool-words table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.result-table caption, .tool-words caption { text-align: left; padding-bottom: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-sm); }
.result-table th, .result-table td, .tool-words th, .tool-words td { padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; text-align: left; border-bottom: 1px solid var(--c-line);
  vertical-align: top; }
.result-table th, .tool-words th { color: var(--c-ink); font-weight: 600; }
.result-table thead th, .tool-words thead th { color: var(--c-text-muted); font-weight: 400; font-size: var(--fs-sm); }
.result-table td.num, .result-table th.num { text-align: right; padding-right: 0; white-space: nowrap; }
.result-table .num + .num { padding-left: var(--sp-3); }
.result-table tr.is-you th, .result-table tr.is-you td { color: var(--c-effort); }
/* Zone swatches use the road colours, easiest first. */
.tool { --road-0: var(--c-text-muted); --road-1: var(--c-accent-text); --road-2: var(--c-road-steady);
  --road-3: var(--c-effort); --road-4: var(--c-road-steep); --road-5: var(--c-error); --road-6: var(--c-ink); }
.swatch { display: inline-block; width: var(--sp-3); height: var(--sp-3); margin-right: var(--sp-2); border-radius: var(--r-pill);
  background: var(--road, var(--c-line)); vertical-align: baseline; }
.road-5 { --road: var(--road-5); } .road-6 { --road: var(--road-6); }
.result-svg { display: block; width: 100%; height: 140px; }
.result-svg .profile-fill { fill: var(--c-accent-soft); opacity: .55; }
.result-svg .profile-road { fill: none; stroke: var(--road); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.result-svg .profile-line { fill: none; stroke: var(--c-accent-text); stroke-width: 2; }
.result-svg .profile-top { fill: var(--c-effort); }

/* Words, questions and links under the calculator */
.tool-words { padding: var(--sp-8) 0 0; }
.tool-words .text-body > :first-child { margin-top: 0; }
.tool-page .faq { padding-top: var(--sp-8); }

/* The app, at the end of every tool page */
.app-cta { padding: var(--sp-9) 0; background: var(--c-surface-alt); }
.app-cta-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-7); align-items: center; }
.app-cta h2 { font-size: var(--fs-4xl); line-height: 1.02; }
.app-cta p { margin-top: var(--sp-4); font-size: var(--fs-lg); line-height: 1.5; max-width: 46ch; }
.app-cta .store-badges { margin-top: var(--sp-6); }
.app-cta-hill { width: 100%; height: 160px; }

/* More tools */
.more-tools { padding: var(--sp-8) 0 var(--sp-9); }
.more-tools h2 { font-size: var(--fs-2xl); }
.tool-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); list-style: none;
  margin: var(--sp-5) 0 0; padding: 0; }
.tool-card a { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; padding: var(--sp-5); background: var(--c-surface-alt);
  border: 1px solid var(--c-line); border-radius: var(--r-lg); text-decoration: none; transition: border-color .2s; }
.tool-card a:hover { border-color: var(--c-accent-text); }
.tool-card h2, .tool-card h3 { font-size: var(--fs-xl); }
.tool-card p { color: var(--c-text-muted); }
.tool-card .climb-svg { height: 64px; }

/* A climb's own page */
.climb-hero { padding: var(--sp-8) 0 var(--sp-6); --road-0: var(--c-text-muted); --road-1: var(--c-accent-text); --road-2: var(--c-road-steady);
  --road-3: var(--c-effort); --road-4: var(--c-road-steep); }
.climb-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-7); align-items: end; }
.climb-kicker { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); color: var(--c-accent-text); }
.climb-kicker .climb-free { font-weight: 700; color: var(--c-success); }
.climb-hero h1 { font-size: var(--fs-5xl); line-height: 1; letter-spacing: -0.01em; }
.climb-hero .tool-intro { font-size: var(--fs-lg); }
.climb-hero .climb-stats { margin-top: var(--sp-6); max-width: 420px; }
.climb-hero-road { width: 100%; height: 220px; }
.climb-hero-road .profile-fill { fill: var(--c-accent-soft); opacity: .55; }
.climb-hero-road .profile-road { fill: none; stroke: var(--road); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.climb-hero .road-key { margin-top: var(--sp-4); }
.climb-plan { margin-top: var(--sp-6); padding: var(--sp-5); background: var(--c-surface-alt); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); }
.climb-plan h2 { font-size: var(--fs-xl); }
.climb-plan p { margin-top: var(--sp-2); }
.climb-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-6) 0 0;
  border-top: 1px solid var(--c-line); margin-top: var(--sp-8); }
.climb-nav a { display: inline-flex; flex-direction: column; gap: var(--sp-1); text-decoration: none; }
.climb-nav a span { font-size: var(--fs-sm); color: var(--c-text-muted); }
.climb-nav a strong { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--c-ink); }
.climb-nav a:hover strong { color: var(--c-accent-text); }
.climb-nav .is-next { margin-left: auto; text-align: right; }

/* Phone layout */
@media (max-width: 900px) {
  .tool, .app-cta-grid, .climb-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-result { position: static; }
  .climb-hero-road { height: 160px; }
}
@media (max-width: 560px) {
  .tool-hero h1, .app-cta h2 { font-size: var(--fs-2xl); }
  .climb-hero h1 { font-size: var(--fs-4xl); }
  .tool-fields, .tool-result { padding: var(--sp-5); }
  .result-big { font-size: var(--fs-4xl); }
  .field-row, .result-pair { grid-template-columns: 1fr; }
  .result-table { font-size: var(--fs-sm); }
  .result-table th, .result-table td { padding-right: var(--sp-2); }
}

/* When the page last changed and who wrote it. */
.page-updated { margin-block: var(--sp-6) 0; font-size: var(--fs-sm); color: var(--c-text-muted); }