/* ============================================================
   Orbital Soup · Print stylesheet (v0.21)

   Linked on every page with media="print", after the screen styles,
   so it costs nothing on screen and holds every print rule in one
   place. Prints are full color, as on screen: Night mode prints dark
   pages edge to edge and Day mode prints the archive's paper stock.
   The theme the visitor is viewing is the theme that prints.

   Two kinds of print share these rules.
     Reading pages  The page itself, as a letterhead document with a
                    running header and page numbers.
     Printouts      One item alone on its sheet (a staff ID, a
                    certificate, a memo, a receipt, a specimen card, the
                    map, a poster). js/main.js section 29 builds the item
                    into #print-sheet and marks <html data-print="kind">.

   Sizing. Every layout fits the area that A4 (210 x 297 mm) and US
   Letter (215.9 x 279.4 mm) share, inside the margins below: 186 x 247
   mm portrait and 255 x 186 mm landscape. Sizes are in millimeters and
   points; viewport units are avoided because in print they follow the
   first page, not the current one.

   Contents
     1. Pages: margins, backgrounds, running header and footer
     2. Color and theme
     3. Screen-only chrome
     4. Letterhead and colophon
     5. Reading pages
     6. Printouts: 6a staff ID, 6b certificate, 6c memo, 6d receipt,
        6e pebble specimen, 6f station map, 6g poster or image
     7. Field Manual
   ============================================================ */

/* 1. PAGES -------------------------------------------------------- */
/* Running header and footer use page-margin boxes. Browsers without
   them (Firefox at the time of writing) simply print without them. */
@page {
  margin: 16mm 14mm;
  background: #101820;
  @top-left { content: "TPS ARCHIVE \00B7  ORBITALSOUP.ORG"; color: #c69742; font: 700 7.5pt "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.14em; }
  @top-right { content: "OBSERVE. DOCUMENT. CARE."; color: #c69742; font: 700 7.5pt "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.14em; }
  @bottom-right { content: "PAGE " counter(page) " OF " counter(pages); color: #c69742; font: 700 7.5pt "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.14em; }
}
@page paper { background: #f1e6cd; }
@page manual { @top-left { content: "TPS FIELD MANUAL \00B7  ORBITALSOUP.ORG"; } }
@page manual-day { background: #f1e6cd; @top-left { content: "TPS FIELD MANUAL \00B7  ORBITALSOUP.ORG"; } }
@page manual:first { @top-left { content: none; } @top-right { content: none; } @bottom-right { content: none; } }
@page manual-day:first { @top-left { content: none; } @top-right { content: none; } @bottom-right { content: none; } }
/* printouts: no running header, slightly tighter margins */
@page sheet { margin: 12mm; @top-left { content: none; } @top-right { content: none; } @bottom-right { content: none; } }
@page sheet-day { margin: 12mm; background: #f1e6cd; @top-left { content: none; } @top-right { content: none; } @bottom-right { content: none; } }
@page wide { size: landscape; margin: 12mm; @top-left { content: none; } @top-right { content: none; } @bottom-right { content: none; } }
@page wide-day { size: landscape; margin: 12mm; background: #f1e6cd; @top-left { content: none; } @top-right { content: none; } @bottom-right { content: none; } }

body.theme-day { page: paper; }
body.is-manual { page: manual; }
body.is-manual.theme-day { page: manual-day; }
html[data-print] body { page: sheet; }
html[data-print] body.theme-day { page: sheet-day; }
html[data-print-orient="landscape"] body { page: wide; }
html[data-print-orient="landscape"] body.theme-day { page: wide-day; }

/* 2. COLOR AND THEME ---------------------------------------------- */
/* exact: print backgrounds and colors even when the browser's
   "background graphics" option is off */
html, body, * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
html, body { margin: 0 !important; background: #101820 !important; }
html:has(> body.theme-day), body.theme-day { background: #f1e6cd !important; }
body { font-size: 11pt; line-height: 1.45; }

/* 3. SCREEN-ONLY CHROME -------------------------------------------- */
body::before, #starfield, .sidebar, .mobile-bar, .nav-scrim, .site-footer,
.ambient-sardine, .egg-toast, .egg-seal, .egg-penguin, .egg-fish, .egg-soup, .egg-ladle, .egg-gold-sardine,
.lightbox, .jukebox, .jb-disc, .holiday-banner, .secret-stamp, .secret-chip, .wall-modal,
.terminal-strip, .terminal-nav, .chapter-pager, .track-actions, .track-play, .suno-link,
.button, button, .key-row, input, select, textarea, audio, video, iframe,
.board-head, .status-board, .soup-widget, .corkboard, .gallery, .slot, .album-area, .album-cover,
.card-badge, .lightbox-nav, .fc-decode, .h3-stage, .h3-touch, .h3-hud, .wp-dl,
.lf-shelf, .lf-claim, .lf-reward, .log-form, .wall-compose, .smap-wrap, .smap-detail,
#pebble-classifier, #memo-generator, #vending-tool, #orb-tool, .orb-stage, .status-stamp { display: none !important; }

.layout, main { display: block !important; }
main { min-width: 0 !important; }
section, .hero { padding: 0 0 8mm !important; border: 0 !important; }
section::before { display: none !important; }
* { animation: none !important; transition: none !important; }

/* 4. LETTERHEAD AND COLOPHON --------------------------------------- */
/* Injected by js/main.js section 29 at the start and end of <main>. */
.print-letterhead {
  display: grid !important;
  grid-template-columns: 15mm 1fr auto;
  gap: 4mm;
  align-items: center;
  margin: 0 0 7mm;
  padding: 0 0 4mm;
  border-bottom: 0.6mm solid #c69742;
  break-inside: avoid;
}
.print-letterhead img { width: 15mm; height: 15mm; border-radius: 50%; }
.print-letterhead .pl-org b { display: block; font-family: var(--font-display); font-size: 15pt; font-weight: 400; letter-spacing: 0.02em; line-height: 1.05; }
.print-letterhead .pl-org span { display: block; color: #c69742; font: 800 7.5pt var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; }
.print-letterhead dl { display: grid; grid-template-columns: auto auto; gap: 0.6mm 3mm; margin: 0; text-align: left; }
.print-letterhead dt { color: #c69742; font: 800 6.5pt var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; align-self: center; }
.print-letterhead dd { margin: 0; font: 700 8pt var(--font-label); letter-spacing: 0.04em; }
.print-colophon {
  display: block !important;
  margin: 8mm 0 0;
  padding: 3mm 0 0;
  border-top: 0.3mm solid rgba(198, 151, 66, 0.7);
  color: #c69742;
  font: 700 7.5pt var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  break-inside: avoid;
}
html[data-print] .print-letterhead, html[data-print] .print-colophon { display: none !important; }
/* the Field Manual opens with its own cover instead */
body.is-manual .print-letterhead, body.is-manual .print-colophon { display: none !important; }

/* 5. READING PAGES -------------------------------------------------- */
h1 { font-size: 30pt !important; line-height: 0.95 !important; margin: 0 0 3mm !important; }
h2 { font-size: 21pt !important; }
h3 { font-size: 12.5pt !important; }
h1, h2, h3, .subhead { break-after: avoid; text-shadow: none !important; }
p, li { orphans: 3; widows: 3; }
.lede { font-size: 12.5pt !important; }
.kicker { font-size: 8.5pt !important; }
a { text-decoration: none !important; }
img, svg, figure, .grid article, .grid a.card, .stat-card, .notice-list li, .tl-item, .paper-panel,
.lf-list li, .chapter-illo, .forecast-card, .log-entry, .hc-list li, .mini-id, .specimen { break-inside: avoid; }
.grid { grid-template-columns: repeat(2, 1fr) !important; gap: 4mm !important; }
.grid a.card .more { display: none !important; }
.stat-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 3mm !important; }
.paper-panel { transform: none !important; box-shadow: none !important; }
.chapter-illo { float: right; margin: 0 0 4mm 6mm; }
.chapter-illo img { width: 32mm !important; height: auto !important; }
/* track pages: art beside the title, lyrics set in two columns */
.track-hero { display: grid !important; grid-template-columns: 1fr 42mm !important; gap: 6mm !important; }
.track-hero .art { order: 2; }
.track-hero .art img { width: 42mm !important; height: auto !important; border-radius: 2mm; }
.lyrics { column-count: 2; column-gap: 8mm; box-shadow: none !important; font-size: 10.5pt; }
.lyrics p { break-inside: avoid; }
/* album page: one track never splits across pages */
.track-entry { break-inside: avoid; }
/* history: the timeline keeps its rule and dots */
.timeline { margin-left: 2mm !important; }
/* holiday calendar: two columns of observances */
.hc-list { columns: 2; column-gap: 6mm; }
.hc-list li { break-inside: avoid; }
/* the guestbook prints its stones; the form does not */
.log-entries { gap: 3mm !important; }

/* 6. PRINTOUTS ------------------------------------------------------ */
/* everything but the sheet is hidden; the shared pebble filter stays,
   since the specimen card's stone refers to it */
html[data-print] body > *:not(#print-sheet):not(#peb-defs) { display: none !important; }
#print-sheet { display: block !important; color: var(--cream); font-size: 11pt; }
body.theme-day #print-sheet { color: #1d2a2e; }
.ps-kicker { margin: 0; color: #c69742; font: 800 8pt var(--font-label); letter-spacing: 0.18em; text-align: center; text-transform: uppercase; }
.ps-title { margin: 1mm 0 0 !important; font-family: var(--font-display); font-size: 20pt !important; font-weight: 400; letter-spacing: 0.02em; text-align: center; }
.ps-note { margin: 5mm auto 0; max-width: 150mm; color: #c69742; font: 700 8.5pt var(--font-label); letter-spacing: 0.06em; text-align: center; }
.ps-foot { margin: 6mm 0 0; color: #c69742; font: 700 7.5pt var(--font-label); letter-spacing: 0.14em; text-align: center; text-transform: uppercase; }

/* 6a. Staff ID: ISO/IEC 7810 ID-1, 85.6 x 53.98 mm, front and back side
   by side. Folding along the shared edge puts the back the right way up
   on the reverse, so no mirroring is needed. */
.ps-id .id-pair { position: relative; display: flex; justify-content: center; width: 171.2mm; margin: 16mm auto 12mm; }
.ps-id .id-pair img { display: block; width: 85.6mm !important; height: 53.98mm !important; }
.ps-id .fold { position: absolute; top: -7mm; bottom: -7mm; left: 85.6mm; border-left: 0.3mm dashed #c69742; }
.ps-id .fold::before { content: "FOLD"; position: absolute; top: -4mm; left: -3mm; color: #c69742; font: 800 6pt var(--font-label); letter-spacing: 0.14em; }
.ps-id .cm { position: absolute; width: 5mm; height: 5mm; border-color: #c69742; border-style: solid; border-width: 0; }
.ps-id .cm.tl { left: -7mm; top: -7mm; border-right-width: 0.25mm; border-bottom-width: 0.25mm; }
.ps-id .cm.tr { right: -7mm; top: -7mm; border-left-width: 0.25mm; border-bottom-width: 0.25mm; }
.ps-id .cm.bl { left: -7mm; bottom: -7mm; border-right-width: 0.25mm; border-top-width: 0.25mm; }
.ps-id .cm.br { right: -7mm; bottom: -7mm; border-left-width: 0.25mm; border-top-width: 0.25mm; }
.ps-id ol { max-width: 150mm; margin: 0 auto; padding-left: 5mm; font: 600 10pt/1.5 var(--font-label); letter-spacing: 0.02em; }
.ps-id .scale-check { display: flex; align-items: center; justify-content: center; gap: 3mm; margin: 6mm 0 0; color: #c69742; font: 700 8pt var(--font-label); letter-spacing: 0.08em; }
.ps-id .scale-check i { display: inline-block; width: 50mm; height: 2.5mm; border: 0.25mm solid #c69742; border-top: 0; }

/* 6b. Certificate, on a landscape page */
.ps-cert .cert { width: 250mm !important; min-height: 176mm; margin: 0 auto; padding: 12mm 14mm 10mm !important; transform: none !important; box-shadow: none !important; outline-offset: -4mm !important; }
.ps-cert .cert-org { font-size: 9pt !important; }
.ps-cert .cert-title { font-size: 30pt !important; margin: 2mm 0 7mm !important; }
.ps-cert .cert-main { grid-template-columns: 56mm 1fr !important; gap: 9mm !important; }
.ps-cert .cert-line { font-size: 11pt !important; }
.ps-cert .cert-species { font-size: 38pt !important; margin: 1mm 0 4mm !important; }
.ps-cert .cert-body { font-size: 12.5pt !important; }
.ps-cert .cert-posting { font-size: 11pt !important; }
.ps-cert .cert-foot { margin-top: 9mm !important; font-size: 8.5pt !important; }
.ps-cert .cert-stamp { font-size: 20pt !important; right: 18mm !important; bottom: 24mm !important; }

/* 6c. Memo, as a full letterhead page */
.ps-memo .memo-sheet { width: 182mm !important; min-height: 240mm; margin: 0 auto; padding: 14mm 16mm 28mm !important; transform: none !important; box-shadow: none !important; border-radius: 0 !important; }
.ps-memo .ms-letterhead img { width: 18mm !important; height: 18mm !important; }
.ps-memo .ms-letterhead b { font-size: 22pt !important; }
.ps-memo .ms-letterhead span { font-size: 8pt !important; }
.ps-memo .ms-fields dt { font-size: 8pt !important; }
.ps-memo .ms-fields dd { font-size: 11pt !important; }
.ps-memo .ms-body { font-size: 12pt !important; line-height: 1.65 !important; }
.ps-memo .ms-sign { font-size: 11pt !important; }
.ps-memo .ms-stamp { opacity: 0.85 !important; transform: rotate(-12deg) !important; font-size: 20pt !important; right: 18mm !important; bottom: 14mm !important; }

/* 6d. Receipt, at thermal-roll width */
.ps-receipt { padding-top: 6mm; }
.ps-receipt .receipt { width: 80mm !important; margin: 0 auto; padding: 7mm 6mm 10mm !important; transform: none !important; box-shadow: none !important; font-size: 9.5pt !important; }
.ps-receipt .receipt .r-total { font-size: 11pt !important; }

/* 6e. Pebble specimen card, cut out and tie to the pebble */
.ps-specimen .spec-card {
  position: relative;
  display: grid;
  grid-template-columns: 42mm 1fr;
  gap: 5mm;
  align-items: center;
  width: 130mm;
  min-height: 72mm;
  margin: 16mm auto 0;
  padding: 7mm 9mm 7mm 14mm;
  border: 0.3mm dashed #c69742;
  border-radius: 3mm 14mm 14mm 3mm;
  background: linear-gradient(180deg, #fbf3e2, #f1e5cb);
  color: #1d2a2e;
}
.ps-specimen .spec-hole { position: absolute; left: 4mm; top: 50%; width: 5mm; height: 5mm; margin-top: -2.5mm; border-radius: 50%; border: 0.6mm solid #c69742; }
.ps-specimen .spec-stone svg { display: block; width: 42mm; height: 42mm; }
.ps-specimen .tag-org { margin: 0; color: #a77c2f; font: 800 7pt var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; }
.ps-specimen .tag-no { margin: 0 0 2mm; color: #253f50; font-family: var(--font-display); font-size: 20pt; }
.ps-specimen dl { display: grid; grid-template-columns: auto 1fr; gap: 0.8mm 3mm; margin: 0; }
.ps-specimen dt { color: #7a571a; font: 800 7pt var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; align-self: center; }
.ps-specimen dd { margin: 0; font-family: var(--font-body); font-size: 10pt; font-style: italic; }

/* 6f. Station map with its numbered legend, on a landscape page */
.ps-map .smap-wrap { display: block !important; position: relative; width: 210mm; margin: 2mm auto 0; line-height: 0; }
.ps-map .smap-wrap img { width: 100% !important; height: auto !important; border-radius: 1.5mm; }
.ps-map .smap-pin { display: grid !important; place-items: center; width: 6mm !important; height: 6mm !important; padding: 0 !important; font-size: 8pt !important; opacity: 1 !important; box-shadow: 0 0 0 0.6mm rgba(198, 151, 66, 0.45) !important; transform: translate(-50%, -50%) !important; }
.ps-map .smap-pin::after { display: none !important; }
.ps-map .map-legend { columns: 4; column-gap: 5mm; width: 236mm; margin: 4mm auto 0; padding: 0; list-style: none; font: 600 8pt/1.35 var(--font-label); }
.ps-map .map-legend li { break-inside: avoid; }
.ps-map .map-legend b { display: inline-block; min-width: 5mm; color: #c69742; }

/* 6g. Poster, wallpaper, or any lightbox image, fitted to one page */
.ps-image figure { margin: 0; text-align: center; }
.ps-image img { display: block; max-width: 100%; max-height: 228mm; margin: 0 auto; object-fit: contain; }
html[data-print-orient="landscape"] .ps-image img { max-height: 168mm; }
.ps-image figcaption { margin: 4mm 0 0; font: 700 9pt var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; }
.ps-image figcaption small { display: block; color: #c69742; font-size: 7.5pt; letter-spacing: 0.14em; }

/* 7. FIELD MANUAL --------------------------------------------------- */
#manual-intro { display: none !important; }
.man-cover {
  display: grid !important;
  min-height: 236mm;
  align-content: center;
  justify-items: center;
  gap: 5mm;
  text-align: center;
  break-after: page;
}
.man-cover img { width: 58mm; height: 58mm; border-radius: 50%; }
.man-cover .mc-kicker { margin: 0; color: #c69742; font: 800 9pt var(--font-label); letter-spacing: 0.2em; text-transform: uppercase; }
.man-cover h1 { margin: 0 !important; font-size: 52pt !important; }
.man-cover .mc-sub { margin: 0; max-width: 130mm; font-size: 13pt; font-style: italic; }
.man-cover .mc-edition { margin: 4mm 0 0; padding: 2mm 5mm; border: 0.5mm double #a84a38; color: #a84a38; font-family: var(--font-display); font-size: 11pt; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-2deg); }
.man-cover .mc-issued { display: grid; grid-template-columns: auto 70mm; gap: 3mm 4mm; margin: 10mm 0 0; font: 700 9pt var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; text-align: left; }
.man-cover .mc-issued span { border-bottom: 0.3mm solid #c69742; }
.man-toc { display: block !important; break-after: page; }
.man-toc h2 { margin: 0 0 6mm !important; }
.man-toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 10mm; }
.man-toc li { break-inside: avoid; padding: 1mm 0; border-bottom: 0.2mm dotted rgba(198, 151, 66, 0.6); font: 600 10pt var(--font-label); letter-spacing: 0.02em; }
.man-toc li.toc-part { margin-top: 3mm; border-bottom: 0; color: #c69742; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 8.5pt; }
.man-toc li b { display: inline-block; min-width: 9mm; color: #c69742; }
.man-part { display: grid !important; min-height: 230mm; align-content: center; justify-items: center; text-align: center; break-before: page; break-after: page; }
.man-part .kicker { font-size: 10pt !important; }
.man-part h2 { font-size: 40pt !important; max-width: 160mm; }
.man-block { break-before: page; }
.man-part + .man-block { break-before: auto; }