/* Lesson-deck theme — replicates the maroon/cream design of the original
   PDF decks. Used by both the Reveal.js present mode and the scroll view
   (slides/view.html, slides/preview.html).

   The deck palette is intentionally fixed (not theme-aware): a deck is a
   designed artifact and looks the same in light and dark site themes. */

:root {
  --sl-maroon:        #571c26;
  --sl-maroon-dark:   #46141d;
  --sl-maroon-circle: #6b2530;
  --sl-cream:         #f8f0dd;
  --sl-gold:          #d8a94e;
  --sl-ink:           #3d2b1f;
  --sl-ink-strong:    #1c1310;
  --sl-muted:         #9b8f7d;
  --sl-card:          #ffffff;
}

/* ------------------------------------------------------------------ */
/* Shared slide internals                                              */
/* ------------------------------------------------------------------ */

.sl-inner { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }

/* Title slide */
.sl-titleslide {
  justify-content: center;
  padding: 6% 8%;
  background:
    radial-gradient(circle at -4% -8%, var(--sl-maroon-circle) 0 14%, transparent 14.5%),
    radial-gradient(circle at 104% 12%, var(--sl-maroon-circle) 0 10%, transparent 10.5%),
    radial-gradient(circle at 103% 105%, var(--sl-maroon-circle) 0 15%, transparent 15.5%),
    var(--sl-maroon);
  color: #fff;
}
.sl-teaser   { color: var(--sl-gold); font-size: 1.1em; margin-bottom: .8em; }
.sl-title    { font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
               font-size: 2.6em; line-height: 1.15; margin: 0; color: #fdfaf4; }
.sl-subtitle { color: #d8cfc3; font-size: 1.15em; margin-top: .9em; }

/* Section divider */
.sl-sectionslide {
  justify-content: center; align-items: center; text-align: center;
  background:
    radial-gradient(circle at 106% -6%, var(--sl-maroon-circle) 0 12%, transparent 12.5%),
    radial-gradient(circle at -5% 108%, var(--sl-maroon-circle) 0 12%, transparent 12.5%),
    var(--sl-maroon);
  color: #fff;
}
.sl-sectionslide h2 {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: 2em; color: #fdfaf4; margin: 0; padding: 0 8%;
}

/* Word / sentence / contrast slides */
.sl-wordslide, .sl-sentenceslide, .sl-contrastslide { background: var(--sl-cream); }

.sl-band {
  display: flex; align-items: center; gap: 1em;
  background: var(--sl-maroon); color: #fff;
  padding: .55em 1.1em; min-height: 1.6em; flex-shrink: 0;
}
.sl-num {
  font-family: Georgia, serif; font-weight: 700; font-size: 1.25em;
  color: var(--sl-gold); flex-shrink: 0;
}
.sl-topic {
  font-family: Georgia, serif; font-weight: 700; font-size: .95em;
  line-height: 1.25;
}

.sl-bodyrow {
  display: flex; gap: 4%; flex: 1; min-height: 0;
  padding: 4% 5%; box-sizing: border-box;
}
.sl-card {
  background: var(--sl-card); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(70, 20, 29, .10);
  padding: 5% 4%; box-sizing: border-box;
  flex: 1 1 0; min-width: 0; overflow: auto;
}

/* Left card: the word(s).

   One word gets the full display size; every further word on the card takes
   type size, leading and the gap between words down a step (--w-*), because
   what overflows first is not the Thai but the meanings under it — a word
   with three meaning lines is three times as tall as one with a single line.
   Tightening the leading buys a whole line per word, which is why 3 words
   with multi-line meanings fit here and used to scroll. */
.sl-wordcard { display: flex; flex-direction: column; justify-content: center;
               text-align: center;
               --w-thai: 3.2em;     /* headword size */
               --w-lh: 1.35;        /* headword leading */
               --w-gap: 1em;        /* between stacked words */
               --w-rom-mt: .3em;    /* word/phonetic -> romanization */
               --w-mean-mt: .6em;   /* romanization -> meanings */
               --w-mean: 1em;       /* meanings size */
               --w-mean-lh: 1.45;
               --w-pad: 5%;         /* card padding (of card WIDTH, as ever) */
               --w-note: .8;        /* note size, as a fraction of a meaning */
               --w-note-mt: .25em;
               gap: var(--w-gap); padding: var(--w-pad) 4%; }
.sl-wordcard[data-n="2"] { --w-thai: 2.9em; --w-gap: .8em; --w-mean-mt: .45em; }
.sl-wordcard[data-n="3"] { --w-thai: 2.2em; --w-lh: 1.2; --w-gap: .45em;
                           --w-rom-mt: .1em; --w-mean-mt: .2em;
                           --w-mean: .95em; --w-mean-lh: 1.2; --w-pad: 2%;
                           --w-note: .75; --w-note-mt: .1em; }
.sl-wordcard[data-n="4"] { --w-thai: 1.9em; --w-lh: 1.15; --w-gap: .4em;
                           --w-rom-mt: .05em; --w-mean-mt: .15em;
                           --w-mean: .9em; --w-mean-lh: 1.22; --w-pad: 2.6%;
                           --w-note: .75; --w-note-mt: .1em; }
.sl-wordcard[data-n="5"] { --w-thai: 1.7em; --w-lh: 1.1; --w-gap: .3em;
                           --w-rom-mt: 0; --w-mean-mt: .1em;
                           --w-mean: .9em; --w-mean-lh: 1.2; --w-pad: 2.2%;
                           --w-note: .75; --w-note-mt: .08em; }
.sl-word-line { display: flex; align-items: center; justify-content: center;
                gap: .35em; }
.sl-word-thai {
  display: block; font-weight: 700; color: var(--sl-maroon);
  font-size: var(--w-thai); line-height: var(--w-lh); text-decoration: none;
}
/* 🔊 next to a word / example sentence. Overrides the site-wide pill
   (.tts-speak-btn in style.css) so it stays a quiet mark on a slide. */
.sl-tts.tts-speak-btn {
  flex: none; float: none; margin: 0; line-height: 1;
  padding: .25em .4em; border-radius: 999px;
  background: transparent; border: 1px solid rgba(87, 28, 38, .3);
  color: var(--sl-maroon); opacity: .55; vertical-align: middle;
}
.sl-tts.tts-speak-btn:hover { opacity: 1; background: rgba(87, 28, 38, .08);
                              border-color: rgba(87, 28, 38, .5); }
.sl-word-line .sl-tts { font-size: calc(var(--w-thai) * .44); }
.sl-ex-thai .sl-tts { font-size: .8em; margin-right: .35em; }
/* Do not hide for follower body.sl-follow .sl-tts { display: none; }*/
a.sl-word-thai:hover { text-decoration: underline; text-decoration-thickness: 2px; }
/* Syllable-spelled reading aid under the word: 30% smaller than the word
   itself, muted by default; consonant-class coloring (body.cc-on) overrides
   the color per consonant like any other Thai text. */
.sl-phonetic {
  font-weight: 700; color: var(--sl-muted);
  font-size: calc(var(--w-thai) * .42);
  line-height: 1.3; margin-top: -.15em;
}
.sl-rom { color: var(--sl-muted); font-style: italic;
          margin-top: var(--w-rom-mt); }
.sl-rom sup, .sl-rom-inline sup { font-size: .68em; }
.sl-meanings { margin-top: var(--w-mean-mt); color: var(--sl-ink);
               font-weight: 600; font-size: var(--w-mean);
               line-height: var(--w-mean-lh); }
.sl-meaning + .sl-meaning { margin-top: .15em; }
/* Optional remark under the meanings: register, caveat, "only in speech" —
   quieter and smaller than a meaning so it never reads as one. */
.sl-word-note { margin-top: var(--w-note-mt); color: var(--sl-muted);
                font-style: italic; line-height: 1.25;
                font-size: calc(var(--w-mean) * var(--w-note)); }

/* Right card: examples */
.sl-examplecard { display: flex; flex-direction: column; justify-content: center;
                  gap: 1.3em; text-align: center; }
.sl-example { }
.sl-ex-thai { font-weight: 700; color: var(--sl-ink-strong); font-size: 1.15em;
              line-height: 1.7; }
.sl-ex-tr   { color: var(--sl-ink); margin-top: .25em; line-height: 1.35; }
.sl-footnote { color: var(--sl-muted); font-size: .72em; margin-top: auto;
               padding-top: .8em; }

/* Sentence slide */
.sl-sentencecard { display: flex; flex-direction: column; justify-content: center;
                   text-align: center; gap: .6em; }
.sl-sentence-thai { font-weight: 700; color: var(--sl-ink-strong);
                    font-size: 1.7em; line-height: 1.8; }
.sl-sentence-tr   { color: var(--sl-ink); font-size: 1.05em; }
.sl-notes { margin-top: 1.1em; text-align: left; display: inline-block;
            align-self: center; }
.sl-note  { margin: .25em 0; color: var(--sl-ink); }
.sl-note-thai { font-weight: 700; font-size: 1.15em; text-decoration: none;
                color: var(--sl-maroon); }
a.sl-note-thai:hover { text-decoration: underline; }
.sl-rom-inline { color: var(--sl-muted); font-style: italic; font-size: .85em;
                 margin: 0 .3em; }

/* Word links inside example sentences */
.sl-ex-thai a.slide-thai, .sl-sentence-thai a.slide-thai {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted rgba(87, 28, 38, .45);
}
.sl-ex-thai a.slide-thai:hover, .sl-sentence-thai a.slide-thai:hover {
  border-bottom-style: solid; color: var(--sl-maroon);
}

/* ------------------------------------------------------------------ */
/* Contrast slide — a grid of minimal pairs / homophones               */
/*                                                                     */
/* Cards carry only the word, its reading and a one-line gloss, so the */
/* comparison is the whole slide. Card width and type size come from   */
/* the item count (--ct-* below): a pair fills the slide with two huge */
/* words, seven shrink to a 4+3 wall — the same progression as the     */
/* hand-made homophone decks. The last row is centred by justify-      */
/* content, which is what makes a 3+2 or 4+3 grid look deliberate.     */
/* ------------------------------------------------------------------ */

.sl-ctbody {
  display: flex; flex-direction: column; gap: .6em;
  flex: 1; min-height: 0; padding: 3.5% 4%; box-sizing: border-box;
}
.sl-ctgrid {
  --ct-cols: 3;
  --ct-gap: 2.2%;
  --ct-thai: 2.4em;
  --ct-rom: 1em;
  --ct-gloss: 1.05em;
  display: flex; flex-wrap: wrap;
  justify-content: center; align-content: stretch;
  column-gap: var(--ct-gap); row-gap: .8em;
  flex: 1; min-height: 0;
}
.sl-ctgrid[data-n="2"] { --ct-cols: 2; --ct-thai: 4.6em; --ct-rom: 1.45em; --ct-gloss: 1.45em; }
.sl-ctgrid[data-n="3"] { --ct-cols: 3; --ct-thai: 3.8em; --ct-rom: 1.25em; --ct-gloss: 1.25em; }
.sl-ctgrid[data-n="4"] { --ct-cols: 2; --ct-thai: 3em;   --ct-rom: 1.1em;  --ct-gloss: 1.15em; }
.sl-ctgrid[data-n="5"],
.sl-ctgrid[data-n="6"] { --ct-cols: 3; --ct-thai: 2.4em; --ct-rom: 1em;    --ct-gloss: 1.05em; }
.sl-ctgrid[data-n="7"],
.sl-ctgrid[data-n="8"] { --ct-cols: 4; --ct-thai: 2em;   --ct-rom: .9em;   --ct-gloss: .95em; }

.sl-ctcard {
  flex: 0 1 calc((100% - (var(--ct-cols) - 1) * var(--ct-gap)) / var(--ct-cols));
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; gap: .15em; padding: 2.5% 3%;
}
.sl-ct-line { display: flex; align-items: center; justify-content: center; gap: .3em; }
.sl-ct-line .sl-tts { font-size: .85em; }
.sl-ct-thai {
  font-weight: 700; color: var(--sl-maroon); text-decoration: none;
  font-size: var(--ct-thai); line-height: 1.3;
}
a.sl-ct-thai:hover { text-decoration: underline; text-decoration-thickness: 2px; }
/* Syllable-spelled reading aid, as on word slides — 30% under the word. */
.sl-ct-phonetic { font-weight: 700; color: var(--sl-muted);
                  font-size: calc(var(--ct-thai) * .42); line-height: 1.3; }
.sl-ct-rom   { color: var(--sl-muted); font-style: italic; font-size: var(--ct-rom); }
.sl-ct-rom sup { font-size: .68em; }
.sl-ct-gloss { color: var(--sl-ink); font-weight: 600; font-size: var(--ct-gloss);
               line-height: 1.35; margin-top: .15em; }
.sl-ct-note  { color: var(--sl-muted); font-size: calc(var(--ct-gloss) * .8);
               line-height: 1.3; }
.sl-ct-footnote { flex: none; margin-top: 0; padding-top: 0; text-align: center; }

/* ------------------------------------------------------------------ */
/* Present mode (Reveal.js)                                            */
/* ------------------------------------------------------------------ */

.reveal .slides section.sl-slide {
  height: 100%; padding: 0; top: 0 !important;
}
.reveal .slides { text-align: left; }
body.sl-present { background: var(--sl-maroon-dark); }

/* Top-right overlay chrome (outside .reveal so Reveal scaling never touches it) */
.sl-overlay {
  position: fixed; top: .6rem; right: .8rem; z-index: 70;   /* above the QR overlay */
  display: flex; align-items: center; gap: .5rem;
}
.sl-overlay a.sl-exit {
  color: #e7d9c5; text-decoration: none; font-size: .85rem;
  background: rgba(0, 0, 0, .25); padding: .25rem .6rem; border-radius: 999px;
}
.sl-overlay a.sl-exit:hover { background: rgba(0, 0, 0, .45); }
.sl-live-btn {
  color: #e7d9c5; background: rgba(0, 0, 0, .25); border: none; cursor: pointer;
  font-size: .85rem; padding: .25rem .6rem; border-radius: 999px;
}
.sl-live-btn:hover { background: rgba(0, 0, 0, .45); }
.sl-live-btn[aria-pressed="true"] { background: rgba(231, 217, 197, .85); color: #3a1018; }
.sl-live-status { font-size: .78rem; color: #b8a88f; padding: .2rem .55rem;
                  border-radius: 999px; background: rgba(0, 0, 0, .25); }
.sl-live-status.on   { color: #7fe0a0; }
.sl-live-status.warn { color: #f2b96a; }

/* Follow-link QR over the dimmed deck */
.sl-qr-overlay {
  position: fixed; inset: 0; z-index: 60; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .8);
}
.sl-qr-overlay[hidden] { display: none; }   /* beats display:flex */
.sl-qr-box {
  position: relative;
  /* 80% of the smaller viewport side */
  width: min(80vw, 80vh); height: min(80vw, 80vh);
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 50px rgba(0, 0, 0, .55);
}
.sl-qr-code { display: block; width: 100%; height: 100%; }
/* Punched over the middle of the symbol — error correction H covers it. */
.sl-qr-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 20%; height: 20%; padding: 1.2%; box-sizing: border-box;
  background: #fff; border-radius: 22%;
}

/* ------------------------------------------------------------------ */
/* Present-mode overlays: phrases zoom + dictionary panel              */
/*                                                                     */
/* Both are fixed-position SIBLINGS of .reveal — position:fixed cannot */
/* escape Reveal's transformed container. State (z / e) is mirrored to */
/* followers through the live SSE channel.                             */
/* ------------------------------------------------------------------ */

/* ⤢ button injected by present.html JS onto example/sentence cards */
.sl-zoom-btn {
  position: absolute; top: .4em; right: .5em; z-index: 5;
  border: none; cursor: pointer; border-radius: 8px;
  background: rgba(87, 28, 38, .08); color: var(--sl-maroon);
  font-size: 1.05em; line-height: 1; padding: .25em .4em;
}
.sl-zoom-btn:hover { background: rgba(87, 28, 38, .2); }
.sl-examplecard, .sl-sentencecard { position: relative; }

#zoom-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: none; box-sizing: border-box;
  flex-direction: column;
  background: var(--sl-cream);
  padding: 4vh 5vw;
  overflow: auto;
}
#zoom-overlay.open { display: flex; }
/* Centre the cloned card vertically. Auto margins on the outer children do
   this without clipping the top when the clone is taller than the overlay
   (which justify-content: center would); a single child gets both. */
/* .open keeps these above the per-card margin rules below. */
#zoom-overlay > *                   { flex: none; }
#zoom-overlay.open > :first-child   { margin-top: auto; }
#zoom-overlay.open > :last-child    { margin-bottom: auto; }
/* Reuse the card layout classes at reading-distance sizes. Every size here
   is a multiple of the OVERLAY's font-size, which slides_fit.js grows until
   the phrases fill the screen — the clamp below is only the starting point
   (and the whole answer when the script does not run). */
#zoom-overlay { font-size: clamp(1rem, 2.4vmin, 1.6rem); }
#zoom-overlay .sl-example { margin: 0 auto 1.7em; max-width: 62ch; text-align: center; }
#zoom-overlay .sl-ex-thai { font-size: 2.1em;
                            line-height: 1.8; font-weight: 700;
                            color: var(--sl-ink-strong); }
#zoom-overlay .sl-ex-tr   { font-size: 1.18em;
                            color: var(--sl-ink); margin-top: .3em; }
#zoom-overlay .sl-sentence-thai { font-size: 2.35em; line-height: 1.9; }
#zoom-overlay .sl-sentence-tr   { font-size: 1.25em; }
#zoom-overlay .sl-notes { display: block; text-align: center; }
#zoom-overlay .sl-note  { font-size: 1.05em; }
#zoom-overlay .sl-footnote { text-align: center; font-size: .75em; }
#zoom-overlay .sl-zoom-btn { display: none; }   /* no nested zoom buttons in clones */
/* shrink dictionary-open state: keep zoomed phrases visible in the top half */
body.dict-open #zoom-overlay { bottom: 50vh; }

/* Overlay close buttons (shared look) */
.sl-overlay-close {
  position: fixed; z-index: 60; border: none; cursor: pointer;
  border-radius: 999px; width: 2rem; height: 2rem; line-height: 1;
  background: rgba(0, 0, 0, .35); color: #f2e8d8; font-size: 1rem;
}
.sl-overlay-close:hover { background: rgba(0, 0, 0, .55); }
#zoom-close { top: .6rem; left: .8rem; display: none; }
#zoom-overlay.open ~ #zoom-close { display: block; }

#dict-panel {
  position: fixed; left: 0; right: 0; bottom: 0; height: 50vh; z-index: 50;
  display: none; background: #fff;
  border-top: 3px solid var(--sl-gold);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
}
#dict-panel.open { display: block; }
#dict-panel iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
#dict-close { display: none; }
#dict-panel.open ~ #dict-close { display: block; }
#dict-close { bottom: calc(50vh - 1rem); right: .8rem; top: auto;
              background: var(--sl-maroon); }

/* ------------------------------------------------------------------ */
/* Scaled slide stages (deck landing page + editor preview)            */
/*                                                                     */
/* Every non-Reveal rendering of a deck uses the SAME fixed 1000x563   */
/* geometry as present mode, shrunk to the container width by          */
/* slides_scale.js — a true miniature, never a responsive reflow.      */
/* ------------------------------------------------------------------ */

.pv-list { display: flex; flex-direction: column; gap: 1rem; }
.pv-slide { position: relative; overflow: hidden; }
.pv-stage {
  width: 1000px; height: 563px;
  transform-origin: top left;
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(87, 28, 38, .18);
  box-shadow: 0 2px 8px rgba(70, 20, 29, .10);
  box-sizing: border-box;
}
.pv-stage .sl-inner { height: 100%; }