/* Public tools (/tools/*): Harbour Editorial (DESIGN.md). Tokens copied from public/index.html; keep them in step.
   Light-first; dark = North Shore Dusk. Spruce is the one accent. Figures use the mono face. */
:root {
  --fog:#eceee8; --paper:#f7f8f5; --ink:#15211c; --muted:#56625c; --line:#d2d8d1; --brand:#1f4d3f; --brand-ink:#ffffff; --brand-soft:#e1ebe5;
  --sky-1:#c9d3cf; --sky-2:#a9b8b3; --ridge-1:#7f948d; --ridge-2:#5d746c; --water:#4a5f58; --bad:#a8322a;
  --serif:"Instrument Serif","Instrument Serif Fallback",Georgia,"Times New Roman",serif; --sans:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono","Geist Mono Fallback",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) { :root {
  --fog:#0d1513; --paper:#131c19; --ink:#e9efeb; --muted:#93a49c; --line:#26312d; --brand:#86c3ad; --brand-ink:#0b1a15; --brand-soft:#17302a;
  --sky-1:#1d3a33; --sky-2:#142722; --ridge-1:#16302a; --ridge-2:#10241f; --water:#0b1916; --bad:#f08a80; color-scheme:dark; } }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--fog); color:var(--ink); font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p { margin:0; } h1,h2,h3 { text-wrap:balance; font-weight:400; }
a { color:var(--brand); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }
.wrap { max-width:1120px; margin:0 auto; padding-inline:16px; }
@media (min-width:720px) { .wrap { padding-inline:32px; } }
.label { font:500 12px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:999px; background:var(--brand); color:var(--brand-ink); font:500 15px var(--sans); text-decoration:none; border:0; cursor:pointer; transition:transform .15s, background-color .15s; }
.btn:hover { background:color-mix(in oklab, var(--brand), #000 10%); }
.btn:active { transform:scale(.98); }
.btn-quiet { background:transparent; color:var(--ink); border:1px solid color-mix(in oklab, var(--ink), transparent 70%); }
.btn-quiet:hover { background:color-mix(in oklab, var(--paper), transparent 40%); }

/* Header (same as the home page) */
.top { position:sticky; top:0; z-index:10; background:color-mix(in oklab, var(--fog), transparent 8%); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid color-mix(in oklab, var(--line), transparent 30%); padding-top:env(safe-area-inset-top,0px); }
.top .wrap { display:flex; align-items:center; gap:16px; min-height:64px; }
.mark { font:400 24px/1 var(--serif); color:var(--ink); text-decoration:none; margin-right:auto; }
.mark small { display:block; font:500 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.top nav { display:none; gap:24px; font-size:14px; }
.top nav a { color:var(--ink); text-decoration:none; }
.top nav a:hover, .top nav a[aria-current] { color:var(--brand); }
.top .btn { min-height:40px; padding:0 16px; font-size:14px; white-space:nowrap; gap:0; }
.top .btn .long { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (min-width:480px) { .top .btn .long { position:static; width:auto; height:auto; overflow:visible; clip-path:none; } }
@media (min-width:900px) { .top nav { display:flex; } }

/* Page head: a quiet mist band, no illustration */
.page-head { background:linear-gradient(180deg, var(--sky-1) 0%, color-mix(in oklab, var(--sky-1), var(--fog) 60%) 100%); border-bottom:1px solid var(--line); }
.page-head .wrap { display:grid; gap:14px; padding-block:clamp(40px,7vw,88px) clamp(32px,5vw,64px); }
.page-head h1 { font:400 clamp(40px,7vw,72px)/1 var(--serif); letter-spacing:-.01em; max-width:16ch; }
.page-head h1 em { font-style:italic; color:color-mix(in oklab, var(--ink), var(--brand) 35%); }
.page-head .lede { font-size:clamp(17px,2vw,19px); line-height:1.5; max-width:52ch; }
.page-head .label { color:color-mix(in oklab, var(--ink), transparent 25%); }
.crumb { font-size:14px; } .crumb a { color:var(--ink); }

section.band { padding-block:clamp(48px,7vw,88px); }
.sec-head { display:grid; gap:12px; margin-bottom:clamp(24px,3.5vw,40px); max-width:640px; }
.sec-head h2 { font:400 clamp(32px,4.5vw,48px)/1.04 var(--serif); letter-spacing:-.01em; }
.sec-head p { color:var(--muted); font-size:17px; }

/* Tool list (landing page) */
.tool-list { list-style:none; margin:0; padding:0; display:grid; gap:16px; }
@media (min-width:900px) { .tool-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.tool { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:clamp(22px,3vw,28px); display:grid; gap:14px; grid-template-rows:auto auto auto 1fr auto; }
.tool h2, .tool h3 { font:400 30px/1.05 var(--serif); }
.tool p { color:var(--muted); }
.tool ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); align-self:start; }
.tool li { padding:10px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.tool .btn { justify-self:start; }

/* Calculator layout: inputs, then results (side by side from 960px) */
.calc { display:grid; gap:24px; }
@media (min-width:960px) { .calc { grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:48px; align-items:start; } .calc .result { position:sticky; top:88px; } }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:clamp(18px,3vw,28px); display:grid; gap:18px; align-content:start; }
.panel > h2 { font:400 28px/1.1 var(--serif); }

/* Form controls (same as the home page form) */
form { display:grid; gap:18px; }
.row { display:grid; gap:18px; grid-template-columns:1fr 1fr; }
@media (max-width:560px) { .row { grid-template-columns:1fr; } }
label { display:grid; gap:6px; font-weight:500; font-size:14.5px; }
.hint { font-weight:400; font-size:13px; color:var(--muted); }
input, select, textarea { font:16px/1.4 var(--sans); color:var(--ink); background:var(--fog); border:1px solid var(--line); border-radius:10px; padding:12px 14px; min-height:50px; width:100%; transition:border-color .15s; }
input[inputmode="numeric"], input[inputmode="decimal"] { font-family:var(--mono); font-variant-numeric:tabular-nums; }
input:hover, select:hover, textarea:hover { border-color:color-mix(in oklab, var(--line), var(--ink) 20%); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.money { position:relative; display:block; }
.money::before { content:"$"; position:absolute; left:14px; top:50%; transform:translateY(-50%); font:16px var(--mono); color:var(--muted); pointer-events:none; }
.money input { padding-left:28px; }
.seg { display:grid; grid-template-columns:1fr 1fr; gap:8px; border:0; padding:0; margin:0; min-width:0; }
.seg legend { font-weight:500; font-size:14.5px; padding:0; margin-bottom:6px; }
.seg label { position:relative; display:block; }
.seg input { position:absolute; opacity:0; inset:0; min-height:0; cursor:pointer; }
.seg span { display:grid; gap:2px; min-height:48px; align-content:center; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--fog); font-weight:500; transition:border-color .15s, background-color .15s; }
.seg span small { font-weight:400; color:var(--muted); font-size:13px; }
.seg input:checked + span { border-color:var(--brand); background:var(--brand-soft); }
.seg input:focus-visible + span { outline:2px solid var(--brand); outline-offset:2px; }
.check { display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start; font-weight:400; font-size:14.5px; min-height:44px; }
.check input { width:20px; height:20px; min-height:0; padding:0; margin:2px 0 0; accent-color:var(--brand); }
/* "Your own estimates": costs the tools never guess (legal, inspection, moving) */
fieldset.own { border:1px solid var(--line); border-radius:14px; padding:18px; margin:0; display:grid; gap:18px; min-width:0; }
fieldset.own > legend { font:400 22px var(--serif); padding:0 6px; }
.lines .yours dt small { font-style:italic; }
.err { color:var(--bad); font-size:13.5px; font-weight:400; }
.err:empty { display:none; }

/* Results: a mono label, a headline figure, then hairline rows of label + mono amount.
   Figures are mono everywhere (DESIGN.md), the headline one included, so a total reads the same in both places. */
.big { display:grid; gap:6px; }
.big b { font:500 clamp(34px,5vw,40px)/1.05 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.big > span:not(.label) { color:var(--muted); font-size:14.5px; }
.big > span:empty { display:none; }
.lines { margin:0; display:grid; border-top:1px solid var(--line); }
.lines > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; padding:12px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.lines dt { font-size:15px; }
.lines dt small { display:block; color:var(--muted); font-size:13px; }
.lines dd { margin:0; font:500 15px var(--mono); font-variant-numeric:tabular-nums; text-align:right; }
/* Deductions keep the ink colour and a minus sign; spruce is only for money saved (an exemption or a rebate). */
.lines .saving dd { color:var(--brand); }
.lines .total { border-bottom:0; }
.lines .total dt, .lines .total dd { font-weight:600; font-size:16px; }
.lines .total dt small { font-weight:400; }
/* A cost the person hasn't entered: "Not added", muted, and left out of the total */
.lines dd.na { font:400 14.5px var(--sans); color:var(--muted); }
/* "Send me these numbers" under a result: full width on the phone, content width beside the inputs */
.result > .btn { width:100%; }
@media (min-width:960px) { .result > .btn { width:auto; justify-self:start; } }

/* Turnstile runs interaction-only, so its slot takes no space unless a challenge shows. */
#ts:empty { display:none; }

/* Phone: a slim bar keeps the headline result in view while the inputs are on screen (hidden from 960px,
   where the result panel is sticky). The page script toggles .on; hidden bars stay out of the tab order. */
.peek { position:fixed; inset:auto 0 0 0; z-index:9; background:var(--paper); border-top:1px solid var(--line);
  padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:12px;
  transform:translateY(105%); visibility:hidden; transition:transform .2s, visibility 0s .2s; }
.peek.on { transform:none; visibility:visible; transition:transform .2s; }
.peek p { font:500 14px/1.3 var(--mono); font-variant-numeric:tabular-nums; margin-right:auto; min-width:0; }
.peek p span { display:block; font:400 12px/1.4 var(--sans); color:var(--muted); }
.peek a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:500; white-space:nowrap; }
@media (min-width:960px) { .peek { display:none; } }
@media (prefers-reduced-motion: reduce) { .peek, .peek.on { transition:none; } }

/* Sources and fine print: every rule on a public page cites its official source */
.sources { list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--line); font-size:14.5px; }
.sources li { padding:12px 0; border-bottom:1px solid var(--line); display:grid; gap:2px; }
.sources li span { color:var(--muted); font-size:13.5px; }
.note { font-size:13.5px; color:var(--muted); max-width:70ch; }

/* Read next: links between the tools, guides and area pages */
.next { list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--line); }
.next li { padding:8px 0 12px; border-bottom:1px solid var(--line); display:grid; gap:0; }
.next a { justify-self:start; display:inline-flex; align-items:center; min-height:44px; font-weight:500; }
.next span { color:var(--muted); font-size:14.5px; }
@media (min-width:720px) { .next li { grid-template-columns:minmax(0,22rem) minmax(0,1fr); align-items:center; gap:24px; padding-block:8px; } }

.cta { background:var(--paper); border-block:1px solid var(--line); }
.cta .wrap { display:grid; gap:16px; padding-block:clamp(40px,6vw,72px); }
@media (min-width:800px) { .cta .wrap { grid-template-columns:1fr auto; align-items:center; gap:32px; } }
.cta h2 { font:400 clamp(30px,4vw,42px)/1.05 var(--serif); }
.cta p { color:var(--muted); }

footer { padding-block:40px calc(48px + env(safe-area-inset-bottom,0px)); font-size:14px; color:var(--muted); }
footer .wrap { display:grid; gap:16px; }
@media (min-width:800px) { footer .wrap { grid-template-columns:1fr auto; align-items:end; } }
footer .mark { font-size:28px; }
footer nav { display:flex; flex-wrap:wrap; gap:8px 20px; }
footer nav a { color:var(--muted); display:inline-flex; align-items:center; min-height:44px; }