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

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