/* ===========================================================================
   ICI production visual foundation
   ---------------------------------------------------------------------------
   The single authoritative token system for the redesign. Promoted unchanged
   from the accepted v13 prototype stylesheet, which the founder approved as the
   presentation specification.

   Rules this file exists to keep:
     - one token system, not a per-page patch ledger
     - shared components, not page-specific corrections
     - no release-stamped override tail
     - no !important outside two documented exceptions, enforced by
       scripts/gate-css-important.mjs:
         1. prefers-reduced-motion: reduce — must defeat author animation and
            transition durations, which is the whole point of the preference
         2. @media print — must defeat screen-only display rules
       Both are the standard, unavoidable uses. Any third occurrence fails the build.

   Contrast corrections carried in from v13 browser verification:
     - .colophon gains its dark ground here rather than in one page's <style>,
       which is why eleven pages previously rendered footer text at 1.71:1
     - --rule-control gives field borders 3:1 against their surroundings, as
       WCAG 1.4.11 requires of a boundary that identifies a control
   =========================================================================== */

/* ==========================================================================
   Infrastructure Condition Index — visual prototype system
   Standalone. Not applied to any production page. Not stamped, not packaged.

   Built on the consolidated token block accepted in the token-merge changeset,
   restated here as functional roles rather than as an accumulated palette.

   One structural device carries meaning: the evidence edge. A left edge on a
   record says how that record is known — documented, stated, or not known.
   Nothing else in this system is outlined. Separation is done with surface
   tint and rules, so when an edge appears it means something.
   ========================================================================== */

/* ---------- Typefaces. Self-hosted, SIL OFL 1.1. No runtime network call. -- */

@font-face {
  font-family: "Inter Tight Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens, by the job they do ------------------------------------ */

:root {
  /* Ground. Three surfaces, no more. Paper is the page, surface is a raised
     record, wash is a section that needs separating without a border. */
  --paper:        #F7F9FA;
  --surface:      #FFFFFF;
  --wash:         #EFF4F6;

  /* Ink. Navy is authority and headings; body is the reading colour; muted is
     supporting fact. All three measure above 6:1 on paper. */
  --ink:          #0A2A42;
  --body:         #1B3242;
  --muted:        #48606E;

  /* Action. One interactive colour, everywhere, always meaning the same thing. */
  --action:       #00607A;
  --action-deep:  #004A5E;

  /* Evidence. These are the only colours allowed to describe a record, and they
     describe how it is known — never how good the building is. */
  --ev-documented: #1A5E46;
  --ev-stated:     #7A4A07;
  --ev-none:       #3C5563;

  /* Brand colour, sampled from the ICI mark so the site and the logo cannot drift.
     The mark authorises five colours; they are given jobs here rather than used
     decoratively. Ember is the mark's orange and was barely used before. */
  --logo-navy:    #02355A;
  --logo-teal:    #006F8D;
  --logo-mist:    #C3D2D9;
  --logo-slate:   #608090;   /* the mark's grey-blue. Fills only: 4.21:1 */
  --logo-slate-text: #54748A; /* text-safe counterpart, 4.95:1 on white */
  --ember:        #FD8516;   /* the mark's own orange. Large fills only: 2.46:1, never text
                                 and never a bar or edge that carries meaning. */
  --ember-bar:    #E0730A;   /* the meaning-carrying variant, 3.17:1, for edges and marks */
  --ember-ink:    #A34700;   /* the text-safe counterpart, 6.1:1 on white */
  --ember-wash:   #FEF4EA;

  /* Attention. Reserved. Never used for decoration and never for a result. */
  --attention:    #A34700;
  --attention-bg: #FDF4EA;

  /* Section tints. Enough colour to tell one part of the page from the next
     without a border, drawn from the mark rather than invented. */
  --tint-teal:    #EAF3F6;
  --tint-sand:    #FBF6EF;

  /* Rules. Two weights. The heavier one opens a major section. */
  --rule:         #DCE5E9;
  --rule-strong:  #0A2A42;

  --radius:       10px;
  --radius-control: 8px;

  /* One shadow. Used only where something genuinely floats over content. */
  --lift: 0 6px 20px rgba(10, 42, 66, 0.14);

  --font-display: "Inter Tight Variable", "Inter Tight", system-ui, sans-serif;
  --font-body:    "Inter Variable", "Inter", system-ui, sans-serif;

  --measure:      68ch;
  --gutter:       clamp(1.25rem, 4vw, 4rem);
  --rhythm:       clamp(3.5rem, 7vw, 7rem);

  --dur:          180ms;
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Type scale ----------------------------------------------------
   Display sizes are set in Inter Tight at tight leading and a slight negative
   tracking; body stays in Inter at normal tracking. The jump from h1 to body is
   deliberately large, because hierarchy is what makes a standard readable. */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.4em;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.6rem + 3.2vw, 4rem); font-weight: 680; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.4rem); font-weight: 640; }
h3 { font-size: clamp(1.1875rem, 1.1rem + 0.45vw, 1.5rem); font-weight: 620; line-height: 1.2; }
h4 { font-size: 1.0625rem; font-weight: 620; line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--action); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--action-deep); }

.lede {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--body);
  max-width: 58ch;
}
.fine { font-size: 0.875rem; color: var(--muted); line-height: 1.5; max-width: 72ch; }
.figure { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Focus. One treatment, visible on every surface. ---------------- */

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}
.btn:focus-visible, .field:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- Skip link ------------------------------------------------------
   Corrected. Previously this measured 1.63:1 because it was rendered as faint
   text on the page surface even while off-screen. It is now off-screen with no
   colour of its own, and on focus becomes a solid ink panel with white text at
   14.76:1. It is legible in every state it can actually be seen in. */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-control) 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--action);
  outline-offset: -3px;
}

/* ---------- Layout --------------------------------------------------------- */

.shell { width: min(76rem, 100% - var(--gutter) * 2); margin-inline: auto; }
.shell-wide { width: min(86rem, 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--rhythm); }
.section-wash { background: var(--wash); }

/* A section opens with a heavy rule. This is the only heavy rule in the system,
   so it reliably means "a new part of the document starts here". */
.section-open { border-top: 2px solid var(--rule-strong); padding-top: 2.25rem; }

/* ---------- Masthead ------------------------------------------------------- */

.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
}
.masthead-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.brand {
  font-family: var(--font-display);
  font-weight: 680; font-size: 1.0625rem; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; line-height: 1.15; margin-right: auto;
}
.brand span { display: block; font-size: 0.75rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.nav-links { display: flex; gap: 1.75rem; }
.nav-links a { color: var(--body); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.nav-links a:hover { color: var(--action); text-decoration: underline; }
@media (max-width: 62rem) { .nav-links { display: none; } }

/* ---------- Controls ------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; font-family: var(--font-body);
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-primary { background: var(--action); color: #FFFFFF; }
.btn-primary:hover { background: var(--action-deep); color: #FFFFFF; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--wash); color: var(--ink); }
.btn-quiet { background: transparent; color: var(--action); padding-inline: 0.25rem; }
.btn-lg { padding: 1rem 1.75rem; font-size: 1.0625rem; }

.field {
  font: inherit; font-family: var(--font-body);
  padding: 0.8rem 0.9rem;
  border: 1px solid #B9C7CE;
  border-radius: var(--radius-control);
  background: var(--surface); color: var(--body);
  width: 100%;
}
.field::placeholder { color: #6C818C; }
label { font-weight: 600; color: var(--ink); display: block; margin-bottom: 0.35rem; }

/* ---------- The evidence edge ---------------------------------------------
   The one place a border carries information. Weight and style say how a
   record is known. Documented is a solid green edge, stated a solid amber
   edge, not-known a dashed neutral edge. Never a colour alone: each row also
   carries the words. */

.record {
  background: var(--surface);
  border-radius: var(--radius);
  border-left: 4px solid var(--ev-none);
  padding: 1.1rem 1.25rem;
}
.record[data-evidence="documented"] { border-left-color: var(--ev-documented); }
.record[data-evidence="stated"]     { border-left-color: var(--ev-stated); }
.record[data-evidence="unknown"]    { border-left-style: dashed; border-left-color: var(--ev-none); }

.ev-label { font-size: 0.8125rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }
.ev-documented { color: var(--ev-documented); }
.ev-stated     { color: var(--ev-stated); }   /* "Best-known answer" — 7.47:1 on white */
.ev-none       { color: var(--ev-none); }

/* ---------- Data rows ------------------------------------------------------ */

.rows { display: grid; gap: 0.625rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.row-grid { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem 1.5rem; align-items: baseline; }
.row-name { font-family: var(--font-display); font-weight: 620; font-size: 1.0625rem; color: var(--ink); }
.row-meta { font-size: 0.875rem; color: var(--muted); }
.row-result { text-align: right; }
.row-score { font-family: var(--font-display); font-size: 1.75rem; font-weight: 660; color: var(--ink); line-height: 1; }
.row-band { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.row-none { font-size: 0.9375rem; font-weight: 600; color: var(--ev-none); }

/* ---------- Definition list, used instead of card grids for reference content */

.deflist { margin: 1.5rem 0 0; }
.deflist > div {
  display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: 0.5rem 2.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.deflist > div:last-child { border-bottom: 1px solid var(--rule); }
.deflist dt { font-family: var(--font-display); font-weight: 620; font-size: 1.0625rem; color: var(--ink); }
.deflist dd { margin: 0; color: var(--body); }
@media (max-width: 48rem) { .deflist > div { grid-template-columns: 1fr; gap: 0.25rem; } }

/* ---------- Panels --------------------------------------------------------- */

.panel { background: var(--surface); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); }
.panel-quiet { background: var(--wash); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); }
.panel-note {
  background: var(--attention-bg);
  border-left: 4px solid var(--attention);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  color: var(--body);
}
.panel-note p:last-child { margin-bottom: 0; }

/* ---------- Print ---------------------------------------------------------- */

@media print {
  body { background: #FFFFFF; font-size: 10.5pt; }
  .masthead, .skip-link, .no-print { display: none !important; }
  .panel, .record { break-inside: avoid; }
}


/* ==========================================================================
   v2 — brand colour, imagery and motion.
   Added after founder review: the structure held, the warmth was missing.
   ========================================================================== */

/* ---------- Logo ----------------------------------------------------------- */

.brand-mark { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; margin-right: auto; }
.brand-mark img { height: 2.4rem; width: auto; display: block; }
.brand-mark .brand-sub { font-size: 0.75rem; color: var(--muted); display: block; }
@media (max-width: 30rem) { .brand-mark img { height: 2rem; } }

/* The mark's own ring, reused as a section marker. It is the one decorative
   borrow in the system, and it only ever appears once per page. */
.mark-rule { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.mark-rule i { width: 0.5rem; height: 0.5rem; border-radius: 2px; display: block; }
.mark-rule i:nth-child(1) { background: var(--ember-bar); }
.mark-rule i:nth-child(2) { background: var(--logo-teal); }
.mark-rule i:nth-child(3) { background: var(--logo-slate); }
.mark-rule i:nth-child(4) { background: var(--logo-mist); }

/* ---------- Imagery -------------------------------------------------------- */

figure.shot { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--wash); }
figure.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure.shot figcaption { font-size: 0.8125rem; color: var(--muted); padding: 0.6rem 0.1rem 0; }

.hero-photo { border-radius: var(--radius); overflow: hidden; position: relative; }
.hero-photo img { display: block; width: 100%; height: clamp(14rem, 34vw, 22rem); object-fit: cover; }

/* Photography sits under content only where a legible plate carries the text,
   never as a wash behind body copy. */
.photo-plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(2, 53, 90, 0.92) 0%, rgba(2, 53, 90, 0.72) 55%, rgba(2, 53, 90, 0) 100%);
  color: #FFFFFF; padding: 2.5rem 1.25rem 1rem;
}
.photo-plate p { margin: 0; font-size: 0.875rem; color: #E4EDF2; max-width: 46ch; }
.photo-plate strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; color: #FFFFFF; }

/* ---------- Colour-carrying sections --------------------------------------- */

.section-tint { background: var(--tint-teal); }
.section-sand { background: var(--tint-sand); }

/* A tool entry keyed by colour to the kind of thing it is. The bar is the only
   colour, and each tool also carries its name, so colour is never alone. */
.tool { position: relative; overflow: hidden; }
.tool::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--logo-teal); }
.tool[data-kind="almanac"]::before   { background: var(--logo-teal); }
.tool[data-kind="seasonal"]::before  { background: var(--ember-bar); }
.tool[data-kind="retrofit"]::before  { background: var(--ev-documented); }
.tool[data-kind="equipment"]::before { background: var(--logo-slate); }
/* The negative margin that used to sit here belonged to an older card that carried 1.5rem of
   padding, and the photo had to pull back out of it to reach the card edge. That card is gone:
   the photo now sits in its own grid cell (media row at narrow widths) or flush at the top of a
   padding-free card. The margin survived both rewrites because neither reset it, so on narrow
   screens the photo bled 1.5rem into the title column and painted over the first letter of
   every tool name, and on wide screens it pushed 24px of the image outside the card where
   `.tool { overflow: hidden }` quietly cropped it. */
.tool-photo { border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.tool-photo img { display: block; width: 100%; height: 9rem; object-fit: cover; }

/* ---------- Motion ---------------------------------------------------------
   Two moments only, both answering something: the page arriving, and the
   profile assembling row by row so the document reads as being built rather
   than pasted. Nothing loops, nothing moves on hover, nothing floats. */

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes widen { from { transform: scaleX(0); } to { transform: none; } }

.rise { animation: rise 520ms var(--ease) both; }
.rise-1 { animation-delay: 80ms; }
.rise-2 { animation-delay: 160ms; }
.rise-3 { animation-delay: 240ms; }
.rise-4 { animation-delay: 320ms; }
.rise-5 { animation-delay: 400ms; }

.gapindex-bar i { transform-origin: left; animation: widen 900ms var(--ease) 350ms both; }

@media (prefers-reduced-motion: reduce) {
  .rise, .gapindex-bar i { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Condition band accents ----------------------------------------
   A restrained progression inside the mark's own palette, teal through slate to
   ember. Deliberately not a traffic light. The band name always appears with it. */

.row-band { color: var(--muted); }
.record[data-band="excellent"] .row-score { color: var(--logo-teal); }
.record[data-band="fair"] .row-score { color: var(--logo-slate-text); }
.record[data-band="fair"] .row-band { color: var(--muted); }


/* ==========================================================================
   Alignment corrections.
   Inputs, selects and buttons were each sizing themselves from their own
   padding and line-height, so a field and the button beside it disagreed by a
   few pixels and a select sat lower than the input above it. One control height
   governs all of them, and rows that pair controls align on that height.
   ========================================================================== */

:root { --control-h: 3rem; }

.field, select.field, .btn {
  min-height: var(--control-h);
  line-height: 1.2;
}
.btn { padding-block: 0; }
.btn-lg { min-height: 3.35rem; }

/* A label plus its control is one block, so two of them side by side line up on
   both the label baseline and the control top. */
.controls > div, .search-row > div, .filters > div { display: flex; flex-direction: column; }
.controls > div > .field, .search-row > div > .field, .filters > div > .field { margin-top: auto; }

/* Three-column page layouts: every column starts at the same line, rather than
   each one starting wherever its first element happens to fall. */
.check-grid > *, .tool-grid > *, .pair > * { align-self: start; }
.check-grid > nav { padding-top: 0.35rem; }

/* Nothing may push the page sideways. */
html, body { overflow-x: hidden; }
img, svg, table, pre { max-width: 100%; }

/* ---------------------------------------------------------------------------
   Colophon (global footer)

   This lived only in the homepage's own <style>, so pages that used the markup
   without that block rendered pale footer text on the light page background at
   1.71:1. Defining it here means every page that carries .colophon gets the dark
   ground the text was designed against.
   --------------------------------------------------------------------------- */
.colophon { background: var(--ink); color: #D6E3EA; padding-block: 3rem 2rem; margin-top: var(--rhythm); }
.colophon a { color: #FFFFFF; }
.colophon h2 { font-size: 0.9375rem; color: #FFFFFF; margin-bottom: 0.6rem; }
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.9375rem; }
.colophon .fine { color: #AFC4D0; max-width: 70ch; }
.colophon-grid { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .colophon-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------------------------------------------------------------------------
   Control boundaries

   A field's border is the only thing that says "you can type here", so it is a
   boundary under WCAG 1.4.11 and needs 3:1 against what surrounds it, not the
   1.64:1 the decorative rule colour gave. --rule stays as-is for dividers, which
   are decorative and carry no such requirement.
   --------------------------------------------------------------------------- */
:root { --rule-control: #6B7F8B; }
.field,
input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
input[type="number"], input[type="password"], select, textarea {
  border: 1px solid var(--rule-control);
}

.colophon-brand { font-family: var(--font-display); font-weight: 620; color: #FFFFFF;
  font-size: 1.0625rem; margin-bottom: 0.4rem; }
.colophon-group h2 { font-size: 0.9375rem; color: #FFFFFF; margin-bottom: 0.6rem; }

/* ===========================================================================
   Homepage composition (v13)

   Sizes here are deliberately larger than the previous production scale. The
   converted captures read as a desktop page shrunk to 390px, so the scale is
   fluid rather than fixed, and the mobile end of each clamp is set from what is
   comfortable to read on a phone rather than from what fits.
   =========================================================================== */

/* --- reduced navigation ------------------------------------------------- */
.masthead-inner { gap: clamp(1rem, 3vw, 2.5rem); }
.nav-links { display: none; gap: clamp(1rem, 2vw, 1.9rem); font-size: 1rem; font-weight: 600; }
@media (min-width: 64rem) { .nav-links { display: flex; } .nav-toggle { display: none; } }
.nav-links a { color: var(--body); text-decoration: none; }
.nav-links a:hover { color: var(--ink); text-decoration: underline; }
.nav-toggle { font: inherit; font-size: 1rem; font-weight: 600; background: var(--wash);
  color: var(--ink); border: 1px solid var(--rule-control); border-radius: var(--radius-control);
  padding: 0.55rem 0.9rem; cursor: pointer; }
.nav-menu { background: var(--paper); border-top: 1px solid var(--rule); }
.nav-menu-inner { display: grid; gap: 0.15rem; padding-block: 1.25rem 2rem; }
.nav-menu-inner a { display: block; padding: 0.7rem 0; font-size: 1.0625rem; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--rule); }
.nav-menu-h { font-family: var(--font-display); font-weight: 660; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin: 1.25rem 0 0.25rem; }
.nav-menu-inner .nav-menu-cta { border-bottom: 0; margin-top: 1.25rem; text-align: center; }

/* --- hero --------------------------------------------------------------- */
.hero { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 64rem) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.hero-eyebrow { font-family: var(--font-display); font-weight: 660; font-size: 0.875rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); margin-bottom: 0.75rem; }
.hero h1 { font-size: clamp(2.5rem, 1.9rem + 3.2vw, 4.25rem); line-height: 1.02;
  letter-spacing: -0.02em; margin-bottom: 1rem; }
.hero-sub { font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem); line-height: 1.5;
  color: var(--body); max-width: 40ch; margin-bottom: 1.75rem; }
.hero-sides { display: grid; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 34rem) { .hero-sides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-side { border-left: 3px solid var(--action); padding-left: 1rem; }
.hero-side-k { font-family: var(--font-display); font-weight: 660; color: var(--ink);
  font-size: 1.0625rem; margin-bottom: 0.3rem; }
.hero-side-v { font-size: 1rem; line-height: 1.5; color: var(--body); margin: 0; }
.hero-photo { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; filter: saturate(1.05) contrast(1.06); }
@media (max-width: 64rem) { .hero-photo img { aspect-ratio: 16 / 10; } }
.hero-photo .photo-plate { position: absolute; inset: auto 0 0 0; margin: 0;
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 1.5rem);
  background: linear-gradient(to top, rgba(2,53,90,0.95) 0%, rgba(2,53,90,0.86) 58%, rgba(2,53,90,0) 100%); }
.hero-photo .photo-plate p { margin: 0; color: #FFFFFF; font-family: var(--font-display);
  font-weight: 560; font-size: clamp(1rem, 0.94rem + 0.35vw, 1.1875rem); line-height: 1.4;
  max-width: 44ch; text-wrap: balance; }

/* --- Almanac preview ---------------------------------------------------- */
.alm-preview { background: var(--surface); border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.75rem); margin-bottom: 1.5rem; }
.hero-map-label { font-family: var(--font-display); font-weight: 660; color: var(--ink);
  font-size: 1.0625rem; margin-bottom: 0.9rem; }
.hero-map-svg { display: block; width: 100%; height: auto; background: var(--wash);
  border-radius: 10px; }
.hero-bound { stroke: #FFFFFF; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.hero-bound-ca { fill: #1F7D96; }
.hero-bound-us { fill: #0A4A63; }
.hero-map-note { font-size: 0.9375rem; color: var(--muted); margin: 0.9rem 0 0; }
.alm-key { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
  margin: 0.9rem 0 0; padding: 0; font-size: 0.9375rem; color: var(--body); }
.alm-key li { display: flex; align-items: center; gap: 0.45rem; }
.alm-swatch { width: 0.9rem; height: 0.9rem; border-radius: 3px; display: inline-block; }
.alm-swatch-ca { background: #1F7D96; }
.alm-swatch-us { background: #0A4A63; }

/* --- reading size ------------------------------------------------------- */
.ici-lede { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--body); }
.ici-card p, .tool-card p { font-size: 1rem; line-height: 1.55; }
.ici-card h3, .tool-card h3 { font-size: 1.125rem; }
.home-lookup { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; margin-top: 1rem; }
.home-lookup label { display: block; font-weight: 600; color: var(--ink); font-size: 1rem;
  margin-bottom: 0.35rem; }
.home-lookup input { font-size: 1.0625rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-control);
  min-width: 12rem; }
#home-lookup-msg { font-size: 0.9375rem; line-height: 1.55; max-width: 62ch; }

/* --- footer hierarchy --------------------------------------------------- */
.colophon-grid { display: grid; gap: 1.25rem clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 52rem) { .colophon-grid { grid-template-columns: 1.3fr repeat(3, 1fr); align-items: start; } }
.colophon-brand { font-size: 1.125rem; }
.colophon-lede { font-size: 1rem; line-height: 1.55; color: #D6E3EA; max-width: 34ch; }
.colophon-details > summary { cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; align-items: center; padding: 0.85rem 0;
  border-bottom: 1px solid rgba(214,227,234,0.22); }
.colophon-details > summary::-webkit-details-marker { display: none; }
.colophon-details > summary::after { content: "+"; color: #FFFFFF; font-weight: 700; }
.colophon-details[open] > summary::after { content: "\2212"; }
.colophon-details h2 { display: inline; font-size: 1rem; }
.colophon-details ul { padding: 0.6rem 0 1rem; }
.colophon-details a { font-size: 1rem; }
.colophon-note { font-size: 0.9375rem; line-height: 1.6; color: #AFC4D0; max-width: 78ch;
  margin-top: 1.5rem; }
.colophon-note a { color: #FFFFFF; }
/* On a phone the groups collapse, so the footer is scannable instead of one long list. */
@media (max-width: 52rem) { .colophon-details:not([data-keep-open]) { } .colophon-grid { gap: 0; } }

/* --- below-hero composition (v13) --------------------------------------- */
.preview-band, .lookup-band { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 64rem) {
  .preview-band { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; }
  .lookup-band { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
}
.preview { background: var(--paper); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); }
.preview-bar { background: var(--ink); color: #FFFFFF; padding: 0.9rem 1.15rem;
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; }
.preview-bar strong { font-family: var(--font-display); font-size: 1.0625rem; }
.preview-bar span { font-size: 0.8125rem; color: #AFC4D0; }
.preview-body { padding: 0.35rem 1.15rem 1.15rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.record { border-bottom: 1px solid var(--rule); }
.record:last-of-type { border-bottom: 0; }
.rec-toggle { display: block; width: 100%; text-align: left; background: none; border: 0;
  font: inherit; padding: 1rem 0; cursor: pointer; border-left: 4px solid transparent;
  padding-left: 0.9rem; }
.record[data-evidence="documented"] .rec-toggle { border-left-color: var(--ev-documented); }
.record[data-evidence="stated"] .rec-toggle { border-left-color: var(--ev-stated); }
.record[data-evidence="unknown"] .rec-toggle { border-left-style: dashed; border-left-color: var(--ev-none); }
.row-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.row-name { font-family: var(--font-display); font-weight: 660; color: var(--ink); font-size: 1.125rem; }
.row-meta { font-size: 0.9375rem; color: var(--body); margin-top: 0.1rem; }
.ev-label { font-size: 0.8125rem; font-weight: 600; margin-top: 0.35rem; }
.ev-label.ev-documented { color: var(--ev-documented); }
.ev-label.ev-stated { color: var(--ev-stated); }
.ev-label.ev-none { color: var(--ev-none); }
.row-result { text-align: right; }
.row-score { font-family: var(--font-display); font-size: 2rem; font-weight: 660; color: var(--ink); line-height: 1; }
.row-band { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin-top: 0.15rem; }
.rec-why { display: none; padding: 0 0.9rem 1rem 1.8rem; }
.record.is-open .rec-why { display: block; }
.rec-why p { font-size: 0.9375rem; line-height: 1.55; margin: 0; color: var(--body); }
.rec-toggle::after { content: ""; }

/* --- tools -------------------------------------------------------------- */
.tools { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin-top: 1.75rem; }
@media (min-width: 46rem) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool { background: var(--paper); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column; }
.tool-photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.tool-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tool h3 { font-size: 1.25rem; margin: 1.1rem 1.25rem 0.4rem; }
.tool h3 a { color: var(--ink); text-decoration: none; }
.tool h3 a:hover { text-decoration: underline; }
.tool p { font-size: 1rem; line-height: 1.55; margin: 0 1.25rem 1.35rem; color: var(--body); }
/* One warm edge per card set, so the page is not uniformly cool. */
.tool { border-top: 3px solid var(--logo-teal); }
.tool[data-kind="retrofit"], .tool[data-kind="equipment"] { border-top-color: var(--ember-bar); }

/* --- Almanac band ------------------------------------------------------- */
.home-lookup-field { flex: 1 1 14rem; }
.alm-topics { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; padding: 0; }
.alm-topics li { font-size: 0.875rem; font-weight: 600; color: var(--ink); background: var(--wash);
  border-radius: 999px; padding: 0.3rem 0.7rem; }

/* --- closing ------------------------------------------------------------ */
.closing-band { text-align: center; }
.closing-band .section-open { max-width: 46rem; margin-inline: auto; }
.closing-band .lede { margin-inline: auto; }
.closing-mark { width: 64px; height: 64px; margin: 0 auto 1rem; display: block; opacity: 0.9; }
.section-sand { background: var(--sand, #FBF6EF); }

/* ===========================================================================
   Check journey (v13 presentation over the production structure)

   Every id, name and data-step the production module binds to is untouched. What
   changes here is only how the stages read: a visible spine, question groups with
   room to breathe, choices that are comfortable to hit on a phone, and consent
   that looks like a decision rather than fine print.
   =========================================================================== */
.check-shell { padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--rhythm); }
.check-shell h1 { font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem); }

/* --- stage spine -------------------------------------------------------- */
.intake-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem; margin: 1.25rem 0 0.5rem; counter-reset: stage; }
.intake-progress span { position: relative; height: 5px; border-radius: 999px;
  background: var(--rule); counter-increment: stage; }
.intake-progress span.done { background: var(--action); }
@media (min-width: 46rem) {
  .intake-progress { gap: 0.75rem; margin-bottom: 2.25rem; }
  .intake-progress span { height: 5px; }
  .intake-progress span::after {
    content: counter(stage) ". " attr(data-stage);
    position: absolute; top: 0.7rem; left: 0; right: 0;
    font-size: 0.8125rem; font-weight: 600; color: var(--muted); line-height: 1.3; }
  .intake-progress span.done::after { color: var(--ink); }
}
.step-of { font-family: var(--font-display); font-weight: 660; font-size: 0.9375rem;
  color: var(--action); letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }

/* --- questions ---------------------------------------------------------- */
.check-step > fieldset, .check-step fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.check-step legend:not(.visually-hidden) { font-family: var(--font-display); font-weight: 660;
  font-size: 1.1875rem; color: var(--ink); padding: 0; margin-bottom: 0.6rem; }
.check-step label:not(.choice) { display: block; font-weight: 600; color: var(--ink);
  font-size: 1rem; margin-bottom: 0.35rem; }
.check-step input[type="text"], .check-step input[type="email"], .check-step select {
  font-size: 1.0625rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-control);
  /* The legacy sheet scopes a paler border at this specificity, so the control-boundary
     token is restated here rather than raised with !important. */
  border: 1px solid var(--rule-control); }

.choice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
@media (min-width: 46rem) { .choice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius-control);
  padding: 0.85rem 1rem; cursor: pointer; min-height: 3rem; }
.choice:hover { background: var(--wash); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--wash); }
.choice input { margin: 0.2rem 0 0; width: 1.15rem; height: 1.15rem; accent-color: var(--action); flex: none; }
.choice-body { display: block; }
.choice-title { display: block; font-size: 1rem; line-height: 1.4; color: var(--ink); }
.choice-note { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 0.2rem; }

/* --- disclosures -------------------------------------------------------- */
.fact-block { border-top: 1px solid var(--rule); }
.fact-block:last-of-type { border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; }
.fact-block > summary { cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.9rem 0;
  font-family: var(--font-display); font-weight: 620; color: var(--ink); font-size: 1.0625rem; }
.fact-block > summary::-webkit-details-marker { display: none; }
.fact-block > summary::after { content: "Show"; font-family: var(--font-body);
  font-size: 0.875rem; font-weight: 600; color: var(--action); }
.fact-block[open] > summary::after { content: "Hide"; }

/* --- consent and errors ------------------------------------------------- */
.consent-block { background: var(--surface); border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.6rem); margin: 1.5rem 0; }
.consent-block label { display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.6rem 0; font-size: 1rem; line-height: 1.5; font-weight: 400; }
.consent-block input[type="checkbox"] { margin: 0.2rem 0 0; width: 1.15rem; height: 1.15rem;
  accent-color: var(--action); flex: none; }
.check-error, [id^="error-"] { color: var(--ev-stated); font-weight: 600; font-size: 0.9375rem; }
.check-error:empty, [id^="error-"]:empty { display: none; }
.check-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid var(--rule-strong); }
.check-noscript { background: var(--attention-bg); border-left: 4px solid var(--attention);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; }

/* --- Check journey, mobile composition ---------------------------------- */
/* The supporting panel is worth reading once. Repeating it in full above every stage put a
   whole extra screen between the visitor and the next question, so on small screens it
   becomes a labelled disclosure that keeps all of its content. */
@media (max-width: 68rem) {
  .intake-aside { background: var(--surface); border-radius: var(--radius);
    padding: 0 clamp(1rem, 4vw, 1.25rem); margin-bottom: 1.5rem; }
  .intake-aside > h2:first-of-type { display: none; }
}
.aside-disclosure { border: 0; }
.aside-disclosure > summary { cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 0;
  font-family: var(--font-display); font-weight: 620; font-size: 1rem; color: var(--ink); }
.aside-disclosure > summary::-webkit-details-marker { display: none; }
.aside-disclosure > summary::after { content: "Show"; font-family: var(--font-body);
  font-size: 0.875rem; font-weight: 600; color: var(--action); }
.aside-disclosure[open] > summary::after { content: "Hide"; }
.aside-disclosure > .aside-body { padding-bottom: 1rem; }

/* Programmatic focus on a heading announces the stage change. It is not a control, so it
   should not be drawn like one — while every real control keeps its focus ring.
   The global focus treatment is a box-shadow, not an outline, which is why clearing the
   outline alone left a dark rectangle around every stage heading. */
.step-heading:focus, .step-heading:focus-visible { outline: none; box-shadow: none; }
.step-heading { position: relative; }
.step-heading:focus::before { content: ""; position: absolute; left: -0.75rem; top: 0.1em;
  bottom: 0.1em; width: 4px; border-radius: 2px; background: var(--action); }

/* Stage 5 at phone width is one column, full width, at the normal reading scale. */
@media (max-width: 68rem) {
  .check-step[data-step="5"] .review-consent-grid { display: block; }
  .check-step[data-step="5"] .review-consent-column { margin-top: 1.75rem; }
  .check-step[data-step="5"] .review-summary { font-size: 1rem; }
}
.review-group { border-top: 1px solid var(--rule); }
.review-group > summary { cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; gap: 1rem; padding: 0.85rem 0;
  font-family: var(--font-display); font-weight: 620; color: var(--ink); }
.review-group > summary::-webkit-details-marker { display: none; }
.review-group > summary::after { content: "+"; color: var(--action); font-weight: 700; }
.review-group[open] > summary::after { content: "\2212"; }

/* On a phone the gutter was taking 80px of 390 before any content. One comfortable gutter
   is enough; the reading measure is set by the text, not by the frame. */
@media (max-width: 46rem) {
  /* Three nested gutters — main padding, shell margin and shell padding — were taking 80px
     of a 390px screen before a single question appeared. One gutter, on the shell. */
  .check-shell { padding-inline: 0; }
  .check-shell .shell-intake-narrow { width: auto; margin-inline: 0; padding-inline: 0.75rem; }
}
/* .fine is a supporting-note class, not a licence to drop below the mobile reading floor. */
@media (max-width: 68rem) {
  .check-step .fine, .check-step .choice-note { font-size: 1rem; line-height: 1.55; }
}


/* The hidden attribute must win.

   `.check-save-details` is laid out with `display: grid`, which outranks the user-agent rule
   behind [hidden]. The saved-profile fields were therefore visible and in the tab order even
   with saving unticked — the markup said hidden and the page did not agree. */
/* Scoped rather than global: only the components whose own CSS set a display that outranked
   the hidden attribute are restated here. Each of these has a correct JS contract that
   removes `hidden` when the control becomes applicable — `bcx-generate` at step 5,
   `clear-filters` once a filter is active, `check-save-details` once saving is chosen — so
   the attribute is the single source of truth and nothing else is changed site-wide. */
.check-save-details[hidden], .check-save[hidden],
.alm-ctl[hidden], .alm-pad[hidden],
#bcx-generate[hidden], #clear-filters[hidden],
.bcx-step[hidden], .check-step[hidden],
[role="tabpanel"][hidden], .lead-capture[hidden], .notice-empty[hidden] { display: none; }
/* The 44px tap-target floor gives every button a display, which outranked the hidden
   attribute on controls their own scripts keep hidden until they apply. */
main[class] button[hidden], main[class] a.btn[hidden], main[class] [hidden] { display: none; }

/* ===========================================================================
   Condition Profile document (v13 presentation)

   Two class families reach this: `rp-*` from the static sample, and `assessed-*` /
   `ici-*` written by result.js. They are the same document, so they are styled as one
   component rather than twice. No id or class is renamed: result.js keeps writing what
   it has always written.
   =========================================================================== */
.rp, .result-doc { background: var(--paper); }
.rp-head, .ici-glance { background: var(--surface); border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1.75rem; }
.rp-title, .overall-label { font-family: var(--font-display); font-weight: 660;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); color: var(--ink); line-height: 1.1; }
.rp-kicker { font-family: var(--font-display); font-weight: 660; font-size: 0.8125rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); margin-bottom: 0.4rem; }
.rp-meta, .rp-head-id, .rp-stamp, .rp-ref { font-size: 0.875rem; color: var(--muted); }

/* Each part opens on one heavy rule, as the prototype does. */
.rp-section, .ici-actions, .ici-alm, .ici-unresolved, .assessed-facts {
  border-top: 2px solid var(--ink); padding-top: 1.25rem; margin-top: 2.25rem; }
.rp-h, .ici-glance-h { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem); margin-bottom: 0.5rem; }
.rp-h3, .rp-sub-section > h3 { font-size: 1.125rem; margin-top: 1.5rem; }
.rp-lede { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); line-height: 1.55; color: var(--body); }

/* Rows carry their evidence on the edge, never on colour alone. */
.rp-row, .assessed, .core-item { border-top: 1px solid var(--rule); padding: 1rem 0 1rem 0.9rem;
  border-left: 4px solid var(--rule); }
.rp-row:last-of-type, .assessed:last-of-type { border-bottom: 1px solid var(--rule); }
.rp-row-name, .assessed-name, .core-role { font-family: var(--font-display); font-weight: 660;
  color: var(--ink); font-size: 1.125rem; }
.rp-row-detail, .assessed-extra, .core-state { font-size: 1rem; color: var(--body); margin-top: 0.15rem; }
.rp-score, .assessed-index, .assessed-figure { font-family: var(--font-display); font-weight: 660;
  font-size: 2rem; color: var(--ink); line-height: 1; }
.rp-row-result, .assessed-band { text-align: right; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }

/* Missing information is a gap in the record, never a fault: dashed and neutral. */
.rp-gap, .ici-unresolved li { border-left: 4px dashed var(--ev-none); padding: 0.9rem 0 0.9rem 0.9rem;
  border-top: 1px solid var(--rule); }
.rp-gap-name { font-family: var(--font-display); font-weight: 620; color: var(--ink); font-size: 1.0625rem; }
.rp-gap-note, .rp-gap-why { font-size: 0.9375rem; color: var(--body); margin-top: 0.2rem; }

.rp-chips, .ici-alm-cards { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.rp-chip { font-size: 0.875rem; font-weight: 600; background: var(--wash); color: var(--ink);
  border-radius: 999px; padding: 0.3rem 0.7rem; }
.rp-chip-in { background: var(--ink); color: #FFFFFF; }

.rp-action, .next-action, .ici-action-group li { border-top: 1px solid var(--rule); padding: 0.9rem 0; }
.rp-action-t { font-family: var(--font-display); font-weight: 620; color: var(--ink); font-size: 1.0625rem; }
.rp-action-k { font-size: 0.8125rem; font-weight: 600; color: var(--action);
  letter-spacing: 0.05em; text-transform: uppercase; }

.rp-more { border-top: 1px solid var(--rule); }
.rp-more-summary, .alm-detail-fold > summary { cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; gap: 1rem; padding: 0.9rem 0; font-family: var(--font-display);
  font-weight: 620; color: var(--ink); }
.rp-more-summary::-webkit-details-marker, .alm-detail-fold > summary::-webkit-details-marker { display: none; }
.rp-more-summary::after { content: "Show"; font-family: var(--font-body); font-size: 0.875rem;
  font-weight: 600; color: var(--action); }
.rp-more[open] .rp-more-summary::after { content: "Hide"; }
.rp-more-body { padding-bottom: 1rem; font-size: 0.9375rem; line-height: 1.55; }

.rp-limits, .ici-alm-note { font-size: 0.9375rem; line-height: 1.6; color: var(--body); max-width: 68ch; }
.rp-climate-row, .ici-alm-dl > div { display: grid; gap: 0.2rem 1.5rem; padding: 0.8rem 0;
  border-top: 1px solid var(--rule); }
@media (min-width: 40rem) { .rp-climate-row, .ici-alm-dl > div { grid-template-columns: 15rem 1fr; } }
.rp-climate-k { font-family: var(--font-display); font-weight: 620; color: var(--ink); font-size: 0.9375rem; }
.rp-climate-note, .rp-climate-sub { font-size: 0.875rem; color: var(--muted); }

.rp-noresult { background: var(--wash); border-radius: var(--radius); padding: 1.1rem 1.25rem;
  font-size: 0.9375rem; color: var(--body); }
.rp-is-sample .rp-sample-note, .sample-flag { background: var(--attention-bg);
  border-left: 4px solid var(--attention); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.9375rem; }

@media (max-width: 46rem) {
  .rp-score, .assessed-index, .assessed-figure { font-size: 1.625rem; }
  .rp-row, .assessed, .core-item { padding-left: 0.75rem; }
}

/* ===========================================================================
   Condition Profile on screen vs on paper

   The paper treatment — a fixed sheet, centred, at a printer's measure — is right for
   print and wrong for a 390px screen, where it renders as a shrunken page. On screen the
   document reflows to the viewport; the sheet is kept for @media print only.
   =========================================================================== */
@media screen and (max-width: 46rem) {
  /* The report band nested three gutters, leaving the document 310px of a 390px screen. */
  .report-band > .shell, .report-band > .shell-wide { width: auto; margin-inline: 0; padding-inline: 0.75rem; }
  .rp { max-width: none; border-radius: var(--radius); }
  .rp-body { padding: 1.25rem 1rem 1.5rem; }

  /* Reading floors. A profile is read, not glanced at; nothing here drops below 15px. */
  .rp, .rp-body { font-size: 1rem; }
  .rp-row-detail, .rp-gap-note, .rp-gap-why, .rp-limits, .rp-climate-note, .rp-climate-sub,
  .rp-more-body, .rp-action-t, .rp-lede, .rp-sample-note, .rp-noresult,
  .assessed-extra, .core-state, .ici-alm-note { font-size: 1rem; line-height: 1.55; }
  .rp-meta, .rp-head-id, .rp-stamp, .rp-ref, .rp-chip, .rp-action-k { font-size: 0.9375rem; }
  .rp-row-name, .assessed-name, .core-role { font-size: 1.125rem; }
  .rp-h, .ici-glance-h { font-size: 1.375rem; }

  /* Rows stack instead of squeezing a score column beside the name. */
  .rp-row, .assessed, .core-item { display: block; }
  .rp-row-result, .assessed-band { text-align: left; margin-top: 0.5rem; }
  .rp-score, .assessed-index, .assessed-figure { font-size: 1.75rem; }
  .rp-climate-row, .ici-alm-dl > div { grid-template-columns: 1fr; }

  /* Anything that would otherwise force sideways scrolling scrolls inside itself. */
  .ici-table, .rp-body table { display: block; overflow-x: auto; }
}

/* One visible document title.

   The document header is the title that survives: it carries the mark, kicker, reference and
   date, and result.js removes the page heading once it renders. Hiding the document title
   instead left the finished profile with no visible title at all, which is why this is
   scoped to the page heading and only while the document header is actually present. */
.report-surface:has(.ici-doc-head) > h1.step-heading { display: none; }
@media print {
  .report-band > .shell, .report-band > .shell-wide { width: auto; margin: 0; padding: 0; }
}

/* ===========================================================================
   Building Almanac (v13 presentation over the production structure)

   Canada and the United States run through the same components here, so neither
   country can quietly acquire a different interaction model. What differs between
   them is their governed data — units, baselines, stations, what content exists —
   and none of that is touched. No scale is ever shared across the border.
   =========================================================================== */
.alm-head { margin-bottom: 1.5rem; }
.alm-eyebrow { font-family: var(--font-display); font-weight: 660; font-size: 0.8125rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); }
.alm-lede { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55;
  color: var(--body); max-width: 68ch; }

/* --- selectors: same control for jurisdiction and topic ----------------- */
.alm-picker { position: relative; }
.alm-pick { display: flex; flex-direction: column; gap: 0.2rem; width: 100%; text-align: left;
  font: inherit; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-control); border-radius: var(--radius-control);
  padding: 0.7rem 0.9rem; cursor: pointer; min-height: 3rem; }
.alm-pick:hover { background: var(--wash); }
.alm-pick-l { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.alm-pick-v { font-family: var(--font-display); font-weight: 620; font-size: 1.0625rem; }
.alm-pop { background: var(--paper); border: 1px solid var(--rule-control);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.5rem; z-index: 40; }
.alm-pop button, .alm-jl { font: inherit; font-size: 1rem; display: block; width: 100%;
  text-align: left; background: none; border: 0; border-radius: 6px;
  padding: 0.6rem 0.7rem; cursor: pointer; color: var(--ink); min-height: 2.75rem; }
.alm-pop button:hover, .alm-jl:hover { background: var(--wash); }
.alm-pop button[aria-selected="true"], .alm-jl[aria-selected="true"] { background: var(--ink); color: #FFFFFF; }

/* --- map ---------------------------------------------------------------- */
.alm-stage, .alm-mapwrap { background: var(--wash); border-radius: var(--radius); overflow: hidden; }
.alm-bound, .alm-boundary { stroke: #FFFFFF; stroke-width: 0.6; vector-effect: non-scaling-stroke;
  transition: filter 140ms var(--ease); }
.alm-bound:hover, .alm-boundary:hover { filter: brightness(0.92); }
/* Focus must be visible on a shape, not only on a control. */
.alm-bound:focus, .alm-bound:focus-visible, .alm-boundary:focus, .alm-boundary:focus-visible { outline: none;
  stroke: var(--ink); stroke-width: 2.5; }
.alm-bound[aria-selected="true"], .alm-bound.is-selected, .alm-boundary[aria-selected="true"] { stroke: var(--ink); stroke-width: 2.5; }
.alm-ctl button { font: inherit; font-weight: 700; background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-control); border-radius: var(--radius-control);
  min-width: 2.5rem; min-height: 2.5rem; cursor: pointer; }
.alm-ctl button:hover { background: var(--wash); }

/* --- evidence cards ----------------------------------------------------- */
.alm-evgrid { display: grid; gap: 0.75rem; }
@media (min-width: 60rem) { .alm-evgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.alm-evcard { background: var(--surface); border-radius: var(--radius);
  border-left: 4px solid var(--logo-teal); padding: 1rem 1.15rem; }
.alm-figure { font-family: var(--font-display); font-weight: 660;
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem); color: var(--ink); line-height: 1; }
/* The unit is never optional: a number without it carries no meaning across a border. */
.alm-u { font-family: var(--font-data); font-size: 0.875rem; color: var(--body); margin-left: 0.35rem; }
.alm-ev-k { font-family: var(--font-display); font-weight: 620; color: var(--ink); font-size: 1.0625rem; }
.alm-ev-line, .alm-sub, .alm-plain { font-size: 1rem; line-height: 1.55; color: var(--body); }
.alm-src, .alm-srcdetail, .alm-scope, .alm-note-body, .alm-foot, .alm-sechnote {
  font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }

/* Evidence quality carries a word as well as a colour. */
.alm-qbadge, .alm-tbadge { display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8125rem; font-weight: 700; border-radius: 999px; padding: 0.2rem 0.6rem;
  background: var(--wash); color: var(--ink); border: 1px solid var(--rule-control); }
.alm-q-published_inventory { border-left: 4px solid var(--ev-documented); }
.alm-q-representative_area_context { border-left: 4px solid var(--ev-stated); }
.alm-q-experimental_comparison { border-left: 4px dashed var(--ev-none); }

/* --- disclosures, gates and pathways ------------------------------------ */
.alm-group, .alm-note, .alm-gate { border-top: 1px solid var(--rule); }
.alm-group > summary, .alm-note > summary, .alm-gate > summary, .alm-evcard > summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  gap: 1rem; align-items: baseline; padding: 0.9rem 0;
  font-family: var(--font-display); font-weight: 620; font-size: 1.0625rem;
  min-height: 3rem; }
/* Colour is deliberately not set above: production gives some of these summaries a dark
   ground with white text, and forcing the ink token onto all of them put white text on a
   light background at 1.15:1 in the pathway gates. */
.alm-group > summary, .alm-note > summary, .alm-evcard > summary { color: var(--ink); }
.alm-group > summary::-webkit-details-marker, .alm-note > summary::-webkit-details-marker,
.alm-gate > summary::-webkit-details-marker, .alm-evcard > summary::-webkit-details-marker { display: none; }
.alm-group > summary::after, .alm-note > summary::after, .alm-gate > summary::after { content: "+";
  color: var(--action); font-weight: 700; }
.alm-group[open] > summary::after, .alm-note[open] > summary::after,
.alm-gate[open] > summary::after { content: "\2212"; }
/* Pathway gate text inherits its colour from the gate.
   Production gives an open/primary gate summary a dark navy ground with white text. Setting
   the ink token on the title painted dark navy on dark navy at 1.15:1 — invisible, and only
   on the summary, which is why it moved around as gates opened and closed. The same applies
   to the sub and note lines: a muted grey on that ground is not readable either. The gate
   owns the ground, so the gate owns the colour, and these inherit it. */
.alm-gate-title { font-family: var(--font-display); font-weight: 620; color: inherit; }
.alm-gate-sub, .alm-gate-note, .alm-gate-main { font-size: 0.9375rem; color: inherit; }
/* Where a gate sits on the page surface rather than its own ground, the muted tone is
   restored explicitly for the supporting lines only. */
.alm-gate:not([open]) > :not(summary) .alm-gate-sub,
.alm-gate[open] > :not(summary) .alm-gate-sub,
.alm-gate > :not(summary) .alm-gate-note { color: var(--muted); }

/* An unavailable pathway is stated plainly, never dressed up or hidden. */
.alm-unavail-group, .alm-availability, .alm-status { background: var(--wash);
  border-left: 4px dashed var(--ev-none); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.9rem 1.1rem; font-size: 0.9375rem; color: var(--body); }
.alm-fail { background: var(--attention-bg); border-left: 4px solid var(--attention);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.15rem; }

.alm-fsarow { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.alm-fsahint, .alm-fsamsg { font-size: 0.9375rem; color: var(--muted); }

@media (max-width: 60rem) {
  .alm-evgrid { grid-template-columns: 1fr; }
  .alm-figure { font-size: 1.875rem; }
  .alm-pick, .alm-pop button, .alm-jl { min-height: 3rem; }
  .alm-ev-line, .alm-plain, .alm-sub { font-size: 1rem; }
  .alm-src, .alm-srcdetail, .alm-scope, .alm-foot { font-size: 0.9375rem; }
}

/* The postal-area field is scoped by id in bcx.css, which outranks the shared control rule,
   so the control-boundary token is restated at matching specificity here. */
#alm-fsa { border: 1px solid var(--rule-control); }

/* --- Almanac legends and choropleth ------------------------------------- */
.alm-legends { display: grid; gap: 1rem; padding: 1rem clamp(0.75rem, 2vw, 1.25rem) 1.25rem; }
@media (min-width: 46rem) { .alm-legends { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.alm-legend { background: var(--paper); border-radius: var(--radius);
  border: 1px solid var(--rule); padding: 0.85rem 1rem; }
.alm-legend-h { font-family: var(--font-display); font-weight: 660; color: var(--ink);
  font-size: 1rem; margin-bottom: 0.5rem; }
.alm-legend-ramp { display: flex; height: 12px; border-radius: 6px; overflow: hidden; }
.alm-legend-ramp i { flex: 1 1 0; }
.alm-legend-range { display: flex; justify-content: space-between;
  font-family: var(--font-data); font-size: 0.875rem; color: var(--ink); margin: 0.35rem 0 0; }
.alm-legend-unit { font-size: 0.875rem; color: var(--body); margin: 0.15rem 0 0; }
.alm-legend-src { font-size: 0.8125rem; color: var(--muted); margin: 0.35rem 0 0; }
.alm-legend-none { font-size: 0.9375rem; color: var(--muted); margin: 0; }
.alm-legend-note { grid-column: 1 / -1; font-size: 0.9375rem; line-height: 1.55;
  color: var(--body); margin: 0; max-width: 78ch; }
/* Restrained transition on a topic change, and none at all under reduced motion. */
#alm-map path { transition: fill 180ms var(--ease); }
@media (prefers-reduced-motion: reduce) { #alm-map path { transition: none; } }
/* The map must not swallow a phone screen: controls, legend and evidence follow it. */
@media (max-width: 46rem) {
  /* A 46vh clamp left the map 197px tall — present, but too small to read or use. The map is
     the point of this page on a phone as much as on a desktop, so it gets a real aspect
     ratio and the full width, and is never clipped. */
  .alm-stage, .alm-mapwrap { max-height: none; overflow: visible; }
  .alm-stage { padding: 0.5rem 0.25rem 0; }
  main[class] #alm-map, main[class] .hero-map-svg {
    width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: none;
  }
  .alm-legends { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* ===========================================================================
   Equipment (v13 presentation over the production structure)
   =========================================================================== */
.eq-filters { display: grid; gap: 0.9rem; margin: 1.25rem 0; }
@media (min-width: 46rem) { .eq-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eq-filters select, .eq-filters input { font-size: 1rem; padding: 0.65rem 0.85rem;
  border-radius: var(--radius-control); border: 1px solid var(--rule-control); min-height: 3rem; }
.notice, .eq-notice, .recall-notice { background: var(--surface); border-radius: var(--radius);
  border-left: 4px solid var(--ember-bar); padding: 1.1rem 1.25rem; margin-bottom: 0.9rem; }
.notice h3, .eq-notice h3 { font-size: 1.125rem; margin-bottom: 0.3rem; }
.notice p, .eq-notice p { font-size: 1rem; line-height: 1.55; margin: 0.25rem 0; }
.notice a[href^="http"], .eq-notice a[href^="http"] { font-weight: 600; }
.eq-meta, .notice-meta { font-size: 0.9375rem; color: var(--muted); }
/* "Not recorded" is a neutral statement about the record, never a warning. */
.eq-none, .not-recorded, .eq-held { background: var(--wash); border-left: 4px dashed var(--ev-none);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 0.8rem 1rem;
  font-size: 0.9375rem; color: var(--body); }
.guide-step { border-top: 1px solid var(--rule); padding: 1.1rem 0; }
.guide-step h3 { font-size: 1.125rem; margin-bottom: 0.35rem; }
.guide-step p, .guide-step li { font-size: 1rem; line-height: 1.55; }
.contents { background: var(--wash); border-radius: var(--radius); padding: 1rem 1.25rem;
  margin: 1.25rem 0 1.75rem; }
.contents h2, .contents h3 { font-size: 0.9375rem; margin-bottom: 0.4rem; }
.contents ul { margin: 0; padding-left: 1.1rem; font-size: 1rem; }

/* The numbered step badges set --ink-deep on a --teal disc: 2.26:1, below the 4.5:1 a
   13px numeral needs. The disc is the component's own ground, so the numeral takes the
   light ink that ground was designed for. */
.eq-frag-steps > li > span { color: #FFFFFF; }

/* ===========================================================================
   Public tools and saved-profile states
   =========================================================================== */
.tabs, .bcx-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: 2px solid var(--rule);
  margin-bottom: 1.5rem; }
.tab, .bcx-tab { font: inherit; font-size: 1rem; font-weight: 600; background: none; border: 0;
  border-bottom: 3px solid transparent; padding: 0.7rem 0.9rem; cursor: pointer;
  color: var(--body); min-height: 3rem; }
.tab[aria-selected="true"], .bcx-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--action); }
.bcx-card, .bcx-seasons > div, .bcx-actions li { background: var(--surface);
  border-radius: var(--radius); border: 1px solid var(--rule); padding: 1.1rem 1.25rem; }
.bcx-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.bcx-table th, .bcx-table td { padding: 0.7rem 0.75rem; }
.bcx-equip-row { border-radius: var(--radius); }
/* A wide table scrolls inside itself rather than pushing the page sideways. */
@media (max-width: 60rem) { .bcx-table-wrap, .bcx-table { display: block; overflow-x: auto; } }
.gapindex-num, .gap-num { font-family: var(--font-display); font-weight: 660; color: var(--ink); line-height: 1; }
.gapindex-bar, .gap-bar { height: 8px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.gapindex-bar i, .gap-bar i { display: block; height: 100%; background: var(--action); border-radius: 4px; }
/* Saved-profile states: deletion is a boundary, shown as one. */
.sp-state, .saved-state { background: var(--surface); border-radius: var(--radius); padding: 1.25rem; }
.sp-danger, .saved-danger { border-left: 4px solid var(--attention); background: var(--attention-bg);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.1rem 1.25rem; }
@media print { .tabs, .bcx-tabs { display: none; } [role="tabpanel"][hidden] { display: block !important; } }

/* ===========================================================================
   Informational and legal pages
   =========================================================================== */
.legal-body h2, .prose h2 { scroll-margin-top: 6rem; }
.prose p, .prose li, .legal-body p, .legal-body li { font-size: 1rem; line-height: 1.65; max-width: 68ch; }
.prose h2, .legal-body h2 { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); margin-top: 2rem; }
.prose h3, .legal-body h3 { font-size: 1.125rem; margin-top: 1.5rem; }
.legal-toc { background: var(--wash); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.legal-toc ol, .legal-toc ul { margin: 0; padding-left: 1.1rem; font-size: 0.9375rem; }
.legal-toc li { margin-bottom: 0.35rem; }
@media print { .legal-toc { display: none; } }

/* A row with no result is not a low score: no figure, neutral dashed edge, stated plainly. */
.record.row-none .row-result { color: var(--ev-none); }
.preview-caption { margin: 1rem 0 0; }

/* --- Check journey composition (v13) ------------------------------------ */
.check-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 68rem) { .check-grid { grid-template-columns: 15rem minmax(0, 1fr); } }
.check-spine { position: sticky; top: 6rem; }
@media (max-width: 68rem) { .check-spine { position: static; } }
.spine { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.spine button { display: block; width: 100%; text-align: left; font: inherit; background: none;
  border: 0; border-left: 3px solid var(--rule); padding: 0.6rem 0 0.6rem 0.85rem; cursor: pointer; }
.spine [data-state="current"] button { border-left-color: var(--action); }
.spine [data-state="done"] button { border-left-color: var(--ev-documented); }
.spine .stage { display: block; font-family: var(--font-display); font-weight: 620;
  color: var(--ink); font-size: 0.9375rem; }
.spine .answer { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 0.1rem; }
.preview-mobile { border-top: 1px solid var(--rule); }
.preview-mobile > summary { cursor: pointer; list-style: none; padding: 0.9rem 0;
  font-family: var(--font-display); font-weight: 620; color: var(--ink);
  display: flex; justify-content: space-between; }
.preview-mobile > summary::-webkit-details-marker { display: none; }
.preview-mobile > summary::after { content: "Show"; font-family: var(--font-body);
  font-size: 0.875rem; font-weight: 600; color: var(--action); }
.preview-mobile[open] > summary::after { content: "Hide"; }
@media (min-width: 68rem) { .preview-mobile { grid-column: 2; } }

/* The result document met the same stacked gutters as the sample: three nested wrappers took
   38% of a 390px screen before the profile began. One gutter is enough. */
@media screen and (max-width: 46rem) {
  .report-band > .shell, .report-band > .shell-wide,
  .report-surface > .shell, .report-surface > .shell-wide {
    width: auto; margin-inline: 0; padding-inline: 0.75rem; }
  #result-root .doc, .report-band .doc { max-width: none; }
}

/* The profile is a document on paper and a page on screen. The sheet width belongs to print
   only; on screen it reflows to the reading measure and, on a phone, to the viewport. */
@media screen {
  #result-root .doc, #result-root .rp, .report-band .doc, .report-band .rp { max-width: none; }
}
@media screen and (max-width: 46rem) {
  #result-root .rp-body, .report-band .rp-body { padding-inline: 0.85rem; }
  .report-band > .shell, .report-band > .shell-wide,
  .report-surface, .report-surface > .shell, .report-surface > .shell-wide {
    width: auto; margin-inline: 0; padding-inline: 0.5rem; }
}

/* The profile routes put .shell on <main> and again on the inner band, so the gutter applied
   twice plus a width cap. On a phone the document takes the screen. */
@media screen and (max-width: 46rem) {
  main.shell:has(.doc) { width: auto; max-width: none; margin-inline: 0; padding-inline: 0; }
  main.shell:has(.doc) .shell { width: auto; max-width: none; margin-inline: 0; padding-inline: 0.6rem; }
}

/* Last stacked gutter on the result route: the band's own shell. */
@media screen and (max-width: 46rem) {
  #result-root .shell, #result-root .shell-wide,
  .report-band .shell, .report-band .shell-wide {
    width: auto; max-width: none; margin-inline: 0; padding-inline: 0.5rem; }
  #result-root .rp-body { padding-inline: 0.6rem; }
}

/* `.result-shell` carries a 20px inset of its own on top of the surface padding. */
@media screen and (max-width: 46rem) {
  .result-shell { padding-inline: 0.4rem; }
  .report-surface { padding-inline: 0.25rem; }
}

/* ===========================================================================
   Reading floors and tap targets

   The responsive gate found body text between 11px and 15px on more than a dozen routes and
   controls as small as 18px. These are floors, not a restyle: nothing here changes a layout,
   it stops text and targets falling below what is readable and hittable. Genuinely
   supplementary text keeps its smaller size, with its own floor.
   =========================================================================== */
/* `main[class]` is class-level specificity, so these floors win over the legacy per-page
   rules without reaching for !important. */
main[class] p, main[class] li, main[class] label, main[class] dd, main[class] dt,
main[class] td, main[class] th, main[class] .choice-title, main[class] .row-name,
main[class] .row-meta, main[class] .rp-row-detail, main[class] .alm-ev-line,
main[class] .alm-plain, main[class] .eq-meta {
  font-size: max(1rem, 1em);
}
main[class] .fine, main[class] .note, main[class] .hint, main[class] .meta,
main[class] figcaption, main[class] .alm-src, main[class] .alm-scope, main[class] .alm-foot,
main[class] .rp-meta, main[class] .choice-note, main[class] .row-band, main[class] .ev-label,
main[class] .alm-legend-src, main[class] .alm-legend-unit {
  font-size: max(0.875rem, 0.875em);
}
/* A control has to be hittable. 44px is the floor, applied to the control itself rather than
   by padding a wrapper, so the target and the affordance are the same rectangle. */
main[class] button, main[class] a.btn, main[class] select, main[class] summary,
main[class] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  min-height: 44px;
}
main input[type="checkbox"], main input[type="radio"] { min-width: 20px; min-height: 20px; }
main label.choice, main .consent label { min-height: 44px; align-items: center; }
/* A closed disclosure must not reserve height. */
main details:not([open]) > *:not(summary) { display: none; }

/* ===========================================================================
   Vertical rhythm on small screens

   The homepage measured 12,604px on a phone and For Organizations 12,494px: every section
   carried desktop padding, every card behaved like a full-screen panel, and images had no
   aspect ratio so they took whatever height they liked. Nothing here removes content — it
   stops the layout spending a screen per idea.
   =========================================================================== */
@media screen and (max-width: 46rem) {
  main[class] section, main[class] .ici-section, main[class] .band, main[class] .band-tight {
    padding-block: clamp(1.5rem, 5vw, 2.25rem);
  }
  main[class] .tool, main[class] .ici-card, main[class] .bcx-card, main[class] .tool-card {
    padding: 1rem 1.1rem;
  }
  /* A card is a card, not a panel: its image keeps a fixed ratio instead of growing. */
  main[class] .tool-photo img, main[class] .shot img, main[class] .ici-card img {
    aspect-ratio: 16 / 9; object-fit: cover; height: auto;
  }
  main[class] .hero-photo img { aspect-ratio: 4 / 3; }
  /* Compact evidence rows rather than one oversized block per field. */
  main[class] .record, main[class] .rp-row, main[class] .oc-row, main[class] .dim-row {
    padding-block: 0.7rem;
  }
  main[class] h2 { margin-top: 1.5rem; }
  main[class] p { margin-block: 0.5rem; }
  /* Two-up tool cards where the width genuinely allows it. */
  @media (min-width: 26rem) {
    main[class] .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    main[class] .tool h3 { font-size: 1rem; }
    main[class] .tool p { font-size: 0.9375rem; }
  }
}
/* Desktop: no section should reserve a screen of blank space. */
@media screen and (min-width: 46rem) {
  main[class] section, main[class] .ici-section { padding-block: clamp(2rem, 4vw, 3.5rem); }
}

/* Supporting sections of the profile fold on screen and expand on paper, so the document
   reads as a document rather than seven screens of cards. No content is removed. */
.part-fold { border-top: 1px solid var(--rule); }
.part-fold > summary { cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 0;
  font-family: var(--font-display); font-weight: 660; color: var(--ink);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); }
.part-fold > summary::-webkit-details-marker { display: none; }
.part-fold > summary::after { content: "Show"; font-family: var(--font-body);
  font-size: 0.875rem; font-weight: 600; color: var(--action); }
.part-fold[open] > summary::after { content: "Hide"; }
@media print {
  .part-fold > summary::after { content: ""; }
  .part-fold > .part-fold-body { display: block !important; }
}

/* ===========================================================================
   Remaining responsive findings

   Each one measured, not guessed: a summary whose flex row exceeds its box, sections wider
   than their container on a phone, a 404 sitting in a narrow column with 96px of padding
   above and below, and a hero shell reserving 88px.
   =========================================================================== */
/* A disclosure summary is a flex row; without min-width:0 its content refuses to shrink and
   pushes the box wider than its container. */
.rp-more-summary, .part-fold > summary, .alm-group > summary, .fact-block > summary,
.colophon-details > summary { min-width: 0; }
.rp-more-summary > *, .part-fold > summary > * { min-width: 0; overflow-wrap: anywhere; }

/* Output sections on the retrofit tool were wider than the phone they were drawn on. */
@media screen and (max-width: 46rem) {
  main[class] .retrofit-output, main[class] .gap-index, main[class] section > div {
    max-width: 100%; overflow-wrap: anywhere;
  }
  main[class] table { max-width: 100%; }
}

/* 404: use the canvas rather than a narrow column with a screen of padding. */
.state-block { padding-block: clamp(1.75rem, 4vw, 3rem); }
@media screen and (min-width: 46rem) {
  main[class] .state-block { max-width: none; }
  main[class] .state-block > * { max-width: 62rem; margin-inline: auto; }
}
/* No shell reserves a screen of blank space at the top of a page. */
main[class] .shell, main[class] .shell-wide { padding-block: clamp(1.5rem, 3vw, 3rem); }

/* Checkboxes and radios are 20px controls inside a 44px label; the label is the target, so
   the control is measured with it. */
main[class] label:has(input[type="checkbox"]), main[class] label:has(input[type="radio"]) {
  min-height: 44px; display: flex; align-items: center; gap: 0.7rem;
}
main[class] input[type="checkbox"], main[class] input[type="radio"] { min-height: 44px; min-width: 20px; }

/* The .rp-more summary still exceeds its box: its chevron is positioned outside the padding
   box. Contain it rather than letting it widen the document. */
.rp-more, .rp-more-summary { max-width: 100%; overflow: hidden; }
.rp-more-summary { flex-wrap: wrap; }
/* Retrofit output blocks: a nested div still ran past its container on a phone. */
@media screen and (max-width: 46rem) {
  main[class] .retrofit-output *, main[class] .gap-index * { max-width: 100%; }
  main[class] .shell-wide, main[class] .shell { padding-inline: 0.5rem; }
}
/* These two carry governed wording, not supplementary notes, so they meet the body floor. */
main[class] .notice-applicability, main[class] .notice-foot { font-size: max(1rem, 1em); }

/* Final four, each measured: a body padded 5px past its box, two shells still insetting the
   document on a phone, a 404 block short of the viewport, and two governed notice lines that
   a more specific legacy rule still held at 13px. */
@media screen and (max-width: 46rem) {
  main[class] .rp-body { padding-inline: 0.5rem; max-width: 100%; box-sizing: border-box; }
  main[class] .shell-wide, main[class] .shell,
  #result-root .shell-wide, .report-band .shell-wide { padding-inline: 0.4rem; }
  main[class] .state-block { padding-inline: 0.4rem; }
}
main[class] p.notice-applicability, main[class] p.notice-foot { font-size: max(1rem, 1em); }

/* The inner shells set an explicit width, so adjusting padding alone never widened them. */
@media screen and (max-width: 46rem) {
  main[class] .shell, main[class] .shell-wide,
  main[class] section > .shell, main[class] section > .shell-wide {
    width: auto; max-width: none; margin-inline: 0;
  }
}

/* A folded section keeps its heading element: collapsing it must not remove it from the
   document outline, which is what dropped it from the profile parity gate. */
.part-fold > summary > h2.fold-heading { font-size: inherit; margin: 0; border: 0; padding: 0; }

/* `.rp-aside` bleeds to the document edge with a negative inline margin sized to the body's
   own padding. Once that padding was reduced for phones the bleed overshot by 10px and the
   page scrolled sideways. The bleed is tied to the padding actually in force rather than
   being cancelled, so the full-width treatment survives. */
.rp-body { --rp-pad: 2rem; }
.rp-aside { margin-inline: calc(var(--rp-pad) * -1); padding-inline: var(--rp-pad); }
@media screen and (max-width: 46rem) { .rp-body { --rp-pad: 0.5rem; } }

/* `main` itself carries the shell gutter on the profile routes: 20px padding plus a 20px
   inline margin, applied again by the band inside it. Every earlier rule targeted shells
   *inside* main and so never reached it. */
@media screen and (max-width: 46rem) {
  main.shell, main.shell-wide {
    width: auto; max-width: none; margin-inline: 0; padding-inline: 0.4rem;
  }
}

/* ===========================================================================
   Homepage on a phone

   Four photographic cards, a full-bleed map and two stacks of definition cards spent 8,971px
   saying what fits in far less. On narrow screens the tools become media rows — thumbnail,
   title, one line, link — the map takes a shallower ratio, and the supporting definitions
   read as compact rows. Every tool, every definition and every destination stays visible;
   none of this is a carousel and nothing is removed.
   =========================================================================== */
@media screen and (max-width: 46rem) {
  /* Tools as media rows. */
  main[class] .tools { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 1rem; }
  main[class] .tool {
    display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
    grid-template-areas: "photo title" "photo copy";
    column-gap: 0.85rem; row-gap: 0.15rem; align-items: start;
    padding: 0.75rem; border-top-width: 2px;
  }
  main[class] .tool-photo { grid-area: photo; aspect-ratio: 1 / 1; border-radius: 8px; align-self: center; }
  main[class] .tool h3 { grid-area: title; margin: 0; font-size: 1.0625rem; line-height: 1.25; }
  main[class] .tool p {
    grid-area: copy; margin: 0; font-size: 1rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* The map keeps working; it stops taking a screen to do it. */
  main[class] .hero-map-svg, main[class] #alm-map { aspect-ratio: 16 / 10; height: auto; }
  main[class] .alm-preview { padding: 0.75rem; }
  main[class] .alm-topics { gap: 0.3rem; }
  main[class] .lookup-band { gap: 1rem; }

  /* Definitions as compact rows rather than a second stack of cards. */
  main[class] .deflist { display: grid; gap: 0.1rem; }
  main[class] .deflist > div {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem;
    padding: 0.6rem 0; border-top: 1px solid var(--rule);
  }
  main[class] .deflist dt { font-size: 1rem; }
  main[class] .deflist dd { margin: 0; font-size: 1rem; line-height: 1.45; }
  main[class] .ici-cardgrid { gap: 0.5rem; }
  main[class] .ici-card { padding: 0.8rem 0.9rem; }

  /* Footer groups: collapsed, compact, every destination kept. */
  main[class] ~ .colophon .colophon-details > summary { padding: 0.65rem 0; }
  .colophon { padding-block: 2rem 1.5rem; }
  .colophon-grid { gap: 0; }
  .colophon-details ul { padding: 0.4rem 0 0.75rem; gap: 0.2rem; }
  .colophon-lede { margin-bottom: 0.75rem; }
  .colophon-note { margin-top: 1rem; }
}

/* The Almanac band's context copy is one concise disclosure rather than a large open block.
   Every sentence is still on the page. */
.alm-context { border-top: 1px solid var(--rule); margin-top: 0.75rem; }
.alm-context > summary { cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 0;
  font-family: var(--font-display); font-weight: 620; color: var(--ink); font-size: 1rem; }
.alm-context > summary::-webkit-details-marker { display: none; }
.alm-context > summary::after { content: "Show"; font-family: var(--font-body);
  font-size: 0.875rem; font-weight: 600; color: var(--action); }
.alm-context[open] > summary::after { content: "Hide"; }
.alm-context-body > * { margin-block: 0.5rem; }
@media screen and (max-width: 46rem) {
  main[class] .alm-key { gap: 0.4rem 1rem; margin-top: 0.6rem; }
  main[class] .alm-topics { margin-top: 0.6rem; }
}

/* For Organizations: outcome groups on a responsive grid rather than one long stack. Every
   governed block and destination is preserved; what changes is that the desktop canvas is
   used instead of a 12,000px column. */
/* Cards size to their own content; a grid row otherwise takes the height of its tallest
   member and one long group stretches every card beside it. */
.outcome-groups { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); margin-top: 1.5rem;
  align-items: start; }
@media (min-width: 60rem) { .outcome-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 90rem) { .outcome-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.outcome-group { background: var(--surface); border-radius: var(--radius);
  border-top: 3px solid var(--logo-teal); padding: 1.1rem 1.25rem; }
.outcome-group > h2 { margin-top: 0; font-size: 1.125rem; border: 0; padding-top: 0; }
.outcome-group p, .outcome-group li { font-size: 1rem; line-height: 1.5; }
@media screen and (max-width: 46rem) {
  main[class] .outcome-group { padding: 0.85rem 0.95rem; }
}

/* A long outcome group spans the full width instead of stretching every card in its row to
   match. Its own content then flows in columns, so the page is shorter without moving a
   single block out of reading order. */
/* Grid rows align, so one long card stretched the row and left blank space beside the short
   ones. Column flow packs each card directly under the previous one in its column, so no
   card's height is set by an unrelated neighbour. Reading order is preserved: columns fill
   in document order. */
@media (min-width: 60rem) {
  .outcome-groups { display: block; columns: 2; column-gap: clamp(1rem, 2vw, 1.5rem); }
  .outcome-group { break-inside: avoid; margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
    display: inline-block; width: 100%; }
}
@media (min-width: 90rem) { .outcome-groups { columns: 3; } }

/* Equipment section switcher, building intake and pathway regions. */
.eq-views { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 1.5rem;
  border-bottom: 2px solid var(--rule); }
.eq-views .tab { text-decoration: none; }
.bf-grid { display: grid; gap: 0.9rem; }
@media (min-width: 46rem) { .bf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .bf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-controls { margin-bottom: 1.5rem; }
.ab-asset { border-top: 1px solid var(--rule); padding-block: 1rem; }
.eq-lookup { background: var(--surface); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.eq-result { margin-top: 1.25rem; }
.eq-filters { display: grid; gap: 0.9rem; margin: 1.25rem 0; }
@media (min-width: 46rem) { .eq-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Tools and resource routes (v13 composition) ------------------------- */
.oc-grid, .rr-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
@media (min-width: 68rem) {
  .oc-grid, .rr-grid { grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); }
}
.brief-head, .gap-head { border-top: 2px solid var(--ink); padding-top: 1rem; margin-top: 1.5rem; }
.brief-head .eyebrow { font-family: var(--font-display); font-weight: 660; font-size: 0.8125rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); }
.oc-row, .dim-row { border-top: 1px solid var(--rule); padding-block: 0.7rem; }
.rr-shot { background: var(--wash); border-left: 4px solid var(--logo-teal);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 0.9rem 1.1rem; margin: 1rem 0 1.5rem; }
.findlist { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.findlist li { border-top: 1px solid var(--rule); padding-block: 0.7rem; }
.res-controls { display: grid; gap: 0.9rem; margin: 1.25rem 0; }
@media (min-width: 46rem) { .res-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contents { background: var(--wash); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.25rem 0 1.75rem; }
.contents h2 { font-size: 0.9375rem; margin: 0 0 0.5rem; border: 0; padding: 0; }
.contents ul { margin: 0; padding-left: 1.1rem; }
.guide-step { border-top: 1px solid var(--rule); padding-block: 1.1rem; scroll-margin-top: 6rem; }
.guide-step h3 { margin-top: 0; font-size: 1.125rem; }

/* Saved profile states and the project-request workflow. */
.sp .state { background: var(--surface); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.sp .prof { margin-top: 1.25rem; }
.sp .retention { margin-top: 1.25rem; font-size: 1rem; }
.btn.danger { color: var(--attention); border-color: var(--attention); }
.pr-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
@media (min-width: 68rem) { .pr-grid { grid-template-columns: 15rem minmax(0, 1fr); } }
.pr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.pr-steps button { display: block; width: 100%; text-align: left; font: inherit; background: none;
  border: 0; border-left: 3px solid var(--rule); padding: 0.6rem 0 0.6rem 0.85rem; cursor: pointer;
  min-height: 44px; }
.pr-steps [aria-current="step"] button, .pr-steps [data-state="current"] button { border-left-color: var(--action); }
.pr-summary { background: var(--wash); border-radius: var(--radius); padding: 1rem 1.15rem; }

/* The brief eyebrow is a label; it takes the supporting-text floor, not the body floor. */
main[class] .brief-head .eyebrow { font-size: max(0.875rem, 0.875em); }

/* The legal renderer requires <main id="main"> verbatim, so those two pages carry no class
   and the main[class] floors cannot reach them. They are addressed by id instead. */
main#main p, main#main li, main#main dd, main#main dt { font-size: max(1rem, 1em); }
main#main .fine, main#main .legal-toc { font-size: max(0.875rem, 0.875em); }
main#main a.btn, main#main button, main#main summary { min-height: 44px; }

/* The legal pages are generated from templates and carry no class on <main>, so the
   class-scoped floors cannot reach their clause body. Addressed by their own region. */
.legal-body p, .legal-body li, .legal-body dd, .legal-body dt,
.legal-layout p, .legal-layout li { font-size: max(1rem, 1em); }
.legal-body .fine, .legal-layout .fine { font-size: max(0.875rem, 0.875em); }
@media screen and (min-width: 46rem) {
  main#main > section > .shell-wide, main#main > section > .shell { padding-block: clamp(1.5rem, 3vw, 3rem); }
}

/* The legal hero reserves 88px above and below on desktop; it is a page heading, not a band. */
@media screen and (min-width: 46rem) {
  main#main > section.hero-field > .shell-wide { padding-block: clamp(1.5rem, 3vw, 2.75rem); }
}

/* The legal hero owns its padding on the section itself, not on an inner wrapper — 96px top
   and bottom on desktop. Reduced to a page-heading rhythm, with the mobile spacing untouched. */
@media screen and (min-width: 46rem) {
  main#main > section.band.hero-field { padding-block: clamp(2rem, 4vw, 3.25rem); }
}

/* ===========================================================================
   Presence questions read across, not down

   "Which of these does it have?" put every system and its three answers in one long column,
   so a five-system building was a page of scrolling before the next stage. The three answers
   now sit side by side, and the systems themselves run two-up once there is width for it.
   Nothing is removed: every system, every answer and every note stays.
   =========================================================================== */
#system-applicability .applicability-row { border-top: 1px solid var(--rule); padding-block: 0.9rem; }
#system-applicability .applicability-row .choice-list,
#system-applicability .applicability-row ul {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem; margin: 0.6rem 0 0; padding: 0; list-style: none;
}
#system-applicability .applicability-row li { margin: 0; }
#system-applicability .applicability-row label.choice {
  display: flex; align-items: center; gap: 0.5rem; height: 100%;
  padding: 0.7rem 0.75rem; border: 1px solid var(--rule-control);
  border-radius: var(--radius-control); min-height: 44px;
}
#system-applicability .applicability-row label.choice:hover { background: var(--wash); }
#system-applicability .applicability-row .choice-title { font-size: 1rem; line-height: 1.2; }
@media (min-width: 60rem) {
  #system-applicability { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem); }
  #system-applicability > :first-child { grid-column: 1 / -1; }
}
/* Three across on a phone too, matching the answer cards the rest of the journey uses;
   the labels are short enough to wrap inside their own card. */
@media (max-width: 46rem) {
  #system-applicability .applicability-row label.choice { padding: 0.6rem 0.5rem; }
  #system-applicability .applicability-row .choice-title { font-size: 0.9375rem; }
}

/* The step snapshot sits with the steps it illustrates, at a controlled height, rather than
   taking a screen of its own under the hero. */
.steps-shot { margin-top: 1.5rem; }
.steps-shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); }
@media (min-width: 60rem) { .steps-shot img { aspect-ratio: 21 / 9; } }

/* A tool card is one target. The link keeps its own accessible name and keyboard focus; the
   pseudo-element extends the hit area over the whole card, so a visitor can press the card
   rather than hunting for the words. */
.tool { position: relative; }
.tool a[href]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tool:hover { background: var(--wash); }
.tool:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.tool a[href]:focus-visible { outline: none; }

/* "Continue with your building" — the two tools that live on their own routes, offered after
   the tools that live on this page. Cards, not footnotes. */
.continue-band { border-top: 2px solid var(--ink); margin-top: 2.5rem; padding-top: 1.25rem; }
.continue-cards { display: grid; gap: 0.9rem; margin-top: 1.25rem; }
@media (min-width: 46rem) { .continue-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.continue-card { position: relative; background: var(--surface); border-radius: var(--radius);
  border-top: 3px solid var(--logo-teal); padding: 1.1rem 1.25rem; }
.continue-card h3 { margin: 0 0 0.35rem; font-size: 1.125rem; }
.continue-card p { margin: 0 0 0.6rem; font-size: 1rem; line-height: 1.5; }
.continue-card a[href]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.continue-card:hover { background: var(--wash); }
.continue-card:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* Related tools on the Condition Profile: equal weight, outside the document. */
.related-tools { border-top: 2px solid var(--ink); margin-top: 2rem; padding-top: 1.1rem; }
.related-cards { display: grid; gap: 0.75rem; margin-top: 1rem; }
@media (min-width: 46rem) { .related-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.related-card { position: relative; background: var(--surface); border-radius: var(--radius);
  border-top: 3px solid var(--rule-control); padding: 0.95rem 1.1rem; }
.related-card h3 { margin: 0 0 0.3rem; font-size: 1.0625rem; }
.related-card p { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--body); }
.related-card a[href]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.related-card:hover { background: var(--wash); }
.related-card:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
@media print { .related-tools { display: none; } }

/* The governed lookup heading sits above the single Almanac lookup, not as a second band. */
.lookup-h { font-family: var(--font-display); font-weight: 660;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); margin: 0 0 0.6rem; color: var(--ink); }

/* Three compact disclosures rather than one closed wrapper: each heading stays readable on
   arrival, while its detail collapses. */
.alm-meth-group { border-top: 1px solid var(--rule); margin-top: 1.5rem; padding-top: 0.75rem; }
.alm-meth-item { border-top: 1px solid var(--rule); }
.alm-meth-item > summary { cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 0; min-height: 44px; }
.alm-meth-item > summary::-webkit-details-marker { display: none; }
.alm-meth-item > summary::after { content: "Show"; font-size: 0.875rem; font-weight: 600; color: var(--action); }
.alm-meth-item[open] > summary::after { content: "Hide"; }
.alm-meth-h { margin: 0; font-family: var(--font-display); font-weight: 620; font-size: 1.0625rem; color: var(--ink); }
.alm-meth-item-body { padding-bottom: 0.9rem; }
.alm-meth-item-body p { font-size: 1rem; line-height: 1.55; }
@media print { .alm-meth-item > summary::after { content: ""; }
  .alm-meth-item > .alm-meth-item-body { display: block !important; } }

/* The Almanac map keeps its own ratio on a phone: the homepage hero-map rule set 16/10 for a
   decorative preview, which is the wrong shape for the map a visitor actually works with. */
@media screen and (max-width: 46rem) {
  main[class] .alm-mapwrap #alm-map { aspect-ratio: 3 / 4; height: auto; max-height: none; }
  main[class] .alm-mapwrap { max-height: none; height: auto; }
}

/* ===========================================================================
   Tool workspaces

   Operating Conditions and Retrofit Readiness put their inputs in a narrow column and left
   most of a 1440px screen empty. Both become a real two-column workspace: a fixed input
   column and the remaining width for the explanation, result or empty state. They stack
   cleanly on a phone. No type is shrunk and no governed content is moved out.
   =========================================================================== */
@media screen and (min-width: 68rem) {
  main[class] .oc-grid, main[class] .rr-grid {
    display: grid; grid-template-columns: minmax(400px, 460px) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  }
  main[class] .oc-grid > :first-child, main[class] .rr-grid > :first-child { position: sticky; top: 6rem; }
  /* The output side uses the canvas it is given rather than a reading measure. */
  main[class] .oc-grid > :last-child, main[class] .rr-grid > :last-child { max-width: none; }
  main[class] .brief-head, main[class] .gap-head { grid-column: 1 / -1; }
}
@media screen and (max-width: 59.999rem) {
  main[class] .oc-grid, main[class] .rr-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  main[class] .oc-grid > :first-child, main[class] .rr-grid > :first-child { position: static; }
}

/* Seasonal Readiness opening: the seasonal example is a contained full-width preview, not a
   half-width crop with dead space beside it. */
.readiness-shot, main[class] .shot, main[class] figure.snapshot { width: 100%; margin-inline: 0; }
main[class] .readiness img, main[class] .readiness figure img {
  width: 100%; height: auto; max-width: none; object-fit: cover; border-radius: var(--radius);
}
@media screen and (min-width: 68rem) {
  main[class] .readiness > figure, main[class] .readiness > .shot { max-width: 68rem; margin-inline: auto; }
  main[class] .readiness img { aspect-ratio: 21 / 9; }
}

/* The Seasonal Readiness opening preview is a contained, balanced component rather than a
   896px crop sitting in the left 62% of a 1440px screen. */
/* `.hero-snapshot` is the <figure>, not the image: it holds the preview and its caption, and
   the governed 56rem measure is set in the page stylesheet. The image inside is what needs
   bounding — its own 1000/700 ratio made an 806px-tall picture on a 1440px screen. Bounding
   the image keeps the caption, the measure and the mobile presentation untouched. */
main[class] figure.hero-snapshot { margin-inline: auto; }
main[class] figure.hero-snapshot > img {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  object-fit: cover; object-position: top center;
}

/* An intrinsic image ratio outranks aspect-ratio here, so the preview is bounded directly. */
@media screen and (min-width: 68rem) {
  /* Approximately 520px: a deliberate contained preview, not a dominant image. */
  main[class] figure.hero-snapshot > img { max-height: 32rem; }
}

/* The hero-field section is a flex/grid parent that stretches its image; bound the image on
   its own box so the opening preview is balanced rather than 838px of crop. */


/* ===========================================================================
   Seasonal Readiness — a tool hub, not a calendar with hidden extras
   =========================================================================== */
.tool-chooser { border-top: 2px solid var(--ink); margin-top: 2rem; padding-top: 1.1rem; }
.chooser-h { margin: 0 0 0.9rem; font-size: 1.25rem; }
.chooser-grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .chooser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .chooser-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chooser-card { display: flex; flex-direction: column; gap: 0.3rem; text-align: left;
  padding: 0.95rem 1rem; min-height: 44px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--rule-control);
  border-top: 3px solid var(--rule-control); border-radius: var(--radius); }
.chooser-card:hover { background: var(--wash); }
.chooser-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.chooser-card[aria-selected="true"] { border-top-color: var(--logo-teal);
  background: var(--wash); box-shadow: inset 0 0 0 1px var(--logo-teal); }
.chooser-name { font-family: var(--font-display); font-weight: 640; font-size: 1.0625rem; color: var(--ink); }
.chooser-card[aria-selected="true"] .chooser-name::after { content: " — selected"; font-size: 0.8125rem;
  font-weight: 600; color: var(--logo-teal); }
.chooser-what { font-size: 0.9375rem; line-height: 1.4; color: var(--body); }

/* Workspaces use the canvas: controls beside results on desktop, stacked on a phone. */
.tool-workspace { margin-top: 1.5rem; }
.tool-workspace > .workspace-controls > * { margin-top: 0; }
@media (min-width: 68rem) {
  .tool-workspace { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }
  .tool-workspace > h2, .tool-workspace > h3, .tool-workspace > .lede { grid-column: 1 / -1; }
  .tool-workspace > .workspace-controls { position: sticky; top: 6rem; }
  .tool-workspace > .workspace-results { max-width: none; }
  /* The navigator's resources read as a card grid, not one long column. */
  #rd-panel-2 .workspace-results ul { display: grid; gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; }
}
@media (min-width: 100rem) {
  #rd-panel-2 .workspace-results ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#rd-panel-2 .workspace-results li { background: var(--surface); border-radius: var(--radius);
  border-top: 3px solid var(--logo-teal); padding: 0.9rem 1rem; }
/* Print exposes every tool; the chooser is an on-screen control and has no place on paper. */
@media print { .tool-chooser { display: none; } .tool-workspace[hidden] { display: grid !important; } }

/* Almanac topic control bar: the topic is chosen from a labelled control, not discovered. */
.alm-topicbar { border-top: 1px solid var(--rule); margin: 1.25rem 0 0.75rem; padding-top: 0.9rem; }
.topicbar-row { display: grid; gap: 0.9rem; align-items: end; }
@media (min-width: 60rem) { .topicbar-row { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); } }
.topicbar-field label { display: block; font-weight: 640; font-size: 0.9375rem; margin-bottom: 0.3rem; color: var(--ink); }
.topicbar-field select { width: 100%; min-height: 44px; }
.topicbar-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topic-quick, .topic-more { min-height: 44px; padding: 0.55rem 0.85rem; cursor: pointer;
  font-size: 0.9375rem; font-weight: 600; color: var(--action);
  background: var(--surface); border: 1px solid var(--rule-control); border-radius: var(--radius-control); }
.topic-quick:hover, .topic-more:hover { background: var(--wash); }
.topic-quick:focus-visible, .topic-more:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.topic-quick[aria-pressed="true"] { background: var(--logo-teal); border-color: var(--logo-teal); color: #fff; }
.topicbar-current { margin: 0.75rem 0 0; font-size: 1rem; color: var(--body); }
.topicbar-current strong { color: var(--ink); }

/* How It Works opens as a split hero: what ICI produces, said in words, beside the photograph
   — not a photograph on its own. */
.split-hero { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 68rem) { .split-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split-hero-copy > :first-child { margin-top: 0; }
.split-hero-media img, .split-hero-media figure { width: 100%; height: auto; border-radius: var(--radius); }
@media (min-width: 68rem) { .split-hero-media img { aspect-ratio: 4 / 3; object-fit: cover; max-height: 28rem; } }
.hero-actions { margin-top: 1.25rem; }

/* Country, place and systems are shared by all four tools, so they sit above the chooser. */
.readiness-controls.shared-context { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
@media (min-width: 60rem) {
  .readiness-controls.shared-context { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .readiness-controls.shared-context > fieldset { grid-column: 1 / -1; }
}

/* How It Works opens with words and a photograph side by side, inside the normal canvas —
   no overlay text, no oversized hero. On a phone the text comes first. */
.split-hero { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.split-hero-copy > :first-child { margin-top: 0; }
.split-hero-copy .eyebrow { margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--logo-teal); }
.hero-figure { margin: 0; }
.hero-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius);
  object-fit: cover; object-position: center; }
.hero-actions { margin-top: 1.35rem; }
@media (min-width: 68rem) {
  .split-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .hero-figure img { aspect-ratio: 4 / 3; max-height: 26rem; }
}
@media (max-width: 68rem) {
  .split-hero-copy { order: 1; }
  .split-hero-media { order: 2; }
  .hero-figure img { aspect-ratio: 16 / 10; }
}

/* ===========================================================================
   R15.9.3 — layout corrections written against the real rendered DOM.
   Every rule below names the element the browser actually lays out. The
   measurement that justified it is in conversion/LAYOUT_DIAGNOSIS_R1593.md.
   =========================================================================== */

/* 1. Paired fields collapsed into one stacked column.
   `.controls > div { display: flex; flex-direction: column }` earlier in this
   file matched `.capture-row` at specificity (0,1,1) and beat `.capture-row`
   (0,1,0). Every direct-child capture row on Operating Conditions, Retrofit
   Readiness and Seasonal Readiness stacked; rows nested inside a fieldset did
   not match and stayed two-up, which is why the same page showed both.
   The pairing condition is the width of the panel the row sits in, not the
   viewport, so it is asked of the container. */
.controls, .controls fieldset.field { container-type: inline-size; }
.controls .capture-row {
  display: grid; gap: 0 0.9rem; grid-template-columns: minmax(0, 1fr); align-items: start;
}
@container (min-width: 24rem) {
  .controls .capture-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 2. Seasonal Readiness systems list.
   `.choice-list` set two explicit template columns while `.choice-inline` set
   grid-auto-flow: column with 1fr implicit tracks. Five items in a 513px track
   produced columns of 63/63/112/140/103px holding labels 129/127/112/140/103px
   wide: the boxes overlapped by up to 59px and "Heating" and "Cooling" were
   covered down to "He" and "Co". The list wraps instead. */
main[class] .readiness-controls [data-readiness-systems] {
  grid-auto-flow: row; grid-auto-columns: auto; max-width: none;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem;
}
main[class] .readiness-controls [data-readiness-systems] > li { min-width: 0; }
main[class] .readiness-controls [data-readiness-systems] .choice { min-height: 0; padding: 0.7rem 0.9rem; }
/* The systems question is the width of the panel, not half of it. */
@media (min-width: 60rem) {
  main[class] .readiness-controls.shared-context > fieldset { grid-column: 1 / -1; }
}

/* 3. "Choose a tool" cards.
   Four tracks across 1210px gave 293px cards holding three lines of 15px copy.
   Two tracks give roughly 590px each: the name and its sentence sit on one or
   two lines and the row reads as four considered choices. */
@media (min-width: 68rem) {
  .chooser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
}
.chooser-card { padding: 1.05rem 1.15rem; gap: 0.35rem; }

/* 4. Seasonal Readiness opening preview.
   The figure measured 896 x 544 and the image inside it 896 x 512 — a
   half-screen picture ahead of the tool it illustrates. It is a caption-scale
   preview. */
main[class] figure.hero-snapshot { max-width: 44rem; }
@media screen and (min-width: 68rem) {
  main[class] figure.hero-snapshot > img { max-height: 20rem; }
}

/* 5. Almanac station markers (the jurisdiction choropleth and its national legends were
   withdrawn on methodology: a station measurement may not fill a jurisdiction polygon).
   Boundaries stay in their neutral navigation tone; the marker is a single accent that
   encodes nothing, because the value is printed rather than shaded. */
#alm-map path[data-code] { fill: var(--alm-boundary, #EDF1F4); }
.alm-marker { cursor: default; }
.alm-marker-halo { fill: #FFFFFF; fill-opacity: 0.85; stroke: #0F5C7A; stroke-width: 1; }
.alm-marker-dot { fill: #0F5C7A; }
.alm-marker:focus-visible { outline: none; }
.alm-marker:focus-visible .alm-marker-halo { stroke: var(--focus-ring, #B45309); stroke-width: 3; }
.alm-station-note { padding: 1rem clamp(0.75rem, 2vw, 1.25rem) 1.25rem; }
.alm-station-h { font-family: var(--font-display); font-weight: 660; color: var(--ink);
  margin: 0 0 0.35rem; font-size: 1rem; }
.alm-station-basis, .alm-station-count { font-size: 0.9375rem; line-height: 1.55;
  color: var(--body); margin: 0 0 0.4rem; max-width: 46rem; }
.alm-station-count { color: var(--muted); }
/* At 390px the markers must stay reachable and the note must not push the map off screen. */
@media (max-width: 30rem) {
  /* The halo used to be forced to r: 9 here so a finger could hit a marker. The marker now
     carries its own transparent hit circle, so the halo keeps its drawn size and no longer
     paints a large white disc over the map on a phone. */
  .alm-station-note { padding: 0.85rem 0.75rem 1rem; }
  .alm-station-basis, .alm-station-count { font-size: 0.875rem; }
}

/* 6. Operating Conditions and Retrofit Readiness workspaces.
   Measured cause: `.oc-grid` held the form and a lead paragraph, and `.rr-grid`
   held the form alone — the output sections were siblings below the grid. Two
   tracks were declared and one was used, so the form ran 1663px and 3660px
   down a 460px strip on the left with the page empty beside it, and the Gap
   Index output did not begin until 4715px down. The outputs are now the second
   grid child (see the page sources); these rules give the form enough width to
   pair its fields and hold the two-column layout to widths that can carry it. */
@media screen and (min-width: 60rem) {
  main[class] .oc-grid, main[class] .rr-grid {
    grid-template-columns: minmax(24rem, 34rem) minmax(22rem, 1fr);
    gap: clamp(2rem, 3.5vw, 3rem);
  }
}

/* 7. Retrofit Readiness systems — labelled sections rather than thirty stacked selects.
   One section is open at a time on screen; every governed question stays in the DOM whether
   its section is open or not, and print opens all of them. */
.retrofit-systems-progress { font-size: 0.9375rem; color: var(--body); margin: 0 0 0.75rem; }
.retrofit-system { border: 1px solid var(--rule-control); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 0.6rem; }
.retrofit-system[open] { border-color: var(--logo-teal); box-shadow: inset 0 0 0 1px var(--logo-teal); }
.retrofit-system-summary { display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.85rem 1rem; cursor: pointer; min-height: 44px; list-style: none; }
.retrofit-system-summary::-webkit-details-marker { display: none; }
.retrofit-system-summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.retrofit-system-name { font-family: var(--font-display); font-weight: 640; font-size: 1.0625rem; color: var(--ink); }
.retrofit-system-state { font-size: 0.8125rem; font-weight: 640; white-space: nowrap;
  padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--wash); color: var(--muted); }
.retrofit-system-state[data-state="partial"] { color: var(--action); }
.retrofit-system-state[data-state="complete"] { color: var(--logo-teal); }
.retrofit-system-body { padding: 0 1rem 1rem; display: grid; gap: 0.7rem; }
.retrofit-system-body > label { display: flex; flex-direction: column; gap: 0.3rem;
  font-weight: 600; font-size: 0.9375rem; }
@container (min-width: 24rem) {
  .retrofit-system-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Print carries the whole record, open or not. */
@media print {
  .retrofit-system { display: block; }
  .retrofit-system > .retrofit-system-body { display: block !important; content-visibility: visible !important; }
  .retrofit-system { break-inside: avoid; border-color: #999; box-shadow: none; }
  .retrofit-system:not([open]) > .retrofit-system-body { display: block !important; }
}

/* 8. Founder review was conducted at roughly 1100–1150px, not 1440. Two defects live only in
   that band, and both are fixed against the real rendered page at that width.

   8a. A workspace must not reserve a column for nothing.
   `.tool-workspace` is a 400px + 1fr grid. The Seasonal calendar and the cost-drivers tool
   take their inputs from the shared context block above the chooser, so their
   `.workspace-controls` element is genuinely empty — and the grid still held 400px open beside
   the results, which is why the tool read as half-built. A workspace with no controls of its
   own uses the whole width instead. */
@media (min-width: 68rem) {
  main[class] .tool-workspace:has(> .workspace-controls:empty) {
    grid-template-columns: minmax(0, 1fr);
  }
}
main[class] .tool-workspace > .workspace-controls:empty { display: none; }

/* 8b. Workspace proportions between 68rem and 80rem.
   A left column fixed at 34rem left the output 352px at 1100px wide — the Gap Index table in
   a third of the canvas. In this band the two columns share the width instead, and the form's
   fields stack rather than pairing, which the container query below already handles on its
   own measurement rather than on the viewport. */
/* Tablet landscape through the founder-review band. The form is the taller of the two
   columns here, so it takes the larger share — which is also what lets its paired fields sit
   two-up instead of stacking. */
@media screen and (min-width: 60rem) and (max-width: 79.999rem) {
  main[class] .oc-grid, main[class] .rr-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(21rem, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
  }
}
@media screen and (min-width: 80rem) {
  main[class] .oc-grid, main[class] .rr-grid {
    grid-template-columns: minmax(24rem, 34rem) minmax(26rem, 1fr);
  }
}

/* 9. Field wrappers were being painted as form controls.
   `.field, input, select, textarea { border: 1px solid ... }` and
   `.field, select.field, .btn { min-height: var(--control-h) }` treat `.field` as a control.
   On the capture forms `.field` is the WRAPPER around a label and its select, so every wrapper
   drew its own bordered, padded, rounded card around a control that already has one: measured
   116px per field, 2,062px of form, a column of boxes to scroll rather than a form to fill.
   A wrapper is identified by what it contains, not by a class chosen here. */
/* Site-wide, not only the capture forms. The first pass scoped this to `.controls`, which
   left the Check journey (one question measuring 210px), the Almanac lead form and the saved
   profile form still drawing a control-shaped card around each wrapper. A real control keeps
   its border: `select.field` on /resources/ has option children, never a label or an input,
   so the predicate below leaves it alone. */
/* `:not([hidden])` is load-bearing: `display: grid` outranks the [hidden] attribute's own
   display:none, and without it a gated field in the lead form reserved 102px of height while
   invisible. [hidden] staying authoritative is one of the protected fixes. */
main[class] .field:has(> label):not([hidden]),
main[class] .field:has(> select):not([hidden]),
main[class] .field:has(> input):not([hidden]) {
  border: 0; background: none; border-radius: 0; box-shadow: none;
  padding: 0; min-height: 0; margin: 0; max-width: none;
  display: grid; gap: 0.3rem; align-content: start;
}
main[class] .field:has(> label):not([hidden]) > label,
main[class] .field:has(> select):not([hidden]) > label,
main[class] .field:has(> input):not([hidden]) > label {
  font-weight: 600; line-height: 1.3; margin: 0;
}
/* Helper text inside a wrapper sits with its control, not as a third stacked block. */
main[class] .field:has(> label):not([hidden]) > p { margin: 0; font-size: 0.9375rem; color: var(--muted); }
/* The rule lines belonged to the card treatment; the grid gap does the separating now. */
main[class] .field.oc-row,
main[class] .field.dim-row,
main[class] .controls label.oc-row,
main[class] .controls label.dim-row { border-top: 0; padding-block: 0; }
/* A fieldset is a real group and keeps its outline, but not the control's min-height. */
main[class] .controls fieldset.field {
  min-height: 0; max-width: none; background: none;
  border: 1px solid var(--rule-control); border-radius: var(--radius);
  padding: 0.9rem 1.05rem 1.05rem; margin: 0 0 1.25rem;
}
main[class] .controls fieldset.field > legend { font-weight: 660; padding-inline: 0.35rem; }
/* Rows and stacks space themselves, so the spacing lives in one place. */
main[class] .controls .capture-row { row-gap: 1.1rem; margin-bottom: 1.1rem; }
main[class] .controls fieldset.field .capture-row:last-child { margin-bottom: 0; }

/* 9a. Grouped system questions use the same column rhythm as the paired rows above them.
   They were the one block still running one-per-row at full width inside a fieldset whose
   sibling group had already paired. */
main[class] .controls .brief-systems,
main[class] .controls [data-brief-systems] {
  display: grid; gap: 0.3rem 0.9rem; align-items: start;
}
@container (min-width: 24rem) {
  main[class] .controls .brief-systems,
  main[class] .controls [data-brief-systems] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
main[class] .controls .brief-system,
main[class] .controls [data-brief-systems] > label {
  display: grid; gap: 0.3rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.8rem;
}
/* The first control in a group sat against its legend. */
main[class] .controls fieldset.field > :first-child:not(legend),
main[class] .controls fieldset.field > legend + * { margin-top: 0.35rem; }

/* Source acknowledgement under the station map. Required wherever ECCC information is
   published, so it renders in the arrival state, not only in the jurisdiction panel. */
.alm-station-src { font-size: 0.8125rem; color: var(--muted); margin: 0.6rem 0 0;
  padding-top: 0.6rem; border-top: 1px solid var(--rule); max-width: 46rem; }
.alm-station-src a { color: var(--link, #0F5C7A); }

/* 10. Project request: two layouts were styling the same element.
   The progress <ol> carries both `pr-steps` and `request-progress`, and the <form> carries
   both `pr-grid` and `request-form`. `.pr-grid` is the older design: a 15rem vertical rail
   beside the questions. `.request-progress` is the newer one: a horizontal four-step stepper
   across the full width, with `.request-layout` already providing the form-and-aside split.
   Both applied, so the horizontal stepper was squeezed into the vertical rail's 240px column:
   four 58px tracks holding titles like "Information you already hold", which wrapped to five
   lines. The newer layout wins where both are present; `.pr-grid` is untouched everywhere it
   is used alone. */
@media (min-width: 68rem) {
  main[class] .pr-grid.request-form { grid-template-columns: minmax(0, 1fr); }
}
main[class] .request-progress.pr-steps { gap: 0.5rem; }
main[class] .request-progress.pr-steps button { border-left: 0; padding-left: 0; }

/* 11. The step heading is focused programmatically on every step change so assistive
   technology lands on the new step. `.step-heading:focus` already suppresses the visible ring
   for exactly this reason, but this page's heading is `.request-step-heading`, a different
   class token, so the rule never matched it and a heavy focus box was painted around
   "About the project" on arrival. Keyboard focus on the step buttons is unaffected. */
main[class] .request-step-heading:focus,
main[class] .request-step-heading:focus-visible { outline: none; box-shadow: none; }

/* 12. The project request mounts into a bare <div id="project-request"> sitting between two
   sections, with no shell wrapper and no band. Every other block on the page is inset by the
   gutter; this one started at x=0, so the stepper, the questions and the aside were all
   misaligned against the heading above them. It takes the same metrics as `.shell-wide` so it
   lines up with the rest of the page, and the band padding the surrounding sections have. */
main[class] #project-request { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

/* ===========================================================================
   13. Seasonal readiness page. The page previously opened with a product name and a
   paragraph, then asked for a location before showing anything. It now opens on an outcome,
   promotes the season the visitor is actually in, names the authorities the guidance comes
   from, and lists all ten tools rather than four. The interactive tool underneath is
   unchanged.
   =========================================================================== */
.rd-hero { padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.5rem, 3vw, 2.25rem); }
.rd-hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 60rem) { .rd-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.rd-hero-copy h1 { margin: 0.4rem 0 0.8rem; max-width: 22ch; }
.rd-hero-copy .lead { max-width: 36rem; margin-bottom: 1.2rem; }
.rd-hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0; }
.rd-hero-photo { width: 100%; height: auto; max-height: 22rem; object-fit: cover;
  border-radius: var(--radius); display: block; }
/* A 3:2 photograph beside a tall copy column leaves the hero looking short on one side. A 4:3
   crop at desktop balances the two and keeps the image a contained component rather than a
   banner. */
@media (min-width: 60rem) { .rd-hero-photo { aspect-ratio: 4 / 3; height: auto; } }
.rd-hero-cap { font-size: 0.8125rem; color: var(--muted); margin: 0.5rem 0 0; }

.rd-now { background: var(--paper); border-block: 1px solid var(--rule); padding-block: 1.6rem; }
.rd-now-grid { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 62rem) { .rd-now-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.rd-kicker { font: 700 0.75rem/1 var(--font-mono, "DejaVu Sans Mono", monospace);
  letter-spacing: 0.12em; text-transform: uppercase; color: #A16207; margin: 0 0 0.4rem; }
.rd-now-h { font-size: 1.5rem; color: var(--ink); margin: 0 0 0.5rem; }
.rd-now-s { font-size: 1.0625rem; color: var(--body); margin: 0 0 0.4rem; max-width: 40rem; }
.rd-now-src { font-size: 0.8125rem; color: var(--muted); margin: 0; font-style: italic; }

.rs-row { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem; margin: 0; padding: 0; max-width: none; }
@media (max-width: 34rem) { .rs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rs { border-top: 3px solid var(--sc); padding: 0.75rem 0.7rem 0.85rem; background: var(--wash);
  position: relative; }
.rs.is-now { background: var(--paper); box-shadow: inset 0 0 0 1px var(--sc); }
.rs .sm { width: 38px; height: 38px; display: block; margin-bottom: 0.35rem; }
.rs-n { font-family: var(--font-display); font-weight: 680; color: var(--ink);
  font-size: 0.9375rem; margin: 0; }
.rs-t { font-size: 0.8125rem; color: var(--muted); margin: 0.05rem 0 0; line-height: 1.35; }
.rs-now { position: absolute; top: 0.55rem; right: 0.6rem;
  font: 700 0.625rem/1 var(--font-mono, "DejaVu Sans Mono", monospace); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sc); margin: 0; }
/* Seasonal marks: the building is the subject, the weather is the setting. Nothing here
   states a condition anywhere, and none of it is a forecast. */
.sm .sk { stroke: var(--rule-control); stroke-width: 2; fill: none; }
.sm .bl { fill: #FFFFFF; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.sm .rf { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sm .wn { fill: var(--sc); opacity: 0.24; stroke: var(--ink); stroke-width: 1.4; }
.sm .ac { stroke: var(--sc); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.sm .ac2 { fill: var(--sc); opacity: 0.85; }

.rd-trust { padding-block: 1.25rem; }
.rd-trust-l { font: 600 0.75rem/1 var(--font-mono, "DejaVu Sans Mono", monospace);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; }
.rd-trust-b { font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink);
  margin: 0 0 0.5rem; line-height: 1.5; max-width: none; }
.rd-trust-n { font-size: 0.8125rem; color: var(--muted); margin: 0; max-width: 52rem; }

.rd-h2 { font-size: 1.375rem; color: var(--ink); margin: 0 0 0.9rem;
  border-top: 2px solid var(--ink); padding-top: 0.8rem; }
.rd-toolstrip { padding-block: 1.75rem 0.5rem; }
.tc-row { list-style: none; display: grid; gap: 0.75rem; margin: 0; padding: 0; max-width: none;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.tc { background: var(--paper); border: 1px solid var(--rule-control);
  border-top: 3px solid var(--logo-teal); padding: 1rem; }
.tc-n { font-family: var(--font-display); font-weight: 660; color: var(--ink);
  font-size: 1rem; margin: 0 0 0.25rem; }
.tc-d { font-size: 0.875rem; color: var(--body); margin: 0; }
.ti { width: 26px; height: 26px; display: block; margin-bottom: 0.5rem; }
.ti .bl { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.ti .rf { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.ti .ac { stroke: var(--logo-teal); stroke-width: 2; stroke-linecap: round; }
.ti .ac2 { fill: var(--action); }

.rd-more { padding-block: 2rem 2.5rem; }
.rd-more-grid { list-style: none; display: grid; gap: 0.75rem; margin: 0; padding: 0;
  max-width: none; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.rd-more-grid a { display: block; background: var(--paper); border: 1px solid var(--rule-control);
  border-left: 3px solid var(--action); padding: 0.9rem 1rem; text-decoration: none; height: 100%; }
.rd-more-grid strong { display: block; color: var(--ink); font-family: var(--font-display);
  font-size: 1rem; margin-bottom: 0.2rem; }
.rd-more-grid span { display: block; font-size: 0.875rem; color: var(--body); }

/* 14. Maintenance routine. Captures what the occupant already does and answers with governed
   statements only. ICI holds no published cadence for any of these tasks, so the module states
   that rather than filling the gap with a number; the styling gives that line real presence
   instead of hiding it as fine print. */
.rd-maint { padding-block: 2rem 1rem; }
.rd-maint-lede { max-width: 46rem; margin: 0 0 1.25rem; }
.mr-form { background: var(--paper); border: 1px solid var(--rule-control); padding: 1.15rem 1.25rem; }
.mr-grid { display: grid; gap: 1rem 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.mr-q { display: grid; gap: 0.3rem; align-content: start; }
.mr-q label { display: grid; gap: 0.1rem; }
.mr-q-l { font-weight: 640; color: var(--ink); }
.mr-q-a { font-size: 0.875rem; color: var(--muted); }
.mr-boundary { margin: 1rem 0 0; }
.mr-out { margin-top: 1.25rem; display: grid; gap: 0.85rem; }
.mr-out-h { font: 600 0.75rem/1 var(--font-mono, "DejaVu Sans Mono", monospace); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--action); margin: 0; }
.mr-card { background: var(--paper); border: 1px solid var(--rule-control);
  border-left: 3px solid var(--logo-teal); padding: 1rem 1.15rem; }
.mr-card h3 { font-size: 1.0625rem; color: var(--ink); margin: 0 0 0.4rem; }
.mr-you { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.mr-you span { font-weight: 640; color: var(--muted); }
.mr-h { font: 600 0.75rem/1 var(--font-mono, "DejaVu Sans Mono", monospace); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.35rem; }
.mr-list { list-style: none; margin: 0 0 0.85rem; padding: 0; display: grid; gap: 0.6rem; max-width: none; }
.mr-list p { margin: 0; font-size: 0.9375rem; }
.mr-src { font-size: 0.8125rem; color: var(--muted); margin-top: 0.15rem !important; }
.mr-gap { font-size: 0.9375rem; color: var(--body); margin: 0 0 0.85rem;
  border-left: 3px solid var(--rule-control); padding-left: 0.8rem; }
.mr-pro { margin: 0; font-size: 0.9375rem; }

/* 15. Readiness flow. Three stacked blocks become one stepped sequence: pick a tool, then the
   country, then the optional detail. The results are deliberately left outside the sequence,
   below it, so a selected tool is always showing its own output. */
.rd-flow { background: var(--paper); border: 1px solid var(--rule-control);
  border-top: 3px solid var(--logo-teal); padding: 1.25rem 1.35rem 1.35rem; margin-bottom: 1.5rem; }
.rd-flow-head { margin-bottom: 1.1rem; }
.rd-flow-count { font: 600 0.75rem/1 var(--font-mono, "DejaVu Sans Mono", monospace);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); margin: 0 0 0.5rem; }
.rd-flow-track { height: 3px; background: var(--rule); overflow: hidden; }
.rd-flow-track i { display: block; height: 3px; background: var(--logo-teal); width: 0;
  transition: width 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); }
.rd-flow-body { display: flex; flex-direction: column; }
/* The chooser renders first without moving it ahead of the form in the document, which the
   tool's own code depends on. */
.rd-flow-body > .tool-chooser { order: -1; }
.rd-flow-body > .rd-flow-step-h { order: -2; }
.rd-flow-body > form.readiness-controls { order: 0; }
.rd-flow-step { display: none; }
.rd-flow-step.is-on { display: block; }
form.readiness-controls .rd-flow-step-h { margin-bottom: 0.9rem; }
.rd-flow-step-h { margin-bottom: 0.9rem; }
.rd-flow-t { font-family: var(--font-display); font-weight: 680; font-size: 1.25rem;
  color: var(--ink); margin: 0 0 0.2rem; }
.rd-flow-hint { font-size: 0.9375rem; color: var(--muted); margin: 0; max-width: 44rem; }
@media (prefers-reduced-motion: no-preference) {
  .rd-flow-step.in-r { animation: rdIn 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .rd-flow-step.in-l { animation: rdInL 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
}
@keyframes rdIn { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes rdInL { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } }
.rd-flow-nav { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; margin-top: 1.2rem; }
.rd-flow-all { background: none; border: 0; padding: 0.4rem 0; color: var(--logo-teal);
  font: inherit; font-size: 0.875rem; text-decoration: underline; cursor: pointer; }
.rd-flow-all:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* Inside the flow the chooser heading is the step heading, and the form is no longer a panel
   of its own. */
[data-flow="on"] .tool-chooser { margin: 0; }
/* The chooser heading is the step heading, styled to match the injected ones. */
[data-flow="on"] .chooser-h { font-family: var(--font-display); font-weight: 680;
  font-size: 1.25rem; color: var(--ink); margin: 0 0 0.2rem; }
[data-flow="on"] form.readiness-controls { background: none; border: 0; padding: 0; margin: 0; }
@media print { .rd-flow-step { display: block !important; } .rd-flow-nav, .rd-flow-head { display: none !important; } }

/* 16. Stepped forms. Twelve questions on Operating Conditions and thirty on Retrofit read as a
   wall in one column. One group at a time, with every field still in the DOM and print opening
   all of them. */
.fs-head { margin: 0 0 1.1rem; }
.fs-count { font: 600 0.75rem/1 var(--font-mono, "DejaVu Sans Mono", monospace);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); margin: 0 0 0.5rem; }
.fs-track { height: 3px; background: var(--rule); overflow: hidden; }
.fs-track i { display: block; height: 3px; background: var(--logo-teal); width: 0;
  transition: width 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); }
[data-stepped="on"] .fs-step { display: none; }
[data-stepped="on"] .fs-step.is-on { display: block; }
@media (prefers-reduced-motion: no-preference) {
  [data-stepped="on"] .fs-step.in-r { animation: fsIn 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  [data-stepped="on"] .fs-step.in-l { animation: fsInL 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
}
@keyframes fsIn { from { opacity: 0; transform: translate3d(26px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fsInL { from { opacity: 0; transform: translate3d(-26px, 0, 0); } to { opacity: 1; transform: none; } }
.fs-nav { display: flex; gap: 0.65rem; align-items: center; flex-wrap: wrap; margin: 1.2rem 0 0.25rem; }
.fs-all { background: none; border: 0; padding: 0.4rem 0; color: var(--logo-teal); font: inherit;
  font-size: 0.875rem; text-decoration: underline; cursor: pointer; }
.fs-all:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media print {
  [data-stepped="on"] .fs-step { display: block !important; }
  .fs-nav, .fs-head { display: none !important; }
}

/* 17. Building record tools. Four short records of what someone already knows, answered with
   governed statements and published Almanac measurements. Nothing here scores or rates: the
   Almanac block is styled as context, deliberately quieter than the guidance above it, because
   a measurement near a building is not a finding about it. */
.br-chooser { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-bottom: 1rem; }
.br-card { text-align: left; background: var(--paper); border: 1px solid var(--rule-control);
  border-top: 3px solid var(--rule-control); padding: 1rem 1.1rem; cursor: pointer; display: grid;
  gap: 0.25rem; align-content: start; }
.br-card[aria-selected="true"] { border-top-color: var(--logo-teal);
  box-shadow: inset 0 0 0 1px var(--logo-teal); }
.br-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.br-card-n { font-family: var(--font-display); font-weight: 660; color: var(--ink); font-size: 1rem; }
.br-card-b { font-size: 0.875rem; color: var(--body); }
.br-card-m { font: 600 0.75rem/1 var(--font-mono, "DejaVu Sans Mono", monospace);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.br-boundary { max-width: 52rem; margin: 0 0 1.35rem; }
.br-body { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 68rem) { .br-body { grid-template-columns: minmax(24rem, 34rem) minmax(22rem, 1fr); } }
.br-form { background: var(--paper); border: 1px solid var(--rule-control); padding: 1.15rem 1.25rem; }
.br-group { border: 1px solid var(--rule-control); border-radius: var(--radius);
  padding: 0.9rem 1.05rem 1.05rem; margin: 0 0 1.1rem; min-height: 0; }
.br-group > legend { font-weight: 660; padding-inline: 0.35rem; }
.br-hint { font-size: 0.875rem; color: var(--muted); margin: 0.2rem 0 0.8rem; }
.br-qs { display: grid; gap: 0.75rem 0.9rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.br-q { display: grid; gap: 0.3rem; align-content: start; }
.br-q label { font-weight: 600; line-height: 1.3; }
.br-out { display: grid; gap: 0.85rem; }
.br-out-h { font: 600 0.75rem/1 var(--font-mono, "DejaVu Sans Mono", monospace); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--action); margin: 0; }
.br-card-out { background: var(--paper); border: 1px solid var(--rule-control);
  border-left: 3px solid var(--logo-teal); padding: 1rem 1.15rem; }
.br-say { margin: 0; font-size: 1rem; color: var(--ink); }
.br-gov { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0.6rem; max-width: none; }
.br-gov p { margin: 0; font-size: 0.9375rem; }
.br-src { font-size: 0.8125rem; color: var(--muted); }
.br-links { margin: 0.8rem 0 0; font-size: 0.9375rem; }
.br-h { font: 600 0.75rem/1 var(--font-mono, "DejaVu Sans Mono", monospace); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; }
/* Context, not a finding: quieter border, no accent. */
.br-alm { border-left-color: var(--rule-control); }
.br-alm-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.4rem; max-width: none; }
.br-alm-list strong { font-size: 1.125rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.br-alm-list .br-src { display: block; }
.br-note { font-size: 0.8125rem; color: var(--muted); margin: 0; }
.br-ask { border-left-color: var(--action); }
.br-asklist { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9375rem; max-width: none; }
.br-closing { font-size: 0.9375rem; color: var(--body); margin: 0; border-left: 3px solid var(--rule-control);
  padding-left: 0.9rem; max-width: 46rem; }

/* 18. Check journey measure. Two nested layouts were each taking their share of the same
   width: `.check-grid` gives 15rem to the progress rail, and inside the 651px that remained
   `.intake-layout` split again into 271px of questions and 336px of aside. The questions, which
   are the page, ended up the narrowest column on it, with governed helper copy wrapping to six
   lines while shell sat unused.

   The aside sits under the questions instead of competing with them, and the questions take
   the column they were always meant to have, capped at a readable measure rather than running
   the full width.
   A three-column attempt at 84rem was measured and abandoned: it gave the questions 411px at
   1440, narrower than the 651px they get at 1100, because the shell caps at 76rem and three
   columns simply do not fit inside it. The aside sits under the questions at every width. */
@media (min-width: 68rem) {
  main[class] .intake-layout { grid-template-columns: minmax(0, 1fr); max-width: none; }
  main[class] .intake-layout > .intake-aside { position: static; max-width: 46rem; margin-top: 1.5rem; }
  main[class] .check-grid > :last-child { min-width: 0; }
  main[class] .intake-layout .check-step { max-width: 46rem; }
}


/* ---------- Five steps beside the snapshot (R15.10.2) ---------------------- */
/* .ici-steps is repeat(auto-fit, minmax(15rem,1fr)) and was written for three steps. Five
   items land as two columns with a stranded fifth, and reading order runs 1,2 across then
   3,4 across before dropping. Inside .steps-split the list is one column at a readable
   measure and the snapshot takes the other half, so neither is the full band. */
.steps-split { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.steps-split > h2, .steps-split > .steps-sub { grid-column: 1 / -1; }
.steps-split > .steps-sub { font-size: 1.0625rem; color: var(--muted); max-width: 54ch;
  margin: 0.3rem 0 0.4rem; }
main[class] .steps-split > ol.ici-steps { grid-template-columns: minmax(0, 1fr); margin: 0; }
main[class] .steps-split > ol.ici-steps li { max-width: 52ch; }
/* Beats main[class] figure.snapshot { margin-inline: 0 }, which also defeated the centring
   .profile-snapshot intended. Inside the grid the column does the placing. */
main[class] .steps-split > figure.profile-snapshot { position: sticky; top: 1.25rem;
  margin: 0; max-width: none; }
@media (max-width: 60rem) {
  .steps-split { grid-template-columns: minmax(0, 1fr); }
  main[class] .steps-split > figure.profile-snapshot { position: static; max-width: 34rem; }
  main[class] .steps-split > ol.ici-steps li { max-width: none; }
}

/* ---------- /building-record/ static tool index (R15.10.2) ----------------- */
/* Inside <div data-building-record>, so building-record.js replaces it on mount. What a
   crawler and a visitor without JavaScript see. Never the interactive state. */
.br-static-list { list-style: none; margin: 0.75rem 0 1.25rem; padding: 0; display: grid;
  gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.br-static-item { background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--logo-teal); border-radius: var(--radius); padding: 0.9rem 1rem; }
.br-static-h { font-size: 1.0625rem; margin: 0 0 0.3rem; }
.br-static-b { font-size: 0.9375rem; color: var(--body); margin: 0 0 0.4rem; }
.br-static-t { font: 600 0.75rem/1 var(--font-mono, monospace); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 0; }
.br-static-note { font-size: 0.8125rem; color: var(--muted); max-width: 70ch; margin: 0; }

/* ---------- /readiness/ redesign (R15.10.2) -------------------------------- */
/* The logo carries five colours and the page was using two. Ember is the live accent:
   the eyebrow, the selected tool, the disclosure spine, the primary action. */

/* The shell ran to 104rem, which is why four short cards stretched past 700px each. */
main[class] .readiness, main[class] .rd-hero-grid, main[class] .rd-now-grid,
main[class] .rd-more > .shell-wide, main[class] .rd-disc > .shell-wide,
main[class] .rd-maint > .shell-wide { max-width: 76rem; margin-inline: auto; }

.rd-tally { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.1rem 0 0; padding: 0; }
.rd-tally li { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.5rem 0.75rem;
  background: var(--wash); border-left: 3px solid var(--sc, var(--logo-teal)); }
.rd-tally b { font: 700 1.15rem/1 var(--font-mono, monospace); color: var(--ink); }
.rd-tally span { font-size: 0.8125rem; color: var(--muted); }

.rd-setup-h { margin-bottom: 1rem; }
.rd-setup-h .eyebrow { color: var(--ember-ink); }
.rd-setup-lede { font-size: 0.9375rem; color: var(--muted); max-width: 56ch; margin: 0.25rem 0 0; }
main[class] .readiness-controls.shared-context { border-top: 3px solid var(--logo-slate); }

/* Four across, sized to their content, one logo accent each. */
main[class] .tool-chooser .chooser-lede { font-size: 0.9375rem; color: var(--muted);
  max-width: 56ch; margin: 0.2rem 0 0.9rem; }
main[class] .tool-chooser .eyebrow { color: var(--ember-ink); margin-bottom: 0.5rem; }
/* Two columns, not four. The original complaint was 700px cards, but that came from the
   104rem shell, not the column count: capped at 76rem, two columns give about 460px. Four
   would give 223px at 1100, which gate-founder-review rejects as cramped, and it is right. */
@media (min-width: 60rem) {
  main[class] .chooser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  main[class] .chooser-card { padding: 0.9rem 1rem; }
}
main[class] .chooser-card:nth-child(1) { border-top-color: var(--ember-bar); }
main[class] .chooser-card:nth-child(2) { border-top-color: var(--logo-teal); }
main[class] .chooser-card:nth-child(3) { border-top-color: var(--logo-slate); }
main[class] .chooser-card:nth-child(4) { border-top-color: var(--logo-navy); }
main[class] .chooser-card[aria-selected="true"] { background: var(--tint-teal); }
/* The output rule bans dashes. This selector was injecting an em dash into the page. */
main[class] .chooser-card[aria-selected="true"] .chooser-name::after { content: " \2713";
  color: var(--logo-teal); font-size: 1rem; }

.rd-more-where { font: 700 0.68rem/1 var(--font-mono, monospace); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--logo-slate); margin: 1.4rem 0 0.6rem;
  padding-bottom: 0.45rem; border-bottom: 2px solid var(--logo-mist); }
.rd-more-lede { font-size: 0.9375rem; color: var(--muted); margin: 0.2rem 0 0; }
main[class] .rd-more-br a { border-left-color: var(--logo-teal); }
main[class] .rd-more-grid:not(.rd-more-br) a { border-left-color: var(--logo-slate); }

/* Disclosures: the two blocks that dominated the page now open on request. */
.rd-details { background: var(--surface); border: 1px solid var(--rule); }
.rd-details[open] { border-left: 3px solid var(--ember-bar); }
.rd-details > summary { list-style: none; cursor: pointer; padding: 0.95rem 1.1rem;
  display: flex; align-items: center; gap: 0.8rem; }
.rd-details > summary::-webkit-details-marker { display: none; }
.rd-details > summary:hover { background: var(--wash); }
.rd-details > summary:focus-visible { outline: 3px solid var(--ember-bar); outline-offset: -3px; }
.rd-disc-t { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.rd-disc-s { font-size: 0.8125rem; color: var(--muted); margin-left: auto; text-align: right; }
.rd-chev { width: 11px; height: 11px; flex: none; border-right: 2px solid var(--ember-bar);
  border-bottom: 2px solid var(--ember-bar); transform: rotate(45deg); transition: transform 0.18s; }
.rd-details[open] > summary .rd-chev { transform: rotate(-135deg); }
.rd-details-body { padding: 1rem 1.1rem 1.25rem; border-top: 1px solid var(--rule); }
.sr-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
@media (max-width: 40rem) { .rd-disc-s { display: none; } }

/* Province wraps to two lines and Country does not, so with equal-height fields the two
   selects sat 22px apart. The control is pinned to the bottom of its field instead. */
main[class] .readiness-controls .capture-row > .field { display: flex; flex-direction: column;
  height: 100%; }
main[class] .readiness-controls .capture-row > .field > select { margin-top: auto; }

/* The tool index items are cards, not text links: a heading, an outcome description and a
   click target covering the whole card. gate-entry-points asserts all three. */
main[class] .rd-more-card { position: relative; }
main[class] .rd-more-grid .rd-more-card a { display: block; height: 100%; }
main[class] .rd-more-grid .rd-more-card a::after { content: ""; position: absolute; inset: 0; }
main[class] .rd-more-grid .rd-more-card h3 { font-family: var(--font-display); font-size: 1rem;
  color: var(--ink); margin: 0 0 0.2rem; }
main[class] .rd-more-grid .rd-more-card p { font-size: 0.875rem; color: var(--body); margin: 0; }

/* ---------- Global reading measure (R15.10.2, group one) ------------------- */
/* The site ran every band at min(86rem, …). At 1440 that is 1325px and at 1920 it is 1376px,
   which is why four short cards could take 300px+ each and a paragraph could run past 110
   characters. The reading measure is 76rem. Expressed as a token so a surface that genuinely
   needs the full canvas opts out in one line rather than by re-declaring the width. */
:root { --shell-wide-max: 76rem; }
.shell-wide { width: min(var(--shell-wide-max), 100% - var(--gutter) * 2); }

/* Opt-outs. The masthead and the colophon span the page by design, and the Almanac map is a
   canvas rather than a column: narrowing it removes map, not whitespace. */
.masthead .shell-wide, .nav-menu .shell-wide, .colophon .shell-wide,
.alm .shell-wide, .shell-wide.alm { --shell-wide-max: 86rem; }

/* ---------- Homepage colour and containment (R15.10.2, group one) ---------- */
/* The palette is the logo's five colours, already defined as tokens. Nothing new is invented
   here. Colour is used where it carries meaning and nowhere else: the three evidence labels
   are the vocabulary the Condition Profile itself uses, and the next-steps list is an
   escalation from paperwork to a licensed trade. Decorative colour is not added. */

/* Boxed definition lists. The hairline rows ran the full measure with no containment, so a
   term and its explanation read as one undifferentiated column. */
.deflist-boxed { display: grid; gap: 0.7rem; margin: 1.5rem 0 1.5rem; }
@media (min-width: 52rem) {
  .deflist-boxed { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
main[class] .deflist-boxed > div { display: block; background: var(--surface);
  border: 1px solid var(--rule); border-top: 3px solid var(--dk, var(--logo-slate));
  border-bottom: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.9rem 1rem; grid-template-columns: none; gap: 0; }
main[class] .deflist-boxed > div:last-child { border-bottom: 1px solid var(--rule); }
.deflist-boxed dt { font-size: 1rem; margin-bottom: 0.25rem; color: var(--dk-ink, var(--ink)); }
.deflist-boxed dd { font-size: 0.9375rem; line-height: 1.5; }

/* The evidence vocabulary, keyed to the tokens the profile rows already use, so the words are
   introduced in the same colours the reader meets them in two sections later. */
.deflist-evidence > [data-ev="documented"] { --dk: var(--ev-documented); --dk-ink: var(--ev-documented); }
.deflist-evidence > [data-ev="stated"]     { --dk: var(--ev-stated);      --dk-ink: var(--ev-stated); }
.deflist-evidence > [data-ev="none"]       { --dk: var(--ev-none);        --dk-ink: var(--ev-none); }

/* Next steps: paperwork, then something safe to look at yourself, then licensed work. Ember
   marks the one that needs a tradesperson, which is the only consequential step of the three. */
.deflist-steps > [data-step="record"] { --dk: var(--logo-slate); }
.deflist-steps > [data-step="look"]   { --dk: var(--logo-teal); }
.deflist-steps > [data-step="trade"]  { --dk: var(--ember-bar); --dk-ink: var(--ember-ink); }

/* The hero's two propositions are the page's whole argument, inside and outside. They were two
   teal rules on open text; they are now two boxes carrying the distinction in colour. */
main[class] .hero-side { border-left: 3px solid var(--hk, var(--action)); padding: 0.85rem 1rem;
  background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
main[class] .hero-side[data-side="inside"]  { --hk: var(--logo-teal); }
main[class] .hero-side[data-side="outside"] { --hk: var(--ember-bar); --hk-ink: var(--ember-ink); }
/* R1 (1 October 2026): the label is text, so it takes the text-safe ink of its key; the bar keeps the key colour */
.hero-side-k { color: var(--hk-ink, var(--hk)); }

/* Band rhythm. Every tinted band was the same teal wash, so the page had one texture from top
   to bottom. Sand separates the closing band from the two teal ones above it. */
main[class] .tools-band { background: var(--surface); border-block: 1px solid var(--rule); }
main[class] .closing-band { background: var(--tint-sand); border-top: 3px solid var(--ember-bar); }
main[class] .section-open { border-top: 2px solid var(--logo-navy); }

/* ---------- /how-it-works/ and /method/ colour (R15.10.2, group one) ------- */
/* Same rule as the homepage: the palette is the five logo tokens, and colour is used only
   where it carries meaning. The evidence labels already had their colours on the text; the
   card now carries them too, so a card is identifiable before the label is read. */
main[class] .ici-card { border-top: 3px solid var(--dk, var(--logo-slate)); }
main[class] .ici-card:has(.ici-ev-documented) { --dk: var(--ev-documented); }
main[class] .ici-card:has(.ici-ev-stated)     { --dk: var(--ev-stated); }
main[class] .ici-card:has(.ici-ev-none)       { --dk: var(--ev-none); }

/* Next steps, the same escalation the homepage uses: something safe to do now, something to
   find out, something to budget for or hand to a tradesperson. */
main[class] .ici-card[data-step="now"]  { --dk: var(--logo-teal); }
main[class] .ici-card[data-step="find"] { --dk: var(--logo-slate); }
main[class] .ici-card[data-step="plan"] { --dk: var(--ember-bar); }
main[class] .ici-card[data-step="plan"] h4 { color: var(--ember-ink); }

/* Benefits were four unboxed headings in a row. */
.ici-benefits-boxed > div { background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--logo-teal); border-radius: var(--radius); padding: 0.95rem 1.1rem; }
.ici-benefits-boxed > div:nth-child(2) { border-top-color: var(--logo-slate); }
.ici-benefits-boxed > div:nth-child(3) { border-top-color: var(--ember-bar); }
.ici-benefits-boxed > div:nth-child(4) { border-top-color: var(--logo-navy); }

/* /method/. Every one of these four is a reason a result is unavailable, and the page exists
   to say that unavailable is not a fault. They all take the unknown colour deliberately,
   the same slate the profile uses for a gap, rather than four different accents. */
main[class] .value-card { background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--ev-none); border-radius: var(--radius); padding: 1rem 1.15rem; }
main[class] .value-card h3 { color: var(--ev-none); font-size: 1.0625rem; margin: 0 0 0.3rem; }

/* What it does not do. A boundary, not a warning, so it takes ink rather than ember. */
main[class] .versus-card { background: var(--surface); border: 1px solid var(--rule);
  border-left: 4px solid var(--logo-navy); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem; }

/* ---------- Primary action colour (R15.10.2) ------------------------------ */
/* The primary button was #00B89C, which is Harmelo's mint and not one of the five ICI logo
   colours. It reached the page through `--ici-teal` and a `.btn-primary:visited` rule in the
   older stylesheet, which outranked the `--action` token the newer sheet sets.

   It is now the emblem's own orange. Orange is the warmest, most advancing colour in the
   palette and it is already doing the "this one is consequential" work elsewhere, so the
   primary action inherits a meaning the reader has met before rather than a new one.

   Contrast, measured, with navy #02355A text against each background: base 5.15:1, hover
   4.55:1, both above the 4.5:1 normal-text threshold. White fails on all three oranges
   (3.17:1 at best), which is why the text is navy and not white. `:visited` and
   `:focus-visible` are restated because the rules being overridden target those states. */
main[class] .btn-primary,
main[class] .btn-primary:visited,
.btn-primary, .btn-primary:visited {
  background: var(--ember); border-color: var(--ember); color: var(--logo-navy); font-weight: 680;
}
main[class] .btn-primary:hover, .btn-primary:hover {
  background: #F3790E; border-color: #F3790E; color: var(--logo-navy);
}
main[class] .btn-primary.btn-primary:focus-visible, .btn-primary:focus-visible {
  background: var(--ember); border-color: var(--logo-navy); color: var(--logo-navy);
  outline: 3px solid var(--logo-navy); outline-offset: 2px;
}

/* ---------- Density and colour, group one --------------------------------- */
/* Brought to the same scale as the tools page, which reads tighter and carries more colour.
   Scoped to the content pages in this group; the report pages keep their own rhythm. */
main.ici-main .ici-section, main.doc-page .ici-section,
main.doc-page .band, main.doc-page .band-wide, main.doc-page .band-tight {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
main.ici-main h1, main.doc-page h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -0.02em; }
main.ici-main h2, main.doc-page h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); letter-spacing: -0.015em; }
main.ici-main h3, main.doc-page h3 { font-size: 1.0625rem; }
main.ici-main .lede, main.doc-page .lede,
main.ici-main .ici-lede, main.doc-page .ici-lede { font-size: 1rem; max-width: 62ch; }
main.ici-main .deflist-boxed > div { padding: 0.8rem 0.9rem; }
main.ici-main .deflist-boxed dt, main.doc-page .ici-card h4 { font-size: 0.9375rem; }
main.ici-main .deflist-boxed dd { font-size: 0.875rem; }
main.doc-page .ici-card { padding: 0.85rem 0.95rem; }
main.doc-page .ici-card p { font-size: 0.875rem; line-height: 1.45; }
main[class] .value-card { padding: 0.85rem 0.95rem; }
main[class] .value-card p { font-size: 0.875rem; line-height: 1.45; }
main[class] .value-card h3 { font-size: 1rem; }

/* Eyebrows and section rules carry colour, the way the tools page does. */
main.ici-main .hero-eyebrow, main.doc-page .eyebrow, main.doc-page .eyebrow.fine {
  color: var(--ember-ink); font-weight: 700; letter-spacing: 0.13em;
}
/* A short accent rule under every section heading, in place of one long grey hairline. */
main.ici-main section h2::after, main.doc-page section h2::after {
  content: ""; display: block; width: 3.25rem; height: 3px; margin-top: 0.55rem;
  background: var(--ember-bar);
}
/* Alternate the rule colour with the band it sits on, so the accent belongs to the section
   rather than repeating identically five times down the page. */
main.ici-main .ici-almanac h2::after, main.doc-page .ici-sky h2::after,
main.doc-page .field-tint h2::after { background: var(--logo-teal); }
main.ici-main .tools-band h2::after { background: var(--logo-slate); }
main.ici-main .closing-band h2::after { margin-inline: auto; }

/* Band rhythm: the pale blue repeated down the whole page. Alternating it with sand gives the
   page three textures instead of one. */
main.doc-page .ici-section.ici-sky:nth-of-type(even) { background: var(--tint-sand); }
main.doc-page .band-tight.field-tint, main.doc-page .band-wide.field-tint {
  background: var(--tint-teal); border-block: 1px solid var(--rule);
}
/* /method/ closes on its limits, so the last band takes sand and an ember rule, the same
   ending the homepage uses. */
main.doc-page .band-wide:last-of-type { background: var(--tint-sand); border-top: 3px solid var(--ember-bar); }

/* ---------- Colour and density, remaining pages (R15.10.2) ---------------- */
/* 23 of 25 pages already run on .ici-main or .doc-page, so the group-one rules above were
   already reaching them. What is added here is the two that were not (/check/ and the two
   report pages) and the box patterns that still had no accent.

   The report pages are treated differently on purpose. /result/ and /sample/ ARE the Condition
   Profile, they carry their own evidence colours, and they print under a gated layout. Only
   the page furniture around the document is touched: never the report body, never its type
   scale, never anything that reaches print. */

/* /check/: the primary journey. Headings and eyebrows only. The intake grid and the 46rem
   question measure set in R15.10.1 are deliberately untouched. */
main.check-shell h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -0.02em; }
main.check-shell h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -0.015em; }
main.check-shell .eyebrow, main.check-shell .eyebrow.fine {
  color: var(--ember-ink); font-weight: 700; letter-spacing: 0.13em;
}
main.check-shell section > .shell > h2::after,
main.check-shell section > .shell-wide > h2::after {
  content: ""; display: block; width: 3.25rem; height: 3px; margin-top: 0.55rem;
  background: var(--ember-bar);
}
/* The check journey's disclosure groups get the same containment as everything else. */
main[class] .inv-group { background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--logo-slate); border-radius: var(--radius);
  padding: 0.85rem 1rem; margin-top: 0.6rem; }

/* Report pages: furniture only. .no-print marks the bands that are not the document. */
main.shell .no-print h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -0.02em; }
main.shell .no-print h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
main.shell .no-print .eyebrow { color: var(--ember-ink); font-weight: 700; letter-spacing: 0.13em; }
main.shell .no-print h2::after {
  content: ""; display: block; width: 3.25rem; height: 3px; margin-top: 0.55rem;
  background: var(--ember-bar);
}
main.shell .band-tight.no-print:last-of-type {
  background: var(--tint-sand); border-top: 3px solid var(--ember-bar);
}
/* Related tools below a finished profile. */
main[class] .related-card { background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--logo-teal); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.8rem 0.95rem; }

/* /for-organizations/: the outcome groups are what the page is for. */
main[class] .outcome-group { border-top: 3px solid var(--logo-teal); }
main[class] .outcome-groups > .outcome-group:nth-child(3n+2) { border-top-color: var(--logo-slate); }
main[class] .outcome-groups > .outcome-group:nth-child(3n+3) { border-top-color: var(--ember-bar); }
main[class] .outcome-group > h2 { font-size: 1.0625rem; }
main[class] .outcome-group > h2::after { display: none; }

/* /almanac/: method items. Teal throughout, because the Almanac is the evidence layer and its
   colour belongs to measurement, not to action. */
main[class] .alm-meth-item { background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--logo-teal); border-radius: var(--radius); padding: 0.85rem 1rem; }

/* Panels pick up the accent rather than sitting as plain boxes. */
main[class] .panel:not(.tool-workspace) { border-top: 3px solid var(--logo-slate); }

/* ---------- Accent-rule and heading-scale corrections (R15.10.2) ---------- */
/* A legal document is one section holding 29 headings, so "a rule under every h2" put 29
   orange marks down the Privacy Policy. The rule belongs to a section, not to every heading
   inside one, so it is limited to the first heading in its container. On a content page each
   section has one h2, so nothing is lost there; on the legal pages it drops to one. No class
   is added, because those two pages are generated from internal/legal/source and a hand edit
   to dist fails the parity test. */
main.ici-main section h2:not(:first-of-type)::after,
main.doc-page section h2:not(:first-of-type)::after,
main.shell .no-print h2:not(:first-of-type)::after { content: none; }

/* The old .ici-section > .shell > h2 rule is two classes and outranked the group-one scale,
   so /public-programmes/, /project-request/ and /transition/ kept 38px headings. */
main[class] .ici-section > .shell > h2,
main[class] .ici-section > .shell-wide > h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem); letter-spacing: -0.015em;
}

/* Legal documents carry their headings in .legal-body, one per <div>, so each is the first of
   its type in its own container and the :not(:first-of-type) limit above could not reach them.
   A policy is one continuous document, not a sequence of sections, so it takes no accent rules
   at all. Both pages are generated, so this is done by their own wrapper class rather than by
   editing dist. */
main[class] .legal-body h2::after, main[class] .legal-toc h2::after { content: none; }

/* ---------- One density, every page (R15.10.2) ---------------------------- */
/* The group-one rules set section padding for .ici-section on both page shells but only for
   .band / .band-tight / .band-wide on .doc-page. Every .ici-main page therefore kept the old
   56px band while the doc pages ran at 44px, which is the inconsistency that made half the
   site still read as oversized. Measured at 1920 before this block: .ici-main pages 56px,
   .doc-page pages 44px, card interiors ranging from 13px to 56px on the same page.

   Stated once here, for every page shell, so the two cannot drift apart again. */
main[class] > section,
main[class] .ici-section, main[class] .band, main[class] .band-tight, main[class] .band-wide {
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
}
/* The hero carries a little more air than the bands below it, but not twice as much. */
main[class] > section.hero, main[class] > section.hero-field,
main[class] > section.band.hero-field { padding-block: clamp(1.75rem, 3.5vw, 3rem); }

/* Card interiors. A panel is a container and keeps a little more room than a card, but the
   56px interiors are gone. */
main[class] .ici-card, main[class] .value-card, main[class] .versus-card,
main[class] .outcome-group, main[class] .deflist-boxed > div, main[class] .rd-more-card,
main[class] .alm-meth-item, main[class] .inv-group, main[class] .related-card,
main[class] .br-static-item, main[class] .tool-card, main[class] .continue-card {
  padding: clamp(0.8rem, 1.4vw, 1.05rem);
}
main[class] .panel, main[class] .panel-quiet {
  padding: clamp(1rem, 2vw, 1.4rem);
}
/* Copy inside a card is secondary to the page's own body copy. */
main[class] .ici-card p, main[class] .value-card p, main[class] .outcome-group p,
main[class] .outcome-group li, main[class] .deflist-boxed dd, main[class] .rd-more-card p,
main[class] .alm-meth-item p, main[class] .related-card p, main[class] .br-static-item p {
  font-size: 0.9375rem; line-height: 1.5;
}
main[class] .ici-card h4, main[class] .value-card h3, main[class] .outcome-group > h2,
main[class] .rd-more-card h3, main[class] .br-static-item .br-static-h {
  font-size: 1rem; line-height: 1.25;
}

/* Ledes were still a size above body copy on every page. */
main[class] .lead, main[class] .lede, main[class] .ici-lede, main[class] .hero-sub {
  font-size: 1rem; line-height: 1.55; max-width: 62ch;
}
/* /check/ ran its sub-headings at 24px, larger than some pages' section headings. */
main.check-shell h3, main.check-shell .as-h3 { font-size: 1.0625rem; }

/* The band and the shell inside it were both padded: 44px on the section plus 48px on its own
   shell gave 92px above the content of every band at 1920. The band owns the vertical rhythm;
   the shell owns the horizontal gutter only. Measured before this rule on /readiness/:
   section 44 + shell 48. After: section 44 + shell 0. */
main#main > section > .shell, main#main > section > .shell-wide,
main[class] > section > .shell, main[class] > section > .shell-wide { padding-block: 0; }

/* Sections nested inside a band are content, not bands, so they take no band padding. The
   panel rule above still gives .panel its own interior. */
main[class] section section:not(.panel) { padding-block: 0; }
main[class] .tool-chooser, main[class] .readiness-drivers { padding-block: 0; margin-top: 1.5rem; }

/* main#main > section.hero-field > .shell-wide carries an id and two classes, so it outranked
   the rule above and the hero kept 52 + 44 = 96px of stacked padding. */
main#main > section.hero > .shell, main#main > section.hero > .shell-wide,
main#main > section.hero-field > .shell, main#main > section.hero-field > .shell-wide,
main#main > section.band.hero-field > .shell, main#main > section.band.hero-field > .shell-wide {
  padding-block: 0;
}

/* ---------- /retrofit-readiness/ layout (R15.10.2) ------------------------ */
/* Measured at 1440: .rr-grid ran two columns, 544px of form beside 509px of results, and the
   results column was 3,738px tall. A 509px strip three and a half screens long is the same
   nested-layout family as the .check-grid defect: the output, which is the point of the page,
   was its narrowest column.

   One column. The form is a panel at a readable measure, the results sit below it at the full
   1,216px shell, and the output's own blocks become a card grid rather than a single stack. */
/* CORRECTED. My first attempt made this one column and pushed the output 2,079px down the
   page. gate-founder-review C5 caught it: the output must stay beside the form. The gate is
   right and the single column was wrong. The defect was never the two columns, it was the
   proportions: 544px of form beside 509px of output, so the thing the page exists to produce
   was its narrower half. The form is now the narrow column and the output takes the rest,
   which is the same correction R15.10.1 made on /check/. */
main[class] .rr-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 62rem) {
  /* 24rem made the form 1,715px tall, over the 1,700px the gate allows. 30rem keeps the form
     under it and still leaves the output the wider column, which was the point. */
  /* With the form stepped it is 520px tall instead of 1,495px and needs one question
     worth of width, so the column drops to 22rem and the output takes the rest. */
  main[class] .rr-grid { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
    align-items: start; }
  main[class] .rr-grid > form.retrofit-controls { position: sticky; top: 1.25rem; }
}
main[class] .rr-grid > form.retrofit-controls {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--logo-teal); border-radius: var(--radius);
  padding: clamp(1rem, 2vw, 1.4rem); margin: 0;
}
main[class] .rr-results { max-width: none; }
main[class] .rr-results > .gap-head { background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--ember-bar); border-radius: var(--radius);
  padding: clamp(0.9rem, 1.6vw, 1.15rem); }
main[class] .rr-results > .findlist { list-style: none; display: grid; gap: 0.6rem; padding: 0;
  margin: 1rem 0; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
main[class] .rr-results > .findlist > li { background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--logo-slate); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.8rem 0.95rem; font-size: 0.9375rem; }
/* The output blocks were one column in a strip. Anything that is a real block becomes a card,
   and the tables scroll inside themselves rather than forcing the page sideways. */
main[class] .retrofit-output > section,
main[class] .retrofit-output > .retrofit-block {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--logo-slate); border-radius: var(--radius);
  padding: clamp(0.9rem, 1.6vw, 1.2rem); margin-bottom: 0.75rem;
}
main[class] .retrofit-output .retrofit-table { display: block; overflow-x: auto; max-width: 100%; }
@media (min-width: 62rem) {
  main[class] .retrofit-output > section, main[class] .retrofit-output > .retrofit-block {
    margin-bottom: 0;
  }
  main[class] .retrofit-output { display: grid; gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); align-items: start; }
  main[class] .retrofit-output > h2, main[class] .retrofit-output > h3,
  main[class] .retrofit-output > p, main[class] .retrofit-output > .retrofit-table {
    grid-column: 1 / -1;
  }
}

/* The full-bleed photo hero puts its copy in an element that also carries .shell, so the
   band/shell padding rule above zeroed the space the copy needs inside the photo. */
main[class] > section > .shell.ici-hero-photo__content,
main[class] > section .ici-hero-photo__content {
  padding-block: clamp(1.75rem, 4vw, 3.25rem);
}

/* main#main > section > .shell carries an id, so it outranked the hero-photo rule above and
   the copy inside the full-bleed photo hero lost its vertical space. */
main#main > section > .shell.ici-hero-photo__content { padding-block: clamp(1.75rem, 4vw, 3.25rem); }

/* The retrofit output is mostly one long <section class="gap-index"> (1,645px at 1440) and two
   bare <ul>s, none of which the card selectors above could reach. Its lists become card grids
   so the page reads across rather than only down. */
main[class] .retrofit-output > ul,
main[class] .gap-index ul {
  list-style: none; padding: 0; margin: 0.75rem 0 1.25rem; display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
main[class] .retrofit-output > ul > li,
main[class] .gap-index ul > li {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--logo-slate); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.75rem 0.9rem; font-size: 0.9375rem; line-height: 1.5;
}
main[class] .retrofit-output > .gap-index {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--ember-bar); border-radius: var(--radius);
  padding: clamp(0.9rem, 1.6vw, 1.25rem);
}

/* The .retrofit-output grid above put .gap-index in a 23rem track, so its own lists could not
   break into columns and the section got TALLER than before the grid. It spans the full row. */
@media (min-width: 62rem) {
  main[class] .retrofit-output > .gap-index,
  main[class] .retrofit-output > ul { grid-column: 1 / -1; }
}

/* /404.html was the one page left at 91px of band padding, because it has no band class for
   the rules above to match. */
main[class] > section:only-child { padding-block: clamp(2rem, 4vw, 3rem); }

/* ---------- Homepage arrival on a phone -------------------------------------
   The two explainer sides used to sit between the promise and the buttons and
   cost 326px of the first screen. They now have their own band below the hero,
   so the ordering rule that used to live here is gone with the structure it
   was correcting. The hero is headline, one sentence, two actions, photo.
   =========================================================================== */
}

/* The third of the three now sits beside the other two, so it needs its own key colour. Slate
   rather than a third accent: the evidence line is the quiet one, and the page already carries
   teal and ember. */
main[class] .hero-side[data-side="evidence"] { --hk: var(--logo-slate); }
@media (min-width: 62rem) {
  main[class] .hero-sides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Building record tools, R15.10.9 ---------------------------------------------------
   Number fields with their unit, the sizing side-by-side, next steps, and the printable record. */
main[class] .br-q-num { position: relative; }
main[class] .br-q-num input { width: 100%; min-height: 44px; padding: 0.55rem 4.2rem 0.55rem 0.75rem;
  font: inherit; font-variant-numeric: tabular-nums; border: 1px solid var(--line, #C9D6DD); border-radius: 6px; background: #fff; }
main[class] .br-q-num .br-unit { position: absolute; right: 0.75rem; bottom: 0.7rem; font-size: 0.8125rem;
  color: #4E6573; pointer-events: none; }
main[class] .br-compare-list { list-style: none; margin: 0.4rem 0 0.6rem; padding: 0; display: grid; gap: 0.45rem; }
main[class] .br-compare-list li { display: grid; grid-template-columns: 11rem 1fr; gap: 0.1rem 0.75rem; align-items: baseline;
  padding-bottom: 0.45rem; border-bottom: 1px solid #E6EDF1; }
main[class] .br-compare-list li span { color: #4E6573; font-size: 0.875rem; }
main[class] .br-compare-list li strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--ink); }
main[class] .br-compare-list li em { grid-column: 2; font-style: normal; font-size: 0.8125rem; color: #4E6573; }
@media (max-width: 30rem) { main[class] .br-compare-list li { grid-template-columns: 1fr; } main[class] .br-compare-list li em { grid-column: 1; } }
main[class] .br-rec { margin: 0.2rem 0 0.3rem; }
main[class] .br-next { margin: 1rem 0 0; font-size: 0.9375rem; }
main[class] .br-next-link { background: none; border: 0; padding: 0; font: inherit; color: var(--teal-ink, #0B5968);
  text-decoration: underline; cursor: pointer; }
main[class] .br-keep { margin: 1.2rem 0 0; display: grid; gap: 0.35rem; justify-items: start; }
/* Building Record print mode (release blocker, 26 September 2026). This rule once applied to every ICI page and
   printed every other tool as a blank page. It now applies only while the Building Record has set its own print state
   (body.br-printing, added by building-record.js for its print button and removed after printing). Any other printing,
   on any page, is unaffected. */
.br-print { display: none; }
@media print {
  body.br-printing > *:not(.br-print) { display: none !important; }
  body.br-printing > .br-print { display: block !important; color: #000; font: 11pt/1.4 system-ui, sans-serif; }
  .br-sheet h2 { font-size: 18pt; margin: 0 0 0.2rem; }
  .br-sheet h3 { font-size: 12pt; margin: 1.1rem 0 0.3rem; border-bottom: 1px solid #999; padding-bottom: 0.15rem; }
  .br-sheet table { width: 100%; border-collapse: collapse; }
  .br-sheet th, .br-sheet td { text-align: left; padding: 0.2rem 0.4rem 0.2rem 0; border-bottom: 1px solid #ddd; vertical-align: top; }
  .br-sheet th { font-weight: 400; color: #333; width: 55%; }
  .br-sheet-m, .br-sheet-n { color: #444; font-size: 9.5pt; }
  .br-sheet-n { margin-top: 1.2rem; }
}

/* ---------- Homeowner / building operator view, R15.10.9 ------------------------------------ */
html:not([data-audience="operator"]) [data-for="operator"] { display: none !important; }
html[data-audience="operator"] [data-for="home"] { display: none !important; }
main[class] .audience-switch { margin: 0 0 1.25rem; }
main[class] .aud-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
main[class] .aud-q { font-weight: 650; color: var(--ink); margin-right: 0.25rem; }
main[class] .aud-opt { min-height: 44px; padding: 0.45rem 0.95rem; font: inherit; font-weight: 600; cursor: pointer;
  color: #30505F; background: #fff; border: 1px solid #C9D6DD; border-radius: 999px; }
main[class] .aud-opt[aria-checked="true"] { color: #fff; background: var(--ink, #0A2A42); border-color: var(--ink, #0A2A42); }
main[class] .aud-opt:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
main[class] .aud-follow { margin-top: 0.75rem; display: grid; gap: 0.4rem; max-width: 42rem; }
main[class] .aud-follow select { min-height: 44px; max-width: 20rem; }
main[class] .aud-note, main[class] .aud-harmelo { margin: 0.2rem 0 0; font-size: 0.9375rem; color: #30505F; }
main[class] .aud-harmelo { padding: 0.7rem 0.9rem; background: #F3F7F9; border-left: 3px solid var(--teal-ink, #0B5968); }
main[class] .rr-operator { margin: 0 0 1rem; padding: 0.75rem 0.9rem; background: #F3F7F9; border-radius: 6px; }
main[class] .rr-op-h { margin: 0 0 0.3rem; font-weight: 650; color: var(--ink); }
/* The print control spans the form-and-result grid rather than taking a cell of it. */
main[class] .retrofit > .retrofit-print, main[class] [data-retrofit] > .retrofit-print { grid-column: 1 / -1; }

/* Was an inline style attribute, which the production policy (style-src 'self') drops. */
main[class] .hero-sub-narrow { max-width: 52ch; }

/* ---------- Quote comparison, pointers, site sheet (R15.10.9) ------------------------------ */
main[class] .br-quotes-wrap { overflow-x: auto; }
main[class] .br-quotes table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
main[class] .br-quotes th, main[class] .br-quotes td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid #E6EDF1; vertical-align: top; }
main[class] .br-quotes thead th { font-size: 0.8125rem; color: #4E6573; font-weight: 650; }
main[class] .br-quotes tbody th { font-weight: 500; color: #30505F; width: 42%; }
main[class] .br-unstated { color: #9A5B13; font-style: italic; }
main[class] .br-pointer { border-left: 3px solid var(--teal-ink, #0B5968); }
main[class] .br-q input[type="text"] { width: 100%; min-height: 44px; padding: 0.55rem 0.75rem; font: inherit;
  border: 1px solid var(--line, #C9D6DD); border-radius: 6px; background: #fff; }
@media print {
  .br-site table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .br-site th, .br-site td { border: 1px solid #888; padding: 0.35rem; height: 2.4rem; text-align: left; vertical-align: top; }
  .br-site thead th { height: auto; background: #eee; }
  @page { size: landscape; margin: 12mm; }
}

/* Were inline style attributes on /equipment/lookup/, which the production policy drops. */
main[class] .mw-56ch { max-width: 56ch; }
main[class] .mw-66ch { max-width: 66ch; }
main[class] .prep-next { margin: 0.75rem 0 0; }

/* Seven tools for a homeowner leave one card alone on the last row. The equipment lookup takes the
   full width there, photo beside text, so the band ends square. Operators see eight: no change. */
@media (min-width: 46rem) {
  html:not([data-audience="operator"]) main[class] .tools > .tool[data-kind="equipment"] {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr; column-gap: 1.5rem; }
  html:not([data-audience="operator"]) main[class] .tools > .tool[data-kind="equipment"] > .tool-photo {
    grid-row: 1 / -1; aspect-ratio: auto; height: 100%; min-height: 12rem; border-radius: var(--radius) 0 0 var(--radius); }
  html:not([data-audience="operator"]) main[class] .tools > .tool[data-kind="equipment"] > .tool-photo img { height: 100%; }
  html:not([data-audience="operator"]) main[class] .tools > .tool[data-kind="equipment"] > h3 { grid-row: 2; grid-column: 2; }
  html:not([data-audience="operator"]) main[class] .tools > .tool[data-kind="equipment"] > p { grid-row: 3; grid-column: 2; }
}

/* ---------- Secondary-page photography (R15.10.12) ------------------------- */
/* Six photographs, one presentation: 16:9, shown whole, the site radius and no shadow, like
   the hero photographs they replace. Desktop keeps them between 320px and 480px tall, a phone
   between 220px and 320px. The earlier 4:3 and 16:10 crops on these frames do not apply. */
figure.ici-photo { margin: 0; }
figure.ici-photo > img {
  display: block; width: 100%; height: auto; max-height: none;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: center;
  border-radius: var(--radius); box-shadow: none;
}
/* A photograph between an introduction and a tool. Stacked on a phone and tablet; on a
   desktop it sits beside the introduction instead of under it, so the tool that follows
   starts where it did before the photograph was added. */
figure.ici-photo--inline { margin-block: clamp(1.25rem, 2.5vw, 1.75rem) 0; max-width: 40rem; }
@media (min-width: 64rem) {
  main[class] .shell-wide:has(> figure.ici-photo--inline) {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
  main[class] .shell-wide:has(> figure.ici-photo--inline) > * { grid-column: 1; }
  main[class] .shell-wide > figure.ici-photo--inline {
    grid-column: 2; grid-row: 1 / span 6; align-self: center; margin: 0; max-width: none; }
}
/* In the split heroes the photograph column is given a little more room so a whole 16:9
   frame reaches 320px on a desktop. */
@media (min-width: 60rem) {
  main[class] .rd-hero-grid:has(> .ici-photo) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
@media (min-width: 68rem) {
  .split-hero:has(.ici-photo) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
/* A phone: never shorter than 220px or taller than 320px. Below about 390px wide the 220px
   floor trims a few percent from each side; the whole frame shows at every wider width. */
@media (max-width: 40rem) {
  figure.ici-photo > img { min-height: 220px; max-height: 320px; }
}
/* In a text section the photograph sits between the introduction and the cards that follow. */
figure.ici-photo--section { margin-block: clamp(1.25rem, 2.5vw, 1.75rem); }

/* The municipality control is optional and hidden until the governed data holds municipalities for
   the selected province. The competing declaration is line ~2455 in this file:
   `main[class] .readiness-controls .capture-row > .field { display: flex }` — specificity (0,3,2)
   with an attribute-qualified element selector, written to lay the location fields out as columns.
   Specificity alone therefore needs to beat (0,3,2), which the matching hidden selector below does:
   `main[class] .readiness-controls .capture-row > .field[hidden]` is (0,4,2). No !important is used
   and no geometry resets are needed, because display:none produces zero geometry by itself. */
main[class] .readiness-controls .capture-row > .field[hidden],
main[class] .brief-controls .field[hidden],
main[class] [data-rd-locality-field][hidden],
main[class] [data-brief-locality-field][hidden] {
  display: none;
}

/* Local programme block (D13). Rendered only inside a Navigator card whose record is a qualified
   programme; generic resource cards are unaffected. */
.prog-block { margin-top: 0.6rem; padding: 0.75rem 0.9rem; border-left: 3px solid var(--action); background: var(--surface-2, #F4F7F8); border-radius: var(--radius-control); }
.prog-kind { margin: 0 0 0.4rem; font-weight: 650; font-size: 0.9375rem; }
.prog-dl { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.25rem 0.9rem; margin: 0; }
.prog-dl dt { font-weight: 600; }
.prog-dl dd { margin: 0; }
@media (max-width: 40rem) { .prog-dl { grid-template-columns: minmax(0, 1fr); } .prog-dl dd { margin-bottom: 0.35rem; } }
.prog-confirm { margin: 0.6rem 0 0; font-weight: 600; }

/* Progressive forms (founder interaction ruling, 26 September 2026): intro → one step → review → result.
   Results are held off screen until Create; nothing is moved out of its form. Subtle 200 ms transitions. */
.fs-held { display: none !important; }
form[data-fs-mode="progressive"] { max-width: 760px; }
form[data-fs-mode="progressive"] .fs-intro, form[data-fs-mode="progressive"] .fs-review,
form[data-fs-mode="progressive"] .fs-done { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
form[data-fs-mode="progressive"] .fs-intro-h, form[data-fs-mode="progressive"] .fs-q { font-family: var(--font-display); color: var(--ink); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.2; margin: 0.2rem 0 0.9rem; }
form[data-fs-mode="progressive"] .fs-intro-h:focus, form[data-fs-mode="progressive"] .fs-q:focus { outline: none; }
form[data-fs-mode="progressive"] .fs-count { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.4rem; }
form[data-fs-mode="progressive"] .fs-error { color: var(--attention); font-weight: 600; }
form[data-fs-mode="progressive"] .fs-step.is-on legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
form[data-fs-mode="progressive"] .fs-review-list { margin: 0; }
form[data-fs-mode="progressive"] .fs-review-list dt { font-weight: 700; color: var(--ink); margin-top: 0.9rem; }
form[data-fs-mode="progressive"] .fs-review-list dd { margin: 0.2rem 0 0; color: var(--body); }
form[data-fs-mode="progressive"] .fs-change { margin-left: 0.6rem; background: none; border: 0; color: var(--action); text-decoration: underline; cursor: pointer; font: inherit; }
form[data-fs-mode="progressive"] .fs-done { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; justify-content: space-between; padding: 14px 20px; }
form[data-fs-mode="progressive"] .fs-done p { margin: 0; }
form[data-fs-mode="progressive"] .fs-nav { justify-content: space-between; }
@media (prefers-reduced-motion: no-preference) {
  form[data-fs-mode="progressive"] .fs-step.in-r { animation-duration: 0.2s; }
  form[data-fs-mode="progressive"] .fs-step.in-l { animation-duration: 0.2s; }
}
@media print { .fs-held { display: block !important; } form[data-fs-mode="progressive"] .fs-intro, form[data-fs-mode="progressive"] .fs-nav, form[data-fs-mode="progressive"] .fs-done { display: none !important; } }
/* A stepped group keeps its own layout (the location row is a grid); and [hidden] always wins inside progressive forms. */
form[data-fs-mode="progressive"] .capture-row.fs-step.is-on { display: grid; }
form[data-fs-mode="progressive"] [hidden] { display: none !important; }
/* In progressive mode the tool's workspace is one column: the question card, then (after Create) the result. */
.tool-workspace:has(form[data-fs-mode="progressive"]) { display: block; }
.tool-workspace:has(form[data-fs-mode="progressive"]) > * { width: auto; max-width: none; }
form[data-fs-mode="progressive"] { display: block; margin-inline: auto; }
form[data-fs-mode="progressive"] .fs-nav { display: flex; flex-direction: row; justify-content: space-between; }
form[data-fs-mode="progressive"] .workspace-results, .tool-workspace:has(form[data-fs-mode="progressive"]) .workspace-results { margin-top: 1.5rem; }
/* progressive forms are a single column whatever grid the form uses in its long-form layout */
main[class] form[data-fs-mode="progressive"].controls, main[class] form[data-fs-mode="progressive"] { display: block !important; max-width: 760px; }

/* /sample/ and report headers at phone width (founder-reported defect, 26 September 2026): the header row wraps instead of
   squeezing, so the EXAMPLE stamp stays on one line and the title keeps its width. Desktop is unchanged. */
@media (max-width: 559px) {
  .rp-head { flex-wrap: wrap; row-gap: 0.6rem; }
  .rp-head .rp-stamp { white-space: nowrap; flex: 0 0 auto; }
  .rp-head .rp-head-id { flex: 1 1 12rem; min-width: 0; }
}

/* ===== Progressive tool card: visual standard (founder review, 26 September 2026) ===== */
main[class] form[data-fs-mode="progressive"] { max-width: 820px; }
form[data-fs-mode="progressive"] .fs-intro, form[data-fs-mode="progressive"] .fs-review, form[data-fs-mode="progressive"] .fs-head {
  border-radius: 18px; }
/* one card: head + active step + nav read as a single panel */
form[data-fs-mode="progressive"][data-fs-phase="step"], form[data-fs-mode="progressive"][data-fs-phase="review"] {
  background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--action); border-radius: 18px;
  padding: clamp(24px, 4vw, 44px); box-shadow: 0 10px 30px rgba(10, 42, 66, 0.08); }
form[data-fs-mode="progressive"][data-fs-phase="review"] .fs-review { border: 0; padding: 0; background: none; }
form[data-fs-mode="progressive"] .fs-intro { padding: clamp(28px, 4vw, 48px); border-top: 4px solid var(--action); box-shadow: 0 10px 30px rgba(10, 42, 66, 0.08); }
form[data-fs-mode="progressive"] .fs-intro-h { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }
form[data-fs-mode="progressive"] .fs-intro-p { font-size: 1.1rem; color: var(--body); max-width: 36rem; }
/* progress: quiet */
form[data-fs-mode="progressive"] .fs-count { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
form[data-fs-mode="progressive"] .fs-track { height: 4px; background: var(--wash); border-radius: 2px; overflow: hidden; margin-bottom: 1.4rem; }
form[data-fs-mode="progressive"] .fs-track i { display: block; height: 100%; background: var(--action); transition: width 0.25s ease; }
/* larger question */
form[data-fs-mode="progressive"] .fs-q { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.05rem); margin-bottom: 1.4rem; }
/* fields */
form[data-fs-mode="progressive"] .fs-step label { font-weight: 700; color: var(--ink); }
form[data-fs-mode="progressive"] .fs-step select, form[data-fs-mode="progressive"] .fs-step input[type=text] {
  min-height: 52px; font-size: 1.05rem; border-radius: 10px; border: 1.5px solid #9FB3BF; padding-inline: 14px; }
form[data-fs-mode="progressive"] .fs-step select:focus, form[data-fs-mode="progressive"] .fs-step input:focus {
  outline: none; border-color: var(--action); box-shadow: 0 0 0 4px rgba(0, 96, 122, 0.18); }
/* choice tiles: a clear selected state */
form[data-fs-mode="progressive"] .choice-list label { min-height: 56px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--surface);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
form[data-fs-mode="progressive"] .choice-list label:hover { border-color: #9FB3BF; }
form[data-fs-mode="progressive"] .choice-list label:has(input:checked) { border-color: var(--action); background: var(--tint-teal); box-shadow: inset 0 0 0 1px var(--action); }
form[data-fs-mode="progressive"] .choice-list label:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(0, 96, 122, 0.22); }
form[data-fs-mode="progressive"] .fs-step fieldset { border: 0; padding: 0; margin: 0; }
/* Back / Next: anchored, same place every step */
form[data-fs-mode="progressive"] .fs-nav { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
form[data-fs-mode="progressive"] .fs-nav .btn { min-width: 8.5rem; min-height: 48px; }
/* review */
form[data-fs-mode="progressive"] .fs-review-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
form[data-fs-mode="progressive"] .fs-review-list dt { padding-top: 1rem; border-top: 1px solid var(--rule); }
form[data-fs-mode="progressive"] .fs-review-list dt:first-child { border-top: 0; padding-top: 0; }
form[data-fs-mode="progressive"] .fs-review-list dd { padding-bottom: 1rem; font-size: 1.05rem; }
/* completion: a calm bar, then the result arrives */
form[data-fs-mode="progressive"] .fs-done { border-left: 4px solid var(--ev-documented); background: #EEF6F2; border-color: #CFE3D8; }
form[data-fs-mode="progressive"] .fs-done-p { font-weight: 600; color: var(--ev-documented); }
@media (prefers-reduced-motion: no-preference) {
  .workspace-results:not(.fs-held) { animation: fsResultIn 0.25s ease both; }
  @keyframes fsResultIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 599px) {
  form[data-fs-mode="progressive"][data-fs-phase="step"], form[data-fs-mode="progressive"][data-fs-phase="review"] { padding: 22px 18px; border-radius: 14px; }
  form[data-fs-mode="progressive"] .fs-nav .btn { min-width: 0; flex: 1 1 0; }
}

/* Building Alerts call to action (launch path, 26 September 2026): one quiet band, the same words everywhere */
.ba-cta { background: var(--tint-teal); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ba-cta-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem 2rem; align-items: center; }
.ba-cta-art { width: 64px; height: 64px; fill: none; stroke: var(--action); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ba-cta h2 { font-family: var(--font-display); color: var(--ink); font-size: 1.35rem; margin: 0 0 0.3rem; }
.ba-cta p { margin: 0; color: var(--body); }
.ba-cta .ba-cta-action { margin: 0; }
@media (max-width: 719px) { .ba-cta-inner { grid-template-columns: minmax(0, 1fr); } .ba-cta-art { width: 48px; height: 48px; } }

/* Seasonal Calendar: postal/ZIP-first location and governed local conditions (founder correction, 26 September 2026) */
form[data-fs-mode="progressive"] .rd-postal-field input { min-height: 52px; font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase; max-width: 16rem; }
form[data-fs-mode="progressive"] .rd-postal-status { color: var(--ev-documented); font-weight: 600; min-height: 1.4em; }
form[data-fs-mode="progressive"] .rd-derived label { color: var(--muted); }
main[class] form[data-fs-mode="progressive"] .capture-row { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { main[class] form[data-fs-mode="progressive"] .capture-row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: 1.4rem; } }
.rd-local { background: var(--tint-teal); border: 1px solid #CFE2E9; border-left: 4px solid var(--action); border-radius: 14px; padding: clamp(18px, 3vw, 28px); margin: 0 0 1.6rem; }
.rd-local-h { font-family: var(--font-display); color: var(--ink); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); margin: 0 0 0.6rem; }
.rd-local-now { font-weight: 700; color: var(--ink); margin: 0 0 0.2rem; }
.rd-local-now span { display: inline-block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--action); color: #fff; border-radius: 999px; padding: 2px 10px; margin-right: 6px; }
.rd-local-why { margin: 0 0 1rem; color: var(--body); }
.rd-local-list { list-style: none; margin: 0.6rem 0 1rem; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .rd-local-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rd-local-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rd-local-list li { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; }
.rd-local-list li p { margin: 0; }
.rd-local-l { font-weight: 700; color: var(--ink); }
.rd-local-v { margin-top: 4px !important; font-size: 1.05rem; }
.rd-local-m, .rd-local-s { color: var(--muted); font-size: 0.85rem; margin-top: 6px !important; }
.rd-local-na { background: var(--paper) !important; }
.rd-local-scope { font-size: 0.95rem; color: var(--body); border-top: 1px solid #CFE2E9; padding-top: 0.8rem; margin: 0; }
/* in the progressive location step, Country and the postal/ZIP field align at the top (their hints may differ in length) */
main[class] form[data-fs-mode="progressive"] .readiness-controls .capture-row, main[class] form[data-fs-mode="progressive"].readiness-controls .capture-row { align-items: start; }
main[class] form[data-fs-mode="progressive"].readiness-controls .capture-row > .field > select { margin-top: 0; }

/* ---------------------------------------------------------------------------------------------------------------
   Compact results (founder correction, 27 September 2026): summary first, compact findings, evidence on request.
   Condition cards and secondary disclosures are native <details>; nav.js opens them all for print.
   --------------------------------------------------------------------------------------------------------------- */
.cc-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.cc-list > li.cc-item { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; }
.cc { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--logo-teal); border-radius: var(--radius); }
.cc[open] { border-color: var(--rule-control); border-left-color: var(--ink); }
.cc-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.35rem 1rem;
  padding: 0.75rem 0.9rem; cursor: pointer; list-style: none; min-height: 44px; }
.cc-summary::-webkit-details-marker { display: none; }
.cc-summary:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; border-radius: calc(var(--radius) - 2px); }
.cc-head { display: grid; gap: 0.15rem; min-width: 0; }
.cc-name { font-family: var(--font-display); font-weight: 650; color: var(--ink); font-size: 1rem; line-height: 1.3; }
.cc-name .driver-condition { margin: 0; font: inherit; color: inherit; }
.cc-touches { font-size: 0.875rem; color: var(--body); line-height: 1.4; }
.cc-meta { display: flex; align-items: center; gap: 0.75rem; justify-self: end; white-space: nowrap; }
.cc-evidence { font-size: 0.75rem; color: var(--ev-documented); background: var(--tint-teal); border-radius: 999px; padding: 0.15rem 0.55rem; }
.cc-open { font-size: 0.8125rem; font-weight: 600; color: var(--action); }
.cc-open::after { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-left: 0.4em; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform var(--dur) var(--ease); }
.cc[open] .cc-open::after { transform: translateY(0.05em) rotate(-135deg); }
.cc-body { padding: 0 0.9rem 0.9rem; border-top: 1px solid var(--rule); display: grid; gap: 0.6rem; }
.cc-section h4 { margin: 0.7rem 0 0.2rem; font-size: 0.8125rem; font-weight: 650; color: var(--muted); }
.cc-section p { margin: 0 0 0.3rem; font-size: 0.875rem; }
.cc-block { border-top: 1px solid var(--rule); }
.cc-block:last-of-type { border-bottom: 1px solid var(--rule); }
.cc-block-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.1rem;
  cursor: pointer; list-style: none; min-height: 44px; font-weight: 600; color: var(--ink); }
.cc-block-summary::-webkit-details-marker { display: none; }
.cc-block-summary::after { content: ""; flex: none; width: 0.5em; height: 0.5em; border-right: 2px solid var(--action);
  border-bottom: 2px solid var(--action); transform: rotate(45deg); transition: transform var(--dur) var(--ease); }
.cc-block[open] > .cc-block-summary::after { transform: rotate(-135deg); }
.cc-block-summary:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.cc-block-title { flex: 1; }
.cc-count { font-size: 0.75rem; font-weight: 600; color: var(--muted); background: var(--wash); border-radius: 999px; padding: 0.1rem 0.5rem; }
.cc-block-body { padding: 0 0.1rem 1rem; }
.cc-glance h2 { margin-bottom: 0.3rem; }
.location-status:empty { display: none; }
.location-status { color: var(--action-deep); }
.location-used { margin-top: 0; }
main[class] .gap-index ul.rr-chips { list-style: none; margin: 0.5rem 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; grid-template-columns: none; }
main[class] .gap-index ul.rr-chips > li { font-size: 0.8125rem; color: var(--body); background: var(--wash); border: 0; border-radius: 999px; padding: 0.2rem 0.7rem; min-height: 0; }
.rr-chip-n { font-weight: 700; color: var(--ink); }
.rr-next { font-size: 0.9375rem; }
@media (max-width: 40rem) {
  .cc-summary { grid-template-columns: 1fr; }
  .cc-meta { justify-self: start; white-space: normal; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .cc-open::after, .cc-block-summary::after { transition: none; } }
@media print {
  .cc-open, .cc-summary::after, .cc-block-summary::after { display: none; }
  .cc { border-left-width: 2px; break-inside: avoid; }
}
/* The optional municipality sits on its own row, so Country and Province keep their shared baseline. */
main[class] [data-rd-locality-field] { grid-column: 1 / -1; flex-basis: 100%; max-width: 34rem; }
main[class] [data-rd-locality-field] input { max-width: 22rem; }

/* Shared condition panel (ICI PRODUCT INTEGRATION CHECKPOINT, 28 September 2026): Retrofit Readiness and the Condition
   Profile result reuse the Operating Conditions card system. */
.cp-panel { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.cp-panel .cc-list { margin-top: .75rem; }
.cp-panel .cp-sub { font-size: 1.05rem; margin-top: 1.5rem; }
.rp-conditions { max-width: 60rem; margin-inline: auto; }

/* ---- CIX Method 2.4 result (founder ruling 13 Oct 2026): score and evidence coverage side by side ---- */
.rp-ici { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 0.25rem 0 0.75rem; }
.rp-ici-score, .rp-ici-cov { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; }
.rp-ici-score { border-top: 3px solid var(--logo-navy); }
.rp-ici-cov { border-top: 3px solid var(--logo-teal); }
.rp-ici-k { margin: 0; font: 600 0.74rem/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--logo-slate-text); }
.rp-ici-n { margin: 0.2rem 0 0; color: var(--ink); }
.rp-ici-n .rp-index-n { font-size: 2.4rem; font-weight: 700; line-height: 1.05; font-family: var(--font-display); }
.rp-ici-of { color: var(--muted); font-size: 1rem; }
.rp-ici-score .rp-index-b { margin: 0.15rem 0 0; font-weight: 600; color: var(--ink); }
.rp-ici-none .rp-noindex { margin: 0.4rem 0 0; }
.rp-ici-sys { margin: 0.15rem 0 0.4rem; font-weight: 600; color: var(--ink); }
.rp-ici-bar { height: 6px; background: var(--wash); border-radius: 3px; overflow: hidden; }
.rp-ici-bar span { display: block; height: 100%; background: var(--logo-teal); }
.rp-ici-conf { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--body); }
.rp-ici-method { font-size: 0.86rem; color: var(--muted); margin: 0.25rem 0 0; }
.rp-ici-limits li { color: var(--attention); }
.rp-basis { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.rp-ici-explain { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--body); }
.rp-ici-explain li { margin: 0.1rem 0; }
.rp-ici-limit { color: var(--attention); }
.rp-ici-note { color: var(--muted); }
.rp-ici-missing { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.92rem; }
.rp-area .rp-lede { max-width: var(--measure); }
@media print { .rp-ici-bar { border: 1px solid #999; } }
/* the /sample/ document title is a paragraph with heading semantics (one h1 per page, SEO register 13 Oct 2026); the
   site's "main#main p" body size must not shrink it, so it keeps the document title size it had as an h1 */
main#main p.rp-title { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); line-height: 1.1; margin: 0.15rem 0 0.1rem; }
@media print { main#main p.rp-title { font-size: 16pt; } }
/* LBCI 1.0 (Local Building Conditions Index, pre-ratification): one view for the local conditions page and "Your area" */
.lbc-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 0.25rem 0 0.75rem; }
.lbc-score, .lbc-cov { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; }
.lbc-score { border-top: 3px solid var(--logo-teal); }
.lbc-cov { border-top: 3px solid var(--logo-slate-text); }
.lbc-k { margin: 0; font: 600 0.74rem/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--logo-slate-text); }
.lbc-n { margin: 0.2rem 0 0; color: var(--ink); }
.lbc-big { font-size: 2.4rem; font-weight: 700; line-height: 1.05; font-family: var(--font-display); }
.lbc-of { color: var(--muted); font-size: 1rem; }
.lbc-range, .lbc-cov-l { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--body); }
.lbc-none { margin: 0.4rem 0 0; font-weight: 600; }
.lbc-why { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.lbc-geo { font-size: 0.92rem; max-width: var(--measure); }
.lbc-h { margin: 1.1rem 0 0.4rem; font-size: 1.05rem; }
.lbc-comps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; }
.lbc-comp { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.75rem 0.9rem; background: var(--surface); min-width: 0; }
.lbc-comp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.lbc-comp-label { font-weight: 600; color: var(--ink); }
.lbc-comp-score { font: 700 1.35rem/1 var(--font-display); color: var(--ink); }
.lbc-comp-score.lbc-na { font: 600 0.85rem/1.2 var(--font-body); color: var(--muted); }
.lbc-bar { height: 6px; background: var(--wash); border-radius: 3px; overflow: hidden; margin: 0.45rem 0 0.4rem; }
.lbc-bar span { display: block; height: 100%; background: var(--logo-teal); }
.lbc-comp-fact, .lbc-comp-why, .lbc-comp-reason { margin: 0.25rem 0 0; font-size: 0.86rem; color: var(--body); overflow-wrap: anywhere; }
.lbc-comp-why { color: var(--muted); }
.lbc-comp-na { background: var(--wash); }
.lbc-context { margin: 0.9rem 0 0; border-left: 3px solid var(--rule); padding: 0.2rem 0 0.2rem 0.8rem; }
.lbc-context p { margin: 0.2rem 0; max-width: var(--measure); }
.lbc-context-k { font-weight: 600; color: var(--ink); }
.lbc-tag { display: inline-block; margin-left: 0.4rem; font: 600 0.7rem/1.4 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--logo-slate-text); border: 1px solid var(--rule); border-radius: 999px; padding: 0 0.45rem; }
.lbc-more { margin: 0.8rem 0 0; }
.lbc-more ul { padding-left: 1.1rem; font-size: 0.9rem; }
.lbc-statements { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; max-width: var(--measure); }
.lbc-method { font-size: 0.86rem; color: var(--muted); margin: 0.6rem 0 0; }
.lbc-search { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin: 1rem 0 0.5rem; }
.lbc-search label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.lbc-search input, .lbc-search select { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--rule); border-radius: var(--radius); min-width: 12rem; max-width: 100%; }
.lbc-msg { min-height: 1.4em; color: var(--attention); }
.lbc-held { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--wash); padding: 1rem 1.1rem; max-width: var(--measure); }
.lbc-worst { margin: 0.4rem 0 0; color: var(--ink); }
.lbc-expl { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--body); }
.lbc-comp-worst { border-color: var(--attention); }
.lbc-tag-worst { color: var(--attention); border-color: var(--attention); }
@media print { .lbc-bar { border: 1px solid #999; } .lbc-more { display: none; } }
/* method pages: plain data tables (Building ICI 2.4 bands, LBCI dimensions and aggregation comparison) */
.table-wrap { overflow-x: auto; max-width: 100%; }
.data-table { border-collapse: collapse; width: 100%; max-width: 60rem; font-size: 0.95rem; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--rule); }
.data-table th { font-weight: 600; color: var(--ink); background: var(--wash); }
@media (max-width: 40rem) {
  /* narrow: each row becomes a labelled card, so no column is squeezed into broken words */
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { border-bottom: 1px solid var(--rule); padding: 0.5rem 0; }
  .data-table td { border: 0; padding: 0.2rem 0; }
  .data-table td::before { content: attr(data-label); display: block; font-weight: 600; font-size: 0.8rem; color: var(--logo-slate-text); }
}
/* ---------- TOOLS-01 shared form kit (lib/forms/formKit.js) ----------------------
   Short choices as touch-friendly options over native radios; the original select stays in the form, hidden, as the
   source of truth. Calm, quiet styling: a rule, a fill on the chosen option, a clear focus ring, no animation. */
.f-seg { border: 0; padding: 0; margin: 0 0 0.9rem; min-width: 0; }
.f-seg-legend { font-weight: 600; color: var(--ink); padding: 0; margin: 0 0 0.45rem; font-size: 0.97rem; line-height: 1.35; }
.f-seg .field-hint { margin: -0.2rem 0 0.5rem; }
.f-seg-options { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.4rem; max-width: 34rem; }
.f-seg-options .f-seg-clear { align-self: center; flex: 0 0 auto; }
.f-seg, .retrofit-system, .retrofit-system-details, .retrofit-systems > * { min-width: 0; }
.f-seg { min-inline-size: 0; }
.f-seg-option { display: flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.4rem 0.75rem 0.4rem 0.6rem;
  border: 1px solid var(--rule-control, #9FB3BE); border-radius: var(--radius-control); background: var(--surface); color: var(--ink);
  cursor: pointer; font-size: 0.93rem; line-height: 1.2; flex: 1 1 auto; max-width: 15rem; }
.f-seg-text { overflow-wrap: normal; word-break: normal; hyphens: none; }
.f-seg-option input { width: 1.05rem; height: 1.05rem; margin: 0; flex: none; accent-color: var(--action); }
.f-seg-option:hover { border-color: var(--action); }
.f-seg-option:has(input:checked) { border-color: var(--action); background: var(--tint-teal); box-shadow: inset 0 0 0 1px var(--action); font-weight: 600; }
.f-seg-option:has(input:focus-visible) { outline: 3px solid var(--action); outline-offset: 2px; }
.f-seg-note { display: block; font-weight: 400; font-size: 0.82rem; color: var(--muted); }
.f-seg-clear { background: none; border: 0; padding: 0.15rem 0.35rem; margin: 0; min-height: 24px; min-width: 24px; color: var(--action-deep); text-decoration: underline; font-size: 0.88rem; cursor: pointer; }
.f-seg-clear:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.f-enhanced-host { display: none !important; }
.f-optional { border: 1px dashed var(--rule-control, #9FB3BE); border-radius: var(--radius-control); padding: 0 0.9rem; margin: 0 0 1rem; }
.f-optional > summary { min-height: 44px; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 600; }
.f-optional-note { font-weight: 400; font-size: 0.85rem; color: var(--muted); }
.f-progress-text { margin: 0 0 0.35rem; font-size: 0.93rem; }
.f-progress-bar { display: block; height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.f-progress-bar > span { display: block; height: 100%; background: var(--action); }
.f-errors { border: 2px solid var(--attention); background: var(--attention-bg); border-radius: var(--radius-control); padding: 0.75rem 1rem; margin: 0 0 1rem; }
.f-errors-title { font-weight: 700; margin: 0 0 0.35rem; }
.retrofit-system-details[hidden] { display: none; }
.retrofit-system-details-note { font-size: 0.9rem; color: var(--muted); margin: 0.25rem 0 0.5rem; }
/* site-wide: links inside the footer note read as links without relying on colour alone (WCAG 1.4.1) */
.colophon-note a { text-decoration: underline; text-underline-offset: 2px; }
fieldset.f-seg > legend.f-seg-legend { font-family: var(--font-body); font-size: 0.97rem; font-weight: 600; color: var(--ink); }
@media (max-width: 480px) {
  .retrofit-controls fieldset.field { padding-left: 0.6rem; padding-right: 0.6rem; }
  .retrofit-system { padding-left: 0.65rem; padding-right: 0.65rem; }
  .f-seg-option { padding: 0.4rem 0.65rem 0.4rem 0.5rem; }
}
@media print { .f-seg-clear { display: none; } }

/* ---------- ACCOUNT-02 Checkpoint 2: saved-building states ------------------
   Calm and informational. An ordinary limit is a product boundary, not an
   error, so these never use the attention colour. */
.sb-state { background: var(--tint-teal); border-left: 3px solid var(--logo-teal); padding: 0.9rem 1rem; margin: 0.75rem 0; border-radius: 4px; max-width: 46rem; }
.sb-state-title { font-weight: 650; color: var(--ink); margin: 0 0 0.3rem; overflow-wrap: anywhere; }
.sb-state p { margin: 0 0 0.45rem; color: var(--body); overflow-wrap: anywhere; }
.sb-state-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: 0.7rem; }
.sb-cards { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; max-width: 46rem; }
.sb-card { border: 1px solid var(--rule); background: var(--surface); padding: 0.8rem 0.95rem; border-radius: 4px; }
.sb-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); background: var(--wash); border: 1px solid var(--rule); border-radius: 999px; padding: 0.1rem 0.6rem; margin: 0 0 0.35rem; }
.sb-card-title { display: block; font-weight: 620; color: var(--ink); overflow-wrap: anywhere; }
.sb-card p { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--muted); overflow-wrap: anywhere; }
.sb-card .check-nav { margin-top: 0.6rem; }
/* The later .btn padding in this file overrides the text-action padding; inside a state block a text action keeps
   no inline padding, so its words line up with the edge of the button beside or above it. */
.sb-state-actions { gap: 0.5rem 1.25rem; align-items: center; }
.sb-state-actions .btn-tertiary { padding-inline: 0; }

/* ---------- ACCOUNT-02 Checkpoint 3: signed-in landing ------------------------
   A welcoming home for up to two buildings. Each building stands alone; nothing
   here is a table, a dashboard or a portfolio view. */
.lp-lede { font-size: 1.125rem; color: var(--body); max-width: 44rem; margin: 0.25rem 0 1.5rem; }
.lp-section { margin: 0 0 2.25rem; max-width: 60rem; }
.lp-h { font-family: var(--font-display); font-size: 1.25rem; font-weight: 660; color: var(--ink); margin: 0 0 0.9rem; }
.lp-cards { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .lp-cards:has(> li:nth-child(2)) { grid-template-columns: 1fr 1fr; } }
.lp-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 1.25rem 1.35rem 1.1rem; box-shadow: 0 1px 2px rgba(10, 42, 66, 0.05); display: flex; flex-direction: column; min-width: 0; }
.lp-card-head { margin-bottom: 0.85rem; }
.lp-card-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 660; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.lp-card-meta { margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--muted); }
.lp-card-score { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 0.95rem; background: var(--tint-teal); border-radius: 10px; margin-bottom: 1rem; }
.lp-index { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--ink); }
.lp-index-label { display: flex; flex-direction: column; font-size: 0.875rem; color: var(--muted); gap: 0.1rem; }
.lp-band { font-weight: 650; color: var(--ink); font-size: 0.95rem; }
.lp-facts { margin: 0; display: grid; gap: 0.85rem; flex: 1; }
.lp-fact dt { font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.02em; color: var(--muted); margin: 0 0 0.2rem; }
.lp-fact dd { margin: 0; color: var(--body); font-size: 0.95rem; overflow-wrap: anywhere; }
.lp-list { margin: 0; padding-left: 1.1rem; }
.lp-list li { margin: 0.1rem 0; }
.lp-muted { color: var(--muted); font-size: 0.875rem; margin: 0.15rem 0 0; }
.lp-local p { margin: 0; }
.lp-alert { margin: 0 0 0.2rem; }
.lp-card-actions { margin: 1.1rem 0 0; }
.lp-more { margin: 0.25rem 0 0; }
.lp-empty { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 1.35rem 1.4rem; max-width: 44rem; }
.lp-empty-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 660; color: var(--ink); margin: 0 0 0.4rem; }
.lp-points { margin: 0.5rem 0 1rem; }
.lp-limit { margin: 0.5rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--rule); max-width: 44rem; }
.lp-limit p { margin: 0 0 0.35rem; font-size: 0.925rem; color: var(--body); }
.lp-limit .lp-limit-title { font-weight: 600; color: var(--ink); }
.lp-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.lp-alerts { background: var(--tint-sand); border-radius: 12px; padding: 1.2rem 1.35rem; max-width: 44rem; }
.lp-alerts p { max-width: 40rem; }
.lp-account { border-top: 1px solid var(--rule); padding-top: 1.25rem; max-width: 44rem; }
/* Checkpoint 3 visual review: the site's prose cap on lists must not squeeze the building cards; titles lead the card */
.lp-cards { max-width: none; }
.lp-card .lp-card-title { font-size: 1.3rem; }
.lp-alerts .field-hint { margin-top: 0.75rem; }
.lp-cards:not(:has(> li:nth-child(2))) { max-width: 46rem; }
.lp-empty .lp-empty-title { font-size: 1.25rem; }

/* ---------- ACCOUNT-02 Checkpoint 4: building workspace --------------------- */
.ws-back { margin: 0 0 0.5rem; }
.ws-meta { color: var(--muted); margin: 0.25rem 0 1rem; }
.ws-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; padding: 0.6rem 0 0.9rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--rule); font-size: 0.925rem; }
.ws-section { margin: 0 0 2rem; max-width: 50rem; scroll-margin-top: 5rem; }
.ws-group { margin: 0 0 1.1rem; }
.ws-group-h { font-size: 1rem; font-weight: 650; color: var(--ink); margin: 0 0 0.45rem; }
.ws-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ws-item { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 0.7rem 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.ws-item-main { flex: 1 1 16rem; min-width: 0; }
.ws-item-label { display: block; font-weight: 650; color: var(--ink); }
.ws-item-facts { display: block; font-size: 0.9rem; color: var(--muted); overflow-wrap: anywhere; }
.ws-item-actions { display: flex; gap: 0.25rem 1rem; }
.ws-item-actions .btn-tertiary { padding-inline: 0; }
.ws-item [data-ws-panel] { flex-basis: 100%; }
.ws-form { background: var(--wash); border-radius: 10px; padding: 0.9rem 1rem; margin: 0.4rem 0; display: grid; gap: 0.6rem; }
.ws-field { display: grid; gap: 0.2rem; font-size: 0.925rem; max-width: 24rem; }
.ws-field span { font-weight: 600; color: var(--ink); }
.ws-add { margin-top: 0.75rem; }
.ws-versions { margin: 0.5rem 0 0; padding-left: 1.25rem; color: var(--body); }
.ws-manage { border-top: 1px solid var(--rule); padding-top: 1.1rem; }

/* ---------- ACCOUNT-02 Checkpoint 4: header account controls ---------------- */
/* same spacing as the other header links (.nav-links gap 1.8rem), and the logo never shrinks to make room */
.nav-account { display: inline-flex; align-items: center; gap: 1.8rem; }
.masthead-inner .brand { flex-shrink: 0; }
.nav-signout { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.nav-signout:hover, .nav-signout:focus-visible { text-decoration: underline; text-underline-offset: 0.22em; }
.nav-account-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin: 0 0 0.75rem; }
.nav-account-menu a, .nav-account-menu .nav-signout { padding: 0.45rem 0; min-height: 2.75rem; display: inline-flex; align-items: center; }
/* the menu's account items match the other menu entries: same weight, colour and full-width separators */
.nav-account-menu { align-items: stretch; width: 100%; }
.nav-account-menu > a, .nav-account-menu > .nav-signout { width: 100%; text-align: left; border-bottom: 1px solid var(--rule); font-weight: 600; color: var(--ink); }

/* ACCOUNT-02 Checkpoint 4 (founder ruling, Option 1): inline navigation only where the COMPLETE row fits, including the
   signed-in account controls. Measured: the full signed-in row first fits inside the header at 1328px (signed out 1192px),
   so one breakpoint for both states, 84rem (1344px), keeps the header identical whether or not someone is signed in.
   Below it, the existing Menu treatment carries every destination and the account section. "Check a building" is never
   clipped or pushed off screen. Declared last so source order, not specificity, decides; [hidden] still hides the panel. */
@media (max-width: 83.99rem) { .nav-links { display: none; } .nav-toggle { display: inline-flex; } .nav-menu { display: block; } }
@media (min-width: 84rem) { .nav-links { display: flex; } .nav-toggle { display: none; } .nav-menu { display: none; } }

/* TOOLS-02 Check a Building: follow-up questions appear only once the box they depend on is ticked */
.check-finding-group:has(input[name^="finding:"]:not(:checked)) .check-issue-follow,
.check-finding-group:has(input[name^="finding:"]:not(:checked)) .check-repair-follow { display: none; }
.check-issue-follow { margin: 0.5rem 0 0.25rem 2.25rem; }
.check-issue-follow label { font-weight: 600; }

/* TOOLS-02 tools directory: every building-record tool reachable directly from the directory */
.th-record-list { list-style: none; margin: 0.75rem 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.25rem 1.5rem; max-width: none; }
.th-record-list a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 0.2em; display: inline-block; padding: 0.35rem 0; min-height: 44px; line-height: 1.4; }
.th-record-list a:hover { text-decoration-thickness: 2px; }
.check-finding-group > li:has(.check-issue-follow) { display: block; }
.check-finding-group > li:has(.check-issue-follow) > .choice { width: 100%; }
.check-issue-follow { flex: 1 0 100%; max-width: 28rem; }