/* P:HC — print stylesheet. Linked with media="print", so the screen is untouched by
   construction. Covers all four routes: the main page, /how-we-help, /atlas, /papers.

   Shape of the rules below:
     1. page box + ink
     2. what disappears (chrome, decoration, doors)
     3. what unfolds (rails, sheets, registers)
     4. typography at a reading measure
     5. links print their URLs
     6. the running footer, and /papers' running header
*/

/* ── 1 · page box and ink ─────────────────────────────────────────────── */
@page {
  /* Top and bottom margins are deliberately generous: the running header and footer live
     inside them (see §6), so the text column never shares space with either band. */
  margin: 26mm 16mm 30mm;
}
@page {
  /* Honoured by print engines that implement margin boxes; ignored elsewhere,
     where the browser's own footer supplies the page number. */
  @bottom-center { content: "Page " counter(page); font-size: 9pt; color: #444; }
}

html, body {
  background: #fff !important;
  color: #000 !important;
}
body {
  margin: 0 !important;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 10.5pt;
  line-height: 1.5;
}
* {
  /* Flat ink: no tints, no shadows, no rotation left over from the screen layout. */
  color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
  backdrop-filter: none !important;
}
*:not([role="img"]) { background-image: none !important; }
[style*="background"] { background-color: transparent !important; }

/* ── 2 · what disappears ──────────────────────────────────────────────── */
header, footer, nav,
[data-no-print],
.phc-skip,
#mm-strip, #chart-frame, #cam-readout,
[data-mm], [data-mm-kind],
[data-float], [data-dot], [data-anchor], [data-drawer],
[data-rail-live],
[data-toc-item],
[data-goal-video], video, iframe, canvas,
button:not([data-codex]), [role="button"],
input, select, textarea, form,
[aria-hidden="true"][style*="position: absolute"],
[aria-hidden="true"][style*="position:absolute"],
[data-print-hide] {
  display: none !important;
}
/* Decorative field layers: mesh, tessellation, seams, veins, war-room dots.
   They are ref-mounted empty divs on screen, so they are matched by hook, not by tag. */
[data-mesh], [data-tess], [data-veins], [data-seam],
[data-print-decor] {
  display: none !important;
}
/* Concept buttons sit inside sentences on How We Help — hiding them would delete words.
   On paper they are simply the words they always were. */
button[data-codex] {
  display: inline !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  text-decoration: none !important;
}

/* Anything positioned off-canvas or sized to the viewport is a screen device.
   NOTE: inline styles arrive from React as "position: absolute" — with the space. Every
   selector here matches both spellings so none of them can silently match nothing. */
[style*="position: fixed"],
[style*="position:fixed"] { display: none !important; }

/* Decorative absolutes: the shape imagery (circles, rectangles, curved lines) is layered
   behind the screen composition and has nothing to say on paper. Everything else that was
   absolutely positioned rejoins the single column instead of floating over the text. */
img[style*="position: absolute"],
img[style*="position:absolute"],
svg[style*="position: absolute"],
span[aria-hidden="true"][style*="position: absolute"] {
  display: none !important;
}
img, span, p, a, svg, [style*="position: absolute"], [style*="position:absolute"] {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}
img { max-width: 100% !important; height: auto !important; }
[style*="100vh"], [style*="100dvh"] { min-height: 0 !important; height: auto !important; }
[style*="overflow:hidden"], [style*="overflow: hidden"] { overflow: visible !important; }

/* The philosophy run: empty colour frames are decoration, but the artwork frames carry the
   picture as a background-image and would otherwise print as white boxes. */
#philosophy div:empty:not([role="img"]),
#philosophy [aria-hidden="true"]:empty {
  display: none !important;
}
#philosophy [role="img"] {
  display: block !important;
  width: 55% !important;
  max-width: 110mm !important;
  height: 60mm !important;
  margin: 6pt 0 10pt !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  aspect-ratio: auto !important;
  break-inside: avoid;
}

/* A section whose only content was a form prints as an orphan heading — drop it. */
#contact { display: none !important; }

/* Flat-colour decorative tiles (a link that is a coloured rectangle with no text) and the
   aspect-ratio wrappers holding them: nothing to print once the colour is stripped. */
[style*="aspect-ratio"]:not([role="img"]) { aspect-ratio: auto !important; }
#about a[style*="position: absolute"]:empty,
a[style*="will-change"]:empty {
  display: none !important;
}

/* Unfilled image slots are build-time drop targets, not content. Filled ones print. */
image-slot:not([data-filled]) { display: none !important; }

/* ── 3 · what unfolds ─────────────────────────────────────────────────── */
/* Screen-reader-only content becomes real print content where it carries the data
   (the Atlas transparency register, chiefly). */
.phc-sr {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  white-space: normal !important;
}
/* The register: the map is a screen instrument; on paper it is a table. */
#transparency [data-tx], #transparency svg { display: none !important; }
#transparency ul.phc-sr {
  display: table !important;
  width: 100%;
  border-collapse: collapse;
  list-style: none;
  padding: 0;
  margin: 8pt 0 0;
}
#transparency ul.phc-sr li {
  display: table-row;
}
#transparency ul.phc-sr li::before {
  content: "";
}
#transparency ul.phc-sr li {
  border-bottom: 0.5pt solid #999;
  font-size: 9.5pt;
  line-height: 1.45;
}

/* Horizontal question rails print as a sequence: every question and answer, in order.
   Scoped off nav so the paper's contents rail — also [data-rail] — stays hidden. */
[data-rail]:not(nav) {
  display: block !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}
[data-rail]:not(nav) > *,
[data-card] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  scroll-snap-align: none !important;
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 10pt !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0.5pt solid #bbb !important;
  padding-bottom: 8pt !important;
}

/* Print-only sheets: the goal popups and the codex, expanded. */
[data-print-sheet],
[data-print-only] {
  display: block !important;
}
[data-print-goal], [data-print-codex] {
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 14pt;
  padding: 0 0 10pt;
  border-bottom: 0.5pt solid #bbb;
}
[data-print-art] {
  display: block;
  width: 100%;
  height: 34mm;
  margin: 4pt 0 6pt;
}
[data-print-art] path { stroke: #111 !important; }
[data-print-kicker] {
  margin: 0;
  font-family: 'Rubik', ui-sans-serif, system-ui, sans-serif;
  font-size: 8pt;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #444 !important;
}
[data-print-points] { margin: 4pt 0 0; padding-left: 14pt; }
[data-print-points] li { margin: 0 0 2pt; font-size: 10pt; }

/* ── 4 · one column at a reading measure ──────────────────────────────── */
main, [data-reader], [data-column], section, article, div {
  position: static !important;
  float: none !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  inset: auto !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
  columns: auto !important;
}
main, [data-column] { max-width: 34em !important; }

h1, h2, h3, h4 {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.01em;
  break-after: avoid;
  page-break-after: avoid;
  text-wrap: pretty;
}
h1 { font-size: 20pt; line-height: 1.12; margin: 0 0 6pt; }
h2, [data-print-h2] { font-size: 14pt; line-height: 1.18; margin: 14pt 0 5pt; }
h3, [data-print-h3] { font-size: 11.5pt; line-height: 1.25; margin: 10pt 0 3pt; }
p, li { orphans: 3; widows: 3; }
p { margin: 0 0 6pt; max-width: 34em; }
img, svg { max-width: 100% !important; height: auto; break-inside: avoid; }
section { break-before: auto; }

/* ── 5 · links print their destination ────────────────────────────────── */
a { color: #000 !important; text-decoration: none !important; }
a[href^="http"]::after,
a[href^="/"]::after {
  content: " (" attr(href) ")";
  font-size: 8.5pt;
  color: #444 !important;
  word-break: break-all;
}
/* In-page anchors and local page files would print as noise. */
a[href^="#"]::after { content: ""; }
a[href$=".dc.html"]::after { content: ""; }

/* ── 6 · running footer, and the paper's running header ───────────────── */
[data-print-footer] {
  display: block !important;
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: -14mm !important;
  top: auto !important;
  padding-top: 3pt;
  border-top: 0.5pt solid #999;
  font-family: 'Rubik', ui-sans-serif, system-ui, sans-serif;
  font-size: 8pt;
  letter-spacing: .04em;
  color: #333 !important;
}
[data-print-header] {
  display: block !important;
  position: fixed !important;
  top: -12mm !important;
  bottom: auto !important;
  left: 0;
  right: 0;
  padding-bottom: 3pt;
  border-bottom: 0.5pt solid #999;
  font-family: 'Rubik', ui-sans-serif, system-ui, sans-serif;
  font-size: 8pt;
  letter-spacing: .04em;
  color: #333 !important;
}
/* The bands repeat on every sheet from inside the page margin, so no flow offset is
   needed — and none may be applied, or the first page would start twice as low. */