/* ActSmall — print stylesheet for the per-topic /print/ handout.

   The handout is a single-page (or one-A4-per-country) artifact built to
   survive the cheapest channel into rooms with no wifi: ink on paper.
   Goals:
     - Render legibly on A4 with consumer printers (avoid heavy ink fills).
     - Ignore the screen chrome the build layout injects (topic strip, site
       header, site footer, safety strip). The print page is its own thing.
     - Stay readable on screen too, so a maintainer can preview without
       hitting print → preview every time.
     - Multi-country mode: page-break between cards so an educator can run
       a unit on USA / KEN / IND from one PDF.

   Topic accent color comes through the same `--accent` CSS variable that
   `topic.config.json` injects via the layout's `<style>:root{--accent:..}` —
   so the header bar matches each topic's brand without duplicating per-
   topic stylesheets. */

/* ---------- Page geometry ---------- */
@page {
  size: A4;
  margin: 12mm;
}

/* ---------- Hide the standard chrome on print pages ---------- */
/* `body.is-print-page` is set by print.js when it spots a print/ page;
   `is-print-fallback` is the same effect for users with JS disabled, set
   via inline <noscript> plumbing in the per-topic print/index.html so the
   handout still hides chrome and shows the URL when JS is off.

   These rules apply on screen AND in print so the screen preview matches
   the printed output exactly (no surprise reflow when the visitor hits
   Cmd-P). */
body.is-print-page .topic-strip,
body.is-print-page .safety-strip,
body.is-print-page .site-header,
body.is-print-page .site-footer,
body.is-print-page .site-nav,
body.is-print-page .skip-link {
  display: none !important;
}
body.is-print-page {
  background: #fff;
  color: #000;
}
body.is-print-page #main {
  padding: 0;
  margin: 0;
}

/* ---------- Print shell layout ---------- */
.print-shell {
  font-family: Georgia, "Times New Roman", "Noto Serif", serif;
  color: #111;
  background: #fff;
  max-width: 186mm; /* A4 minus 12mm margins on screen preview */
  margin: 0 auto;
  padding: 0;
}

.print-toolbar {
  margin: 0 0 12mm;
  padding: 1rem;
  background: #f4f1e8;
  border: 1px solid #d6d2c2;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
}
.print-toolbar p {
  margin: 0;
  font-size: 0.9rem;
  color: #444;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.print-toolbar button,
.print-toolbar a.print-trigger {
  appearance: none;
  background: var(--accent, #355c3a);
  color: #fff;
  border: 1px solid var(--accent, #355c3a);
  border-radius: 4px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.print-toolbar button:hover,
.print-toolbar a.print-trigger:hover {
  filter: brightness(0.92);
}

/* ---------- Each printable card (one A4 per country) ---------- */
.print-page {
  page-break-after: always;
  break-after: page;
  background: #fff;
  color: #111;
  padding: 0;
  margin: 0 0 16mm;
  display: flex;
  flex-direction: column;
  /* On screen: simulate the page edges so a maintainer can see what will
     print. Border deliberately printed below as 0 to keep ink off the
     final paper. */
  border: 1px dashed #cfcfcf;
  min-height: 270mm;
  box-sizing: border-box;
  padding: 8mm 6mm;
}
.print-page:last-of-type {
  page-break-after: auto;
  break-after: auto;
}

/* ---------- Topic header bar ---------- */
.print-head {
  border-bottom: 2.5pt solid var(--accent, #355c3a);
  padding-bottom: 4mm;
  margin-bottom: 6mm;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem;
  align-items: end;
}
.print-mast-title {
  font-size: 18pt;
  font-weight: 700;
  margin: 0;
  color: var(--accent, #355c3a);
  line-height: 1.1;
}
.print-mast-tag {
  font-size: 10.5pt;
  font-style: italic;
  color: #444;
  margin: 0.2rem 0 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 56ch;
}
.print-country {
  margin: 0;
  font-size: 14pt;
  font-weight: 700;
  color: #111;
  text-align: right;
  letter-spacing: -0.005em;
}
.print-country small {
  display: block;
  font-size: 9pt;
  font-weight: 400;
  color: #555;
  margin-top: 0.15rem;
  letter-spacing: 0;
}

/* ---------- Headline indicator ---------- */
.print-headline {
  margin: 0 0 6mm;
  padding: 4mm 5mm;
  border: 1pt solid #888;
  border-left: 4pt solid var(--accent, #355c3a);
  page-break-inside: avoid;
  break-inside: avoid;
}
.print-headline-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 9pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
  margin: 0 0 0.2rem;
}
.print-headline-value {
  margin: 0 0 0.2rem;
  font-size: 22pt;
  font-weight: 700;
  line-height: 1.1;
  color: #111;
}
.print-headline-value .unit {
  font-size: 14pt;
  font-weight: 400;
  margin-left: 0.15rem;
  color: #555;
}
.print-headline-source {
  margin: 0;
  font-size: 9pt;
  color: #555;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.print-headline[hidden] {
  display: none !important;
}

/* ---------- Picked action ---------- */
.print-action {
  margin: 0 0 6mm;
  padding: 5mm;
  border: 1pt solid #444;
  page-break-inside: avoid;
  break-inside: avoid;
}
.print-action-verb {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 8.5pt;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent, #355c3a);
  padding: 1pt 6pt;
  border-radius: 2pt;
  margin: 0 0 2mm;
}
.print-action-title {
  margin: 0 0 2mm;
  font-size: 14pt;
  font-weight: 700;
  line-height: 1.25;
  color: #111;
}
.print-action-summary {
  margin: 0 0 3mm;
  font-size: 11pt;
  line-height: 1.45;
  color: #222;
}
.print-action-link {
  margin: 0;
  padding-top: 2mm;
  border-top: 0.5pt dotted #888;
  font-size: 10.5pt;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.print-action-link strong {
  display: block;
  font-size: 9pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
  margin-bottom: 1mm;
}
.print-action-link a,
.print-action-link span.url {
  color: #111;
  text-decoration: underline;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10pt;
}

/* ---------- Three follow-ups ---------- */
.print-next {
  margin: 0 0 6mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.print-next h2 {
  font-size: 12pt;
  font-weight: 700;
  margin: 0 0 2mm;
  color: #111;
  border-bottom: 0.5pt solid #888;
  padding-bottom: 1mm;
}
.print-next-list {
  margin: 0;
  padding: 0 0 0 5mm;
  font-size: 10.5pt;
  line-height: 1.5;
}
.print-next-list li {
  margin: 0 0 1.5mm;
}
.print-next-list li strong {
  display: inline-block;
  min-width: 32mm;
  font-weight: 700;
}

/* ---------- Footer (QR + citations + date) ---------- */
.print-foot {
  margin-top: auto;
  padding-top: 4mm;
  border-top: 0.75pt solid #444;
  display: grid;
  grid-template-columns: 28mm 1fr;
  gap: 0 5mm;
  align-items: start;
  font-size: 9pt;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #333;
  page-break-inside: avoid;
  break-inside: avoid;
}
.print-qr {
  width: 28mm;
  height: 28mm;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5pt solid #888;
  background: #fff;
}
.print-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.print-qr[data-empty="true"] {
  font-size: 7.5pt;
  color: #777;
  text-align: center;
  padding: 1mm;
  line-height: 1.2;
}
.print-source {
  display: flex;
  flex-direction: column;
  gap: 1.5mm;
  min-width: 0;
}
.print-source-line {
  margin: 0;
  line-height: 1.4;
}
.print-source-line strong {
  display: inline-block;
  min-width: 30mm;
  font-weight: 700;
  color: #111;
}
.print-source-line .url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9pt;
  word-break: break-all;
}
.print-source-line.print-meta {
  font-size: 8pt;
  color: #666;
  margin-top: 1mm;
}
.print-source-line.print-meta a {
  color: #333;
  text-decoration: underline;
}

/* ---------- Print-only refinements ---------- */
@media print {
  /* Hide screen-only affordances */
  body.is-print-page .print-toolbar,
  body.is-print-page .print-screen-only {
    display: none !important;
  }
  /* Drop the simulated page edges — real paper provides those */
  .print-page {
    border: 0;
    margin: 0;
    padding: 0;
    min-height: 0;
  }
  /* Force ink-friendly colors. Some printers honour color-adjust;
     belt + braces with !important rules so a strict driver can't
     decide our accent bar is decorative and skip it. */
  .print-head {
    border-bottom-color: #000 !important;
  }
  .print-headline {
    border-color: #000 !important;
  }
  .print-action {
    border-color: #000 !important;
  }
  .print-action-verb {
    background: #000 !important;
    color: #fff !important;
  }
  .print-mast-title {
    color: #000 !important;
  }
  /* Allow Chrome/Edge to render the colored accent if the user opted
     into "Background graphics" — but never depend on it. */
  body.is-print-page {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}

/* ---------- Screen-only preview affordances ---------- */
@media screen {
  body.is-print-page {
    background: #e8e6dd;
    padding: 8mm 0;
  }
  .print-page {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
    background: #fff;
    margin: 0 auto 8mm;
  }
  .print-screen-only {
    max-width: 186mm;
    margin: 0 auto 6mm;
  }
}

/* ---------- Empty / error states ---------- */
.print-action[data-empty="true"] .print-action-verb,
.print-action[data-empty="true"] .print-action-summary,
.print-action[data-empty="true"] .print-action-link {
  display: none;
}
.print-action[data-empty="true"]::before {
  content: "No country-specific action loaded. Visit the live map for the latest recommendation.";
  display: block;
  font-style: italic;
  color: #555;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10pt;
}

/* When loadCountry hasn't run yet (or failed silently), the page still
   needs to look intentional rather than blank. The default DOM ships with
   placeholder copy; we just dim the placeholder slightly so a maintainer
   notices the data didn't load. */
.print-page[data-loaded="false"] .print-headline,
.print-page[data-loaded="false"] .print-action {
  opacity: 0.85;
}