/* Thoughtful Calc styles. Phone-first, light and dark. */
:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-2: #f1efe8;
  --text: #1c2420;
  --muted: #5a655f;
  --line: #e0ddd4;
  --field-line: #7f8a83;
  --accent: #1f6f50;
  --accent-strong: #175a40;
  --accent-soft: #e3f1ea;
  --accent-text: #ffffff;
  --insight-bg: #fff7e6;
  --insight-line: #e4b44f;
  --warn-bg: #fff3e0;
  --warn-line: #e09a2f;
  --err-bg: #fdecec;
  --err-line: #c84a4a;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(28, 36, 32, .06), 0 4px 16px rgba(28, 36, 32, .06);
  --max: 76rem;
  /* Icon tiles, one pair per tool group (icon on tile is 4.9:1 or better) */
  --tile-pool-bg: #d8ecf3;      --tile-pool-fg: #1f6a8a;
  --tile-lawn-bg: #e3f1ea;      --tile-lawn-fg: #1f6f50;
  --tile-hardscape-bg: #ece4d6; --tile-hardscape-fg: #6b5536;
  --tile-indoor-bg: #efe3f0;    --tile-indoor-fg: #7a4a85;
  --measure: 46rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121614;
    --surface: #1a201d;
    --surface-2: #222a26;
    --text: #e7ece9;
    --muted: #a1aca6;
    --line: #2f3833;
    --field-line: #6b7871;
    --accent: #5cc39b;
    --accent-strong: #7dd3b0;
    --accent-soft: #1d3329;
    --accent-text: #0b1410;
    --insight-bg: #2e2716;
    --insight-line: #b88c2e;
    --warn-bg: #33270f;
    --warn-line: #c4902f;
    --err-bg: #381b1b;
    --err-line: #d96a6a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --tile-pool-bg: #173039;      --tile-pool-fg: #8fcde4;
    --tile-lawn-bg: #1d3329;      --tile-lawn-fg: #7dd3b0;
    --tile-hardscape-bg: #2f2a21; --tile-hardscape-fg: #d6bf98;
    --tile-indoor-bg: #302337;    --tile-indoor-fg: #d9a9e3;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
[hidden] { display: none !important; }

/* Header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 750; font-size: 1.1rem; letter-spacing: -.01em; text-decoration: none; color: var(--text); }
.brand::before {
  content: ""; width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 8h12M6 12h5M6 16h5M15 13.5l3 3M18 13.5l-3 3'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.site-header nav a { font-size: .95rem; font-weight: 600; text-decoration: none; }

/* Type */
main, main.wrap { padding-block: 1.5rem 3.5rem; } /* .wrap sets side padding only; it used to zero this (Chris, 2026-10-10) */
h1 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -.02em; margin: .25rem 0 .4rem; }
.lede { color: var(--muted); font-size: 1.05rem; margin: 0 0 1.25rem; max-width: var(--measure); }
h2 { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.01em; margin: 2.75rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
main li + li { margin-top: .3rem; }

/* Calculator form */
.calc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 650; font-size: .95rem; }
.field .hint { color: var(--muted); font-size: .85rem; line-height: 1.45; }
input, select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1.5px solid var(--field-line); border-radius: var(--radius-sm);
  padding: .65rem .75rem; width: 100%; min-height: 48px;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--muted); opacity: 1; font-style: italic; }
input:hover, select:hover { border-color: var(--accent); }
.field.invalid input, .field.invalid select { border-color: var(--err-line); background: var(--err-bg); }
.field .field-error { color: var(--err-line); font-size: .85rem; font-weight: 600; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 111, 80, .2); }
select {
  appearance: none; padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a655f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 18px;
  text-overflow: ellipsis;
}
@media (prefers-color-scheme: dark) {
  select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1aca6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
}
button:focus-visible, a:focus-visible, .results:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

details.advanced { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 0 .9rem; }
details.advanced[open] { padding-bottom: .9rem; }
details.advanced summary { cursor: pointer; font-weight: 650; min-height: 48px; display: flex; align-items: flex-start; padding: .8rem 0; line-height: 1.35; gap: .5rem; list-style: none; color: var(--accent); }
details.advanced summary::-webkit-details-marker { display: none; }
details.advanced summary::before { content: "+"; font-size: 1.2rem; width: 1rem; }
details.advanced[open] summary::before { content: "−"; }
details.advanced .fields { margin-top: .25rem; }

button {
  font: inherit; font-weight: 700; font-size: 1.05rem; margin-top: 1.1rem; width: 100%; min-height: 52px;
  background: var(--accent); color: var(--accent-text); border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .15s, transform .05s;
}
button:hover { background: var(--accent-strong); }
button:active { transform: translateY(1px); }

/* Picture choices (radio buttons with icons) */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; border: 0; padding: 0; margin: 0; grid-column: 1 / -1; }
.choices legend { font-weight: 650; font-size: .95rem; margin-bottom: .4rem; padding: 0; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.choice label { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; font-size: .85rem; font-weight: 600; padding: .6rem .4rem; min-height: 48px; border: 1.5px solid var(--field-line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.choice label:hover { border-color: #b9c9c0; }
.choice svg { width: 64px; height: 40px; stroke: var(--text); fill: none; stroke-width: 2; }
.choice input:checked + label { border-color: var(--accent); background: var(--accent-soft); }
.choice input:checked + label svg { stroke: var(--accent); }
.choice input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Results */
.results { margin-top: 1.25rem; scroll-margin-top: 1rem; }
.results:empty { display: none; }
.summary {
  font-size: 1.1rem; font-weight: 600; line-height: 1.45; margin: 0 0 .75rem;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.summary .big { display: block; font-size: 2.1rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--accent-strong); margin-bottom: .3rem; }
.summary .sentence { display: block; }
.result-block details.more { margin-top: .5rem; }
.result-block details.more summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .9rem; min-height: 40px; display: flex; align-items: center; }
.result-block details.more ul { margin-top: .25rem; }
.comparison {
  background: var(--insight-bg); border: 1px solid var(--insight-line); border-radius: var(--radius);
  padding: .85rem 1rem; margin: 0 0 .75rem; font-size: .97rem;
}
.comparison::before { content: "Compared with a basic calculator"; display: block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.result-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: .75rem; box-shadow: var(--shadow); }
.result-block h3 { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.result-block dl { margin: 0; }
.result-block .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.result-block .row:first-child { border-top: 0; padding-top: 0; }
.result-block dt { color: var(--muted); }
.result-block dd { margin: 0; text-align: right; }
.result-block dd strong { font-size: 1.05rem; }
.result-block .detail { display: block; color: var(--muted); font-size: .85rem; }
.result-block ul { margin: 0; padding-left: 1.2rem; }
.result-block li + li { margin-top: .4rem; }
.results .feedback { margin: 0 0 .75rem; padding: .7rem 1rem; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius); color: var(--text); font-size: .92rem; line-height: 1.45; }
.why-link { margin: -.75rem 0 1.25rem; font-size: .95rem; }
.why-link a { font-weight: 600; }
.results .feedback a { font-weight: 650; }
.result-block .row.total { border-top: 2px solid var(--text); }
.result-block .row.total dt { color: var(--text); font-weight: 700; }
.result-block .block-note { margin: .6rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.warnings { background: var(--warn-bg); border-color: var(--warn-line); box-shadow: none; }
.errors { background: var(--err-bg); border-color: var(--err-line); box-shadow: none; }
.assumptions, .notes { font-size: .93rem; }
.assumptions { box-shadow: none; background: var(--surface-2); }

/* "Why our numbers are more realistic" comparison box */
.difference { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: .9rem 1.1rem; box-shadow: var(--shadow); }
.difference > p { margin-top: 0; }
.difference table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: .25rem 0 0; }
.difference th, .difference td { text-align: left; padding: .6rem .5rem; border-top: 1px solid var(--line); vertical-align: top; }
.difference th { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-top: 0; }
.difference td:nth-child(2) { font-weight: 600; }
.sources { font-size: .9rem; color: var(--muted); padding-left: 1.2rem; }
.sources li { margin-bottom: .35rem; }

.related ul { padding-left: 1.2rem; }
.reviewed { color: var(--muted); font-size: .9rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* Calculator layout: one column on phones; on wide screens the form sits
   left and the answer stays in view on the right. Below that, an "On this
   page" row of links, then the reading sections: one column on phones, two
   side by side on wide screens (tables span both). */
.tool-layout { display: grid; gap: 0; }
.tool-input, .tool-output { min-width: 0; }
.answer-placeholder { display: none; }
.prose { max-width: var(--measure); min-width: 0; }
.prose h2 { scroll-margin-top: 4.5rem; }
.sec { min-width: 0; }
/* About, privacy, terms, disclosure: tighter gaps between short sections (Chris, 2026-10-09). */
.prose.info h2 { margin-top: 1.6rem; }
.prose.info .sec > :last-child { margin-bottom: 0; }

.page-nav:empty { display: none; }
.page-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 2.5rem 0 0; padding: .6rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.page-nav-label { flex: none; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.page-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.page-nav li, .page-nav li + li { margin: 0; flex: none; }
.page-nav a {
  display: inline-flex; align-items: center; min-height: 36px; padding: .2rem .8rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 600; white-space: nowrap;
}
.page-nav a:hover { border-color: var(--accent); color: var(--accent); }

/* Measure-by toggle (two radio buttons styled as one control) */
.segmented { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; border: 0; padding: 0; margin: 0; gap: 0; }
.segmented legend { font-weight: 650; font-size: .95rem; margin-bottom: .4rem; padding: 0; }
.seg { position: relative; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.seg label {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .5rem; text-align: center;
  font-weight: 650; font-size: .95rem; cursor: pointer; background: var(--surface); border: 1.5px solid var(--field-line);
}
.seg:first-of-type label { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.seg:last-of-type label { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 0; }
/* Three choices (mulch: length x width, total area, round bed; coherence review 2026-10-09) */
.segmented.three { grid-template-columns: repeat(3, 1fr); }
.segmented.three .seg label { height: 100%; }
.segmented.three .seg:not(:first-of-type) label { border-left: 0; }
.seg input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.seg input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.field-group { display: contents; }
.area-readout { grid-column: 1 / -1; margin: -.35rem 0 0; font-size: .92rem; font-weight: 600; color: var(--accent); min-height: 1.3em; }
.area-readout:empty { display: none; }

/* Remember my entries */
.remember { margin-top: 1rem; display: flex; flex-direction: column; gap: .15rem; }
.remember label { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .95rem; cursor: pointer; min-height: 44px; }
.remember input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--accent); flex: none; }
.remember .hint { color: var(--muted); font-size: .82rem; padding-left: 1.85rem; }

/* Tools for the job */
.supplies { margin-top: .75rem; padding: .9rem 1.1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.supplies h2 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.supplies h2 svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 6; fill: none; }
.supplies ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.supplies li, .supplies li + li { margin: 0; font-size: .92rem; line-height: 1.4; }
.supplies strong { display: block; }
.supplies span { color: var(--muted); }
/* Affiliate links and notes, added by affiliate.js only when AMAZON_TAG is set. */
.supplies li a { display: block; color: inherit; text-decoration: none; border-radius: 4px; }
.supplies li a strong { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.supplies li a:hover strong { color: var(--accent-strong); }
.supplies-note { margin: 0 0 .6rem; font-size: .85rem; line-height: 1.4; color: var(--muted); }
.footer-disclosure { font-size: .85rem; }

@media (min-width: 1000px) {
  .tool-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
  .tool-output { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain; padding-bottom: .25rem; }
  .tool-output .results { margin-top: 0; }
  .results:empty + .answer-placeholder {
    display: flex; flex-direction: column; gap: .35rem; justify-content: center; text-align: center;
    min-height: 16rem; padding: 1.5rem; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted);
  }
  .answer-placeholder strong { color: var(--text); font-size: 1.1rem; }
  .page-nav { position: sticky; top: 0; z-index: 5; background: var(--bg); }
  .prose { max-width: none; columns: 2; column-gap: 3rem; }
  .prose > .sec { break-inside: avoid; display: flow-root; }
  .sec-wide, .prose > .reviewed { column-span: all; }
  .prose.single { columns: auto; max-width: var(--measure); }
}

/* Footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; padding: 1.5rem 0 2rem; }
.site-footer p { margin: .3rem 0; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--accent); }

/* Icon tiles: line icons from /assets/icons.svg on a soft group color.
   Icons are drawn on a 48-unit grid; stroke-width is set per size so the
   line renders at about 2px. */
.tile {
  --tile-bg: var(--accent-soft); --tile-fg: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--tile-bg); color: var(--tile-fg);
}
.tile svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 3.2; fill: none; overflow: visible; }
.tile-sm { width: 32px; height: 32px; border-radius: 9px; }
.tile-sm svg { width: 22px; height: 22px; stroke-width: 3.9; }
.tile-pool { --tile-bg: var(--tile-pool-bg); --tile-fg: var(--tile-pool-fg); }
.tile-lawn { --tile-bg: var(--tile-lawn-bg); --tile-fg: var(--tile-lawn-fg); }
.tile-hardscape { --tile-bg: var(--tile-hardscape-bg); --tile-fg: var(--tile-hardscape-fg); }
.tile-indoor { --tile-bg: var(--tile-indoor-bg); --tile-fg: var(--tile-indoor-fg); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Calculator page title with its tool tile */
.tool-title { display: flex; align-items: center; gap: .75rem; }
.tool-title .tile { width: 48px; height: 48px; }
.tool-title .tile svg { width: 32px; height: 32px; stroke-width: 3; }

/* Home */
main.home { padding-top: 2rem; }
.hero { max-width: 58rem; }
.hero h1 { font-size: 2.5rem; line-height: 1.12; letter-spacing: -.025em; margin: 0 0 .75rem; text-wrap: balance; }
/* About 100 characters a line: a few sentences can run wider than body text (Chris, 2026-10-10). */
.hero .lede { font-size: 1.15rem; line-height: 1.55; max-width: 56rem; margin: 0 0 1.1rem; }
.hero .lede.example { font-size: 1.02rem; color: var(--text); border-left: 3px solid var(--accent); padding: .1rem 0 .1rem .9rem; max-width: 56rem; }
.proof { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.proof li { display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .3rem .8rem .3rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .9rem; font-weight: 650; }
.proof svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 6; fill: none; }


.directory { margin-top: .5rem; }
.tool-group { margin-top: 2.25rem; }
.tool-group h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; font-size: 1.2rem; }
.tool-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tool-list li { margin: 0; }
.tool-list a {
  display: flex; align-items: center; gap: .65rem; height: 100%; min-height: 60px; padding: .55rem .6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.tool-list a:hover { border-color: var(--accent); box-shadow: var(--shadow); color: var(--text); }
.tool-list .tool-text { min-width: 0; }
.tool-list strong { display: block; font-size: .95rem; line-height: 1.25; color: var(--text); }
.tool-list a:hover strong { color: var(--accent); }
.tool-list .blurb { display: none; }

.trust { margin: 2.75rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }

@media (min-width: 640px) {
  .tool-list { grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: .75rem; }
  .tool-list a { align-items: flex-start; gap: .85rem; padding: .9rem 1rem; border-radius: var(--radius); }
  .tool-list strong { font-size: 1rem; margin: .1rem 0 .2rem; }
  .tool-list .blurb { display: block; color: var(--muted); font-size: .88rem; line-height: 1.45; }
}
@media (min-width: 1000px) {
  main.home { padding-top: 3rem; }
  .hero h1 { font-size: 3rem; }
}

/* Phones */
@media (max-width: 600px) {
  h1 { font-size: 1.55rem; }
  .hero h1 { font-size: 1.95rem; }
  .proof li { font-size: .85rem; padding: .25rem .7rem .25rem .5rem; }
  .calc { padding: 1rem; }
  .fields { grid-template-columns: 1fr 1fr; }
  .fields > .field:not(.half), .fields > details, .fields > fieldset { grid-column: 1 / -1; }
  .difference table, .difference thead, .difference tbody, .difference tr, .difference th, .difference td { display: block; }
  .difference thead { display: none; }
  .difference tr { border-top: 1px solid var(--line); padding: .6rem 0; }
  .difference td { border-top: 0; padding: .15rem 0; }
  .difference td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--muted); }
  .result-block .row { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .result-block dd { text-align: left; }
}

/* Several rooms (app.js setupRooms) */
.room-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .4rem 0 -.4rem; padding-top: .6rem; border-top: 1px solid var(--line); font-weight: 700; }
.fields button.room-remove, .fields .room-add button, .share-btn {
  width: auto; min-height: 44px; margin: 0; padding: .45rem 1rem; font-size: .95rem; font-weight: 650;
  background: var(--surface); color: var(--accent); border: 1.5px solid var(--accent);
}
.fields button.room-remove:hover, .fields .room-add button:hover, .share-btn:hover { background: var(--accent-soft); color: var(--accent-strong); }
.fields button.room-remove { min-height: 44px; padding: .3rem .8rem; font-size: .9rem; border-color: var(--field-line); color: var(--muted); }

/* "Next" link to a related calculator, inside the answer */
.next-step { margin: 0 0 .75rem; padding: .8rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.next-step a { font-weight: 700; }
.next-step .detail { display: block; color: var(--muted); font-size: .88rem; margin-top: .15rem; }

/* Copy link, copy shopping list, print (app.js shareBar) */
.share { margin: 0 0 .75rem; padding: .8rem 1.1rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.share-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.share-status { margin: .5rem 0 0; font-size: .9rem; font-weight: 600; color: var(--accent-strong); }
.share-status:empty { display: none; }
.share-note { margin: .45rem 0 0; color: var(--muted); font-size: .82rem; }
.print-only { display: none; }

/* A shared link's entries (app.js linkNotice, safety review 2026-10-09 #3) */
.link-notice { margin: 0 0 .75rem; padding: .7rem 1rem; border: 1px solid var(--warn-line); border-left-width: 4px; background: var(--warn-bg); border-radius: var(--radius); font-size: .92rem; line-height: 1.45; font-weight: 600; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Wide screens: a room's length, width and height on one row, not two plus a lone box (tech #9) */
@media (min-width: 1200px) {
  .fields > [data-rooms]:not([hidden]) { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}

/* Print: just the answer, with what was entered */
@media print {
  .site-header, .site-footer, .calc, .tool-input, .lede, .why-link, .page-body, .supplies, .answer-placeholder, .share, .feedback, .next-step, .link-notice, button { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  main, main.wrap { padding: 0; }
  .tool-layout { display: block; }
  .tool-output { position: static !important; max-height: none !important; overflow: visible !important; }
  .print-only { display: block; }
  .result-block, .summary, .comparison { box-shadow: none; border-color: #999; break-inside: avoid; }
  .summary .big { color: #000; }
  a { color: #000; }
}

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

/* FAQ (copy agent) */
details.faq { border-top: 1px solid var(--line); }
details.faq:last-of-type { border-bottom: 1px solid var(--line); }
details.faq summary { cursor: pointer; font-weight: 650; min-height: 48px; display: flex; align-items: center; gap: .5rem; padding: .5rem 0; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before { content: "+"; flex: none; width: 1rem; font-size: 1.2rem; color: var(--accent); }
details.faq[open] summary::before { content: "\2212"; }
details.faq p { margin: 0 0 1rem 1.5rem; }

/* Ads (site/assets/ads.js; layout approved 2026-10-09). Inserted only while
   ADS_ENABLED is on, only in the reading sections, never in .tool-layout.
   Plain labeled wrappers, kept unlike the product box: no card, no icons.
   Heights are fixed per screen size so a slot never shifts the page when it
   fills: bands 250px under 768px and 90px from 768px, rail 600px, each plus
   a 20px "Advertisement" label. */
.ad-slot { margin: 2rem auto; text-align: center; }
.prose > .ad-slot { column-span: all; break-inside: avoid; }
.ad-label { margin: 0 0 4px; height: 16px; font-size: .7rem; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ad-box { margin: 0 auto; width: 300px; max-width: 100%; height: 250px; overflow: hidden; }
.ad-preview { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--field-line); color: var(--muted); font-size: .8rem; }
.ad-rail { display: none; }
/* AdSense marks a slot it could not fill; collapse it rather than leave a gap. */
.ad-slot:has(ins[data-ad-status="unfilled"]), .ad-rail:has(ins[data-ad-status="unfilled"]) { display: none !important; }
html:not([data-ads="on"]) .ad-slot, html:not([data-ads="on"]) .ad-rail { display: none !important; }
@media (min-width: 768px) {
  .ad-slot .ad-box { width: 728px; height: 90px; }
}
/* band-2 is for the one-column layout only (ads.js inserts it under 1000px; this covers a resize). */
@media (min-width: 1000px) {
  .prose > .ad-slot[data-slot="band-2"] { display: none; }
}
/* Rail: 1440px and up only, where the page widens to 90rem so the two text
   columns keep their width beside it. Below 1440 the reading layout is the
   same as with ads off. The rail stops before "Related calculators" (ads.js). */
@media (min-width: 1440px) {
  html[data-ads="on"] { --max: 90rem; }
  /* Keyed on data-ads alone (set from <head> before first paint), not on the rail being there,
     so the column is reserved from the start (tech review 2026-10-09 #1: layout shift). */
  html[data-ads="on"] .page-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "nav nav" "prose rail"; column-gap: 3rem; }
  html[data-ads="on"] .page-body > .page-nav { grid-area: nav; }
  html[data-ads="on"] .page-body > .prose { grid-area: prose; }
  html[data-ads="on"] .ad-rail { display: block; grid-area: rail; margin-top: 2rem; }
  .ad-rail-inner { position: sticky; top: 5.5rem; text-align: center; }
  .ad-rail .ad-box { width: 300px; height: 600px; }
}
@media print {
  .ad-slot, .ad-rail { display: none !important; }
}

/* Consent banner (analytics.js): EU/EEA, UK and Swiss visitors only. Fixed to the bottom, so nothing shifts. */
.consent-bar {
  position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 44rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .8rem 1rem; font-size: .95rem;
}
.consent-bar p { margin: 0; flex: 1 1 18rem; }
.consent-actions { display: flex; gap: .5rem; }
.consent-bar button { margin: 0; width: auto; min-height: 44px; padding: .4rem 1.1rem; font-size: .95rem; }
.consent-bar button.quiet { background: var(--surface); color: var(--accent-strong); border: 1.5px solid var(--accent); }
.consent-bar button.quiet:hover { background: var(--accent-soft); }
.consent-reset { width: auto; margin-top: .25rem; min-height: 44px; padding: .4rem 1.1rem; font-size: .95rem; }
@media print { .consent-bar, .consent-reset { display: none !important; } }