/* GridComfort — single stylesheet. Tokens per SPEC.md §4.1; everything below
   uses tokens only, so dark mode is the token swap and nothing else. */

:root {
  /* color */
  --ink:        #1A1D21;
  --ink-2:      #4B5563;
  --ink-3:      #8A94A3;
  --line:       #DDE2E8;
  --paper:      #FFFFFF;
  --surface:    #F5F7F6;
  --surface-2:  #EAEFEC;
  --brand:      #0F4C5C;
  --brand-ink:  #0B3A46;
  --brand-soft: #E3EEF1;
  --accent:     #D9741F;
  --accent-soft:#FBEEDF;
  --danger:     #B42318;
  --danger-soft:#FCEBE9;
  --warn:       #9A6700;
  --warn-soft:  #FFF4D6;
  --ok:         #1E7F4F;
  --ok-soft:    #E3F3EA;

  /* type */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-0: 0.8125rem;
  --fs-1: 0.9375rem;
  --fs-2: 1.0625rem;
  --fs-3: 1.25rem;
  --fs-4: 1.5rem;
  --fs-5: 2rem;
  --fs-6: 2.5rem;
  --lh-body: 1.6;
  --lh-tight: 1.2;

  /* space (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* layout */
  --measure: 72ch;
  --wide: 1040px;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(20,30,40,.06), 0 2px 8px rgba(20,30,40,.05);

  /* ads: reserve no height until ads go live, then flip this variable */
  --ad-reserve: 0px;
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#E6E9EC; --ink-2:#B3BAC4; --ink-3:#7C8590; --line:#2A3139; --paper:#121518; --surface:#1A1F24; --surface-2:#222930;
          --brand:#7FC4D3; --brand-ink:#A9DBE5; --brand-soft:#15303A; --accent:#F0A05A; --accent-soft:#3A2A18;
          --danger:#F08A80; --danger-soft:#3A1A17; --warn:#E6C15A; --warn-soft:#3A3012; --ok:#7FD1A2; --ok-soft:#153A27; }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
}
h1, h2, h3, h4 { line-height: var(--lh-tight); text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--fs-5); margin: 0 0 var(--s-3); }
h2 { font-size: var(--fs-4); margin: var(--s-7) 0 var(--s-4); }
h3 { font-size: var(--fs-3); margin: var(--s-6) 0 var(--s-3); }
@media (min-width: 700px) { h1 { font-size: var(--fs-6); } }
p, ul, ol { margin: 0 0 var(--s-4); }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-ink); }
strong { color: var(--ink); }
blockquote {
  margin: var(--s-4) 0; padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--brand); background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-1);
}
pre {
  font-family: var(--font-mono); font-size: var(--fs-1);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4); overflow-x: auto; margin: 0 0 var(--s-4);
}
code.code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--brand-soft); color: var(--brand-ink);
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}
pre code { background: none; color: inherit; padding: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--paper); color: var(--brand); padding: var(--s-2) var(--s-4);
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- header */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header__inner {
  max-width: calc(var(--wide) + 320px); margin: 0 auto; padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
}
.wordmark {
  font-weight: 700; font-size: var(--fs-3); letter-spacing: -0.01em;
  color: var(--brand); text-decoration: none;
}
.nav-toggle {
  margin-left: auto; min-height: 44px; min-width: 44px;
  font: inherit; font-size: var(--fs-1); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-2) var(--s-3); cursor: pointer;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.site-nav a {
  display: inline-block; padding: var(--s-2) var(--s-3); min-height: 44px;
  text-decoration: none; color: var(--ink-2); font-size: var(--fs-1); border-radius: var(--radius);
}
.site-nav a:hover { color: var(--brand); background: var(--surface); }
.site-nav a[aria-current="true"] { color: var(--brand); font-weight: 600; background: var(--brand-soft); }
.nav-toggle { display: none; }
@media (max-width: 699px) {
  .js .nav-toggle:not([hidden]) { display: block; }
  .js .site-nav { display: none; width: 100%; }
  .js .site-nav.open { display: block; }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav a { display: block; padding: var(--s-3) var(--s-2); border-top: 1px solid var(--line); border-radius: 0; }
}

/* ---------------------------------------------------------------- layout */
.layout {
  max-width: calc(var(--wide) + 320px); margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-8);
}
main { max-width: var(--measure); }
.t-tool main, .t-section main { max-width: var(--wide); }
.rail { display: none; }
@media (min-width: 1100px) {
  .layout--rail { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-7); }
  .rail { display: block; }
  .rail > * { margin-bottom: var(--s-5); }
  .rail .toc { position: sticky; top: var(--s-5); }
}

/* ---------------------------------------------------------------- crumbs */
.crumbs { font-size: var(--fs-0); color: var(--ink-2); margin-bottom: var(--s-4); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.crumbs li + li::before { content: "/"; margin: 0 var(--s-1); color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ---------------------------------------------------------------- page head */
.page-head { margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.page-meta { font-size: var(--fs-0); color: var(--ink-2); margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; }
.page-meta__date { color: var(--ink-2); }
.page-meta__sep { color: var(--ink-3); }
.lede { font-size: var(--fs-2); color: var(--ink-2); max-width: var(--measure); }

/* ---------------------------------------------------------------- chips */
.chip {
  display: inline-block; font-size: var(--fs-0); font-weight: 600; line-height: 1.3;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.chip--stop { color: var(--danger); background: var(--danger-soft); }
.chip--warn, .chip--diy-partial { color: var(--warn); background: var(--warn-soft); }
.chip--info { color: var(--brand); background: var(--brand-soft); }
.chip--diy { color: var(--ok); background: var(--ok-soft); }
.chip--pro { color: var(--danger); background: var(--danger-soft); }

/* ---------------------------------------------------------------- callouts */
.callout {
  border-radius: var(--radius); padding: var(--s-4); margin: 0 0 var(--s-5);
  border: 1px solid var(--line); border-left-width: 4px; background: var(--surface);
}
.callout--danger { border-left-color: var(--danger); background: var(--danger-soft); }
.callout--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout--note { border-left-color: var(--brand); background: var(--brand-soft); }
.callout__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.callout--danger .callout__head { color: var(--danger); }
.callout--warn .callout__head { color: var(--warn); }
.callout--note .callout__head { color: var(--brand); }
.callout__title {
  font-size: var(--fs-0); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.callout__body { font-size: var(--fs-1); }
.callout__body p:last-child { margin-bottom: 0; }
.icon { flex: none; }

/* ---------------------------------------------------------------- quick answer */
.quick-answer {
  border: 1px solid var(--brand); border-radius: var(--radius);
  padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5); background: var(--paper);
  box-shadow: var(--shadow);
}
.quick-answer p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- tables */
.table-scroll {
  position: relative; overflow-x: auto; margin: 0 0 var(--s-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    linear-gradient(to left, var(--paper), transparent 24px) 100% 0 / 24px 100% no-repeat local,
    var(--paper);
}
table { border-collapse: collapse; width: 100%; font-size: var(--fs-1); }
caption { text-align: left; padding: var(--s-2) var(--s-3); font-size: var(--fs-0); color: var(--ink-2); }
th, td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  background: var(--surface); font-size: var(--fs-0); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
tbody tr:nth-child(even) td { background: var(--surface); }
tbody tr:last-child td { border-bottom: 0; }
td { font-variant-numeric: tabular-nums; }
@media (min-width: 700px) {
  thead th { position: sticky; top: 0; }
}
.block-code-table td:first-child { font-family: var(--font-mono); white-space: nowrap; }
.vaw-chart thead th { white-space: normal; }
.vaw-chart tbody th { white-space: nowrap; }
.block-parts td:nth-child(2) { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- key facts (§6.9.1) */
.keyfacts { margin: 0; }
.keyfacts th[scope="row"] {
  width: 34%; white-space: nowrap; color: var(--ink-2); font-weight: 600;
  background: var(--surface);
}
.keyfacts td { font-variant-numeric: normal; }
.keyfacts__note { color: var(--ink-2); font-size: var(--fs-0); }

/* ---------------------------------------------------------------- figures (§6.10) */
.diagram { margin: 0 0 var(--s-5); }
.diagram img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.diagram figcaption {
  margin-top: var(--s-2); font-size: var(--fs-0); color: var(--ink-2);
}

/* ---------------------------------------------------------------- diagnostic */
.diagnostic > ol { list-style: none; counter-reset: step; margin: 0 0 var(--s-5); padding: 0; }
.diagnostic > ol > li {
  counter-increment: step; position: relative;
  padding: 0 0 var(--s-5) var(--s-7); margin: 0;
}
.diagnostic > ol > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--paper);
  font-size: var(--fs-1); font-weight: 700;
}
.diagnostic > ol > li::after {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: var(--s-2);
  width: 2px; background: var(--line);
}
.diagnostic > ol > li:last-child { padding-bottom: 0; }
.diagnostic > ol > li:last-child::after { display: none; }
.diagnostic ul {
  list-style: none; margin: var(--s-2) 0 0; padding: 0;
}
.diagnostic ul li {
  position: relative; padding: var(--s-2) var(--s-3); margin-bottom: var(--s-2);
  background: var(--surface); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-1);
}
@media (prefers-color-scheme: dark) {
  .diagnostic > ol > li::before { color: var(--paper); }
}

/* ---------------------------------------------------------------- call a pro / lead */
.call-pro {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5);
}
.call-pro ul { margin-bottom: 0; }
.lead-block {
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5);
}
.lead-block__title { margin-top: 0; font-size: var(--fs-3); }
.lead-block ul { font-size: var(--fs-1); }
.lead-block p:last-child, .lead-block ul:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--s-2) var(--s-5);
  font: inherit; font-size: var(--fs-1); font-weight: 600; text-decoration: none;
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
}
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { filter: brightness(0.94); color: #fff; }
@media (prefers-color-scheme: dark) { .btn--accent { color: #1A1D21; } .btn--accent:hover { color: #1A1D21; } }

/* ---------------------------------------------------------------- affiliate */
.affiliate-cards { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .affiliate-cards { grid-template-columns: 1fr 1fr; } }
.affiliate-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3) var(--s-4);
  background: var(--surface); display: flex; flex-direction: column; gap: var(--s-2);
}
.affiliate-card__label { font-size: var(--fs-1); font-weight: 600; }
/* The label is the link now — there is no separate "check price" line to click,
   so the whole part name is the target and reads as one. */
a.affiliate-card__label { color: var(--brand); text-decoration: none; }
a.affiliate-card__label:hover { text-decoration: underline; }
.affiliate-card__note { font-size: var(--fs-0); color: var(--ink-2); font-weight: 400; }
/* Where there is no direct link, the part name stays plain text and the search
   is a separate, smaller link — so the name is never mistaken for a listing. */
.affiliate-card__find { font-size: var(--fs-0); align-self: start; }
/* The disclosure sits above the list, not under it: it is a condition of using
   the links at all, so it is read before them rather than after. */
.affiliate__disclosure { font-size: var(--fs-0); color: var(--ink-2); margin-bottom: var(--s-3); }

/* ---------------------------------------------------------------- cards */
.cards { margin: 0 0 var(--s-5); }
.cards__heading { font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin-bottom: var(--s-2); }
.cards ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .cards ul { grid-template-columns: 1fr 1fr; } }
.card {
  display: flex; flex-direction: column; gap: var(--s-1); height: 100%;
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3) var(--s-4);
  background: var(--paper); text-decoration: none; box-shadow: var(--shadow);
}
.card:hover { border-color: var(--brand); }
.card__title { font-size: var(--fs-1); font-weight: 600; color: var(--brand); }
.card__sub { font-size: var(--fs-0); color: var(--ink-2); }
.card .chip { align-self: flex-start; }

/* ---------------------------------------------------------------- tool cards */
.tool-card {
  display: flex; flex-direction: column; gap: var(--s-1);
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent-soft); padding: var(--s-4) var(--s-5);
  margin: 0 0 var(--s-5); text-decoration: none; box-shadow: var(--shadow);
}
.tool-card:hover { filter: brightness(0.98); }
.tool-card__kicker { font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.tool-card__title { font-size: var(--fs-2); font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: var(--s-2); }
.tool-card__sub { font-size: var(--fs-1); color: var(--ink-2); }
.tools-grid { display: grid; gap: var(--s-4); margin: 0 0 var(--s-5); }
@media (min-width: 700px) { .tools-grid { grid-template-columns: 1fr 1fr; } .tools-grid .tool-card { margin: 0; } }

/* ---------------------------------------------------------------- calculator mount */
.calc {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: var(--s-5); margin: 0 0 var(--s-3);
}
.calc-noscript { margin: 0; color: var(--ink-2); font-size: var(--fs-1); }
.data-updated { font-size: var(--fs-0); color: var(--ink-2); margin-bottom: var(--s-5); }

/* ---------------------------------------------------------------- calculator UI */
/* AdSense Auto ads can insert full-width units between calculator fields. A
   fieldset's default min-inline-size is min-content and a grid item's is auto,
   so either one widened to fit such a unit and pushed the page sideways (the
   dehumidifier calculator at 390-430px). min-inline-size: 0 keeps them at their
   container's width. This neither hides nor clips ads: keeping in-page ads out
   of the calculator is the AdSense "Excluded areas" setting (SPEC §7.5). */
.calc fieldset, .calc-grid > *, .calc-controls > * { min-inline-size: 0; }
.calc-form { font-size: var(--fs-1); }
/* One explicit minmax(0, 1fr) column below 900px. The implicit `auto` track sized
   itself to the widest child's min-content, so a select with long option text
   (#ec-appliance, 69 characters) pushed the column, and the page, to ~640px. */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (min-width: 900px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .calc-panel { position: sticky; top: var(--s-5); }
}
.calc-presets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.preset-btn {
  font: inherit; font-size: var(--fs-1); font-weight: 600; color: var(--brand);
  background: var(--brand-soft); border: 1px solid var(--brand); border-radius: var(--radius);
  min-height: 44px; padding: var(--s-2) var(--s-4); cursor: pointer;
}
.preset-btn:hover { background: var(--surface-2); }
.calc-search { margin-bottom: var(--s-4); }
.calc-search input, .calc-field input[type="number"], .calc-field select, .watt-edit input {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-2) var(--s-3); min-height: 40px;
}
.calc-search input { width: 100%; max-width: 32ch; }
.calc-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-bottom: var(--s-4); }
.calc-control { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-3); }
.calc-control legend { font-weight: 600; padding: 0 var(--s-1); }
.calc-control > label { display: block; font-weight: 600; margin-bottom: var(--s-2); }
.range-wrap { display: flex; align-items: center; gap: var(--s-3); }
.range-wrap input[type="range"] { flex: 1; accent-color: var(--accent); min-height: 44px; }
.range-wrap output { font-variant-numeric: tabular-nums; min-width: 4ch; font-weight: 600; }
.radio-item { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: var(--s-4); }
.radio-item--block { display: flex; margin: 0 0 var(--s-2); }
.radio-item input { accent-color: var(--brand); width: 18px; height: 18px; }
.calc-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.calc-field label { font-weight: 600; }
.calc-field input[type="number"] { width: 9ch; }
.calc-field select { max-width: 100%; }
.calc-field--check input { accent-color: var(--brand); width: 18px; height: 18px; }
.calc-hint { flex-basis: 100%; margin: 0 0 var(--s-2); font-size: var(--fs-0); color: var(--ink-2); }
.calc-form > .calc-hint { margin-top: var(--s-5); }
/* The volts/amps/watts form is drawn by script just after first paint, high on
   the page, so without a reservation everything under it jumps (CLS 0.94 on a
   phone). The heights are the shortest the form renders in each band, so the
   box only ever grows, and only below the first screen. Without JS nothing is
   reserved and the noscript note stands alone. */
.js .calc[data-calc="volts-amps-watts"] { min-height: 1100px; }
@media (min-width: 412px) { .js .calc[data-calc="volts-amps-watts"] { min-height: 780px; } }
@media (min-width: 900px) { .js .calc[data-calc="volts-amps-watts"] { min-height: 490px; } }
.calc-field[hidden] { display: none; }
.calc-cat { border: 0; padding: 0; margin: 0; }
.calc-cat__h { display: block; width: 100%; font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); padding: var(--s-5) 0 var(--s-2); }
.calc-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--line);
}
.calc-row input[type="checkbox"] { accent-color: var(--brand); width: 18px; height: 18px; flex: none; }
.calc-row__name { flex: 1 1 14ch; min-width: 12ch; }
.calc-row__watts { font-size: var(--fs-0); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qty-stepper { display: inline-flex; align-items: center; gap: 2px; }
.qty-btn {
  font: inherit; width: 28px; height: 28px; line-height: 1; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.qty-num { width: 5ch; text-align: center; font: inherit; border: 1px solid var(--line); border-radius: var(--radius); min-height: 28px; background: var(--paper); color: var(--ink); }
.watt-edit-btn {
  font: inherit; width: 28px; height: 28px; cursor: pointer; line-height: 1;
  color: var(--ink-2); background: none; border: 1px solid var(--line); border-radius: var(--radius);
}
.watt-edit { flex-basis: 100%; padding: var(--s-2) 0 var(--s-1) var(--s-6); font-size: var(--fs-0); }
.watt-edit label { color: var(--ink-2); }
.watt-edit input { width: 9ch; min-height: 32px; padding: var(--s-1) var(--s-2); }
.calc-panel { background: var(--paper); border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow); }
.calc-panel__h { margin: 0 0 var(--s-3); font-size: var(--fs-3); }
.result-rows { margin: 0 0 var(--s-3); }
.result-row { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.result-row dt { color: var(--ink-2); }
.result-row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.result-row--big dd { color: var(--accent); font-size: var(--fs-2); }
.result-row--stack { flex-direction: column; gap: var(--s-1); }
.result-row--stack dd { text-align: left; }
.result-note { font-size: var(--fs-0); color: var(--ink-2); }
.result-flag {
  font-size: var(--fs-0); background: var(--warn-soft); color: var(--warn);
  border-radius: var(--radius); padding: var(--s-2) var(--s-3);
}
.calc-empty { color: var(--ink-2); margin: 0; }
.calc-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
@media print { .calc-list, .calc-presets, .calc-search, .calc-actions { display: none !important; } }

/* ---------------------------------------------------------------- compatibility finders (§8.7) */
/* Controls stack on top and results run full width: a finder answers with
   record cards, which don't fit the 320px result rail the calculators use. */
.finder-controls { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
@media (min-width: 700px) { .finder-controls { grid-template-columns: 1fr 1fr; } }
.finder-field { display: block; margin: 0; }
.finder-field label { display: block; font-weight: 600; margin-bottom: var(--s-2); }
.finder-field select, .finder-field input[type="text"] {
  width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3);
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.finder-field select:disabled { color: var(--ink-2); background: var(--surface-2); }
.finder-hint { display: block; margin-top: var(--s-2); font-size: var(--fs-0); color: var(--ink-2); }
.finder-results { margin-top: var(--s-5); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.finder-results__h { margin: 0 0 var(--s-3); font-size: var(--fs-3); }
.finder-results__sub { margin: var(--s-5) 0 var(--s-3); font-size: var(--fs-2); color: var(--ink-2); }
.finder-cards { display: grid; gap: var(--s-4); margin: 0 0 var(--s-4); }
@media (min-width: 900px) { .finder-cards { grid-template-columns: 1fr 1fr; } }
.finder-card {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--ok); border-radius: var(--radius); padding: var(--s-4);
}
.finder-card--stop { border-left-color: var(--danger); }
.finder-card--guide { border-left-color: var(--warn); }
.finder-card__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-2); font-size: var(--fs-2);
}
.finder-card__part { font-family: var(--font-mono); }
.finder-card__sub { margin: 0 0 var(--s-3); font-size: var(--fs-1); color: var(--ink-2); }
.finder-badge {
  font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: var(--radius); padding: 2px var(--s-2); white-space: nowrap;
}
.finder-badge--exact, .finder-badge--spec { color: var(--ok); background: var(--ok-soft); }
.finder-badge--family { color: var(--brand); background: var(--brand-soft); }
.finder-badge--stop { color: var(--danger); background: var(--danger-soft); }
.finder-badge--guide { color: var(--warn); background: var(--warn-soft); }
.finder-specs { margin: 0 0 var(--s-3); font-size: var(--fs-1); }
.finder-specs > div { display: grid; gap: 0 var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 480px) { .finder-specs > div { grid-template-columns: 13ch minmax(0, 1fr); } }
.finder-specs dt { color: var(--ink-2); }
.finder-specs dd { margin: 0; }
.finder-card__src { margin: 0 0 var(--s-3); font-size: var(--fs-0); color: var(--ink-2); }
.finder-ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.finder-cta {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-0); font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: var(--radius);
  padding: var(--s-2) var(--s-3); text-decoration: none;
}
.finder-cta:hover { text-decoration: underline; }
.finder-empty {
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--surface); border-left: 3px solid var(--ink-2); border-radius: var(--radius);
}
.finder-sources { margin: 0 0 var(--s-4); font-size: var(--fs-1); }
.finder-sources__h { margin: 0 0 var(--s-2); font-weight: 600; }
.finder-sources ul { margin: 0; }
.finder-note { font-size: var(--fs-0); color: var(--ink-2); margin: 0; }
@media print { .finder-controls, .finder-ctas { display: none !important; } }

/* ---------------------------------------------------------------- embed snippet */
.embed-snippet { margin: 0 0 var(--s-5); }
.embed-snippet pre { margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------- faq / sources */
.faq h3 { margin-top: var(--s-5); }
.sources ol { font-size: var(--fs-1); color: var(--ink-2); }
.disclaimer { font-size: var(--fs-0); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.page-footer { margin-top: var(--s-7); }
.notfound-list { font-size: var(--fs-2); }
.notfound-list li { margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------- toc */
.toc { font-size: var(--fs-1); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-4); background: var(--paper); }
.toc__heading { font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin: 0 0 var(--s-2); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: var(--s-2); }
.toc a { text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--brand); text-decoration: underline; }
/* Inline TOC (§6.9): long pages only, and only below the rail breakpoint. */
.toc--inline { margin: 0 0 var(--s-5); background: var(--surface); }
@media (min-width: 1100px) { .toc--inline { display: none; } }

/* ---------------------------------------------------------------- ads */
.ad-slot { min-height: var(--ad-reserve); }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: var(--s-6) var(--s-4); margin-top: var(--s-8); }
.site-footer__cols {
  max-width: calc(var(--wide) + 320px); margin: 0 auto var(--s-5);
  display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.site-footer__heading { font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin-bottom: var(--s-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-1); }
.site-footer li { margin-bottom: var(--s-1); }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }
.site-footer__meta { max-width: calc(var(--wide) + 320px); margin: 0 auto var(--s-1); font-size: var(--fs-0); color: var(--ink-2); }
/* Follow row: one line above the small print, on the same measure as it.
   The icons are inline SVG at a fixed 16px so they reserve their space before
   any paint — nothing here loads, so nothing here can shift the layout. */
.site-footer__social { max-width: calc(var(--wide) + 320px); margin: 0 auto var(--s-4); }
.site-footer__social ul { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.site-footer__social li { margin-bottom: 0; }
.site-footer__social a { display: inline-flex; align-items: center; gap: 0.4em; }
.social__icon { flex: none; fill: currentColor; }

/* ---------------------------------------------------------------- copy-link anchors */
.h-anchor {
  margin-left: var(--s-2); font-size: var(--fs-1); text-decoration: none;
  color: var(--ink-3); opacity: 0; transition: opacity 0.15s;
}
h2:hover .h-anchor, h2:focus-within .h-anchor { opacity: 1; }
.copy-btn {
  font: inherit; font-size: var(--fs-0); color: var(--brand);
  background: var(--brand-soft); border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 44px; padding: var(--s-2) var(--s-4); cursor: pointer;
}

/* ---------------------------------------------------------------- print */
@media print {
  .site-header, .site-footer, .rail, .ad-slot, .nav-toggle, .crumbs,
  .lead-block, .affiliate, .tool-card, .embed-snippet, .skip-link { display: none !important; }
  body { font-size: 11pt; }
  a { color: inherit; text-decoration: none; }
  /* Reference tables (the battery and oil charts) print whole: no scroller
     clipping the right-hand columns, the header row repeated on each sheet,
     and no row split across a page break. */
  .table-scroll { overflow: visible; border: 0; background: none; }
  table { font-size: 9pt; }
  thead { display: table-header-group; }
  thead th { position: static; white-space: normal; }
  .block-code-table td:first-child { white-space: normal; }
  tr { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------------------------------------------------------------- fuel and runtime tools (§8.8) */
/* Both tools reuse the finder controls; these rules cover only what they add —
   number inputs, the mode radios, the hour chips, and the result block. */
.finder-input {
  width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3);
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.fuel-form fieldset { margin: 0; padding: 0; border: 0; }
.fuel-form legend { padding: 0; font-weight: 600; margin-bottom: var(--s-2); }
.fuel-radio { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; }
.fuel-radio input { width: 1.1em; height: 1.1em; }
.fuel-chip {
  min-height: 44px; margin: var(--s-2) var(--s-2) 0 0; padding: var(--s-2) var(--s-3);
  font: inherit; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.fuel-chip:hover { background: var(--paper); }
.fuel-result__headline { margin: 0 0 var(--s-2); font-size: var(--fs-3); }
.fuel-result__detail { margin: 0 0 var(--s-2); font-size: var(--fs-1); }
.fuel-result__note { margin: 0 0 var(--s-2); font-size: var(--fs-0); color: var(--ink-2); }
/* An invalid input is answered beside the form, not with a silent zero. */
.fuel-result__error {
  margin: 0; padding: var(--s-3); font-size: var(--fs-1);
  border-left: 3px solid var(--danger); background: var(--surface-2); border-radius: var(--radius);
}

/* ---------------------------------------------------------------- wattage chart (§8.9) */
.wattage-chart-table__group th {
  background: var(--surface-2); font-size: var(--fs-0); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-2);
}
/* "not published" is a statement about the source, so it reads as a note rather
   than as a value in the same column as the numbers. */
.wattage-chart-table .not-published { color: var(--ink-2); font-style: italic; }
/* Printing the page should give the same table as the PDF: full width, no
   horizontal scroller, and rows that do not split across a page break. */
@media print {
  .wattage-chart-table .table-scroll { overflow: visible; max-width: none; }
  .wattage-chart-table table { width: 100%; font-size: 9pt; }
  .wattage-chart-table tr { page-break-inside: avoid; break-inside: avoid; }
  .wattage-chart-table thead { display: table-header-group; }
}