/* player-dyn-mount.css — GENERATED by gen_dyncss.js. DO NOT EDIT.
   Source of truth: the STYLES + DYN_STYLES strings in live/player.js, concatenated in the
   order player.js injects them. Extracted so topic pages can link them in <head> and have the
   sentence-card chrome + dyn controls + the r28 body.te-v2 restyle apply at FIRST PAINT.
   player.js still injects its own <style id="player-styles"><style id="dyn-styles"> at mount,
   later in the document, so player.js always wins on a tie — this file can only ever make the
   rules land earlier, never make a page wrong. Re-run gen_dyncss.js when either string changes. */

/* ── STYLES ── */

    /* ══ THE PROGRESS CARD'S RESERVED SLOT (r139 — re-measured across the whole width range) ══
       WHY IT IS ALWAYS THE LAST THING TO APPEAR, and why that is not about its size: renderProgress()
       returns early until ThaiEarAuth.isReady, so this card waits on a Supabase auth round trip
       (session restore / token refresh against auth.thaiear.com) and then on the user's progress
       rows. Everything else on the page — the whole dyn player included — is local DOM and local
       CSS and needs no network at all. On a slow connection the card can be seconds behind. That
       is inherent; what must NOT happen is the page moving when it lands.
       ⚠ ONE min-height CANNOT COVER THIS CARD — it has FOUR distinct heights, because the flex row
       wraps at different points in each auth state. Measured (Chrome, real page, per viewport):
           vw ≤374   logged-in 80.4   logged-out 93.4   ← label wraps to 3 lines
           375–438   logged-in 80.4   logged-out 73.4   ← every current iPhone lives here
           439–600   logged-in 46.9   logged-out 73.4
           ≥601      logged-in 52.9   logged-out 44.7
       The old flat 73px was taken from the logged-out card at phone width, so a SIGNED-IN user on
       any iPhone got a 7.4px downshift of everything below when the card landed (owner-reported as
       "downshifts a fraction", 2026-08-03) — and a signed-out user at ≤374 got 20.4px. Below 600 it
       was also over-reserved by up to 26px at tablet widths, leaving a visible gap.
       Each band now reserves its own local maximum, and the card STRETCHES to fill the reservation
       (display:flex + flex:1 on the card) so an over-reserved band reads as a slightly roomier card
       rather than a gap above the player. Net: no shift in any state at any width.
       ⚠ Re-measure these four numbers if the card's copy, padding or type size changes — they are
       measurements, not round numbers. The dyn-plmode display:none rule (2 classes) still beats
       the display:flex here, so the playlist player is unaffected. */
    .progress-controls { margin-bottom: 0.9rem; min-height: 54px; display: flex; }
    .progress-controls > .prog-ctl-card { flex: 1; }
    .prog-ctl-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
      background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 0.7rem 0.9rem; }
    .prog-ctl-left { display: flex; align-items: baseline; gap: 7px; }
    .prog-ctl-count { font-size: 20px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; transition: transform 0.18s; }
    .prog-ctl-count.bump { animation: prog-bump 0.4s cubic-bezier(0.2,0.8,0.3,1.3); }
    @keyframes prog-bump { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
    .prog-ctl-label { font-size: 12.5px; color: var(--text-secondary); }
    .prog-ctl-btns { display: flex; align-items: center; gap: 7px; }
    .prog-ctl-btn { font-family: var(--font-ui); font-size: 13px; font-weight: 500; border-radius: var(--radius-sm);
      border: 0.5px solid var(--border-strong); background: var(--surface); color: var(--text-secondary);
      padding: 6px 12px; cursor: pointer; min-width: 36px; display: inline-flex; align-items: center; justify-content: center;
      gap: 5px; transition: background 0.15s, border-color 0.15s, color 0.15s; }
    .prog-ctl-btn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
    .prog-ctl-btn[disabled] { opacity: 0.55; cursor: default; }
    .prog-ctl-btn.prog-ctl-add { background: var(--accent); color: #fff; border-color: var(--accent); }
    .prog-ctl-btn.prog-ctl-add:hover:not([disabled]) { background: var(--accent-mid); color: #fff; }
    .prog-ctl-minus { font-size: 17px; line-height: 1; font-weight: 400; padding: 5px 13px; }
    .prog-ctl-my { font-size: 12.5px; font-weight: 500; color: var(--accent); text-decoration: none; margin-left: 3px; white-space: nowrap; }
    .prog-ctl-my:hover { color: var(--accent-mid); }
    .prog-ctl-join { font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: none; }
    .prog-ctl-join:hover { color: var(--accent-mid); }
    .prog-spin { display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: prog-spin 0.6s linear infinite; }
    @keyframes prog-spin { to { transform: rotate(360deg); } }
    .prog-tick { display: inline-block; font-weight: 700; animation: prog-tick-pop 0.4s cubic-bezier(0.2,0.8,0.3,1.3) both; }
    @keyframes prog-tick-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
    @media (max-width: 600px) {
      /* 439–600px band: max(logged-in 46.9, logged-out 73.4) — see the measurement table above. */
      .progress-controls { min-height: 74px; }
      .prog-ctl-card { padding: 0.6rem 0.7rem; }
      .prog-ctl-count { font-size: 18px; }
      .prog-ctl-btn { font-size: 12px; padding: 5px 10px; }
    }
    /* 375–438px — EVERY CURRENT IPHONE. The logged-in card wraps here and becomes the taller of
       the two (80.4 vs 73.4); the wrap point is between 437 and 439, measured.
       ⚠ THE .98 IS NOT A TYPO AND MUST NOT BE ROUNDED. On a fractional devicePixelRatio (1.35 on
       the machine these were measured on, and every modern phone) the viewport width is itself
       fractional, so an integer max-width: 438px evaluates FALSE at innerWidth 438 — verified. An
       breakpoint therefore leaves exactly one pixel column of width at which the reserve is one
       band too small and the shift comes straight back. Same reason Bootstrap offsets its own
       max-width breakpoints by .98. */
    @media (max-width: 438.98px) { .progress-controls { min-height: 81px; } }
    /* ≤374px — the logged-out label wraps to a third line and takes over as the tallest (93.4);
       the wrap point is between 374 and 375, measured. */
    @media (max-width: 374.98px) { .progress-controls { min-height: 94px; } }
    .player-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem 1rem; margin-bottom: 1.75rem; }
    .player-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
    .audio-toggle { display: flex; flex-wrap: wrap; max-width: 100%; gap: 2px; background: var(--bg); border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 2px; }
    .toggle-btn { font-size: calc(12px * var(--te-ui, 1)); font-family: var(--font-ui); font-weight: 400; color: var(--text-secondary); background: none; border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; }
    .toggle-btn:hover { color: var(--text-primary); }
    .toggle-btn.active { background: var(--accent); color: white; font-weight: 500; }
    .audio-row { display: flex; align-items: center; gap: 12px; }
    .play-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; }
    .play-btn:hover { background: var(--accent-mid); }
    .play-btn svg { fill: white; width: 14px; height: 14px; margin-left: 2px; }
    .skip-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; background: none; border: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, color 0.15s; }
    .skip-btn:hover { background: var(--bg); color: var(--accent); }
    .skip-btn svg { width: 30px; height: 30px; }
    .skip-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
    .scrubber-wrap { flex: 1; }
    .scrubber-track { width: 100%; padding: 14px 0; cursor: pointer; margin-bottom: 5px; touch-action: none; }
    .scrubber { width: 100%; height: 3px; background: var(--border); border-radius: 2px; position: relative; pointer-events: none; }
    .scrubber-fill { position: relative; height: 100%; width: 0%; background: var(--accent); border-radius: 2px; transition: width 0.1s linear; }
    .scrubber-fill::after { content: ''; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
    .time-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
    .orientation-text { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 1.25rem; padding: 0.75rem 1rem; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-md); }
    .orientation-text strong { color: var(--text-primary); font-weight: 500; }
    .orientation-text a { color: var(--accent); font-weight: 500; text-decoration: none; }
    .controls-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; flex-wrap: wrap; gap: 6px; }
    .reveal-all-btn { font-size: calc(12px * var(--te-ui, 1)); font-family: var(--font-ui); color: var(--text-secondary); background: none; border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background 0.15s; }
    .reveal-all-btn:hover { background: var(--surface); }
    /* ---- transliteration toggle (topics shipping per-sentence translit, currently 01–03) ----
       Default ON (new visitors should see it exists); .translit-off on #sentence-list hides both
       the under-Thai line and the chips' translit. Choice remembered per device via localStorage. */
    .controls-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .translit-btn { font-size: calc(12px * var(--te-ui, 1)); font-family: var(--font-ui); color: var(--text-secondary); background: none; border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s, border-color 0.15s, color 0.15s; }
    .translit-btn:hover { background: var(--surface); }
    .translit-btn.on { background: var(--accent-light); border-color: var(--accent); color: var(--accent); font-weight: 500; }
    .translit-btn .tl-ico { font-size: calc(11px * var(--te-ui, 1)); }
    .translit-btn .tl-ico .th { font-family: var(--font-thai); }
    .thai-translit { font-family: var(--font-ui); font-size: 13px; color: var(--text-tertiary); line-height: 1.55; margin-top: 1px; }
    .g-tl { color: var(--text-secondary); margin-left: 4px; }
    #sentence-list.translit-off .thai-translit, #sentence-list.translit-off .g-tl { display: none; }
    .sent-count-label { font-size: calc(12px * var(--te-ui, 1)); color: var(--text-tertiary); min-width: 0; }
    .sentence-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 7px; overflow: hidden; transition: border-color 0.15s; }
    .sentence-card:hover { border-color: var(--border-strong); }
    .sentence-header { display: flex; align-items: center; gap: 10px; padding: 0.7rem 1rem; cursor: pointer; user-select: none; -webkit-user-select: none; }
    .sent-num { font-size: 11px; font-weight: 500; color: var(--text-tertiary); min-width: 20px; font-variant-numeric: tabular-nums; }
    .sent-play-btn { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-light); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; }
    .sent-play-btn:hover { background: var(--accent); }
    .sent-play-btn:hover svg { fill: white; }
    .sent-play-btn.playing { background: var(--accent); }
    .sent-play-btn svg { fill: var(--accent); width: 10px; height: 10px; margin-left: 1px; }
    .sent-play-btn.playing svg { fill: white; margin-left: 0; }
    .speed-toggle { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-light); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; font-size: 14px; line-height: 1; }
    .speed-toggle:hover { background: var(--accent); }
    .speed-toggle.active { background: var(--accent); }
    .sent-flag-btn { width: 26px; height: 26px; border-radius: 50%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; transition: background 0.15s, transform 0.15s; }
    .sent-flag-btn:hover { background: var(--accent-light); }
    .sent-flag-btn svg { width: 15px; height: 15px; fill: none; stroke: var(--purple-mid); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; transition: fill 0.15s, stroke 0.15s, opacity 0.15s; }
    .sent-flag-btn:hover svg { opacity: 1; }
    .sent-flag-btn.flagged svg { fill: var(--accent); stroke: var(--accent); opacity: 1; }
    .sent-flag-btn.pending { opacity: 0.5; pointer-events: none; }
    .sent-flag-btn.pop { animation: sent-flag-pop 0.4s cubic-bezier(0.2,0.8,0.3,1.3); }
    @keyframes sent-flag-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
    .sent-preview { font-family: var(--font-thai); font-size: 16px; color: var(--text-primary); flex: 1; line-height: 1.4; }
    .sent-preview .ell { color: var(--text-tertiary); }
    .prog-wrap { display: flex; align-items: center; gap: 2.5px; flex-shrink: 0; padding: 2px 0; }
    .prog-seg { width: 5px; height: 16px; border-radius: 3px; background: var(--border); transition: background 0.2s ease; }
    .prog-seg.on { background: var(--accent); }
    .sentence-body { border-top: 0.5px solid var(--border); }
    .reveal-row { padding: 0.6rem 1rem; border-bottom: 0.5px solid var(--border); }
    .reveal-row:last-child { border-bottom: none; }
    /* ---- direction-aware reveal order ----
       Default (Thai-first / no dir class): the page's own reveal CSS opens Thai → English → notes.
       When English-first (et) is selected we override just enough to open English → Thai → notes and
       put English on top. Keyed on #sentence-list.dir-et (id → beats the page's class-only rules), so
       the static SSR cards + st-0..3 stages stay untouched. Only ET needs overrides; TE is unchanged. */
    #sentence-list.dir-et .sentence-body { display: flex; flex-direction: column; }
    #sentence-list.dir-et .row-english { order: 1; }
    #sentence-list.dir-et .row-thai { order: 2; }
    #sentence-list.dir-et .row-notes { order: 3; }
    /* stage 1: show English (not Thai) first */
    #sentence-list.dir-et .sentence-card.st-1 .row-thai { display: none; }
    #sentence-list.dir-et .sentence-card.st-1 .row-english { display: block; }
    /* bottom-border tidy: no rule under the visually-last row at each stage (English@1, Thai@2) */
    #sentence-list.dir-et .sentence-card.st-1 .row-english { border-bottom: none; }
    #sentence-list.dir-et .sentence-card.st-2 .row-english { border-bottom: 0.5px solid var(--border); }
    #sentence-list.dir-et .sentence-card.st-2 .row-thai { border-bottom: none; }
    .row-thai { font-family: var(--font-thai); font-size: 19px; font-weight: 400; color: var(--text-primary); line-height: 1.5; }
    .row-english { font-size: 14px; color: var(--text-secondary); }
    .row-notes { background: var(--bg); }
    .gloss-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
    .gloss-chip { background: var(--surface); border: 0.5px solid var(--border); border-radius: 20px; padding: 2px 9px; font-size: 12px; line-height: 1.5; }
    .g-thai { font-family: var(--font-thai); color: var(--text-primary); font-weight: 500; }
    .g-eq { color: var(--text-tertiary); margin: 0 2px; }
    .g-eng { color: var(--text-secondary); }
    .cultural-note { font-size: 11.5px; color: var(--text-tertiary); font-style: italic; margin-top: 5px; padding-top: 5px; border-top: 0.5px solid var(--border); line-height: 1.5; }
    @media (max-width: 800px) {
      .player-card { padding: 0.9rem 1rem 0.85rem; }
    }
    @media (max-width: 600px) {
      .player-card { padding: 0.85rem 0.9rem 0.8rem; margin-bottom: 1.25rem; }
      .play-btn { width: 34px; height: 34px; }
      .controls-row { margin-bottom: 0.5rem; }
      .reveal-all-btn { font-size: calc(11px * var(--te-ui, 1)); padding: 4px 10px; }
      .translit-btn { font-size: calc(11px * var(--te-ui, 1)); padding: 4px 10px; }
      .sentence-header { padding: 0.6rem 0.85rem; }
      .sent-preview { font-size: 15px; }
      .row-thai { font-size: 17px; }
      .reveal-row { padding: 0.5rem 0.85rem; }
      .gloss-chip { font-size: 11px; padding: 2px 7px; }
      .cultural-note { font-size: 11px; }
      .orientation-text { font-size: 12px; }
      /* nudge the page eyebrow (the difficulty, e.g. "BEGINNER") up a hair on phones — applies to
         ALL topic pages (player.js loads on every one) for consistency; overrides their 10px rule. */
      .topic-eyebrow { font-size: 10.5px; }
    }
    @media (max-width: 380px) {
      .row-thai { font-size: 16px; }
    }
    /* ---- continuous-playback controls (autoplay / prev / next / repeat) ---- */
    .player-top { flex-wrap: wrap; gap: 8px; }
    .xtra-controls { display: flex; align-items: center; gap: 4px; }
    .xtra-toggle { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--text-secondary);
      background: var(--bg); border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
      padding: 5px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
      transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
    .xtra-toggle:hover { color: var(--text-primary); }
    .xtra-toggle svg { width: 13px; height: 13px; }
    .xtra-lbl-short { display: none; }   /* the compact "Auto" label is mobile-only */
    .xtra-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .xtra-icon { position: relative; width: 32px; height: 32px; border-radius: 50%; background: none; border: none;
      color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: background .15s, color .15s; }
    .xtra-icon:hover { background: var(--bg); color: var(--accent); }
    .xtra-icon svg { width: 17px; height: 17px; }
    .xtra-icon.active { color: var(--accent); }
    .repeat-badge { position: absolute; top: 0; right: 0; min-width: 12px; height: 12px; padding: 0 2px; box-sizing: border-box;
      border-radius: 6px; background: var(--accent); color: #fff; font-size: 8px; font-weight: 700; line-height: 12px;
      text-align: center; display: none; }
    .xtra-icon.active .repeat-badge { display: block; }
    .now-playing { display: none; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary);
      background: var(--bg); border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 6px 10px; margin-bottom: 0.85rem; }
    .now-playing.show { display: flex; }
    .now-playing .np-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: np-pulse 1.4s ease-in-out infinite; }
    @keyframes np-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
    .now-playing strong { color: var(--text-primary); font-weight: 600; }
    .now-playing a { color: var(--accent); text-decoration: none; }
    .now-playing a strong { color: var(--accent); }
    /* Colour the link by the PLAYED topic's tier, not the page's. The link sits inside #player-root,
       where a premium PAGE remaps --accent to gold — so member/free destinations are pinned to the
       literal brand purple here to defeat that, and premium destinations to the text-gold. */
    .now-playing a.np-premium, .now-playing a.np-premium strong { color: #B29234; }
    .now-playing a.np-member, .now-playing a.np-member strong { color: #4B41AD; }
    .now-playing a:hover { text-decoration: underline; }
    .now-playing a.np-return { color: #C0392B; font-weight: 600; margin-left: 8px; white-space: nowrap; }
    .offline-bar { display: flex; align-items: center; gap: 10px; margin: -0.75rem 0 1.25rem; flex-wrap: wrap; }
    .offline-btn { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--accent); background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s, border-color 0.15s; }
    .offline-btn:hover { border-color: var(--accent); background: var(--accent-light); }
    .offline-btn.offline-del { color: var(--text-secondary); }
    .offline-status { font-size: 13px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 7px; }
    .offline-status.offline-ok { color: var(--accent); font-weight: 500; }
    .te-licence-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(20,16,40,0.55); display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
    .te-licence-card { background: var(--surface); border-radius: var(--radius-lg); max-width: 360px; width: 100%; padding: 1.9rem 1.6rem; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
    .te-licence-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #B29234; background: var(--gold-light, #FBF5DC); padding: 4px 11px; border-radius: 20px; margin-bottom: 0.9rem; }
    .te-licence-card h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.6rem; color: var(--text-primary); }
    .te-licence-card p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin: 0 0 0.5rem; }
    .te-licence-card .te-licence-sub { color: var(--text-tertiary); font-size: 13px; margin-bottom: 1.5rem; }
    .te-licence-btn { font-family: var(--font-ui); font-size: 15px; font-weight: 500; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 11px 20px; cursor: pointer; width: 100%; }
    .te-licence-btn:hover { background: var(--accent-mid); }
    .te-licence-card .te-licence-note { margin-top: 1rem; font-size: 12px; color: var(--text-tertiary); }
    @media (max-width: 600px) {
      /* keep the whole control row on ONE line on phones (portrait) */
      .player-top { gap: 6px; }
      .audio-toggle .toggle-btn { font-size: calc(11px * var(--te-ui, 1)); padding: 4px 7px; }
      .xtra-controls { gap: 2px; }
      .xtra-toggle { font-size: 11px; padding: 5px 7px; gap: 4px; }
      .xtra-toggle svg { width: 12px; height: 12px; }
      .xtra-lbl-full { display: none; }    /* swap "Autoplay" → "Auto" to save width */
      .xtra-lbl-short { display: inline; }
      .xtra-icon { width: 28px; height: 28px; }
      .xtra-icon svg { width: 16px; height: 16px; }
    }
    @media (max-width: 360px) {
      .xtra-lbl-short { display: none; }   /* tightest phones: autoplay icon only */
      .xtra-icon { width: 26px; height: 26px; }
    }
    /* ---- Premium topic skin: recolour the player + sentence controls purple → GOLD so it's clear
       at a glance you're on a premium topic. Scoped to the player and sentence list (variable
       override) so the rest of the page stays brand purple; the eyebrow is recoloured separately.
       Light gold = unselected, brighter gold = selected/active. Web AND app; member topics stay
       purple. ---- */
    body.premium-topic #player-root, body.premium-topic #sentence-list {
      --accent: #F0CC5C;        /* the hero Thai-script gold (homepage .hero-thai) */
      --accent-mid: #E3BC48;    /* hover / darker */
      --accent-light: #FBF5DC;  /* unselected — brand light gold (--gold-light) */
      --purple-mid: #D4A82C;    /* sentence-flag outline (visible on the card) */
    }
    /* Bright-gold FILLS carry DARK text/icons (white/light washes out on the light gold). */
    body.premium-topic .play-btn svg,
    body.premium-topic .sent-play-btn.playing svg,
    body.premium-topic .sent-play-btn:hover svg { fill: #3D2E00; }
    body.premium-topic .toggle-btn.active,
    body.premium-topic .xtra-toggle.active,
    body.premium-topic .prog-ctl-add,
    body.premium-topic .prog-ctl-add:hover:not([disabled]),
    body.premium-topic .repeat-badge { color: #3D2E00; }
    /* The eyebrow, subheading and the small player TEXT (progress count + links) use the canonical
       gold-TEXT tone #B29234 (the "Premium" index-pill colour) — readable on the pale page, distinct
       from the brighter #F0CC5C used for FILLS/graphics. The eyebrow/subtitle sit OUTSIDE the player,
       so they need explicit rules anyway. See the premium-gold-palette memory for the full standard. */
    body.premium-topic .topic-eyebrow,
    body.premium-topic .topic-subtitle,
    body.premium-topic .prog-ctl-count,
    body.premium-topic .prog-ctl-my,
    body.premium-topic .prog-ctl-join,
    body.premium-topic .orientation-text a,
    body.premium-topic .offline-btn,
    body.premium-topic .offline-status.offline-ok { color: #B29234; }
    /* ---- floating mini transport ----
       Slim play/pause + ±10 + progress bar that sticks under the nav once the user has started the
       TE/ET track and the real player is scrolled off. Fixed overlay (no layout shift). Hidden state =
       translated off the top + non-interactive, kept in the DOM so show/hide can transition. */
    .te-mini {
      position: fixed; top: 54px; left: 0; right: 0; z-index: 60;
      display: flex; flex-direction: column;
      max-width: 640px; margin: 0 auto; padding: 8px 12px;
      background: var(--accent-light, #EEEDFE); color: var(--accent, #4B41AD);
      border: 0.5px solid var(--border, rgba(0,0,0,0.1)); border-radius: 0 0 14px 14px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.12);
      font-family: var(--font-ui, system-ui, sans-serif);
      transform: translateY(-130%); opacity: 0; pointer-events: none;
      transition: transform 0.22s ease, opacity 0.22s ease;
    }
    .te-mini.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .te-mini-row { display: flex; align-items: center; gap: 10px; }
    .te-mini button { border: 0; background: transparent; color: inherit; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; padding: 0; }
    .te-mini-play { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
      background: var(--accent, #4B41AD); color: #fff; }
    .te-mini-play svg { width: 15px; height: 15px; fill: #fff; }
    .te-mini-skip { position: relative; width: 30px; height: 30px; flex-shrink: 0; }
    .te-mini-skip svg { width: 22px; height: 22px; }
    .te-mini-skip .skip-num { position: absolute; top: 53%; left: 0; right: 0; transform: translateY(-50%);
      font-size: 8px; font-weight: 700; text-align: center; }
    /* Big, easy-to-grab seek zone: 44px tall hit area around a 4px visible track. touch-action:pan-y
       lets the page still scroll vertically while horizontal drags scrub. Stays inside the controls
       row, so it never overlaps the now-playing link below. */
    .te-mini-scrub { flex: 1; min-width: 40px; min-height: 44px; align-self: stretch;
      display: flex; align-items: center; cursor: pointer; touch-action: pan-y; }
    .te-mini-bar { width: 100%; height: 4px; border-radius: 2px; background: rgba(0,0,0,0.12); overflow: hidden; }
    .te-mini-fill { height: 100%; width: 0%; border-radius: 2px; background: var(--accent, #4B41AD); }
    .te-mini-x { width: 26px; height: 26px; flex-shrink: 0; opacity: 0.55; font-size: 20px; line-height: 1; align-self: center; }
    .te-mini-x:hover { opacity: 1; }
    /* "Now playing <other topic>" caption — a separate row beneath the controls, its own click target. */
    .te-mini-np { display: none; margin: 2px 4px 0; padding: 2px 0; text-align: center;
      font-size: 12px; line-height: 1.3; color: inherit; text-decoration: none; opacity: 0.85; }
    .te-mini-np.show { display: block; }
    .te-mini-np strong { font-weight: 700; }
    .te-mini-np:hover strong { text-decoration: underline; }
    body.premium-topic .te-mini { background: #FBF5DC; color: #B29234; }
    body.premium-topic .te-mini-play { background: #F0CC5C; }
    body.premium-topic .te-mini-play svg { fill: #3D2E00; }
    body.premium-topic .te-mini-fill { background: #E3BC48; }
    @media (max-width: 480px) { .te-mini { border-radius: 0; } }
    @media (prefers-reduced-motion: reduce) { .te-mini { transition: opacity 0.15s ease; } }
  

/* ── DYN_STYLES ── */
.dyn-status{text-align:center;font-size:13px;font-weight:500;color:var(--accent);padding:4px 0;}.dyn-dots{display:inline-block;width:1.1em;text-align:left}.dyn-dots::after{content:'...';display:inline-block;width:0;overflow:hidden;vertical-align:bottom;animation:dyn-dots 1.2s steps(3,start) infinite}@keyframes dyn-dots{from{width:0}to{width:1.05em}}.dyn-sent-btn{width:34px;height:34px}.dyn-sent-off{opacity:.35;pointer-events:none}.audio-row button[onclick="skip(-10)"],.audio-row button[onclick="skip(10)"]{display:none}.scrubber{height:8px;border-radius:4px}.scrubber-fill{border-radius:4px}.scrubber-fill::after{width:18px;height:18px;right:-9px}.dyn-slider{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 8px;font-size:11.5px;color:var(--text-tertiary);margin-top:8px}.dyn-ctl-group{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%;min-width:0}#dyn-pf-val{display:inline-block;min-width:34px;text-align:left;font-variant-numeric:tabular-nums}.dyn-slider input[type=range]{flex-shrink:0}.dyn-slider input[type=range]{width:105px;accent-color:var(--accent);height:3px;padding:9px 0;box-sizing:content-box;touch-action:none}.dyn-ctl-sep{color:var(--border-strong)}.dyn-reps{display:inline-flex;gap:3px}.dyn-rep-btn{width:1.905em;height:1.905em;border-radius:.476em;border:.5px solid var(--border-strong);background:var(--surface);color:var(--text-tertiary);font:600 10.5px var(--font-ui);font-size:calc(10.5px * var(--te-ui, 1));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}.dyn-rep-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}.dyn-en-lbl{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.dyn-en-lbl input{accent-color:var(--accent);margin:0;width:13px;height:13px}.dyn-ep-row{margin-top:2px}.dyn-ep-boxes{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}.dyn-ep-th{font-size:calc(10.5px * var(--te-ui, 1));color:var(--text-tertiary);font-style:italic}.dyn-ep-box{width:16px;height:16px;border-radius:4px;border:.5px solid var(--border-strong);background:var(--surface);cursor:pointer;padding:0;position:relative}.dyn-ep-box.on{background:var(--accent);border-color:var(--accent)}.dyn-ep-box.on::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.dyn-pcdl{margin-top:10px;padding-top:10px;border-top:.5px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:5px}.dyn-pcdl-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px}.dyn-pcdl-btn{font:600 12.5px var(--font-ui);color:#fff;background:var(--accent);border:0;border-radius:8px;padding:9px 14px;cursor:pointer}.dyn-pcdl-btn:hover{filter:brightness(1.08)}.dyn-pcdl-btn:disabled{opacity:.55;cursor:default;filter:none}.dyn-pcdl-note{font-size:11.5px;line-height:1.5;color:var(--text-tertiary);text-align:center;max-width:34em}.dyn-pcdl-note.warn{color:#A33A2A}.dyn-pcdl-note.ok{color:#2E7D52}body.te-v2 .te-intro-wrap{position:relative;margin-bottom:1.1rem}body.te-v2 .te-intro-wrap .topic-intro{overflow:hidden;margin-bottom:0}body.te-v2 .te-intro-wrap:not(.open) .topic-intro{max-height:3.3em}body.te-v2 .te-intro-wrap:not(.open)::after{content:'';position:absolute;left:0;right:0;bottom:1.85em;height:2.1em;background:linear-gradient(to bottom,rgba(250,250,248,0),var(--bg));pointer-events:none}body.te-v2 .te-intro-more{margin-top:3px;font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--accent);background:none;border:0;padding:2px 0;cursor:pointer}body.te-v2 .te-intro-more:hover{text-decoration:underline}body.te-v2 .dyn-set-wrap{margin-top:2px}body.te-v2 .dyn-set-wrap summary{list-style:none;cursor:pointer;font-family:var(--font-ui);font-size:12.5px;font-weight:500;color:var(--text-secondary);padding:9px 0 0;display:flex;align-items:center;gap:6px}body.te-v2 .dyn-set-wrap summary::-webkit-details-marker{display:none}body.te-v2 .dyn-set-wrap summary::after{content:'⌄';font-size:14px;transition:transform .18s;transform:rotate(180deg)}body.te-v2 .dyn-set-wrap[open] summary::after{transform:rotate(0deg)}body.te-v2 .dyn-set-wrap .dyn-slider{margin-top:9px}body.te-v2 .te-pl-row{display:flex;gap:9px;margin:14px 0 16px}body.te-v2 .te-pl-row .dyn-addpl,body.te-v2 .te-pl-row .dyn-pl-link{flex:1;margin:0;display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-ui);font-size:13.5px;font-weight:500;color:var(--accent);background:var(--surface);border:.5px solid var(--border-strong);border-radius:var(--radius-md);padding:11px 10px;text-decoration:none;text-align:center;cursor:pointer}body.te-v2 .te-pl-row .dyn-addpl:hover,body.te-v2 .te-pl-row .dyn-pl-link:hover{background:var(--accent-light);color:var(--accent)}body.te-v2 .sentence-header{display:flex;align-items:center;gap:8px}body.te-v2 .prog-wrap{display:none}body.te-v2 .dyn-tick{order:0}body.te-v2 .sent-num{order:1}body.te-v2 .dyn-eq{order:2}body.te-v2 .sent-play-btn{order:3}body.te-v2 .sent-preview{order:4;flex:1;min-width:0}body.te-v2 .speed-toggle{display:none}body.dyn-plmode .speed-toggle{display:none}body.te-v2 .sent-flag-btn{order:6}body.te-v2 .dyn-x-btn{order:7}.sent-lock-group{display:flex;align-items:center;gap:7px;margin:22px 0 9px;font-family:var(--font-ui,system-ui,sans-serif);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#B29234}.sent-lock-group::after{content:"";flex:1;height:.5px;background:var(--border,rgba(0,0,0,.12))}.sentence-card.sent-premium{--accent:#F0CC5C;--accent-mid:#E3BC48;--accent-light:#FBF5DC;--purple-mid:#D4A82C}.sentence-card.sent-premium .sent-play-btn.playing svg,.sentence-card.sent-premium .sent-play-btn:hover svg{fill:#3D2E00}.sentence-card.sent-premium .sent-num{color:#B29234}.sentence-card.sent-locked{opacity:.72;background:var(--surface)}.sentence-card.sent-locked .sentence-header{cursor:pointer}.sentence-card.sent-locked .sent-preview{color:var(--text-secondary)}.sentence-card.sent-locked .sent-lock-ico{display:inline-flex;align-items:center;color:#B29234;flex-shrink:0}body.te-v2 .sentence-card.sent-locked .sent-lock-ico{order:3}.sentence-card.sent-nodl{opacity:.45;background:var(--surface)}.sentence-card.sent-nodl .sentence-header{cursor:pointer}.sentence-card.sent-nodl .sent-preview{color:var(--text-secondary)}.sentence-card.sent-nodl .sent-play-btn,.sentence-card.sent-nodl .speed-toggle,.sentence-card.sent-nodl .sent-flag-btn{opacity:.5}.dyn-info-lbl{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;text-align:left}.dyn-info-lbl:hover{color:var(--accent)}.dyn-info-i{width:1.444em;height:1.444em;border-radius:50%;border:1px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font:italic 700 9px/1 Georgia,"Times New Roman",serif;font-size:calc(9px * var(--te-ui, 1));flex-shrink:0}.dyn-info-box{position:relative;margin:7px 0 2px;padding:9px 30px 9px 11px;border:.5px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--text-secondary);font-size:12px;line-height:1.55;max-width:520px}.dyn-info-box a{color:var(--accent);font-weight:500;text-decoration:none}.dyn-info-box a:hover{text-decoration:underline}.dyn-info-x{position:absolute;top:3px;right:4px;width:22px;height:22px;border:0;background:none;color:var(--text-tertiary);cursor:pointer;font-size:16px;line-height:1;padding:0}.dyn-info-x:hover{color:var(--accent)}.dyn-head{font-size:12px;font-weight:600;color:var(--text-secondary);margin:0 0 8px;letter-spacing:.01em}.dyn-sync-row{display:flex;align-items:center;justify-content:flex-start;margin:8px 0 2px}.dyn-fmt-tag{order:2;margin-left:auto;font-size:10.5px;color:var(--text-tertiary);font-variant-numeric:tabular-nums}.dyn-sync-btn{width:28px;height:28px;border-radius:50%;border:.5px solid var(--border-strong);background:var(--surface);color:var(--text-tertiary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.dyn-sync-btn svg{width:15px;height:15px}.dyn-sync-btn:hover{color:var(--accent);border-color:var(--accent)}body.premium-topic .dyn-sync-btn:hover{color:#B29234;border-color:#B29234}body.premium-topic .dyn-info-box a{color:#B29234}body.premium-topic .te-intro-more{color:#B29234}.sentence-card.dyn-off{opacity:.55;border-style:dashed}.sentence-card.dyn-off .sent-preview{text-decoration:line-through}.dyn-card-btn{width:26px;height:26px;border-radius:50%;border:.5px solid var(--border-strong);background:var(--surface);color:var(--text-tertiary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.dyn-card-btn svg{width:13px;height:13px}.dyn-card-btn:hover{color:var(--accent);border-color:var(--accent)}.sentence-card.dyn-live{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.dyn-addpl{display:block;margin:10px auto 0;font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--accent);background:var(--surface);border:.5px solid var(--border-strong);border-radius:var(--radius-md);padding:7px 14px;cursor:pointer}.dyn-addpl:hover{background:var(--accent-light)}.dyn-pl-link{display:block;text-align:center;font-size:12px;margin:6px 0 14px;color:var(--text-tertiary);text-decoration:none}.dyn-pl-link:hover{color:var(--accent)}.dyn-tick{display:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-strong);flex-shrink:0;margin-right:2px;position:relative;cursor:pointer}.dyn-tick::before{content:'';position:absolute;inset:-14px -24px -14px -16px}#sentence-list.dyn-selecting .dyn-tick{display:inline-block}#sentence-list.dyn-selecting .sent-flag-btn,#sentence-list.dyn-selecting .dyn-card-btn{opacity:.35;pointer-events:none}.dyn-tick.on{background:var(--accent);border-color:var(--accent)}.dyn-tick.on.gold{background:#B29234;border-color:#B29234}.dyn-tick.on::after{content:'';position:absolute;left:6px;top:2.5px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}#dyn-sel-bar{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:.5px solid var(--border);padding:10px 16px;display:none;align-items:center;justify-content:space-between;gap:12px;z-index:250}#dyn-sel-bar.show{display:flex}#dyn-sel-bar button{font-family:var(--font-ui);font-size:13px;font-weight:600;border-radius:18px;padding:8px 20px;cursor:pointer}#dyn-sel-bar .dyn-sel-done{color:#fff;background:var(--accent);border:none}#dyn-sel-bar .dyn-sel-cancel{color:var(--text-secondary);background:var(--surface);border:.5px solid var(--border-strong)}body.dyn-plsel #site-nav-root{display:none}body.dyn-plsel .topic-nav{display:none}body.dyn-plsel #player-root{display:none}body.dyn-plsel .topic-eyebrow{display:none}body.dyn-plsel .topic-title{display:none}body.dyn-plsel .topic-subtitle{display:none}body.dyn-plsel .topic-intro{display:none}body.dyn-plsel #btn-prev-topic,body.dyn-plsel #btn-next-topic{opacity:.35;pointer-events:none}#dyn-plsel-back{display:block;margin:10px 0 14px;font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--accent);background:var(--surface);border:.5px solid var(--border-strong);border-radius:var(--radius-md);padding:8px 14px;cursor:pointer}#dyn-plsel-back:hover{background:var(--accent-light)}body.dyn-plmode .sent-flag-btn{display:none}.dyn-eq{display:none;align-items:flex-end;gap:2px;height:12px;width:16px;flex-shrink:0}body.dyn-playing .sentence-card.dyn-live .dyn-eq{display:inline-flex}.dyn-eq i{width:3px;height:100%;border-radius:2px;background:var(--accent);transform-origin:bottom;animation:te-eq-bounce 0.9s ease-in-out infinite}.dyn-eq i:nth-child(2){animation-delay:.3s}.dyn-eq i:nth-child(3){animation-delay:.15s}.dyn-eq i:nth-child(4){animation-delay:.45s}body.premium-topic .dyn-eq i{background:#B29234}@keyframes te-eq-bounce{0%,100%{transform:scaleY(0.35)}50%{transform:scaleY(1)}}