/* ============================================================
   Caregiver Rest · design system v93 · "The labelled house"
   Form source: the signs and labels families actually tape up
   in a dementia home, built to published wayfinding standards.
   Reasons ledger + usage budgets: docs/DESIGN-GUIDE.md.
   Every adjacent critical pair holds >=30 LRV difference
   (DSDC standard); numbers verified in scripts/lrv-check.js.
   Faces: Atkinson Hyperlegible (signage) + Newsreader (prose).
============================================================ */

:root {
  /* surfaces */
  /* 2026-09-30: desaturated from cream (#EFEBE2, 29% saturation) to a
     quiet warm grey. The reason the wall is dimmed (it used to be a lamp
     at 3am) is kept; the cream was not a reason, it was the 2025 "tasteful
     redesign" default the Slop Register now lists, and beige card on beige
     wall made every surface read as a smudge. The card is lifted further
     off the wall so a surface reads as a surface. */
  --paper: #EAEAE6;        /* the wall. Dimmed off white, not cream */
  --paper-deep: #E0E0DB;   /* recessed wall */
  --card: #F7F7F4;         /* the sign face */
  --hairline: #C4C4BD;

  /* ink. Contrast is a BAND, not a maximum: see the comfort-band note above. */
  --ink: #2F2F2C;          /* inside the light comfort band; contrast-check.js holds both ends */
  --ink-soft: #52524D;
  --ink-faint: #5E5E58;

  /* the four zones — colour-coded areas, like a labelled house.
     Deep plates carry white text (sign convention): each plate is
     >=82 LRV points from the wall and >=88 from its own text. */
  --now: #7E392E;          /* right now · crisis */
  --now-deep: #692F26;
  --route: #31506B;        /* learn · the chapters */
  --route-deep: #263F55;
  --bench: #2F5449;        /* tools · the workbench */
  --bench-deep: #24443A;
  --keep: #4E4460;         /* you · what keeps the caregiver */
  --keep-deep: #3E3650;
  --plate-text: #F7F7F4;

  /* the one wash that survives: a highlighter is literally what the
     highlight feature is. ΔLRV vs paper 33.8; ink on it 9.4:1. */
  --tape: #E0C450;
  --tape-soft: #F3E9BF;

  --danger: #8F332A;

  /* faces */
  --sign: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif-body: "Newsreader", Georgia, serif;

  /* one ratified radius: printed labels are rectangles */
  --r: 2px;

  /* signs are flat on the wall; the single shadow left belongs to the
     one true overlay (the Display panel). Budget: overlays only. */
  --shadow-soft: none;
  --shadow-card: none;
  --shadow-lift: none;
  --shadow-overlay: 0 4px 18px rgba(34,33,29,.16);

  --fs-base: 19px;

  /* one type scale and one spacing rhythm. Sizes only, so they are never
     redefined in the dark or night blocks. Materials ledger, 2026-09-02. */
  --fs-h1: clamp(30px, 4.2vw, 40px);
  --fs-h2: clamp(22px, 2.8vw, 26px);
  --lh-prose: 1.6;                          /* Materials ledger, 2026-09-02 */
  --rhythm: 8px;
  --gap-block: calc(var(--rhythm) * 5);     /* 40 */
  --gap-section: calc(var(--rhythm) * 9);   /* 72 */
}

html[data-font="easy"] {
  --serif-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system, "Segoe UI", Roboto, sans-serif;
}
html[data-font="easy"] body { line-height: 1.75; letter-spacing: .008em; }
html[data-font="easy"] .say { font-family: var(--serif-body); font-style: normal; font-weight: 700; }

html[data-size="lg"]  { --fs-base: 21.5px; }
html[data-size="xl"]  { --fs-base: 24px; }

/* The house at night. Not an inversion: plates dim to near-dark and
   their zone colour moves to a lit edge and the text, the way a
   glow-edge light switch stays findable in a dark hallway.
   dInk on dPaper ΔLRV 79 (14.4:1); every zone edge >=35 from dPaper. */
html[data-theme="dark"] {
  --paper: #191C1E;          /* lifted off black: pure black + bright text is the halation recipe */
  --paper-deep: #202426;
  --card: #202426;
  --hairline: #383C3F;
  --ink: #C9C6BF;            /* 10.0:1, not 14.4:1. Pulled off near-white on purpose */
  --ink-soft: #A8A59E;       /* 7.0:1 */
  --ink-faint: #9C998F;      /* 6.0:1 */
  --now: #CF8E7C;
  --now-deep: #DCA08E;
  --route: #88ABCB;
  --route-deep: #9FBDD8;
  --bench: #87B8A4;
  --bench-deep: #A0C9B8;
  --keep: #AC9FC2;
  --keep-deep: #BDB2CF;
  --plate-text: #C9C6BF;
  --tape: #BFAA52;
  --tape-soft: #2B2717;
  --danger: #D18876;
  --shadow-overlay: 0 4px 18px rgba(0,0,0,.5);
}
/* dark ink for text sitting ON a light accent fill in dark mode */
html[data-theme="dark"] { --on-accent: #191C1E; }
:root { --on-accent: var(--plate-text); }
/* zone plates in the dark: deep tinted ground + lit zone edge */
:root {
  --plate-now-bg: var(--now);     --plate-now-edge: var(--now);
  --plate-route-bg: var(--route); --plate-route-edge: var(--route);
  --plate-bench-bg: var(--bench); --plate-bench-edge: var(--bench);
  --plate-keep-bg: var(--keep);   --plate-keep-edge: var(--keep);
}
html[data-theme="dark"] {
  --plate-now-bg: #2E211D;   --plate-now-edge: #CF8E7C;
  --plate-route-bg: #1F2833; --plate-route-edge: #88ABCB;
  --plate-bench-bg: #1F2C27; --plate-bench-edge: #87B8A4;
  --plate-keep-bg: #282433;  --plate-keep-edge: #AC9FC2;
}

/* ————— night: for 3am, when even dark mode is too much —————
   The calm research says the lever that actually matters is total light
   dose, which is brightness times how blue-weighted the light is, and
   that BRIGHTNESS is the half you can really move. So this is not a
   third colour scheme, it is the same house with the lights turned
   down: near-black ground, text luminance cut about a quarter, every
   accent pulled back. It still clears the same DSDC 30-LRV floor and
   WCAG AA that daylight does, because a caregiver reading a crisis card
   at 3am is the LAST person who should be squinting. lrv-check.js
   asserts all three themes. */
html[data-theme="night"] {
  --paper: #131618;          /* dimmer than dark, still not black */
  --paper-deep: #191D1F;
  --card: #191D1F;
  --hairline: #2E3234;
  --ink: #A5A29B;            /* 7.1:1. The dimmest text this site will ever show */
  --ink-soft: #96938D;       /* holds the 5:1 floor on card as well as paper */
  --ink-faint: #928F89;
  --now: #C98878;
  --now-deep: #D49786;
  --route: #7E9DBA;
  --route-deep: #92AEC8;
  --bench: #7DA895;
  --bench-deep: #92B9A8;
  --keep: #9E92B2;
  --keep-deep: #AFA4C0;
  --plate-text: #A5A29B;
  --tape: #A99446;
  --tape-soft: #201D0E;
  --danger: #CB8474;
  --on-accent: #131618;
  --plate-now-bg: #241A17;   --plate-now-edge: #C98878;
  --plate-route-bg: #171F27; --plate-route-edge: #7E9DBA;
  --plate-bench-bg: #17211D; --plate-bench-edge: #7DA895;
  --plate-keep-bg: #1D1A25;  --plate-keep-edge: #9E92B2;
  --shadow-overlay: 0 4px 18px rgba(0,0,0,.6);
}
html[data-theme="night"] footer.site { background: #101412; color: #8E8B85; }

/* Print always in daylight. Paper is white; a phone in dark mode was
   printing the dark palette's pale ink onto it: a nearly blank page
   (found by PDF-proofing choosing.html, 2026-07-19). Same selector,
   later in the file, so these win when printing, whatever the screen
   theme was. */
@media print {
  html[data-theme="dark"] {
    --paper: #EAEAE6;
    --paper-deep: #E0E0DB;
    --card: #F7F7F4;
    --hairline: #C4C4BD;
    --ink: #2F2F2C;
    --ink-soft: #52524D;
    --ink-faint: #5E5E58;
    --now: #7E392E;
    --now-deep: #692F26;
    --route: #31506B;
    --route-deep: #263F55;
    --bench: #2F5449;
    --bench-deep: #24443A;
    --keep: #4E4460;
    --keep-deep: #3E3650;
    --plate-text: #F7F7F4;
    --tape: #E0C450;
    --tape-soft: #F3E9BF;
    --danger: #8F332A;
    --on-accent: #F7F7F4;
    --plate-now-bg: #7E392E;   --plate-now-edge: #7E392E;
    --plate-route-bg: #31506B; --plate-route-edge: #31506B;
    --plate-bench-bg: #2F5449; --plate-bench-edge: #2F5449;
    --plate-keep-bg: #4E4460;  --plate-keep-edge: #4E4460;
    --shadow-soft: none; --shadow-card: none; --shadow-lift: none;
  }
  html[data-theme="dark"] footer.site { background: transparent; }
  /* night prints as daylight for the same reason dark does */
  html[data-theme="night"] {
    --paper: #EAEAE6; --paper-deep: #E0E0DB; --card: #F7F7F4; --hairline: #C4C4BD;
    --ink: #2F2F2C; --ink-soft: #52524D; --ink-faint: #5E5E58;
    --now: #7E392E; --now-deep: #692F26; --route: #31506B; --route-deep: #263F55;
    --bench: #2F5449; --bench-deep: #24443A; --keep: #4E4460; --keep-deep: #3E3650;
    --plate-text: #F7F7F4; --tape: #E0C450; --tape-soft: #F3E9BF; --danger: #8F332A;
    --on-accent: #F7F7F4;
    --plate-now-bg: #7E392E;   --plate-now-edge: #7E392E;
    --plate-route-bg: #31506B; --plate-route-edge: #31506B;
    --plate-bench-bg: #2F5449; --plate-bench-edge: #2F5449;
    --plate-keep-bg: #4E4460;  --plate-keep-edge: #4E4460;
    --shadow-soft: none; --shadow-card: none; --shadow-lift: none;
  }
  html[data-theme="night"] footer.site { background: transparent; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Anchor jumps land instantly, on purpose. Native smooth scrolling animates
   faster the further it travels, so our longest, most-used jump was the worst
   one: the Guide menu item flings you 2,716px down the homepage in one blur.
   That reads as jarring to anyone, and large-distance motion is a known trigger
   for vertigo and nausea in exactly our audience. An instant jump has no such
   cost: you are simply there, under the heading you asked for. Consistent with
   the no-timed-animations rule. (Interaction feedback like .settle and savePop
   stays: those are short, local, and you asked for them by tapping.) */
html { scroll-behavior: auto; }
body {
  font-family: var(--serif-body);
  font-size: var(--fs-base);
  line-height: var(--lh-prose);
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
::selection { background: var(--tape); color: #2F2F2C; }
:focus-visible { outline: 3px solid var(--route); outline-offset: 2px; border-radius: var(--r); }

/* Headings are signage: the label face, bold, sentence case. NHS/RNIB
   guidance for this audience: sans-serif, never block capitals (word
   shape survives longer than meaning). Prose below stays Newsreader. */
h1, h2, h3, h4 { font-family: var(--sign); font-weight: 700; line-height: 1.16; letter-spacing: -0.008em; }

a { color: var(--route); }
a:hover { color: var(--route-deep); }

/* the small label over a heading: a door label, not an engraving.
   Sentence case, no letterspacing — see the caps rule above. */
.kicker {
  font-family: var(--sign);
  font-size: max(15px, .79em); font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-faint);
}
.help-now > .kicker { color: var(--ink); }
/* The calm visitor's exit ramp: real-caregiver feedback 2026-07-16 was
   "these don't apply to me (right now)". One quiet line, crisis chips
   untouched and still first: the 3am path pays nothing for this. */
.calm-start { font-size: .95em; color: var(--ink-soft); margin: 4px 0 4px; }
.calm-start a { color: var(--route); white-space: nowrap; }
/* Below the answers since 2026-09-30: it is for the reader with nothing
   urgent, and they can scroll. It used to sit above the chips and cost a
   phone four lines before the first answer. */
.calm-start.after { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--hairline); line-height: 1.9; }

/* The `settle` motion is kept ONLY for things you opened by tapping: a crisis
   card, a practice outcome. Those animate because you asked them to.

   It used to run on page load too: nine blocks on the homepage each slid up
   14px and faded in over .7s, staggered .06s-.3s, the emergency strip and the
   crisis panel among them. That broke two rules at once. "Interaction-triggered
   only, never timed" (this was timed, and nobody asked for it) and "the crisis
   path stays fastest" (the fastest path was arriving last, at 3am, moving).
   It survived only because it predated the rule that outlawed it and got
   grandfathered in. Removed 2026-07-15. Page content is now simply there.
   Do not reintroduce entrance motion: this audience includes people for whom
   drifting content is a vertigo trigger, not a delight. */
@keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.d1, .d2, .d3, .d4 { /* stagger delays: retired with the load animation */ }
@media (prefers-reduced-motion: reduce) {
  .fire-card.show, .outcome.show { animation: none; }
  /* scroll-behavior isn't repeated here any more: it's auto for everyone now. */
  * { transition: none !important; }
}

/* ————— header ————— */
header.site {
  padding: 22px 40px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto;
}
/* The name never breaks. Without these, between 721 and ~1080px the flex
   row had no wrap, the name block took the squeeze, "Caregiver / Rest" split
   in two and the tagline ran to three lines (owner, 2026-09-02, and visible in
   this session's own screenshots at 800px). The nav wrapping to a second row
   is the right thing to give. */
header.site a.home { flex: 0 0 auto; }
header.site .wordmark small { white-space: nowrap; }
.rose { width: 44px; height: 44px; flex-shrink: 0; }
.rose .rose-ring { stroke: var(--bench); }
.rose .rose-n { fill: var(--now); }
.rose .rose-pt { fill: var(--bench); }
header.site a.home { text-decoration: none; display: flex; align-items: center; gap: 14px; color: inherit; }
header.site .wordmark { font-family: var(--sign); font-size: 22px; font-weight: 700; color: var(--ink); }
header.site .wordmark small { display: block; font-family: var(--serif-body); font-size: 13px; font-weight: 400; font-style: italic; color: var(--ink-soft); margin-top: 1px; }
/* Two rows by design, every area (2026-09-05). Row one is the name plate:
   wordmark, area plate, and the two display controls on the right. Row two
   is the directory: the nav on its own line. Before this the nav sat at the
   right of the wordmark and the controls wrapped wherever the row ran out,
   so dementia (seven links) wrapped its controls under the name, HG (six)
   fit on one row, and autism (nine) would have done something else again.
   A sign in a lobby is laid out name first, then the directory; that is the
   form here, and it reads the same at 375, 768 and 1280. */
nav.main { flex-basis: 100%; order: 10; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.theme-btn { margin-left: auto; }
nav.main a {
  font-family: var(--sign);
  font-size: 15px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none; position: relative; padding: 4px 0;
  white-space: nowrap;
}
nav.main a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  border-bottom: 3px solid var(--ink); transition: right .25s ease;
}
nav.main a:hover::after, nav.main a.active::after { right: 0; }
nav.main a.active { color: var(--ink); }
nav.main a { display: inline-flex; align-items: center; gap: 6px; }
nav.main a .ico { width: 17px; height: 17px; flex: none; }

/* The brightness control lives in the header, not inside a menu.
   Reason, learned from the owner at 3am: dark mode existed from day one
   and was two taps deep behind a label that read "Light / dark", so a
   tired person never found it. One tap, always visible, and it says
   which state you are in rather than showing a bare glyph. */
.theme-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sign); font-size: 13.5px; font-weight: 700;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--ink-faint); border-radius: var(--r);
  height: 34px; padding: 0 13px; cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease;
}
.theme-btn:hover { border-color: var(--ink); }
.theme-btn .tmark { display: inline-flex; font-size: 14px; line-height: 1; color: currentColor; }
@media print { .theme-btn { display: none !important; } }

/* comfort controls: one labeled "Display" control opening a panel where every
   control carries its icon AND its name. A 78-year-old on a phone gets words,
   not three cryptic glyphs (tooltips don't exist on touch). details/summary,
   so the panel opens even before any script arrives. */
.comfort { position: relative; margin-left: 14px; }
.comfort summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sign); font-size: 13.5px; font-weight: 700;
  background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: var(--r);
  height: 34px; padding: 0 14px; cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.comfort summary::-webkit-details-marker { display: none; }
.comfort summary:hover, .comfort[open] summary { border-color: var(--ink); color: var(--ink); }
.comfort-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
  min-width: 178px; padding: 6px;
  background: var(--card); border: 1px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--shadow-overlay);
  display: flex; flex-direction: column; gap: 2px;
}
.comfort-panel button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--sign); font-size: 15px; font-weight: 500; text-align: left;
  background: none; color: var(--ink); border: 0; border-radius: var(--r);
  padding: 10px 12px; cursor: pointer; white-space: nowrap;
}
.comfort-panel button:hover { background: var(--paper-deep); }
.comfort-panel .ci {
  display: inline-flex; justify-content: center; align-items: center;
  width: 30px; height: 26px; flex: none;
  font-size: 13px; font-weight: 700; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r);
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 40px; }

/* ————— emergency strip ————— */
/* The 911 line is a sign (2026-10-01 audit): it was one underlined line in
   the body face, the same weight as any link, and on phones its arrow
   wrapped onto a line alone. Now the label face, a phone mark, the
   instruction in bold, then the door to the full page. Red only on the mark:
   it is the one warning on the first screen. */
.emergency-strip {
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center;
  column-gap: 10px; row-gap: 0;
  background: var(--paper-deep);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 8px 16px; font-family: var(--sign); font-size: 16px; color: var(--ink);
}
.emergency-strip .es-ico { grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--danger); }
.emergency-strip .es-lead { font-weight: 700; color: var(--ink); line-height: 1.3; }
.emergency-strip a { color: var(--route); font-weight: 500; display: inline-block; padding: 2px 0 4px; min-height: 24px; }

/* emergency page: the answer before the prose */
.em-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.em-btn {
  flex: 1 1 200px; text-align: center; text-decoration: none;
  font-family: var(--sign); font-weight: 700; font-size: 1em; white-space: nowrap;
  padding: 14px 16px; border-radius: var(--r);
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink);
}
.em-btn.danger { background: var(--danger); color: var(--on-accent); border-color: var(--danger); }

/* "On this page" jump chips — auto-added on long pages (assets/app.js) */
/* The page map: full labels in 44px rows (2026-10-01 audit; was pills cut
   at 32 characters). Over 6 sections it folds behind one summary line. */
.page-jump { margin: 4px 0 24px; font-family: var(--sign); }
.page-jump .pj-label { display: block; font-size: .82em; font-weight: 700; color: var(--ink-soft); margin: 0 0 4px; }
/* Anything that opens says so in words (owner, 2026-10-02, of the folded
   page map: "not clear this does more, opens/expands"). One grammar for every
   expandable: a bordered box, the label, and "Open" that becomes "Close".
   Words, not a turning chevron (SLOP-REGISTER 2026-09-07). Used by the folded
   page map and by details.more (recode.html). */
.page-jump details, details.more { border: 1px solid var(--hairline); border-radius: 4px; background: var(--card); }
.page-jump summary, details.more > summary {
  list-style: none; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer;
  padding: 10px 16px; font-size: max(16px, .9em); font-weight: 700; color: var(--ink);
}
.page-jump summary::-webkit-details-marker, details.more > summary::-webkit-details-marker { display: none; }
.page-jump summary::after, details.more > summary::after {
  content: "Open"; margin-left: auto; flex: none; font-weight: 600; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
.page-jump details[open] summary::after, details.more[open] > summary::after { content: "Close"; }
.page-jump details > .pj-list { padding: 0 16px 6px; }
details.more { margin: 14px 0 22px; }
details.more > .more-body { padding: 0 18px 12px; }
@media print {
  details.more > .more-body { display: block; }
  .page-jump summary::after, details.more > summary::after { display: none; }
}
/* Each row is a tick box and the link (2026-10-02, "Where you left off" in
   app.js): the box ticks itself once a section has been read, or by hand.
   A done row turns to --ink-soft, never to an opacity, so it stays inside
   the text comfort band. */
.pj-row { display: flex; align-items: center; border-bottom: 1px solid var(--hairline); }
.pj-list .pj-row:first-child { border-top: 1px solid var(--hairline); }
.pj-tick { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; min-height: 44px; margin-left: -11px; cursor: pointer; }
.pj-tick input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.pj-list a {
  flex: 1; display: flex; align-items: center; min-height: 44px; padding: 6px 0;
  font-size: .9em; line-height: 1.25; color: var(--ink); text-decoration: none;
}
.pj-row:has(input:checked) a { color: var(--ink-soft); }
.pj-list a:hover { text-decoration: underline; }
.page-jump .pj-count { font-weight: 400; color: var(--ink-soft); }
@media (min-width: 760px) {
  .pj-list { columns: 2; column-gap: 32px; }
  .pj-row { break-inside: avoid; }
}
/* the row back to where the reader stopped: one per page, above the map */
.pj-resume {
  display: flex; align-items: center; gap: 14px; min-height: 56px; margin: 4px 0 14px; padding: 10px 16px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 6px;
  font-family: var(--sign); color: var(--ink); text-decoration: none; line-height: 1.3;
}
.pj-resume .ico { width: 24px; height: 24px; flex-shrink: 0; }
.pj-resume > span { display: flex; flex-direction: column; }
.pj-resume .pj-resume-k { font-size: .82em; font-weight: 700; color: var(--ink-soft); }
.pj-resume strong { font-size: 1.02em; font-weight: 720; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pj-resume .pj-resume-w { font-size: .85em; color: var(--ink-soft); }
.pj-resume:hover strong { text-decoration-thickness: 2px; }
@media print { .pj-resume, .pj-tick { display: none !important; } }
h2[id] { scroll-margin-top: 16px; }

/* ————— panels & cards ————— */
.panel {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 40px 44px; margin-bottom: 26px;
}
.panel .kicker { display: block; margin-bottom: 8px; }
.panel h2, .panel h3 { color: var(--ink); }
.panel p.desc { font-size: .9em; color: var(--ink-soft); }

/* the crisis panel: the biggest sign in the house. A thick ink frame,
   not a shadow: it must read as THE door at arm's length. */
.help-now {
  position: relative;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  padding: 26px 40px 30px;
  margin: 16px 0 30px;
}
.help-now > * { position: relative; }
/* Deliberately off the --fs-h2/--fs-h1 scale: the crisis panel's heading
   stays small so the chips stay high on the first screen. The crisis path
   does not move for a type scale. */
.help-now h1 { font-size: clamp(24px, 3vw, 30px); color: var(--ink); margin-bottom: 4px; }
.help-now p.sub { font-size: .92em; color: var(--ink-soft); margin-bottom: 15px; }

/* "And how are you?": the caregiver's own panel. A hairline frame, one
   step quieter than the crisis panel's ink frame. The 5px plum spine it
   used to carry was retired 2026-09-30: a coloured stripe down one edge
   of a card is the Slop Register's most reliable tell, and the heading
   already says whose panel this is. */
.foryou {
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: 30px 40px 30px;
  margin-top: 34px;
}
.foryou h2 { font-size: var(--fs-h2); }
.foryou p.sub { margin-bottom: 16px; }
.foryou > .kicker { color: var(--ink); }

/* search */
.search-row { margin-bottom: 14px; }
.search-row input {
  width: 100%; max-width: 460px; min-height: 48px;
  font-family: var(--sign); font-size: 1em;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink-faint); border-radius: var(--r);
  padding: 10px 16px; outline: none;
}
.search-row input:focus { border-color: var(--route); }
.search-row input::placeholder { color: var(--ink-faint); }

/* chips: the taped-up labels themselves. Rectangular, hand-reachable,
   ink text on the sign face; the crisis zone's edge marks the three
   most-reached-for. */
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; }

/* quiet shelves — crisis chips grouped under small labels */
.chip-shelves .chip-group { margin-bottom: 18px; }
.chip-shelves .chip-group:last-child { margin-bottom: 0; }
.chip-group-label {
  display: block;
  font-family: var(--sign);
  font-size: .84em; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--ink);
  margin-bottom: 8px;
}
.chip-group.hidden { display: none; }
.chip-group.anytime { margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--ink-faint); border-radius: var(--r);
  padding: 8px 15px 8px 12px; min-height: 44px;
  font-family: var(--sign); font-size: 1em; font-weight: 500; color: var(--ink);
  cursor: pointer; transition: all .18s ease;
}
.chip svg { width: 18px; height: 18px; stroke: var(--ink-soft); flex-shrink: 0; }
.chip:hover { border-color: var(--ink); background: var(--card); }
.chip.active { background: var(--plate-now-bg); border: 1px solid var(--plate-now-edge); color: var(--plate-text); }
.chip.active svg { stroke: var(--plate-text); }
.chip.hidden { display: none; }
.chip.pine svg { stroke: var(--ink-soft); }
.chip.pine:hover { border-color: var(--ink); }
.chip.pine.active { background: var(--plate-keep-bg); border: 1px solid var(--plate-keep-edge); color: var(--plate-text); }
.chip.pine.active svg { stroke: var(--plate-text); }

/* ── The answer list (2026-09-30) ──────────────────────────────────────
   Inside the crisis shelves and the "about you" panel a chip is a ROW:
   full width, left-aligned, 52px, a chevron at the right edge, separated
   from its neighbours by a hairline. It replaced a ragged cloud of
   bordered pills of every width, whose long labels wrapped and centred
   ("Seeing things / false beliefs" broke across two lines) and which a
   tired eye had to read left-right-left to scan. A list is read top to
   bottom, once. It is the form of every directory a reader has used:
   a phone's settings, a building's lobby board, NHS's own link lists.
   The saved and recent rows keep the pill form on purpose: they are
   shortcuts, and four pills take one line where four rows take four.

   Open state is ink on the sign face, never zone red: red is reserved
   for warnings (Slop Register, 2026-09-07), and "this one is open" is
   not a warning. The chevron is drawn in CSS and never animates. */
.chip-shelves .chips, #chips-you { display: block; border-top: 1px solid var(--hairline); }
.chip-shelves .chip, #chips-you .chip {
  display: flex; width: 100%; min-height: 52px;
  text-align: left; justify-content: flex-start; gap: 12px;
  background: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0;
  padding: 12px 34px 12px 4px; position: relative;
  font-size: 1em; line-height: 1.3; font-weight: 400;
  transition: background .15s ease;
}
.chip-shelves .chip::after, #chips-you .chip::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 9px; height: 9px; margin-top: -5px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(-45deg);
}
.chip-shelves .chip svg, #chips-you .chip svg { width: 20px; height: 20px; }
.chip-shelves .chip:hover, #chips-you .chip:hover { background: var(--paper); border-color: var(--hairline); }
.chip-shelves .chip.active, #chips-you .chip.active,
.chip-shelves .chip.pine.active, #chips-you .chip.pine.active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.chip-shelves .chip.active svg, #chips-you .chip.active svg { stroke: var(--paper); }
.chip-shelves .chip.active::after, #chips-you .chip.active::after {
  border-color: var(--paper); transform: rotate(45deg); margin-top: -8px;
}
.chip-shelves .chip.hidden, #chips-you .chip.hidden { display: none; }
/* In the dark themes the open row is a lifted dark surface with its text
   lit, not an inverted light bar: an ink-filled bar became the brightest
   thing on a dark screen, which is the glare the dark themes exist to
   avoid. The house-at-night convention above: dark plate, lit text.
   Contrast: 6.6:1 dark, 5.2:1 darker, both inside the band. */
html[data-theme="dark"] .chip-shelves .chip.active, html[data-theme="dark"] #chips-you .chip.active,
html[data-theme="night"] .chip-shelves .chip.active, html[data-theme="night"] #chips-you .chip.active {
  background: var(--hairline); color: var(--ink); border-color: var(--hairline);
}
html[data-theme="dark"] .chip-shelves .chip.active svg, html[data-theme="dark"] #chips-you .chip.active svg,
html[data-theme="night"] .chip-shelves .chip.active svg, html[data-theme="night"] #chips-you .chip.active svg { stroke: var(--ink); }
html[data-theme="dark"] .chip-shelves .chip.active::after, html[data-theme="dark"] #chips-you .chip.active::after,
html[data-theme="night"] .chip-shelves .chip.active::after, html[data-theme="night"] #chips-you .chip.active::after { border-color: var(--ink); }
/* the answer opens directly under the row that was tapped */
.chip-shelves .chips > .fire-card, #chips-you > .fire-card { margin: 0; padding: 24px 6px 28px; border-top: 0; border-bottom: 1px solid var(--hairline); }
.chip-group-label { font-size: .92em; margin-bottom: 6px; }
.chip-shelves .chip-group { margin-bottom: 26px; }
/* the saved and recent rows stay as shortcuts, and their open state is ink too */
.saved-row .chip.active, .recent-row .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.saved-row .chip.active svg, .recent-row .chip.active svg { stroke: var(--paper); }
.no-match { display: none; color: var(--ink-soft); font-size: .9em; margin-top: 14px; }
.no-match.show { display: block; }
.no-match a { color: var(--route); }

/* fire card */
.help-now { overflow-anchor: none; } /* the open card moves between shelves; don't let scroll anchoring fight the explicit scroll */
.fire-card { display: none; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--hairline); scroll-margin: 12px; }
.fire-card.show { display: block; animation: settle .45s cubic-bezier(.22,.8,.36,1) both; }
/* when the card opens inside the two-column shelves, it spans the full row
   and closes with a rule so the shelves visibly resume below it */
.chip-shelves .fire-card { grid-column: 1 / -1; margin: 6px 0 22px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.fire-head { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 20px; }
/* The title never shares a line with Save and Print on a phone: squeezed
   beside them it broke one word per line (seen 2026-09-30). */

.fire-card h3 { font-size: 1.35em; color: var(--ink); font-weight: 700; flex: 1 1 auto; }
/* The title never shares a line with Save and Print on a phone: squeezed
   beside them it broke one word per line (seen 2026-09-30). */
@media (max-width: 560px) { .fire-card h3 { flex: 1 1 100%; } }
.card-actions { display: flex; gap: 8px; }
.card-actions button {
  font-family: var(--sign); font-size: 14px; font-weight: 700;
  background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--ink-faint); border-radius: var(--r);
  padding: 7px 16px; cursor: pointer; transition: all .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.card-actions button:hover { border-color: var(--ink); color: var(--ink); }
.card-actions button.saved { background: var(--tape); border-color: var(--tape); color: #22211D; }

/* crisis steps: numbered route markers, the way a taped-up "what to do"
   sheet numbers its lines. Plate + white numeral, findable at 3am. */
.fire-card ol { list-style: none; margin-bottom: 20px; }
.fire-card ol li { position: relative; padding: 0 0 17px 56px; }
.fire-card ol li::before {
  content: attr(data-n);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sign); font-size: 17px; font-weight: 700; font-style: normal;
  /* ink, not crisis red (2026-09-30): a step number is not a warning */
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r); line-height: 1;
}
.fire-card ol li::after {
  content: ""; position: absolute; left: 15px; top: 38px; bottom: 4px;
  border-left: 1px solid var(--hairline);
}
.fire-card ol li:last-child::after { display: none; }
.fire-card ol li strong { font-weight: 600; color: var(--ink); }

/* the words to say out loud: speech, so it stays the reading face,
   marked by a spine, never a wash. */
.say {
  display: block; margin-top: 8px; position: relative;
  background: none; border-left: 3px solid var(--ink-faint); border-radius: 0;
  padding: 6px 18px 6px 38px;
  font-family: var(--serif-body); font-style: italic; font-weight: 500;
  font-size: 1.04em; color: var(--ink);
}
.say::before {
  content: "“"; position: absolute; left: 10px; top: 0;
  font-family: var(--serif-body); font-size: 2em; line-height: 1;
  color: var(--ink-faint); opacity: .8;
}
.foryou .say { border-left-color: var(--ink-faint); }

/* the warning plate: a bordered sign, never a tinted box */
/* The warning (2026-09-30): a solid red heading band carrying the lead
   sentence, then the body on the sign face. It is the NHS care-card form,
   measured live on nhs.uk that day ("Call 999 or go to A&E if:" on a solid
   band): urgency carried by a filled band and words, which a sleepy eye
   reads before it reads anything else, instead of a thin red outline with a
   5px stripe down one side (the Slop Register's most reliable tell). Red is
   exactly right here: this is the one thing on a card that IS a warning.
   The body went from .87em to .95em. The most important safety sentence on
   the card had been the smallest text on it. */
.redflag {
  display: block;
  background: var(--card); border: 2px solid var(--danger);
  border-radius: var(--r); padding: 0 0 14px; margin-bottom: 20px;
  font-size: .95em; color: var(--ink); overflow: hidden;
}
.redflag > span:first-child { display: none; }
.redflag > span:last-child { display: block; padding: 0 16px; }
.redflag > span:last-child > strong:first-child {
  display: block; margin: 0 -16px 10px; padding: 9px 16px 10px;
  background: var(--danger); color: var(--on-accent);
  font-family: var(--sign); font-size: 1.02em; line-height: 1.3;
}
/* The red does ONE job: mark this as a warning. The frame and the flag
   glyph do that. Tinting every bold word and every link inside the flag
   as well is what made it read as AI slop (owner, 2026-08-27), and the
   colour it read as is exactly the tell: --danger in dark mode is
   #D18876, coral, the 2026 terracotta default the craft library names.

   Same constraint as the accent sweep on .callout: the 5:1 floor forces
   dark accents light, and this site forbids fixing that with saturation
   because saturation drives arousal for a 3am reader. So the fix is not
   the hue, it is not spending the hue on prose. Bold already carries
   emphasis; a link should look like every other link on the site. */
.redflag strong { font-weight: 700; color: var(--ink); }
.redflag a { color: var(--route); }

details.why { margin-top: 2px; }
details.why summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 9px;
  font-size: .82em; color: var(--ink-soft);
  padding: 6px 2px; border-bottom: 1px dashed var(--hairline);
  transition: color .15s;
}
details.why summary:hover { color: var(--ink); }
details.why summary::-webkit-details-marker { display: none; }
details.why summary .fleuron { color: var(--ink-faint); font-style: normal; font-size: .85em; transition: transform .2s ease; display: inline-block; }
details.why[open] summary .fleuron { transform: rotate(90deg); }
details.why p {
  margin-top: 14px; font-size: .9em; color: var(--ink-soft);
  padding-left: 20px; border-left: 2px solid var(--hairline); max-width: 60ch;
}
details.why p strong { color: var(--ink); font-weight: 600; }

/* saved row: kept things carry the tape mark */
.saved-row { margin: 0 0 26px; display: none; }
.saved-row.show { display: block; }
.saved-row .kicker { display: block; margin-bottom: 10px; }
.saved-row .chips .chip { border-color: var(--tape); border-left-width: 4px; }

/* recent row: the same shape, and deliberately no coloured edge. The tape
   mark above means "you kept this"; having opened something once is not a
   kept state and must not borrow that meaning. */
.recent-row { margin: 0 0 26px; display: none; }
.recent-row.show { display: block; }
.recent-row .kicker { display: block; margin-bottom: 10px; }

/* ————— section heads ————— */
.sec-eyebrow {
  display: block;
  font-family: var(--sign);
  font-size: max(15px, .79em); font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-faint);
  margin-bottom: 7px;
}
.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 8px; }
.sec-head h2, .sec-head h1 { font-size: var(--fs-h2); color: var(--ink); white-space: nowrap; margin: 0; }
.sec-head .rule { flex: 1; border-bottom: 1px solid var(--hairline); position: relative; top: -6px; }
.sec-sub { font-size: .92em; color: var(--ink-soft); margin-bottom: 28px; }
/* A heading with no sub-line keeps the same 28px before its first group (Tools, 2026-10-03). */
.sec-head + .tool-group { margin-top: 20px; }

/* zone plate: the small solid sign that names an area of the house.
   Budget: one per section, homepage + directory pages only. */
/* ── "There is a newer version" ────────────────────────────────────
   Owner, 2026-08-29: "we have people using this that need hand holding
   and easy to use/nav... make a toast or something to help cue someone
   to refresh their site."

   The real problem it solves: sw.js serves assets cache-first by ?v=,
   so a tab left open across a deploy keeps the old CSS and JS until
   the reader reloads. A caregiver who leaves this open all day would
   never see a correction. Nobody should have to know what a hard
   refresh is.

   Rules it obeys: full body text size, because the audience is 75+ and
   a 12px toast is a joke; ink and the card surface, no accent, per the
   colour law; NO entrance animation, matching the crisis path; a real
   dismiss, because a bar you cannot close is a trap; and it sits at the
   bottom so it can never cover the crisis panel. */
.update-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  max-width: min(560px, calc(100vw - 24px));
  padding: 13px 18px;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r);
  font-size: 1em; line-height: 1.35;
}
.update-toast p { margin: 0; flex: 1 1 200px; }
/* Ink, not the accent. This is a housekeeping button, not a zone, and the
   accent green on a dark ground is the exact colour the owner has called
   slop twice. */
.update-toast .btn {
  flex: 0 0 auto;
  background: var(--ink); color: var(--paper);
  font-size: 16px;
}
.update-toast .btn:hover { background: var(--ink-soft); }
.update-toast .later {
  background: none; border: none; padding: 6px 2px;
  font-family: var(--sign); font-size: .92em; color: var(--ink-soft);
  text-decoration: underline; cursor: pointer;
}
@media print { .update-toast { display: none !important; } }

/* ── The area plate: which condition am I in ────────────────────────
   Owner, 2026-08-27: "make it clear which area they are in Dementia
   vs HG vs etc (clear on top of page)".

   This became necessary because of my own earlier fix. Taking
   "dementia" out of the wordmark subtitle removed the conflation and
   left the dementia pages with no area marker at all: the header said
   only "Caregiver Rest, rest help and hope for caregivers", which is
   true of every area and therefore locates nobody.

   It is a plate, not coloured text, because the plate IS this site's
   device for a door sign, and "which area am I in" is the definition
   of wayfinding. It is set in INK rather than a zone colour on
   purpose: --now/--route/--bench/--keep already mean "what kind of
   page is this", and giving the same device a fifth meaning would
   collide. Ink reads as the name plate on the door, which is exactly
   what it is. */
/* Which area am I in, and the door to the others (2026-10-01 audit). The
   black plate read like a button and fought the logo; "Other conditions" sat
   alone on a second menu row. Now one quiet line beside the name: the area
   in ink, the door after a hairline. Owner, 2026-10-01: keep "Other
   conditions" visible. */
.area-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--sign); font-size: 15px; line-height: 1.3; margin-left: 4px;
}
.area-line .area-name { font-weight: 700; color: var(--ink); }
.area-line a { color: var(--ink-soft); padding-left: 8px; border-left: 1px solid var(--hairline); display: inline-flex; align-items: center; min-height: 32px; } /* 20px tall until the 2026-10-01 sweep: under WCAG 2.5.8's 24px */
.area-line a:hover { color: var(--ink); }

.zone-plate {
  display: inline-flex; align-items: center;
  font-family: var(--sign); font-size: 13.5px; font-weight: 700;
  color: var(--plate-text); background: var(--plate-bench-bg);
  border: 1px solid var(--plate-bench-edge);
  border-radius: var(--r); padding: 3px 10px 4px; margin-bottom: 8px;
}
.zone-plate.z-now   { background: var(--plate-now-bg);   border-color: var(--plate-now-edge); }
.zone-plate.z-route { background: var(--plate-route-bg); border-color: var(--plate-route-edge); }
.zone-plate.z-keep  { background: var(--plate-keep-bg);  border-color: var(--plate-keep-edge); }

/* the directory board: the toolkit framed like a building directory */
.toolkit-band {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  padding: 44px 40px 40px;
  margin-bottom: var(--gap-section);
}
.toolkit-band .tool-row { margin-bottom: 0; }

/* The two photographs: rooms and objects, never people. They sit below the
   crisis panel and are lazy, because on this site the words never wait on a
   picture. width/height are on the tag so nothing shifts as they load: a
   page that jumps under a tired reader's thumb is a defect.

   Capped at 560px, which is narrower than the prose it introduces. At full
   column width it rendered 1000x563 and ate 63% of a 1280x900 screen: a
   mood image the size of a whole screenful, on a site whose first law is
   answers fast, not a book. Cropping it to a band was tried and rejected:
   it removed the lamp and the chair and left an unreadable brown stripe.
   A picture narrower than the text reads as subordinate to it, which is
   what this one is. */
/* Full column width and cropped short (2026-09-30): at 560px wide it sat
   stranded at the left edge of a 1000px column, aligned to nothing. As a
   band it is a calm pause between the crisis panels and the guide. */
.hero-photo {
  display: block; width: 100%; height: clamp(180px, 26vw, 300px);
  object-fit: cover; object-position: 50% 55%;
  border-radius: var(--r);
  margin: var(--gap-block) 0;
}
@media print { .hero-photo { display: none !important; } }

/* the welcome line, kept short: the choices it used to duplicate
   already sit on the first screen in .calm-start */
.welcome { text-align: left; margin: var(--gap-block) auto var(--gap-section); max-width: none; }
.welcome h2 { font-size: var(--fs-h2); color: var(--ink); margin-bottom: 10px; font-style: normal; font-weight: 700; }
.welcome p { font-size: .93em; color: var(--ink-soft); }

/* Screen readers only: the route's finished/opened state is carried by an
   icon, and an icon alone tells a screen-reader user nothing. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ————— the route: eight chapters as one numbered path ————— */
.journey { margin-bottom: var(--gap-section); }
.path { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.station {
  position: relative; display: grid;
  grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start;
  text-decoration: none; color: inherit;
  background: none; border: none; border-radius: 0;
  padding: 14px 4px 16px; overflow: visible;
  border-bottom: 1px solid var(--hairline);
  transition: background .15s ease;
}
.station:hover { background: var(--card); }
.station .ghost {
  grid-row: 1 / span 2;
  display: flex; align-items: center; justify-content: center;
  position: static;
  width: 38px; height: 38px; margin-top: 2px;
  font-family: var(--sign); font-size: 18px; font-weight: 700; font-style: normal;
  color: var(--plate-text); opacity: 1;
  background: var(--plate-route-bg);
  border: 1px solid var(--plate-route-edge);
  border-radius: var(--r); line-height: 1; user-select: none;
}
.station h3 { position: relative; font-size: 1em; color: var(--ink); margin-bottom: 4px; padding-right: 24px; }
.station p { position: relative; font-size: .84em; line-height: 1.5; color: var(--ink-soft); grid-column: 2; }
.station .adv {
  position: relative; display: inline-block; margin: 0 0 4px;
  font-family: var(--sign);
  font-size: max(15px, .79em); font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--route); background: transparent; border: none;
  border-radius: 0; padding: 0;
  grid-column: 2;
}
/* Two marks in one box, so nothing moves between them. The check used to
   appear the moment a chapter was opened, which told a frightened reader a
   chapter was finished when they had read none of it. Now: a hollow ring in
   the faint ink, quieter, for "you have been here"; the check in the
   workbench green, at full strength, only once the end of the prose has
   actually scrolled past. The green is colour as data and stays. */
.station .done {
  position: absolute; top: 14px; right: 4px; color: var(--bench);
  font-size: 15px; opacity: 0;
}
.station.read .done { color: var(--bench); opacity: .9; }
.station.opened .done { color: var(--ink-faint); opacity: .6; }
/* The sentinel app.js drops at the end of the chapter prose. It exists to be
   seen by an IntersectionObserver, never by a reader. */
.chapter-end { height: 0; margin: 0; padding: 0; }

/* tools: directory rows, not a wall of cards. An entry is a line you
   run a finger down, the way a directory board reads. */
.tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; margin-bottom: var(--gap-section); }
.tool-card {
  display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: start;
  text-decoration: none; color: inherit;
  background: none; border: none; border-radius: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 12px 4px; transition: background .15s ease;
}
.tool-card:hover { background: var(--paper); }
.tool-card .kicker { display: none; }
/* Any heading level, not just h3. guides.html uses h2 (its cards are that
   page's top-level sections) and an h2 fell into the 34px icon column and
   overlapped the text. Broke it 2026-08-27 fixing a heading-level skip,
   because I checked the heading structure and never re-rendered the page. */
.tool-card h2, .tool-card h3 { font-size: .96em; color: var(--ink); margin-bottom: 2px; grid-column: 2; }
.tool-card p { font-size: .84em; color: var(--ink-soft); line-height: 1.5; grid-column: 2; }

/* ── The lobby's doors (guides.html) ──────────────────────────────────
   One plate per condition, stacked, full width. The lobby borrowed the
   toolkit's directory row until 2026-09-05, and that grammar hides the
   one-line description under 560px because the toolkit reads as a menu on
   phones. A front door with no words under the name is not a door. The
   condition name is the largest type on the page after the h1, the line
   under it says who the guide is written for, and the two arms are the
   two things a person arriving here wants: the crisis page and the
   understanding page. Ink frame, like the crisis panel, because a door is
   a threshold and the frame is this site's device for one. */
.lobby-doors { display: flex; flex-direction: column; gap: 18px; margin: 28px 0 var(--gap-block); }
.lobby-door {
  display: grid; grid-template-columns: 1fr auto; column-gap: 28px; align-items: center;
  border: 2px solid var(--ink); border-radius: var(--r); background: var(--card);
  padding: 22px 26px; color: inherit;
}
/* Three links per door, not one card-sized link: the second arm says "Start
   here" or "What autism is", and on 2026-09-05 it opened Help now, because
   the whole plate was one anchor. A label that lies is worse than no label. */
.lobby-door h2 { grid-column: 1; font-size: clamp(22px, 2.8vw, 27px); color: var(--ink); margin: 0 0 4px; }
.lobby-door h2 a { color: var(--ink); text-decoration: none; }
.lobby-door h2 a:hover { text-decoration: underline; }
.lobby-door p { grid-column: 1; font-size: .95em; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.lobby-door .arms { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.lobby-door .arms a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px;
  font-family: var(--sign); font-size: .92em; font-weight: 700; color: var(--ink);
  border: 1px solid var(--ink-faint); border-radius: var(--r); white-space: nowrap; text-decoration: none;
}
.lobby-door .arms a:hover { border-color: var(--ink); }
.lobby-door .arms a:first-child { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lobby-door .soon { border-style: dashed; border-color: var(--ink-faint); }
.lobby-door .soon h2 { color: var(--ink-soft); }
@media (max-width: 560px) {
  .lobby-door { grid-template-columns: 1fr; padding: 18px 18px; }
  .lobby-door .arms { grid-column: 1; grid-row: auto; flex-direction: row; margin-top: 14px; }
  .lobby-door .arms a { flex: 1; }
}

/* toolkit grouped under zone labels */
.tool-group { margin-bottom: var(--gap-block); }
.tool-group:last-child { margin-bottom: 0; }
.tool-group .tool-row { margin-bottom: 0; }
.tool-group-label {
  display: block;
  font-family: var(--sign);
  font-size: max(15px, .79em); font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--ink);
  border-bottom: 2px solid var(--ink-faint);
  padding-bottom: 5px;
  margin-bottom: 6px;
}

/* site-wide hits under the homepage search */
.site-hits { display: none; margin: 10px 0 4px; }
.site-hits.show { display: block; }
.site-hits .hits-label {
  display: block;
  font-family: var(--sign);
  font-size: .92em; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--ink); margin-bottom: 6px;
}
.site-hits { margin-top: 26px; }
.site-hits .hits-label + a { border-top: 1px solid var(--hairline); }
.site-hits a {
  display: block; text-decoration: none; position: relative;
  padding: 11px 34px 11px 4px;
  background: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0;
  font-size: .95em; color: var(--ink);
}
.site-hits a::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 9px; height: 9px; margin-top: -5px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(-45deg);
}
.site-hits a span { display: block; font-size: .88em; color: var(--ink-soft); }
.site-hits a:hover { background: var(--paper); }

/* find.html directory rows — icon first: recognition beats reading */
.find-group { margin: 30px 0; }
.find-group.hidden { display: none; }
/* Find rows share the answer list's form (2026-09-30): one grammar for
   "a list of places to go", rows divided by hairlines, not a stack of
   separately bordered boxes. */
.find-row {
  display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center;
  text-decoration: none; position: relative;
  padding: 12px 34px 12px 4px; min-height: 52px;
  background: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0;
  transition: background .15s ease;
}
.find-row::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 9px; height: 9px; margin-top: -5px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(-45deg);
}
.find-row:hover { background: var(--card); }
.find-row.hidden { display: none; }
.find-row .row-ico { grid-row: 1 / span 2; width: 26px; height: 26px; stroke: var(--ink-soft); opacity: .9; }
.find-row strong { grid-column: 2; color: var(--ink); font-size: .98em; }
.find-row span { grid-column: 2; display: block; font-size: .85em; color: var(--ink-soft); line-height: 1.5; }
.tool-group-label .label-ico { width: 15px; height: 15px; stroke: var(--ink); vertical-align: -2px; }
/* the sprite icons stamped by scripts/stamp-sprite.js: always currentColor,
   always the size of the text they sit in, so they print like the words do. */
.ico { width: 1em; height: 1em; vertical-align: -0.12em; flex: none; }

/* tool-card glyphs */
.tool-ico { display: block; width: 26px; height: 26px; stroke: var(--ink-soft); opacity: .9; margin: 3px 0 0; grid-row: 1 / span 2; }

/* copy-paste message library (helpers.html) */
.copy-msg {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 13px 16px 11px; margin: 12px 0;
}
.copy-msg .copy-label {
  display: block;
  font-family: var(--sign);
  font-size: max(15px, .79em); font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--ink); margin-bottom: 6px;
}
.copy-msg p { font-size: .95em; font-style: italic; color: var(--ink); margin-bottom: 10px; }
.copy-msg .copy-btn { font-size: max(16px, .84em); padding: 6px 14px; }
@media print { .copy-msg .copy-btn { display: none; } }

/* printable wallet cards (emergency.html) */
.wallet-cards { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 10px; }
.wallet-card {
  flex: 1 1 300px; max-width: 360px;
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--r);
  padding: 13px 16px;
}
.wallet-card.alert { border-color: var(--danger); }
.wallet-card .wc-head {
  display: block;
  font-family: var(--sign);
  font-size: max(15px, .79em); font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--ink); margin-bottom: 6px;
}
.wallet-card.alert .wc-head { color: var(--danger); }
.wallet-card p { font-size: .88em; line-height: 1.5; margin-bottom: 6px; }
.wallet-card .wc-line { font-size: .8em; color: var(--ink-soft); margin: 8px 0 0; }
@media print {
  .wallet-cards { display: flex !important; }
  .wallet-card { border-width: 1px; break-inside: avoid; }
}

/* at-a-glance comparison chart (buy.html) — scrolls sideways on small screens */
.chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0 8px;
  border: 1px solid var(--hairline); border-radius: var(--r); }
.buy-chart { border-collapse: collapse; width: 100%; min-width: 660px; font-size: .88em; }
.buy-chart th, .buy-chart td { text-align: left; padding: 9px 13px; vertical-align: top;
  border-bottom: 1px solid var(--hairline); line-height: 1.4; }
.buy-chart thead th { font-family: var(--sign); font-size: max(15px, .84em); font-weight: 700;
  letter-spacing: 0; text-transform: none; color: var(--ink-soft);
  border-bottom: 2px solid var(--ink); position: sticky; top: 0; background: var(--card); }
.buy-chart tbody th { font-weight: 600; color: var(--ink); }
.buy-chart tr.grp td { background: var(--paper-deep); font-family: var(--sign); font-size: max(15px, .8em); font-weight: 700;
  letter-spacing: 0; text-transform: none; color: var(--ink); padding: 7px 13px; }
.buy-chart .yes { color: var(--bench); font-weight: 700; }
.buy-chart .no  { color: var(--ink-faint); }
.buy-chart tbody tr:not(.grp):hover { background: var(--paper); }
.chart-legend { font-size: .85em; color: var(--ink-soft); margin: 4px 0 26px; }
@media print { .chart-wrap { overflow: visible; } .buy-chart { min-width: 0; font-size: .72em; } }
/* Phones: one labelled entry per item, nothing off to the side. The sideways
   scroll showed 3 of 6 columns at 375px with no cue that more existed, and
   the hidden ones were the fee, Hands-off (the column the page says matters
   most) and Buy when. Screen only, so the printed chart stays a table. */
@media screen and (max-width: 720px) {
  .chart-wrap { overflow: visible; border: 0; border-radius: 0; }
  .buy-chart { min-width: 0; font-size: .94em; }
  .buy-chart thead { display: none; }
  .buy-chart tbody, .buy-chart tr, .buy-chart th, .buy-chart td { display: block; }
  .buy-chart tr { padding: 12px 0 14px; border-bottom: 1px solid var(--hairline); }
  .buy-chart th, .buy-chart td { padding: 0; border: 0; }
  .buy-chart tbody th { font-family: var(--sign); font-weight: 700; }
  /* Cost on its own line, so "$20–50/mo" never splits at the dash; fee and
     Hands-off share the next. \2060 is a word joiner: "Hands-off" must not
     break at its hyphen, and the sign face has no non-breaking hyphen. */
  .buy-chart td:nth-child(4), .buy-chart td:nth-child(5) { display: inline; }
  .buy-chart td:nth-child(n+3)::before { font-family: var(--sign); font-weight: 700; color: var(--ink-soft); }
  .buy-chart td:nth-child(3)::before { content: "Cost: "; }
  .buy-chart td:nth-child(4)::before { content: "Ongoing fee: "; }
  .buy-chart td:nth-child(5)::before { content: " · Hands-\2060off: "; }
  .buy-chart td:nth-child(6)::before { content: "Buy when: "; }
  .buy-chart td:nth-child(6) { margin-top: 2px; }
  .buy-chart tr.grp { padding: 0; border: 0; margin-top: 18px; }
  .buy-chart tr.grp td { padding: 7px 10px; }
}

/* "make it yours" row: relationship, name, stage — quiet, one line */
.tune-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin: 30px 0 6px; padding: 18px 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  font-size: .95em; color: var(--ink-soft);
}
.tune-row .tune-lead { color: var(--ink-soft); }
.tune-row label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.tune-row select, .tune-row input {
  font-family: var(--sign); font-size: .95em; color: var(--ink);
  background: var(--card); border: 1px solid var(--ink-faint); border-radius: var(--r);
  padding: 6px 10px; max-width: 150px; min-height: 44px;
}
.tune-row input { width: 110px; }
.tune-row .tune-note { flex-basis: 100%; font-size: max(15px, .82em); color: var(--ink-faint); }
@media print { .tune-row { display: none; } }

/* fit blocks: content for a different relationship/stage folds to one line
   (never disappears). No choice made → nothing folds. */
.fit-fold > *:not(.fit-toggle) { display: none; }
.fit-toggle { display: none; }
.fit-fold .fit-toggle {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--sign); font-size: .86em; font-weight: 700;
  color: var(--ink-soft); background: var(--paper);
  border: 1px dashed var(--hairline); border-radius: var(--r);
  padding: 9px 14px; margin: 14px 0;
}
.fit-toggle span { font-weight: 400; color: var(--ink-faint); }
.fit-toggle:hover { border-color: var(--ink); color: var(--ink); }
@media print { .fit-fold > * { display: block !important; } .fit-toggle { display: none !important; } }

/* "browse by the hour" tiles — a second, visual way in */
.angle-band { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 26px 0; }
.angle-lead { font-size: .92em; color: var(--ink-soft); margin-right: 2px; }
.angle-tile {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  font-family: var(--sign); font-weight: 700; font-size: .9em; color: var(--ink);
  background: var(--card); border: 1px solid var(--ink-faint); border-radius: var(--r);
  padding: 9px 16px; transition: border-color .15s ease;
}
.angle-tile svg { width: 19px; height: 19px; stroke: var(--ink-soft); opacity: .9; }
.angle-tile:hover { border-color: var(--ink); }
@media (max-width: 560px) {
  .angle-tile { padding: 8px 12px; font-size: .88em; gap: 6px; }
  .tool-ico { float: none; }
}
@media print { .angle-band { display: none; } }

/* personalize */
.personalize-line {
  display: flex; align-items: center; gap: 16px;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 20px 8px; margin-bottom: var(--gap-section);
  font-size: .85em; font-style: italic; color: var(--ink-soft); flex-wrap: wrap;
}
.personalize-line button.linkish {
  font-family: inherit; font-size: inherit; background: none; border: none; cursor: pointer;
  color: var(--route); font-weight: 600; font-style: normal;
  border-bottom: 1px solid var(--tape); padding: 0;
}
.personalize-line select {
  font-family: var(--serif-body); font-size: 15px; color: var(--ink);
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 6px 14px;
}

/* ————— chapter pages ————— */
article.chapter { padding-top: 20px; padding-bottom: 40px; overflow-wrap: break-word; }
article.chapter .kicker { display: block; margin-bottom: 10px; }
/* ...but not a tool-card's. That card is a 34px icon column plus a text
   column, and its kicker is deliberately hidden; the rule above outranks
   .tool-card .kicker (0,2,1 beats 0,2,0), so inside a chapter the kicker
   reappeared in the icon column and sat underneath the heading. Found on
   guides.html 2026-08-27, where these cards first appeared inside an
   <article class="chapter">. */
article.chapter .tool-card .kicker { display: none; }
article.chapter h1 { font-size: var(--fs-h1); color: var(--ink); margin-bottom: 14px; }
article.chapter p.lede { font-size: 1.08em; color: var(--ink-soft); margin-bottom: 36px; max-width: 34em; }
article.chapter h2 {
  font-size: var(--fs-h2); color: var(--ink);
  margin: var(--gap-block) 0 14px; padding-top: 34px; border-top: 1px solid var(--hairline);
}
article.chapter h2:first-of-type { border-top: none; padding-top: 0; margin-top: 24px; }
article.chapter p { margin-bottom: 16px; max-width: 66ch; }
article.chapter ul { margin: 0 0 18px 22px; max-width: 62ch; }
article.chapter li { margin-bottom: 9px; }
article.chapter li strong, article.chapter p strong { font-weight: 600; color: var(--ink); }

/* The aside: a note pinned beside the text. Label + spine, no wash.

   DE-SLOPPED 2026-08-27 (owner: "this color style is ai slop"). The
   label used to be set in --bench and the spine in --bench too. That
   is the craft library's A1+A3 grammar, the tinted-box/coloured-micro-
   label pair, and it was stamped 96 times across 45 files here: an
   epidemic by that file's own >5-file threshold, so this is a grammar
   fix, not an instance fix.

   Why NOT the obvious repair (crank the accent chroma): the dark
   accents ARE pastel (measured: lum 63-69%, sat 22-46%, four hues in
   a 6-point lightness band, which is the textbook pastel signature),
   but this site's own law forbids the cure. "Saturation drives
   arousal more than hue; a 3am reader needs contrast, not
   atmosphere." A neon palette would read less like AI and worse for
   the actual reader. Measured alternatives all landed at 99-100%
   saturation before they cleared the 5:1 floor, which is a different
   slop wearing the same face.

   So the real defect was never the hue. It was spending a ZONE
   colour, whose researched job is wayfinding, to decorate every info
   box on a prose page. The cure had become the tic (library §18).

   The house replacement: ink label with a hairline lead-in, ink
   spine. Signage in a real house is dark text on paper. Colour stays
   where it does work: zone plates, the nav, and crisis red. */
.callout {
  background: var(--card); border: 1px solid var(--hairline); border-left: 3px solid var(--ink-faint);
  border-radius: var(--r); padding: 18px 24px; margin: 24px 0; max-width: 62ch;
  font-size: .93em;
}
.callout .label {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sign);
  font-size: max(15px, .79em); font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--ink); margin-bottom: 7px;
}
/* the lead-in rule: a printed hairline, the thing a label sits after
   on a real sign. Replaces the coloured dot/chip an LLM reaches for. */
.callout .label::before {
  content: ""; flex: 0 0 18px; height: 0;
  border-top: 2px solid var(--ink-faint);
}
/* ── The short answer ──────────────────────────────────────────────
   Owner, 2026-08-26: "people need answers fast, not read a book...
   need key info fast, then expand for deeper info - this is the way
   to prevent overwhelm and bouncing off (at which point we can't
   help them)."

   So every long page now opens with the answer and explains
   underneath. This is deliberately NOT a collapsible: hiding the
   depth behind a click fails the same reader twice, once when they
   cannot find it and once when they do not know it is there. The
   "expand" is scrolling, which costs a tired person nothing.

   It reuses .callout rather than inventing a form, per the usage
   budgets: same card, same frame, full-size text because this is
   the primary content of the page and not an aside. Its spine is
   heavier than a normal aside's and set in full --ink, because it is
   the page's answer rather than a note beside one. No accent: see
   the de-slop note on .callout above. */
.callout.answer {
  font-size: 1em;
  margin: 18px 0 30px;
  border-left: 5px solid var(--ink-soft);
}
.callout.answer .label { font-size: max(15px, .79em); }
.callout.answer .label::before { border-top-color: var(--ink-soft); flex-basis: 24px; }
.callout.answer ul { margin: 0; padding-left: 19px; }
.callout.answer li { margin-bottom: 6px; line-height: 1.45; }
.callout.answer li:last-child { margin-bottom: 0; }
.callout.answer > p:last-child { margin-bottom: 0; }
/* .send kept as a hook, but it no longer borrows the route colour:
   same reason as above. It is an aside like any other. */
/* A signpost to another page, for a DIFFERENT reader than the one this
   page is written for. Full text size because it is a door, not an aside:
   the friends-and-family page was reachable from one link on the whole
   dementia site before this (2026-08-27). */
.callout.door { font-size: 1em; }
.callout.send { border-left-color: var(--ink-faint); }
.callout p:last-child { margin-bottom: 0; }

/* The watch note uses the house note grammar (2026-10-01 audit): it was the
   one dashed, tinted, small-text box on the site. Same as .callout: card,
   hairline, ink spine, a label with its lead-in rule, full text size. */
.watch-stub {
  background: var(--card); border: 1px solid var(--hairline); border-left: 3px solid var(--ink-faint);
  border-radius: var(--r); padding: 18px 24px; margin: 24px 0; max-width: 62ch;
  font-size: .93em; color: var(--ink);
}
.watch-stub .len {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sign); font-size: max(15px, .79em); font-weight: 700; color: var(--ink); margin-bottom: 7px;
}
.watch-stub .len::before { content: ""; flex: 0 0 18px; height: 0; border-top: 2px solid var(--ink-faint); }

.chapter-nav {
  display: flex; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--hairline); margin-top: 52px; padding: 26px 0 40px;
  font-size: .9em;
}
.chapter-nav a { text-decoration: none; color: var(--route); font-weight: 500; }
.chapter-nav a:hover { color: var(--route-deep); }
.chapter-nav .lbl { display: block; font-family: var(--sign); font-size: max(15px, .79em); letter-spacing: 0; text-transform: none; color: var(--ink-faint); font-weight: 700; }

/* ————— scenario ————— */
.scenario { margin-bottom: 30px; }
.scenario-text { font-size: 1em; margin-bottom: 18px; max-width: 60ch; }
.scenario-text em { color: var(--ink-soft); }
.choice {
  display: block; width: 100%; max-width: 640px; text-align: left;
  background: var(--card); border: 1px solid var(--ink-faint); border-radius: var(--r);
  padding: 14px 20px; min-height: 50px; margin-bottom: 10px;
  font-family: var(--serif-body); font-size: .92em; color: var(--ink); cursor: pointer;
  transition: all .16s ease;
}
.choice:hover { border-color: var(--ink); background: var(--card); }
.choice.picked-good { border: 2px solid var(--bench); background: var(--card); }
.choice.picked-bad { border: 2px solid var(--now); background: var(--card); }
.outcome { display: none; font-size: .87em; line-height: 1.6; border-radius: var(--r); padding: 15px 20px; margin-top: 4px; max-width: 640px; }
.outcome.show { display: block; animation: settle .4s ease both; }
.outcome.good { background: var(--card); color: var(--ink); border: 1px solid var(--hairline); border-left: 4px solid var(--bench); }
.outcome.gentle { background: var(--card); color: var(--ink); border: 1px solid var(--hairline); border-left: 4px solid var(--now); }

/* ————— tools ————— */
.tool-form { display: grid; gap: 14px; max-width: 640px; margin-bottom: 30px; }
.tool-form label { font-family: var(--sign); font-size: .8em; font-weight: 700; color: var(--ink); display: block; margin-bottom: 4px; }
.tool-form select, .tool-form input, .tool-form textarea {
  width: 100%; font-family: var(--serif-body); font-size: .95em; color: var(--ink);
  background: var(--card); border: 1px solid var(--ink-faint); border-radius: var(--r);
  padding: 11px 14px; outline: none;
}
.tool-form select:focus, .tool-form input:focus, .tool-form textarea:focus { border-color: var(--route); }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sign); font-size: 16px; font-weight: 700;
  background: var(--bench); color: var(--on-accent);
  border: none; border-radius: var(--r); padding: 12px 26px; cursor: pointer;
  transition: all .15s ease;
}
.btn:hover { background: var(--bench-deep); }
.btn.quiet { background: var(--card); color: var(--ink-soft); border: 1px solid var(--ink-faint); }
.btn.quiet:hover { color: var(--ink); border-color: var(--ink); background: var(--card); }

.log-entry {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 14px 20px; margin-bottom: 10px; font-size: .88em; max-width: 640px;
  display: flex; gap: 14px; align-items: baseline;
}
.log-entry .when { font-family: var(--serif-body); font-style: italic; color: var(--ink-soft); white-space: nowrap; }
.log-entry .what strong { color: var(--ink); }
.log-entry .del { margin-left: auto; background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 15px; }
.log-entry .del:hover { color: var(--danger); }
.pattern-hint {
  background: var(--card); border: 1px solid var(--hairline); border-left: 4px solid var(--bench); border-radius: var(--r);
  padding: 14px 20px; margin: 22px 0; font-size: .88em; color: var(--ink); max-width: 640px;
}

/* checklist (doctor prep) */
.checklist { list-style: none; margin: 0 0 26px; max-width: 62ch; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px dashed var(--hairline); font-size: .93em; }
.checklist input[type=checkbox] { width: 19px; height: 19px; margin-top: 5px; accent-color: var(--ink); flex-shrink: 0; }

/* ————— emergency page ————— */
.triage { display: grid; gap: 20px; margin: 30px 0 40px; }
.triage-card { border-radius: var(--r); padding: 26px 30px; border: 1px solid var(--hairline); background: var(--card); }
.triage-card.now { border-left: 6px solid var(--danger); }
.triage-card.today { border-left: 6px solid var(--now); }
.triage-card.talk { border-left: 6px solid var(--bench); }
.triage-card h2 { font-size: 1.25em; margin-bottom: 10px; color: var(--ink); }
.triage-card.now h2 { color: var(--danger); }
.triage-card.today h2 { color: var(--now); }
.triage-card ul { margin: 0 0 10px 20px; font-size: .92em; }
.triage-card li { margin-bottom: 7px; }
/* a phone number is signage: the label face, bold, one glance */
.triage-card .tel { font-family: var(--sign); font-style: normal; font-weight: 700; font-size: 1.05em; }

/* ————— footer ————— */
footer.site {
  position: relative; background: var(--bench-deep); color: #C4D4CC;
  padding: 40px 40px 36px; text-align: left; font-size: max(16px, .84em); overflow: hidden; /* 2026-10-01 audit: was 13.6 to 14.8px, centred, for a 75+ reader */
  margin-top: 40px;
}
html[data-theme="dark"] footer.site { background: #141817; color: #A8A59E; }
footer.site .rose-big { position: absolute; right: -60px; bottom: -80px; width: 280px; height: 280px; opacity: .07; }
footer.site p { position: relative; max-width: 640px; margin: 0 auto 6px; }
footer.site strong { color: #F0EEE6; font-weight: 600; }
footer.site a { color: #E3EAE4; }
footer.site .disclaimer { font-size: 1em; }
footer.site .feedback-line, footer.site .sister-line { font-size: 1em; color: #B9CBC2; } /* were inline .9em at 85% opacity: 14.4px (2026-10-01) */
html[data-theme="dark"] footer.site .feedback-line, html[data-theme="dark"] footer.site .sister-line,
html[data-theme="night"] footer.site .feedback-line, html[data-theme="night"] footer.site .sister-line { color: inherit; }

/* ————— print: fridge sheets ————— */
@media print {
  body { background: #fff; font-size: 13.5pt; }
  header.site, footer.site, nav.main, .comfort, .emergency-strip, .welcome, .journey,
  .tool-row, .toolkit-band, .personalize-line, .search-row, .chips, .chip-shelves, .no-match, .card-actions,
  .sec-eyebrow, .sec-head, .sec-sub, .saved-row, .recent-row, .mockup-note, .chapter-nav, .watch-stub { display: none !important; }
  .help-now, .panel { border: none; box-shadow: none; padding: 0; margin: 0; }
  .help-now::before { display: none; }
  .help-now h1, .help-now p.sub { display: none; }
  .fire-card { display: none; border: none; padding-top: 0; }
  .fire-card.show { display: block; }
  .fire-card h3 { font-size: 20pt; margin-bottom: 16pt; }
  /* numbered plates print as outlines: ink is what a printer has */
  .fire-card ol li::before { background: #fff; color: #22211D; border: 1.5px solid #22211D; }
  details.why { display: block; }
  details.why summary { display: none; }
  details.why p { display: block; }
  .say { border-left-color: #22211D; }
  body.print-tool .panel { display: block; }

  /* THE OPEN CARD PRINTS. Since 2026-07-13 a card has opened inside the
     chip shelves, which the rule at the top of this block hides, so the
     Print button on every crisis card produced a page without the card,
     for two and a half months (found 2026-09-30 by applying these rules to
     a live page with a card open: card height 0). The containers now stay;
     what is inside them, other than the card, goes. */
  .chip-shelves, .chip-shelves .chips, .chip-group, #chips-you {
    display: block !important; border: 0 !important; margin: 0 !important; padding: 0 !important;
  }
  .chip, .chip-group-label, .calm-start, .help-now > .kicker, .foryou > .kicker,
  .foryou h2, .foryou p.sub, .callout.door { display: none !important; }
  .foryou { border: none; padding: 0; margin: 0; }
  .chip-shelves .chips > .fire-card, #chips-you > .fire-card { border: 0; padding: 0; }

  /* the warning band: browsers drop background colours when printing, so a
     light heading on a red fill would print white on white. It prints as
     the warning's own colour on paper, with a rule under it. */
  .redflag { border-color: #8F332A; }
  .redflag > span:last-child > strong:first-child {
    background: none !important; color: #8F332A !important; border-bottom: 2px solid #8F332A;
  }
  .lobby-door .arms a:first-child { background: none; color: #22211D; border-color: #22211D; }
}

/* ————— responsive ————— */
@media (max-width: 920px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
  header.site { padding: 18px 20px; flex-wrap: wrap; }
  nav.main { gap: 16px; }
  .help-now, .panel { padding: 22px 18px 24px; }
  .foryou { padding: 24px 18px; }
  .toolkit-band { padding: 30px 20px 26px; }
  .path { grid-template-columns: 1fr; }
  .tool-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .path { grid-template-columns: 1fr; }
  /* Phones: the two answer panels run edge to edge, keeping their top and
     bottom frame. Inside two layers of side padding the rows had 295px, and
     most labels broke onto a second line. */
  .help-now, .foryou { margin-left: -20px; margin-right: -20px; border-left: 0; border-right: 0; border-radius: 0; }


  /* Section headings wrap on phones. `white-space: nowrap` (set above so the
     hairline rule can sit beside the heading) made "Small tools that close the
     loop" render 357px wide inside a 375px screen, so the whole homepage
     scrolled sideways by 23px. Nothing was cut off, but the page drifted under
     the thumb, which is precisely the kind of small wrongness this audience
     cannot afford. Found 2026-07-15 while measuring the nav. */
  .sec-head h2, .sec-head h1 { white-space: normal; }

  /* Phones (2026-10-01 audit): the header was 206px of an 812px screen. Now
     two thin rows: the name with the two display controls, then the area
     line. The menu leaves the header and becomes the bar at the bottom. */
  header.site {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center;
    column-gap: 6px; row-gap: 2px; padding: 10px 16px 8px;
  }
  header.site a.home { grid-column: 1; grid-row: 1; gap: 8px; min-width: 0; }
  header.site .wordmark { font-size: 17px; white-space: nowrap; }
  header.site .wordmark small { display: none; } /* tagline rests on phones */
  .rose { width: 30px; height: 30px; }
  .area-line { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
  .theme-btn { grid-column: 2; grid-row: 1; height: 44px; font-size: 14px; padding: 0 8px; margin-left: 0; gap: 5px; }
  .comfort { grid-column: 3; grid-row: 1; margin-left: 0; }
  .comfort summary { height: 44px; font-size: 14px; padding: 0 8px; }

  /* The bottom bar: five labelled buttons in thumb reach on every page, the
     same element as the desktop menu. 14px labels are a documented exception
     to the 15px label floor: a tab label sits under its own icon. */
  nav.main {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; width: auto;
    background: var(--card); border-top: 1px solid var(--hairline);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  nav.main a {
    flex-direction: column; justify-content: center; gap: 3px; min-height: 60px;
    padding: 6px 2px; font-size: 14px; line-height: 1.1; text-align: center; white-space: normal;
  }
  nav.main a .ico { width: 22px; height: 22px; }
  nav.main a::after { top: 0; bottom: auto; left: 50%; right: 50%; border-bottom: 0; border-top: 3px solid var(--ink); transition: none; }
  nav.main a.active::after { left: 22%; right: 22%; }
  nav.main a:hover::after { left: 50%; right: 50%; }
  nav.main a.active:hover::after { left: 22%; right: 22%; }
  nav.main.lobby-nav { display: none; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* emergency strip: one calm line */
  .emergency-strip { padding: 8px 16px; font-size: 16px; justify-content: start; }

  /* toolkit reads like a menu: titles only, details on the page itself */
  .tool-card { padding: 10px 4px; }
  .tool-card p { display: none; }
  .tool-card h2, .tool-card h3 { margin-bottom: 0; }
  .tool-group { margin-bottom: 26px; }
}

/* wide screens: two-column shelves halve the crisis panel's height */
@media (min-width: 1000px) {
  .chip-shelves { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
  .chip-shelves .chip-group.anytime { grid-column: 1 / -1; }
}

/* Retired 2026-09-30: three chips used to carry a red left stripe as "one
   entry point for the eye". Red is for warnings on this site, and a stripe
   down one edge of a card is the Slop Register's most reliable tell. In a
   list read top to bottom the first row of each group is already the entry
   point. */

/* the emergency nav link reads as what it is */
nav.main a[href$="emergency.html"] { color: var(--danger); }


/* ————— tap-to-highlight reading: an actual highlighter ————— */
.hl-block { position: relative; transition: background .2s ease; border-radius: var(--r); }
.hl-block.hl-on { background: var(--tape-soft); box-shadow: 0 0 0 6px var(--tape-soft); }
/* The pencil: a 44px-tall tap area that adds nothing to the line (the
   negative margins cancel the padding), glued to the last word by a word
   joiner (app.js). Was 22 x 16px and often alone on its own line
   (2026-10-01 audit). */
.hl-btn {
  display: inline-block; background: none; border: none; cursor: pointer;
  padding: 14px 10px; margin: -14px -10px -14px -2px;
  font-size: 14px; line-height: 1; color: var(--ink-faint); opacity: 0;
  vertical-align: baseline; transition: opacity .15s ease, color .15s ease;
}
.hl-tail { white-space: nowrap; }
.hl-block:hover .hl-btn, .hl-btn:focus-visible, .hl-block.hl-on .hl-btn { opacity: .8; }
.hl-btn:hover { color: var(--ink); }
.hl-on .hl-btn { color: var(--ink); }
@media (hover: none) { .hl-btn { opacity: .45; } }

/* ————— spec cards: scannable what/why/cost/when ————— */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 30px; }
.spec-card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 18px 20px 14px;
}
.spec-card h3, .spec-card h4 { font-size: 1em; color: var(--ink); margin-bottom: 10px; }
.spec-card h3 .best, .spec-card h4 .best {
  font-family: var(--sign); font-size: max(15px, .79em); font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--plate-text); background: var(--plate-bench-bg);
  border: 1px solid var(--plate-bench-edge);
  border-radius: var(--r); padding: 2px 8px; margin-left: 8px; vertical-align: 2px; white-space: nowrap;
}
.spec-card dl { margin: 0; }
.spec-card dl > div { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--hairline); }
.spec-card dl > div:first-child { border-top: none; }
.spec-card dt {
  font-family: var(--sign);
  font-size: max(15px, .79em); font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--ink-faint); padding-top: 3px;
}
.spec-card dd { margin: 0; font-size: max(16px, .84em); line-height: 1.5; color: var(--ink); }
.spec-card dd em { color: var(--ink-soft); }
@media (max-width: 720px) { .spec-grid { grid-template-columns: 1fr; } }

/* ————— notebook / checklist builder ————— */
.nb-list {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 22px 24px; margin-bottom: 20px; max-width: 680px;
}
.nb-list .nb-title {
  width: 100%; font-family: var(--sign); font-size: 1.15em; font-weight: 700;
  color: var(--ink); background: transparent; border: none; outline: none; margin-bottom: 10px;
}
.nb-item { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--hairline); }
.nb-item input[type=checkbox] { width: 19px; height: 19px; margin-top: 4px; accent-color: var(--ink); flex-shrink: 0; }
.nb-item .txt { flex: 1; font-size: .92em; border: none; background: transparent; font-family: var(--serif-body); color: var(--ink); outline: none; width: 100%; }
.nb-item.done .txt { text-decoration: line-through; color: var(--ink-faint); }
.nb-item .del { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 14px; padding: 4px; }
.nb-item .del:hover { color: var(--danger); }
.nb-add { display: flex; gap: 8px; margin-top: 12px; }
.nb-add input {
  flex: 1; font-family: var(--serif-body); font-size: .9em; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink-faint); border-radius: var(--r);
  padding: 9px 16px; outline: none;
}
.nb-add input:focus { border-color: var(--route); }
.nb-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.hl-quote {
  border-left: 3px solid var(--tape); background: var(--card);
  border-radius: var(--r); padding: 12px 18px; margin-bottom: 12px; max-width: 680px;
  font-size: .9em;
}
.hl-quote .from { display: block; font-size: .78em; font-style: italic; color: var(--ink-soft); margin-top: 6px; }
.hl-quote .from a { color: var(--route); }
.hl-quote .rm { float: right; background: none; border: none; color: var(--ink-faint); cursor: pointer; }
.hl-quote .rm:hover { color: var(--danger); }

@media print {
  .nb-add, .nb-actions, .nb-item .del, .hl-btn { display: none !important; }
  .nb-list { border: none; box-shadow: none; }
}


/* ————— read-aloud ————— */
.listen-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sign); font-size: max(15px, .79em); font-weight: 700;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--ink-faint); border-radius: var(--r);
  padding: 7px 16px; cursor: pointer; transition: all .15s ease;
  margin: 4px 0 18px;
}
.listen-btn:hover { border-color: var(--ink); color: var(--ink); }
.listen-btn.speaking { background: var(--plate-bench-bg); border-color: var(--plate-bench-edge); color: var(--plate-text); }
@media print { .listen-btn { display: none !important; } }


/* ————— scripture: reading, not signage — the prose face stays ————— */
.verse { text-align: center; margin: var(--gap-block) auto; max-width: 46ch; }
.verse::before { content: "†"; display: block; font-family: var(--serif-body); font-size: 15px; color: var(--ink-faint); margin-bottom: 8px; }
.verse p {
  font-family: var(--serif-body); font-style: italic; font-weight: 460;
  font-size: 1.06em; line-height: 1.55; color: var(--ink); margin: 0 0 7px;
}
.verse .ref {
  font-family: var(--sign);
  font-size: max(15px, .79em); font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--ink-faint);
}


/* the state jump row: a directory line above the filters. Two rows would
   read as one control, so this one is labelled ("Jump to") and its chips
   are plain links, not toggles. Four states max: this is a signpost, not
   a menu of fifty. */
.jump-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 14px 0 10px; }
.jump-row .jump-lead {
  font-family: var(--serif-body); font-style: italic;
  font-size: .88em; color: var(--ink-soft); margin-right: 2px;
}
.jump-row a {
  font-family: var(--sign); font-size: 15px; font-weight: 700; text-decoration: none;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--ink-faint); border-radius: var(--r);
  padding: 6px 14px;
}
.jump-row a:hover { border-color: var(--ink); }
.jump-row a.hidden { display: none; }
/* a state heading with every entry filtered out hides with its entries */
.res-list ~ h2.hidden, h2.hidden { display: none; }
@media print { .jump-row { display: none; } }

/* ————— resource filtering ————— */
.filter-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 26px; }
.filter-chip {
  font-family: var(--sign); font-size: max(15px, .79em); font-weight: 700;
  background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--ink-faint); border-radius: var(--r);
  padding: 8px 16px; cursor: pointer; transition: all .15s ease;
}
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip.active { background: var(--plate-bench-bg); border-color: var(--plate-bench-edge); color: var(--plate-text); }
.res-list { list-style: none; margin: 0 0 8px; }
.res-list li {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 16px 20px 13px; margin-bottom: 12px; font-size: .92em; line-height: 1.6;
}
.res-list li.hidden { display: none; }
.res-list .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tag {
  font-family: var(--sign);
  font-size: max(15px, .79em); font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--ink-soft); background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--r); padding: 1px 8px;
}
/* traffic-light swatches (is-this-real.html buckets). The colour is the data;
   the heading beside each one says the same thing in words, so the swatch is
   aria-hidden. Compound selectors: bare .tag above is the resource-list pill. */
.tag.tag-red, .tag.tag-amber, .tag.tag-green {
  display: inline-block; width: .8em; height: .8em; border: 0; padding: 0;
  border-radius: var(--r); vertical-align: -.05em; margin-right: .35em;
}
.tag.tag-red { background: var(--danger); }
.tag.tag-amber { background: var(--tape); }
.tag.tag-green { background: var(--bench); }

.res-empty { display: none; color: var(--ink-soft); font-size: .9em; }
.res-empty.show { display: block; }

/* ————— micro-interactions — pressed, saved, kept ————————————————
   Interaction-triggered only (press, save, confirm) — never timed, never
   looping, all inside the reduced-motion gate. The goal is a felt "that
   worked" for a tired hand, not decoration. */
@media (prefers-reduced-motion: no-preference) {
  .chip:active, .btn:active, .comfort summary:active, .comfort-panel button:active, .filter-chip:active,
  .copy-btn:active, .card-actions button:active, .hl-btn:active,
  .tool-card:active, .station:active { transform: scale(.965); }
  nav.main a:active { transform: translateY(1px); }

  /* the save/keep confirmation — a small pop, then still */
  @keyframes savePop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
  .save-pop { animation: savePop .26s cubic-bezier(.34,1.4,.64,1); }

  /* highlight confirmation — the passage warms for a breath, then settles
     into its kept state (hl-on) */
  @keyframes keptPulse { 0% { background: var(--tape-soft); } 100% { background: transparent; } }
  .hl-block.kept-pulse:not(.hl-on) { animation: keptPulse .5s ease; }
}

/* ————— the urgent search answer ————— */
/* 2026-10-01 audit. When a search's best page is the emergency page, it sits
   above the crisis rows in the house warning band (.redflag, the NHS
   care-card form), not a new device. Only finder entries marked urgent:1
   reach it. Hidden in print. */
.urgent-hit { display: none; }
.urgent-hit.show { display: block; }
.urgent-hit a.redflag { text-decoration: none; margin-bottom: 12px; }
.urgent-hit a.redflag:hover > span:last-child > strong:first-child { text-decoration: underline; }
@media print { .urgent-hit { display: none !important; } }

/* ————— a card's video ————— */
/* 2026-10-01 audit: two cards ended with a raw web address as link text.
   Now a row with title, source and length, inside "Why this works" (read
   later, when calm), never among the crisis steps. Opens only when tapped. */
.card-video { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 10px 0 0; color: var(--ink); text-decoration: none; }
.card-video .ico { width: 20px; height: 20px; flex: none; }
.card-video:hover strong { text-decoration: underline; }
.card-video .why { color: var(--ink-soft); font-weight: 400; }
@media print { .card-video { display: none !important; } }

/* ————— the one-time offer to personalise (2026-10-01 audit) ————— */
.tune-offer { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: .92em; color: var(--ink-soft); }
@media print { .tune-offer { display: none !important; } }

/* ————— the text-size floor (2026-10-01 audit) —————
   A re-measure found 1,455 pieces of text under 16px across all 60 pages:
   tags and spec labels at 12px, video sources at 11.5px, note labels at
   13px. The median reader is 75+. Floor: 15px for labels, 16px for text a
   person reads. Written as max(floor, em) so the Text size control still
   scales them; the old px values ignored it. */

/* ————— the bottom bar under zoom (2026-10-01) —————
   At 200% and 400% a phone's viewport is short; a fixed bar would cover a
   large share of it. There the menu sits in the page under the header. */
@media (max-width: 560px) and (max-height: 500px) {
  nav.main { position: static; grid-column: 1 / -1; grid-row: 3; border: 1px solid var(--hairline); margin-top: 6px; }
  body { padding-bottom: 0; }
}

/* A page that opens with a homepage-style section (guide.html, toolkit.html,
   moved off the homepage 2026-10-01) needs the gap the homepage gave it. */
.wrap > section:first-child { margin-top: 28px; }

/* ————— the reason, in brackets (owner law, 2026-10-01) —————
   Every step, warning and at-a-glance bullet leads with a bold action that
   is enough to act on; the reason follows in brackets, set lighter, so a
   tired eye stops at the bracket and a reader with energy keeps going. */
span.why { color: var(--ink-soft); font-weight: 400; }
.redflag span.why, .fire-card span.why { color: var(--ink-soft); }

/* ————— Walk me through it (2026-10-01 audit) ————— */
.walk-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px;
  margin: 0 0 18px; padding: 8px 14px; font-family: var(--sign); font-size: 17px; font-weight: 700;
  color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); cursor: pointer;
}
.walk-btn[hidden] { display: none; }
.fire-card.walking ol > li:not(.walk-on) { display: none; }
.fire-card.walking ol > li.walk-on { font-size: 1.18em; padding-bottom: 8px; }
.fire-card.walking ol > li.walk-on::after { display: none; }
.fire-card.walking ol > li.walk-on:focus { outline: none; }
.walk-nav { margin: 4px 0 18px; }
.walk-count { font-family: var(--sign); font-size: 15px; font-weight: 700; color: var(--ink-soft); margin: 0 0 10px; }
.walk-btns { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.walk-btns button { min-height: 56px; font-family: var(--sign); font-size: 18px; font-weight: 700; border-radius: var(--r); cursor: pointer; border: 2px solid var(--ink); }
.walk-back { background: var(--card); color: var(--ink); }
.walk-back[disabled] { opacity: .45; cursor: default; }
.walk-next { background: var(--ink); color: var(--paper); }
.walk-all { display: block; margin: 12px 0 0; min-height: 44px; padding: 0; font-family: var(--sign); font-size: 16px; color: var(--route); background: none; border: 0; text-decoration: underline; cursor: pointer; }
@media print {
  .walk-btn, .walk-nav { display: none !important; }
  .fire-card.walking ol > li { display: block !important; font-size: 1em !important; }
}

/* ————— The cover band (2026-10-01, direction C, the paperback guide) —————
   The site was one grey surface; you could not tell where you were. Like a
   Penguin cover, whose colour told you the series, every page's header now
   carries its section's colour, full width: help in ink (never red, which
   means warning and nothing else), the guide and learning in the route
   slate, tools in the bench green. The design law allows an accent where it
   answers "where am I"; this is that and nothing more. Dark themes use the
   house-at-night plates with a lit edge. Text on the band stays inside the
   comfort band (measured: 10.3 to 12.6 to 1 in light). */
body { --sec-bg: #2F2F2C; --sec-edge: #2F2F2C; --sec-mark: var(--ink); }
body.sec-learn { --sec-bg: #263F55; --sec-edge: #263F55; --sec-mark: #263F55; }
body.sec-tools { --sec-bg: #24443A; --sec-edge: #24443A; --sec-mark: #24443A; }
body.sec-find  { --sec-bg: #3B4045; --sec-edge: #3B4045; --sec-mark: #3B4045; }
html[data-theme="dark"] body, html[data-theme="night"] body { --sec-bg: #2A2E31; --sec-edge: #C9C6BF; --sec-mark: #C9C6BF; }
html[data-theme="dark"] body.sec-learn, html[data-theme="night"] body.sec-learn { --sec-bg: #1F2833; --sec-edge: #88ABCB; --sec-mark: #88ABCB; }
html[data-theme="dark"] body.sec-tools, html[data-theme="night"] body.sec-tools { --sec-bg: #1F2C27; --sec-edge: #87B8A4; --sec-mark: #87B8A4; }
html[data-theme="dark"] body.sec-find,  html[data-theme="night"] body.sec-find  { --sec-bg: #262A2D; --sec-edge: #9C998F; --sec-mark: #9C998F; }
/* Night is dimmer: its bands sit closer to the page, so the softer header
   text (the night ink-soft) keeps the 5:1 floor on them (contrast-check
   section 4, 2026-10-02; the shared dark bands gave 4.5 to 4.9:1). The lit
   edge still says which section you are in. */
html[data-theme="night"] body           { --sec-bg: #1E2124; }
html[data-theme="night"] body.sec-learn { --sec-bg: #19212A; }
html[data-theme="night"] body.sec-tools { --sec-bg: #192420; }
html[data-theme="night"] body.sec-find  { --sec-bg: #1F2225; }

header.site {
  --on-sec: #F4F3EE; --on-sec-soft: #D2D6D0;
  background: var(--sec-bg); color: var(--on-sec);
  border-bottom: 3px solid var(--sec-edge);
  /* full width, with the contents kept in the same 1000px column */
  max-width: none; margin: 0;
  padding-left: max(40px, calc((100% - 1000px) / 2));
  padding-right: max(40px, calc((100% - 1000px) / 2));
}
@media (max-width: 720px) { header.site { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 560px) { header.site { padding-left: 16px; padding-right: 16px; } }
html[data-theme="dark"] header.site, html[data-theme="night"] header.site { --on-sec: var(--ink); --on-sec-soft: var(--ink-soft); }
header.site .wordmark { color: var(--on-sec); }
header.site .wordmark small { color: var(--on-sec-soft); }
header.site .rose .rose-ring { stroke: var(--on-sec); }
header.site .rose .rose-pt { fill: var(--on-sec); }
header.site .rose .rose-n { fill: #E8A193; }
header.site .area-line .area-name { color: var(--on-sec); }
header.site .area-line a { color: var(--on-sec-soft); border-left-color: rgba(255,255,255,.35); }
header.site .area-line a:hover { color: var(--on-sec); }
header.site .theme-btn, header.site .comfort summary { border-color: transparent; }
@media (min-width: 561px) {
  header.site nav.main a { color: var(--on-sec-soft); }
  header.site nav.main a.active, header.site nav.main a:hover { color: var(--on-sec); }
  header.site nav.main a::after { border-bottom-color: var(--on-sec); }
  header.site nav.main a[href$="emergency.html"] { color: #F2B4A7; }
}
/* the bottom bar marks where you are in the section's colour */
@media (max-width: 560px) {
  nav.main a.active { color: var(--ink); }
  nav.main a.active::after { border-top-color: var(--sec-mark); border-top-width: 4px; }
}

/* ————— Read at a glance (2026-10-02, owner: "quick and easy at a glance ...
   weights, typography, subtle design element to help the eye ... even when
   stressed"; round three, the weight ladder chosen as the base) —————
   1. The weight ladder: a crisis step's action is the heaviest line on the
      card, the reason sits under it, small and grey, and the step number is
      a big thin numeral in the margin. Read only the black lines and you have
      done the right thing.
   2. The highlighter: a yellow swipe under the first words of each action
      (yellow is the colour everyone reads as "this part matters"; the swipe
      is a thin band under two or three words, a saved highlight washes the
      whole paragraph, so the two cannot be confused). One per item, never
      decoration.
   3. The margin labels: "Say" beside the exact words, "Call" under the number
      of a step that means phoning someone. The two lookups a crisis needs.
   4. Plans you work through over hours or days get tick boxes (ul.plan). */
.fire-card ol li { padding: 0 0 22px 50px; font-family: var(--sign); line-height: 1.4; }
.fire-card ol li::before {
  content: attr(data-n); left: 0; top: -3px; width: 42px; height: auto; display: block;
  background: none; border: 0; border-radius: 0; text-align: left;
  font-family: var(--sign); font-size: 38px; font-weight: 200; line-height: 1; color: var(--ink-faint);
}
.fire-card ol li::after { display: none; }
.fire-card ol li > strong:first-child { display: block; font-size: 1.12em; font-weight: 760; line-height: 1.25; color: var(--ink); }
.fire-card ol li > span.why { display: block; margin-top: 4px; font-size: .88em; line-height: 1.42; }
.fire-card ol li .say { margin-top: 10px; font-size: 1.08em; padding-left: 14px; }
.fire-card ol li .say::before {
  content: "Say"; left: -50px; top: 9px; font-family: var(--sign); font-size: 15px; font-weight: 800; font-style: normal;
  line-height: 1; color: var(--ink); opacity: 1;
}
.fire-card ol li.step-call::after {
  display: block; content: "Call"; position: absolute; left: 0; top: 42px; bottom: auto; border: 0;
  font-family: var(--sign); font-size: 15px; font-weight: 800; line-height: 1; color: var(--danger);
}
mark.key {
  background: linear-gradient(transparent 56%, var(--marker) 56%, var(--marker) 94%, transparent 94%);
  color: inherit; padding: 0 1px; border-radius: 0;
}
:root { --marker: #F2DC7E; }
html[data-theme="dark"] { --marker: rgba(170,140,40,.34); }   /* deeper gold, so light ink keeps 5:1 on it (contrast-check) */
html[data-theme="night"] { --marker: rgba(150,125,40,.18); }
/* the short answer and every action-first item: the action in the label face, heavier */
.callout.answer li > strong:first-child,
article.chapter :is(ul, ol):has(> li > span.why) > li > strong:first-child,
article.chapter p:has(> strong:first-child + span.why) > strong:first-child,
ul.plan.checklist li > div > strong:first-child { font-family: var(--sign); font-weight: 720; }
/* plans: tick boxes, kept on this device (initChecklists) */
ul.plan.checklist { max-width: 66ch; }
ul.plan.checklist li { font-size: 1em; padding: 12px 0; border-bottom: 1px solid var(--hairline); gap: 14px; }
ul.plan.checklist input[type=checkbox] { width: 26px; height: 26px; margin-top: 2px; }
ul.plan.checklist input:checked + div, ul.plan.checklist input:checked + div strong { color: var(--ink-soft); }   /* not opacity: a done item stays inside the 5:1 band */
@media print { mark.key { background: none; text-decoration: underline; } ul.plan.checklist input { display: none; } }