/* Print or save PDF (print.js). The printed document keeps the Planet Zoo 2 look in its type,
   olive rules, outlined tab labels and pictures, on white paper: no blocks of colour, and nothing
   that depends on a background colour (browsers leave those out when printing unless asked).
   Every state reads in black and white too: ✓, ○, !, ⭐, ♂ and ♀ carry it, not colour. */

/* ---------- on screen: the dialog; the printout itself stays hidden ---------- */
.print-root { display: none; }
.print-form { display: grid; gap: 12px; }
.print-form p { margin: 0; }
.print-form label { display: grid; gap: 5px; font-weight: 700; color: var(--ink); }
.print-form label .note { margin: 0; font-weight: 400; }
.print-form input[type="text"] { width: 100%; }
.print-form .confirm-actions { margin-top: 4px; }

/* ---------- on paper ---------- */
@page { size: auto; margin: 12mm 12mm 14mm; }
@page {
  @bottom-left { font: 7.5pt "Signika", sans-serif; color: #725b4b; vertical-align: top; padding-top: 3mm; }
  @bottom-right { font: 7.5pt "Signika", sans-serif; color: #725b4b; vertical-align: top; padding-top: 3mm; }
}
@media print {
  html, body { background: #fff !important; color: #2f2c26 !important; min-height: 0 !important; }
  body > :not(.print-root) { display: none !important; }
  .print-root { display: block; }
}

.print-root {
  --pr-ink: #2f2c26; --pr-ink-2: #6b5646; --pr-ink-3: #9a8571; --pr-rule: #cdb999; --pr-olive: #596944;
  --pr-olive-l: #8a9751; --pr-tint: #e4e9cf; --pr-warn: #9a4f12; --pr-bad: #a3405b;
  color: var(--pr-ink); font: 9pt/1.32 var(--font); -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.print-root * { box-sizing: border-box; }
.print-root img { display: inline-block; vertical-align: middle; }
.pr-sheet { break-before: page; }
.pr-sheet:first-child { break-before: auto; }
.pr-sheet p { margin: 0; }

/* the sheet's top: torn-tab kicker, title, meta; the zoo on the right */
.pr-head { display: flex; gap: 4mm; align-items: flex-end; padding-bottom: 2.5mm; margin-bottom: 3mm; border-bottom: 1.6pt solid var(--pr-olive); }
.pr-head-main { flex: 1; min-width: 0; }
.pr-pin { width: 13mm; height: 13mm; object-fit: contain; align-self: center; }
.pr-kicker {
  display: inline-block; margin: 0 0 1.6mm !important; padding: .5mm 3mm .6mm 2.4mm;
  border: 1pt solid var(--pr-olive); border-radius: .4mm 1.2mm .6mm 1mm; color: var(--pr-olive);
  font: 700 7.5pt/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase;
}
.pr-title { margin: 0; font: 700 19pt/1.05 var(--font); color: var(--pr-ink); }
.pr-meta { margin-top: 1mm !important; color: var(--pr-ink-2); font-size: 9pt; }
.pr-aside { display: grid; justify-items: end; gap: .6mm; text-align: right; font-size: 8pt; color: var(--pr-ink-2); }
.pr-aside b { font-size: 10pt; color: var(--pr-ink); }
.pr-h {
  margin: 3.2mm 0 1.4mm; padding-bottom: .6mm; border-bottom: 1pt solid var(--pr-olive);
  color: var(--pr-olive); font: 700 8pt/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase;
  break-after: avoid;
}
.pr-h small { margin-left: 2mm; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--pr-ink-2); font-size: 8pt; }
.pr-lead { margin: 0 0 1.6mm !important; color: var(--pr-ink-2); font-size: 8.5pt; }
.pr-source { margin-top: 3mm !important; color: var(--pr-ink-3); font-size: 7.5pt; }
.pr-small { color: var(--pr-ink-2); font-size: 8pt; }
.pr-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 6mm; align-items: start; }
.pr-cols > * { min-width: 0; }

/* boxes to tick, pictures, tags */
.pr-box {
  display: inline-block; flex: 0 0 auto; width: 3.6mm; height: 3.6mm; margin-right: 1.4mm; vertical-align: -.7mm;
  border: 1pt solid var(--pr-ink); border-radius: .8mm; position: relative;
}
.pr-box--on::after { content: "✓"; position: absolute; inset: -1.3mm 0 0 .3mm; font: 700 10pt/1 var(--font); color: var(--pr-olive); }
.pr-ico { width: 7mm; height: 7mm; border-radius: 50%; object-fit: contain; }
.pr-ico--s { width: 4.6mm; height: 4.6mm; }
.pr-ico--plant { padding: .5mm; background: var(--pr-olive-l); } /* the game's plant icon is white */
.pr-tag { display: inline-block; padding: 0 1.4mm; border: .8pt solid var(--pr-rule); border-radius: 1.6mm; font-size: 7.5pt; color: var(--pr-ink-2); white-space: nowrap; }
.pr-tag--warn { border-color: var(--pr-warn); color: var(--pr-warn); }
.pr-tag--bad { border-color: var(--pr-bad); color: var(--pr-bad); }
.pr-tier { display: none; }
:where([data-acc-tier]) .pr-tier { display: var(--acc-badge, none); }
.pr-tier { margin-left: 1mm; padding: 0 1.2mm; border: .8pt solid var(--pr-ink-3); border-radius: 1.6mm; font-size: 7pt; color: var(--pr-ink-2); white-space: nowrap; }
.pr-star { font-size: 8pt; }
.pr-glyph { display: inline-block; width: 3mm; font-weight: 700; text-align: center; }
.pr-glyph--prerequisite { color: var(--pr-bad); }
.pr-glyph--ecosystem { color: var(--pr-warn); }
.pr-glyph--filled { color: var(--pr-olive); }

/* tables: hairline rules, no fills */
.pr-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.pr-table th { padding: .6mm 1.2mm; border-bottom: .8pt solid var(--pr-olive-l); text-align: left; font-weight: 600; font-size: 7pt;
  letter-spacing: .05em; text-transform: uppercase; color: var(--pr-ink-2); white-space: nowrap; }
.pr-table td { padding: .7mm 1.2mm; border-bottom: .5pt solid var(--pr-rule); vertical-align: middle; }
.pr-table tr { break-inside: avoid; }
.pr-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-table .tight { width: 1%; white-space: nowrap; }
.pr-table .sub { padding-left: 4mm; color: var(--pr-ink-2); }
.pr-table tr.total td { border-top: .8pt solid var(--pr-olive-l); font-weight: 700; }
.pr-table tr.alt td { color: var(--pr-ink-2); }
.pr-table .zero { color: var(--pr-ink-3); }
.pr-table small { display: block; color: var(--pr-ink-2); font-size: 7.5pt; }
.pr-table b { font-weight: 700; }

/* lists to tick */
.pr-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4mm; }
.pr-checks li { display: flex; gap: 0; align-items: baseline; break-inside: avoid; }
.pr-checks li > .pr-box { align-self: flex-start; margin-top: .3mm; }
.pr-checks small { display: block; color: var(--pr-ink-2); font-size: 7.5pt; }

/* notes: typed text, then lines for a pen */
.pr-notes { break-inside: avoid; }
.pr-notes-text { white-space: pre-wrap; margin-bottom: 1.4mm !important; }
.pr-line { height: 7mm; border-bottom: .6pt solid var(--pr-rule); }

/* ---------- habitat plans ---------- */
.pr-plans td:first-child { width: 1%; }
.pr-heads { display: flex; flex-wrap: wrap; gap: .6mm; }
.pr-heads img { width: 5.4mm; height: 5.4mm; border-radius: 50%; }
.pr-residents .pr-ico { width: 7.5mm; height: 7.5mm; }
.pr-count { font: 700 12pt/1 var(--font); }
.pr-plot { margin: 0; display: grid; gap: 1.2mm; justify-items: start; break-inside: avoid; }
.pr-plot svg { width: 100%; max-width: 62mm; height: 34mm; }
.pr-plot figcaption { font-size: 8pt; color: var(--pr-ink-2); }
.pr-plot figcaption b { color: var(--pr-ink); font-size: 10pt; }
.pr-mats { display: flex; flex-wrap: wrap; gap: .8mm; }
.pr-biomes { display: flex; flex-wrap: wrap; gap: .6mm 2.4mm; }
.pr-biomes span { display: inline-flex; align-items: center; gap: .8mm; }
.pr-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4mm; margin-top: 3mm; break-inside: avoid; }
.pr-verdict section { padding: 1.4mm 0 1.4mm 2.4mm; border-left: 1.6pt solid var(--pr-olive-l); }
.pr-verdict section + section { border-left-color: var(--pr-warn); }
.pr-verdict h3 { margin: 0 0 .8mm; font: 700 7.5pt/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--pr-olive); }
.pr-verdict section + section h3 { color: var(--pr-warn); }
.pr-verdict ul { margin: 0; padding-left: 3.6mm; font-size: 8.5pt; }
.pr-verdict p { color: var(--pr-ink-3); font-size: 8pt; }
.pr-settings { margin-top: 2mm !important; color: var(--pr-ink-3); font-size: 7.5pt; }

/* ---------- reserve checklist ---------- */
.pr-overview td { padding-top: 1.4mm; padding-bottom: 1.4mm; }
.pr-overview .pr-pin { width: 8mm; height: 8mm; }
.pr-key { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 6mm; font-size: 8.5pt; }
.pr-key li { break-inside: avoid; }
.pr-ecos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 5mm; }
.pr-ecos li { display: flex; align-items: center; gap: 1mm; break-inside: avoid; font-size: 8.5pt; }
.pr-ecos img { width: 5.4mm; height: 5.4mm; }
.pr-ecos small { color: var(--pr-ink-2); font-size: 7.5pt; }
.pr-roles td { vertical-align: top; }
.pr-roles .who { font-size: 8pt; }
.pr-rel { list-style: none; margin: 0; padding: 0; }
.pr-rel > li {
  display: grid; grid-template-columns: 5mm 7mm minmax(0, 1fr); gap: 0 1.6mm; align-items: start;
  padding: 1mm 0; border-bottom: .5pt solid var(--pr-rule); break-inside: avoid;
}
.pr-rel > li > .pr-box { margin-top: .6mm; }
.pr-rel > li.pr-rel--done { grid-template-columns: 5mm 5mm minmax(0, 1fr); padding: .6mm 0; }
.pr-rel > li.pr-rel--done .pr-rel-line { color: var(--pr-ink); }
.pr-rel-title { font-size: 9.5pt; }
.pr-rel-title b { font-size: 10pt; }
.pr-rel-line { font-size: 8pt; color: var(--pr-ink-2); }
.pr-rel-groups { font-size: 8pt; }
.pr-rel-groups b { font-weight: 600; }
.pr-rel-where { font-size: 7.5pt; color: var(--pr-ink-2); }
.pr-rel-where s { color: var(--pr-ink-3); }
.pr-rel--done .pr-rel-title b { font-weight: 600; }
.pr-index { columns: 2; column-gap: 6mm; list-style: none; margin: 0; padding: 0; font-size: 8pt; }
.pr-index li { break-inside: avoid; padding: .3mm 0; border-bottom: .4pt solid var(--pr-rule); }
.pr-index span { color: var(--pr-ink-2); }
.pr-rules { margin: 0; padding-left: 4mm; font-size: 7.6pt; color: var(--pr-ink-2); }
.pr-rules li { margin-bottom: .5mm; break-inside: avoid; }
.pr-thrive h3 { margin: 1.6mm 0 .8mm; font: 700 7.5pt/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--pr-olive); }
.pr-thrive i { font-style: normal; color: var(--pr-ink-2); font-size: 8pt; }