/* 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;
}

/* A figure on a curated page (WI-561). DECIDED, then verified by printing an
   actual PDF — WI-560's lesson is that print bugs are invisible everywhere
   except on paper, and the one it found had been shipping for 59 work items.

   THREE DECISIONS, each against a failure the PDF showed or would have:

   1. THE PICTURE PRINTS. It is content, not chrome — an explanatory diagram is
      often the reason a page was printed at all. (Only the card-hero BACKDROP
      is dropped, further up this file: that one is decoration and costs toner.)
      Note `display` is not touched here, which is the WI-560 trap: the blanket
      `button { display: none }` is what deleted glossary words from paper.
   2. IT IS CAPPED IN INCHES, not in viewport units. `max-block-size: 70vh` on
      screen has no meaning on paper, where the height is a sheet; an uncapped
      1200x1600 diagram prints a page and a half tall and takes the caption
      with it onto the next sheet.
   3. THE CAPTION AND CREDIT STAY WITH THE PICTURE. `break-inside: avoid` on
      the <figure> is what stops a page break landing between a diagram and
      the words explaining it — and the cap above is what makes that safe: an
      unbreakable element taller than a sheet is how you get a blank page. */
.figure {
  break-inside: avoid;
  margin: 10pt 0;
}

/* `.figure__image` and not `figure img`, with !important, and the PDF is how
   we know: one class beats two element names, so site.css's screen rule
   (`max-block-size: 70vh`) won the cascade and the inch cap below did
   nothing. The picture measured 467pt tall in the print layout with this rule
   loaded and "correct". A print override written at a lower specificity than
   the screen rule it is overriding is the same silent class of bug as WI-560's
   vanishing glossary terms — which is why the rest of this file is !important
   throughout. */
/* `inline-size: auto` is NOT repeated here, and the break harness is why. It
   was, and removing it changed nothing: site.css carries no media attribute, so
   its `inline-size: auto` already applies on paper, and no single edit to this
   file could make the squash come back. Two declarations of one decision, with
   the mutation that should have proved this one surviving because the other one
   held — which is a guard that cannot be shown to work. The decision lives in
   site.css, where the screen rule it has to beat lives; only the values that
   genuinely differ on paper are restated here. */
.figure__image {
  max-inline-size: 100% !important;
  max-block-size: 4in !important;
  height: auto !important;
}

/* Ink, not grey — a caption at 60% opacity photocopies to nothing. */
.figure__caption,
.figure__text,
.figure__credit {
  color: #000 !important;
}

.figure__credit {
  font-size: 9pt;
}