/* The Sleep Training Handbook v6 - runtime stylesheet
 * Voice: warm, paper, calm. Optimised for a tired parent on a phone at 2am.
 */

:root {
  --paper: #fffdf9;
  --ink: #20211e;
  --ink-soft: #54564f;
  --rule: #e8e2d3;
  /* Bumped accent slightly darker from #8c7a5b for light-theme link
     contrast (~4.6:1 -> ~5.6:1 on --paper) - A11Y audit S1. */
  --accent: #7a6a4d;
  --accent-soft: #b9a781;
  --sidebar-bg: #f6efde;
  --callout-bg: #eef4ee;
  --safety-bg: #fbe9e9;
  /* Darkened from #c25151 so the bold safety-block label clears WCAG AA
     (was 3.91:1 on --safety-bg; #b34444 is ~4.7:1) - A11Y audit A11Y-1.
     Still a clear red for the block's left border; dark theme overrides
     it separately below. */
  --safety-rule: #b34444;
  --err: #8b2e2e;
  --max-w: 38rem;
  /* Sticky first-column background for wide tables. Defaults to --paper
     (matches body); overridden per theme so the column stays visible
     against the table body when scrolled horizontally. */
  --sticky-cell-bg: var(--paper);
  --font-body: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'URW Palladio L', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --fs: 1.0625rem;
  --lh: 1.6;
  --radius: 6px;
  /* Sticky topbar height. Matches .topbar's effective height
     (2.75rem iconbtn + 1rem top/bottom padding) plus the iOS safe-area
     inset so anchor-jump scroll offsets stay correct on notched phones. */
  --topbar-h: calc(3.75rem + env(safe-area-inset-top, 0px));
}

[data-theme="sepia"] {
  --paper: #f4e9d3;
  --ink: #3a2f1e;
  --ink-soft: #5d4d33;
  --rule: #d8c89f;
  /* Sepia paper is darker than light --paper, so the light --accent
     (#7a6a4d) only reached 4.36:1 here (fails AA). Darken it for sepia
     to ~5.2:1 - A11Y audit A11Y-1. The light-theme bump was never
     mirrored into sepia until now. */
  --accent: #6b5a3d;
  --sidebar-bg: #ebd8a9;
  --callout-bg: #ddebcf;
}

[data-theme="dark"] {
  --paper: #1a1a18;
  --ink: #ece5d0;
  --ink-soft: #b3aa90;
  --rule: #2f2e29;
  --accent: #c2b078;
  --accent-soft: #8c7a5b;
  --sidebar-bg: #25241f;
  --callout-bg: #1f2a23;
  --safety-bg: #2a1818;
  --safety-rule: #d36b6b;
  --err: #d36b6b;
  /* Lift the sticky-cell background off the body --paper so the column
     boundary stays visible when readers scroll wide tables horizontally
     on a dim phone screen. */
  --sticky-cell-bg: #232220;
}

[data-size="lg"] { --fs: 1.1875rem; }
[data-size="xl"] { --fs: 1.3125rem; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs);
  line-height: var(--lh);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* ---------- Skip-to-content (visible only on keyboard focus) ---------- */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--accent);
  color: var(--paper);
  padding: 0.55rem 0.9rem;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  border-radius: 0 0 var(--radius) 0;
  /* Off-screen by default; pulled into view on :focus */
  transform: translateY(-100%);
  transition: transform 0.15s ease;
  z-index: 100;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--paper);
  outline-offset: -4px;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-ui);
  padding-top: max(0.5rem, env(safe-area-inset-top));
}
.topbar .brand {
  flex: 1;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.iconbtn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: var(--radius);
  /* WCAG 2.5.5 + 3am-parent ergonomics: bumped from 2.25rem (36px) to
     2.75rem (44px) so a tired hand doesn't fat-finger between the
     four topbar icons or miss the drawer-close in the corner. */
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: 1.05rem;
  font-family: var(--font-ui);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.iconbtn:hover { background: var(--sidebar-bg); }
.iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Reader ---------- */
.reader {
  flex: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1rem 1.1rem 4rem;
}
.content[aria-busy="true"] .loading { color: var(--ink-soft); font-style: italic; }
.content h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0.6rem 0 1rem;
  letter-spacing: -0.005em;
}
.content h2 {
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 1.8rem 0 0.6rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.3rem;
}
.content h3 {
  font-size: 1.12rem;
  margin: 1.4rem 0 0.45rem;
  color: var(--ink);
}
.content h4 {
  font-size: 1rem;
  margin: 1rem 0 0.3rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-ui);
}
.content p { margin: 0.7rem 0; }
.content p.lead { font-size: 1.05em; color: var(--ink-soft); margin: 0 0 1rem; }
/* Underline inherits the link colour (--accent) rather than the faint
   --accent-soft, which was only 1.96–2.32:1 against paper and so was
   effectively invisible - leaving colour as the sole link cue (A11Y-1). */
.content a { color: var(--accent); text-decoration: underline; }
.content a:hover { text-decoration-thickness: 2px; }
.content ul, .content ol { padding-left: 1.4em; margin: 0.6rem 0; }
.content li { margin: 0.25rem 0; }
.content hr { border: 0; border-top: 1px solid var(--rule); margin: 1.6rem 0; }

/* Sticky-topbar offset for in-page anchor jumps. Without this, clicking
   a TOC link (#section-id) on /ready-checklist/, /appendix/c/,
   /appendix/e/, /start-here/, etc. scrolled the heading underneath the
   sticky .topbar - a 3am parent couldn't tell whether they'd landed in
   the right section. The [id] selector is a safety net for any future
   non-heading anchor target. */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.content [id] {
  scroll-margin-top: var(--topbar-h);
}

/* ---------- Blocks (sidebar / callout / safety) ---------- */
.block {
  background: var(--sidebar-bg);
  border-left: 3px solid var(--accent-soft);
  padding: 0.85rem 1rem;
  margin: 1.2rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.block.callout { background: var(--callout-bg); border-left-color: #6f8a6a; }
.block.safety { background: var(--safety-bg); border-left-color: var(--safety-rule); }
.block .block-label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.block.safety .block-label { color: var(--safety-rule); font-weight: 600; }
.block p { margin: 0.4rem 0; }
.block .block-h { margin-top: 0.6rem; }

/* ---------- Post-purchase welcome banner (M-1) ---------- */
.welcome-banner {
  position: relative;
  background: var(--callout-bg);
  border: 1px solid var(--rule);
  border-left: 3px solid #6f8a6a;
  border-radius: var(--radius);
  padding: 0.85rem 2.4rem 0.85rem 1rem;
  margin: 0 0 1.4rem;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.5;
}
.welcome-banner p { margin: 0; }
.welcome-dismiss {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: none;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.welcome-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: 1rem -1.1rem; }
.content table { border-collapse: collapse; min-width: 100%; width: max-content; font-size: 0.95em; }
.content th, .content td { border: 1px solid var(--rule); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
.content thead th { background: var(--sidebar-bg); font-family: var(--font-ui); font-size: 0.85em; }
/* Sticky first column for wide tables - keeps the row label visible
   while the rest of the row scrolls horizontally. z-index ensures the
   sticky cell paints above neighbours; the box-shadow is the right
   border (border-collapse loses it when adjacent cells scroll under). */
.content table th:first-child,
.content table td:first-child {
  position: sticky;
  left: 0;
  background: var(--sticky-cell-bg);
  box-shadow: 1px 0 0 var(--rule);
  z-index: 1;
}
.content table thead th:first-child {
  background: var(--sidebar-bg);
  z-index: 2;
}

/* ---------- Readiness tally widget (/ready-checklist/) ----------
   Renders inline instruction + per-sign checkboxes + a score card that
   sits below sign 7 and immediately above the collapsible "What your
   answers mean" section. See renderReadinessTally in app.js. */

/* Inline instruction above sign 1 (small, paragraph-styled). */
.readiness-tally-instruction-inline {
  color: var(--ink-soft);
  font-size: 0.95em;
  margin: 0.5rem 0 1.2rem;
}

/* Score card - accent-bordered panel after sign 7. */
.readiness-tally {
  background: var(--sidebar-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 2rem 0 1.4rem;
  font-family: var(--font-ui);
}
.readiness-tally__score {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}
.readiness-tally__count {
  display: inline-block;
  min-width: 1.5ch;
  text-align: right;
  color: var(--accent);
}
.readiness-tally__bucket {
  margin-top: 0.65rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink);
}
.readiness-tally__bucket strong { font-weight: 600; }
.readiness-tally__bucket a { color: var(--accent); text-decoration: underline; }
/* Bucket colour-coding via :has() - green for ready, accent (gold) for
   wait, red for pause. Browsers without :has() get the default gold. */
.readiness-tally[data-engaged="1"]:has(.readiness-tally__bucket[data-bucket="ready"]) { border-left-color: #6f8a6a; }
.readiness-tally[data-engaged="1"]:has(.readiness-tally__bucket[data-bucket="wait"]) { border-left-color: var(--accent); }
.readiness-tally[data-engaged="1"]:has(.readiness-tally__bucket[data-bucket="pause"]) { border-left-color: var(--safety-rule); }

/* Sign H3 becomes a flex row so the checkbox sits inline with the heading
   text at the same baseline. The checkbox label is 44px for an easy
   thumb tap on a phone. */
.content h3.readiness-sign {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.readiness-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  margin: -0.3rem 0;
  cursor: pointer;
}
.readiness-check input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ---------- Collapsible <details> in body content ----------
   Bordered card with a custom chevron marker that rotates on open.
   Used by the TOC at the top of /ready-checklist/ and by the three
   bucket explanations in the "What your answers mean" section. */
.content details {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin: 0.7rem 0;
  background: var(--paper);
}
.content details[open] {
  padding-bottom: 0.85rem;
}
.content details > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 0.98rem;
  color: var(--ink);
  padding: 0.15rem 0 0.15rem 1.5em;
  position: relative;
  user-select: none;
}
.content details > summary::-webkit-details-marker { display: none; }
.content details > summary::before {
  content: "▸";
  color: var(--accent);
  position: absolute;
  left: 0.1em;
  top: 0.2em;
  transition: transform 0.15s ease;
  font-size: 0.9em;
}
.content details[open] > summary::before {
  transform: rotate(90deg);
}
.content details > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.content details > summary strong { font-weight: 600; }
.content details > p:first-of-type { margin-top: 0.7rem; }
.content details > p:last-of-type { margin-bottom: 0.15rem; }

/* Bucket-specific tint on the open answer card so a parent visually
   recognises which result they landed on. Border-left mirrors the
   tally panel's colour code. */
#bucket-ready[open] { border-left: 3px solid #6f8a6a; }
#bucket-wait[open] { border-left: 3px solid var(--accent); }
#bucket-pause[open] { border-left: 3px solid var(--safety-rule); }

/* ---------- Page navigation (Three buttons + check-in row) ---------- */
.page-nav {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: var(--font-ui);
}
.page-nav .row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  justify-content: space-between;
}
.page-nav .row > * { flex: 1; }
.navbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  min-height: 3.6rem;
  line-height: 1.2;
}
.navbtn .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 0.15rem; }
.navbtn .title { font-size: 0.95rem; }
.navbtn:hover { background: var(--sidebar-bg); }
.navbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.navbtn[aria-disabled="true"] { color: var(--ink-soft); pointer-events: none; opacity: 0.5; }
.navbtn.up { background: var(--callout-bg); border-color: #cad9c1; }

.checkin {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--sidebar-bg);
  border-radius: var(--radius);
  padding: 0.8rem;
  border: 1px solid var(--rule);
}
.checkin label { font-size: 0.9rem; color: var(--ink-soft); font-family: var(--font-ui); }
.checkin .pills {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.checkin .pill {
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.85rem;
}
.checkin .pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.checkin .pill[aria-pressed="true"] {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  font-weight: 600;
  /* Inset shadow plus a subtle outer ring so the pressed state reads at a
     glance even in dark mode where accent / paper contrast is intentionally
     lower than in light mode. */
  box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 1px var(--accent);
}
.checkin .stars { font-size: 1.05rem; }
.checkin .stars button {
  background: transparent;
  border: 0;
  color: var(--accent-soft);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 0.15rem;
}
.checkin .stars button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.checkin .stars button[aria-pressed="true"], .checkin .stars button.lit { color: var(--accent); }

.hub-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}
.hub-list li {
  margin: 0;
}
.hub-list a {
  display: block;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-ui);
  background: var(--paper);
}
.hub-list a:hover { background: var(--sidebar-bg); }
.hub-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hub-list a .progress-tick {
  float: right;
  color: var(--accent);
  font-size: 1.1em;
}

/* ---------- Drawer ---------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(20,20,18,0.45);
  display: none;
}
.drawer[aria-hidden="false"] { display: block; }
.drawer .drawer-panel {
  background: var(--paper);
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 80%;
  max-width: 22rem;
  /* Top padding leaves room for the absolutely-positioned .drawer-close
     button below. Was 1rem when the close button used float:right; the
     float wrapped the first "Start" heading at <320px (iPhone SE). */
  padding: 3rem 1rem 2rem;
  overflow-y: auto;
  border-right: 1px solid var(--rule);
}
.drawer h3 {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 1.4rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
/* Drop the divider above the very first section heading in the drawer
   panel so the close button area stays clean. */
.drawer h3:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.drawer ul { list-style: none; padding: 0; margin: 0; }
.drawer ul a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.75rem 0.5rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  border-radius: 4px;
}
.drawer ul a:hover { background: var(--sidebar-bg); }
.drawer ul a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.drawer ul a.current { background: var(--accent); color: var(--paper); }
.drawer .drawer-close {
  /* Was float:right with margin; the float wrapped the first section
     heading next to the button on narrow screens (<320px). Absolute
     pin keeps it clear of the heading regardless of width. */
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
/* Float context can clip the inherited .iconbtn focus outline; pin its
   stacking explicitly so the ring stays visible. */
.drawer .drawer-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}
/* Pin button lives next to the close button. Hidden by default - only
   appears at the desktop breakpoint below, where pinning is a meaningful
   affordance. */
.drawer .drawer-pin {
  display: none;
  position: absolute;
  top: 0.5rem;
  right: 3rem;
}
.drawer .drawer-pin:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  position: absolute;
  z-index: 1;
}

/* ---------- Drawer pin (desktop sidebar mode) ----------
   At >= 1024px the drawer can be pinned as a permanent left sidebar.
   First-visit default: pinned ON for desktop, OFF for mobile (set by
   app.js initDrawerPin). The pin button toggles + persists in
   localStorage as psh-drawer-pin. On mobile, the media query never
   matches, so the drawer always behaves as a slide-in overlay even if
   the stored preference is "1".

   Layout: push the entire body content right by the sidebar width via
   body padding-left. The sticky topbar then starts past the sidebar
   (no overlap), and the centred .reader (max-width 38rem, margin:0
   auto) auto-centres within the remaining viewport - preserving the
   reading width that the design assumes. */
@media (min-width: 1024px) {
  .drawer .drawer-pin { display: inline-flex; }
  body[data-drawer-pin="1"] {
    padding-left: 20rem;
  }
  body[data-drawer-pin="1"] .drawer {
    display: block;
    position: fixed;
    inset: 0 auto 0 0;
    width: 20rem;
    background: var(--paper);
    border-right: 1px solid var(--rule);
    z-index: 25;
  }
  body[data-drawer-pin="1"] .drawer .drawer-panel {
    position: static;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 1rem 1rem 2rem;
    box-sizing: border-box;
    border-right: 0;
  }
  body[data-drawer-pin="1"] .drawer .drawer-close { display: none; }
  body[data-drawer-pin="1"] .drawer-toggle { display: none; }
  /* Pin button highlight + position when sidebar is active. The close
     button is hidden in pinned mode, so the pin moves into the corner
     it normally vacated. */
  body[data-drawer-pin="1"] .drawer .drawer-pin {
    right: 0.5rem;
    border-color: var(--accent);
    color: var(--accent);
  }
}

/* ---------- One-time safety modal (native <dialog>; psh-safety-ack flag) ---------- */
/* Native <dialog> defaults to display:block when open; block-flow doesn't
   honour vertical `margin:auto`, so we force flex layout on the dialog
   itself and let align-items position the card. flex-end on mobile gives
   the bottom-sheet feel; center on tablet+ centres the dialog vertically. */
.safety-modal {
  border: 0;
  padding: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  z-index: 80;
  box-sizing: border-box;
}
.safety-modal[open] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.safety-modal::backdrop { background: rgba(20,20,18,0.55); }
.safety-modal-card {
  background: var(--safety-bg);
  color: var(--ink);
  border-top: 4px solid var(--safety-rule);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1.2rem 1.1rem 1.4rem;
  max-width: 36rem;
  width: 100%;
  font-family: var(--font-body);
  line-height: 1.5;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
  box-sizing: border-box;
}
@media (min-width: 38rem) {
  .safety-modal { padding: 2rem; }
  .safety-modal[open] { align-items: center; }
  .safety-modal-card { border-radius: var(--radius); border-top-width: 4px; }
}
.safety-modal-card h2 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  font-family: var(--font-ui);
  color: var(--safety-rule);
  letter-spacing: 0.01em;
}
.safety-modal-card p { margin: 0.5rem 0; }
.safety-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem !important;
}
@media (min-width: 28rem) {
  .safety-modal-actions { flex-direction: row; align-items: center; justify-content: space-between; }
}
.safety-modal-secondary {
  color: var(--ink);
  text-decoration: underline;
  font-family: var(--font-ui);
  font-size: 0.95rem;
}
.safety-modal-secondary:focus-visible {
  outline: 2px solid var(--safety-rule);
  outline-offset: 2px;
  border-radius: 2px;
}
.safety-modal-ack {
  background: var(--safety-rule);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  cursor: pointer;
  font-weight: 600;
}
.safety-modal-ack:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* ---------- Search overlay ---------- */
.search-overlay {
  border: 0;
  padding: 0;
  background: rgba(20,20,18,0.45);
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}
.search-overlay::backdrop { background: rgba(20,20,18,0.45); }
.search-overlay .panel {
  background: var(--paper);
  border-radius: var(--radius);
  width: 92%;
  max-width: 36rem;
  margin: 4vh auto 0;
  padding: 1rem;
  font-family: var(--font-ui);
  max-height: 88vh;
  overflow-y: auto;
}
.search-overlay input[type="search"] {
  width: 100%;
  padding: 0.7rem;
  font-size: 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
}
.search-overlay input[type="search"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.search-overlay .synonym-pin {
  background: var(--callout-bg);
  border: 1px solid #cad9c1;
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin-top: 0.6rem;
  font-size: 0.95rem;
}
.search-overlay .results {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
}
.search-overlay .results li a {
  display: block;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
}
.search-overlay .results li a:hover { background: var(--sidebar-bg); }
.search-overlay .results li a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-overlay .results .kind {
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 0.4rem;
}
.search-overlay .empty { color: var(--ink-soft); padding: 0.6rem 0; font-style: italic; }
.search-overlay .closebar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.4rem;
}

/* ---------- /search/ page (full-page variant of the overlay) ----------
   Same input + results + synonym-pin behaviour as .search-overlay, but
   rendered inline on the page so it can be deep-linked (?q=foo) and
   shared. Lifts the visual treatment of the overlay's .panel onto the
   article-level container. */
.search-page {
  font-family: var(--font-ui);
  margin: 0.8rem 0;
}
.search-page__input {
  width: 100%;
  padding: 0.85rem;
  font-size: 1.05rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
}
.search-page__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.search-page .synonym-pin {
  background: var(--callout-bg);
  border: 1px solid #cad9c1;
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin-top: 0.8rem;
  font-size: 0.95rem;
}
.search-page .results {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.search-page .results li a {
  display: block;
  padding: 0.7rem 0.6rem;
  min-height: 44px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.98rem;
}
.search-page .results li a:hover { background: var(--sidebar-bg); }
.search-page .results li a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-page .results .kind {
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 0.4rem;
}
.search-page .empty { color: var(--ink-soft); padding: 0.6rem 0; font-style: italic; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--rule);
  padding: 1.4rem 1rem 2rem;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
.footer p { margin: 0.2rem 0; }
.footer a { color: var(--accent); text-decoration: underline; }
.footer .micro { font-size: 0.78rem; color: var(--ink-soft); }

/* ---------- Stage chip on top bar ---------- */
.stage-chip {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  background: var(--callout-bg);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin: 0 0.25rem;
}

/* ---------- "On this page" in-page contents (Appendix G) ---------- */
.on-this-page { margin: 0 0 1.4rem; }
.on-this-page .toc-label { margin: 0 0 0.3rem; }
.on-this-page ul { margin-top: 0; }

/* ---------- Print button (Appendix G) ---------- */
.print-btn {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  background: var(--paper);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.45rem 0.9rem;
  margin: 0.2rem 0 1.2rem;
  cursor: pointer;
}
.print-btn:hover { background: var(--sidebar-bg); }
.print-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Print stylesheet for Appendix G ---------- */
/* Force A4 with safe margins so the quick references print cleanly onto a
   fridge sheet regardless of the printer's default page size. */
@page { size: A4; margin: 14mm; }
@media print {
  /* Hide all on-screen navigation, including the "On this page" contents
     list - useless on a printed copy. */
  .topbar, .footer, .page-nav, .drawer, .search-overlay, .on-this-page, .print-btn { display: none !important; }
  .reader { max-width: none; padding: 0; }
  body { background: white; color: black; font-size: 11pt; }
  .block { background: #f4f4f4 !important; border-left-color: #888 !important; }
  a { color: black; text-decoration: none; }
  /* Each quick reference (## heading) starts on its own A4 page so a parent
     can print just the one they want; tables and callouts don't split across
     a page break. */
  .table-wrap { overflow: visible; margin: 0; }
  .table-wrap table { width: 100%; font-size: 0.9em; }
  .content table, .block { break-inside: avoid; page-break-inside: avoid; }
  h2 { page-break-before: always; break-before: page; }
  h2:first-of-type { page-break-before: avoid; break-before: auto; }
}

/* ---------- 404 ---------- */
.error-page .reader { padding-top: 3rem; }
.error-page h1 { font-size: 1.5rem; }

/* ---------- Access gate ---------- */
.gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 22rem;
  margin: 1.25rem 0 0.5rem;
}
.gate-form label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.gate-form input {
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.gate-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.gate-form button {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  align-self: flex-start;
}
.gate-form button:hover { filter: brightness(0.95); }
.gate-form .gate-error {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--err);
}

/* ---------- Smart-resume bullet (set by app.js when psh-last is a real route) ---------- */
/* Restrained emphasis so a returning parent at 3am can spot the bullet that
   matters to them - bold weight, accent colour on the link. No background
   highlight or icons (would compete with the rest of the bulleted list). */
.smart-resume { font-weight: 600; }
.smart-resume a { color: var(--accent); }

/* ---------- Reduced motion ---------- */
/* Respect the OS-level preference for users with vestibular sensitivity.
   The site has very little motion to begin with (skip-link transition is
   the main one) but we honour the preference everywhere as a baseline. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}