/* print.css cache-bust marker: v65 (Anton->Barlow Condensed site font swap; print wordmark keeps Arial Narrow fallback) */
/* ============================================================================
   print.css — Shared print stylesheet for FluentSaigon cheat sheets
   Linked per page with: <link rel="stylesheet" href="../css/print.css?v=N" media="print">
   Loaded AFTER style.css so it wins ties in the print cascade.

   Two modes, both driven from this one file:
     • ESSENTIALS (default)     → body:not(.print-full)
         A curated one-A4-sheet, front-and-back "essentials card" in brand style.
         Front: navy header band + curated rows (tagged .print-essential) laid out
                in per-section 3-column grids.
         Back:  navy header band + scannable QR to the subjects page.
     • FULL REFERENCE           → body.print-full
         Every row in every tab, stacked, white treatment, navy header band on top.

   Print chrome (header band, back/QR panel, footer) lives as .print-only markup
   in each page, inline-hidden on screen (style="display:none") and revealed here.

   NOTE: navy bands + the flag render only when the browser's "Background graphics"
   option is enabled in the print dialog (Chromium PDF export sets this by default).
   ============================================================================ */

/* margin:0 removes the page-margin band where Chromium draws its UA header/footer
   (the auto date top-left + URL bottom-left). Content insets are re-added via
   padding on the bands/sections below so we keep our own navy band + footer.
   NOTE: this reliably suppresses the UA header/footer in Chrome/Edge; Firefox/
   Safari and a user who manually re-checks "Headers and footers" in the print
   dialog can still force them on — CSS cannot override that dialog toggle. */
@page { size: A4; margin: 0; }

:root {
  --p-navy: #0d1b3e;
  --p-gold: #f5c518;
  --p-red:  #c0392b;
  --p-ink:  #333333;
  --p-rule: #eeeeee;
}

/* ── Global print reset ──────────────────────────────────────────────────── */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

body {
  background: #fff !important;
  color: #000 !important;
  font-family: 'Nunito', Arial, sans-serif;
}

/* Neutralize the screen page box so it doesn't add stray margins/pages in print */
.cs-page { max-width: none !important; margin: 0 !important; padding: 0 0 5mm !important; }

/* Hide all screen chrome / interactive / audio elements in every print mode */
nav, #nav-placeholder, #footer-placeholder, #modal-placeholder, #paywall-placeholder,
.no-print, .tab-bar, .play-btn, .local-audio-bar, .dialect-toggle, .free-preview-cta,
.cs-hero, .cs-hero-actions {
  display: none !important;
}

/* Reveal the print-only chrome (inline-hidden on screen) */
.print-band, .print-back, .print-footer { display: block !important; }

/* ── HEADER BAND (front + back) ──────────────────────────────────────────── */
.print-band {
  background: var(--p-navy) !important;
  border-bottom: 3px solid var(--p-gold) !important;
  border-radius: 0;
  padding: 11px 10mm 12px;        /* full-bleed band; left inset aligns with content */
  margin: 0 0 14px;
  display: flex !important;
  align-items: center;
  gap: 12px;
  break-inside: avoid;
}
.print-band .print-flag {
  width: 38px; height: 26px; flex: 0 0 auto;
  border-radius: 2px;
}
.print-band-text { display: flex; flex-direction: column; line-height: 1.05; }
.print-wordmark {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--p-gold) !important;
}
.print-tagline {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff !important;
  margin-top: 2px;
}

/* ── FOOTER (fixed → repeats on every printed page) ──────────────────────── */
.print-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff !important;       /* solid: cleanly covers page-bottom whitespace */
  text-align: center;
  font-size: 16px;                  /* ~double the previous 8.5px */
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #555 !important;
  border-top: 1px solid var(--p-rule);
  padding: 5px 10mm 3mm;
}

/* ════════════════════════════════════════════════════════════════════════
   ESSENTIALS MODE (default — the one-sheet card)
   ════════════════════════════════════════════════════════════════════════ */

/* Show every tab's content (screen hides inactive tabs) */
body:not(.print-full) .tab-section { display: block !important; }

/* Drop sections that hold no curated rows; flatten the ones that do */
body:not(.print-full) .cs-section:not(:has(.print-essential)) { display: none !important; }
body:not(.print-full) .cs-section:has(.print-essential) {
  display: block !important;
  background: #fff !important;
  border: none !important;
  border-radius: 0;
  padding: 0 10mm;          /* side insets (page is full-bleed now) */
  margin: 0 0 10px;
  break-inside: avoid;
}
/* Section sub-label: brand red, uppercase */
body:not(.print-full) .cs-section:has(.print-essential) > .cs-section-title {
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-red) !important;
  border: none !important;
  border-bottom: 1px solid var(--p-rule) !important;
  padding: 0 0 4px;
  margin: 0 0 8px;
}

/* Hide tips / explainer boxes / intro paragraphs / pill grids / table headers
   in essentials (intro <p>s are near-white on screen → invisible but space-taking
   on the print page). */
body:not(.print-full) .cs-tip,
body:not(.print-full) .pattern-box,
body:not(.print-full) .pill-grid,
body:not(.print-full) .cs-section:has(.print-essential) > p,
body:not(.print-full) .cs-table > thead { display: none !important; }

/* Each section's tbody becomes the 3-column flow container */
body:not(.print-full) .cs-table { display: block; width: 100%; }
body:not(.print-full) .cs-table > tbody {
  display: block;
  columns: 200px 3;     /* up to 3 cols ≥200px → dense subjects fall back to 2 */
  column-gap: 18px;
}

/* Hide non-curated rows; render curated rows as compact stacked cards */
body:not(.print-full) .cs-table > tbody > tr:not(.print-essential) { display: none !important; }
body:not(.print-full) tr.print-essential {
  display: block;
  break-inside: avoid;
  padding: 7px 0 8px;
  margin: 0;
  border-bottom: 1px solid var(--p-rule);
}
body:not(.print-full) tr.print-essential > td {
  display: block;
  padding: 0;
  border: none !important;
  background: none !important;
}
/* Vietnamese — bold navy, primary */
body:not(.print-full) tr.print-essential > td.vn {
  order: 1;
  color: var(--p-navy) !important;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
}
/* Pronunciation — brand red, clearly legible (not italic gray) */
body:not(.print-full) tr.print-essential > td.pr {
  order: 2;
  color: var(--p-red) !important;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.25;
}
/* Gloss cell (English / meaning / sound description) — dark gray.
   Selects "the plain cell that is neither VN nor pronunciation nor the dropped
   4th column" so it works whether the VN cell is first (alphabet) or the gloss
   is first (cafe/numbers/phrases/dates). */
body:not(.print-full) tr.print-essential > td:not(.vn):not(.pr):not(:nth-child(4)) {
  order: 3;
  color: var(--p-ink) !important;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.25;
}
/* 4th "What it is / Note" column — drop it to keep cards tight */
body:not(.print-full) tr.print-essential > td:nth-child(4) { display: none !important; }
/* Force the stacked order to take effect */
body:not(.print-full) tr.print-essential { display: flex; flex-direction: column; gap: 1px; }

/* ── BACK PANEL (QR) ─────────────────────────────────────────────────────── */
/* Card is a single side: essentials flow from the top under the header band, and
   the QR is anchored near the bottom (fixed) so the card frames the whole sheet. */
body:not(.print-full) .print-back {
  position: fixed;
  bottom: 13mm; left: 0; right: 0;
  text-align: center;
  break-inside: avoid;
}
body:not(.print-full) .print-back .print-band-back { display: none !important; }
.print-qr {
  width: 128px; height: 128px;
  margin: 8px auto 10px;
  display: block;
}
.print-qr-caption {
  font-size: 13px;
  font-weight: 800;
  color: var(--p-navy) !important;
}
.print-qr-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--p-red) !important;
  margin-top: 3px;
}
.print-qr-url {
  font-size: 8px;
  color: #999 !important;
  margin-top: 8px;
  word-break: break-all;
}

/* (Card QR is fixed-anchored near the page bottom — see rule above.) */

/* The full-reference QR (lives inside the "Ready to Test Yourself?" section) */
.print-fullqr { display: none; }
body.print-full .print-fullqr {
  display: block !important;
  text-align: center;
  margin: 8px auto 0;
}
body.print-full .print-fullqr .print-qr { margin: 6px auto 8px; }

/* ════════════════════════════════════════════════════════════════════════
   FULL REFERENCE MODE  (body.print-full)
   ════════════════════════════════════════════════════════════════════════ */

/* Hide the card's QR back; full reference puts the QR in "Ready to Test Yourself?" */
body.print-full .print-back { display: none !important; }

/* Everything visible, stacked, white treatment */
body.print-full .tab-section { display: block !important; }
body.print-full .cs-section {
  display: block !important;
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px;
  box-shadow: none !important;
  break-inside: auto;          /* allow long sections to flow across pages so
                                  content packs tight (no bottom-of-page gaps);
                                  table headers repeat via table-header-group. */
  margin-bottom: 10px;
  padding: 12px 16px;
}
body.print-full .cs-section-title {
  color: var(--p-navy) !important;
  border-bottom-color: #ccc !important;
  break-after: avoid;          /* never leave a title orphaned at a page bottom */
}
/* Keep the QR together with its host content section so the QR always rides onto
   a populated page (with its table) instead of stranding alone on a final sheet.
   The QR is relocated into the last CONTENT section on dense sheets (phrases,
   dates); on roomy sheets (numbers, cafe) it stays in the small "Ready" section. */
body.print-full .print-fullqr { break-inside: avoid; }
body.print-full .cs-section:has(.print-fullqr) { break-inside: avoid; }
body.print-full .cs-table { display: table; width: 100%; border-collapse: collapse; }
body.print-full .cs-table thead { display: table-header-group; }
body.print-full .cs-table tbody { display: table-row-group; }
body.print-full .cs-table tr { display: table-row !important; break-inside: avoid; }
/* Keep a table's header with its first row so a heading + header never sit alone
   at a page bottom while the body flows to the next page. */
body.print-full .cs-table thead { break-after: avoid; }
body.print-full .cs-table th {
  background: #f0f0f0 !important; color: #000 !important;
  font-size: 8.5px; padding: 5px 8px;
}
body.print-full .cs-table td {
  display: table-cell !important;
  color: #000 !important;
  border-bottom: 1px solid #eee !important;
  padding: 5px 8px;
  font-size: 10px;
}
body.print-full .cs-table td.vn { color: var(--p-navy) !important; font-weight: 800; }
body.print-full .cs-table td.pr { color: var(--p-red) !important; font-style: normal; }
body.print-full .cs-tip {
  background: #fffbe6 !important; border-color: #e6c200 !important; color: #333 !important;
  break-inside: avoid;
}
body.print-full .cs-tip strong { color: #000 !important; }
body.print-full .pill-grid { display: flex !important; flex-wrap: wrap; gap: 6px; }
body.print-full .pill {
  border: 1px solid #ddd !important; color: #000 !important; background: #fafafa !important;
}
body.print-full .pill .en { color: #555 !important; }
body.print-full .pill .vn-p { color: var(--p-navy) !important; }
body.print-full .pill .pr-p { color: var(--p-red) !important; font-style: normal; }

/* Vietnamese/pronunciation stored in a SPAN inside a plain <td> (e.g. playable
   word cells) — screen .vn is white, so without this they print invisible. */
body.print-full .cs-table td .vn { color: var(--p-navy) !important; font-weight: 800; }
body.print-full .cs-table td .pr { color: var(--p-red) !important; font-style: normal; }

/* Explainer pattern-boxes: light box + dark text so they're readable in print
   (screen styling is white text on a dark/translucent box → invisible). */
body.print-full .pattern-box {
  background: #f6f6f6 !important; border: 1px solid #ddd !important;
  color: #000 !important; break-inside: avoid;
  break-after: avoid;   /* keep an intro box glued to the table that follows it */
}
body.print-full .pattern-box strong,
body.print-full .pattern-box em { color: #000 !important; }
body.print-full .pattern-box code { color: var(--p-red) !important; }

/* Near-white intro paragraphs are invisible in print and only leave gaps. */
body.print-full .cs-section > p { display: none !important; }

/* Collapse stray "Ready to Test Yourself?" CTA sections (they repeat once per
   tab); keep only the one carrying the QR (.print-fullqr). Quiz buttons are
   no-print, so these sections would otherwise print as empty titled boxes. */
body.print-full .cs-section:has(.btn-quiz):not(:has(.print-fullqr)) { display: none !important; }