/* Embed deck (B5; design F169–F174, stage F194) — self-contained: no
   site.css, no fonts.css (only the two Vazirmatn subsets the deck needs).
   Colors ride the per-type theme block ([data-cat] custom properties injected
   by layouts/presentation.njk) with brand-blue fallbacks.

   F206 GEOMETRY (supersedes the F194 fixed 16:9 stage): slide CSS still
   speaks the 1600×900 DESIGN-PX language, but the stage now FILLS the
   .deck-stage-area — presentation.js picks a scale z (the 16:9 fit clamped
   to 0.5–1.35 so text stays readable everywhere) and sizes the canvas as
   area/z design px. Phones get a tall scrolling canvas instead of a
   letterboxed miniature; desktop embeds keep the exact scale the slide
   budgets were tuned for. `.deck-narrow` (canvas < 1000 design px wide)
   and `.deck-short` (< 700 tall) carry the phone/short-screen overrides at
   the END of this file (after dark mode, so they win specificity ties).
   Everything OUTSIDE the stage (toolbar, menus, gallery, tooltips) stays
   in viewport coordinates and follows normal responsive rules with
   accessible target sizes.

   F174 structure: hero slides (cover + closing) wear the type wash and a
   large decorative icon; content slides are TOP-aligned under a pinned
   identity header, and only .slide-content scrolls when long. Dark mode
   (F173) is an explicit viewer toggle, never automatic and never coupled to
   fullscreen (F172) — fullscreen keeps whatever theme the viewer chose. */

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/vazirmatn-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/vazirmatn-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body.embed-body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background: #faf9f7;
  color: #26221c;
  overflow: hidden;
}

/* The deck paints its own light background EVERYWHERE, including fullscreen:
   without an explicit background on the fullscreened element AND its
   ::backdrop, the browser's native BLACK backdrop shows through (F172). */
.deck { position: relative; height: 100%; display: flex; flex-direction: column; background: #faf9f7; }
.deck::backdrop { background: #faf9f7; }

/* Screen-reader-only live region (F194 a11y). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- The fluid stage (F206) --------------------------------------------- */

/* The stage fills its area completely — no letterbox. The backdrop tone
   shows only for a frame before presentation.js sizes the canvas (and
   under no-JS, where the fallback is a same-size scale-1 canvas). */
.deck-stage-area {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #eae7e1;
  /* Swipe (F206/F211): vertical pans keep scrolling long slide bodies and
     pinch-zoom stays native. Horizontal swipes are owned by the deck's
     direction-locked TOUCH tracker (presentation.js) — touch-action alone
     could not save gestures starting ON the scrollable body: the browser
     claimed them for pan-y at the first vertical slop and pointercancelled
     the swipe. This declaration still blocks stray horizontal native pans
     for gestures the tracker ignores. */
  touch-action: pan-y pinch-zoom;
}
/* Anchored at the physical top-left (safe in RTL): the unscaled box spans
   [0, area/z] and scale(z) about the 0 0 origin maps it exactly onto the
   area. presentation.js sets width/height/transform; the 100% pair is the
   no-JS fallback (scale 1). */
.deck-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background: #faf9f7;
}

.deck-slides { position: absolute; inset: 0; }
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  /* F179: a firm but generous frame from the stage edges (design px).
     F206 wide guard: on canvases wider than 1600 design px the content
     column holds at today's maximum (1456px) and centers — line length
     never grows past what F200.2 tuned. At ≤1600 the max() resolves to
     the plain 72px and nothing changes. */
  padding: 44px 72px 36px;
  padding-inline: max(72px, calc((100% - 1456px) / 2));
  overflow: hidden;
}
.slide[hidden] { display: none; }

/* Direction-aware entrance (F169): RTL forward = leftward, so the next slide
   arrives FROM the left and the previous one from the right. Entrance-only —
   slides swap via [hidden], so there is no exiting element to animate. */
.slide-fwd { animation: slide-fwd 0.3s cubic-bezier(0.2, 0.7, 0.3, 1); }
.slide-back { animation: slide-back 0.3s cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes slide-fwd { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
@keyframes slide-back { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .slide-fwd, .slide-back { animation: none; } }

.icon { width: 1em; height: 1em; }

/* --- Hero slides: cover + closing (F174) -------------------------------- */

.slide.slide-title, .slide.slide-cta {
  background: var(--c-wash, #f2f6fb);
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  /* F175: lift the block to the OPTICAL center — dead-center over the full
     height reads as "too low" above the toolbar. */
  padding-block-end: 96px;
}
/* Large decorative type icon anchored at the physical bottom-left; in-flow
   siblings below carry position:relative so they paint above it. */
.slide-hero-bg {
  position: absolute;
  inset-inline-end: 4%;
  inset-block-end: -4%;
  transform: rotate(-8deg);
  pointer-events: none;
}
/* Opaque color + GROUP opacity on the element — alpha in `color` applies
   per-shape and doubles up where strokes overlap (F176 owner diagnosis). */
.slide-hero-bg-icon { width: 430px; height: 430px; color: var(--c-tile, #dfe9f6); opacity: 0.55; }
/* Paint order: hero CONTENT above the decoration. The :not() exclusion is
   load-bearing — a plain `> *` outranks .slide-hero-bg's position:absolute
   and pulls the decoration INTO the flex flow, shoving the hero content
   ~250px down (the F175 "contents too low" bug). */
.slide.slide-title > :not(.slide-hero-bg), .slide.slide-cta > :not(.slide-hero-bg) { position: relative; }

.slide-type {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-tile, #e8effa);
  color: var(--type-color, #2563ae);
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 22px;
  font-weight: 800;
}
.slide-type-icon { width: 1.1em; height: 1.1em; }
.slide-doc-title { font-size: 72px; font-weight: 800; line-height: 1.3; }
/* F193: the hero's secondary inks sit ON the per-type wash — warm grays
   clashed with the cool tints, so both derive from the type color instead
   (the plain var() line is the fallback where color-mix is unsupported). */
.slide-doc-title-en {
  color: var(--type-color, #2563ae);
  color: color-mix(in srgb, var(--type-color, #2563ae) 58%, #6b6f75);
  font-size: 28px;
  /* F207: was inherited from the hero section's leaked heading rule —
     pinned explicitly now that the leak is fixed. */
  font-weight: 800;
  letter-spacing: 0.02em;
}
/* F204.1: balance kills the single-word widow line. F207: the 800 weight
   was inherited from the leaked heading rule — pinned explicitly. */
.slide-summary { color: #4e463b; font-size: 34px; font-weight: 800; line-height: 2; max-width: min(100%, 60ch); text-wrap: balance; }
.slide-brandmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* F181: the source mark stands apart from the content above it. */
  margin-block-start: 30px;
  color: var(--type-color, #2563ae);
  color: color-mix(in srgb, var(--type-color, #2563ae) 72%, #565a60);
  /* F204.1 sized it ~25% up; F208 (owner): a full step bigger — the site
     identity should read as a statement on the cover and closing slides. */
  font-size: 40px;
  font-weight: 800;
}
.slide-brandmark-logo { width: 1.4em; height: 1.4em; display: block; }
/* F193: the closing slide pitches the whole catalog, not just this doc. */
.slide-cta-pitch { color: #4e463b; font-size: 27px; line-height: 2; max-width: min(100%, 56ch); text-wrap: pretty; }
.slide-cta-btn {
  display: inline-block;
  background: var(--type-color, #2563ae);
  color: #fff;
  border-radius: 999px;
  padding: 16px 42px;
  font-size: 23px;
  font-weight: 800;
  text-decoration: none;
  margin-block-start: 8px;
}
/* F176/F177: quiet loop-back, pinned to the closing slide's lower corner
   (physical bottom-right = inline-start in RTL) — out of the content flow.
   Outranks the hero children's position:relative rule. */
.slide.slide-cta .deck-restart {
  position: absolute;
  inset-block-end: 22px;
  inset-inline-start: 26px;
}
.deck-restart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  color: #6a6254;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.18s ease;
}
.deck-restart:hover { color: var(--type-color, #2563ae); }
.deck-restart-icon { width: 1em; height: 1em; }

/* --- Content slides (F174: top-aligned, pinned header, scrollable body) -- */

.slide-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding-block-end: 14px;
  border-block-end: 1px solid rgba(0, 0, 0, 0.07);
  /* F175: clear air between the identity strip and the slide's own title. */
  margin-block-end: 18px;
}
.slide-head-type {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-tile, #e8effa);
  color: var(--type-color, #2563ae);
  border-radius: 999px;
  padding: 5px 18px;
  font-size: 20px;
  font-weight: 800;
}
.slide-head-icon { width: 1em; height: 1em; }
.slide-head-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #7a7264;
  font-size: 21px;
  font-weight: 700;
}
/* F176: section context at the header's far (physical-left) end. */
.slide-head-section {
  flex: none;
  margin-inline-start: auto;
  color: var(--type-color, #2563ae);
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}

/* F202.2/F204.3: clear air between the title and the content below it.
   F207: scoped to the H2 — the hero cover SECTION also wears `slide-title`
   (its kind class), and this rule's margin-block-end shaved 24px off that
   inset:0 box (the background stripe above the toolbar, visible in the
   gallery thumbnails too). */
h2.slide-title { font-size: 46px; font-weight: 800; line-height: 1.45; margin-block-end: 24px; }
.slide-part { font-size: 0.55em; font-weight: 700; color: #7a7264; }

/* Only the body scrolls; header/title stay pinned. F190: the
   scrollbar is NEUTRAL (chrome, not content — no accent color) and thick
   enough to grab; it sits at the physical LEFT in RTL. */
.slide-content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.06);
  /* F201.8 (owner, reverses F175): content sits at the TOP of its zone —
     vertical centering read as misalignment across slides. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* F201.2: breathing room between the content and the scrollbar (the
     vertical bar sits at the physical left in RTL = inline-end). */
  padding-inline-end: 20px;
}
/* F201.2: a scrollbar you can SEE — wider track, firm thumb, tinted rail
   so scrollable slides announce themselves. */
.slide-content::-webkit-scrollbar { width: 18px; }
.slide-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.slide-content::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.6); }
.slide-content::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.06); border-radius: 999px; }

/* F200.2: paragraphs use ALL available width with raised line spacing —
   the compiler's ≈550-char budget keeps a slide at 7–8 airy lines. */
.slide-body, .slide-item-body { font-size: 32px; line-height: 2.05; color: #3a342b; }
.slide-body p + p, .slide-body ul, .slide-body ol { margin-block-start: 0.8em; }
.slide-body li + li { margin-block-start: 0.45em; }
/* F204.5: scroll-mode slides keep their inner headings in the body. */
.slide-body h2, .slide-body h3 {
  font-size: 32px;
  font-weight: 800;
  color: var(--type-color, #2563ae);
  margin-block: 0.9em 0.4em;
}
.slide-body h3 { font-size: 28px; }
/* F204.9: authored bullet lists wear the design system's accent squares
   (same language as the list-slide markers). */
.slide-body ul, .slide-item-body ul, .slide-acc-body ul { list-style: none; padding-inline-start: 0; }
.slide-body ul > li, .slide-item-body ul > li, .slide-acc-body ul > li {
  position: relative;
  padding-inline-start: 36px;
}
.slide-body ul > li::before, .slide-item-body ul > li::before, .slide-acc-body ul > li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  /* F205.4: centered on the FIRST line — (line-height − marker) / 2. */
  inset-block-start: calc(1em + 2px);
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--c-chip, #bcd3ef);
}
/* F202.7: authored ORDERED lists number in Persian digits inside small
   badges (the browser's decimal markers rendered Western digits). */
.slide-body ol, .slide-item-body ol, .slide-acc-body ol {
  list-style: none;
  counter-reset: fa-li;
  padding-inline-start: 0;
}
.slide-body ol > li, .slide-item-body ol > li, .slide-acc-body ol > li {
  counter-increment: fa-li;
  position: relative;
  padding-inline-start: 52px;
}
.slide-body ol > li::before, .slide-item-body ol > li::before, .slide-acc-body ol > li::before {
  content: counter(fa-li, persian);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.22em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55em;
  height: 1.55em;
  border-radius: 999px;
  background: var(--c-tile, #e8effa);
  color: var(--type-color, #2563ae);
  font-size: 0.72em;
  font-weight: 800;
}
/* F182 (supersedes the inert-links rule): body links are CLICKABLE — raw
   URLs are linkified at render time and external ones open in a new tab.
   F201.3: color alone marks them; the underline appears on hover only. */
.slide-body a, .slide-item-body a, .slide-compare-body a {
  color: var(--type-color, #2563ae);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.slide-body a:hover, .slide-item-body a:hover, .slide-compare-body a:hover,
.slide-acc-body a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* F201.1/F204.2: alt-names lead line — names render as pills (owner
   re-allowed pills for this identity row). */
.slide-body .slide-alt-names { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; color: #6a6254; font-size: 25px; }
.slide-body .slide-alt-names strong { color: var(--type-color, #2563ae); }
.slide-alt-name {
  background: var(--c-tile, #e8effa);
  color: var(--type-color, #2563ae);
  border-radius: 999px;
  padding: 6px 22px;
  font-size: 24px;
  font-weight: 700;
}
.linkified-ext-icon { width: 0.8em; height: 0.8em; vertical-align: -0.08em; margin-inline-start: 4px; }

/* List slides — generous rhythm between items (F174). F200.5: the accent
   border rows were over-used — flat rows with a small type-colored marker
   carry the same anchor without repeating the compare/facts treatment.
   F201.9: the marker is ABSOLUTE (outside the flex flow) — as a flex item
   it wrapped onto its own line for long two-column entries and stretched
   the sibling grid row. */
.slide-items { list-style: none; display: flex; flex-direction: column; gap: 34px; max-width: 100%; }
.slide-items > li { position: relative; }
.slide-items > li:not(:has(.slide-item-no)) { padding-inline-start: 32px; }
.slide-items > li:not(:has(.slide-item-no))::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 20px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--c-chip, #bcd3ef);
}
/* F193: slides the planner marks two-column — many short title-only items
   (list kind) or a flat short-item list (prose kind). F206: on a narrow
   canvas these collapse to ONE column (overrides at the end of the file).
   F202.10: CSS multi-columns, not grid — grid rows stretched with their
   tallest cell, so one long item deformed the OTHER column's layout. */
.slide-cols-2 .slide-items { display: block; columns: 2; column-gap: 56px; }
.slide-cols-2 .slide-items > li { break-inside: avoid; margin-block-end: 28px; }
.slide-cols-2 .slide-body { max-width: 100%; }
.slide-cols-2 .slide-body ul { columns: 2; column-gap: 56px; }
.slide-cols-2 .slide-body li { break-inside: avoid; }
.slide-item-title { font-size: 33px; font-weight: 800; line-height: 1.6; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
/* F189: ordered items (learning steps, entry routes) carry their sequence
   number — packing may seat several on one slide. */
.slide-item-no {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  border-radius: 999px;
  background: var(--c-tile, #e8effa);
  color: var(--type-color, #2563ae);
  font-size: 0.72em;
  font-weight: 800;
}
.slide-item-hours {
  font-size: 18px;
  font-weight: 800;
  color: var(--type-color, #2563ae);
  background: var(--c-tile, #e8effa);
  border-radius: 999px;
  padding: 3px 16px;
  white-space: nowrap;
  align-self: center;
}
.slide-item-note { color: #6a6254; font-size: 25px; line-height: 1.9; margin-block-start: 8px; }
/* F194: on a single-item step slide the note (the step's goal) IS the main
   content — promote it to body weight. */
.slide-items > li:only-child .slide-item-note { color: #3a342b; font-size: 30px; }
.slide-item-body { margin-block-start: 12px; }

/* F204.8: per-row answer button + the in-stage modal it opens. */
.slide-q-more {
  flex: none;
  align-self: center;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--type-color, #2563ae);
  background: transparent;
  border: 1.5px solid var(--c-chip, #bcd3ef);
  border-radius: 999px;
  padding: 4px 18px;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.slide-q-more:hover { border-color: var(--type-color, #2563ae); background: var(--c-wash, #f2f6fb); }
.deck-modal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(38, 34, 28, 0.45);
  padding: 60px;
}
.deck-modal[hidden] { display: none; }
.deck-modal-box {
  position: relative;
  max-width: 1100px;
  max-height: 100%;
  overflow-y: auto;
  background: #faf9f7;
  border-radius: 20px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
  padding: 44px 52px;
}
.deck-modal-close {
  position: absolute;
  inset-block-start: 18px;
  /* Physical LEFT (inline-end in RTL) — AWAY from where the RTL question
     text starts; the question's padding-inline-end clears it (F206 fix:
     it sat at inline-start, on top of the question's first words). */
  inset-inline-end: 22px;
  width: 44px;
  height: 44px;
  font: inherit;
  font-size: 30px;
  line-height: 1;
  color: #6a6254;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.deck-modal-close:hover { color: var(--type-color, #2563ae); background: var(--c-wash, #f2f6fb); }
.slide-q-detail-q { font-size: 32px; font-weight: 800; line-height: 1.6; margin-block-end: 18px; padding-inline-end: 72px; }
.deck-modal-content { font-size: 27px; line-height: 1.95; color: #3a342b; }
.deck-modal-content h4 {
  font-size: 22px;
  font-weight: 800;
  color: var(--type-color, #2563ae);
  margin-block: 0.9em 0.25em;
}
.slide-modal-cue {
  color: var(--type-color, #2563ae);
  background: var(--c-wash, #f2f6fb);
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 23px;
  font-weight: 700;
  margin-block-end: 18px;
}

/* Checklist rows (F194 → F200.8): an ACTUAL checklist — square outlined
   check boxes with the check mark inside. */
.slide-checks { list-style: none; display: flex; flex-direction: column; gap: 26px; max-width: 100%; }
.slide-cols-2 .slide-checks { display: block; columns: 2; column-gap: 56px; }
.slide-cols-2 .slide-checks .slide-check-row { break-inside: avoid; margin-block-end: 24px; }
/* F204.10: the box aligns with the FIRST line of a wrapped row; the topic
   name carries the weight, the description reads as normal text. */
.slide-check-row { display: flex; align-items: flex-start; gap: 16px; font-size: 28px; font-weight: 400; line-height: 1.7; }
.slide-check-text strong { font-weight: 800; }
.slide-check-icon {
  flex: none;
  width: 34px;
  height: 34px;
  margin-block-start: 7px;
  color: var(--type-color, #2563ae);
  background: rgba(255, 255, 255, 0.6);
  border: 2.5px solid var(--c-chip, #bcd3ef);
  border-radius: 9px;
  padding: 5px;
}

/* Balanced comparison (F194): two equal columns, e.g. مزایا / چالش‌ها. Both
   sides keep the type accent — the ICONS carry the pro/con distinction, so
   no unrelated palette enters the theme. F200.5: tinted PANELS, not the
   accent border (which the list rows retired). */
/* F204.12: columns STRETCH to the same height — equal side-by-side panels. */
.slide-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; width: 100%; }
.slide-compare-col { background: var(--c-wash, #f2f6fb); border-radius: 18px; padding: 28px 34px; }
/* F201.10 (owner, scoped reversal of the type-accent-only rule): pros wear
   GREEN, cons wear RED. F205.4: the places pair differentiates too —
   warm sand for the first (Iran) card, type wash for the second. */
.slide-compare-pro { background: #edf7ee; }
.slide-compare-pro .slide-compare-icon { color: #1a7f37; }
.slide-compare-con { background: #fdf0ee; }
.slide-compare-con .slide-compare-icon { color: #b42318; }
.slide-compare-place:nth-of-type(1) { background: #f6f1e6; }
.slide-compare-place:nth-of-type(1) .slide-compare-icon { color: #8a6d2f; }
.slide-compare-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 32px;
  font-weight: 800;
  margin-block-end: 20px;
}
.slide-compare-icon { width: 34px; height: 34px; flex: none; color: var(--type-color, #2563ae); }
.slide-compare-items { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.slide-compare-items li { font-size: 26px; line-height: 1.7; color: #3a342b; }

/* F202.8: category badge on a sample-list row (owner-requested badge) and
   the quiet more-in-the-full-version hint under the content. */
.slide-item-badge {
  flex: none;
  align-self: center;
  background: var(--c-tile, #e8effa);
  color: var(--type-color, #2563ae);
  border-radius: 999px;
  padding: 3px 16px;
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}
.slide-hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  margin-block-start: 30px;
  color: var(--type-color, #2563ae);
  font-size: 23px;
  font-weight: 700;
}
.slide-hint-icon { width: 1.15em; height: 1.15em; flex: none; }
/* F205.3: the think-first instruction ABOVE the content. */
.slide-intro {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  align-self: flex-start;
  margin-block-end: 24px;
  color: #6a6254;
  font-size: 23px;
  line-height: 1.8;
}
.slide-intro .slide-hint-icon { align-self: center; color: var(--type-color, #2563ae); }

/* --- Accordion rows (F200.9) --------------------------------------------
   Native details/summary; the chevron points DOWN when closed (repo
   disclosure contract) and flips when open. Closed rows read as the
   overview; bodies are full included content. */
.slide-accs { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.slide-acc {
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}
details.slide-acc[open] { border-color: var(--c-chip, #bcd3ef); background: #fff; }
.slide-acc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  cursor: pointer;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.6;
  list-style: none;
}
.slide-acc-head::-webkit-details-marker { display: none; }
.slide-acc-title { flex: 1 1 auto; min-width: 0; }
.slide-acc-chevron {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--type-color, #2563ae);
  transition: transform 0.18s ease;
}
details[open] > .slide-acc-head .slide-acc-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .slide-acc-chevron { transition: none; } }
.slide-acc-body { padding: 0 24px 20px; font-size: 26px; line-height: 1.95; color: #3a342b; }
.slide-acc-body p + p, .slide-acc-body ul, .slide-acc-body ol { margin-block-start: 0.6em; }
.slide-acc-body ul, .slide-acc-body ol { padding-inline-start: 1.3em; }
.slide-acc-body a { color: var(--type-color, #2563ae); text-decoration: none; overflow-wrap: anywhere; }
/* Labeled answer sections inside question rows («هدف پرسش»…). */
.slide-acc-body h4 {
  font-size: 21px;
  font-weight: 800;
  color: var(--type-color, #2563ae);
  margin-block: 0.9em 0.25em;
}
.slide-acc-body h4:first-child { margin-block-start: 0; }
/* A row with nothing to disclose: same shape, no chevron, not interactive. */
.slide-acc-flat .slide-acc-head { cursor: default; }
/* F207: expand/collapse-all — an icon-only pair above accordion groups
   with two or more expandable rows (rendered by deck-slide.njk, toggled by
   presentation.js per group). Same pill language as .slide-q-more; sits at
   the inline-end so the row titles keep the reading edge. */
.slide-accs-tools { display: flex; justify-content: flex-end; gap: 10px; }
.slide-acc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--type-color, #2563ae);
  background: transparent;
  border: 1.5px solid var(--c-chip, #bcd3ef);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.slide-acc-toggle:hover { border-color: var(--type-color, #2563ae); background: var(--c-wash, #f2f6fb); }
.slide-acc-toggle-icon { width: 20px; height: 20px; }

/* --- Stack slides (F200.6): merged neighbor fields ----------------------- */
.slide-stack { display: flex; flex-direction: column; gap: 34px; width: 100%; }
.slide-stack-block { min-width: 0; }
.slide-stack-title {
  font-size: 25px;
  font-weight: 800;
  color: var(--type-color, #2563ae);
  margin-block-end: 14px;
}
.slide-stack .slide-items { gap: 22px; }
.slide-stack .slide-checks { gap: 18px; }

/* Scalar fact STRIP — one wrapped line on a host slide (tool مشخصات). */
.slide-facts-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  font-size: 25px;
  color: #3a342b;
}
.slide-facts-strip-label { color: var(--type-color, #2563ae); font-weight: 800; }
.slide-facts-strip-sep { color: #b3ada2; }

/* --- v3 shared blocks ----------------------------------------------------- */

/* Cover image/logo + metadata facts. */
.slide-cover-image {
  max-height: 170px;
  max-width: 420px;
  object-fit: contain;
  border-radius: 14px;
}
/* Facts slide (generic scalar fallback): separator rows, no accent border. */
.slide-facts-list { display: flex; flex-direction: column; max-width: 1200px; width: 100%; }
.slide-fact { display: flex; align-items: baseline; gap: 24px; padding-block: 18px; border-block-end: 1px solid rgba(0, 0, 0, 0.07); }
.slide-fact:last-child { border-block-end: 0; }
.slide-fact dt { flex: none; min-width: 240px; font-size: 26px; font-weight: 800; color: var(--type-color, #2563ae); }
.slide-fact dd { font-size: 28px; color: #3a342b; overflow-wrap: anywhere; }

/* Compare rows keep their bodies where the recipe allows; the places
   variant is prose. F201.10: row text is NOT bold — only the column
   header carries weight. */
.slide-compare-item-title { font-size: 27px; font-weight: 500; line-height: 1.7; }
.slide-compare-item-body { font-size: 23px; line-height: 1.8; color: #4e463b; margin-block-start: 4px; }
.slide-compare-body { font-size: 26px; line-height: 1.9; color: #3a342b; }

/* --- Toolbar (viewport coordinates — NEVER scaled with the stage) -------- */

.deck-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  /* PINNED height — the deck's own geometry invariant (F209: the embed
     snippet no longer derives its box from this — a fluid deck reflows in
     any iframe): the stage area is always «viewport minus this bar», so
     the bar must never grow implicitly. Every breakpoint keeps this exact
     outer height (border-box, so the 1px top border is inside it); buttons
     center vertically, only HORIZONTAL padding may vary.
     tests/adminbar.test.ts pins the explicit height + «0 <x>» padding. */
  height: 64px;
  padding: 0 16px;
  border-block-start: 1px solid rgba(0, 0, 0, 0.07);
  background: #fff;
}
/* F194: 34px → 40px controls (48px on touch, media rule below) toward the
   WCAG 2.5.5 enhanced 44px target guidance. */
.deck-nav, .deck-full, .deck-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: #fff;
  color: #4e463b;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.deck-nav:hover:not(:disabled), .deck-full:hover, .deck-dark:hover { color: var(--type-color, #2563ae); border-color: var(--type-color, #2563ae); }
.deck-nav:disabled { opacity: 0.35; cursor: default; }
.deck-nav-icon { width: 17px; height: 17px; }
/* F208: the auto margins on .deck-prev and .deck-dark split the bar's slack
   into two equal gaps, floating the قبلی/شماره/بعدی cluster near the
   center with the number BETWEEN the chevrons. Flex (not absolute
   centering) so narrow bars squeeze the gaps instead of overlapping. */
.deck-prev { margin-inline-start: auto; }
/* F208.1 (owner): the number HUGS its chevrons — the negative margin pulls
   the pair 4px inside the bar's 12px gap (8px visual). No min-width: it
   padded short labels and read as extra gap. */
.deck-counter { font-size: 13px; font-weight: 800; color: #6a6254; white-space: nowrap; margin-inline: -4px; text-align: center; }
/* F208 (owner): the progress line sits on the deck's TOP edge — a
   full-width reading strip above the stage, no longer a toolbar item.
   Below the popups/overlays (menus 6+, gallery 4), above the slides. */
.deck-progress {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.deck-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--type-color, #2563ae);
  transform-origin: right center; /* RTL: progress grows leftward */
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.deck-full-enter, .deck-full-exit { width: 18px; height: 18px; }
.deck-full .deck-full-exit { display: none; }
.deck.is-fullscreen .deck-full .deck-full-exit { display: block; }
.deck.is-fullscreen .deck-full .deck-full-enter { display: none; }
/* F207 (owner): dark + fullscreen + brand form the LEADING (physical-left)
   cluster at every width — the auto margin sits on the FIRST of the three,
   so when the progress bar (the bar's only flexing item) is hidden on small
   screens, the whole trio pins to the far edge together. On wide bars the
   progress bar absorbs the slack first and this margin resolves to zero. */
.deck-dark { margin-inline-start: auto; }
.deck-dark-on, .deck-dark-off { width: 18px; height: 18px; }
.deck-dark .deck-dark-off { display: none; }
.deck.is-dark .deck-dark .deck-dark-off { display: block; }
.deck.is-dark .deck-dark .deck-dark-on { display: none; }

/* Section menu (F177) — pops up above its toolbar button. */
.deck-menu-wrap { position: relative; flex: none; }
.deck-menu {
  position: absolute;
  inset-block-end: calc(100% + 10px);
  /* F179: anchor to the button's inline-START edge (physical right) so the
     popup opens INWARD, and clamp it a margin away from the viewport edge. */
  inset-inline-start: 0;
  max-width: calc(100vw - 32px);
  min-width: 250px;
  max-height: 58vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  padding: 8px;
  z-index: 6;
}
.deck-menu[hidden] { display: none; }
.deck-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: start;
  font: inherit;
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #26221c;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.deck-menu-item:hover { background: var(--c-wash, #f2f6fb); color: var(--type-color, #2563ae); }
/* F179: the entry covering the CURRENT slide stays highlighted. */
.deck-menu-item-active { background: var(--c-tile, #e8effa); color: var(--type-color, #2563ae); }
/* F189: menu entries stay on ONE line — long section titles ellipsize. */
.deck-menu-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
}
/* F193: custom context menu — built by presentation.js at right-click,
   fixed-positioned at the cursor (tracks the deck in fullscreen too). */
.deck-context {
  position: fixed;
  z-index: 9;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 8px;
}
.deck-context[hidden] { display: none; }
.deck-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: start;
  font: inherit;
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #26221c;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.deck-context-item:hover:not(:disabled) { background: var(--c-wash, #f2f6fb); color: var(--type-color, #2563ae); }
.deck-context-item:disabled { color: #b3ada2; cursor: default; }
/* F193 icons: quiet next to the label, full-strength on hover; currentColor
   keeps the disabled/dark states consistent for free. */
.deck-context-icon { width: 15px; height: 15px; flex: none; opacity: 0.72; }
.deck-context-item:hover:not(:disabled) .deck-context-icon { opacity: 1; }
.deck-context-label { flex: 1 1 auto; min-width: 0; }
.deck-context-rule { height: 1px; background: rgba(0, 0, 0, 0.08); margin: 4px 6px; }

.deck-menu-no {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  height: 1.9em;
  border-radius: 999px;
  background: var(--c-tile, #e8effa);
  color: var(--type-color, #2563ae);
  font-size: 11.5px;
  font-weight: 800;
}

/* Slide gallery (F177) — thumbnail overlay above the slides; a modal DIALOG
   since F194 (focus trap + restore in presentation.js). */
.deck-gallery {
  position: absolute;
  inset: 0;
  inset-block-end: 0;
  z-index: 4;
  background: rgba(250, 249, 247, 0.97);
  overflow-y: auto;
  /* F179: generous breathing room from the screen edges. */
  padding: 28px min(5vw, 48px) 32px;
  scrollbar-width: thin;
  font-family: 'Vazirmatn', system-ui, sans-serif;
}
.deck-gallery[hidden] { display: none; }
/* F179: the scene names itself. */
.deck-gallery-title {
  margin: 0 0 20px;
  font-size: clamp(17px, 3vw, 22px);
  font-weight: 800;
  color: #26221c;
}
.deck-gallery-grid {
  display: grid;
  /* F181: never more than 5 per row (19% min → ≤5 columns), while narrow
     screens keep the 200px floor and drop columns naturally. */
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 19%), 1fr));
  gap: 18px;
}
.deck-thumb {
  /* display:block kills the UA button content-centering that shoved the huge
     pre-transform scale box sideways — with a corner transform-origin the
     scaled preview landed OUTSIDE the clipped cell (the F179 blank thumbs).
     The typography resets matter just as much: a <button> does NOT inherit
     font/text-align/color, so cloned slides rendered in the UA font,
     centered (F180) — previews must match the originals exactly. */
  display: block;
  font: inherit;
  font-family: 'Vazirmatn', system-ui, sans-serif;
  text-align: start;
  color: inherit;
  position: relative;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: #faf9f7;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
/* F207: a subtle lift on hover — accent border, soft shadow, 2px rise. */
.deck-thumb:hover { border-color: var(--type-color, #2563ae); box-shadow: 0 8px 22px rgba(38, 34, 28, 0.14); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .deck-thumb:hover { transform: none; } }
.deck-thumb-current { border-color: var(--type-color, #2563ae); box-shadow: 0 0 0 2px var(--c-chip, #bcd3ef); }
/* Anchored to the cell's top-right (the page is always RTL) so the top-right
   transform-origin scales the preview exactly INTO the cell. */
.deck-thumb-scale { position: absolute; top: 0; right: 0; transform-origin: top right; pointer-events: none; }
.deck-thumb-no {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 8px;
}

/* Source mark (F169/F171): LAST in the RTL row → physical bottom-left,
   seated with the dark/fullscreen pair (the auto margin lives on
   .deck-dark, F207). */
.deck-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-inline-start: 4px;
  color: #6a6254;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.18s ease;
}
.deck-brand:hover { color: var(--type-color, #2563ae); }
.deck-brand-logo { width: 19px; height: 19px; display: block; }
.deck-brand-name { font-weight: 800; font-size: 13.5px; color: #3a342b; transition: color 0.18s ease; }
.deck-brand:hover .deck-brand-name { color: var(--type-color, #2563ae); }

/* F203 (owner): no focus outline in the deck — Chrome painted the ring on
   accordion summaries even for mouse clicks, and the deck's keyboard model
   (document-level shortcuts, not tab-stop navigation) doesn't rely on a
   visible focus position. */
:focus-visible { outline: none; }

/* Custom tooltips (F170) — pure CSS off data-tip, shown above the toolbar
   controls on hover/keyboard focus with a short intent delay. The page is
   always RTL, so physical left/right centering is safe here. Edge controls
   use flush variants so the pill never leaves the viewport. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  inset-block-end: calc(100% + 9px);
  left: 50%;
  transform: translate(-50%, 5px);
  background: #26221c;
  color: #faf9f7;
  /* Buttons don't inherit the page font — pin the content font here. */
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.7;
  padding: 4px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0.3s;
}
.tip-flush-start[data-tip]::after { left: auto; right: 0; transform: translate(0, 5px); }
.tip-flush-start[data-tip]:hover::after, .tip-flush-start[data-tip]:focus-visible::after { transform: translate(0, 0); }
.tip-flush-end[data-tip]::after { left: 0; right: auto; transform: translate(0, 5px); }
.tip-flush-end[data-tip]:hover::after, .tip-flush-end[data-tip]:focus-visible::after { transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) { [data-tip]::after { transition: none; } }

/* --- Dark mode (F173) — an EXPLICIT viewer toggle, never automatic and
   never coupled to fullscreen (F172); .is-dark applies in both views. ----- */

.deck.is-dark { background: #121110; color: #e9e4da; }
.deck.is-dark::backdrop { background: #121110; }
/* F206 stage: the dark backdrop shows only pre-fit / under no-JS. */
.deck.is-dark .deck-stage-area { background: #0a0a09; }
.deck.is-dark .deck-stage { background: #121110; }
.deck.is-dark .slide.slide-title, .deck.is-dark .slide.slide-cta { background: #191816; }
/* Opaque color + group opacity — same overlap rule as the light theme. */
.deck.is-dark .slide-hero-bg-icon { color: #4a463f; opacity: 0.28; }
.deck.is-dark .slide-doc-title,
.deck.is-dark h2.slide-title,
.deck.is-dark .slide-item-title,
.deck.is-dark .slide-check-row,
.deck.is-dark .slide-compare-title,
.deck.is-dark .slide-acc-head { color: #f3efe7; }
.deck.is-dark .slide-body,
.deck.is-dark .slide-item-body,
.deck.is-dark .slide-acc-body,
.deck.is-dark .slide-facts-strip,
.deck.is-dark .slide-compare-items li,
.deck.is-dark .slide-summary { color: #c9c2b4; }
.deck.is-dark .slide-doc-title-en,
.deck.is-dark .slide-item-note,
.deck.is-dark .slide-part,
.deck.is-dark .slide-head-title,
.deck.is-dark .slide-brandmark { color: #a29a8a; }
/* Accents: the light chip tint (a background color on paper) is the readable
   TEXT accent on dark; tinted fills become soft white washes. */
.deck.is-dark .slide-body a,
.deck.is-dark .slide-item-body a,
.deck.is-dark .slide-acc-body a { color: var(--c-chip, #bcd3ef); }
.deck.is-dark .slide-type,
.deck.is-dark .slide-head-type,
.deck.is-dark .slide-item-no,
.deck.is-dark .slide-alt-name,
.deck.is-dark .slide-item-badge,
.deck.is-dark .slide-body ol > li::before,
.deck.is-dark .slide-item-body ol > li::before,
.deck.is-dark .slide-acc-body ol > li::before,
.deck.is-dark .slide-item-hours { background: rgba(255, 255, 255, 0.09); color: var(--c-chip, #bcd3ef); }
.deck.is-dark .slide-check-icon {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--c-chip, #bcd3ef);
}
.deck.is-dark .slide-items > li:not(:has(.slide-item-no))::before { background: rgba(255, 255, 255, 0.22); }
.deck.is-dark .slide-compare-icon { color: var(--c-chip, #bcd3ef); }
.deck.is-dark .slide-compare-col { background: rgba(255, 255, 255, 0.05); }
.deck.is-dark .slide-acc-toggle { border-color: rgba(255, 255, 255, 0.25); color: var(--c-chip, #bcd3ef); }
.deck.is-dark .slide-acc-toggle:hover { border-color: var(--c-chip, #bcd3ef); background: rgba(255, 255, 255, 0.07); }
.deck.is-dark .slide-acc { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); }
.deck.is-dark details.slide-acc[open] { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.28); }
.deck.is-dark .slide-acc-chevron,
.deck.is-dark .slide-acc-body h4,
.deck.is-dark .slide-stack-title,
.deck.is-dark .slide-facts-strip-label,
.deck.is-dark .slide-hint { color: var(--c-chip, #bcd3ef); }
.deck.is-dark .slide-facts-strip-sep { color: #6b665c; }
.deck.is-dark .slide-body h2, .deck.is-dark .slide-body h3 { color: var(--c-chip, #bcd3ef); }
.deck.is-dark .slide-body ul > li::before,
.deck.is-dark .slide-item-body ul > li::before,
.deck.is-dark .slide-acc-body ul > li::before { background: rgba(255, 255, 255, 0.22); }
.deck.is-dark .slide-q-more { border-color: rgba(255, 255, 255, 0.25); color: var(--c-chip, #bcd3ef); }
.deck.is-dark .slide-q-more:hover { border-color: var(--c-chip, #bcd3ef); background: rgba(255, 255, 255, 0.07); }
.deck.is-dark .deck-modal { background: rgba(0, 0, 0, 0.6); }
.deck.is-dark .deck-modal-box { background: #1a1918; }
.deck.is-dark .slide-q-detail-q { color: #f3efe7; }
.deck.is-dark .deck-modal-content { color: #c9c2b4; }
.deck.is-dark .deck-modal-content h4 { color: var(--c-chip, #bcd3ef); }
.deck.is-dark .deck-modal-close { color: #a29a8a; }
.deck.is-dark .deck-modal-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.deck.is-dark .slide-modal-cue { background: rgba(255, 255, 255, 0.07); color: var(--c-chip, #bcd3ef); }
.deck.is-dark .slide-intro { color: #a29a8a; }
.deck.is-dark .slide-compare-place:nth-of-type(1) { background: rgba(214, 190, 140, 0.1); }
.deck.is-dark .slide-compare-place:nth-of-type(1) .slide-compare-icon { color: #c9b070; }
.deck.is-dark .slide-head { border-block-end-color: rgba(255, 255, 255, 0.09); }
.deck.is-dark .slide-content { scrollbar-color: rgba(255, 255, 255, 0.42) rgba(255, 255, 255, 0.07); }
.deck.is-dark .slide-content::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.42); }
.deck.is-dark .slide-content::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.6); }
.deck.is-dark .slide-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.07); }
.deck.is-dark .deck-bar { background: #1a1918; border-block-start-color: rgba(255, 255, 255, 0.08); }
.deck.is-dark .deck-nav,
.deck.is-dark .deck-full,
.deck.is-dark .deck-dark { background: transparent; border-color: rgba(255, 255, 255, 0.25); color: #c9c2b4; }
.deck.is-dark .deck-nav:hover:not(:disabled),
.deck.is-dark .deck-full:hover,
.deck.is-dark .deck-dark:hover { color: #fff; border-color: #fff; }
.deck.is-dark .deck-counter { color: #a29a8a; }
.deck.is-dark .deck-progress { background: rgba(255, 255, 255, 0.14); }
.deck.is-dark .deck-progress-fill { background: var(--c-chip, #bcd3ef); }
.deck.is-dark .deck-brand,
.deck.is-dark .deck-brand-name { color: #a29a8a; }
.deck.is-dark .deck-brand:hover,
.deck.is-dark .deck-brand:hover .deck-brand-name { color: #fff; }
.deck.is-dark .slide-cta-btn { background: var(--c-chip, #bcd3ef); color: #121110; }
.deck.is-dark .slide-head-section { color: var(--c-chip, #bcd3ef); }
.deck.is-dark .deck-restart { color: #a29a8a; }
.deck.is-dark .deck-restart:hover { color: #fff; }
.deck.is-dark .deck-menu { background: #1f1e1c; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
.deck.is-dark .deck-menu-item { color: #e9e4da; }
.deck.is-dark .deck-menu-item:hover { background: rgba(255, 255, 255, 0.07); color: var(--c-chip, #bcd3ef); }
.deck.is-dark .deck-menu-item-active { background: rgba(255, 255, 255, 0.12); color: var(--c-chip, #bcd3ef); }
.deck.is-dark .deck-gallery-title { color: #f3efe7; }
.deck.is-dark .deck-menu-no { background: rgba(255, 255, 255, 0.09); color: var(--c-chip, #bcd3ef); }
.deck.is-dark .deck-gallery { background: rgba(18, 17, 16, 0.97); }
.deck.is-dark .deck-thumb { background: #121110; border-color: rgba(255, 255, 255, 0.16); }
.deck.is-dark .deck-thumb:hover, .deck.is-dark .deck-thumb-current { border-color: var(--c-chip, #bcd3ef); }
.deck.is-dark .deck-thumb:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); }
.deck.is-dark [data-tip]::after { background: #f3efe7; color: #121110; }
.deck.is-dark .slide-cta-pitch { color: #c9c2b4; }
.deck.is-dark .deck-context { background: #1f1e1c; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
.deck.is-dark .deck-context-item { color: #e9e4da; }
.deck.is-dark .deck-context-item:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); color: var(--c-chip, #bcd3ef); }
.deck.is-dark .deck-context-item:disabled { color: #6b665c; }
.deck.is-dark .deck-context-rule { background: rgba(255, 255, 255, 0.12); }


.deck.is-dark .slide-body .slide-alt-names { color: #a29a8a; }
.deck.is-dark .slide-body .slide-alt-names strong { color: var(--c-chip, #bcd3ef); }
.deck.is-dark .slide-compare-pro { background: rgba(87, 171, 90, 0.12); }
.deck.is-dark .slide-compare-pro .slide-compare-icon { color: #57ab5a; }
.deck.is-dark .slide-compare-con { background: rgba(229, 83, 75, 0.12); }
.deck.is-dark .slide-compare-con .slide-compare-icon { color: #e5534b; }
.deck.is-dark .slide-fact { border-block-end-color: rgba(255, 255, 255, 0.09); }
.deck.is-dark .slide-fact dt { color: var(--c-chip, #bcd3ef); }
.deck.is-dark .slide-fact dd { color: #c9c2b4; }
.deck.is-dark .slide-compare-item-title { color: #f3efe7; }
.deck.is-dark .slide-compare-item-body, .deck.is-dark .slide-compare-body { color: #c9c2b4; }

/* --- Touch + mobile toolbar (F194) --------------------------------------
   48px targets on coarse pointers; below 640px the secondary commands
   (contents, gallery, dark, fullscreen) collapse into the overflow menu. */
@media (pointer: coarse) {
  .deck-nav, .deck-full, .deck-dark { width: 48px; height: 48px; }
  .deck-nav-icon { width: 20px; height: 20px; }
  .deck-menu-item { padding: 12px 14px; font-size: 15px; }
}

/* --- Narrow canvas (F206): < 1000 design px wide — the phone layout ------
   Class set by presentation.js (fitStage). Values are DESIGN PX like all
   stage rules; at the 0.5 scale floor a 46px title reads ~23px physical.
   Deliberately NOT touched: .slide-body size/line-height (32px/2.05 is the
   floor SCALE_MIN protects, and the ul marker offset is coupled to that
   line-height), and the hero icon's opacity (restated by dark mode — a
   narrow override here would out-specify the dark value). Small chips are
   FLOORED UP instead of down (18–21px design would read 9–10px physical). */
.deck-narrow .slide { padding: 32px 34px 26px; gap: 16px; }
.deck-narrow .slide.slide-title, .deck-narrow .slide.slide-cta { gap: 16px; padding-block-end: 56px; }
.deck-narrow .slide-hero-bg-icon { width: 240px; height: 240px; }
.deck-narrow .slide-doc-title { font-size: 46px; }
.deck-narrow .slide-doc-title-en { font-size: 21px; }
.deck-narrow .slide-summary { font-size: 27px; }
.deck-narrow .slide-cta-pitch { font-size: 24px; }
.deck-narrow .slide-type { font-size: 19px; padding: 8px 18px; }
.deck-narrow .slide-brandmark { font-size: 30px; margin-block-start: 18px; }
.deck-narrow .slide-cta-btn { font-size: 21px; padding: 14px 30px; }
/* The restart link leaves its pinned corner (it collides with the centered
   CTA block once the hero padding shrinks) and joins the flow, tappable. */
.deck-narrow .slide.slide-cta .deck-restart { position: static; align-self: center; margin-block-start: 14px; font-size: 24px; }
.deck-narrow h2.slide-title { font-size: 37px; margin-block-end: 18px; }
/* Header strip: the doc title lives on the cover slide (and in the tab
   title) — on a phone the chip + section pair is the useful identity. */
.deck-narrow .slide-head { gap: 8px; margin-block-end: 12px; }
.deck-narrow .slide-head-title { display: none; }
.deck-narrow .slide-head-type { font-size: 24px; padding: 5px 14px; }
.deck-narrow .slide-head-section { font-size: 24px; }
.deck-narrow .slide-content { padding-inline-end: 12px; }
.deck-narrow .slide-content::-webkit-scrollbar { width: 12px; }
.deck-narrow .slide-items { gap: 24px; }
.deck-narrow .slide-item-title { font-size: 30px; gap: 10px; }
/* Marker optics follow the smaller item title (first line of 30px × 1.6). */
.deck-narrow .slide-items > li:not(:has(.slide-item-no)) { padding-inline-start: 26px; }
.deck-narrow .slide-items > li:not(:has(.slide-item-no))::before { inset-block-start: 18px; }
.deck-narrow .slide-item-note { font-size: 23px; }
.deck-narrow .slide-items > li:only-child .slide-item-note { font-size: 27px; }
.deck-narrow .slide-item-hours, .deck-narrow .slide-item-badge { font-size: 22px; }
.deck-narrow .slide-q-more { font-size: 24px; }
.deck-narrow .slide-cols-2 .slide-items { columns: 1; }
.deck-narrow .slide-cols-2 .slide-body ul { columns: 1; }
.deck-narrow .slide-cols-2 .slide-checks { columns: 1; }
.deck-narrow .slide-compare-grid { grid-template-columns: 1fr; gap: 20px; }
.deck-narrow .slide-compare-col { padding: 20px 22px; }
.deck-narrow .slide-compare-title { font-size: 28px; margin-block-end: 14px; }
.deck-narrow .slide-compare-icon { width: 28px; height: 28px; }
.deck-narrow .slide-checks { gap: 20px; }
.deck-narrow .slide-check-row { font-size: 26px; gap: 12px; }
.deck-narrow .slide-check-icon { width: 28px; height: 28px; margin-block-start: 5px; padding: 4px; }
.deck-narrow .slide-acc-toggle { width: 56px; height: 56px; }
.deck-narrow .slide-acc-toggle-icon { width: 26px; height: 26px; }
.deck-narrow .slide-acc-head { font-size: 25px; padding: 14px 18px; gap: 12px; }
.deck-narrow .slide-acc-chevron { width: 22px; height: 22px; }
.deck-narrow .slide-acc-body { padding: 0 18px 16px; font-size: 24px; }
.deck-narrow .slide-stack { gap: 26px; }
.deck-narrow .slide-facts-strip { font-size: 23px; }
.deck-narrow .slide-body .slide-alt-names { font-size: 22px; gap: 10px; }
.deck-narrow .slide-alt-name { font-size: 21px; padding: 5px 14px; }
.deck-narrow .slide-hint { font-size: 21px; margin-block-start: 20px; }
.deck-narrow .slide-intro { font-size: 21px; margin-block-end: 18px; }
/* In-stage answer modal: nearly full-bleed; a smaller close button keeps
   clear of the question over the shrunken box padding. */
.deck-narrow .deck-modal { padding: 20px; }
.deck-narrow .deck-modal-box { max-width: 100%; padding: 28px 22px; }
.deck-narrow .deck-modal-close { width: 38px; height: 38px; inset-block-start: 10px; inset-inline-end: 12px; font-size: 26px; }
.deck-narrow .slide-q-detail-q { font-size: 28px; padding-inline-end: 56px; }
.deck-narrow .deck-modal-content { font-size: 25px; }
.deck-narrow .slide-modal-cue { font-size: 21px; padding: 10px 16px; }

/* --- Short canvas (F206): < 700 design px tall — landscape phones and
   tiny embeds. Hero slides top-align and SCROLL instead of clipping their
   vertically-centered block (content slides already scroll via
   .slide-content). The restart link joins the flow for the same reason. */
.deck-short .slide.slide-title, .deck-short .slide.slide-cta {
  justify-content: flex-start;
  overflow-y: auto;
  padding-block-end: 32px;
}
.deck-short .slide.slide-cta .deck-restart { position: static; align-self: center; margin-block-start: 12px; }
/* F207 (owner): EVERY command stays visible at every width — the overflow
   menu is gone (and since F208 the progress line lives on the deck's top
   edge, outside the bar). Small screens drop only the site NAME (logo
   stays). Graduated compaction keeps 44px-class touch targets down to
   360px phones. The [hidden] on .deck-full still applies where an iframe
   lacks allowfullscreen. */
@media (max-width: 640px) {
  .deck-bar { gap: 8px; padding: 0 10px; }
}
@media (max-width: 520px) {
  .deck-brand-name { display: none; }
}
@media (max-width: 430px) {
  .deck-bar { gap: 5px; padding: 0 8px; }
  /* The bar gap is already tighter than the counter's negative margin —
     without this reset the number would overlap the chevrons. */
  .deck-counter { margin-inline: 0; }
}
@media (max-width: 430px) and (pointer: coarse) {
  .deck-nav, .deck-full, .deck-dark { width: 44px; height: 44px; }
}
@media (max-width: 374px) {
  .deck-bar { gap: 4px; }
  .deck-counter { font-size: 12px; }
}
@media (max-width: 374px) and (pointer: coarse) {
  .deck-nav, .deck-full, .deck-dark { width: 42px; height: 42px; }
}