/* Print styles (WI-101). Print is a first-class output (PLAN.md §3):
   patients print pages for appointments and caregivers. Goal: calm black-on-
   white text, no site chrome, and visible URLs for anything worth following up. */

@page {
  margin: 2cm;
}

/* No interactive chrome on paper. */
.skip-link,
.site-nav,
.helpline-band,
.digest-signup,
button,
input[type="submit"],
form {
  display: none !important;
}

/* ...but a glossary term is a WORD, not a control. It is rendered as a
   <button> so the definition can pop over without JavaScript (WI-105), and the
   blanket `button { display: none }` above therefore DELETED it from every
   printed page: "if they have a rescue medicine" printed as "if they have a".
   Found on the WI-559 seizure sheet, which people print for the fridge, where
   the vanishing words were "rescue medicine", "seizure action plan" and
   "glioma". The definition panel stays hidden — a popover cannot be opened on
   paper, and printing all of them would bury the page. */
button.term {
  display: inline !important;
  color: #000 !important;
  text-decoration: none !important;
}

/* Flatten the Clear & Kind surfaces: no tint, no shadow, ink on white.
   .door--primary is white-on-accent on screen — must not print white-on-white. */
.hub,
.door,
.door--primary,
.card,
.means-block,
.trial-status {
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
}

.hub {
  padding: 0 !important;
}

.door,
.card,
.means-block,
.trial-status {
  border: 1pt solid #000 !important;
}

.door--primary span.sub,
.door--primary .door__cta,
.door span.sub,
.door__cta,
.card__meta,
.card__hook {
  color: #000 !important;
}

/* The badge must stay readable on paper: printers strip background colors by
   default, which would print every dot-meter as empty — "Tested in people,
   5 of 5" and "lab cells, 1 of 5" would look identical. Force real ink. */
.badge {
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}

.step {
  border-color: #000 !important;
}

.step--on {
  background: #000 !important;
  print-color-adjust: exact;
}

.badge__glyph {
  border-color: #000 !important;
}

/* The journey path has the same problem as the dot-meter, and it matters more
   because it is now the ONLY evidence indicator a reader sees. Printers strip
   backgrounds by default, so without this every dot prints as an empty circle
   and "Tested in people" is indistinguishable from "Lab cells" on paper — on
   the page a patient carries into an appointment. Outline the dots, fill the
   reached ones with real ink, and ring the current one so it is still found by
   shape rather than colour. */
.journey__dot {
  border: 1.5px solid #000 !important;
  background: #fff !important;
}

.journey__step.is-done .journey__dot {
  background: #000 !important;
  print-color-adjust: exact;
}

.journey__step.is-current .journey__dot {
  background: #000 !important;
  border-color: #fff !important;
  box-shadow: none !important;
  outline: 2px solid #000;
  outline-offset: 2px;
  print-color-adjust: exact;
}

/* The connectors carry the "how far along the road" reading. Without ink they
   vanish and the dots become four unrelated circles. */
.journey__step::before {
  background: #999 !important;
  print-color-adjust: exact;
}

.journey__step.is-done::before,
.journey__step.is-current::before {
  background: #000 !important;
  print-color-adjust: exact;
}

.journey__label {
  color: #000 !important;
}

.stage-note {
  background: #fff !important;
  border-inline-start-color: #000 !important;
}

.stage-note__glyph {
  border-color: #000 !important;
  color: #000 !important;
}

.stage-note__text strong,
.stage-note__text span {
  color: #000 !important;
}

/* The card photo is decoration that costs a patient toner and tells them
   nothing — but the journey path now lives INSIDE the hero, so hiding the
   whole element would delete the evidence indicator from every printed card.
   Drop the picture, keep the box, and flatten the dark plate to plain ink. */
.card-hero {
  background-image: none !important;
  background-color: #fff !important;
  min-height: 0 !important;
  margin: 0 0 8pt !important;
}

.card-hero__scrim {
  display: none !important;
}

.card-hero__indicator {
  background: #fff !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* The overlay variant is light-on-dark on screen. On paper the plate is gone,
   so those colours would print white-on-white — invert them back to ink. */
.journey--over .journey__label,
.journey--over .journey__step.is-current .journey__label,
.stage-note--over .stage-note__text strong,
.stage-note--over .stage-note__text span {
  color: #000 !important;
}

.stage-note--over {
  border-inline-start-color: #000 !important;
}

.stage-note--over .stage-note__glyph {
  border-color: #000 !important;
  color: #000 !important;
}

.tag {
  background: #fff !important;
  color: #000 !important;
}

body {
  color: #000;
  background: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12pt;
  line-height: 1.5;
}

.container {
  max-width: none;
  padding: 0;
}

.site-header {
  background: none;
  border-bottom: 2pt solid #000;
  margin-bottom: 12pt;
}

.site-name {
  color: #000;
  text-decoration: none;
}

/* Fixed points, not rem: a patient printing this for an appointment should get
   a masthead, not a banner. Browsers drop background images when "print
   backgrounds" is off, but an <img> still prints, so the logo survives. */
.site-name img {
  height: 28pt;
  width: auto;
}

/* Decoration is ink nobody asked for: the masthead above already identifies
   the page, and a patient printing this for an appointment wants the words.
   The "See all" row is a dead control on paper. */
.hero-band__watermark,
.wave-edge,
.wave-rule,
.see-all-row {
  display: none !important;
}

/* The hero band is a solid navy block on screen. On paper it would either eat
   a toner cartridge or (with backgrounds off) print white-on-white text. */
.hero-band {
  background: #fff !important;
  color: #000 !important;
  padding: 0 !important;
}

.hero-band__disclosure,
.hero-band__disclosure a {
  color: #000 !important;
}

/* The lockup in the band is drawn in light inks for a dark background. */
.hero-band h1 img {
  filter: invert(1);
  max-width: 3in;
}

.door {
  border: 1pt solid #b9c4cd !important;
  background: none !important;
  color: #000 !important;
}

h1, h2, h3, h4 {
  break-after: avoid;
  color: #000;
}

/* Lists must stay breakable — a feed page's <ul> can outgrow a sheet. */
p, blockquote, li {
  break-inside: avoid;
  orphans: 3;
  widows: 3;
}

a {
  color: #000;
}

/* Show where external links go — a printout can't be tapped. */
a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 10pt;
  word-break: break-all;
}

.site-footer {
  border-top: 1pt solid #000;
  margin-top: 12pt;
  color: #000;
}

/* The reader-choice gate (WI-503). The printed page reflects what the reader
   CHOSE: a gate left closed stays closed on paper. Forcing it open would hand
   the outlook section to someone who explicitly declined it, which is the
   entire point of the component. */
.reader-gate {
  background: #fff !important;
  color: #000 !important;
  border: 1pt solid #000 !important;
}

/* Only worth keeping whole while it is closed — that is a short warning plus
   one label. An OPEN gate can be a page of prognosis, and an unbreakable
   block that tall prints a mostly-blank sheet or gets clipped. */
.reader-gate:not(:has([open])) {
  break-inside: avoid;
}

/* The toggle is a control, and on paper it cannot be operated. Closed, its
   words still earn their space: they tell the reader there is a section here
   they did not open. Open, they are an instruction already carried out sitting
   directly above the thing it offers to reveal — so it goes. The
   "What might happen over time" heading is outside the gate, so the printed
   section keeps its label either way. */
.reader-gate__toggle {
  border: 0 !important;
  background: none !important;
  color: #000 !important;
  padding-inline: 0 !important;
  min-block-size: 0 !important;
}

.reader-gate__disclosure[open] .reader-gate__toggle {
  display: none !important;
}

.reader-gate__body {
  border-block-start-color: #000 !important;
}