/* ==========================================================================
   deck.css — Financial Literacy Education Series · slide-deck design system
   --------------------------------------------------------------------------
   Session-agnostic. Copy this file unchanged into every session folder.
   Session content lives in index.html; only the <section class="slide">
   blocks change between sessions.

   SIZING MODEL
   1rem = 1% of the 16:9 stage width. The stage always fits the viewport
   (letterboxed), so a layout that fits at one size fits at every size.
   Use rem for everything inside a slide. Body text = 2rem (32px on a
   1600px-wide stage, ~26px on a 1280x720 projector).

   Narrow / portrait screens switch to "compact mode" (see the bottom of
   this file): the stage becomes a normal scrolling page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Warm, community palette. All text colours pass WCAG AA on --paper. */
  --paper:       #FAF6EF;   /* page ground */
  --paper-2:     #F1EADF;   /* alt surface */
  --white:       #FFFFFF;
  --ink:         #1F2D2E;   /* primary text  (13.9:1 on paper) */
  --ink-2:       #4A5A5D;   /* secondary text (6.5:1) */
  --teal:        #1F5F6B;   /* primary brand (6.8:1) */
  --teal-deep:   #16454E;
  --teal-soft:   #DCEBEC;
  --terra:       #B3441C;   /* accent (5.4:1) */
  --terra-deep:  #8E3414;
  --terra-soft:  #F7DED2;
  --amber:       #E9A63A;   /* highlight — use with --ink text only */
  --amber-soft:  #FBECCB;
  --green:       #2C7448;   /* positive (5.6:1) */
  --green-soft:  #DCEFE1;
  --rose:        #A93443;   /* caution (6.0:1) */
  --rose-soft:   #F8DDE0;
  --line:        #DCD3C4;
  --shadow:      0 0.6rem 1.8rem rgba(60, 40, 20, 0.10);

  --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;

  --radius: 1.4rem;
  --radius-sm: 0.8rem;
  --nav-h: 56px;             /* fixed pixel height of the bottom navigation bar */
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* 1rem = 1% of stage width; stage = 16:9 box that fits above the nav bar */
  font-size: calc(min(1vw, calc((100vh - var(--nav-h)) / 56.25)) * var(--zoom, 1));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
strong { font-weight: 700; }
em { font-style: italic; }
svg { display: block; }
abbr[title] { text-decoration: none; }

.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Visible keyboard focus everywhere (amber ring + dark halo works on any surface) */
:focus-visible {
  outline: 0.35rem solid var(--amber);
  outline-offset: 0.25rem;
  box-shadow: 0 0 0 0.8rem rgba(31, 45, 46, 0.35);
}
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -6rem; z-index: 50;
  background: var(--ink); color: var(--white); padding: 1rem 1.5rem; border-radius: var(--radius-sm);
  font-size: 1.6rem;
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. Stage & slides
   -------------------------------------------------------------------------- */
.deck {
  position: fixed;
  inset: 0 0 var(--nav-h) 0;
  display: grid;
  place-items: center;
}

.stage {
  position: relative;
  /* the stage keeps its physical size; --zoom only changes how big the type is
     inside it, which is what makes room for a second language */
  width: calc(100rem / var(--zoom, 1));
  height: calc(56.25rem / var(--zoom, 1));
  overflow: hidden;
  background: var(--paper);
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding: 3rem 5rem 2.6rem;
  font-size: 2rem;
  line-height: 1.35;
  overflow-x: hidden;
  overflow-y: auto;            /* safety valve: never clip content */
  animation: slide-in 260ms ease-out;
}
@keyframes slide-in { from { opacity: 0; transform: translateX(1.2rem); } to { opacity: 1; transform: none; } }

.slide__header { display: flex; flex-direction: column; gap: 0.6rem; }
.eyebrow {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra);
}
.slide__title { font-size: 4rem; max-width: 86rem; }
.slide__title--xl { font-size: 5.6rem; }
.slide__title--q { font-size: 3.6rem; max-width: 90rem; }   /* long questions */
.lede { font-size: 2.3rem; color: var(--ink-2); max-width: 78rem; }

.slide__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
  /* no min-height:0 here: when content is taller than the slide it must push
     the slide to scroll, not overflow upward into the header */
}
.slide__body--top { justify-content: flex-start; }
.slide__body--tight { gap: 1.2rem; }

.slide__footer { font-size: 1.55rem; color: var(--ink-2); display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.slide__footer .icon { font-size: 1.8rem; }

/* Title slide */
.slide--title { justify-content: center; padding-left: 8rem; padding-right: 8rem; background:
  radial-gradient(60rem 40rem at 90% 10%, var(--amber-soft) 0%, transparent 60%),
  radial-gradient(50rem 40rem at 5% 100%, var(--teal-soft) 0%, transparent 60%),
  var(--paper);
}
.slide--title .slide__title { font-size: 6.4rem; max-width: 80rem; }
.slide--title .lede { font-size: 2.8rem; color: var(--teal); font-family: var(--font-head); font-style: italic; }
.brand-line { display: flex; align-items: center; gap: 1.6rem; font-size: 1.8rem; color: var(--ink-2); flex-wrap: wrap; }
.brand-line .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--terra); }

/* Closing / statement slides */
.statement {
  font-family: var(--font-head);
  font-size: 5.2rem;
  line-height: 1.15;
  max-width: 82rem;
  color: var(--teal-deep);
}
.statement mark { background: linear-gradient(transparent 55%, var(--amber-soft) 55%); color: inherit; padding: 0 0.2em; }
.statement--sm { font-size: 3.6rem; }

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 1.6rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--2-1 { grid-template-columns: 2fr 1fr; }
.grid--3-2 { grid-template-columns: 3fr 2fr; }
.grid--1-1-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.stack { display: flex; flex-direction: column; gap: 1.4rem; }
.stack--tight { gap: 0.8rem; }
.row { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.center { text-align: center; align-items: center; }
.mt-auto { margin-top: auto; }
.max-w { max-width: 80rem; }

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */
/* Cards */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
}
.card--flat { box-shadow: none; }
.card--teal  { background: var(--teal-soft);  border-color: transparent; }
.card--amber { background: var(--amber-soft); border-color: transparent; }
.card--green { background: var(--green-soft); border-color: transparent; }
.card--rose  { background: var(--rose-soft);  border-color: transparent; }
.card--terra { background: var(--terra-soft); border-color: transparent; }
.card--ink   { background: var(--teal-deep); color: var(--white); border-color: transparent; }
.card--ink .card__title, .card--ink .eyebrow { color: var(--white); }
.card--ink .card__icon { background: rgba(255,255,255,0.14); color: var(--amber); }
.card--ink .muted { color: rgba(255,255,255,0.8); }
.card__icon {
  width: 4rem; height: 4rem; border-radius: 1.1rem;
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--teal);
  font-size: 2.3rem;
}
.card--teal .card__icon  { background: rgba(31,95,107,0.12); }
.card--amber .card__icon { background: rgba(233,166,58,0.28); color: var(--terra-deep); }
.card--green .card__icon { background: rgba(44,116,72,0.14); color: var(--green); }
.card--rose .card__icon  { background: rgba(169,52,67,0.12); color: var(--rose); }
.card--terra .card__icon { background: rgba(179,68,28,0.12); color: var(--terra); }
.card__title { font-family: var(--font-body); font-size: 2.1rem; font-weight: 700; line-height: 1.2; }
.card .card .card__title { font-size: 2rem; }
.card__text { font-size: 1.75rem; color: var(--ink-2); overflow-wrap: break-word; }
.list li span, .reveal, .note, .statement { overflow-wrap: break-word; }
.card--ink .card__text { color: rgba(255,255,255,0.85); }
.card__head { display: flex; align-items: center; gap: 1.2rem; }
.card--center { align-items: center; text-align: center; }

/* Big numbers */
.stat { display: flex; flex-direction: column; gap: 0.3rem; }
.stat__value { font-family: var(--font-head); font-size: 4.8rem; line-height: 1; color: var(--teal-deep); font-variant-numeric: tabular-nums; }
.stat__value--sm { font-size: 3.4rem; }
.stat__value--terra { color: var(--terra); }
.stat__value--green { color: var(--green); }
.stat__value--rose { color: var(--rose); }
.stat__label { font-size: 1.7rem; color: var(--ink-2); font-weight: 600; }

/* Tags / pills */
.tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 1rem; border-radius: 99rem;
  font-size: 1.5rem; font-weight: 700; line-height: 1.2;
  background: var(--paper-2); color: var(--ink);
  white-space: nowrap;
}
.tag .icon { font-size: 1.5rem; }
.tag--teal  { background: var(--teal-soft);  color: var(--teal-deep); }
.tag--green { background: var(--green-soft); color: var(--green); }
.tag--amber { background: var(--amber-soft); color: var(--terra-deep); }
.tag--rose  { background: var(--rose-soft);  color: var(--rose); }
.tag--ink   { background: var(--ink); color: var(--white); }

/* Text helpers */
.muted { color: var(--ink-2); }
.small { font-size: 1.6rem; }
.note { font-size: 1.55rem; color: var(--ink-2); position: relative; padding-left: 2.6rem; }
.note .icon { position: absolute; left: 0; top: 0.15rem; font-size: 1.8rem; color: var(--teal); }
.hl { background: linear-gradient(transparent 58%, var(--amber-soft) 58%); padding: 0 0.15em; }
.money { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Lists */
.list { display: flex; flex-direction: column; gap: 1.1rem; }
.list li { display: flex; gap: 1.2rem; align-items: flex-start; }
.list .icon { font-size: 2.4rem; flex: none; margin-top: 0.15rem; }
.list--check .icon { color: var(--green); }
.list--x .icon { color: var(--rose); }
.list--num { counter-reset: n; }
.list--num li::before {
  counter-increment: n; content: counter(n);
  flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--teal); color: var(--white); font-weight: 700; font-size: 1.8rem;
}
.list--tight { gap: 0.6rem; }
.list--lg { font-size: 2.3rem; }

/* Flow (A → B → C) */
.flow { display: flex; align-items: stretch; gap: 1rem; }
.flow__item { flex: 1; min-width: 0; }
.flow__arrow { display: grid; place-items: center; color: var(--terra); font-size: 3rem; flex: none; }

/* Journey (series roadmap) */
.journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; }
.journey__step {
  position: relative; padding: 1.6rem 1.4rem 1.4rem; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.6rem; min-width: 0;
}
.journey__step--here { background: var(--teal-deep); color: var(--white); border-color: transparent; box-shadow: var(--shadow); }
.journey__num { font-family: var(--font-head); font-size: 3rem; line-height: 1; color: var(--terra); }
.journey__step--here .journey__num { color: var(--amber); }
.journey__name { font-size: 1.85rem; font-weight: 700; line-height: 1.2; }
.journey__phase { font-size: 1.5rem; color: var(--ink-2); }
.journey__step--here .journey__phase { color: rgba(255,255,255,0.8); }
.journey__here { position: absolute; top: -1.3rem; left: 1.4rem; font-size: 1.3rem; background: var(--amber); color: var(--ink); padding: 0.25rem 0.9rem; border-radius: 99rem; font-weight: 700; letter-spacing: 0.06em; }

/* Agenda rows */
.agenda { display: flex; flex-direction: column; gap: 0.9rem; }
.agenda__row { display: grid; grid-template-columns: 11rem 1fr; gap: 1.4rem; align-items: center; padding: 0.7rem 1.3rem; background: var(--white); border-radius: var(--radius-sm); border: 1px solid var(--line); }
.agenda__time { font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }

/* Ladder (stepped milestones) */
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; align-items: end; }
.ladder__step { display: flex; flex-direction: column; gap: 0.8rem; }
.ladder__box {
  border-radius: var(--radius); padding: 1.6rem 1.4rem;
  background: var(--teal-soft); color: var(--teal-deep);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem;
  border: 1px solid transparent;
}
.ladder__step:nth-child(1) .ladder__box { min-height: 12rem; }
.ladder__step:nth-child(2) .ladder__box { min-height: 16rem; }
.ladder__step:nth-child(3) .ladder__box { min-height: 20rem; background: var(--teal); color: var(--white); }
.ladder__step:nth-child(4) .ladder__box { min-height: 24rem; background: var(--teal-deep); color: var(--white); }
.ladder__value { font-family: var(--font-head); font-size: 2.7rem; line-height: 1; }
.ladder__label { font-size: 1.7rem; font-weight: 600; }
.ladder__hint { font-size: 1.55rem; color: var(--ink-2); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  min-height: 4.4rem; padding: 0.9rem 1.8rem;
  border-radius: 99rem; border: 2px solid var(--teal);
  background: var(--teal); color: var(--white);
  font-size: 1.8rem; font-weight: 700; line-height: 1.2;
  text-decoration: none;
}
.btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.btn--ghost { background: transparent; color: var(--teal); }
.btn--ghost:hover { background: var(--teal-soft); }
.btn--terra { background: var(--terra); border-color: var(--terra); }
.btn--terra:hover { background: var(--terra-deep); border-color: var(--terra-deep); }
.btn--sm { min-height: 3.6rem; padding: 0.5rem 1.4rem; font-size: 1.6rem; }
.btn .icon { font-size: 1.9rem; }

/* Choice buttons (polls, sorting, decisions). One group = one .choice-group. */
.choice-group { display: grid; gap: 1rem; align-content: start; }
.choice-group--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-group--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice-group--3 .choice, .choice-group--4 .choice { justify-content: center; }
.choice-group--row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.choice {
  display: flex; align-items: center; gap: 1.2rem; text-align: left;
  min-height: 4.8rem; padding: 0.8rem 1.6rem;
  border-radius: var(--radius-sm); border: 2px solid var(--line);
  background: var(--white); color: var(--ink);
  font-size: 1.95rem; font-weight: 600; line-height: 1.25;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.choice:hover { border-color: var(--teal); background: var(--teal-soft); }
.choice:active { transform: scale(0.99); }
.choice .icon { font-size: 2.4rem; color: var(--teal); }
.choice__key {
  flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--teal-deep); font-weight: 700; font-size: 1.6rem;
}
.choice[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: var(--white); }
.choice[aria-pressed="true"] .icon { color: var(--amber); }
.choice[aria-pressed="true"] .choice__key { background: var(--amber); color: var(--ink); }
.choice[aria-pressed="true"]::after { content: "✓"; margin-left: auto; font-weight: 700; }
.choice--sm { min-height: 4rem; padding: 0.5rem 1.2rem; font-size: 1.6rem; gap: 0.7rem; }
.choice--sm .icon { font-size: 1.8rem; }
.choice-group[data-locked] .choice:not([aria-pressed="true"]) { opacity: 0.55; }

/* Reveal panels: hidden until a choice is made (or "Show all") */
.reveal { display: none; }
.reveal.is-open { display: flex; flex-direction: column; gap: 0.8rem; animation: reveal-in 220ms ease-out; }
.reveal--inline.is-open { display: block; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }

/* Sorting items (Need / Want / It depends) */
.sort-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sort-item { padding: 1.1rem 1.2rem 1rem; gap: 0.7rem; box-shadow: none; }
.sort-item .card__head { gap: 0.8rem; }
.sort-item .card__icon { width: 3rem; height: 3rem; font-size: 1.8rem; border-radius: 0.8rem; }
.sort-item .card__title { font-size: var(--t, 1.7rem); }
.sort-item .choice-group--row { display: grid; grid-template-columns: var(--cols, 1fr 1fr 1.55fr); gap: 0.5rem; }
.sort-item .choice--sm { min-height: 3.2rem; padding: 0.2rem 0.4rem; font-size: 1.4rem; justify-content: center; white-space: nowrap; }
.sort-item .choice--sm[aria-pressed="true"]::after,
.choice-group--3 .choice[aria-pressed="true"]::after,
.choice-group--4 .choice[aria-pressed="true"]::after { content: none; }
.sort-item .reveal { font-size: 1.45rem; color: var(--ink-2); line-height: 1.3; }
.sort-item .reveal.is-open { display: block; }
.sort-item .reveal .tag { font-size: 1.3rem; padding: 0.2rem 0.8rem; margin-right: 0.3rem; vertical-align: 0.1rem; }

/* Fields (calculators / fill-ins). Nothing is saved. */
.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.field__label { font-size: 1.7rem; font-weight: 700; }
.field__hint { font-size: 1.4rem; color: var(--ink-2); }
.field__input {
  width: 100%; min-height: 4.6rem; padding: 0.7rem 1.2rem;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); font-size: 2rem; font-variant-numeric: tabular-nums;
}
.field__input:focus { border-color: var(--teal); }
/* Money input group: the "$" and the input share one bordered box, so the
   prefix can never drift when the surrounding grid stretches the field. */
.field__wrap {
  display: flex; align-items: center;
  min-height: 4.6rem; border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white);
}
.field__wrap:focus-within { border-color: var(--teal); outline: 0.35rem solid var(--amber); outline-offset: 0.25rem; box-shadow: 0 0 0 0.8rem rgba(31, 45, 46, 0.35); }
.field--money .field__prefix { flex: none; padding: 0 0.2rem 0 1.1rem; font-size: 2rem; line-height: 1; color: var(--ink-2); font-weight: 700; }
.field--money .field__input { flex: 1; min-width: 0; min-height: 4.2rem; border: 0; background: transparent; padding-left: 0.4rem; }
.field--money .field__input:focus, .field--money .field__input:focus-visible { outline: none; box-shadow: none; border: 0; }
.field--line .field__input { border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; padding-left: 0.4rem; }
.fillin { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem; font-size: 2.3rem; line-height: 1.4; }
.fillin .field__input { display: inline-block; width: 14rem; min-height: 3.8rem; font-size: 2.1rem; }
.fillin .field__input--wide { width: 34rem; }

/* Growth bar (calculator illustration) */
.gbar { display: flex; height: 3.2rem; border-radius: 0.8rem; overflow: hidden; background: var(--paper-2); }
.gbar__seg { height: 100%; transition: width 240ms ease-out; }
.gbar__seg--you { background: var(--teal); }
.gbar__seg--growth { background: var(--amber); }
.gbar-legend { display: flex; gap: 1.6rem; font-size: 1.5rem; color: var(--ink-2); }
.gbar-legend span::before { content: ""; display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 0.3rem; margin-right: 0.5rem; vertical-align: -0.1rem; background: var(--teal); }
.gbar-legend span + span::before { background: var(--amber); }

/* Result panel */
.result { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.8rem 2rem; border-radius: var(--radius); background: var(--teal-deep); color: var(--white); }
.result__label { font-size: 1.6rem; opacity: 0.85; font-weight: 600; }
.result__value { font-family: var(--font-head); font-size: 5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.result__value--neg { color: #FFC9CF; }
.result__note { font-size: 1.55rem; opacity: 0.9; }
.result--soft { background: var(--teal-soft); color: var(--teal-deep); padding: 1.2rem 1.6rem; }
.result--soft .result__value { font-size: 4rem; }
.result--soft .result__value--neg { color: var(--rose); }

/* Simple tables */
.table { width: 100%; border-collapse: collapse; font-size: 1.75rem; background: var(--white); border-radius: var(--radius-sm); overflow: hidden; }
.table th, .table td { padding: 0.55rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line); }
.table th { font-size: 1.45rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); background: var(--paper-2); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tr.total td { font-weight: 700; background: var(--amber-soft); border-bottom: 0; }
.table--compact td, .table--compact th { padding: 0.4rem 1rem; }
.table--sm { font-size: 1.6rem; }

/* Checkbox rows (scenario adjustments) */
.check-row {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0.6rem 1.2rem; border-radius: var(--radius-sm);
  background: var(--white); border: 2px solid var(--line); cursor: pointer;
  font-size: 1.7rem;
}
.check-row:hover { border-color: var(--teal); }
.check-row input { width: 2.4rem; height: 2.4rem; margin: 0; accent-color: var(--teal); flex: none; cursor: pointer; }
.check-row:has(input:checked) { background: var(--green-soft); border-color: var(--green); }
.check-row__saves { margin-left: auto; font-weight: 700; color: var(--green); white-space: nowrap; }

/* Speaker notes (toggle with N) */
.notes { display: none; }
/* With the notes open the slide body gives up the room: it may shrink below
   its content (min-height:0) and scroll, so the notes always get their own
   space instead of being squeezed into a single clipped line. */
.deck.show-notes .slide.is-active .slide__body { min-height: 0; overflow-y: auto; }
.deck.show-notes .slide.is-active .notes {
  display: block; flex: none; margin-top: auto;
  background: var(--ink); color: var(--white); padding: 1rem 1.4rem;
  border-radius: var(--radius-sm); font-size: 1.5rem; line-height: 1.4;
  min-height: 6rem; max-height: 40%; overflow-y: auto;
}
.notes strong { color: var(--amber); }

/* Fragments (reveal step-by-step with → ) */
.fragment { opacity: 0; visibility: hidden; transform: translateY(0.6rem); transition: opacity 220ms ease-out, transform 220ms ease-out; }
.fragment.is-visible { opacity: 1; visibility: visible; transform: none; }

/* --------------------------------------------------------------------------
   6. Navigation bar, progress, dialogs
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--nav-h);
  display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: var(--paper-2); border-top: 1px solid var(--line);
  font-size: 15px; color: var(--ink-2); z-index: 20;
}
.nav__btn {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 40px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink);
  font-size: 15px; font-weight: 600;
}
.nav__btn:hover { background: var(--teal-soft); border-color: var(--teal); }
.nav__btn:disabled { opacity: 0.4; cursor: default; }
.nav__btn .icon { width: 20px; height: 20px; }
.nav__btn--primary { background: var(--teal); color: var(--white); border-color: var(--teal); min-width: 96px; }
.nav__btn--primary:hover { background: var(--teal-deep); }
.nav__progress { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nav__meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.nav__section { font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--terra)); transition: width 240ms ease-out; }
.nav__tools { display: flex; gap: 6px; }
.nav__label { display: inline; }

dialog.panel {
  border: 0; border-radius: 16px; padding: 0; max-width: min(720px, 92vw); width: 100%;
  background: var(--white); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  font-size: 16px;
}
dialog.panel::backdrop { background: rgba(31,45,46,0.55); }
.panel__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.panel__head h2 { font-size: 22px; }
.panel__body { padding: 18px 22px; max-height: 70vh; overflow: auto; }
.panel__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); font-size: 20px; }
.menu__section { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra); margin: 14px 0 6px; }
.menu__section:first-child { margin-top: 0; }
.menu__item { display: flex; gap: 12px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 16px; }
.menu__item:hover { background: var(--teal-soft); }
.menu__item[aria-current="true"] { background: var(--teal); color: var(--white); }
.menu__num { width: 28px; text-align: right; font-variant-numeric: tabular-nums; color: inherit; opacity: 0.7; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; }
kbd { display: inline-block; min-width: 26px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); border-bottom-width: 3px; background: var(--paper); font-family: var(--font-body); font-size: 14px; text-align: center; }

/* --------------------------------------------------------------------------
   7. Compact mode — narrow or portrait screens become a scrolling page
   -------------------------------------------------------------------------- */
@media screen and (max-width: 720px), screen and (orientation: portrait) {
  html { font-size: clamp(8px, 1.9vw, 10px); }
  body { overflow: auto; }
  .deck { position: static; display: block; padding-bottom: var(--nav-h); }
  .stage { width: 100%; height: auto; min-height: calc(100vh - var(--nav-h)); overflow: visible; }
  .slide { position: relative; inset: auto; min-height: calc(100vh - var(--nav-h)); padding: 3rem 2.4rem 3rem; overflow: visible; }
  .slide--title { padding: 4rem 2.4rem; }
  .grid--2, .grid--3, .grid--4, .grid--5, .grid--2-1, .grid--3-2, .grid--1-1-tight, .journey, .ladder, .sort-grid { grid-template-columns: 1fr !important; }
  .ladder__step .ladder__box { min-height: 0 !important; }
  .flow { flex-direction: column; }
  .flow__arrow { transform: rotate(90deg); }
  .agenda__row { grid-template-columns: 1fr; gap: 0.3rem; }
  .nav__label { display: none; }
  .nav__section { display: none; }
  .deck.show-notes .slide.is-active .notes { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  .slide, .reveal.is-open { animation: none; }
  .fragment, .progress__bar, .choice { transition: none; }
}

/* --------------------------------------------------------------------------
   8. Printing the deck itself (one slide per landscape Letter page)
   Participant handouts have their own stylesheet (styles/print.css).
   -------------------------------------------------------------------------- */
@media print {
  @page { size: letter landscape; margin: 0.4in; }
  html { font-size: 0.1in; }          /* 100rem = 10in stage width on a 10.2in printable page */
  body { overflow: visible; background: #fff; }
  .deck { position: static; display: block; }
  .stage { width: 100rem; height: auto; overflow: visible; margin: 0 auto; background: #fff; }
  .slide { display: flex !important; position: relative; inset: auto; height: 56.25rem; overflow: hidden; break-after: page; page-break-after: always; animation: none; border: 1px solid var(--line); }
  .slide:last-of-type { break-after: auto; page-break-after: auto; }
  .fragment { opacity: 1; visibility: visible; transform: none; }
  .reveal { display: flex; }
  .sort-item .reveal { display: block; }
  .nav, .skip-link, dialog { display: none !important; }
  .notes { display: none !important; }
  .card, .journey__step, .ladder__box, .result { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===================================================================
   LANGUAGE SWITCH, LIVE ROOM, AND RIGHT-TO-LEFT (Persian)
   Added for the bilingual build. The English layout is untouched: every
   rule below is scoped to the switch, the live-room chrome, or [dir="rtl"].
   =================================================================== */

/* ---- language switch in the bottom bar ---- */
.langswitch { display: flex; gap: 2px; margin-inline-start: 2px; }
.nav__btn[data-exit] { margin-inline-end: 12px; }
.langbtn {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1;
  padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent;
  color: inherit; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.langbtn + .langbtn { margin-inline-start: -1px; }
.langbtn[aria-pressed="true"] { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.langbtn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.langbtn[lang="fa"] { font-family: var(--font-fa); font-size: 14px; }

/* ---- live-room chip and panel ---- */
.syncchip {
  position: fixed; inset-inline-end: 14px; bottom: calc(var(--nav-h) + 12px); z-index: 60;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: 99px; border: 0;
  background: var(--ink); color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.syncchip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex: none; }
.syncchip--live .syncchip__dot { background: #4ADE80; }
.syncchip--paused { background: var(--terra); }
.syncchip--lost .syncchip__dot { background: var(--rose); }
.panel--sync { max-width: 34rem; text-align: center; }
.panel--sync .panel__head { justify-content: space-between; }
.panel__lead { font-size: 16px; line-height: 1.5; margin: 0 0 14px; }
.panel__note { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 12px 0 0; }
.roomcode {
  font-family: var(--font-head); font-size: 44px; font-weight: 700; letter-spacing: 0.18em;
  margin: 6px 0; color: var(--teal-deep); background: var(--teal-soft);
  border-radius: 12px; padding: 12px 10px; direction: ltr; unicode-bidi: isolate;
}
.panel__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.panel--sync .btn {
  font-family: var(--font-body); font-size: 14px; font-weight: 600; padding: 9px 16px;
  border-radius: 99px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer;
}
.panel--sync .btn--primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.joinform { display: grid; gap: 8px; justify-items: center; }
.joinform label { font-size: 14px; font-weight: 600; }
.joinform input {
  font-family: var(--font-head); font-size: 30px; font-weight: 700; letter-spacing: 0.16em;
  text-align: center; text-transform: uppercase; width: 100%; max-width: 20rem;
  padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); direction: ltr;
}
.joinform input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-color: var(--teal); }
.joinform__error { font-size: 14px; color: var(--rose); margin: 0; min-height: 1.2em; }

/* 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; }

/* ---- Persian ---- */
:root { --font-fa: "Vazirmatn", "IRANSans", "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", Tahoma, "Arial Unicode MS", sans-serif; }
/* One switch: redefining the two font variables on the root element moves
   every heading, figure and label onto the Persian face at once. */
.lang-fa { --font-head: var(--font-fa); --font-body: var(--font-fa); }
/* Persian has no italic tradition — slanting the face just distorts it. */
.lang-fa em, .lang-fa i, .lang-fa .lede { font-style: normal; font-weight: 600; }
.lang-fa { line-height: 1.62; }   /* Persian needs more room than English, but 1.75 overflowed the densest slides */
/* Persian runs a little taller than the English it replaces, so the densest
   slides get their vertical rhythm back by tightening the frame, not the text. */
.lang-fa .slide { gap: 1.3rem; padding-top: 2.7rem; padding-bottom: 2.3rem; }
.lang-fa .slide__title { line-height: 1.3; }
/* Latin fragments (URLs, $ amounts, ABC234) inside Persian text keep their own run */
.lang-fa .num, .lang-fa kbd, .lang-fa code, .lang-fa .roomcode { direction: ltr; unicode-bidi: isolate; }

[dir="rtl"] .skip { left: auto; right: 1rem; }
[dir="rtl"] .note { padding-left: 0; padding-right: 2.6rem; }
[dir="rtl"] .note .icon { left: auto; right: 0; }
[dir="rtl"] .journey__here { left: auto; right: 1.4rem; }
[dir="rtl"] .choice[aria-pressed="true"]::after { margin-left: 0; margin-right: auto; }
[dir="rtl"] .sort-item .reveal .tag { margin-right: 0; margin-left: 0.3rem; }
[dir="rtl"] .field--money .field__input,
[dir="rtl"] .field--line .field__input { padding-left: 0; padding-right: 0.4rem; }
[dir="rtl"] .gbar-legend span::before { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .check-row__saves { margin-left: 0; margin-right: auto; }
[dir="rtl"] .table th, [dir="rtl"] .table td { text-align: right; }
[dir="rtl"] .table td.num, [dir="rtl"] .table th.num { text-align: left; }
[dir="rtl"] .menu__item { text-align: right; }
[dir="rtl"] .menu__num { text-align: left; }
[dir="rtl"] .nav__count, [dir="rtl"] .progress { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .sort-item { text-align: right; }
/* Money keeps the $ on the left of the figure even in a right-to-left line */
[dir="rtl"] .field--money .field__wrap { flex-direction: row; }
[dir="rtl"] .result__value, [dir="rtl"] .big-number, [dir="rtl"] .money { direction: ltr; unicode-bidi: isolate; }
/* The arrows on the Back / Next buttons point the way the reader travels */
[dir="rtl"] .nav__btn[data-nav="prev"] .icon, [dir="rtl"] .nav__btn[data-nav="next"] .icon { transform: scaleX(-1); }
[dir="rtl"] .nav__btn[data-exit] .icon { transform: scaleX(-1); }
[dir="rtl"] .journey__arrow, [dir="rtl"] .arrow { transform: scaleX(-1); }


/* ===================================================================
   BOTH LANGUAGES AT ONCE (for recording)
   English keeps the page's own layout; each piece of text gets a Persian
   twin right after it, with its own right-to-left direction.
   =================================================================== */
/* 0.62 is the largest type that keeps every slide of all five sessions inside
   the frame with both languages and every answer open. */
.lang-both { --zoom: 0.62; }

.bl-fa {
  font-family: var(--font-fa);
  direction: rtl;
  text-align: right;
  color: var(--teal-deep);
  font-style: normal;
}
.bl-fa--inline { display: block; width: 100%; margin-top: 0.25em; font-size: 0.95em; }
/* the twin of a heading is a notch smaller, so the English still leads */
.lang-both h1 + .bl-fa, .lang-both h2 + .bl-fa,
.lang-both h3 + .bl-fa, .lang-both h4 + .bl-fa { font-size: 0.82em; opacity: 0.95; }
.lang-both .slide__title + .bl-fa { margin-top: 0.1em; }
/* decorative icons belong to the English line only — the twin would double them */
.bl-fa > svg.icon, .bl-fa--inline svg.icon { display: none; }
.bl-fa .ck, .bl-fa .blank { display: none; }
/* a twin follows whatever its original does: hidden until the step is revealed */
.fragment:not(.is-visible) + .bl-fa { opacity: 0; visibility: hidden; }
/* amounts and web addresses stay left-to-right inside the Persian twin */
.bl-fa .num, .bl-fa kbd, .bl-fa code { direction: ltr; unicode-bidi: isolate; }
.lang-both em, .lang-both .lede { font-style: italic; }
.lang-both .bl-fa em, .lang-both .bl-fa i { font-style: normal; font-weight: 600; }

/* A twin placed inside its item (a card title, a table cell, a list entry) */
.bl-fa { text-transform: none; letter-spacing: 0; }
.lang-both :is(h1, h2, h3, h4) > .bl-fa--inline { font-size: 0.8em; font-weight: 600; margin-top: 0.15em; line-height: 1.35; }
.lang-both th > .bl-fa--inline, .lang-both td > .bl-fa--inline { font-size: 0.9em; margin-top: 0.2em; }