/* ==========================================================================
   print.css — participant handouts (worksheet, take-home card, knowledge check)
   --------------------------------------------------------------------------
   Session-agnostic. Each handout is a series of .sheet blocks sized for
   US Letter (8.5 × 11 in). On screen you see a preview of each page with a
   Print button; in print each .sheet becomes one page.
   Grayscale-friendly: nothing depends on colour alone.
   ========================================================================== */
:root {
  --paper: #FAF6EF; --white: #fff; --ink: #1F2D2E; --ink-2: #4A5A5D;
  --teal: #1F5F6B; --teal-soft: #DCEBEC; --terra: #B3441C; --amber-soft: #FBECCB;
  --green: #2C7448; --green-soft: #DCEFE1; --line: #C9C0B0; --rule: #1F2D2E;
  --font-head: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --font-body: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 11.5pt; }
body { margin: 0; padding: 24px 16px 48px; background: #E8E2D6; color: var(--ink); font-family: var(--font-body); line-height: 1.35; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
h1, h2, h3 { margin: 0; font-family: var(--font-head); line-height: 1.15; }
p, ul, ol, table { margin: 0; }
ul, ol { padding-left: 1.2em; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #E9A63A; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Toolbar (screen only) */
.toolbar { max-width: 8.5in; margin: 0 auto 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 10.5pt; color: var(--ink-2); }
.toolbar .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border-radius: 99px; border: 2px solid var(--teal); background: var(--teal); color: var(--white); font-weight: 700; text-decoration: none; cursor: pointer; }
.toolbar .btn--ghost { background: transparent; color: var(--teal); }
.toolbar .btn .icon { width: 18px; height: 18px; }

/* Page */
.sheet {
  position: relative; width: 8.5in; min-height: 11in; margin: 0 auto 24px;
  background: var(--white); padding: 0.6in 0.65in 0.7in; box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  display: flex; flex-direction: column; gap: 10pt;
}
.sheet__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12pt; border-bottom: 2px solid var(--ink); padding-bottom: 6pt; }
.sheet__series { font-size: 8.5pt; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra); font-weight: 700; }
.sheet__title { font-size: 20pt; }
.sheet__sub { font-size: 10pt; color: var(--ink-2); }
.sheet__tag { font-size: 8.5pt; font-weight: 700; padding: 3pt 8pt; border: 1.5px solid var(--ink); border-radius: 99px; white-space: nowrap; }
.sheet__foot { margin-top: auto; padding-top: 6pt; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12pt; font-size: 8pt; color: var(--ink-2); }

/* Text */
.intro { font-size: 10.5pt; color: var(--ink-2); }
.h2 { font-size: 13pt; margin-top: 4pt; }
.h3 { font-size: 11pt; font-family: var(--font-body); font-weight: 700; }
.small { font-size: 9pt; color: var(--ink-2); }
.note { font-size: 9pt; color: var(--ink-2); padding: 5pt 8pt; background: var(--paper); border-left: 3px solid var(--teal); }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; display: inline-block; }
.big { font-family: var(--font-head); font-size: 22pt; line-height: 1; }

/* Layout */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12pt; }
.cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10pt; }
.cols-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 12pt; }
.stack { display: flex; flex-direction: column; gap: 8pt; }
.row { display: flex; gap: 10pt; align-items: center; flex-wrap: wrap; }

/* Boxes */
.box { border: 1.5px solid var(--ink); border-radius: 8pt; padding: 8pt 10pt; display: flex; flex-direction: column; gap: 6pt; break-inside: avoid; }
.box--tint { background: var(--paper); border-color: var(--line); }
.box--teal { background: var(--teal-soft); border-color: transparent; }
.box--amber { background: var(--amber-soft); border-color: transparent; }
.box--green { background: var(--green-soft); border-color: transparent; }
.box__title { font-weight: 700; font-size: 11pt; }

/* Blanks and checkboxes */
.blank { display: inline-block; min-width: 1.2in; border-bottom: 1.5px solid var(--rule); height: 1.25em; vertical-align: baseline; }
.blank--sm { min-width: 0.8in; }
.blank--lg { min-width: 2.4in; }
.blank--xl { min-width: 3.2in; }
.blank--full { display: block; width: 100%; height: 1.5em; }
.line { display: block; font-size: 10.5pt; line-height: 2; }
.line .blank { margin: 0 3pt; }
.ck { display: inline-block; width: 11pt; height: 11pt; border: 1.5px solid var(--ink); border-radius: 2pt; vertical-align: -1.5pt; margin-right: 5pt; flex: none; }
.ck--lg { width: 14pt; height: 14pt; }
.check-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4pt; font-size: 10.5pt; }
.check-list li { display: flex; gap: 6pt; align-items: baseline; }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 10pt; }
.tbl th, .tbl td { border: 1px solid var(--ink); padding: 4pt 6pt; text-align: left; vertical-align: top; }
.tbl th { background: var(--paper); font-size: 8.5pt; letter-spacing: 0.06em; text-transform: uppercase; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.write { height: 20pt; }
.tbl td.write--tall { height: 30pt; }
.tbl tr.total td { font-weight: 700; background: var(--amber-soft); }
.tbl--compact td, .tbl--compact th { padding: 2.5pt 5pt; }
.tbl--lines td { height: 17pt; }
.tbl--lines td.narrow { width: 0.55in; }
.tbl--lines td.amt { width: 0.75in; }
.tbl--lines td.nwp { width: 0.6in; text-align: center; font-size: 8pt; color: var(--ink-2); }

/* Ladder (print) */
.ladder-p { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8pt; align-items: end; }
.ladder-p__step { border: 1.5px solid var(--ink); border-radius: 8pt; padding: 8pt; display: flex; flex-direction: column; gap: 4pt; background: var(--white); }
.ladder-p__step:nth-child(1) { min-height: 0.9in; }
.ladder-p__step:nth-child(2) { min-height: 1.15in; }
.ladder-p__step:nth-child(3) { min-height: 1.4in; background: var(--teal-soft); }
.ladder-p__step:nth-child(4) { min-height: 1.65in; background: var(--teal-soft); }
.ladder-p__value { font-family: var(--font-head); font-size: 15pt; line-height: 1; }
.ladder-p__label { font-size: 9pt; font-weight: 700; }
.ladder-p__hint { font-size: 8pt; color: var(--ink-2); }

/* Take-home card */
.card-sheet { justify-content: center; }
.thcard { border: 2px solid var(--ink); border-radius: 12pt; padding: 22pt 24pt; display: flex; flex-direction: column; gap: 12pt; background: var(--white); break-inside: avoid; }
.thcard__head { display: flex; justify-content: space-between; align-items: center; gap: 12pt; }
.thcard__title { font-size: 22pt; }
.thcard__actions { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8pt; counter-reset: n; }
.thcard__actions li { display: flex; gap: 10pt; align-items: flex-start; font-size: 11pt; }
.thcard__actions li::before { counter-increment: n; content: counter(n); flex: none; width: 20pt; height: 20pt; border-radius: 50%; background: var(--teal); color: var(--white); font-weight: 700; display: grid; place-items: center; font-size: 11pt; }
.thcard__fill { display: flex; flex-direction: column; gap: 8pt; padding: 10pt 14pt; background: var(--amber-soft); border-radius: 8pt; font-size: 13pt; }
.thcard__fill .line { font-size: 12.5pt; line-height: 1.8; }
.thcard__path { display: flex; gap: 6pt; align-items: center; flex-wrap: wrap; font-size: 9pt; font-weight: 700; }
.thcard__path .pill { padding: 2pt 8pt; border: 1.5px solid var(--ink); border-radius: 99px; }
.thcard__path .pill--on { background: var(--ink); color: var(--white); }
.thcard__q { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8pt; font-size: 9.5pt; }
.thcard__q div { padding: 6pt 8pt; border: 1px solid var(--line); border-radius: 6pt; }
.thcard__q strong { display: block; color: var(--teal); }

/* Knowledge check */
.q { display: flex; flex-direction: column; gap: 4pt; break-inside: avoid; padding: 6pt 9pt; border: 1px solid var(--line); border-radius: 8pt; }
.q__num { font-family: var(--font-head); font-size: 14pt; color: var(--terra); margin-right: 4pt; }
.q__text { font-size: 10.5pt; }
.q__opts { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3pt 12pt; font-size: 10pt; }
.q__opts li { display: flex; gap: 6pt; align-items: baseline; }
.q__opts .key { font-weight: 700; color: var(--teal); flex: none; width: 1.1em; }

/* Screen-only vs print */
@media screen and (max-width: 900px) {
  .sheet { width: 100%; min-height: 0; padding: 24px 18px; }
  .cols-2, .cols-3, .cols-2-1, .ladder-p, .thcard__q, .q__opts { grid-template-columns: 1fr; }
}
@page { size: letter; margin: 0.5in; }
/* ===================================================================
   LANGUAGE SWITCH AND RIGHT-TO-LEFT (Persian) — added for the bilingual build
   =================================================================== */
/* Vazirmatn — Persian text face, bundled so the deck still works offline.
   SIL Open Font License 1.1 · assets/fonts/OFL.txt · github.com/rastikerdar/vazirmatn */
@font-face { font-family: "Vazirmatn"; src: url("../assets/fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../assets/fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../assets/fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }

:root { --font-fa: "Vazirmatn", "IRANSans", "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", Tahoma, "Arial Unicode MS", sans-serif; }
.langswitch { display: inline-flex; gap: 2px; margin-inline-start: auto; }
.langbtn {
  font-family: var(--font-body); font-size: 10.5pt; font-weight: 700; line-height: 1;
  min-height: 40px; padding: 6px 14px; border: 2px solid var(--teal); background: transparent;
  color: var(--teal); border-radius: 99px; cursor: pointer;
}
.langbtn[aria-pressed="true"] { background: var(--teal); color: var(--white); }
.langbtn[lang="fa"] { font-family: var(--font-fa); }

.lang-fa { --font-head: var(--font-fa); --font-body: var(--font-fa); }
.lang-fa { line-height: 1.7; }
.lang-fa em, .lang-fa i { font-style: normal; font-weight: 700; }

[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.2em; }
[dir="rtl"] .note { border-left: 0; border-right: 3px solid var(--teal); }
[dir="rtl"] .ck { margin-right: 0; margin-left: 5pt; }
[dir="rtl"] .q__num { margin-right: 0; margin-left: 4pt; }

/* ---- both languages at once ---- */
.bl-fa { font-family: var(--font-fa); direction: rtl; text-align: right; color: var(--teal); display: block; }
.bl-fa--inline { display: block; width: 100%; margin-top: 2pt; }
.bl-fa > svg, .bl-fa .ck, .bl-fa .blank { display: none; }
/* a numbered item and its twin are one item: the twin must not take a number */
.lang-both .thcard__actions li.bl-fa::before { counter-increment: none; visibility: hidden; }
.lang-both .q__num { visibility: visible; }
.lang-both .bl-fa .q__num { visibility: hidden; }
/* Persian runs longer than the English it replaces; without this the five
   knowledge-check questions spill onto a second sheet. */
.lang-fa .q { padding: 4.5pt 8pt; gap: 2.5pt; }
.lang-fa .q__text { font-size: 10pt; }
.lang-fa .q__opts { font-size: 9.5pt; gap: 2pt 10pt; }
.lang-fa .q__num { font-size: 12.5pt; }
.lang-fa .sheet { gap: 6pt; }
[dir="rtl"] .tbl th, [dir="rtl"] .tbl td { text-align: right; }
[dir="rtl"] .tbl td.num, [dir="rtl"] .tbl th.num { text-align: left; }
/* Amounts, dates and web addresses stay left-to-right inside a Persian line */
[dir="rtl"] .num, [dir="rtl"] .blank { direction: ltr; unicode-bidi: isolate; }

@media print {
  html { font-size: 11pt; }
  body { background: var(--white); padding: 0; }
  .toolbar, .no-print { display: none !important; }
  .sheet { width: auto; min-height: 9.6in; margin: 0; padding: 0.05in 0.1in; box-shadow: none; break-after: page; page-break-after: always; gap: 8pt; }
  .q { padding: 5pt 9pt; gap: 3pt; }
  .sheet:last-of-type { break-after: auto; page-break-after: auto; }
  .card-sheet { min-height: 0; padding-top: 0; }
  .thcard { padding: 16pt 20pt; gap: 10pt; }
  a { color: inherit; text-decoration: none; }
}


/* ===================================================================
   PHONES AND NARROW SCREENS
   On screen a handout is drawn as an 8.5in "page" so it matches the print.
   On a phone that page is wider than the screen and the right-hand side is
   lost. Below the page width, let the sheet fill the screen and stack the
   columns. Screen only: nothing here applies when printing.
   =================================================================== */
@media screen and (max-width: 8.8in) {
  body { padding: 12px 8px 32px; }
  .toolbar { max-width: 100%; }
  .sheet {
    width: 100%; max-width: 8.5in; min-height: 0;
    padding: 18px 14px 20px; overflow-wrap: anywhere;
  }
  .faq-sheet { min-height: 0; }
  .sheet__head { flex-wrap: wrap; align-items: flex-start; }
  .cols-2, .cols-3, .cols-2-1, .side-by-side { grid-template-columns: minmax(0, 1fr); }
  /* grid and flex items refuse to shrink below their content unless told to */
  .cols-2 > *, .cols-3 > *, .cols-2-1 > *, .side-by-side > *, .box, .note { min-width: 0; max-width: 100%; }
  /* a wide table scrolls inside its own box instead of pushing the page wide */
  .tbl { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .blank, .blank--sm, .blank--lg { max-width: 100%; }
  /* the longest fill-in lines would run past the screen: give each its own full-width line */
  .blank--xl { display: block; width: 100%; min-width: 0; max-width: 100%; margin: 0 0 2pt; }
  .sheet__foot { flex-direction: column; gap: 2pt; }
  .thcard, .card-sheet { max-width: 100%; }
}

/* both languages at once: a twin placed inside its item */
.bl-fa { text-transform: none; letter-spacing: 0; }
.tbl th > .bl-fa--inline, .tbl td > .bl-fa--inline { font-size: 0.9em; margin-top: 1pt; }
.bl-fa.sheet__foot { display: flex; }
.bl-fa > span + span { margin-inline-start: 0.6em; }