/* ============================================================================
   PRINT / PDF booklet  (built by print.js into #printRoot)
   A deliberately LIGHT, ink-friendly palette — independent of the on-screen
   dark theme — so the exported study guide reads cleanly on paper. The chart's
   own category colours are reused for pills, spine nodes, and phase accents
   (they're authored to pop, and pill ink auto-contrasts like the engine).

   On screen the booklet is hidden; everything here applies under @media print,
   where the live timeline UI is taken out and #printRoot becomes the document.
   ============================================================================ */
#printRoot {
  display: none;
  --p-paper: #ffffff;
  --p-ink: #1b1b1f;        /* body text */
  --p-strong: #0c0c10;     /* headings */
  --p-dim: #5a5f6b;        /* secondary text (time, refs, captions) */
  --p-rule: #d8dce3;       /* hairlines, spine, dividers */
  --p-accent: #334155;     /* neutral structural accent */
  --p-soft: #f4f6f9;       /* faint inset fills (code, stats) */
  color: var(--p-ink);
  font-family: Georgia, "Times New Roman", "Segoe UI", serif;
  line-height: 1.5;
}

@media print {
  /* Take the interactive app off the page; the booklet becomes the document. */
  #stage, #hud, #scrubber, #hint, #backToGallery, #timelineCredit,
  #detail, .ctrl, .nav, #exportPdf { display: none !important; }

  html, body {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }

  #printRoot { display: block !important; }

  /* Honour every colour we set (browsers strip backgrounds otherwise — this is
     what keeps the pills, swatches, spine, and phase tints from vanishing). */
  #printRoot, #printRoot * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Top margin holds our running header; a hair more breathing room up top. */
  @page { margin: 18mm 15mm 16mm; }

  /* Our centered running title — sits in the top page margin and repeats on
     every page (replaces the browser's offset title+timestamp, which you turn
     off via the print dialog's "Headers and footers"). Tuned for Chrome/Edge. */
  .run-head {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-top: -12mm;          /* lift up into the reserved top margin */
    text-align: center;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 8pt;
    letter-spacing: .05em;
    color: #9aa0aa;
  }
}

/* Hidden on screen; only the print rule above reveals it. */
.run-head { display: none; }

/* ---- Cover ------------------------------------------------------------- */
.p-cover {
  break-after: page;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0 6mm;
}
.pc-brand {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 11pt;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--p-dim);
  margin-bottom: 26pt;
}
.pc-title {
  margin: 0;
  font-size: 30pt;
  line-height: 1.18;
  color: var(--p-strong);
  letter-spacing: .005em;
}
.pc-era {
  margin-top: 12pt;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 11pt;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--p-accent);
}
.pc-verse {
  margin: 30pt auto 0;
  max-width: 26em;
  font-size: 13pt;
  font-style: italic;
  color: var(--p-dim);
}
.pc-verse cite {
  display: block;
  margin-top: 8pt;
  font-style: normal;
  font-size: .8em;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pc-blurb {
  margin: 24pt auto 0;
  max-width: 30em;
  font-size: 11.5pt;
  color: var(--p-ink);
}
.pc-stats {
  margin: 30pt auto 0;
  display: flex;
  gap: 34pt;
  justify-content: center;
}
.pc-stats div { text-align: center; }
.pc-stats dt {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 8.5pt;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--p-dim);
}
.pc-stats dd {
  margin: 4pt 0 0;
  font-size: 19pt;
  color: var(--p-strong);
}
.pc-tags {
  list-style: none;
  margin: 26pt auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7pt;
  justify-content: center;
}
.pc-tags li {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 8.5pt;
  letter-spacing: .04em;
  color: var(--p-dim);
  background: var(--p-soft);
  border: 1px solid var(--p-rule);
  border-radius: 999px;
  padding: 3pt 11pt;
}
.pc-foot {
  margin-top: auto;
  padding-top: 30pt;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 8.5pt;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-dim);
}

/* ---- Section headings -------------------------------------------------- */
.p-h2 {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 13pt;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--p-accent);
  margin: 0 0 12pt;
  padding-bottom: 6pt;
  border-bottom: 1.5pt solid var(--p-rule);
  break-after: avoid;
}

/* ---- Category key + contents page -------------------------------------- */
.p-key { break-after: page; }
.p-legend {
  list-style: none;
  margin: 0 0 26pt;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8pt 22pt;
}
.p-legend li {
  display: flex;
  align-items: center;
  gap: 9pt;
  font-size: 11pt;
}
.p-swatch {
  flex: 0 0 auto;
  width: 13pt;
  height: 13pt;
  border-radius: 3pt;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.p-toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.p-toc li {
  display: flex;
  align-items: center;
  gap: 10pt;
  padding: 7pt 0;
  border-bottom: 1px solid var(--p-rule);
  font-size: 11.5pt;
}
.p-toc-dot {
  flex: 0 0 auto;
  width: 10pt;
  height: 10pt;
  border-radius: 50%;
}
.p-toc-label { flex: 1; color: var(--p-strong); }
.p-toc-n {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 9pt;
  color: var(--p-dim);
}

/* ---- At-a-glance minimap (centered spine) ------------------------------ */
.p-mini { break-after: page; }
.mini {
  display: grid;
  grid-template-columns: 1fr 34pt 1fr;
  align-items: center;
  row-gap: 3pt;
}
.m-phase {
  grid-column: 1 / -1;
  margin-top: 12pt;
  padding-bottom: 3pt;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 8.5pt;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c);
  border-bottom: 1px solid var(--c);
  break-after: avoid;
  page-break-after: avoid;
}
.m-tick {
  grid-column: 1 / -1;
  text-align: center;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 7.5pt;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--p-dim);
  break-after: avoid;
  page-break-after: avoid;
}
.m-spine {
  position: relative;
  align-self: stretch;
  min-height: 18pt;
}
.m-spine::before {                 /* the continuous central line */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5pt;
  transform: translateX(-50%);
  background: var(--p-rule);
}
.m-node {
  position: relative;
  display: block;
  width: 9pt;
  height: 9pt;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2pt #fff, 0 0 0 3pt var(--c);
}
.m-node[data-minor] {              /* minor events read as a hollow dot */
  background: #fff;
  box-shadow: 0 0 0 2pt #fff, 0 0 0 3pt var(--c);
}
.m-left { text-align: right; }
.m-chip {
  display: inline-block;
  max-width: 100%;
  border-left: 3pt solid var(--c);
  padding: 2pt 8pt;
  font-size: 9.5pt;
  line-height: 1.25;
  text-align: left;
  overflow-wrap: break-word;
  break-inside: avoid;
}
.m-right .m-chip { border-left: none; border-right: 3pt solid var(--c); }
.m-chip b { color: var(--p-strong); font-weight: 600; }
.m-chip span {
  display: block;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 7.5pt;
  letter-spacing: .04em;
  color: var(--p-dim);
}

/* ---- Walkthrough: phase chapters + left-rail event spine --------------- */
.p-phase { break-before: page; }
.ph-head {
  margin-bottom: 14pt;
  break-after: avoid;
}
.ph-head h2 {
  margin: 0;
  font-size: 18pt;
  color: var(--p-strong);
  padding-bottom: 7pt;
  border-bottom: 2.5pt solid var(--c);
}

.node {
  display: grid;
  grid-template-columns: 26pt 1fr;
  break-inside: avoid;       /* never split an event across a page */
  page-break-inside: avoid;
}
.node .rail {
  position: relative;
}
.node .rail::before {        /* spine segment — adjacent nodes read continuous */
  content: "";
  position: absolute;
  left: 6pt;
  top: 0;
  bottom: -2pt;
  width: 2pt;
  background: var(--p-rule);
}
.node .dot {
  position: absolute;
  left: 1.5pt;
  top: 4pt;
  width: 11pt;
  height: 11pt;
  border-radius: 50%;
  background: var(--c, var(--p-accent));
  box-shadow: 0 0 0 2.5pt #fff;
}
.node .body {
  padding: 0 0 16pt 8pt;
  min-width: 0;
  overflow-wrap: break-word;   /* long unbreakable strings wrap, never overflow */
}
/* Keep the eyebrow + title attached to the start of the body (no heading left
   stranded at a page foot). */
.node .eyebrow, .node h3 { break-after: avoid; page-break-after: avoid; }
.node .summary { orphans: 2; widows: 2; }
.node .eyebrow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8pt;
  margin-bottom: 3pt;
}
.node .pill {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 7.5pt;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 1.5pt 8pt;
}
.node .time {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 8.5pt;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--p-dim);
}
.node h3 {
  margin: 0 0 5pt;
  font-size: 14pt;
  color: var(--p-strong);
}
.node h3 .ic { margin-right: 5pt; }
.node .summary {
  margin: 0 0 8pt;
  font-size: 11pt;
  color: var(--p-ink);
}
.node .node-media {
  margin: 0 0 8pt;
  break-inside: avoid;
}
.node .node-media img {
  display: block;
  width: 100%;
  max-height: 70mm;
  object-fit: cover;
  border-radius: 4pt;
}
.node .node-media figcaption {
  font-size: 8.5pt;
  color: var(--p-dim);
  margin-top: 3pt;
}
.node .node-link {
  margin: 6pt 0 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 8.5pt;
  color: var(--p-dim);
  word-break: break-all;
}

/* Expanded `details` markdown — the "extra info" the popup hides online. */
.node .details {
  font-size: 10.5pt;
  color: var(--p-ink);
  border-left: 2pt solid var(--p-rule);
  padding-left: 12pt;
  margin-top: 4pt;
}
.node .details h4, .node .details h5, .node .details h6 {
  font-family: "Segoe UI", system-ui, sans-serif;
  margin: 9pt 0 4pt;
  color: var(--p-accent);
  letter-spacing: .02em;
  break-after: avoid;          /* never orphan a sub-heading at a page foot */
  page-break-after: avoid;
}
.node .details h4 { font-size: 10.5pt; text-transform: uppercase; letter-spacing: .08em; }
.node .details h5, .node .details h6 { font-size: 10pt; }
.node .details p { margin: 0 0 6pt; orphans: 2; widows: 2; }
.node .details ul, .node .details ol { margin: 0 0 6pt; padding-left: 16pt; break-inside: avoid; }
.node .details li { margin: 2pt 0; break-inside: avoid; }
.node .details strong { color: var(--p-strong); }
.node .details a { color: var(--p-accent); text-decoration: none; }
.node .details blockquote {
  margin: 0 0 6pt;
  padding: 2pt 0 2pt 11pt;
  border-left: 2.5pt solid var(--c, var(--p-accent));
  color: var(--p-dim);
  font-style: italic;
  break-inside: avoid;
}
.node .details code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .9em;
  background: var(--p-soft);
  padding: 0 3pt;
  border-radius: 3pt;
}
.node .details pre {
  background: var(--p-soft);
  border: 1px solid var(--p-rule);
  border-radius: 5pt;
  padding: 8pt 10pt;
  overflow-x: auto;
}
.node .details pre code { background: none; padding: 0; }
.node .details hr {
  border: none;
  border-top: 1px solid var(--p-rule);
  margin: 9pt 0;
}

/* Minor (context) events: a slim, detail-less node. */
.node.minor .body { padding-bottom: 11pt; }
.node.minor .minor-t {
  font-size: 11.5pt;
  font-weight: 600;
  color: var(--p-strong);
  margin: 0;
}
.node.minor .dot {
  background: #fff;
  box-shadow: 0 0 0 2.5pt #fff, inset 0 0 0 2pt var(--c, var(--p-accent));
}

/* ---- Rotated foldout (the horizontal timeline, turned 90° CW) ----------
   Each page holds one segment of the axis; the segment is rotated so the
   along-axis direction runs top→bottom. Geometry comes from print.js in px;
   here we only need positioning, the rotation origin, and clipping. */
/* The heading rides at the top of the first rotated page, so the note and the
   start of the timeline sit together (NOTE_H in print.js reserves the room). */
.rot-head { position: absolute; top: 0; left: 0; right: 0; text-align: center; }
.rot-head .p-h2 { display: inline-block; }   /* centre the title, not full-width */
.rot-note { font-size: 11pt; line-height: 1.55; color: var(--p-dim); max-width: 40em; margin: 0 auto; }
.rot-page {
  break-before: page;
  position: relative;
  width: 100%;
  height: 900px;           /* matches PAGE_L in print.js; < min printable height */
  overflow: hidden;        /* clip anything bleeding past the segment edges */
}
.rot-seg {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;   /* the maths in print.js assumes 0,0 origin */
  overflow: hidden;
}
.rt-axis { position: absolute; height: 2px; background: var(--p-accent); opacity: .55; }
.rt-band { position: absolute; }
.rt-band-label {
  position: absolute;
  top: 6px;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 8pt;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p-dim);
  white-space: nowrap;
}
.rt-tick {
  position: absolute;
  width: 2px;
  height: 16px;
  margin-left: -1px;
  background: var(--p-accent);
  opacity: .55;
}
.rt-tick-label {
  position: absolute;
  transform: translateX(-50%);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 7pt;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p-dim);
  white-space: nowrap;
}
.rt-conn {
  position: absolute;
  width: 1px;
  margin-left: -0.5px;
  background: var(--p-rule);
}
.rt-box {
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  background: #fff;
  border: 1px solid;            /* border-color set inline = category colour */
  border-left-width: 4px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.rt-time {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 8pt;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p-dim);
}
.rt-title { font-size: 10pt; line-height: 1.15; color: var(--p-strong); }