/* Visual polish for the public pages, the demo and the app.
   Loaded last. Keeps the large type and contrast of site.css; adds a header
   bar, card depth, a wider marketing layout and clearer status colours. */
:root {
  --accent-2: #9e4614;          /* the one warm accent: highlights and icons, 5.8:1 on --bg */
  --warm: #f9e7d5;              /* soft apricot wash behind icons and the next-step card */
  --tint: #e4f1ee;              /* soft teal wash */
  --shadow: 0 1px 2px rgba(74, 52, 30, .06), 0 6px 22px rgba(74, 52, 30, .08);
  --radius: 20px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent-2: #f2a673;
    --warm: #3a2b20;
    --tint: #1e3532;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 22px rgba(0, 0, 0, .3);
  }
}

body { padding-inline: 0; }
.wrap { padding-inline: 16px; }
.wrap.wide { max-width: 64rem; }

/* Header bar */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 64rem; margin: 0 auto; padding: .7rem 16px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topbar-in.narrow { max-width: 38rem; }
.brand { font-size: 1.1rem; letter-spacing: -.01em; }
.brand-mark { width: 2.1rem; height: 2.1rem; border-radius: 10px; }
.brand-mark svg { width: 1.3rem; height: 1.3rem; }
.topnav { display: flex; gap: .25rem 1rem; flex-wrap: wrap; font-size: .9rem; font-weight: 700; }
.topnav a { text-decoration: none; padding: .5rem .25rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.topnav a:hover { text-decoration: underline; }
.topbar .inline-form button { width: auto; }

/* Cards and depth */
.card, .panel, .tile, .med, .sheet, .glance a { border-radius: var(--radius); box-shadow: var(--shadow); border-color: transparent; }
@media (prefers-color-scheme: dark) { .card, .panel, .tile, .med, .sheet, .glance a { border-color: var(--line); } }
.tile { border-left: 6px solid var(--line); }
.tile:has(.pill-wait) { border-left-color: var(--wait); }
.tile:has(.pill-no) { border-left-color: var(--no); }
.tile:has(.pill-yes) { border-left-color: var(--yes); }
.pill::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; margin-right: .4rem; vertical-align: .05rem; }

/* Buttons */
button, .button-link { border-radius: 10px; transition: filter .15s; }
button:hover, .button-link:hover { filter: brightness(1.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; }
.button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .75rem 1.35rem; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.button-link.secondary { background: var(--surface); color: var(--ink); border: 2px solid var(--line); }

/* Marketing layout */
.hero { display: grid; gap: 2rem; align-items: center; padding: 1rem 0 1.5rem; }
.hero h1 { font-size: 2.3rem; margin-top: 1rem; }
.hero .eyebrow { display: inline-block; font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); margin-top: 1rem; }
.hero-art svg { width: 100%; max-width: 20rem; height: auto; display: block; margin: 0 auto; }
.trust { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; color: var(--muted); font-size: .9rem; }
.trust li::before { content: "\2713"; color: var(--accent); font-weight: 700; margin-right: .35rem; }
@media (min-width: 56rem) {
  .hero { grid-template-columns: 1.25fr 1fr; }
  .hero h1 { font-size: 2.7rem; }
}
.section { margin: 3rem 0; }
.section > h2 { margin-top: 0; }
.steps-grid, .feature-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 48rem) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
.steps-grid li, .feature-grid li { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
.steps-grid .num { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--tint); color: var(--accent); font-weight: 700; margin-bottom: .5rem; }
.steps-grid strong, .feature-grid strong { display: block; margin-bottom: .25rem; }
.steps-grid span, .feature-grid span { color: var(--muted); }
.feature-grid svg { width: 2.25rem; height: 2.25rem; color: var(--accent); margin-bottom: .4rem; }
.band { background: var(--tint); border-radius: var(--radius); padding: 1.5rem; }
.band h2 { margin-top: 0; }
.narrow-col { max-width: 38rem; }
.boundary { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.boundary li::before { content: "\2715"; color: var(--accent-2); font-weight: 700; margin-right: .5rem; }

/* App home: the next deadline */
.next-up { background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin: 1rem 0 .5rem; box-shadow: var(--shadow); }
.next-up p { margin: .2rem 0; }
.next-up .label { font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.next-up .date { font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
.next-up a { color: var(--accent-ink); font-weight: 700; }

/* Printable patient card */
.cards-sheet { display: grid; gap: 1.5rem; }
.pcard { border: 2px dashed var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; background: var(--surface); }
.pcard h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.pcard .url { font-size: 1.15rem; font-weight: 700; word-break: break-all; color: var(--accent); }
.pcard .fill { display: grid; gap: .6rem; margin: .75rem 0; }
.pcard .fill span { display: block; border-bottom: 1px solid var(--field-line); padding-top: .9rem; color: var(--muted); font-size: .9rem; }
.pcard .small { font-size: .9rem; color: var(--muted); margin: .5rem 0 0; }
@media print {
  .topbar, .no-print, .notice { display: none !important; }
  .pcard { break-inside: avoid; box-shadow: none; }
  .card, .panel, .tile, .med, .sheet { box-shadow: none; }
}
@media (max-width: 55.99rem) { .hero-art svg { max-width: 15rem; } }
.next-up .small-note { font-size: .9rem; margin-top: .4rem; }

/* Patient cards: four on one Letter or A4 page */
@page { margin: 12mm; }
@media print {
  html { font-size: 10pt; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .cards-sheet { grid-template-columns: 1fr 1fr; gap: 8mm; }
  .pcard { padding: 6mm 7mm; border-radius: 4mm; border-color: #777; }
  .pcard h2 { font-size: 13pt; }
  .pcard .url { font-size: 12pt; color: #000; }
  .pcard .fill span { padding-top: 7mm; color: #333; }
}

/* First visit */
.welcome-steps { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; }
.welcome-steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
.welcome-steps .tick { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--accent); font-weight: 700; }
.welcome-steps li.done .tick { background: var(--accent); color: var(--accent-ink); }
.welcome-steps p { margin: .35rem 0 .75rem; color: var(--muted); }
.getting-started { border-left: 6px solid var(--accent); }
.getting-started h2 { margin-top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow-plain { display: inline-block; margin-top: 1.5rem; font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); }
.trust.stacked { flex-direction: column; font-size: 1rem; color: var(--ink); }

/* Warm design: generous spacing, soft cards, one icon per section, one primary
   button per screen, progress cues on every step. Loaded last. */
/* 20px body text comes from site.css (html { font-size: 125%; }), before the print rules. */
body { line-height: 1.6; }
.wrap { padding-block: 1.75rem 3.5rem; }
h1 { font-size: 2.1rem; margin: 1.5rem 0 .9rem; }
h2 { font-size: 1.35rem; margin: 2.5rem 0 1rem; }
.lead { font-size: 1.15rem; line-height: 1.55; }
.hint, .src, .small-note, .notice, .source, .sheet-note, .trust, .topnav, .app-nav a, .pill { font-size: .9rem; }  /* 18px floor */
.card, .panel, .med, .tile, .sheet, .glance a { padding: 1.4rem 1.5rem; }
.card, .panel, .tile, .med, .sheet, .glance a, .welcome-steps li, .steps-grid li, .feature-grid li { border-radius: var(--radius); }
.med-list, .tiles, .welcome-steps { gap: 1.25rem; }

/* Section headings carry one simple icon in the warm accent */
.h-icon { display: flex; align-items: center; gap: .7rem; }
.h-icon .ico { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--warm); color: var(--accent-2); }
.h-icon .ico svg { width: 1.3rem; height: 1.3rem; }

/* Buttons: one filled primary per screen; everything else is quieter. 44px+ targets. */
button, .button-link { min-height: 3rem; border-radius: 999px; padding: .8rem 1.6rem; }
.link-button { min-height: 2.75rem; border-radius: 0; padding: .5rem 0; }
.button-link.secondary, button.secondary { background: var(--surface); color: var(--accent); border: 2px solid var(--accent); }
.app-nav a, .topnav a { min-height: 2.75rem; }
.app-nav { gap: .5rem; }
.app-nav a { border-radius: 999px; background: var(--surface); border-color: var(--line); }
.primary-action { margin: 1.5rem 0; }
.primary-action .button-link, .primary-action button { width: 100%; }
@media (min-width: 40rem) { .primary-action .button-link, .primary-action button { width: auto; } }

/* Progress cues */
.progress { margin: 1rem 0 1.5rem; }
.progress-label { margin: 0 0 .4rem; font-weight: 700; color: var(--accent-2); font-size: .9rem; letter-spacing: .02em; }
.progress progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: .75rem; border: 0; border-radius: 999px; background: var(--line); color: var(--accent); overflow: hidden; }
.progress progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
.progress progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.progress progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.step-tag { display: inline-block; margin: .5rem 0 0; padding: .3rem .85rem; border-radius: 999px; background: var(--warm); color: var(--accent-2); font-weight: 700; font-size: .9rem; }

/* The next step stands out softly */
.welcome-steps li.next { outline: 3px solid var(--accent); outline-offset: -3px; }
.welcome-steps .tick { background: var(--warm); color: var(--accent-2); }
.getting-started { border-left: 0; background: var(--warm); box-shadow: none; }
.next-up { border-radius: var(--radius); }
.empty { text-align: left; padding: 1.75rem 1.5rem; border-radius: var(--radius); background: var(--warm); }
.empty p { margin: 0 0 1rem; font-size: 1.1rem; }

/* Illustrations: Open Peeps (CC0) scenes, inlined and decorative. Fixed light colours in both
   themes so the drawn outline always reads; the backdrop shape sits behind each scene. */
:root {
  --illus-bg: #f9e7d5; --illus-line: #2b241e;
  --illus-t1: #fbe5cf; --illus-t2: #e6b48c; --illus-t3: #c08559; --illus-t4: #8f5a38;
  --illus-c1: #0e6464; --illus-c2: #9fd2c9; --illus-coat: #fffdf9;
  --illus-p1: #fffdf9; --illus-p2: #e9a46e; --illus-screen: #9fd2c9;
}
.illus-wrap { margin: 1rem auto .5rem; max-width: 22rem; }
.illus-wrap > svg { display: block; width: 100%; height: auto; }
.hero .illus-wrap { max-width: 24rem; margin: .5rem 0 0; }
.empty .illus-wrap { max-width: 12rem; margin: 0 0 1rem; }
.illus .pp-bg { fill: var(--illus-bg); }
.illus .pp-ln, .illus .pp-ink { fill: var(--illus-line); }
.illus .pp-t1 { fill: var(--illus-t1); } .illus .pp-t2 { fill: var(--illus-t2); }
.illus .pp-t3 { fill: var(--illus-t3); } .illus .pp-t4 { fill: var(--illus-t4); }
.illus .pp-c1 { fill: var(--illus-c1); } .illus .pp-c2 { fill: var(--illus-c2); }
.illus .pp-coat { fill: var(--illus-coat); } .illus .pp-p1 { fill: var(--illus-p1); }
.illus .pp-p2 { fill: var(--illus-p2); } .illus .pp-screen { fill: var(--illus-screen); }
.illus .pp-ls { stroke: var(--illus-line); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
@media print { .illus-wrap { display: none; } }
/* My record and the guidelines (demo, synthetic data) */
.rd-banner { margin: 0; padding: .6rem 16px; background: var(--accent-2); color: var(--bg); text-align: center; font-weight: 700; font-size: .9rem; }
.rd-tag { margin: 0 0 .4rem; font-size: .9rem; font-weight: 700; color: var(--accent-2); }
.rd-pending { margin: .6rem 0 0; padding: .5rem .8rem; border-radius: 10px; background: var(--tint); color: var(--ink); font-size: .9rem; font-weight: 600; }
.rd-view { padding: .8rem 1rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.rd-patients, .rd-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; }
.rd-item { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; overflow-wrap: anywhere; }
.rd-item h2, .rd-item h3 { margin: 0 0 .4rem; }
.rd-links { font-weight: 700; }
.rd-display { color: var(--muted); }
.rd-meter { margin: .8rem 0; }
.rd-meter figcaption { margin-bottom: .2rem; }
.rd-meter svg { width: 100%; max-width: 30rem; height: auto; display: block; }
.rd-axis { stroke: var(--field-line); stroke-width: 2; }
.rd-band { fill: var(--tint); stroke: var(--accent); stroke-width: 2; }
.rd-num { fill: var(--muted); font-size: 13px; font-family: var(--font); }
.rd-dot { stroke: var(--surface); stroke-width: 3; }
.rd-dot.in { fill: var(--accent); }
.rd-dot.out { fill: var(--accent-2); }
.rd-member { margin: .2rem 0 0; font-size: .9rem; color: var(--muted); }
.rd-summary { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.rd-summary p { margin: .25rem 0; }
.rd-cite, .rd-url, .rd-status { color: var(--muted); font-size: .9rem; }
.rd-gap { color: var(--muted); font-style: italic; }
.rd-q { margin: 0; font-weight: 600; }
.rd-quiet summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; }
.gl-label { margin: .2rem 0 0; font-weight: 700; font-size: .9rem; color: var(--muted); }
.rd-draft { margin: .6rem 0; padding: .55rem .8rem; border-radius: 10px; background: var(--wait-bg, #fff2d6); color: var(--wait, #7a4b00); font-weight: 700; font-size: .9rem; }
.rd-line { margin: 0; font-weight: 700; color: var(--muted); }
.rd-curve { width: 100%; max-width: 30rem; height: auto; display: block; margin: .4rem 0; }
.rd-s { fill: none; stroke: var(--accent); stroke-width: 3; }
.rd-grid { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 4; }
.rd-cut { stroke: var(--accent-2); stroke-width: 2; stroke-dasharray: 5 4; }
.rd-you { fill: var(--accent-2); stroke: var(--surface); stroke-width: 3; }
.rd-tagline { margin: 0 0 .3rem; font-size: .9rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.rd-quote { margin: .3rem 0; padding: .5rem .8rem; border-left: 4px solid var(--line); color: var(--ink); }
/* What the guidelines say */
.gl-pending { margin: .5rem 0 0; padding: .45rem .7rem; border-radius: 8px; background: var(--tint); color: var(--ink); font-size: .9rem; font-weight: 600; }
.gl-topics, .gl-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .9rem; }
.gl-item { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; overflow-wrap: anywhere; }
.gl-topic { display: grid; gap: .25rem; font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.gl-topic strong { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.gl-soon { font-size: .9rem; color: var(--muted); font-weight: 600; }
.gl-soon-panel { padding: .8rem 1rem; border-left: 6px solid var(--accent); background: var(--surface); border-radius: var(--radius); }
.gl-site { color: var(--muted); font-size: .9rem; }
.gl-rule h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.gl-facts { margin: 0; display: grid; gap: .45rem; }
.gl-facts dt { font-weight: 700; font-size: .9rem; color: var(--muted); }
.gl-facts dd { margin: 0; }
.gl-facts code { white-space: pre-wrap; font-size: .9rem; }
.gl-entry { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.gl-entry p { margin: .2rem 0; }
.gl-key, .gl-url { color: var(--muted); font-size: .9rem; }
.gl-gap { margin-top: .7rem; color: var(--muted); font-style: italic; }
.gl-status { margin: .6rem 0 0; font-size: .9rem; color: var(--muted); }
.gl-question p:first-child { margin: 0; font-weight: 600; }
@media (min-width: 56rem) { .gl-cols { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.5rem; align-items: start; } }
.gl-label { margin: .2rem 0 0; font-weight: 700; font-size: .9rem; color: var(--muted); }
.gl-summary { margin: .2rem 0 .4rem; }

/* Polish pass (2026-10-08) */
/* Narrow screens: the four header links sit in an even 2 x 2 grid instead of
   leaving one link alone on a second row. Only the four-link public header:
   with accounts closed it has three links, which fit on one row. */
@media (max-width: 26rem) { nav.topnav:has(> a:nth-child(4)) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } }
/* Medicine facts: the label always sits above its value, so long and short
   values line up the same way. */
.facts div { display: grid; gap: .05rem; }
.facts dt { font-size: .9rem; color: var(--muted); }
.facts dt::after { content: none; }
/* Every action on a medicine card is a full 44px tap target. */
.med .actions { gap: .25rem 1.25rem; }
.med .actions a, .med .actions .link-button { min-height: 2.75rem; display: inline-flex; align-items: center; }
/* Guidelines topics: the whole row is a 44px target. */
.gl-topic { min-height: 2.75rem; align-content: center; }
/* A card's icon heading does not add a section's top margin inside the card. */
.card > .h-icon:first-child { margin-top: 0; }

/* Navigation polish: on phones the app's tabs sit in an even two-column grid
   instead of ragged rows, and the public nav marks the page you are on. */
@media (max-width: 30rem) {
  .app-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .app-nav a { justify-content: center; text-align: center; }
  .app-nav a:last-child:nth-child(odd) { grid-column: span 2; }
}
.topnav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .3em; }

/* PENDING CLINICIAN REVIEW: the marker on every engine screen. */
.pcr-banner { display: grid; gap: .25rem; margin: 1rem 0; padding: .8rem 1rem; border: 3px solid var(--ink); border-radius: 12px; background: var(--surface); }
.pcr-tag { font-weight: 800; letter-spacing: .06em; font-size: 1rem; }

/* Guideline items in two versions: for you, and for your doctor. Side by side on wide screens. */
.gl-pair { display: grid; gap: .75rem; }
@media (min-width: 46rem) { .gl-pair { grid-template-columns: 1fr 1fr; } }
.gl-side { min-width: 0; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--line); }
.gl-side h4 { margin: 0 0 .4rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; }
.gl-you { background: var(--bg); }
.gl-doc { background: var(--surface); }
.gl-looks { display: grid; gap: .2rem; margin: 0 0 .6rem; }
.gl-looks span { display: block; padding-left: 1rem; text-indent: -1rem; }
.gl-looks span::before { content: "\2022\00a0\00a0"; }
.gl-q { font-weight: 700; margin: 0; }

/* My guidelines: the items the engine did not list, folded into one list. */
.mg-more { margin: .5rem 0 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mg-more > summary { cursor: pointer; padding: .8rem 1rem; font-weight: 700; min-height: 2.75rem; }
.mg-quiet-list { list-style: none; margin: 0; padding: 0 1rem .8rem; display: grid; gap: .6rem; }
.mg-quiet { display: grid; gap: .1rem; padding-top: .6rem; border-top: 1px solid var(--line); }

/* Visit sheet: the engine's cited questions. */
.sheet-gl { margin: 1rem 0; }
.sheet-cite { display: block; font-size: .9rem; color: var(--muted); }

/* Print: on the visit sheet (printed and handed to the doctor) a heading stays with what
   follows it, and a question, a table row or the review banner is never split across pages.
   Scoped to the sheet: other pages keep their pagination. */
@media print {
  .sheet h2 { break-after: avoid; page-break-after: avoid; }
  .questions li, .sheet-table tr, .pcr-banner { break-inside: avoid; page-break-inside: avoid; }
}
/* Reflow at 320 CSS pixels (WCAG 1.4.10): a word too long for its line breaks instead of
   pushing the page sideways (an email address, a long medicine name, a word in a heading),
   and the clinic hero art shrinks with its column. On narrow screens only, the visit sheet
   has less padding, its table text drops to the 18px floor and may break inside a word, and
   its blank line stops at the edge while the label "My own question:" still wraps. */
.hero > * { min-width: 0; }
body { overflow-wrap: break-word; }
.facts dd, .h-icon, .med { overflow-wrap: anywhere; }
.med-list > li { min-width: 0; }
@media screen and (max-width: 24rem) {
  .sheet { padding: 1rem .75rem; }
  .sheet-table { font-size: .9rem; }  /* the 18px floor */
  .sheet-table th, .sheet-table td { overflow-wrap: anywhere; }
  .questions li.blank { overflow: hidden; overflow-wrap: normal; }
}
/* Patient cards: the page's own padding (from the screen rule .wrap { padding-block }, which
   comes after the print rule above) pushed four cards onto a second, blank Letter page. */
@media print { .wrap.cards-page { padding: 0; } }
/* Print: the screen rule .wrap { padding-block } above comes after the print rule .wrap { padding: 0 },
   so in print it added 1.75rem above the first printed page and 3.5rem below the last, enough to push
   a few printouts onto a trailing blank page. Print has no page padding; @page sets the margins. */
@media print { .wrap { padding: 0; } }
/* Dark mode: the danger button's background is the light coral --error, so its text is the dark
   page colour (white was 2.0:1, under the 3:1 WCAG minimum for this large bold text). */
@media (prefers-color-scheme: dark) { .danger { color: var(--bg); } }