/* ===========================================================================
   Tools: the cost page, its estimator, and the six planning calculators.
   Loaded after styles.css and directory.css (via shell(extra_head=...)), so it
   may restyle .est / .result / .opt / .brow, which the calculator scripts
   still use by name. Tokens only: no raw hex, light and dark come for free.

   Components
   .tool-hero      <section class="page-hero page-hero--plain tool-hero"> h1 + sub, with
                   .tool-rule (one rule-of-thumb figure in mono) beside it
   .tool           <div class="est tool">  .tool-main (card: .est-head + .est-body)
                   + .result (solid accent panel, sticky beside the card on desktop)
   .field          label above a number input, optional .field-help; .field-row groups two or three
   .opts--grid     radio chips laid out on an even grid
   .tool-notes     reference content (left) + .tool-sources (right, sticky)
   .cost-*         the /cost/ page: hero answers, distance chart (.dist), drivers, journey
   Mono rule      Geist Mono carries digits and the currency sign only. Wrap them in
                  <span class="mono">; the words around them ("to", "litres", "a week") stay in
                  the body face at the same size. The calculator scripts do this to the result
                  card after every render (monoize), so the text itself never changes.
   .result-cta    the one primary button inside a result card, to the matching provider page
   .keep-planning a quiet "Keep planning" line of links to other calculators
   =========================================================================== */

/* ---------- Hero ---------- */

.tool-hero { padding-block: clamp(20px, 1.5rem + 1.5vw, 44px) clamp(24px, 1.5rem + 2vw, 48px); }
.tool-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.tool-hero h1 { max-width: 24ch; font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); }
.tool-hero .lede { max-width: 52ch; margin: 0; }
.tool-rule { margin: 0; padding: .15rem 0 .15rem 1.25rem; border-left: 3px solid var(--accent); }
.tool-rule-fig { display: block; font-family: var(--font-body); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; font-size: clamp(1.9rem, 1.1rem + 2.4vw, 2.9rem); color: var(--ink); }
.tool-rule-cap { display: block; margin-top: .45rem; color: var(--ink-2); font-size: .98rem; line-height: 1.4; max-width: 26ch; }
@media (max-width: 820px) {
  .tool-hero-grid { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; }
  .tool-rule-cap { max-width: none; }
}

/* ---------- Tool panel ---------- */

.tool-band { padding-block: 0 clamp(48px, 3rem + 3.5vw, 96px); }

.tool {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(1rem, 2.5vw, 1.5rem); align-items: start;
  background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible;
}
.tool-main { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surf); box-shadow: var(--shadow-1); min-width: 0; }
.tool .est-head { border-bottom: 1px solid var(--line); }
.tool .est-head h2 { font-size: 1.35rem; }
.tool .est-body { gap: 1.6rem; }

.tool .result {
  position: sticky; top: calc(var(--header-h) + 16px);
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--r-surf); box-shadow: var(--shadow-2);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  min-width: 0;
}
.tool .result-label { color: var(--accent-ink); font-size: .95rem; font-weight: 600; opacity: .92; margin-bottom: .55rem; }
.tool .result-figure {
  font-family: var(--font-body); font-weight: 600;
  color: var(--accent-ink);
  font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.1rem);
  line-height: 1.05; letter-spacing: -.04em;
  overflow-wrap: anywhere; text-wrap: balance;
}
.tool .result-sub { color: var(--accent-ink); margin-top: .8rem; font-size: 1.02rem; }
.tool .breakdown { border-top: 1px solid color-mix(in srgb, var(--accent-ink) 30%, transparent); margin-top: 1.4rem; padding-top: 1.1rem; gap: .65rem; }
.tool .brow { font-size: .95rem; align-items: baseline; }
.tool .brow span:first-child { color: var(--accent-ink); opacity: .92; }
.tool .brow span:last-child { color: var(--accent-ink); }
.tool .brow span:only-child { white-space: normal; font-family: var(--font-body); font-weight: 400; font-size: .92rem; }
.tool .brow.mute span { color: var(--accent-ink); opacity: .85; font-style: normal; font-size: .92rem; }
.tool .brow > span:last-child:not(:only-child) { font-family: var(--font-body); font-weight: 600; }

/* Mono on numerals only. Later in the file than the .brow rules above, so it wins at equal weight. */
.mono { font-variant-numeric: tabular-nums; }
.tool .result-figure .mono, .tool .result-sub .mono, .tool .brow span.mono {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  font-weight: inherit; font-size: inherit; font-style: normal; white-space: inherit; opacity: 1; color: inherit;
}
.tool .result-figure .mono { letter-spacing: -.045em; }

/* The one next step, directly under the answer */
.tool .result-cta {
  margin-top: 1.1rem; width: 100%; justify-content: center; text-align: center;
  background: var(--accent-ink); color: var(--accent);
}
.tool .result-cta:hover { background: var(--surface); color: var(--accent-hover); }
.tool .result-cta svg { flex: none; }
.tool .result-cta + .breakdown { margin-top: 1.25rem; }

/* Dark mode: a tint with accent text, not a periwinkle slab */
@media (prefers-color-scheme: dark) {
  .tool .result { background: var(--accent-tint); color: var(--ink); border: 1px solid var(--accent-line); box-shadow: var(--shadow-1); }
  .tool .result-label { color: var(--accent); opacity: 1; }
  .tool .result-figure { color: var(--accent); }
  .tool .result-sub { color: var(--ink-2); }
  .tool .breakdown { border-top-color: var(--accent-line); }
  .tool .brow span:first-child { color: var(--ink-2); opacity: 1; }
  .tool .brow span:last-child { color: var(--ink); }
  .tool .brow.mute span { color: var(--muted); opacity: 1; }
  .tool .result-cta { background: var(--accent); color: var(--accent-ink); }
  .tool .result-cta:hover { background: var(--accent-hover); color: var(--accent-ink); }
}

@media (max-width: 900px) {
  .tool { grid-template-columns: 1fr; }
  .tool .result { position: static; }
}
@media (max-width: 560px) {
  .tool .est-head, .tool .est-body { padding-inline: 1.1rem; }
  .tool .est-body { padding-block: 1.25rem; }
}

/* Question groups */
.tool .est-body fieldset { min-width: 0; }
.tool .est legend { font-size: 1rem; margin-bottom: .75rem; }

.field { display: grid; gap: .45rem; }
.field label { font-size: 1rem; font-weight: 650; color: var(--ink); }
.field-help { margin: 0; font-size: .88rem; color: var(--muted); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1.1rem; align-items: end; }
.field .num-in { width: 100%; max-width: 15rem; }

.opts--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem; }
.opts--grid .opt span { height: 100%; }
.opts--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opts--pair .opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.opt span { line-height: 1.3; }
.opt span svg { width: 20px; height: 20px; flex: none; margin-right: .55rem; }
@media (max-width: 560px) {
  .opts--grid { grid-template-columns: 1fr 1fr; }
  .opts--grid.opts--one { grid-template-columns: 1fr; }
  .opt span { padding-inline: .8rem; }
}

/* ---------- Reference notes + sources ---------- */

.tool-notes-wrap { padding-block: 0 clamp(40px, 3rem + 2vw, 80px); }
.tool-notes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tool-notes { min-width: 0; max-width: 46rem; }
.tool-notes > * + * { margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--line); }
.tool-notes h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); }
.tool-notes ul { padding-left: 1.2rem; }
.tool-notes li { margin: .4rem 0; }
.tool-notes .lede { margin-bottom: 0; }
.tool-notes .ptable td.num, .cost-tables .ptable td.num { font-family: var(--font-body); letter-spacing: 0; }
.tool-notes .ptable td.num .mono, .cost-tables .ptable td.num .mono { font-family: var(--font-mono); letter-spacing: -.02em; }

.tool-sources {
  position: sticky; top: calc(var(--header-h) + 16px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surf);
  padding: 1.25rem 1.3rem;
}
.tool-sources h2 { font-size: 1.1rem; margin-bottom: .7rem; }
.tool-sources .src { margin: 0; font-size: .9rem; }
.tool-sources .src a { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .tool-notes-grid { grid-template-columns: 1fr; }
  .tool-sources { position: static; }
}

/* ---------- /cost/ hero ---------- */

.cost-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.cost-hero h1 { max-width: 22ch; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem); }
.cost-hero .lede { margin: 0; max-width: 40ch; }
.cost-hero .btn-row { margin-top: 1.6rem; }
.cost-answers { box-shadow: var(--shadow-1); }
.cost-answers .price-hero-q { margin-bottom: .4rem; }
.cost-answers-list { list-style: none; margin: 0; padding: 0; }
.cost-answers-list li { display: flex; flex-direction: column; gap: .2rem; padding: 1.05rem 0; }
.cost-answers-list li + li { border-top: 1px solid var(--line); }
.cost-answers-list li:last-child { padding-bottom: 0; }
.cost-answers-list .price-hero-fig { font-family: var(--font-body); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); }
.cost-answers-list .price-hero-fig .mono { font-family: var(--font-mono); letter-spacing: -.035em; }
.cost-answers-list .price-hero-unit { font-size: .98rem; color: var(--ink-2); max-width: 40ch; }
@media (max-width: 820px) {
  .cost-hero-grid { grid-template-columns: 1fr; }
}

/* Trust strip sits directly under the hero */
.cost-facts { padding-block: 0 clamp(32px, 4vw, 56px); }

/* ---------- /cost/ estimator band ---------- */

.cost-estimate { background: var(--accent-tint); }
.cost-estimate .tool-main { box-shadow: var(--shadow-1); }
.cost-estimate-head { max-width: 40rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.cost-estimate-head h2 { margin-bottom: .3em; }
.cost-estimate-head p { color: var(--ink-2); margin: 0; }
.tool-links { list-style: none; margin: clamp(1.25rem, 3vw, 2rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.tool-links a { font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.tool-links a:hover { text-decoration: underline; }
.tool-links svg { width: 16px; height: 16px; flex: none; }
.keep-planning { margin-top: clamp(1.25rem, 3vw, 2rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem; }
.keep-planning-h { margin: 0; font-weight: 650; color: var(--ink-2); }
.keep-planning .tool-links { margin: 0; }

/* ---------- /cost/ distance: photo, then the chart ---------- */

.cost-road { padding-block: clamp(48px, 3rem + 3.5vw, 96px) 0; }
.cost-road-photo { margin: 0; border-radius: var(--r-surf); overflow: hidden; aspect-ratio: 21 / 9; background: var(--ph); box-shadow: var(--shadow-1); }
.cost-road-photo img, .cost-road-photo .ph { width: 100%; height: 100%; object-fit: cover; }
.cost-road-card {
  --off: 0px;
  position: relative; z-index: 1; box-sizing: border-box;
  width: min(calc(100% - var(--off)), 52rem); max-width: 100%;
  margin: clamp(-5.5rem, -6vw, -1.5rem) 0 0 var(--off);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surf); box-shadow: var(--shadow-2);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.cost-road-card h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); max-width: 22ch; margin-bottom: .35em; }
.cost-road-card > p { color: var(--ink-2); max-width: 52ch; }
@media (min-width: 960px) { .cost-road-card { --off: clamp(0px, 4vw, 3.5rem); } }
@media (max-width: 700px) {
  .cost-road-photo { aspect-ratio: 16 / 9; }
  .cost-road-card { margin-top: -1.5rem; width: calc(100% - 1.5rem); margin-inline: .75rem; }
}

.dist { margin: 1.5rem 0 0; }
.dist-axis { margin: 0 0 .9rem; font-size: .88rem; font-weight: 600; color: var(--muted); }
.dist-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.dist-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.dist-label { font-size: .95rem; color: var(--ink-2); line-height: 1.2; }
.dist-line { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.dist-bar {
  flex: none; display: block; height: 2.4rem;
  width: calc((100% - 5.6rem) * var(--f));
  background: var(--accent); opacity: var(--o);
  border-radius: 6px;
}
.dist-fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.1rem; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.dist-row:last-child .dist-fig { font-size: 1.3rem; }
.dist figcaption { margin-top: 1.1rem; font-size: .95rem; color: var(--muted); max-width: 62ch; }
@media (max-width: 480px) {
  .dist-row { grid-template-columns: 1fr; gap: .25rem; }
  .dist-bar { width: calc((100% - 5rem) * var(--f)); height: 2rem; }
}

/* ---------- /cost/ what moves the price ---------- */

.cost-drivers { margin-top: clamp(48px, 3rem + 3.5vw, 96px); }
.cost-drivers-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.cost-drivers-intro { position: sticky; top: calc(var(--header-h) + 24px); }
.cost-drivers-intro .lede { margin: 0; }
.drivers { list-style: none; margin: 0; padding: 0; }
.drivers li { display: grid; grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr); gap: .35rem 1.5rem; padding-block: 1.5rem; border-top: 1px solid var(--line); align-items: baseline; }
.drivers li:first-child { border-top: 0; padding-top: 0; }
.drivers li:last-child { padding-bottom: 0; }
.driver-fig { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 600; line-height: 1.1; color: var(--ink); }
.drivers h3 { margin: 0 0 .35rem; }
.drivers p { margin: 0; color: var(--ink-2); }
.cost-traps { margin-top: clamp(2rem, 4vw, 3.25rem); }
.cost-traps > h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.cost-traps .trap { border-left: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem 1rem; align-items: start; }
.cost-traps .trap > svg { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--accent); margin-top: .1rem; }
.cost-traps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 860px) {
  .cost-drivers { margin-top: clamp(48px, 3rem + 3.5vw, 96px); }
.cost-drivers-grid { grid-template-columns: 1fr; }
  .cost-drivers-intro { position: static; }
}
@media (max-width: 640px) {
  .drivers li { grid-template-columns: 1fr; }
  .cost-traps-grid { grid-template-columns: 1fr; }
  .cost-traps .trap { grid-template-columns: 1fr; }
  .cost-traps .trap > svg { grid-row: auto; margin-bottom: .3rem; }
}

/* ---------- /cost/ price tables ---------- */

.cost-tables-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.cost-tables h2 { margin-bottom: 1.25rem; }
.cost-tables .ptable th[scope="rowgroup"] {
  padding-top: 1.35rem; padding-bottom: .4rem;
  font: 650 .82rem var(--font-body); color: var(--accent); letter-spacing: 0;
  border-bottom: 1.5px solid var(--accent-line);
}
.cost-tables tbody:first-of-type tr:first-child th { padding-top: .5rem; }
.cost-tables .ptable tbody:last-of-type tr:last-child td { border-bottom: 0; }
.cost-tables .ptable td:first-child { padding-left: 0; }
.cost-tables .ptable th:first-child { padding-left: 0; }
.cost-tables .note { margin-top: 1rem; }
@media (max-width: 900px) { .cost-tables-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .cost-tables .ptable th, .cost-tables .ptable td { padding: .65rem .45rem; }
  .cost-tables .ptable td:first-child, .cost-tables .ptable th:first-child { padding-left: 0; }
  .cost-tables .ptable td:last-child, .cost-tables .ptable th:last-child { padding-right: 0; }
}

/* ---------- /cost/ trust + sources ---------- */

.cost-trust-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.cost-trust .method { margin: 0; }
.method .cost-sources { display: block; list-style: none; margin: .6rem 0 0; padding: 0; columns: 2; column-gap: 2rem; }
.cost-sources li { break-inside: avoid; padding: .2rem 0; font-size: .95rem; color: var(--ink-2); }
.cost-sources-h { margin: 1.4rem 0 0; font-size: .95rem; font-weight: 650; }
@media (max-width: 860px) { .cost-trust-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .method .cost-sources { columns: 1; } }

/* ---------- /cost/ what to do with a price ---------- */

.cost-journey { padding-block: clamp(40px, 3rem + 2vw, 72px) 0; }
.cost-journey h2 { max-width: 20ch; margin-bottom: 1.25rem; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--line); }
.journey li { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.25rem 1.5rem 0; }
.journey li + li { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.journey svg { width: 28px; height: 28px; color: var(--accent); }
.journey strong { font: 650 1.1rem var(--font-display); letter-spacing: -.015em; }
.journey span { color: var(--ink-2); font-size: .97rem; line-height: 1.45; }
@media (max-width: 860px) {
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .journey li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .journey { grid-template-columns: 1fr; }
  .journey li, .journey li + li { padding: 1.1rem 0; border-left: 0; }
  .journey li + li { border-top: 1px solid var(--line); }
}

.cost-claim { padding-block: clamp(32px, 3rem, 56px) 0; }