/* ============================================================================
   module-redesign.css — SHARED redesign shell for all spelling-course modules.
   Upload once to /css/ and add ONE <link> in index.php (after course.css).

   REUSE-FIRST: this file adds ONLY the components course.css does not already
   provide. Everything else (rule-box, insight, examples-*, checklist, tool-*,
   rc-practice-*, ws-*, compare-table, section-label, mod-eyebrow/title/next,
   spelling-map, mapper, d11-*, et-*, floss-*, cg-*, homo-* …) is REUSED from
   course.css. All new components are built on course.css tokens, so
   applyUnitAccent(id) (which rebinds --teal*) themes them per unit automatically.
   New selectors are namespaced .mr-* / .core-rule / .companion / .sil-* to avoid
   any clash with existing course.css classes.
   ============================================================================ */

/* ── Shared module hero band (replaces the per-module inline gradient hero) ── */
.mr-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(160deg,var(--teal-pale) 0%,var(--cream) 100%);
  border:1.5px solid var(--teal-border);border-radius:var(--radius);
  padding:22px 22px 20px;margin-bottom:26px}
.mr-hero-text{flex:1;min-width:0}
.mr-hero-text .mod-desc{margin-bottom:0}
.mr-hero-art{width:104px;height:104px;object-fit:contain;flex-shrink:0}
@media(max-width:560px){.mr-hero{flex-direction:column-reverse;text-align:center}
  .mr-hero-art{width:88px;height:88px}}

/* ── Section title (pairs with the existing .section-label eyebrow) ── */
.mr-sec-title{font-family:'Fredoka',sans-serif;font-size:1.3rem;font-weight:700;
  color:var(--teal-dark);line-height:1.2;margin:0 0 6px}
.mr-sec-title .accent{color:var(--teal-dark)}

/* ── Section lede — the short italic bridge line under a .section-label that
   sets up the section that follows. Was inline-duplicated per module; now shared.
   Anchored with a left accent spine (same language as .companion / .mr-note) so it
   reads as an intro attached to the section, not italic text floating in whitespace. ── */
.mr-lede{font-family:'Lora',Georgia,serif;font-style:italic;font-size:0.9rem;
  color:var(--text-mid);line-height:1.6;margin:2px 0 16px;
  padding:2px 0 2px 14px;border-left:3px solid var(--teal-border)}
.mr-lede strong{color:var(--text);font-style:normal;font-weight:600}

/* ── NOTE callout — an aside/explainer, deliberately LIGHTER than .companion
   (which is a subordinate RULE card). NO accent spine, a soft tinted fill, a
   MUTED label + a 📝 marker — so a note never reads as a companion rule. ── */
.mr-note{background:color-mix(in srgb,var(--teal-pale) 42%,#fff);border:1px solid var(--teal-border);
  border-radius:12px;padding:13px 16px;margin:16px 0}
.mr-note-label{font-family:'Fredoka',sans-serif;font-size:0.64rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.07em;color:var(--text-light);margin-bottom:5px;display:flex;align-items:center;gap:6px}
.mr-note-label::before{content:"📝";font-size:0.82rem}
.mr-note-text{font-size:0.85rem;color:var(--text-mid);line-height:1.55}
.mr-note-text strong{color:var(--text)}

/* ============================================================================
   THE CORE RULE — the one uniform, parent-recognisable "this is THE rule"
   callout, in every rule module. (No existing course.css box carries this
   badge+spine "signature" treatment, so it is a justified new component.)
   Themed entirely by --teal* → recolours per unit via applyUnitAccent.
   ============================================================================ */
.core-rule{position:relative;background:#fff;border:1.5px solid var(--teal);border-radius:var(--radius);
  padding:24px 24px 20px 27px;box-shadow:0 16px 36px -20px var(--teal-border);margin:6px 0 4px;overflow:hidden}
.core-rule::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--teal)}
.core-rule .cr-badge{display:inline-flex;align-items:center;gap:7px;font-family:'Fredoka',sans-serif;font-size:0.62rem;
  font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#fff;background:var(--teal-dark);
  padding:5px 13px;border-radius:20px;margin-bottom:14px}
.core-rule .cr-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
/* Rule statement uses the READING font (Lora) — calm & readable, not the chunky
   display face. The box's badge+spine+shadow already signal "this is THE rule",
   so the text itself can stay easy on the eye. Emphasise only the key phrases. */
.core-rule .cr-text{font-family:'Lora',Georgia,serif;font-size:1.18rem;font-weight:400;line-height:1.62;color:var(--text)}
.core-rule .cr-text strong{font-weight:600;color:var(--teal-dark)}                                    /* key conditions */
.core-rule .cr-text .trigger{color:var(--teal-dark);font-weight:600;box-shadow:inset 0 -2px 0 var(--teal-border)} /* trigger word */
.core-rule .cr-sub{font-family:'Lora',serif;font-size:0.9rem;color:var(--text-mid);margin-top:13px;padding-top:12px;
  border-top:1px solid var(--border);line-height:1.6}
.core-rule .cr-sub b{color:var(--text)}
.core-rule .cr-link{display:inline-flex;align-items:center;gap:7px;margin-top:15px;font-family:'Fredoka',sans-serif;
  font-size:0.82rem;font-weight:600;color:var(--teal-dark);text-decoration:none;
  border:1px solid var(--teal-border);border-radius:22px;padding:8px 15px;transition:background .15s,border-color .15s}
.core-rule .cr-link:hover{background:var(--teal-pale);border-color:var(--teal)}

/* ── COMPANION rule — deliberately SUBORDINATE to .core-rule ── */
.companion{position:relative;background:#fff;border:1px solid var(--border-mid);border-left:3px solid var(--teal);
  border-radius:12px;padding:15px 18px 14px;margin:22px 0;box-shadow:var(--shadow-sm)}
.companion .cmp-label{font-family:'Fredoka',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--teal-dark);margin-bottom:7px;display:inline-flex;align-items:center;gap:7px}
.companion .cmp-label::before{content:"↳";font-size:0.9rem;opacity:0.65}
.companion .cmp-text{font-family:'Lora',Georgia,serif;font-size:1rem;font-weight:400;line-height:1.55;color:var(--text)}
.companion .cmp-text strong{color:var(--teal-dark);font-weight:600}
.companion .cmp-text .trigger{color:var(--teal-dark);font-weight:600;box-shadow:inset 0 -2px 0 var(--teal-border)}
.companion .cmp-why{font-family:'Lora',serif;font-size:0.84rem;color:var(--text-mid);margin-top:8px;line-height:1.55}
.companion .cmp-why b{color:var(--text)}
.companion .cmp-link{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:'Fredoka',sans-serif;
  font-size:0.78rem;font-weight:600;color:var(--teal-dark);text-decoration:none;
  border:1px solid var(--teal-border);border-radius:20px;padding:6px 13px;transition:background .15s}
.companion .cmp-link:hover{background:var(--teal-pale)}

/* ── Workbook upsell (the ONLY workbook sell point — must stay in every module).
   Uses class .ws-upsell so injectWorksheetUpsell()'s guard (which skips if a
   .ws-upsell already exists) will NOT double-inject when this is hardcoded in
   the fragment. Lives inside .ws-btn-wrap, above the print buttons. ── */
.ws-upsell{font-size:0.82rem;display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-2px 0 12px;color:var(--text-light)}
.ws-upsell a{color:var(--teal-dark);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--teal-border);padding-bottom:1px}
.ws-upsell a:hover{border-color:var(--teal-dark)}

/* ============================================================================
   "SEE IT LIVE" — 3 independent animated cards that build the word so the rule
   is visible. Buy-page (_preview.php) letter technique: letters are pre-placed
   and NEVER re-rendered; they fade+drop into place via staggered per-letter
   --d delays. Plain monospace letters (not boxed tiles). Each card plays once
   on scroll-into-view and has its own Replay. Driven by module-redesign.js.
   Only rule modules that benefit include this block.
   ============================================================================ */
.mr-live-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:6px}
@media(max-width:720px){.mr-live-grid{grid-template-columns:1fr;max-width:360px;margin-left:auto;margin-right:auto}}
.sil-card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);
  padding:16px 14px 12px;display:flex;flex-direction:column;text-align:center}
.sil-tag{font-family:'Fredoka',sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;align-self:center;margin-bottom:14px}
.sil-tag--yes{background:var(--teal-pale);color:var(--teal-dark);border:1px solid var(--teal-border)}
.sil-tag--drop{background:var(--coral-pale);color:var(--coral-dark);border:1px solid rgba(255,107,68,0.25)}
.sil-tag--no{background:var(--cream-mid);color:var(--text-light);border:1px solid var(--border-mid)}
.sil-tag--snd{background:var(--snd-pale);color:var(--snd);border:1px solid color-mix(in srgb,var(--snd) 35%,transparent)}
.sil-eq{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;justify-content:center}
.sil-line{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500}
.sil-line--inp{font-size:1.32rem;color:var(--text-mid)}
.sil-line--res{font-size:1.7rem;color:var(--text);font-weight:600}
.sil-arrow{font-size:1.1rem;color:var(--text-light);opacity:0;margin:2px 0}
.sil-plus{color:var(--text-light);font-size:0.95rem;margin:0 6px;opacity:0}
.L{display:inline-block;opacity:0;will-change:transform,opacity}
.sil-note{font-family:'Lora',serif;font-size:0.8rem;color:var(--text-mid);line-height:1.4;margin-top:12px;
  padding-top:11px;border-top:1px dashed var(--border);min-height:52px;opacity:0}
.sil-note b{color:var(--teal-dark);font-weight:600}
.sil-replay{font-family:'Fredoka',sans-serif;font-weight:600;font-size:0.72rem;color:var(--teal-dark);background:transparent;
  border:1px solid var(--teal-border);border-radius:18px;padding:5px 12px;cursor:pointer;transition:all .18s;align-self:center;margin-top:11px}
.sil-replay:hover{background:var(--teal-pale);transform:rotate(-8deg)}
@keyframes mr-L-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes mr-L-accent{from{opacity:0;transform:translateY(-8px);color:var(--text)}to{opacity:1;transform:translateY(0);color:var(--teal-dark)}}
@keyframes mr-L-double{0%{opacity:0;transform:translateY(10px) scale(.4)}40%{opacity:1;transform:translateY(-4px) scale(1.4)}
  70%{transform:translateY(0) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mr-L-cross{0%{opacity:0;transform:translateY(-8px)}28%{opacity:1;transform:translateY(0);color:var(--text)}
  60%{opacity:1;color:var(--text);text-decoration:none}100%{opacity:.28;transform:translateY(4px);color:var(--coral-dark);text-decoration:line-through}}
@keyframes mr-L-dropaway{0%{opacity:0;transform:translateY(-8px);max-width:0}22%{opacity:1;transform:translateY(0);max-width:1.4ch}55%{opacity:1;transform:translateY(0);max-width:1.4ch}80%{opacity:0;transform:translateY(15px);max-width:1.4ch}100%{opacity:0;transform:translateY(15px) scale(.55);max-width:0}}
@keyframes mr-soft-in{from{opacity:0}to{opacity:1}}
@keyframes mr-arrow-grow{0%{opacity:0;transform:translateY(-4px)}100%{opacity:1;transform:translateY(0)}}
@keyframes mr-glow{0%{text-shadow:0 0 0 transparent}45%{text-shadow:0 0 14px var(--teal-border)}100%{text-shadow:0 0 0 transparent}}
.sil-card.playing .L{animation:mr-L-in .34s var(--d,0s) both}
.sil-card.playing .L.accent{animation:mr-L-accent .38s var(--d) both}
.sil-card.playing .L.dbl{animation:mr-L-double .5s var(--d) both, mr-glow 1s calc(var(--d) + .55s) both;color:var(--teal-dark)}
.sil-card.playing .L.cross{animation:mr-L-cross 1.5s var(--d) both}
.sil-card.playing .L.drop{display:inline-block;overflow:hidden;color:#C2410C;animation:mr-L-dropaway 1.6s var(--d) both}
.sil-card.playing .sil-plus{animation:mr-soft-in .3s var(--d) both}
.sil-card.playing .sil-arrow{animation:mr-arrow-grow .4s var(--d) both}
.sil-card.playing .sil-note{animation:mr-soft-in .45s var(--d) both}
/* fallback (reduced-motion / no-JS): show the finished words */
.mr-live-grid.reveal .L,.mr-live-grid.reveal .sil-plus,.mr-live-grid.reveal .sil-arrow,.mr-live-grid.reveal .sil-note{opacity:1;transform:none;animation:none}
.mr-live-grid.reveal .L.dbl,.mr-live-grid.reveal .L.accent{color:var(--teal-dark)}
.mr-live-grid.reveal .L.cross{opacity:.28;color:var(--coral-dark);text-decoration:line-through}
.mr-live-grid.reveal .L.drop{display:none}
@media(prefers-reduced-motion:reduce){
  .sil-card.playing .L,.sil-card.playing .sil-plus,.sil-card.playing .sil-arrow,.sil-card.playing .sil-note{animation:none!important;opacity:1;transform:none}
  .sil-card.playing .L.dbl,.sil-card.playing .L.accent{color:var(--teal-dark)}
  .sil-card.playing .L.cross{opacity:.28;color:var(--coral-dark);text-decoration:line-through}
  .sil-card.playing .L.drop{display:none}
}

/* ============================================================================
   READABILITY BUMP (+1 step) — reading prose was small for young learners.
   Targeted at prose only (not headings/labels/tools) to avoid layout breakage.
   ============================================================================ */
.mr-module .mod-desc{font-size:1rem;line-height:1.7}
.core-rule .cr-text{font-size:1.22rem}
.companion .cmp-text{font-size:1.05rem}
.mr-note-text{font-size:0.9rem}

/* ============================================================================
   SECTION SEPARATORS (global) — a hairline above each section so a module reads
   as distinct sections, not one long scroll. Applies to every module + the
   JS-injected video section. (Worksheets' .ws-btn-wrap already has this border,
   so the whole page shares one consistent separator system.)
   ============================================================================ */
.mr-module .section-label{border-top:1px solid var(--border);padding-top:24px;margin-top:32px}
.mr-module > .module-video-section{position:relative;margin-top:56px}
/* "Video recap" section title + divider above the injected video card */
.mr-module > .module-video-section::before{content:"Video recap";position:absolute;left:0;right:0;top:-42px;
  border-top:1px solid var(--border);padding-top:24px;
  font-family:'Fredoka',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--text-light)}

/* ============================================================================
   WIDER CONTENT ON DESKTOP — fill the empty space to the right of the sidebar.
   Scoped to the ACTIVE redesigned module (.mr-module.active) so non-redesigned
   modules 2–23 keep course.css's original 680px. Reading blocks (rule, companion,
   descriptions) stay capped so line length remains legible; hero, demo, vocab,
   tools and video use the fuller width.
   ============================================================================ */
@media(min-width:901px){
  .main-content:has(.mr-module.active){ max-width: 1040px; }
  /* core rule + companion span the full width for symmetry with the hero/demo
     (a short rule statement reads fine wide). Only the small intro descriptions
     stay capped so they don't become over-long lines. */
  .mr-module .mod-desc{ max-width: 660px; }
}

/* ============================================================================
   SHARED PANEL, COLLAPSIBLE EXCEPTIONS, WORKSHEETS-WITH-CRUMBS, BONUS
   (the mod-10-mock components, now global — used from mod-2 onward)
   ============================================================================ */

/* Light card panel to group an interactive/vocab block (e.g. closed syllables) */
.mr-panel{background:color-mix(in srgb,var(--teal-pale) 55%,#fff);border:1px solid var(--teal-border);
  border-radius:var(--radius);padding:18px 18px 8px;box-shadow:var(--shadow-sm);margin-top:12px}
.mr-panel .mr-sublabel{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-light);margin-bottom:8px}

/* See-it-live: centre a single-word card (no input/arrow/note) */
.sil-card .sil-eq{min-height:104px}

/* Collapsible EXCEPTIONS unit with a Crumbs mascot */
.mr-exc{border:1px dashed var(--border-mid);border-radius:var(--radius);
  background:color-mix(in srgb,var(--cream-mid) 45%,#fff);overflow:hidden;margin-top:6px}
.mr-exc>summary{list-style:none;cursor:pointer;padding:14px 18px;display:flex;align-items:center;gap:13px;font-family:'Fredoka',sans-serif}
.mr-exc>summary::-webkit-details-marker{display:none}
.mr-exc-art{width:46px;height:46px;object-fit:contain;flex:0 0 auto}
.mr-exc-tt{font-weight:600;color:var(--text);font-size:1rem}
.mr-exc-st{font-family:'Lora',serif;font-style:italic;font-size:0.82rem;color:var(--text-light)}
.mr-exc-cta{margin-left:auto;font-size:0.78rem;font-weight:600;color:var(--teal-dark);white-space:nowrap}
.mr-exc[open] .mr-exc-cta::after{content:" ▲"}
.mr-exc:not([open]) .mr-exc-cta::after{content:" ▼"}
.mr-exc-inner{padding:2px 18px 18px}
.mr-exc-inner .rule-box,.mr-exc-inner .examples-section{margin-top:12px}

/* Worksheets block with a Crumbs mascot */
.mr-ws{display:flex;gap:16px;align-items:flex-start}
.mr-ws-art{width:58px;height:58px;object-fit:contain;flex:0 0 auto;margin-top:2px}
.mr-ws-main{flex:1;min-width:0}

/* Bonus callout (gold) — for extras that are NOT exceptions (e.g. Wild Colt) */
.mr-bonus{background:#FFFBEB;border:1px solid rgba(245,158,11,0.35);border-left:4px solid var(--gold);
  border-radius:12px;padding:14px 18px;margin-top:14px}
.mr-bonus-label{font-family:'Fredoka',sans-serif;font-size:0.64rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:#B45309;margin-bottom:5px;display:flex;align-items:center;gap:6px}
.mr-bonus-title{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--text);font-size:1rem;margin-bottom:4px}
.mr-bonus-text{font-family:'Lora',serif;font-size:0.88rem;color:var(--text-mid);line-height:1.55}
.mr-bonus-text b{color:var(--text)}

/* Small cross-reference hint (prerequisite pointer to another module) */
.mr-hint{display:flex;gap:10px;align-items:center;background:var(--cream-mid);border:1px solid var(--border);
  border-radius:12px;padding:11px 15px;margin-top:12px;font-family:'Lora',serif;font-size:0.86rem;color:var(--text-mid);line-height:1.5}
.mr-hint .ico{flex:0 0 auto;font-size:1.05rem;line-height:1}
.mr-hint a{color:var(--teal-dark);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--teal-border)}
.mr-hint a:hover{border-color:var(--teal-dark)}

/* See-it-live COMPARISON variant — contrast spellings by context (e.g. ck vs k vs c).
   Guard spelling = unit accent; the "elsewhere" plain spelling = muted. Rows fade in. */
.sil-compare{display:flex;flex-direction:column;gap:11px;width:100%;padding:8px 6px 4px;flex:1;justify-content:center}
.sil-cmp-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;opacity:0}
.sil-cmp-word{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--text);white-space:nowrap}
.sil-cmp-word .g{color:var(--snd,var(--teal-dark));font-weight:700;display:inline-block}
.sil-cmp-word .p{display:inline-block}   /* the guard spelling (ck/tch/dge) */
.sil-cmp-word .p{color:color-mix(in srgb,var(--snd) 42%,var(--text-mid));font-weight:600}
.sil-cmp-word .mark{background:color-mix(in srgb,var(--snd) 26%,#fff);border-radius:5px;padding:2px 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}  /* the plain spelling used elsewhere */
.sil-cmp-ctx{font-family:'Lora',serif;font-size:0.74rem;font-style:italic;color:color-mix(in srgb,var(--snd) 28%,var(--text-mid));text-align:right}
.sil-cmp-row{--rd:0s}
.sil-cmp-row:nth-child(2){--rd:.7s}
.sil-cmp-row:nth-child(3){--rd:1.4s}
/* the rule, in motion: word appears → vowel block lights up → the ending pops in as the result */
.sil-card.playing .sil-cmp-row{animation:mr-soft-in .3s var(--rd) both}
.sil-card.playing .sil-cmp-word .mark{animation:mr-block .4s calc(var(--rd) + .22s) both}
.sil-card.playing .sil-cmp-word .g,.sil-card.playing .sil-cmp-word .p{animation:mr-endpop .5s calc(var(--rd) + .46s) both}
@keyframes mr-block{from{background:transparent}to{background:color-mix(in srgb,var(--snd) 26%,#fff)}}
@keyframes mr-endpop{0%{opacity:0;transform:scale(.55)}58%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
.mr-live-grid.reveal .sil-cmp-row,.mr-live-grid.reveal .sil-cmp-word .g,.mr-live-grid.reveal .sil-cmp-word .p{opacity:1;transform:none;animation:none}
@media(prefers-reduced-motion:reduce){.sil-card.playing .sil-cmp-row,.sil-card.playing .sil-cmp-word .g,.sil-card.playing .sil-cmp-word .p{opacity:1;transform:none;animation:none}}

/* Sound reference tiles — each sound gets its OWN colour (via --snd/--snd-pale set
   per tile; never the module's --teal, so the 3 sounds read as distinct). Content is
   centred; "elsewhere" example chips use a warm off-cream, not gray. */
.snd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.snd-tile{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.snd-head{background:var(--snd-pale);border-bottom:1px solid color-mix(in srgb,var(--snd) 22%,transparent);padding:11px;text-align:center;cursor:pointer;transition:opacity .15s;-webkit-tap-highlight-color:transparent}
.snd-head:hover{opacity:.85}
.snd-sound{font-family:'Fredoka',sans-serif;font-size:1.45rem;font-weight:700;color:var(--snd);line-height:1}
.snd-hear{font-size:0.6rem;color:var(--text-light);margin-top:3px}
.snd-body{padding:12px 14px;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center}
.snd-row{padding:10px 0;border-top:1px solid var(--border)}
.snd-row:first-child{border-top:none;padding-top:2px}
.snd-sp{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.12rem;color:color-mix(in srgb,var(--snd) 45%,var(--text))}
.snd-row.guard .snd-sp{color:var(--snd)}
.snd-ctx{font-family:'Lora',serif;font-size:0.68rem;font-style:italic;color:color-mix(in srgb,var(--snd) 32%,var(--text-mid));margin:1px 0 6px}
.snd-words{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.snd-words span{font-family:var(--mono);font-size:0.7rem;padding:2px 8px;border-radius:6px;background:color-mix(in srgb,var(--snd) 9%,var(--cream));color:color-mix(in srgb,var(--snd) 45%,var(--text))}
.snd-row.guard .snd-words span{background:var(--snd-pale);color:var(--snd)}

/* ── Sound-wave affordance for audio buttons (the standard for all audio triggers).
   Place <span class="mr-sndwave"><i></i>×4</span> in any audio button. Inherits
   currentColor (or set color per context). Gentle continuous equaliser motion. ── */
.mr-sndwave{display:inline-flex;align-items:center;gap:2px;height:11px;vertical-align:middle}
.mr-sndwave i{width:2.5px;background:currentColor;border-radius:2px;transform-origin:center;animation:mr-wave 1.1s ease-in-out infinite}
.mr-sndwave i:nth-child(1){height:5px;animation-delay:0s}
.mr-sndwave i:nth-child(2){height:11px;animation-delay:.14s}
.mr-sndwave i:nth-child(3){height:7px;animation-delay:.28s}
.mr-sndwave i:nth-child(4){height:10px;animation-delay:.42s}
@keyframes mr-wave{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}
.snd-hear .mr-sndwave{color:var(--snd)}
@media(prefers-reduced-motion:reduce){.mr-sndwave i{animation:none;transform:scaleY(.7)}}

/* ============================================================================
   ENCODING "See it live" (.sil-encode) — phoneme-by-phoneme build of a word.
   Each <span class="enc-g" data-snd="k"> grapheme lights in sequence (driven by
   module-redesign.js); tap the card / Replay to hear each phoneme then the whole
   word. Colour per card via --snd (never the unit green). Graphemes rest dim and
   light to --snd in turn; .enc-done lights the whole word (the blend).
   ============================================================================ */
.sil-encode .enc-word{font-family:var(--mono);font-weight:600;font-size:2.1rem;line-height:1;
  display:flex;justify-content:center;align-items:flex-end;gap:2px;flex:1;margin:6px 0 2px;min-height:70px}
/* consonant graphemes rest dim, light to a NEUTRAL dark (they aren't the focus) */
.sil-encode .enc-g{display:inline-block;transition:color .16s ease,transform .16s ease,background .16s ease;
  color:color-mix(in srgb,var(--text) 34%,#fff)}
.sil-encode .enc-g.lit{color:var(--text);transform:translateY(-3px) scale(1.06)}
.sil-encode.enc-done .enc-g{color:var(--text);transform:none}
/* the vowel+r PAIR (ar/or/ir) is the highlight — its OWN colour per card (--snd) with a
   pale block behind it. Padding is reserved so the block never shifts the layout. */
/* a rectangle around the r-controlled pair marks it as ONE unit; it rests faint
   and fills in (border + pale block) as the pair lights. Padding reserves the box. */
.sil-encode .enc-g--pair{padding:2px 6px;border-radius:5px;
  border:1.6px solid color-mix(in srgb,var(--snd) 30%,transparent)}
.sil-encode .enc-g--pair.lit{color:var(--snd);background:var(--snd-pale);border-color:var(--snd);transform:translateY(-3px) scale(1.06)}
.sil-encode.enc-done .enc-g--pair{color:var(--snd);background:var(--snd-pale);border-color:var(--snd);transform:none}
.sil-encode .enc-ctx{font-family:'Lora',Georgia,serif;font-style:italic;font-size:0.78rem;line-height:1.4;
  color:color-mix(in srgb,var(--snd) 32%,var(--text-mid));margin-top:8px}
/* reduced-motion: finished state (consonants dark, pair highlighted) */
.mr-live-grid.reveal .sil-encode .enc-g{color:var(--text);transform:none}
.mr-live-grid.reveal .sil-encode .enc-g--pair{color:var(--snd);background:var(--snd-pale);border-color:var(--snd)}

/* ── Frequency stars (out of 3) — a compact "how common" indicator for tables ── */
.cw-stars{font-size:0.98rem;letter-spacing:1.5px;white-space:nowrap;line-height:1}
.cw-stars .on{color:#F59E0B}
.cw-stars .off{color:#DcD5C7}

/* IR word-family rows center their chips so a wrapped last chip (e.g. "birth")
   sits centred, not orphaned left. Scoped to redesigned modules. */
.mr-module .ir-family__words{justify-content:center}

/* ── "Best viewed on a tablet/laptop" strip — shows ONLY on phones and sticks to
   the top as the reader scrolls a wide, table-heavy module (e.g. mod-6). ── */
.mr-device-strip{display:none}
@media(max-width:760px){
  .mr-device-strip{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:40;
    margin:-4px -4px 14px;padding:9px 14px;border-radius:0 0 12px 12px;
    background:var(--teal-dark);color:#fff;font-family:'Fredoka',sans-serif;font-size:0.78rem;font-weight:600;
    box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
  .mr-device-strip .ico{font-size:0.95rem;line-height:1;flex:0 0 auto}
}

/* Centered, wrapping see-it-live row — a lone last card (e.g. the 5th long-vowel
   card) centers instead of orphaning to the left. Cards keep a comfortable width. */
.mr-live-grid.mr-live-center{display:flex;flex-wrap:wrap;justify-content:center;gap:13px}
.mr-live-grid.mr-live-center>.sil-card{flex:1 1 200px;max-width:250px}