/* ==========================================================================
   infohelper.net — site.css
   --------------------------------------------------------------------------
   One file, no build step, no web fonts, no JavaScript needed by any rule.
   Every class the site uses is prefixed  .ih-   Tokens are  --ih-*
   (Classes prefixed .mk- in the mockups annotate the mockup only; they are
   defined inside each mockup file and never ship.)

   The idea: the page is a worked calculation. The result is set large and
   marked with a highlighter; everything below it is the working, set on
   hairlines. One ink, one mark colour, three series hues used only in marks.

   Contents
     1  Tokens (light, dark)          9  Number lockup, trio, answer block
     2  Base and type                10  State grid, count line
     3  Links, buttons, focus        11  Tables: plain, stack, states, grid
     4  Layout                       12  Charts (inline SVG)
     5  Header, menu, language       13  Callouts, worked example, drawing
     6  Breadcrumb                   14  Lists: changed, next, sources
     7  Footer                       15  Home and hub blocks, cards
     8  Sections, prose, "On this    16  Form
        page"                        17  Ad slots
                                     18  Utilities, motion, print
   ========================================================================== */

/* 1. TOKENS ============================================================== */
:root,
.ih-light {
  color-scheme: light;
  --ih-paper: #fcfcfa;      /* page ground */
  --ih-well: #f3f2ed;       /* quiet panels, state grid cells, table header */
  --ih-rule: #dddbd3;       /* hairlines */
  --ih-rule-2: #8d8a80;     /* input borders, chart axes (3.4:1 on paper) */
  --ih-ink: #14161a;        /* text, strong rules, solid buttons  17.6:1 */
  --ih-ink-2: #474b53;      /* secondary text                      8.5:1 */
  --ih-ink-3: #646872;      /* captions, units, labels             5.4:1 (5.0 on well) */
  --ih-mark: #ffdf3d;       /* THE highlight: "this is the answer" */
  --ih-on-mark: #14161a;    /* text on the highlight              13.7:1 */
  --ih-soft: #fff4b8;       /* soft highlight: targeted row, second band in grids */
  /* series hues: marks only, never text. Fuel = hue, everywhere on the site. */
  --ih-gas: #2a78d6;        /* gas (blue flame) */
  --ih-el: #eb6834;         /* resistance electric */
  --ih-hp: #1baf7a;         /* heat pump */
  --ih-gas-tint: #d2e2f3;   /* tile fills; ink text on them is > 13:1 */
  --ih-el-tint: #f9ded2;
  --ih-hp-tint: #cfede0;
  --ih-seq-1: #f3f2ed;      /* one-hue ramp for a magnitude map (hub): low, middle, high. */
  --ih-seq-2: #dddbd3;      /* Ink text stays above 8:1 on all three; the figure is printed */
  --ih-seq-3: #b9b6ab;      /* in every tile, so the shade only repeats it. */
  --ih-bad: #b3261e;        /* form error text only                6.5:1 */
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ih-paper: #131518;
    --ih-well: #1c1f24;
    --ih-rule: #30343b;
    --ih-rule-2: #6b717c;
    --ih-ink: #ecedef;      /* 15.6:1 */
    --ih-ink-2: #b9bdc5;    /*  9.7:1 */
    --ih-ink-3: #989da7;    /*  6.7:1 (6.1 on well) */
    --ih-mark: #f5d547;
    --ih-on-mark: #14161a;  /* 12.5:1 */
    --ih-soft: #3d3512;     /* ink on it 10.4:1 */
    --ih-gas: #3987e5;
    --ih-el: #d95926;
    --ih-hp: #199e70;
    --ih-gas-tint: #1f395a;
    --ih-el-tint: #522b1c;
    --ih-hp-tint: #154134;
    --ih-seq-1: #1c1f24; --ih-seq-2: #30343b; --ih-seq-3: #4a4f58;
    --ih-bad: #ff8a80;
  }
}
/* Forced schemes. The site itself switches by prefers-color-scheme only;
   these two classes exist so a block can be shown in the other scheme
   (components page, screenshots). Keep the values equal to the block above. */
.ih-dark {
  color-scheme: dark;
  --ih-paper: #131518; --ih-well: #1c1f24; --ih-rule: #30343b; --ih-rule-2: #6b717c;
  --ih-ink: #ecedef; --ih-ink-2: #b9bdc5; --ih-ink-3: #989da7;
  --ih-mark: #f5d547; --ih-on-mark: #14161a; --ih-soft: #3d3512;
  --ih-gas: #3987e5; --ih-el: #d95926; --ih-hp: #199e70;
  --ih-gas-tint: #1f395a; --ih-el-tint: #522b1c; --ih-hp-tint: #154134;
  --ih-seq-1: #1c1f24; --ih-seq-2: #30343b; --ih-seq-3: #4a4f58;
  --ih-bad: #ff8a80;
}
.ih-light {
  --ih-paper: #fcfcfa; --ih-well: #f3f2ed; --ih-rule: #dddbd3; --ih-rule-2: #8d8a80;
  --ih-ink: #14161a; --ih-ink-2: #474b53; --ih-ink-3: #646872;
  --ih-mark: #ffdf3d; --ih-on-mark: #14161a; --ih-soft: #fff4b8;
  --ih-gas: #2a78d6; --ih-el: #eb6834; --ih-hp: #1baf7a;
  --ih-gas-tint: #d2e2f3; --ih-el-tint: #f9ded2; --ih-hp-tint: #cfede0;
  --ih-seq-1: #f3f2ed; --ih-seq-2: #dddbd3; --ih-seq-3: #b9b6ab;
  --ih-bad: #b3261e;
}
:root {
  --ih-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  /* spacing: a 4 px scale; only these steps are used */
  --ih-1: .25rem; --ih-2: .5rem; --ih-3: .75rem; --ih-4: 1rem;
  --ih-5: 1.5rem; --ih-6: 2rem; --ih-7: 3rem; --ih-8: 4.5rem;
  --ih-r-mark: 2px;         /* highlights and chart marks: nearly square, like a marker stroke */
  --ih-r: 6px;              /* everything a finger touches: buttons, grid cells, cards, inputs */
  --ih-gutter: 1rem;
  --ih-max: 72.5rem;        /* 1160 px */
  --ih-read: 42rem;         /* reading measure */
}

/* 2. BASE AND TYPE ======================================================= */
.ih-body, .ih-light, .ih-dark { background: var(--ih-paper); color: var(--ih-ink); }
.ih-body {
  margin: 0;
  font: 400 1.0625rem/1.55 var(--ih-font);
  font-variant-numeric: lining-nums;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: break-word;
}
.ih-body *, .ih-body *::before, .ih-body *::after { box-sizing: border-box; }
.ih-body :where(h1, h2, h3, p, ul, ol, dl, dd, figure, table) { margin: 0; padding: 0; }
.ih-body :where(ul, ol) { list-style: none; }
.ih-body :where(svg) { display: block; max-width: 100%; height: auto; }
.ih-body :where([id]) { scroll-margin-top: var(--ih-3); }

.ih-h1 { font-size: clamp(1.75rem, 1.4rem + 1.55vw, 2.5rem); font-weight: 700; line-height: 1.12;
  letter-spacing: -.02em; text-wrap: balance; }
.ih-h2 { font-size: clamp(1.3125rem, 1.2rem + .5vw, 1.625rem); font-weight: 700; line-height: 1.2;
  letter-spacing: -.012em; text-wrap: balance; }
.ih-h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.ih-lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height: 1.5; max-width: var(--ih-read); }
.ih-small { font-size: .875rem; line-height: 1.45; color: var(--ih-ink-2); }
.ih-micro { font-size: .78125rem; line-height: 1.4; color: var(--ih-ink-3); }
.ih-nowrap { white-space: nowrap; }

/* The highlight. Used for one thing only: the answer (the cheapest figure,
   the winning cell, the result of a worked example). Always with bold weight,
   so it never rests on colour alone. */
.ih-mark { background: var(--ih-mark); color: var(--ih-on-mark); font-weight: 700;
  padding: 0 .18em; border-radius: var(--ih-r-mark);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* 3. LINKS, BUTTONS, FOCUS =============================================== */
/* Links are ink with an underline; colour is not the affordance.           */
.ih-body :where(a) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .2em; text-decoration-color: var(--ih-rule-2); }
.ih-body :where(a:hover) { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.ih-body :where(a:active) { background: var(--ih-soft); }
.ih-body :where(a:visited) { text-decoration-style: solid; }
.ih-body :focus-visible { outline: 3px solid var(--ih-ink); outline-offset: 2px; border-radius: 3px;
  box-shadow: 0 0 0 5px var(--ih-mark); }
.ih-body :where(svg a:focus-visible) { outline: none; box-shadow: none; }

.ih-btn { display: inline-flex; align-items: center; gap: var(--ih-2); min-height: 2.75rem;
  padding: 0 var(--ih-4); border: 1px solid var(--ih-ink); border-radius: var(--ih-r);
  background: var(--ih-ink); color: var(--ih-paper); font: 600 1rem/1.2 var(--ih-font);
  text-decoration: none; cursor: pointer; }
.ih-btn:hover { background: var(--ih-ink-2); border-color: var(--ih-ink-2); text-decoration: none; }
.ih-btn:active { transform: translateY(1px); background: var(--ih-ink-2); }
.ih-btn--ghost { background: transparent; color: var(--ih-ink); }
.ih-btn--ghost:hover { background: var(--ih-well); border-color: var(--ih-ink); }
.ih-btn[disabled], .ih-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ih-btn__arrow { font-weight: 400; }

/* 4. LAYOUT ============================================================== */
.ih-wrap { max-width: var(--ih-max); margin-inline: auto; padding-inline: var(--ih-gutter); }
.ih-main { display: block; padding-bottom: var(--ih-8); }
.ih-page { display: block; }
.ih-col { min-width: 0; }
.ih-read > :where(p, ul, ol, .ih-note, .ih-work, h3) { max-width: var(--ih-read); }
@media (min-width: 600px) { :root { --ih-gutter: 1.5rem; } }
@media (min-width: 1100px) {
  /* pair page: "On this page" beside the text, from the first block below the answer */
  .ih-page--side { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); column-gap: 2.5rem;
    align-items: start; }
}

/* 5. HEADER, MENU, LANGUAGE ============================================== */
.ih-header { border-bottom: 1px solid var(--ih-rule); position: relative; }  /* never sticky */
.ih-header__in { display: flex; align-items: center; gap: var(--ih-3); min-height: 3rem; }
/* The wordmark is live text on the highlight: the site's one idea, at its smallest. */
.ih-wordmark { flex: none; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  padding: .3125rem .4375rem; margin-block: .5rem; border-radius: var(--ih-r-mark);
  background: var(--ih-mark); color: var(--ih-on-mark) !important; text-decoration: none !important; }
.ih-wordmark:hover { background: var(--ih-ink); color: var(--ih-paper) !important; }
.ih-nav { display: flex; align-items: stretch; gap: var(--ih-3); margin-left: auto; min-width: 0; }
.ih-nav__link { display: inline-flex; align-items: center; min-height: 3rem; font-size: .875rem; font-weight: 600;
  white-space: nowrap; text-decoration: none; }
.ih-nav__link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.ih-nav__link[aria-current] { box-shadow: inset 0 -3px 0 var(--ih-ink); }
.ih-nav--wide { display: none; }
@media (max-width: 399.98px) {   /* wordmark + two links must share 328 px */
  .ih-header__in, .ih-nav { gap: .625rem; }
  .ih-nav__link { font-size: .8125rem; }
  .ih-wordmark { font-size: 1rem; }
}
@media (min-width: 600px) {
  .ih-header__in { min-height: 3.5rem; gap: var(--ih-5); }
  .ih-nav { gap: var(--ih-5); }
  .ih-nav__link { min-height: 3.5rem; font-size: .9375rem; }
}
/* Five or six topics. Phone: one Menu button and a full-width list (a <details>:
   navigation links only). From 880 px: the topics inline, no button. */
.ih-menu { margin-left: auto; }
.ih-menu > summary { list-style: none; }
.ih-menu > summary::-webkit-details-marker { display: none; }
.ih-menu[open] > summary { background: var(--ih-ink); color: var(--ih-paper); }
.ih-menu__list { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--ih-paper);
  border-bottom: 1px solid var(--ih-ink); padding: var(--ih-2) var(--ih-gutter) var(--ih-4); }
.ih-menu__list a { display: flex; align-items: center; min-height: 2.75rem; border-top: 1px solid var(--ih-rule);
  font-weight: 600; text-decoration: none; }
.ih-menu__list a:first-child { border-top: 0; }
.ih-menu__sep { margin-top: var(--ih-2); border-top: 1px solid var(--ih-ink) !important; font-weight: 400 !important; }
@media (min-width: 880px) {
  .ih-menu { display: none; }
  .ih-nav--wide { display: flex; }
}
/* Language control: nothing for one language; a link for two; a short list for 3 to 5. */
/* On a phone the header cannot hold the wordmark, two links and a language control in one
   line, so "How we calculate" (also in the footer of every page) gives way to the language. */
@media (max-width: 479.98px) { .ih-header--lang .ih-nav__link--aux { display: none; } }
.ih-lang { flex: none; font-size: .875rem; font-weight: 600; position: relative; }
.ih-lang__link, .ih-lang > summary { display: inline-flex; align-items: center; min-height: 2.75rem;
  padding-inline: var(--ih-2); cursor: pointer; }
.ih-lang > summary { list-style: none; border: 1px solid var(--ih-rule-2); border-radius: var(--ih-r); gap: .375rem; }
.ih-lang > summary::-webkit-details-marker { display: none; }
.ih-lang > summary::after { content: ""; width: .4rem; height: .4rem; border: solid currentColor;
  border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.ih-lang[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.ih-lang__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; min-width: 10rem;
  background: var(--ih-paper); border: 1px solid var(--ih-ink); border-radius: var(--ih-r); padding: var(--ih-1); }
.ih-lang__list a, .ih-lang__list span { display: flex; align-items: center; min-height: 2.75rem;
  padding-inline: var(--ih-3); text-decoration: none; border-radius: 4px; }
.ih-lang__list a:hover { background: var(--ih-well); }
.ih-lang__list [aria-current] { font-weight: 800; }

/* 6. BREADCRUMB ========================================================== */
.ih-crumb { font-size: .8125rem; color: var(--ih-ink-2); }
.ih-crumb ol { display: flex; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.ih-crumb li { display: flex; align-items: center; min-height: 2.75rem; }
.ih-crumb li + li::before { content: "\203A"; margin-inline: .5em; color: var(--ih-ink-3); }
.ih-crumb [aria-current] { color: var(--ih-ink-3); overflow: hidden; text-overflow: ellipsis; display: block;
  line-height: 2.75rem; }
.ih-crumb [aria-current]::before { display: inline; }
.ih-crumb a { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* A trail too long for one phone line (the template sets --long from the
   character count): only the parent, as a back link. */
@media (max-width: 479.98px) {
  .ih-crumb--long li { display: none; }
  .ih-crumb--long li:nth-last-child(2) { display: flex; }
  .ih-crumb--long li:nth-last-child(2)::before { content: "\2039"; margin-inline: 0 .4em; }
}

/* 7. FOOTER ============================================================== */
.ih-footer { border-top: 1px solid var(--ih-ink); padding-block: var(--ih-5) var(--ih-6); font-size: .9375rem; }
.ih-footer__in { display: grid; gap: var(--ih-5); }
.ih-footer__h { font-size: .78125rem; font-weight: 600; color: var(--ih-ink-3); margin-bottom: var(--ih-1); }
.ih-footer__links { display: flex; flex-wrap: wrap; column-gap: var(--ih-5); }
.ih-footer__links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ih-footer__say { color: var(--ih-ink-2); max-width: 30rem; }
.ih-footer__name { color: var(--ih-ink-3); font-size: .875rem; margin-top: var(--ih-2); }
@media (min-width: 768px) {
  .ih-footer__in { grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--ih-8); }
  .ih-footer__in > :last-child { justify-self: end; text-align: right; }
}

/* 8. SECTIONS, PROSE, "ON THIS PAGE" ===================================== */
/* Every question block opens with a full-strength ink rule: the ledger line. */
.ih-sec { border-top: 1px solid var(--ih-ink); padding-top: var(--ih-4); margin-top: var(--ih-7); }
.ih-sec > .ih-h2 { margin-bottom: var(--ih-4); max-width: 34rem; }
.ih-sec--first { margin-top: var(--ih-5); }
.ih-prose > * + * { margin-top: var(--ih-4); }
.ih-prose > .ih-h3 { margin-top: var(--ih-5); }
.ih-prose > .ih-h2 { margin-top: var(--ih-6); }
.ih-prose ul, .ih-prose ol { padding-left: 1.2em; }
.ih-prose ul { list-style: square; }
.ih-prose ol { list-style: decimal; }
.ih-prose li + li { margin-top: var(--ih-2); }
.ih-prose li::marker { color: var(--ih-ink-3); }
.ih-stack > * + * { margin-top: var(--ih-4); }

.ih-toc { margin-top: var(--ih-4); border-block: 1px solid var(--ih-rule); font-size: .9375rem; }
.ih-toc > summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem;
  font-weight: 600; cursor: pointer; list-style: none; }
.ih-toc > summary::-webkit-details-marker { display: none; }
.ih-toc > summary::after { content: ""; width: .5rem; height: .5rem; border: solid currentColor;
  border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); margin-right: .25rem; }
.ih-toc[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.ih-toc__list { padding-bottom: var(--ih-2); }
.ih-toc__list a { display: flex; align-items: center; min-height: 2.75rem; border-top: 1px solid var(--ih-rule);
  text-decoration: none; }
.ih-toc__list a:hover { text-decoration: underline; }
@media (min-width: 1100px) {
  .ih-side { margin-top: var(--ih-5); position: sticky; top: var(--ih-4); }
  .ih-side--ads { position: static; }   /* no sticky column once ad slot C is in it */
  .ih-toc { margin-top: 0; border: 0; border-top: 1px solid var(--ih-ink); padding-top: var(--ih-3);
    font-size: .875rem; }
  /* One <details> for both layouts: closed on a phone, forced open here.
     Browsers without ::details-content show the closed line, which still works. */
  .ih-toc::details-content { content-visibility: visible; display: block; height: auto; }
  .ih-toc > summary { pointer-events: none; min-height: 0; font-size: .78125rem; color: var(--ih-ink-3);
    margin-bottom: var(--ih-2); }
  .ih-toc > summary::after { display: none; }
  .ih-toc__list a { min-height: 0; border: 0; padding-block: .3125rem; line-height: 1.3; color: var(--ih-ink-2); }
  .ih-toc__list a:hover { color: var(--ih-ink); }
}

/* 9. NUMBER LOCKUP, TRIO, ANSWER BLOCK =================================== */
/* A number is always three parts: what it is (label, above), the figure with
   its unit at about half size raised to the cap line, and how to read it
   (note, below). Figures are tabular everywhere.                            */
.ih-num { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ih-num__label { order: 1; display: flex; align-items: center; font-size: .78125rem; line-height: 1.25;
  font-weight: 600; color: var(--ih-ink-2); min-height: 2.5em; }
.ih-num__val { order: 2; display: inline-flex; align-items: flex-start; margin-top: var(--ih-1);
  font-size: clamp(2.5rem, 1.9rem + 2.7vw, 3.5rem); font-weight: 700; line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums;
  padding: .04em .1em .06em; margin-left: -.1em; border-radius: var(--ih-r-mark); }
.ih-num__unit { font-size: .46em; font-weight: 700; letter-spacing: 0; margin-top: .12em; margin-left: .06em; }
.ih-num__unit--pre { margin-left: 0; margin-right: .04em; }
.ih-num__unit--word { align-self: flex-end; font-size: .3em; font-weight: 600; margin: 0 0 .32em .35em;
  letter-spacing: 0; white-space: nowrap; }
.ih-num__note { order: 3; margin-top: var(--ih-1); font-size: .78125rem; line-height: 1.3; color: var(--ih-ink-3); }
.ih-num--best .ih-num__val { background: var(--ih-mark); color: var(--ih-on-mark); }
.ih-num--best .ih-num__note { color: var(--ih-ink); font-weight: 600; }
/* long figures (a range, a decimal with a word unit): one step smaller so three still fit 360 px */
.ih-trio--tight .ih-num__val { font-size: clamp(1.75rem, 1.15rem + 2.7vw, 3rem); flex-wrap: wrap; }
.ih-trio--tight .ih-num__unit--word { font-size: .78125rem; margin: 0 0 .5em .3em; }

.ih-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ih-3);
  border-block: 1px solid var(--ih-ink); padding-block: var(--ih-3); }
.ih-trio > .ih-num + .ih-num { border-left: 1px solid var(--ih-rule); padding-left: var(--ih-3); }
@media (min-width: 600px) {
  .ih-trio { column-gap: var(--ih-5); padding-block: var(--ih-4); max-width: 46rem; }
  .ih-trio > .ih-num + .ih-num { padding-left: var(--ih-5); }
  .ih-num__label, .ih-num__note { font-size: .875rem; }
}

/* Series keys: fuel = hue + shape, the same on the first screen, in every
   legend and in every chart. Gas disc, electric square, heat pump triangle;
   a second machine on the same fuel is the same hue, hollow.                */
.ih-key { flex: none; display: inline-block; width: .625rem; height: .625rem; margin-right: .375rem;
  background: var(--ih-gas); border-radius: 50%; }
.ih-key--el { background: var(--ih-el); border-radius: 1px; }
.ih-key--hp { background: var(--ih-hp); border-radius: 0; clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.ih-key--gas2 { background: transparent; border: .1875rem solid var(--ih-gas); }
.ih-key--none { background: transparent; border: 1px solid var(--ih-rule-2); border-radius: 1px; }

.ih-answer { padding-bottom: var(--ih-2); }
.ih-answer .ih-h1 { margin-top: 0; }
.ih-answer__say { margin-top: var(--ih-3); font-size: clamp(1rem, .93rem + .45vw, 1.25rem); line-height: 1.45;
  max-width: 44rem; }
.ih-answer .ih-trio { margin-top: var(--ih-4); }
.ih-dataline { margin-top: var(--ih-3); font-size: .78125rem; line-height: 1.45; color: var(--ih-ink-2);
  max-width: 46rem; }
.ih-dataline b { font-weight: 600; color: var(--ih-ink); }
.ih-jump { margin-top: var(--ih-3); }

/* 10. STATE GRID, COUNT LINE ============================================= */
.ih-count { font-size: 1.0625rem; max-width: var(--ih-read); }
.ih-count b { font-variant-numeric: tabular-nums; }
.ih-count + .ih-count { margin-top: var(--ih-2); color: var(--ih-ink-2); font-size: .9375rem; }
.ih-states { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: var(--ih-4); }
.ih-states a { display: flex; align-items: center; justify-content: center; min-height: 2.75rem;
  background: var(--ih-well); border-radius: var(--ih-r); font-size: .875rem; font-weight: 600;
  letter-spacing: .02em; text-decoration: none; }
.ih-states a:hover { background: var(--ih-ink); color: var(--ih-paper); }
.ih-states a:active { background: var(--ih-mark); color: var(--ih-on-mark); }
@media (min-width: 600px) { .ih-states { grid-template-columns: repeat(13, minmax(0, 1fr)); } }
@media (min-width: 880px) { .ih-states { grid-template-columns: repeat(17, minmax(0, 1fr)); } }

/* 11. TABLES ============================================================= */
.ih-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.ih-t caption { caption-side: top; text-align: left; font-size: .8125rem; line-height: 1.4;
  color: var(--ih-ink-2); padding-bottom: var(--ih-2); }
.ih-t th, .ih-t td { text-align: left; vertical-align: top; font-weight: 400; }
.ih-t thead th { font-size: .78125rem; line-height: 1.25; font-weight: 600; color: var(--ih-ink); vertical-align: bottom; }
.ih-th__basis { display: block; font-weight: 400; color: var(--ih-ink-3); }
.ih-n { text-align: right !important; white-space: nowrap; }
.ih-t thead th.ih-n { white-space: normal; }
.ih-t b, .ih-t strong { font-weight: 700; }
.ih-tblwrap { margin-top: var(--ih-5); }

/* 11a. Plain table: a handful of columns that fit a phone as they are. */
.ih-t--plain th, .ih-t--plain td { padding: .5rem .5rem .5rem 0; border-top: 1px solid var(--ih-rule);
  font-size: .9375rem; line-height: 1.35; }
.ih-t--plain th:last-child, .ih-t--plain td:last-child { padding-right: 0; }
.ih-t--plain thead th { border-top: 0; border-bottom: 1px solid var(--ih-ink); font-size: .78125rem; }
.ih-t--plain tbody th { font-weight: 600; }
.ih-t--plain .ih-t__total > * { border-top: 1px solid var(--ih-ink); font-weight: 700; }
.ih-t--plain { max-width: var(--ih-read); }

/* 11b. Stack table: text-heavy rows ("Beyond running cost"). A table from
   720 px; below that each row is a short block, cells labelled from data-label. */
@media (max-width: 719.98px) {
  .ih-t--stack, .ih-t--stack tbody, .ih-t--stack tr, .ih-t--stack th, .ih-t--stack td { display: block; }
  .ih-t--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ih-t--stack tr { border-top: 1px solid var(--ih-rule); padding-block: var(--ih-3); }
  .ih-t--stack th, .ih-t--stack td { border: 0; padding: 0; }
  .ih-t--stack tbody th { font-weight: 700; margin-bottom: var(--ih-1); }
  .ih-t--stack td { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--ih-3);
    padding-block: .1875rem; }
  .ih-t--stack td::before { content: attr(data-label); font-size: .78125rem; color: var(--ih-ink-3); padding-top: .15em; }
}

/* 11c. States table: one row per state at every width, the same HTML.
   The rows are laid out with CSS grid (so the state sentence can run under
   the cells), which is why the markup sets the ARIA table roles explicitly.

   Cell roles:  th[scope=row]  the state
                .ih-c--k1..k3  the page's three numbers (always visible)
                .ih-c--win     the winner, as a word
                .ih-c--x       the other columns (prices and the rest)
                .ih-c--say     the state sentence (always visible)            */
.ih-t--states { display: block; }
.ih-t--states caption { display: block; }
.ih-t--states thead, .ih-t--states tbody { display: block; }
.ih-t--states tr { display: grid; border-top: 1px solid var(--ih-rule); margin-inline: -.5rem; padding-inline: .5rem; }
.ih-t--states caption { padding-inline: 0; }
.ih-t--states tbody th { font-weight: 700; }
.ih-t--states tbody th a { text-decoration: none; }
.ih-t--states tbody th a:hover { text-decoration: underline; }
.ih-c--say { font-size: .8125rem; line-height: 1.35; color: var(--ih-ink-2); }
.ih-t--states td b { background: var(--ih-mark); color: var(--ih-on-mark); border-radius: var(--ih-r-mark);
  padding: 0 .2em; margin-right: -.2em; }
/* targeted by its anchor */
.ih-t--states tr:target, .ih-t--states tr.ih-row--target { background: var(--ih-soft); box-shadow: inset 3px 0 0 var(--ih-ink); }

@media (max-width: 879.98px) {
  /* compact row: about 84 to 100 px with a two-line sentence */
  .ih-t--states thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ih-t--states tr { grid-template-columns: minmax(0, 1fr) repeat(3, 3.625rem); column-gap: var(--ih-2);
    padding-block: .5rem .5625rem; }
  .ih-t--states tbody th { grid-column: 1; grid-row: 1; font-size: 1rem; line-height: 1.3; align-self: end; }
  /* the whole compact row is the tap target that opens it (far more than 44 px) */
  .ih-t--states tbody tr { position: relative; }
  .ih-t--states tbody th a::after { content: ""; position: absolute; inset: 0; }
  .ih-c--win { grid-column: 1; grid-row: 2; font-size: .78125rem; line-height: 1.3; color: var(--ih-ink-2); }
  .ih-c--win::before { content: attr(data-label) " "; color: var(--ih-ink-3); }
  .ih-c--k1, .ih-c--k2, .ih-c--k3 { grid-row: 1 / span 2; text-align: right !important; font-size: 1rem;
    font-weight: 600 !important; line-height: 1.3; white-space: nowrap; }
  .ih-c--k1 { grid-column: 2; } .ih-c--k2 { grid-column: 3; } .ih-c--k3 { grid-column: 4; }
  .ih-c--k1::before, .ih-c--k2::before, .ih-c--k3::before { content: attr(data-label); display: block;
    font-size: .6875rem; font-weight: 400; color: var(--ih-ink-3); line-height: 1.3; }
  .ih-t--states td[data-unit]::after { content: attr(data-unit); font-weight: 400; color: var(--ih-ink-3);
    font-size: .8em; margin-left: .05em; }
  .ih-c--say { grid-column: 1 / -1; grid-row: 3; margin-top: .25rem; font-size: .78125rem; line-height: 1.3; }
  /* the other columns: closed by default, opened in the targeted row */
  .ih-c--x { display: none; }
  .ih-t--states tr:target .ih-c--x, .ih-t--states tr.ih-row--open .ih-c--x { display: flex; justify-content: space-between; gap: var(--ih-3);
    grid-column: 1 / -1; font-size: .875rem; padding-block: .3125rem; border-top: 1px solid var(--ih-rule-2);
    text-align: right !important; }
  .ih-t--states tr:target .ih-c--x::before, .ih-t--states tr.ih-row--open .ih-c--x::before { content: attr(data-label); text-align: left; color: var(--ih-ink-2);
    white-space: normal; }
  .ih-t--states tr:target .ih-c--say, .ih-t--states tr.ih-row--open .ih-c--say { margin-bottom: var(--ih-2); }
}
@media (min-width: 600px) and (max-width: 879.98px) {
  .ih-t--states tr { grid-template-columns: minmax(0, 1fr) repeat(3, 5.5rem); column-gap: var(--ih-4); }
}
@media (min-width: 880px) {
  .ih-t--states tr { grid-template-columns: var(--ih-cols, minmax(7.5rem, 1.5fr) repeat(9, minmax(0, 1fr)));
    column-gap: var(--ih-3); padding-block: .4375rem .5rem; align-items: baseline; }
  .ih-t--states thead { position: sticky; top: 0; z-index: 2; background: var(--ih-paper);
    border-bottom: 1px solid var(--ih-ink); }
  .ih-t--states thead { margin-inline: -.5rem; }
  .ih-t--states thead tr { border-top: 0; align-items: end; padding-block: var(--ih-2); margin-inline: 0; }
  .ih-t--states tbody tr { scroll-margin-top: 8.5rem; }   /* clear of the sticky column headers */
  .ih-t--states thead th { font-size: .75rem; hyphens: manual; }
  .ih-t--states tbody tr:first-child { border-top: 0; }
  .ih-t--states td, .ih-t--states tbody th { font-size: .9375rem; line-height: 1.4; }
  .ih-c--say { grid-column: 1 / -1; font-size: .8125rem; color: var(--ih-ink-3); margin-top: .0625rem; }
  .ih-c--win { font-weight: 600 !important; white-space: nowrap; }
  .ih-t--states tbody tr:hover { background: var(--ih-well); }
  .ih-t--states tbody tr:target:hover { background: var(--ih-soft); }
}

/* 11d. Grid table ("paper calculator"): one axis down, one across, the
   answer in the cells. Three bands, each marked by weight as well as fill:
     --a  highlight + bold + ink underline    (the good news)
     --b  soft highlight, regular
     --c  no fill, muted figure                                              */
.ih-t--grid { table-layout: fixed; max-width: 38rem; border-top: 1px solid var(--ih-ink); }
.ih-t--grid caption { padding-bottom: var(--ih-3); }
.ih-t--grid th, .ih-t--grid td { text-align: center; vertical-align: middle; padding: 0; height: 2.5rem;
  font-size: .875rem; border: 2px solid var(--ih-paper); }
.ih-t--grid thead th { font-weight: 600; font-size: .8125rem; background: transparent; height: 2.25rem; }
.ih-t--grid tbody th { font-weight: 600; font-size: .8125rem; text-align: right; padding-right: var(--ih-2); width: 3.75rem; }
.ih-t--grid thead th:first-child { width: 3.75rem; }
.ih-t--grid td { background: var(--ih-well); color: var(--ih-ink-3); }
.ih-t--grid .ih-g--a { background: var(--ih-mark); color: var(--ih-on-mark); font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--ih-on-mark); }
.ih-t--grid .ih-g--b { background: var(--ih-soft); color: var(--ih-ink); }
.ih-axis { display: flex; justify-content: space-between; gap: var(--ih-3); margin-top: var(--ih-2);
  font-weight: 600; color: var(--ih-ink); }   /* names the two axes, inside the caption */
@media (min-width: 600px) { .ih-t--grid th, .ih-t--grid td { font-size: .9375rem; height: 2.75rem; } }

/* legend, shared by grids and charts */
.ih-legend { display: flex; flex-wrap: wrap; gap: var(--ih-1) var(--ih-4); margin-top: var(--ih-3);
  font-size: .8125rem; line-height: 1.4; color: var(--ih-ink-2); }
.ih-legend li { display: flex; align-items: baseline; }
.ih-legend li > :first-child { align-self: center; }
.ih-legend b { color: var(--ih-ink); font-weight: 700; margin-right: .3em; }
.ih-swatch { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem;
  height: 1.125rem; margin-right: .4rem; background: var(--ih-well); color: var(--ih-ink-3);
  font-size: .6875rem; font-variant-numeric: tabular-nums; border-radius: 1px; }
.ih-swatch--a { background: var(--ih-mark); color: var(--ih-on-mark); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--ih-on-mark); }
.ih-swatch--b { background: var(--ih-soft); color: var(--ih-ink); }

/* 12. CHARTS (inline SVG generated from data) ============================ */
.ih-chart { margin-top: var(--ih-5); }
.ih-chart figcaption { font-size: .8125rem; line-height: 1.4; color: var(--ih-ink-2); margin-top: var(--ih-2);
  max-width: var(--ih-read); }
.ih-chart__title { font-size: .9375rem; font-weight: 700; margin-bottom: var(--ih-2); }
.ih-svg { width: 100%; font-family: var(--ih-font); font-variant-numeric: tabular-nums lining-nums; }
.ih-svg text { fill: var(--ih-ink); }
.ih-svg .ih-x-2 { fill: var(--ih-ink-2); }
.ih-svg .ih-x-3 { fill: var(--ih-ink-3); }
.ih-svg .ih-x-b { font-weight: 700; }
.ih-svg .ih-grid { stroke: var(--ih-rule); stroke-width: 1; }
.ih-svg .ih-axisline { stroke: var(--ih-rule-2); stroke-width: 1; }
.ih-svg .ih-range { stroke: var(--ih-rule-2); stroke-width: 2; stroke-linecap: round; }
.ih-s-gas { fill: var(--ih-gas); }
.ih-s-el { fill: var(--ih-el); }
.ih-s-hp { fill: var(--ih-hp); }
.ih-s-gas2 { fill: var(--ih-paper); stroke: var(--ih-gas); stroke-width: 2.5; }
.ih-ring { stroke: var(--ih-paper); stroke-width: 2; paint-order: stroke; }
.ih-s-mark { fill: var(--ih-mark); }
.ih-s-well { fill: var(--ih-well); }
.ih-s-ink { fill: var(--ih-ink); }
/* tile map */
.ih-tile--gas { fill: var(--ih-gas-tint); }
.ih-tile--el { fill: var(--ih-el-tint); }
.ih-tile--hp { fill: var(--ih-hp-tint); }
.ih-tile--q1 { fill: var(--ih-seq-1); } .ih-tile--q2 { fill: var(--ih-seq-2); } .ih-tile--q3 { fill: var(--ih-seq-3); }
.ih-map a { text-decoration: none; }
.ih-map a:hover .ih-tile, .ih-map a:focus-visible .ih-tile { stroke: var(--ih-ink); stroke-width: 2; }
.ih-map a:focus-visible { outline: none; }
.ih-map__code { font-size: 10.5px; font-weight: 700; text-anchor: middle; }
.ih-map__cat { font-size: 9.5px; text-anchor: middle; fill: var(--ih-ink-2) !important; }
.ih-chart--map { max-width: 33rem; }
/* dot strip and bars */
.ih-chart--strip, .ih-chart--bars { max-width: 40rem; }
.ih-svg .ih-lab { font-size: 12px; }
.ih-svg .ih-tick { font-size: 11px; fill: var(--ih-ink-3); }
.ih-svg .ih-val { font-size: 12px; font-weight: 600; }

/* 13. CALLOUTS, WORKED EXAMPLE, DRAWING ================================== */
.ih-note { border-left: 3px solid var(--ih-ink); background: var(--ih-well); padding: var(--ih-3) var(--ih-4);
  font-size: .9375rem; line-height: 1.5; border-radius: 0 var(--ih-r) var(--ih-r) 0; }
.ih-note > * + * { margin-top: var(--ih-2); }
.ih-note__h { font-weight: 700; }
.ih-note--quiet { background: transparent; border-left-color: var(--ih-rule-2); border-radius: 0;
  color: var(--ih-ink-2); padding-block: var(--ih-1); }

.ih-work { border: 1px solid var(--ih-rule); border-radius: var(--ih-r); padding: var(--ih-4); }
.ih-work__h { font-size: .9375rem; font-weight: 700; margin-bottom: var(--ih-1); }
.ih-work__given { font-size: .875rem; color: var(--ih-ink-2); margin-bottom: var(--ih-3); }
.ih-work .ih-t--plain th, .ih-work .ih-t--plain td { font-size: .875rem; }
.ih-works { display: grid; gap: var(--ih-4); }
@media (min-width: 768px) { .ih-works { grid-template-columns: 1fr 1fr; max-width: 56rem; } }

.ih-draw { display: grid; gap: var(--ih-4); margin-top: var(--ih-4); max-width: 44rem; }
.ih-draw__one { border: 1px solid var(--ih-rule); border-radius: var(--ih-r); padding: var(--ih-4); }
.ih-draw__one figcaption { margin-top: var(--ih-2); font-size: .875rem; line-height: 1.4; color: var(--ih-ink-2); }
.ih-draw__one figcaption b { display: block; color: var(--ih-ink); font-size: .9375rem; }
.ih-draw svg { width: 100%; color: var(--ih-ink); }
.ih-draw .ih-d-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ih-draw .ih-d-thin { fill: none; stroke: var(--ih-rule-2); stroke-width: 1.25; stroke-linecap: round; }
.ih-draw .ih-d-fill { fill: currentColor; }
.ih-draw .ih-d-well { fill: var(--ih-well); stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ih-draw .ih-d-mark { fill: var(--ih-mark); stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ih-draw text { font: 600 11px var(--ih-font); fill: var(--ih-ink-2); }
@media (min-width: 600px) { .ih-draw { grid-template-columns: 1fr 1fr; } }

/* 14. LISTS: CHANGED, NEXT, SOURCES, DOWNLOAD ============================ */
.ih-changed li { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); column-gap: var(--ih-3);
  padding-block: var(--ih-2); border-top: 1px solid var(--ih-rule); font-size: .9375rem; max-width: var(--ih-read); }
.ih-changed li:first-child { border-top: 0; padding-top: 0; }
.ih-changed time { color: var(--ih-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ih-sources { counter-reset: src; max-width: var(--ih-read); }
.ih-sources li { counter-increment: src; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr);
  padding-block: var(--ih-3); border-top: 1px solid var(--ih-rule); font-size: .9375rem; line-height: 1.45; }
.ih-sources li:first-child { border-top: 0; padding-top: 0; }
.ih-sources li::before { content: counter(src); color: var(--ih-ink-3); font-variant-numeric: tabular-nums; }
.ih-sources__what { display: block; color: var(--ih-ink-2); font-size: .875rem; }

.ih-next { display: grid; gap: 0; max-width: 46rem; }
.ih-next a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ih-4); align-items: center;
  padding-block: var(--ih-3); border-top: 1px solid var(--ih-rule); text-decoration: none; min-height: 2.75rem; }
.ih-next li:first-child a { border-top: 0; padding-top: 0; }
.ih-next__name { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .2em; text-decoration-color: var(--ih-rule-2); }
.ih-next a:hover .ih-next__name { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.ih-next__say { display: block; font-size: .9375rem; color: var(--ih-ink-2); margin-top: .125rem; }
.ih-next__arrow { font-size: 1.25rem; color: var(--ih-ink-3); }

.ih-dl { display: flex; flex-wrap: wrap; gap: var(--ih-2); }
.ih-dl__note { flex-basis: 100%; font-size: .8125rem; color: var(--ih-ink-2); }

/* 15. HOME AND HUB BLOCKS, CARDS ========================================= */
.ih-hero { padding-block: var(--ih-5) var(--ih-2); }
.ih-hero .ih-lead { margin-top: var(--ih-3); }
.ih-label { font-size: .78125rem; font-weight: 600; color: var(--ih-ink-3); }
.ih-kind { display: inline-block; font-size: .75rem; font-weight: 600; line-height: 1; padding: .25rem .4375rem;
  border: 1px solid var(--ih-rule-2); border-radius: 999px; color: var(--ih-ink-2); }

/* topic: one wide link-row per topic */
.ih-topic { display: grid; gap: var(--ih-1) var(--ih-4); padding: var(--ih-4); background: var(--ih-well);
  border-radius: var(--ih-r); }
.ih-topic__name { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.ih-topic__say { color: var(--ih-ink-2); font-size: .9375rem; }
.ih-topic__meta { font-size: .8125rem; color: var(--ih-ink-3); }
.ih-topics { display: grid; gap: var(--ih-3); }
@media (min-width: 768px) { .ih-topics--many { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* finding card: kind, name, the answer sentence with live numbers, the period */
.ih-cards { display: grid; gap: var(--ih-4); }
.ih-card { display: flex; flex-direction: column; gap: var(--ih-2); padding: var(--ih-4);
  border: 1px solid var(--ih-rule); border-radius: var(--ih-r); }
.ih-card__name { font-size: 1.1875rem; font-weight: 700; line-height: 1.25; }
.ih-card__say { font-size: 1rem; line-height: 1.5; }
.ih-card__say b { font-variant-numeric: tabular-nums; }
.ih-card__meta { margin-top: auto; padding-top: var(--ih-2); font-size: .8125rem; color: var(--ih-ink-3); }
.ih-card .ih-trio { border: 0; padding: 0; margin-top: var(--ih-1); column-gap: var(--ih-2); }
.ih-card .ih-trio > .ih-num + .ih-num { padding-left: var(--ih-2); }
.ih-card .ih-num__val { font-size: 1.75rem; }
.ih-card .ih-num__label { min-height: 0; font-size: .75rem; }
.ih-card .ih-num__note { display: none; }
@media (min-width: 768px) { .ih-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* three short lines: how the numbers are made */
.ih-steps { display: grid; gap: var(--ih-4); counter-reset: step; }
.ih-steps li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); }
.ih-steps li::before { content: counter(step); font-size: 1.5rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.ih-steps b { display: block; }
.ih-steps span { color: var(--ih-ink-2); font-size: .9375rem; }
@media (min-width: 768px) { .ih-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ih-6); } }

/* hub: one finding per page, as a paragraph with its link */
.ih-finds > li { padding-block: var(--ih-4); border-top: 1px solid var(--ih-rule); max-width: 46rem; }
.ih-finds > li:first-child { border-top: 0; padding-top: 0; }
.ih-finds__link { font-weight: 700; }
.ih-finds p { margin-top: var(--ih-1); }

/* error pages */
.ih-err { padding-block: var(--ih-6) var(--ih-7); max-width: var(--ih-read); }
.ih-err__code { font-size: .875rem; font-weight: 700; display: inline-block; margin-bottom: var(--ih-3); }
.ih-err p { margin-top: var(--ih-3); }
.ih-err__links { display: flex; flex-wrap: wrap; gap: var(--ih-2); margin-top: var(--ih-5); }

/* 16. FORM (the one form on the site: "report a mistake" on /about) ====== */
.ih-form { display: grid; gap: var(--ih-4); max-width: 34rem; padding: var(--ih-4); border: 1px solid var(--ih-rule);
  border-radius: var(--ih-r); }
.ih-field { display: grid; gap: var(--ih-1); }
.ih-field label { font-weight: 600; font-size: .9375rem; }
.ih-field__hint { font-size: .8125rem; color: var(--ih-ink-2); }
.ih-input { width: 100%; min-height: 2.75rem; padding: .5625rem .75rem; border: 1px solid var(--ih-rule-2);
  border-radius: var(--ih-r); background: var(--ih-paper); color: var(--ih-ink); font: inherit; font-size: 1rem; }
textarea.ih-input { min-height: 8rem; resize: vertical; line-height: 1.45; }
.ih-input:hover { border-color: var(--ih-ink); }
.ih-input:focus-visible { border-color: var(--ih-ink); }
.ih-input[aria-invalid="true"] { border-color: var(--ih-bad); border-width: 2px; }
.ih-field__err { font-size: .875rem; font-weight: 600; color: var(--ih-bad); }
.ih-form__ok { border-left: 3px solid var(--ih-ink); background: var(--ih-soft); padding: var(--ih-3) var(--ih-4);
  font-weight: 600; }
.ih-hp-trap { position: absolute; left: -9999px; }   /* honeypot */

/* 17. AD SLOTS =========================================================== */
/* Off at launch: a slot without --on has no box and no height. When AdSense
   is switched on the template adds --on and the height is reserved at once,
   so nothing moves when the ad arrives. Nothing is drawn in the slot.       */
.ih-ad { display: none; }
.ih-ad--on { display: block; margin-block: var(--ih-6); min-height: 280px; overflow: hidden; }   /* A, B: 300 x 250 + air */
@media (min-width: 768px) { .ih-ad--on { min-height: 250px; max-width: 46rem; } }                /* A, B: up to 728 wide */
.ih-ad--c.ih-ad--on { display: none; }
@media (min-width: 1100px) { .ih-ad--c.ih-ad--on { display: block; min-height: 600px; margin-block: var(--ih-5) 0; } }  /* 160 x 600 */

/* 18. UTILITIES, MOTION, PRINT ========================================== */
.ih-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ih-skip { position: absolute; left: var(--ih-2); top: -4rem; z-index: 10; }
.ih-skip:focus { top: var(--ih-2); }
.ih-mt-0 { margin-top: 0 !important; }
.ih-mt { margin-top: var(--ih-4); }
.ih-mt-l { margin-top: var(--ih-6); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .ih-body * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  .ih-key, .ih-svg, .ih-mark, .ih-swatch { forced-color-adjust: none; }
  .ih-num--best .ih-num__val { outline: 2px solid; }
}

@media print {
  :root { --ih-paper: #fff; --ih-well: #fff; --ih-ink: #000; --ih-ink-2: #222; --ih-ink-3: #444;
    --ih-rule: #999; --ih-rule-2: #666; --ih-soft: #fff; --ih-mark: #fff; --ih-on-mark: #000; }
  .ih-body { font-size: 10.5pt; }
  .ih-header .ih-nav, .ih-menu, .ih-lang, .ih-states, .ih-ad, .ih-toc, .ih-side, .ih-next-sec, .ih-jump,
  .ih-footer__links, .ih-skip, .ih-crumb { display: none !important; }
  .ih-sec { break-inside: auto; margin-top: 18pt; }
  .ih-h2 { break-after: avoid; }
  /* tables print as tables: the wide layout, never the phone row */
  .ih-t--states thead { position: static !important; width: auto; height: auto; clip-path: none; overflow: visible;
    border-bottom: 1px solid #000; }
  .ih-t--states tr { grid-template-columns: var(--ih-cols, minmax(7rem, 1.5fr) repeat(9, minmax(0, 1fr))) !important;
    column-gap: 6pt; padding-block: 3pt; break-inside: avoid; }
  .ih-t--states th, .ih-t--states td { grid-column: auto !important; grid-row: auto !important; font-size: 8.5pt !important;
    display: block !important; text-align: left; }
  .ih-t--states td::before, .ih-t--states td::after { content: none !important; }
  .ih-t--states .ih-c--say { grid-column: 1 / -1 !important; font-size: 7.5pt !important; }
  .ih-t--states td b, .ih-mark, .ih-num--best .ih-num__val { background: none; text-decoration: underline; }
  .ih-t--stack thead { position: static; width: auto; height: auto; clip-path: none; }
  .ih-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  .ih-print-only { display: block !important; }
  .ih-footer { border-top: 1px solid #000; }
}
.ih-print-only { display: none; }   /* the page URL and "Updated" line, printed under the H1 */

/* 19. ADDITIONS MADE WHILE BUILDING THE PAGES ================================
   Everything above this line is design/site.css unchanged. Each rule below
   answers a case the mockups did not have; docs/BUILD-NOTES.md lists why.  */

/* 19a. On a phone the chart sits below the all-states table (owner-accepted
   designer recommendation): the reader reaches the rows 370 px sooner.     */
.ih-bystate { display: flex; flex-direction: column; }
@media (max-width: 879.98px) { .ih-bystate > .ih-chart { order: 2; } }

/* 19b. The yearly figure in small type under a monthly one (water-heater
   table). Generated content, so a paste into a spreadsheet stays clean.    */
@media (min-width: 880px) {
  .ih-t--states td[data-sub]::after { content: attr(data-sub); display: block; font-size: .6875rem; line-height: 1.3;
    font-weight: 400; color: var(--ih-ink-3); white-space: nowrap; }
}
@media (max-width: 879.98px) {
  .ih-t--states tr:target .ih-c--x[data-sub]::after { content: none; }
}

/* 19c. Defect in section 6: ".ih-crumb [aria-current] { display: block }" outranks ".ih-crumb--long li
   { display: none }", so the long trail kept the current page beside the back link on a phone.        */
@media (max-width: 479.98px) { .ih-crumb--long li[aria-current] { display: none; } }

/* 19d. A folded part of a method section (hub, "How the prices are calculated"): the heading is the
   summary, the text opens under it. Nothing a reader needs for the answer is ever inside one.          */
.ih-fold { border-top: 1px solid var(--ih-rule); }
.ih-fold:last-of-type { border-bottom: 1px solid var(--ih-rule); }
.ih-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ih-3);
  min-height: 2.75rem; padding-block: var(--ih-2); cursor: pointer; list-style: none; }
.ih-fold > summary::-webkit-details-marker { display: none; }
.ih-fold > summary .ih-h3 { margin: 0; }
.ih-fold > summary::after { content: ""; flex: none; width: .5rem; height: .5rem; border: solid currentColor;
  border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.ih-fold[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.ih-fold[open] > :last-child { margin-bottom: var(--ih-4); }
.ih-prose > .ih-fold + .ih-h3 { margin-top: var(--ih-5); }
@media print { .ih-fold > summary::after { display: none; } }