/* Manuscript-style exercise cards (main module chrome uses .module-overlay-card).
   Phase 5.3: keep cream manuscript cards here; consolidate greys with views-chat-manuscript / profile / tokens. */
#module-overlay .module-overlay-card.surface.module-card {
  position: relative;
  background: #fffbf4;
  border: 1px solid var(--dl-rule, rgba(60, 45, 30, 0.14));
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(20, 18, 14, 0.08);
  padding: 2rem 2.2rem;
  box-sizing: border-box;
  /* A2 (2026-05-30): explicit dark ink regardless of ancestor dark-mode colour
   * inheritance. Module cards are ALWAYS warm-paper LIGHT (lab canon). */
  color: var(--ds-ink);
}
/* The module card is ALWAYS warm-paper LIGHT (lab canon), but the app defaults to
 * a DARK theme. Several html.dark rules set LIGHT text on these elements assuming a
 * dark card — which renders light-on-light (invisible) inside the forced-light card.
 * This high-specificity block forces every readable-text descendant back to dark ink.
 * (Excludes the red/green diff spans + coloured labels, which stay their accent colour.) */
html.dark #module-overlay .module-overlay-card.surface.module-card,
html.dark #module-overlay .module-overlay-card.surface.module-card .module-ex-translate-source,
html.dark #module-overlay .module-overlay-card.surface.module-card .module-overlay-support,
html.dark #module-overlay .module-overlay-card.surface.module-card .module-overlay-cloze-sentence,
html.dark #module-overlay .module-overlay-card.surface.module-card .module-ex-cloze-instruction,
html.dark #module-overlay .module-overlay-card.surface.module-card .fb-compare-text,
html.dark #module-overlay .module-overlay-card.surface.module-card .fb-compare-cell.ideal .fb-compare-text,
html.dark #module-overlay .module-overlay-card.surface.module-card .stamp-note,
html.dark #module-overlay .module-overlay-card.surface.module-card .stamp-label,
html.dark #module-overlay .module-overlay-card.surface.module-card .fb-note-extra,
html.dark #module-overlay .module-overlay-card.surface.module-card .module-correction-answer {
  color: var(--ds-ink);
}

/* 2026-06-07 white-on-white sweep: the same forced-dark-ink fix, but for prompt /
 * hint / instruction text that lives OUTSIDE .surface.module-card (the cases that
 * were still rendering light-on-light). Id-scoped so it beats global html.dark
 * class rules; deliberately NOT a wildcard, so accent buttons/pills keep their
 * own colours. */
html.dark #module-overlay .module-ex-translate-source,
html.dark #module-overlay .module-overlay-support,
html.dark #module-overlay .module-ex-cloze-instruction,
html.dark #module-overlay .module-overlay-cloze-sentence,
html.dark #module-overlay .module-learning-hint-title,
html.dark #module-overlay .module-learning-hint-row,
html.dark #module-overlay .module-overlay-hint-words,
html.dark #module-overlay .module-overlay-hint-label,
html.dark #module-overlay .module-overlay-hint-chip,
html.dark #module-overlay .module-ex-grammar-stem {
  color: var(--ds-ink);
}
html.dark #module-overlay .module-overlay-hint-words {
  color: rgba(26, 23, 20, 0.7);
}

/* 2026-05-29: .module-overlay-support is the fallback prompt element when the
 * exercise isn't in translation mode. It should read with the same presence as
 * .module-ex-translate-source so EVERY exercise prompt feels prominent. */
#module-overlay .module-overlay-support {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.45rem, 2vw + 0.5rem, 2rem);
  font-weight: 500;
  font-style: italic;
  color: var(--ds-ink);
  line-height: 1.45;
  margin: 0 0 1.4rem;
}
html.dark #module-overlay .module-overlay-support {
  color: rgba(245, 236, 223, 0.92);
}
/* Manuscript margin rule. Translation is a two-direction production workspace,
 * so it deliberately has no manuscript rail: the rail crossed the tokenized
 * Italian prompt on narrow screens and made L2→L1 feel unlike L1→L2. */
#module-overlay .module-overlay-card.surface.module-card::before {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 1px;
  background: var(--dl-margin, rgba(217, 119, 87, 0.55));
  pointer-events: none;
}
#module-overlay .module-overlay-card.surface.module-card.module-overlay-translate::before {
  display: none;
}

#module-overlay .module-learning-hint-row {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--dl-rule, rgba(60, 45, 30, 0.12));
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(26, 23, 20, 0.78);
}
#module-overlay .module-learning-hint-title {
  font-weight: 600;
  color: rgba(26, 23, 20, 0.88);
}
#module-overlay .module-learning-hint-copy {
  margin: 0;
}

.module-sequencer-eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--dl-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.62);
}

html.dark .module-sequencer-eyebrow {
  color: rgba(232, 212, 168, 0.72);
}

.module-overlay-feedback.is-soft {
  color: #8a5a12;
}

/* ── A1 (2026-05-28): "transforms in place" feedback ───────────────────────
 * When the card gets .is-answered (added by showCorrection), hide the input
 * and submit button so the feedback region fills that space visually — the
 * prompt zone (with the sentence to translate) stays visible above. */
.module-overlay-card.is-answered #mod-ex-answer,
.module-overlay-card.is-answered .module-overlay-cloze-input {
  display: none;
}
.module-overlay-card.is-answered .module-overlay-actions {
  display: none;
}
.module-overlay-card.is-answered #mod-ex-feedback {
  margin-top: 0.2rem;
}

html.dark .module-overlay-feedback.is-ok {
  color: #7fd4a0;
}

html.dark .module-overlay-feedback.is-soft {
  color: #e8c47a;
}

/* Translation prompt: label + source (no ugly “Translate to Italian: …” one-liner) */
.module-ex-translate-task {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem 1.2rem 1.35rem;
  border-radius: 10px;
  /* No full outline: on the cream module card the old #fffbf4 fill was invisible and
   * the hairline border read as a broken empty box (beta flag 2026-06-12). A soft
   * terracotta wash + left accent makes the prompt band deliberate instead. */
  border: none;
  border-left: 3px solid rgba(217, 119, 87, 0.45);
  background: rgba(217, 119, 87, 0.07);
  box-shadow: none;
}

html.dark .module-ex-translate-task {
  background: linear-gradient(165deg, rgba(38, 42, 52, 0.92), rgba(28, 32, 40, 0.72));
  border-color: rgba(255, 255, 255, 0.08);
}

.module-ex-translate-label {
  display: block;
  font-family: var(--dl-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.78);
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(217, 119, 87, 0.28);
}

html.dark .module-ex-translate-label {
  color: rgba(232, 212, 168, 0.85);
}

.module-ex-translate-source {
  margin: 0;
  font-family: var(--dl-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.6rem, 2.2vw + 0.6rem, 2.4rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: var(--dl-ink, var(--ds-ink));
}
html.dark .module-ex-translate-source {
  color: rgba(245, 236, 223, 0.92);
}

.module-ex-hint-subtle {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.62;
  line-height: 1.35;
}

#module-it-tooltip.module-it-tooltip {
  position: fixed;
  z-index: 12000;
  max-width: min(320px, 92vw);
  /* Match the elegant story popover (.rv-pop): warm parchment, soft shadow,
     lighter weight — replaces the flat, heavy "cheap" box. */
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  background: #fdf6e6;
  border: 1px solid rgba(60, 45, 30, 0.18);
  box-shadow: 0 12px 28px rgba(20, 15, 28, 0.20);
  pointer-events: none;
}

/* PASS 3: In the module overlay we use the click-to-reveal popover instead of
   the hover tooltip (two competing definition UIs looked messy). */
.module-overlay-open #module-it-tooltip.module-it-tooltip {
  display: none !important;
}

#module-it-tooltip.module-it-tooltip.is-loading {
  opacity: 0.92;
}

html.dark #module-it-tooltip.module-it-tooltip {
  background: rgba(28, 32, 40, 0.97);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

/* B (2026-05-26) — rich tooltip mode: gloss + grammar note in one popover.
 * Only active when the renderer attached dataset.grammarNote* (contractions). */
#module-it-tooltip.module-it-tooltip.is-rich {
  max-width: min(360px, 94vw);
  padding: 0.55rem 0.75rem 0.6rem;
  display: grid;
  gap: 0.4rem;
  font-weight: 500;
  line-height: 1.4;
}
#module-it-tooltip.module-it-tooltip.is-rich .module-it-tip__main {
  display: block;
  font-weight: 600;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
}
#module-it-tooltip.module-it-tooltip.is-rich .module-it-tip__grammar {
  display: block;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(184, 137, 59, 0.42);
  font-size: 0.78rem;
  color: var(--ink-mid, rgba(42, 31, 18, 0.74));
  font-family: "Inter", system-ui, sans-serif;
  font-style: normal;
}
#module-it-tooltip.module-it-tooltip.is-rich .module-it-tip__grammar-kicker {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(184, 137, 59, 0.14);
  color: #8a640f;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}
html.dark #module-it-tooltip.module-it-tooltip.is-rich .module-it-tip__grammar-kicker {
  background: rgba(184, 137, 59, 0.24);
  color: #e6c469;
}

.module-ex-cloze-instruction {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(120, 92, 38, 0.88);
}

html.dark .module-ex-cloze-instruction {
  color: rgba(232, 212, 168, 0.85);
}

.module-review-skipped {
  margin: 0.25rem 0 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(100, 88, 72, 0.9);
}

.module-overlay-actions-after-mcq {
  margin-top: 0.65rem;
}

/* Italian production line: visually separate from L1 prompt / hints above. */
.module-overlay-italian-reveal-block {
  margin-top: 0.55rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(120, 92, 38, 0.14);
}
html.dark .module-overlay-italian-reveal-block {
  border-top-color: rgba(232, 212, 168, 0.12);
}
.module-overlay-italian-reveal-block .module-overlay-prompt-it-host {
  margin-top: 0;
}

.module-it-token {
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1.5px dashed rgba(217, 119, 87, 0.55);
  border-radius: 2px;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.15s ease;
  padding: 0 1px 1px;
}

.module-it-token.rv-mask {
  cursor: pointer;
}

.module-it-token:hover {
  background: rgba(42, 31, 18, 0.04);
  border-bottom-color: var(--accent, #c84b2a);
  border-bottom-style: solid;
  color: var(--accent, #c84b2a);
}

/* W1e — on-error grammar bite: a small GREEN card under the feedback (same green
 * as the grammar reveal), shown only when a missed item maps to a tracked skill. */
.fb-grammar-bite {
  margin-top: 0.7rem;
  padding: 0.55rem 0.8rem;
  border-left: 3px solid var(--grammar-lit, #2a7a3a);
  background: rgba(42, 122, 58, 0.06);
  border-radius: 8px;
}
.fb-grammar-bite__kicker {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grammar-lit, #2a7a3a);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.fb-grammar-bite__title {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink, var(--ds-ink));
  margin-bottom: 0.15rem;
}
.fb-grammar-bite__why {
  margin: 0.1rem 0 0.4rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-mid, rgba(42, 31, 18, 0.74));
}
.fb-grammar-bite__deepen {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grammar-lit, #2a7a3a);
  text-decoration: none;
  font-weight: 600;
}
.fb-grammar-bite__deepen:hover { text-decoration: underline; }
html.dark .fb-grammar-bite { background: rgba(94, 200, 122, 0.08); border-left-color: var(--grammar-lit, #5ec87a); }

/* L1 transfer trap card — top-level visible (not hidden behind Forklar mer).
 * Terracotta-warm treatment matching the Norwegian moat theme. */
.fb-l1-trap {
  margin-top: 0.7rem;
  padding: 0.55rem 0.8rem;
  border-left: 3px solid var(--l1-trap-accent, #b86b3a);
  background: rgba(184, 107, 58, 0.06);
  border-radius: 8px;
}
.fb-l1-trap__kicker {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l1-trap-accent, #b86b3a);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.fb-l1-trap__note {
  margin: 0.1rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-mid, rgba(42, 31, 18, 0.74));
}
html.dark .fb-l1-trap { background: rgba(200, 130, 70, 0.10); border-left-color: var(--l1-trap-accent, #d4895a); }
html.dark .fb-l1-trap__kicker { color: var(--l1-trap-accent, #d4895a); }

/* W3 — flip-card flashcard (vocabulary introduction inside a module session). */
.module-overlay-flashcard { text-align: center; }
.module-flashcard { padding: 0.4rem 0 0.6rem; }
.module-flashcard__head { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 1rem; }
.module-flashcard__kicker {
  font-family: var(--dl-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dl-rose, #d97757); font-weight: 600;
}
.module-flashcard__it {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 6vw, 3rem); font-weight: 600; color: var(--ds-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; line-height: 1.15;
}
.module-flashcard__audio {
  background: none; border: none; color: var(--dl-rose, #d97757); cursor: pointer;
  padding: 0.2rem; line-height: 0; border-radius: 999px; transition: color 0.15s ease, transform 0.15s ease;
}
.module-flashcard__audio:hover { color: var(--dl-rose-deep, #b85e3f); transform: scale(1.08); }
.module-flashcard__back { margin-top: 1.1rem; animation: fc-reveal 0.28s ease; }
@keyframes fc-reveal { from { opacity: 0; transform: translateY(6px); } }
.module-flashcard__meaning { font-family: "Inter", system-ui, sans-serif; font-size: 1.3rem; color: rgba(42, 31, 18, 0.86); }
.module-flashcard__example { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 1rem; color: var(--dl-rose, #d97757); margin: 0.7rem 0 0.15rem; }
.module-flashcard__example-tr { font-size: 0.9rem; color: rgba(42, 31, 18, 0.6); margin: 0; }

/* Reveal bands: above-level = warm (needs attention), at = learning, below = mastered (fades) */
#module-overlay .module-it-token.rv-word--above,
.module-it-token.rv-word--above {
  color: var(--reveal-new, #c07a20);
  font-weight: 500;
  border-bottom: 2px solid rgba(192, 122, 32, 0.45);
}
#module-overlay .module-it-token.rv-word--at,
.module-it-token.rv-word--at {
  color: var(--reveal-learning, rgba(42, 31, 18, 0.82));
  font-weight: 400;
  border-bottom: 1.5px dotted rgba(180, 120, 50, 0.4);
}
#module-overlay .module-it-token.rv-word--below,
.module-it-token.rv-word--below {
  color: inherit;
  font-weight: inherit;
  border-bottom-color: transparent;
  cursor: default;
}

button.module-word-chip.module-it-token {
  cursor: pointer;
  text-decoration: none;
}

/* ── Exercise type variety styles ───────────────────────────────── */

.module-cloze-gap {
  display: inline-block;
  min-width: 2.25rem;
  border-bottom: 1px solid rgba(184, 146, 42, 0.35);
  text-align: center;
  font-weight: 500;
  font-style: italic;
  color: rgba(90, 82, 72, 0.65);
}

.module-overlay-cloze-sentence {
  font-family: var(--dl-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.5rem, 1.8vw + 0.6rem, 2.2rem);
  font-weight: 500;
  line-height: 1.55;
  margin: 0.35rem 0 0.85rem;
}

.module-overlay-cloze-input {
  max-width: 240px;
}

.module-overlay-mcq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin: 0.65rem 0;
}

.module-comp-typed-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.55rem 0 0.25rem;
}
.module-comp-type-input {
  flex: 1 1 200px;
  min-width: 160px;
}
.module-comp-mcq-fallback {
  margin: 0.35rem 0 0.15rem;
  font-size: 0.88rem;
}
.module-overlay-mcq-grid--hidden-until-mcq[hidden] {
  display: none !important;
}
.module-overlay-hint-words--delay-first {
  opacity: 0;
  animation: module-hint-delay-in 0.55s ease 0.32s forwards;
}
@keyframes module-hint-delay-in {
  to {
    opacity: 1;
  }
}

.module-mcq-btn {
  /* Design Lab Parity — larger, cleaner MCQ options */
  font-family: var(--dl-serif, "Playfair Display", Georgia, serif);
  padding: 0.95rem 1.2rem;
  border-radius: 14px;
  border: 1px solid var(--dl-rule-soft, rgba(201, 184, 154, 0.45));
  /* alpha 0.86→0.93 in lieu of blur(2px) backdrop-filter (repaint cost). */
  background: rgba(255, 250, 240, 0.93);
  color: var(--dl-ink, var(--ds-ink));
  font-size: clamp(1.05rem, 0.7vw + 0.95rem, 1.25rem);
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 18, 14, 0.08);
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.module-mcq-btn:hover:not(:disabled) {
  background: rgba(255, 252, 248, 0.95);
  border-color: var(--dl-rose, #d97757);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(217, 119, 87, 0.16);
}

.module-mcq-btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.module-mcq-btn.is-correct:disabled,
.module-mcq-btn.is-wrong:disabled {
  opacity: 1;
}

.module-mcq-btn.is-correct:disabled {
  /* Warm amber-gold: "this is the answer" without a congratulatory green */
  border-color: rgba(180, 130, 40, 0.6);
  background: linear-gradient(180deg, rgba(254, 243, 212, 0.95), rgba(247, 230, 175, 0.90));
  color: rgba(110, 74, 14, 0.95);
  box-shadow: 0 0 0 1px rgba(180, 130, 40, 0.14);
}

.module-mcq-btn.is-wrong:disabled {
  /* Muted sand: "not this one" without a punishing red */
  border-color: rgba(160, 140, 110, 0.38);
  background: linear-gradient(180deg, rgba(242, 238, 228, 0.80), rgba(232, 226, 212, 0.72));
  color: rgba(100, 90, 70, 0.70);
  box-shadow: none;
}

html.dark .module-mcq-btn.is-correct:disabled {
  border-color: rgba(212, 168, 74, 0.55);
  background: linear-gradient(180deg, rgba(64, 50, 20, 0.95), rgba(48, 38, 12, 0.92));
  color: rgba(248, 220, 140, 0.95);
}

html.dark .module-mcq-btn.is-wrong:disabled {
  border-color: rgba(120, 110, 90, 0.35);
  background: linear-gradient(180deg, rgba(38, 36, 30, 0.82), rgba(28, 26, 22, 0.78));
  color: rgba(180, 170, 150, 0.60);
}

/* In module overlay, MCQ buttons stay warm and creamy even in dark mode */
html.dark .module-overlay .module-mcq-btn {
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.92) 0%, rgba(255, 250, 240, 0.88) 100%);
  border-color: rgba(184, 146, 42, 0.25);
  color: var(--ds-ink);
}

html.dark .module-overlay .module-mcq-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 254, 250, 0.98) 0%, rgba(255, 252, 245, 0.95) 100%);
  border-color: var(--path-accent, rgba(184, 146, 42, 0.45));
}

.module-mcq-btn--twoline {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  text-align: left;
  line-height: 1.35;
}

.module-mcq-letter {
  flex-shrink: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gold, #b8942d);
  min-width: 1.1rem;
}

.module-mcq-opt {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 600;
}

.module-comp-intent {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-2, rgba(42, 31, 18, 0.82));
}

.module-comp-intent-k {
  font-weight: 700;
  color: var(--gold, #9a7824);
  margin-right: 0.35rem;
}

.module-comp-opt-hint {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-3, rgba(42, 31, 18, 0.62));
}

.module-comp-dictation {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 0.35rem 0 0.75rem;
}

.module-comp-dict-label {
  flex: 1 1 100%;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2, rgba(42, 31, 18, 0.78));
}

.module-comp-dictation .module-overlay-input {
  flex: 1 1 200px;
  min-width: 160px;
  max-width: none;
}

.module-overlay-word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.55rem 0;
}

.module-word-chip {
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  border: 1.5px solid rgba(184, 146, 42, 0.22);
  background: rgba(255, 252, 245, 0.72);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

.module-word-chip:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(184, 146, 42, 0.14);
}

.module-word-chip.is-used {
  opacity: 0.3;
  transform: scale(0.92);
}

.module-overlay-answer-row {
  min-height: 2.4rem;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  background: rgba(184, 146, 42, 0.06);
  border: 1px dashed rgba(184, 146, 42, 0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

.module-word-placed {
  padding: 0.32rem 0.6rem;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
}

.module-word-placeholder {
  font-size: 0.78rem;
  opacity: 0.42;
  font-style: italic;
  font-weight: 400;
}

.module-prompt-it-scaffold-blur {
  filter: blur(6px);
  transition: filter 0.25s ease;
}

/* Italian reference line shown when prompt body duplicates prompt_it (NO→IT tap targets). */
.module-prompt-it-dedup {
  font-size: 0.92rem;
  opacity: 0.9;
  margin-top: 0.35rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(201, 184, 154, 0.28);
}

.module-show-it-wrap {
  margin: 0.25rem 0 0.5rem;
}

/* ── Correction styles ──────────────────────────────────────────── */

.module-correction-label {
  font-size: 0.82rem;
  opacity: 0.82;
}

.module-correction-answer {
  /* Warm amber-ink: presents the model answer as information, not a green stamp */
  color: #7a5018;
  font-size: 1.05rem;
}

html.dark .module-correction-answer {
  color: #e8c47a;
}

/* ── Continue affordance on the feedback card ────────────────────
 * Lets confident learners advance immediately rather than waiting out
 * the auto-advance timer. Keep the surface unobtrusive so it reads as
 * an affordance rather than an instruction.
 */
.module-correction-continue {
  appearance: none;
  margin-left: 0.6rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: inherit;
  opacity: 0.72;
  cursor: pointer;
  transition: opacity 0.12s ease, transform 0.12s ease, background 0.12s ease;
}

.module-correction-continue:hover,
.module-correction-continue:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

.module-overlay-feedback.is-ok .module-correction-continue {
  color: #145a2a;
  border-color: rgba(20, 90, 42, 0.55);
}

html.dark .module-overlay-feedback.is-ok .module-correction-continue {
  color: #9ce4b8;
  border-color: rgba(156, 228, 184, 0.55);
}

.module-overlay-feedback.is-soft .module-correction-continue {
  color: #6b4f1f;
  border-color: rgba(107, 79, 31, 0.45);
}

html.dark .module-overlay-feedback.is-soft .module-correction-continue {
  color: #e9d8a4;
  border-color: rgba(233, 216, 164, 0.55);
}

/* ── End-of-module review ───────────────────────────────────────── */

.module-overlay-review {
  text-align: center;
  padding: 2rem 1.4rem 1.5rem;
}

.module-review-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.module-review-ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--pct) * 1%), rgba(0,0,0,0.08) 0);
  display: grid;
  place-items: center;
  position: relative;
}

.module-review-ring::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: rgba(255, 252, 245, 0.96);
}

html.dark .module-review-ring::after {
  background: rgba(22, 26, 32, 0.96);
}

.module-review-pct {
  position: relative;
  z-index: 1;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
}

.module-review-summary {
  font-size: 1.1rem;
  line-height: 1.4;
}

.module-review-explainer {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: left;
}

.module-review-perfect {
  color: var(--green);
  font-weight: 600;
  margin: 0.75rem 0;
}

.module-review-mistakes {
  text-align: left;
  margin: 0.75rem 0;
  max-height: min(40vh, 360px);
  overflow-y: auto;
}

.module-review-mistakes-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.68;
  margin-bottom: 0.5rem;
}

.module-review-mistake {
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  background: rgba(184, 146, 42, 0.06);
  border: 1px solid rgba(184, 146, 42, 0.12);
  margin-bottom: 0.4rem;
}

.module-review-prompt-card {
  margin: 0 0 0.35rem;
}

.module-review-prompt-body {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

.module-review-prompt {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
}

.module-review-yours {
  font-size: 0.82rem;
  color: #8a5a12;
  margin: 0;
  text-decoration: line-through;
  opacity: 0.72;
}

.module-review-correct {
  font-size: 0.88rem;
  color: #1d6b3a;
  font-weight: 600;
  margin: 0.15rem 0 0;
}

.module-review-lesson-link {
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: underline;
}

.module-speaking-outcome {
  margin-top: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: rgba(250, 247, 240, 0.7);
}

.module-speaking-outcome.good {
  border: 1px solid rgba(34, 120, 68, 0.25);
}

.module-speaking-outcome.warn {
  border: 1px solid rgba(184, 146, 42, 0.35);
}

.module-speaking-outcome.bad {
  border: 1px solid rgba(160, 48, 48, 0.28);
}

.module-speaking-outcome p {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

#mod-sp-record.is-recording {
  box-shadow: 0 0 0 3px rgba(200, 72, 72, 0.35);
}

.placement-grid-modal {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}

html.dark .placement-overlay-backdrop {
  background: rgba(8, 10, 14, 0.58);
}

html.dark .placement-modal {
  background: linear-gradient(180deg, rgba(18,22,28,0.98), rgba(24,28,34,0.98));
  border-color: rgba(255,255,255,0.08);
}

html.dark .placement-overlay-close {
  background: rgba(34,39,48,0.86);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.82);
}

/* Placement stays warm paper even in app dark mode */
html.dark .placement-overlay .placement-modal {
  background: linear-gradient(180deg, rgba(255,249,238,0.98), rgba(246,238,226,0.97)) !important;
  border-color: rgba(184,146,42,0.28) !important;
  color: #1c1410 !important;
  color-scheme: light;
}

html.dark .placement-overlay .placement-modal-head h2 {
  color: #1c1410 !important;
}

html.dark .placement-overlay .placement-modal-head p {
  color: rgba(28, 20, 16, 0.78) !important;
}

html.dark .placement-overlay .placement-overlay-close {
  background: rgba(255, 252, 247, 0.92) !important;
  border-color: rgba(184, 146, 42, 0.35) !important;
  color: #3d2914 !important;
}

/* 2026-05-30: the placement modal is forced warm-paper LIGHT (above) in the app's
 * default dark theme. Defensive catch-all so any prose text inside it that a stray
 * html.dark rule left light renders dark — no light-on-light. Buttons/inputs keep
 * their own explicit colours (not matched here). */
html.dark .placement-overlay .placement-modal p,
html.dark .placement-overlay .placement-modal h2,
html.dark .placement-overlay .placement-modal h3,
html.dark .placement-overlay .placement-modal h4,
html.dark .placement-overlay .placement-modal li,
html.dark .placement-overlay .placement-modal span:not([class*="badge"]):not([class*="chip"]),
html.dark .placement-overlay .placement-modal label,
html.dark .placement-overlay .placement-card p,
html.dark .placement-overlay .placement-card li {
  color: #1c1410;
}

@media(max-width:900px) {
  body.placement-page .placement-grid {
    grid-template-columns: 1fr;
  }

  .placement-result-grid {
    grid-template-columns: 1fr;
  }

  .placement-overlay {
    padding: 0.8rem;
  }

  .placement-modal {
    max-height: calc(100vh - 1.6rem);
    padding: 1rem;
    border-radius: 22px;
  }

  .placement-modal-head {
    flex-direction: column;
  }

  .placement-grid-modal {
    grid-template-columns: 1fr;
  }
}
.lesson-back-btn {
  background: none; border: none; color: var(--gold);
  font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 0;
  font-family: 'Inter', sans-serif; font-style: italic; margin-bottom: 1.5rem;
  display: block;
}
.lesson-back-btn:hover { text-decoration: underline; }
.lesson-detail-header { border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.lesson-detail-title {
  font-family: 'Playfair Display', serif; font-size: 1.65rem;
  font-weight: 800; color: var(--ink); margin: 0.5rem 0 0.4rem;
}
.lesson-detail-summary { color: var(--ink-3); font-size: 0.88rem; font-style: italic; }
.lesson-detail-body { display: flex; flex-direction: column; gap: 1.5rem; }
.lesson-contrast-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
}
@media (max-width: 720px) {
  .lesson-contrast-row { grid-template-columns: 1fr; }
}
.lesson-contrast-col { margin: 0; }
.lesson-section h4 {
  font-family: 'Playfair Display', serif; font-size: 0.98rem; font-weight: 700;
  color: var(--gold); margin-bottom: 0.5rem; letter-spacing: 0.01em;
}
.lesson-section p, .lesson-section li { font-size: 0.88rem; color: var(--ink-2); line-height: 1.65; }
.lesson-section ul { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.lesson-section li strong { color: var(--ink); }

/* ================================================================
   WATERCOLOR PATH (Progress view) v3
   Parchment canvas · all 4 activities visible in one viewport ·
   watercolor side splashes with turbulence-painted edges ·
   animated path draw-on + staggered card reveal.
   ================================================================ */

/* Full view: default CSS vars (JS overrides per painting on :root) */
#view-progress {
  --wcp-tint-a: 229, 211, 174;
  --wcp-tint-b: 206, 194, 176;
  --wcp-tint-c: 97, 86, 63;
  --wcp-path-body: #8a6a30;
  --wcp-path-dash: #c9a058;
  --wcp-path-shadow: rgba(80, 60, 30, 0.28);
  --wcp-node-ring: #b8892e;
  --wcp-node-glow: rgba(184, 137, 46, 0.34);
  --wcp-chip-bg: rgba(250, 247, 240, 0.90);
  --wcp-paper-strong: rgba(250, 247, 240, 0.96);
  --wcp-stage-wash-hi: rgba(248,244,236,0.30);
  --wcp-stage-wash-mid: rgba(248,244,236,0.10);
  --wcp-stage-wash-soft: rgba(248,244,236,0.18);
  --wcp-stage-wash-shadow: rgba(22,16,11,0.54);
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
}

html.dark #view-progress {
  --wcp-tint-a: 120, 125, 116;
  --wcp-tint-b: 96, 102, 95;
  --wcp-tint-c: 56, 61, 56;
  --wcp-path-body: #7e7668;
  --wcp-path-dash: #b7a688;
  --wcp-path-shadow: rgba(14, 12, 10, 0.26);
  --wcp-node-ring: #c6b28a;
  --wcp-node-glow: rgba(198, 178, 138, 0.16);
  --wcp-chip-bg: rgba(34, 30, 24, 0.84);
  --wcp-paper-strong: rgba(34, 30, 24, 0.92);
  --wcp-stage-wash-hi: rgba(255,248,238,0.08);
  --wcp-stage-wash-mid: rgba(255,248,238,0.04);
  --wcp-stage-wash-soft: rgba(255,248,238,0.08);
  --wcp-stage-wash-shadow: rgba(10,8,6,0.72);
}

/* Wrap: default full viewport; dashboard path host overrides height to flex chain (no bottom band). */
.wcp-wrap {
  width: 100%;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  position: relative;
}

#view-dashboard #view-progress.dashboard-wcp-host {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  border-radius: 0;
  overflow: hidden;
  border: none;
  box-shadow: none;
  min-height: calc(100dvh - var(--shell-nav-offset));
  height: calc(100dvh - var(--shell-nav-offset));
  /* Watercolor lives on #wcp-scene — keep chrome transparent so no cream/dark strip at the bottom */
  background: transparent;
}

html.dark #view-dashboard #view-progress.dashboard-wcp-host {
  background: transparent;
}

#view-dashboard #view-progress.dashboard-wcp-host .wcp-wrap {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  flex: 1;
}

/* Passeggiata: must override the generic `.wcp-wrap { min-height: 0 }` flex chain above (order-independent). */
#view-dashboard.view--path-root #view-progress.dashboard-wcp-host .wcp-wrap {
  flex: 1 1 auto;
  width: 100%;
  min-height: calc(100dvh - var(--shell-nav-offset));
  height: calc(100dvh - var(--shell-nav-offset));
  max-height: none;
}

/* Drawn route SVG (app.js injects into #wcp-scene) — z-index 2 threads between shards (1–2) and nodes (3+). */
.wcp-route-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.98;
  /* Dark halo hugging the path so the immediate area reads darker (contrast)
   * while the rest of the painting stays bright. */
  filter: drop-shadow(0 0 13px rgba(16, 10, 5, 0.6)) drop-shadow(0 0 30px rgba(16, 10, 5, 0.42));
}

.wcp-scene-stage-active .wcp-route-svg {
  z-index: 2;
  opacity: 0.68;
  filter: drop-shadow(0 0 14px rgba(16, 10, 5, 0.66)) drop-shadow(0 0 34px rgba(16, 10, 5, 0.46));
}
/* A touch more local shadow weight under the route. */
.wcp-route-shadow-path { opacity: 0.7; }

.wcp-route-glow-path {
  opacity: 0.96;
}

.wcp-route-glow-halo-path {
  opacity: 0.78;
}

.wcp-route-shadow-path {
  opacity: 0.54;
}

.wcp-route-body-path {
  opacity: 0.98;
}

.wcp-scene-stage-active .wcp-route-body-path {
  opacity: 0.72;
}

.wcp-scene-stage-active .wcp-route-glow-path,
.wcp-scene-stage-active .wcp-route-glow-halo-path,
.wcp-scene-stage-active .wcp-route-shadow-path,
.wcp-scene-stage-active .wcp-route-centerline-path {
  opacity: 0.68;
}

.wcp-scene-stage-completed .wcp-route-glow-halo-path {
  opacity: 0.98;
  filter: blur(5px) drop-shadow(0 0 72px rgba(255,253,248,0.42)) drop-shadow(0 0 168px rgba(255,253,248,0.28));
  animation: wcp-path-lantern 4.1s ease-in-out infinite;
}

.wcp-scene-stage-completed .wcp-route-glow-path {
  opacity: 1;
  filter: blur(2px) drop-shadow(0 0 40px rgba(255,253,248,0.52)) drop-shadow(0 0 92px rgba(255,253,248,0.32));
  animation: wcp-path-lantern 3.6s ease-in-out infinite;
}

.wcp-scene-stage-completed .wcp-route-body-path {
  opacity: 1;
  filter: drop-shadow(0 0 28px rgba(255,243,207,0.36)) drop-shadow(0 0 62px rgba(255,247,222,0.24));
  animation: wcp-path-lantern 4.2s ease-in-out infinite reverse;
}

.wcp-scene-stage-completed .wcp-route-centerline-path {
  opacity: 0.94;
}

.wcp-scene-stage-completed .wcp-route-shadow-path {
  opacity: 0.14;
}

.wcp-scene-stage-completed .wcp-route-svg {
  z-index: 2;
  opacity: 1;
}

.wcp-route-bloom {
  fill: rgba(255,244,206,0.24);
  filter: blur(6px);
  opacity: 0;
  transform-origin: center;
  animation: wcp-route-bloom var(--bloom-duration, 5.8s) ease-in-out var(--bloom-delay, 0s) infinite;
}

.wcp-route-bloom-core {
  fill: rgba(255,252,236,0.92);
  filter: blur(1.2px);
  opacity: 0;
  transform-origin: center;
  animation: wcp-route-bloom var(--bloom-duration, 5.1s) ease-in-out var(--bloom-delay, 0s) infinite;
}

.wcp-scene-journey-present-complete .wcp-route-bloom {
  fill: rgba(255,248,214,0.3);
  filter: blur(6.5px);
  animation-name: wcp-route-bloom-history;
}

.wcp-scene-journey-present-complete .wcp-route-bloom-core {
  animation-name: wcp-route-bloom-history;
}

.wcp-scene-journey-history-celebrate:not(.wcp-scene-journey-present-complete) .wcp-route-bloom,
.wcp-scene-journey-history-celebrate:not(.wcp-scene-journey-present-complete) .wcp-route-bloom-core {
  fill: rgba(255,244,206,0.22);
  filter: blur(6px);
  animation-name: wcp-route-bloom;
}

.wcp-scene-stage-completed .wcp-week-meta {
  background: linear-gradient(180deg, rgba(255,248,228,0.34), rgba(255,248,228,0.14));
  border: 1px solid rgba(215,184,104,0.24);
  box-shadow: 0 14px 34px rgba(122,93,28,0.12);
}

.wcp-scene-stage-completed .wcp-week-kicker {
  color: rgba(141,106,23,0.84);
}

.wcp-scene-stage-completed .wcp-week-main {
  color: color-mix(in srgb, var(--ink) 82%, var(--gold) 18%);
}

.wcp-route-centerline-path {
  opacity: 0.88;
}

.wcp-scene-stage-active .wcp-route-centerline-path,
.wcp-scene-stage-completed .wcp-route-centerline-path {
  animation: wcp-route-flow 26s linear infinite;
}

/* Scene: frameless full-bleed container */
.wcp-scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

/* Journey watercolor: path canvas fills the dock (gate overlay is a sibling on #wcp-scene, above week-nav). */
#wcp-scene.wcp-scene-journey-modules .wcp-journey-path-dock {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  padding-top: 76px;
  min-height: 0;
  box-sizing: border-box;
}
#wcp-scene.wcp-scene-journey-modules .wcp-journey-path-dock--rail-open {
  grid-template-columns: minmax(0, min(34vw, 300px)) minmax(0, 1fr);
  gap: 0;
}

/* Week nav defaults to 12% width (views-chat.css) and sits above the dock (z-index 4 vs 1),
 * stealing taps from the last emblem on the right. Keep ‹ › usable with a narrow hit strip. */
#wcp-scene.wcp-scene-journey-modules > .wcp-week-nav {
  width: 52px;
  min-width: 0;
  max-width: 52px;
  z-index: 6;
}
#wcp-scene.wcp-scene-journey-modules > .wcp-week-nav-prev span {
  left: 10px;
  right: auto;
}
#wcp-scene.wcp-scene-journey-modules > .wcp-week-nav-next span {
  left: auto;
  right: 10px;
}
#wcp-scene.wcp-scene-journey-modules .wcp-path-story-rail {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  padding: 6px 8px 10px 12px;
  border-right: 1px solid rgba(184, 137, 59, 0.32);
  background: linear-gradient(
    180deg,
    rgba(252, 248, 238, 0.55) 0%,
    rgba(236, 224, 204, 0.28) 48%,
    rgba(244, 236, 220, 0.22) 100%
  );
  box-shadow: inset -12px 0 28px -18px rgba(40, 28, 14, 0.08);
  transition: box-shadow 0.45s ease, background 0.45s ease;
}
#wcp-scene.wcp-scene-journey-modules .wcp-path-story-rail--focus {
  box-shadow:
    inset -12px 0 28px -18px rgba(40, 28, 14, 0.08),
    inset 0 0 0 2px rgba(212, 168, 74, 0.55);
  background: linear-gradient(
    180deg,
    rgba(255, 250, 236, 0.72) 0%,
    rgba(240, 226, 200, 0.42) 50%,
    rgba(248, 238, 218, 0.36) 100%
  );
}
html.dark #wcp-scene.wcp-scene-journey-modules .wcp-path-story-rail {
  background: linear-gradient(180deg, rgba(48, 44, 40, 0.55) 0%, rgba(28, 26, 24, 0.38) 100%);
  border-right-color: rgba(212, 178, 118, 0.28);
  box-shadow: inset -12px 0 28px -18px rgba(0, 0, 0, 0.35);
}
html.dark #wcp-scene.wcp-scene-journey-modules .wcp-path-story-rail--focus {
  background: linear-gradient(180deg, rgba(56, 52, 48, 0.72) 0%, rgba(36, 34, 32, 0.5) 100%);
  box-shadow:
    inset -12px 0 28px -18px rgba(0, 0, 0, 0.35),
    inset 0 0 0 2px rgba(212, 168, 74, 0.45);
}
#wcp-scene.wcp-scene-journey-modules .wcp-path-canvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  z-index: 0;
}

/* Complete readings use the ordinary route geometry and story-emblem scale.
 * They are available doors, not adaptive completion states. */
#wcp-scene.wcp-scene-journey-modules .wcp-node-story-path-reading {
  z-index: 9 !important;
  cursor: pointer;
}
#wcp-scene.wcp-scene-journey-modules .wcp-node-story-path-reading .wcp-story-emblem-frame {
  width: clamp(82px, 9.5vw, 108px);
  height: clamp(108px, 12.5vw, 142px);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(255, 248, 226, 0.94),
    0 0 0 7px rgba(193, 154, 87, 0.3);
}
#wcp-scene.wcp-scene-journey-modules .wcp-node-story-path-reading .wcp-node-position-badge {
  display: block;
  bottom: -0.58rem;
  max-width: min(34vw, 180px);
  overflow: hidden;
  text-overflow: ellipsis;
}
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero .wcp-node-story-path-reading .wcp-story-emblem-frame img {
  filter: none;
  animation: none;
}
#wcp-scene.wcp-scene-journey-modules .wcp-route-svg {
  z-index: 1 !important;
}
#wcp-scene.wcp-scene-journey-modules .wcp-path-canvas > .wcp-emblem-node {
  z-index: 8 !important;
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node.wcp-node-task.wcp-current {
  z-index: 30 !important;
}

/* Open story gate: full-scene layer **above** `.wcp-week-nav` (z-index 4) so the CTA receives clicks. */
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero > .wcp-journey-gate-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: min(4vh, 28px) 1rem;
  box-sizing: border-box;
  background: radial-gradient(
    ellipse 120% 100% at 50% 45%,
    rgba(12, 10, 8, 0.38) 0%,
    rgba(12, 10, 8, 0.55) 55%,
    rgba(8, 6, 5, 0.62) 100%
  );
  /* Let ‹ › week nav stay clickable at the edges; hero card uses ``pointer-events: auto``. */
  pointer-events: none;
}

.wcp-unlock-celebration {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 8;
  animation: wcp-unlock-overlay 2.5s ease forwards;
}

.wcp-unlock-burst {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  pointer-events: none;
}

.wcp-unlock-burst-a {
  width: min(58vw, 760px);
  height: min(58vw, 760px);
  background: radial-gradient(circle, rgba(237,211,148,0.34) 0%, rgba(237,211,148,0.16) 28%, rgba(237,211,148,0.04) 56%, transparent 74%);
  filter: blur(6px);
  animation: wcp-unlock-burst-a 2.5s ease-out forwards;
}

.wcp-unlock-burst-b {
  width: min(40vw, 520px);
  height: min(40vw, 520px);
  background: radial-gradient(circle, rgba(255,250,239,0.62) 0%, rgba(255,250,239,0.18) 22%, transparent 58%);
  filter: blur(12px);
  animation: wcp-unlock-burst-b 2.5s ease-out forwards;
}

.wcp-unlock-particles {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1px;
  height: 1px;
}

.wcp-unlock-particle {
  --particle-x: 0px;
  --particle-y: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,252,245,0.96) 0%, rgba(233,204,133,0.86) 42%, rgba(233,204,133,0) 78%);
  filter: blur(0.4px);
  animation: wcp-unlock-particle 2.5s ease-out forwards;
}

.wcp-unlock-particle-1 { --particle-x: -180px; --particle-y: -84px; animation-delay: 0.04s; }
.wcp-unlock-particle-2 { --particle-x: 164px; --particle-y: -118px; animation-delay: 0.1s; }
.wcp-unlock-particle-3 { --particle-x: 208px; --particle-y: 88px; animation-delay: 0.16s; }
.wcp-unlock-particle-4 { --particle-x: -152px; --particle-y: 124px; animation-delay: 0.08s; }
.wcp-unlock-particle-5 { --particle-x: 0px; --particle-y: -168px; animation-delay: 0.2s; }

.wcp-unlock-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  width: min(72vw, 520px);
  padding: 2rem 2.2rem;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(33,24,16,0.70), rgba(21,15,10,0.54));
  border: 1px solid rgba(255,244,224,0.22);
  box-shadow: 0 28px 60px rgba(16,12,8,0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: center;
  animation: wcp-unlock-card 2.5s cubic-bezier(0.18, 0.8, 0.2, 1) forwards;
}

.wcp-unlock-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,243,214,0.84);
}

.wcp-unlock-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: #fff8ef;
  text-shadow: 0 18px 34px rgba(0,0,0,0.24);
}

.wcp-unlock-copy {
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255,244,226,0.84);
}

/* ── Story unlock toast (journey path completion) ── */
.wcp-story-unlock-toast {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(10, 8, 6, 0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease, background 0.55s ease;
}
.wcp-story-unlock-toast.is-visible {
  opacity: 1;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, rgba(18, 14, 10, 0.42) 0%, rgba(10, 8, 6, 0.62) 55%, rgba(8, 6, 5, 0.72) 100%);
  pointer-events: auto;
}
.wcp-story-unlock-toast-burst {
  position: absolute;
  width: min(72vw, 420px);
  height: min(72vw, 420px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 186, 0.38) 0%, rgba(255, 210, 140, 0.12) 42%, transparent 72%);
  animation: wcp-toast-burst 1.8s ease-out forwards;
  pointer-events: none;
}
@keyframes wcp-toast-burst {
  0% { transform: scale(0.3); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}
.wcp-story-unlock-toast-card {
  position: relative;
  width: min(92vw, 440px);
  transform: translateY(28px) scale(0.96);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.18, 0.8, 0.2, 1), opacity 0.45s ease;
  pointer-events: auto;
  margin-inline: auto;
}
.wcp-story-unlock-toast.is-visible .wcp-story-unlock-toast-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.wcp-story-unlock-toast-paper {
  position: relative;
  padding: 1.75rem 1.65rem 1.65rem;
  border-radius: 20px 22px 22px 20px;
  text-align: left;
  background:
    linear-gradient(165deg, rgba(255, 252, 246, 0.98) 0%, rgba(248, 240, 226, 0.96) 38%, rgba(236, 224, 206, 0.94) 100%);
  border: 1px solid rgba(184, 137, 59, 0.35);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.65) inset,
    0 22px 48px rgba(24, 18, 12, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}
.wcp-story-unlock-toast-paper::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 5px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, #e8c878, #c99a3e 48%, #a87820);
  box-shadow: 0 0 18px rgba(212, 168, 74, 0.45);
}
.wcp-story-unlock-toast-lead {
  margin: 0 0 1.25rem;
  padding-left: 0.55rem;
  max-width: 36ch;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.05rem, 2.8vw, 1.28rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: rgba(32, 26, 18, 0.92);
}
.wcp-story-unlock-toast-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
  align-items: center;
  padding-left: 0.55rem;
}
.wcp-story-unlock-toast-btn {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.62rem 1.25rem;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.wcp-story-unlock-toast-btn:focus-visible {
  outline: 2px solid rgba(184, 137, 59, 0.85);
  outline-offset: 2px;
}
.wcp-story-unlock-toast-btn--secondary {
  border: 1px solid rgba(120, 96, 64, 0.35);
  color: rgba(48, 38, 26, 0.88);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.wcp-story-unlock-toast-btn--secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(168, 120, 32, 0.55);
  background: rgba(255, 252, 246, 0.92);
}
.wcp-story-unlock-toast-btn--primary {
  border: 1px solid rgba(140, 100, 36, 0.55);
  color: #1f170c;
  background: linear-gradient(135deg, #ffe8b8, #f0c46a 55%, #e0a84a);
  box-shadow: 0 6px 20px rgba(168, 120, 32, 0.35);
}
.wcp-story-unlock-toast-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(140, 100, 36, 0.42);
}

.wcp-story-unlocking {
  animation: wcp-node-unlock-pulse 1.5s ease-in-out 2;
}
@keyframes wcp-node-unlock-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 18px rgba(255, 210, 120, 0.6)); }
}

.wcp-path-completed-anim .wcp-emblem-node {
  animation: wcp-path-done-fade 0.8s ease-out both;
  animation-delay: calc(var(--wcp-node-i, 0) * 0.1s);
}
@keyframes wcp-path-done-fade {
  0% { opacity: 0.5; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* Per-node flair: each module node glows gold briefly on arc completion */
.wcp-node-path-flair {
  animation: wcp-node-flair-burst 0.9s cubic-bezier(0.2, 0, 0.3, 1) both;
  animation-delay: calc(var(--wcp-node-i, 0) * 0.12s);
}
@keyframes wcp-node-flair-burst {
  0% { transform: scale(1); filter: none; }
  40% { transform: scale(1.22); filter: drop-shadow(0 0 14px rgba(255, 210, 80, 0.75)) brightness(1.25); }
  70% { transform: scale(1.08); filter: drop-shadow(0 0 7px rgba(255, 180, 60, 0.45)); }
  100% { transform: scale(1); filter: none; }
}

html.dark .wcp-story-unlock-toast-paper {
  background: linear-gradient(165deg, rgba(42, 38, 34, 0.96) 0%, rgba(28, 26, 24, 0.94) 100%);
  border-color: rgba(212, 178, 118, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 22px 48px rgba(0, 0, 0, 0.45);
}
html.dark .wcp-story-unlock-toast-lead {
  color: rgba(248, 242, 232, 0.94);
}
html.dark .wcp-story-unlock-toast-btn--secondary {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(236, 230, 218, 0.9);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}
html.dark .wcp-story-unlock-toast-btn--primary {
  border-color: rgba(212, 178, 118, 0.55);
  color: #1a140c;
  background: linear-gradient(135deg, #f4e0b8, #d4a84a 52%, #b8893b);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.wcp-scene-enter,
.wcp-scene-enter-forward,
.wcp-scene-enter-backward {
  animation-duration: 0.52s;
  animation-timing-function: cubic-bezier(0.22, 0.78, 0.2, 1);
  animation-fill-mode: both;
  will-change: transform, opacity;
}

.wcp-scene-enter { animation-name: wcp-scene-enter; }
.wcp-scene-enter-forward { animation-name: wcp-scene-enter-forward; }
.wcp-scene-enter-backward { animation-name: wcp-scene-enter-backward; }

.wcp-scene-exit,
.wcp-scene-exit-forward,
.wcp-scene-exit-backward {
  pointer-events: none;
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.36, 0.08, 0.2, 1);
  animation-fill-mode: both;
  will-change: transform, opacity;
}

.wcp-scene-exit { animation-name: wcp-scene-exit; }
.wcp-scene-exit-forward { animation-name: wcp-scene-exit-forward; }
.wcp-scene-exit-backward { animation-name: wcp-scene-exit-backward; }

.wcp-scene-loading {
  isolation: isolate;
}

/* Shard layer: clips + edge-fades all watercolor images so they never hard-cut at scene boundary */
.wcp-shards-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 2.2%, black 97.8%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 2%, black 98%, transparent 100%);
  -webkit-mask-composite: destination-in;
          mask-image:
    linear-gradient(to right,  transparent 0%, black 2.2%, black 97.8%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 2%, black 98%, transparent 100%);
          mask-composite: intersect;
}

.wcp-scene-stage-active .wcp-shards-layer,
.wcp-scene-stage-future .wcp-shards-layer {
  opacity: 0.82;
}

.wcp-scene-stage-future .wcp-shards-layer {
  opacity: 0.22;
}

/* Future-chapter shell: keep watercolor shards in colour; desaturate path/module nodes only (see emblem rules below). */
.wcp-scene-stage-future {
  background:
    linear-gradient(180deg, rgba(234,234,234,0.98) 0%, rgba(214,214,214,0.97) 46%, rgba(190,190,190,0.95) 100%);
}

.wcp-scene-stage-future .wcp-shard-wrap::before {
  filter: blur(92px) contrast(0.92) brightness(0.88);
  opacity: calc(var(--shard-haze-op, 0.50) * 0.15);
}

.wcp-scene-stage-future .wcp-shard-wrap::after {
  filter: blur(72px) contrast(0.94) brightness(0.9);
  opacity: 0.28;
}

.wcp-scene-stage-future .wcp-shape-circle,
.wcp-scene-stage-future .wcp-shape-arch,
.wcp-scene-stage-future .wcp-shape-diamond,
.wcp-scene-stage-future .wcp-shape-emblem {
  box-shadow: none;
}

.wcp-scene-stage-future .wcp-story-stage-backdrop {
  filter: brightness(0.62) contrast(0.82) saturate(0.55);
  opacity: 0.5;
  transform: scale(1.08);
}

.wcp-scene-stage-future .wcp-story-stage-wash {
  background:
    radial-gradient(circle at 50% 42%, rgba(248,246,242,0.12), rgba(248,246,242,0.05) 18%, rgba(82,77,72,0.10) 38%, rgba(46,42,39,0.34) 66%, rgba(28,26,24,0.62) 100%),
    linear-gradient(180deg, rgba(214,210,205,0.04), rgba(66,61,57,0.16) 36%, rgba(33,31,29,0.54) 100%);
  filter: blur(14px);
  opacity: 0.38;
}

.wcp-scene-stage-future::after {
  opacity: 0.14;
  filter: blur(92px) contrast(0.72) brightness(0.68) saturate(0.65);
}

.wcp-scene-stage-future::before {
  background:
    radial-gradient(ellipse 58% 38% at 18% 22%, rgba(246,246,246,0.14) 0%, transparent 68%),
    radial-gradient(ellipse 56% 42% at 82% 66%, rgba(224,224,224,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 32% at 50% 50%, rgba(84,84,84,0.12) 0%, transparent 66%);
  filter: blur(34px);
}

.wcp-scene-stage-future .wcp-route-svg {
  opacity: 0.035;
  filter: blur(8px);
}

.wcp-scene-stage-future .wcp-route-body-path,
.wcp-scene-stage-future .wcp-route-glow-path,
.wcp-scene-stage-future .wcp-route-shadow-path,
.wcp-scene-stage-future .wcp-route-centerline-path {
  opacity: 0.025;
}

.wcp-scene-stage-future .wcp-emblem-node:not(.wcp-node-story) {
  opacity: 0.06;
  filter: blur(8px);
}

/* Future arc: path + module emblems read as preview (B/W); background painting stays tinted above. */
.wcp-scene-stage-future .wcp-emblem-node img,
.wcp-scene-stage-future .wcp-story-emblem-frame img {
  filter: grayscale(1) saturate(0) brightness(0.72) contrast(0.85);
}

/* Story path lead (episode 0) stays in full colour while the rest of a future arc reads as preview. */
.wcp-scene-stage-future .wcp-node-story-journey-lead .wcp-story-emblem-frame,
.wcp-scene-future-preview .wcp-node-story-journey-lead .wcp-story-emblem-frame {
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.42)) saturate(1.08) contrast(1.02) !important;
}
.wcp-scene-stage-future .wcp-node-story-journey-lead .wcp-story-emblem-frame img,
.wcp-scene-future-preview .wcp-node-story-journey-lead .wcp-story-emblem-frame img {
  filter: none !important;
}

.wcp-scene-stage-future .wcp-week-peek {
  filter: blur(60px) brightness(0.72) contrast(0.7) saturate(0.5);
  opacity: 0.035;
}

.wcp-scene-stage-future .wcp-node-label,
.wcp-scene-stage-future .wcp-node-state,
.wcp-scene-stage-future .wcp-node-helper {
  color: rgba(228,224,218,0.14);
  background: rgba(72,72,72,0.06);
  backdrop-filter: blur(18px);
  box-shadow: none;
}

.wcp-scene-stage-future .wcp-node-label,
.wcp-scene-stage-future .wcp-node-helper {
  opacity: 0.18;
}

.wcp-scene-stage-future .wcp-node-state {
  opacity: 0.12;
}

.wcp-scene-stage-completed .wcp-story-stage:not(.wcp-journey-story-hero) {
  display: none;
}

.wcp-scene-stage-completed .wcp-shards-layer {
  opacity: 1;
}

.wcp-scene-stage-completed::after {
  opacity: 0.22;
  filter: blur(18px) saturate(0.54) contrast(0.84) brightness(0.78);
}

.wcp-scene-stage-completed::before {
  background:
    radial-gradient(ellipse 58% 38% at 18% 22%, rgba(var(--wcp-tint-a), 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 56% 42% at 82% 66%, rgba(var(--wcp-tint-b), 0.18) 0%, transparent 72%),
    radial-gradient(ellipse 36% 28% at 50% 50%, rgba(var(--wcp-tint-c), 0.12) 0%, transparent 64%),
    linear-gradient(180deg, rgba(255,240,204,0.04), rgba(255,240,204,0.02) 48%, transparent 76%);
}

/* Subtle parchment aged-paper texture via gradients */
.wcp-scene::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 58% 38% at 18% 22%, rgba(var(--wcp-tint-a), 0.30) 0%, transparent 70%),
    radial-gradient(ellipse 56% 42% at 82% 66%, rgba(var(--wcp-tint-b), 0.24) 0%, transparent 72%),
    radial-gradient(ellipse 36% 28% at 50% 50%, rgba(var(--wcp-tint-c), 0.10) 0%, transparent 64%);
  pointer-events: none;
  z-index: 0;
}

.wcp-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--wcp-art-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Watercolor visibility 2026-05-25: bumped 0.62 → 0.82 per user feedback
   * "the watercolor should be more visible in the background." The vignette
   * tints (.wcp-scene::before) stay moderate so text legibility holds. */
  opacity: 0.82;
  filter: blur(0.35px) saturate(1.14) contrast(1.02);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s ease;
  /* Feather edges only — avoid a dark “hole” over the center of the painting */
  -webkit-mask-image: radial-gradient(ellipse 92% 78% at 50% 50%, black 0%, black 38%, rgba(0,0,0,0.55) 56%, rgba(0,0,0,0.18) 74%, transparent 100%);
          mask-image: radial-gradient(ellipse 92% 78% at 50% 50%, black 0%, black 38%, rgba(0,0,0,0.55) 56%, rgba(0,0,0,0.18) 74%, transparent 100%);
}

/* Painting swap: briefly fade out the art layer before the new image loads */
.wcp-scene--art-swapping::after {
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

/* Journey path: CONSISTENT neutral-dark field (owner 2026-06-10). Backing + vignette are
 * hardcoded dark ink — NOT --wcp-tint, which applyWcpTheme writes from each painting's
 * palette (that was the green-yellow wash that changed per painting). Dark + neutral
 * AROUND the scene; the watercolor itself stays clearly visible (light scrim only). */
#wcp-scene.wcp-scene-journey-modules {
  background:
    radial-gradient(ellipse 120% 90% at 50% 8%, rgba(10, 8, 6, 0.22) 0%, transparent 62%),
    radial-gradient(ellipse 95% 88% at 50% 100%, rgba(8, 6, 4, 0.26) 0%, transparent 66%),
    rgb(43, 36, 27);
}
/* Neutralise the green-yellow palette vignette over the painting for the journey. */
#wcp-scene.wcp-scene-journey-modules::before {
  background:
    radial-gradient(ellipse 60% 42% at 18% 20%, rgba(6, 5, 3, 0.26) 0%, transparent 72%),
    radial-gradient(ellipse 58% 44% at 82% 70%, rgba(6, 5, 3, 0.22) 0%, transparent 74%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(4, 3, 2, 0.10) 0%, transparent 66%);
}
#wcp-scene.wcp-scene-journey-modules::after {
  /* Light neutral-dark scrim so the watercolor reads CLEARLY (the old dark-mode look),
   * just darker + less tinted than the painting palette. Tunable via --wcp-scene-scrim:
   * raise it toward 0.5 for a moodier/darker field, lower it for a brighter painting. */
  background-image:
    linear-gradient(rgba(12, 9, 6, var(--wcp-scene-scrim, 0.20)), rgba(12, 9, 6, var(--wcp-scene-scrim, 0.20))),
    var(--wcp-art-image);
  -webkit-mask-image: radial-gradient(ellipse 99% 96% at 50% 48%, black 0%, black 46%, rgba(0, 0, 0, 0.58) 72%, rgba(0, 0, 0, 0.92) 100%);
          mask-image: radial-gradient(ellipse 99% 96% at 50% 48%, black 0%, black 46%, rgba(0, 0, 0, 0.58) 72%, rgba(0, 0, 0, 0.92) 100%);
}

/* Dark mode: applyWcpTheme() writes warm painting colors to --wcp-tint-* via inline style,
 * overriding the dark-mode CSS vars. These rules use hardcoded dark ink blobs so the
 * vignette stays moody regardless of the painting palette. */
html.dark .wcp-scene::before {
  background:
    radial-gradient(ellipse 58% 38% at 18% 22%, rgba(4, 3, 2, 0.30) 0%, transparent 72%),
    radial-gradient(ellipse 56% 42% at 82% 66%, rgba(8, 6, 4, 0.24) 0%, transparent 74%),
    radial-gradient(ellipse 36% 28% at 50% 50%, rgba(2, 2, 1, 0.12) 0%, transparent 66%);
}
html.dark #wcp-scene.wcp-scene-journey-modules {
  /* Warmer, lighter backing + softer vignette so the painting reads. */
  background:
    radial-gradient(ellipse 120% 90% at 50% 8%, rgba(0, 0, 0, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 95% 88% at 50% 100%, rgba(0, 0, 0, 0.20) 0%, transparent 64%),
    rgb(34, 26, 18);
}
html.dark .wcp-scene {
  background: rgb(34, 26, 18);
}
/* Dark mode eats the painting — push its opacity up so the watercolor is clearly visible. */
html.dark .wcp-scene::after { opacity: 0.78; }
html.dark #wcp-scene.wcp-scene-journey-modules::after { opacity: 0.82; }
html.dark .wcp-scene::after {
  opacity: 0.34;
  filter: blur(0.35px) saturate(0.72) brightness(0.72) contrast(1.02);
}

/* Dark mode: emblem nodes need more contrast against the dark gate overlay and dark painting */
html.dark .wcp-scene-stage-active .wcp-emblem-node:not(.wcp-node-story):not(.wcp-current),
html.dark .wcp-scene-stage-future .wcp-emblem-node:not(.wcp-node-story):not(.wcp-current) {
  opacity: 0.72;
  filter: drop-shadow(0 0 6px rgba(220, 190, 120, 0.22));
}
html.dark .wcp-scene-stage-active .wcp-emblem-node.wcp-current,
html.dark .wcp-scene-stage-future .wcp-emblem-node.wcp-current {
  filter: drop-shadow(0 0 10px rgba(220, 190, 120, 0.40));
}

.wcp-scene-stage-active::after {
  opacity: 0.32;
}

.wcp-story-stage {
  position: absolute;
  top: 9%;
  left: 50%;
  width: clamp(320px, 48vw, 500px);
  height: clamp(420px, 74vh, 640px);
  transform: translateX(-50%);
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* Foundation week 0: hide giant center story emblem — path + shards only */
.wcp-scene.wcp-scene-foundation-min .wcp-story-stage:not(.wcp-journey-story-hero) {
  display: none !important;
}

/* Center gate card already shows the story title — hide week pill only for legacy center hero (not left-rail journey). */
#wcp-scene.wcp-scene-journey-story-hero:not(.wcp-scene-journey-modules) .wcp-week-meta {
  display: none;
}

/* Browsing a past arc (‹): never leave the live “open story” gate card up — plan-level gate stays open for the current chapter. */
.wcp-scene-journey-history-celebrate #wcp-journey-story-hero,
.wcp-scene-journey-history-celebrate .wcp-journey-story-hero {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Legacy (non–journey-modules): full-width center gate card. */
.wcp-scene.wcp-scene-journey-story-hero:not(.wcp-scene-journey-modules) .wcp-journey-story-hero {
  display: grid !important;
  top: 5%;
  width: clamp(360px, 62vw, 640px);
  height: clamp(440px, 78vh, 720px);
  max-height: min(78vh, 720px);
  z-index: 7;
  pointer-events: none;
}

.wcp-scene.wcp-scene-journey-story-hero:not(.wcp-scene-journey-modules) .wcp-journey-story-hero .wcp-story-stage-content {
  width: clamp(300px, 48vw, 520px);
  pointer-events: auto;
}

/* Journey watercolor: gate card (center overlay, or legacy left rail if present). */
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero .wcp-journey-gate-overlay .wcp-journey-story-hero,
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero .wcp-path-story-rail .wcp-journey-story-hero {
  display: grid !important;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: min(100%, clamp(320px, 92vw, 440px));
  max-width: min(100%, clamp(320px, 92vw, 440px));
  height: auto;
  min-height: min(52vh, 480px);
  max-height: min(78vh, 640px);
  z-index: 1;
  pointer-events: auto;
}
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero .wcp-journey-gate-overlay .wcp-journey-story-hero .wcp-story-stage-content,
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero .wcp-path-story-rail .wcp-journey-story-hero .wcp-story-stage-content {
  width: 100%;
  max-width: 100%;
  padding: 1.2rem 0.85rem 1.35rem;
  pointer-events: auto;
}

/* Gate open: soften the path behind a *center* hero only. */
.wcp-scene.wcp-scene-journey-story-hero:not(.wcp-scene-journey-modules) .wcp-shards-layer {
  filter: blur(2.5px) saturate(0.9) brightness(0.94);
  transition: filter 420ms ease;
}
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero .wcp-path-canvas .wcp-shards-layer {
  filter: none;
  opacity: 0.88;
  transition: opacity 420ms ease;
}

.wcp-scene.wcp-scene-journey-story-hero .wcp-story-stage-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
}

.wcp-scene.wcp-scene-journey-story-hero .wcp-journey-story-hero .wcp-story-stage-title {
  font-size: clamp(1.65rem, 4.2vw, 2.45rem);
  line-height: 1.05;
}
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero .wcp-journey-gate-overlay .wcp-journey-story-hero .wcp-story-stage-title,
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero .wcp-path-story-rail .wcp-journey-story-hero .wcp-story-stage-title {
  font-size: clamp(1.15rem, 3.2vw, 1.55rem);
  line-height: 1.12;
}
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero .wcp-journey-gate-overlay .wcp-journey-story-hero .wcp-story-stage-copy,
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero .wcp-path-story-rail .wcp-journey-story-hero .wcp-story-stage-copy {
  max-width: none;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Center gate hero: sharp card — drop heavy frosted blur (user reads title + art clearly). */
.wcp-journey-story-hero.wcp-story-stage::before {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(250, 246, 238, 0.14) 0%, rgba(250, 246, 238, 0.07) 26%, rgba(24, 17, 12, 0.05) 48%, transparent 72%),
    radial-gradient(circle at 50% 48%, rgba(var(--wcp-tint-c), 0.1) 0%, rgba(var(--wcp-tint-c), 0.05) 34%, transparent 74%);
}
.wcp-journey-story-hero .wcp-story-stage-backdrop {
  filter: saturate(1.05) brightness(0.94);
  transform: scale(1.02);
}
.wcp-journey-story-hero .wcp-story-stage-wash {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    radial-gradient(circle at 50% 22%, var(--wcp-stage-wash-hi), var(--wcp-stage-wash-mid) 24%, rgba(18, 13, 9, 0.05) 42%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04), var(--wcp-stage-wash-soft) 30%, var(--wcp-stage-wash-shadow) 78%),
    linear-gradient(180deg, rgba(22, 16, 11, 0.03), rgba(22, 16, 11, 0.18) 46%, rgba(22, 16, 11, 0.52) 100%);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 252, 246, 0.14);
}
.wcp-journey-story-hero .wcp-story-stage-cta {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@keyframes wcp-gate-hero-title-shine {
  0%,
  100% {
    text-shadow:
      0 2px 22px rgba(0, 0, 0, 0.35),
      0 0 42px rgba(255, 248, 228, 0.35),
      0 0 72px rgba(255, 220, 140, 0.22);
  }
  50% {
    text-shadow:
      0 2px 26px rgba(0, 0, 0, 0.38),
      0 0 56px rgba(255, 252, 236, 0.52),
      0 0 96px rgba(255, 214, 120, 0.38);
  }
}
.wcp-scene-journey-story-hero .wcp-journey-story-hero .wcp-story-stage-title {
  animation: wcp-gate-hero-title-shine 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wcp-scene-journey-story-hero .wcp-journey-story-hero .wcp-story-stage-title {
    animation: none;
    text-shadow:
      0 2px 24px rgba(0, 0, 0, 0.36),
      0 0 48px rgba(255, 248, 228, 0.42),
      0 0 84px rgba(255, 214, 130, 0.28);
  }
}

/* Present path + gate hero: soften path story thumbnail — focus is the large card only */
#wcp-scene.wcp-scene-journey-story-hero:not(.wcp-scene-future-preview) .wcp-node-story .wcp-story-emblem-frame img {
  filter: blur(5px) saturate(0.86) brightness(0.93);
  animation: none;
}

/* Week-1 peek while foundation unfinished: smaller center teaser, not full-screen */
.wcp-scene.wcp-scene-foundation-peek .wcp-story-stage {
  top: 11%;
  width: clamp(210px, 38vw, 360px);
  height: clamp(120px, 26vh, 240px);
}

.wcp-scene.wcp-scene-foundation-peek .wcp-story-stage-question {
  font-size: clamp(2.8rem, 11vw, 4.8rem);
  margin-top: 0;
}

/* Next-week peek: mystery story lives on the path (center stage removed). */
.wcp-foundation-peek-banner {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  max-width: min(560px, 92vw);
  margin: 0;
  padding: 0.5rem 0.95rem;
  font-size: 0.8rem;
  line-height: 1.38;
  font-weight: 500;
  text-align: center;
  color: rgba(58, 48, 36, 0.92);
  background: rgba(255, 252, 245, 0.9);
  border: 1px solid rgba(184, 146, 42, 0.24);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(28, 20, 12, 0.1);
  pointer-events: none;
}

html.dark .wcp-foundation-peek-banner {
  color: rgba(240, 236, 228, 0.92);
  background: rgba(28, 32, 40, 0.88);
  border-color: rgba(255, 255, 255, 0.1);
}

.wcp-story-gate-callout {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  max-width: min(520px, 94vw);
  text-align: center;
  pointer-events: auto;
}

.wcp-story-gate-callout .wcp-foundation-peek-banner {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  display: block;
  margin: 0 0 0.4rem;
  pointer-events: none;
}

.wcp-story-gate-cta {
  font-size: 0.88rem;
}

/* After story gate consumes / timeline handoff: clean colour bloom (reads “chapter unlocked”). */
@keyframes wcp-path-next-reveal-kf {
  0% {
    opacity: 0.88;
    transform: scale(0.991);
    filter: saturate(0.74) brightness(0.93);
  }
  42% {
    filter: saturate(1.14) brightness(1.05);
    transform: scale(1.005);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1) brightness(1);
  }
}

#wcp-scene.wcp-path-next-reveal {
  animation: wcp-path-next-reveal-kf 1.35s cubic-bezier(0.26, 0.88, 0.32, 1) both;
}

@keyframes wcp-route-handoff-glow {
  0% {
    opacity: 0.04;
  }
  38% {
    opacity: 0.38;
  }
  100% {
    opacity: 0.12;
  }
}

#wcp-scene.wcp-path-next-reveal .wcp-route-glow-path {
  animation: wcp-route-handoff-glow 1.35s cubic-bezier(0.26, 0.88, 0.32, 1) both;
}

#wcp-scene.wcp-scene-journey-modules.wcp-path-next-reveal .wcp-journey-story-hero {
  z-index: 22;
  transform: scale(1.05);
  transition: transform 1.2s cubic-bezier(0.26, 0.88, 0.32, 1);
}
#wcp-scene.wcp-scene-journey-modules.wcp-path-next-reveal .wcp-story-stage-backdrop {
  filter: blur(2px) saturate(1.06);
}

/* Peek “next chapter” with gate open — keep stage-active full colour (stage-future was nuking saturation). */
#wcp-scene.wcp-scene-future-preview.wcp-scene-stage-active {
  filter: saturate(1.03) contrast(1.02);
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-stage-active .wcp-shards-layer {
  opacity: 0.86;
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-stage-active .wcp-shard-wrap {
  opacity: 0.94;
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-stage-active .wcp-emblem-node:not(.wcp-node-story) {
  opacity: 0.68;
  filter: none;
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-stage-active .wcp-route-svg {
  opacity: 0.22;
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-stage-active .wcp-route-body-path {
  opacity: 0.28;
}

/* Next-chapter preview with center gate hero: soften the painting behind the card + ornament the story waypoint */
@keyframes wcp-next-chapter-halo-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.03);
  }
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active::after {
  filter: blur(5px) saturate(1.04) contrast(0.96);
  opacity: 0.44;
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active::before {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background:
    radial-gradient(ellipse 48% 42% at 50% 42%, rgba(255, 248, 232, 0.12) 0%, transparent 58%),
    radial-gradient(ellipse 92% 78% at 50% 50%, rgba(14, 11, 8, 0.42) 0%, transparent 55%);
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active .wcp-shards-layer {
  filter: blur(3px);
  opacity: 0.72;
}
/* Background module circles — softer blur so modules stay readable */
#wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active .wcp-emblem-node:not(.wcp-node-story) {
  opacity: 0.56 !important;
  filter: blur(3.5px) saturate(0.78) brightness(0.9) !important;
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active .wcp-emblem-node:not(.wcp-node-story) img {
  filter: blur(2.5px) saturate(0.8) brightness(0.92);
}

@keyframes wcp-story-emblem-shimmer {
  0%,
  100% {
    filter: brightness(1.06) contrast(1.1) saturate(1.18)
      drop-shadow(0 0 14px rgba(255, 236, 200, 0.45));
  }
  50% {
    filter: brightness(1.18) contrast(1.14) saturate(1.28)
      drop-shadow(0 0 26px rgba(255, 228, 160, 0.62));
  }
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active .wcp-node-story .wcp-story-emblem-frame {
  position: relative;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(255, 238, 204, 0.35));
}
/* Small story waypoint on path — blurred; large center card stays the hero */
#wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active .wcp-node-story .wcp-story-emblem-frame img {
  filter: blur(5px) saturate(0.85) brightness(0.92);
  animation: none;
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active .wcp-node-story .wcp-story-emblem-frame::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    transparent 38%,
    rgba(255, 252, 240, 0.55) 48%,
    rgba(255, 236, 190, 0.35) 52%,
    transparent 62%
  );
  mix-blend-mode: soft-light;
  animation: wcp-story-emblem-gloss 4.5s ease-in-out infinite;
}
@keyframes wcp-story-emblem-gloss {
  0%,
  100% {
    opacity: 0.35;
    transform: rotate(-8deg) scale(1);
  }
  50% {
    opacity: 0.72;
    transform: rotate(8deg) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  #wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active .wcp-node-story .wcp-story-emblem-frame img {
    animation: none;
  }
  #wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active .wcp-node-story .wcp-story-emblem-frame::after {
    animation: none;
    opacity: 0.5;
  }
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active .wcp-node-story {
  z-index: 8;
}
#wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active .wcp-node-story .wcp-story-emblem-frame::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 248, 228, 0.22) 0%, rgba(255, 220, 160, 0.08) 42%, transparent 68%);
  animation: wcp-next-chapter-halo-pulse 4.2s ease-in-out infinite;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  #wcp-scene.wcp-scene-future-preview.wcp-scene-journey-story-hero.wcp-scene-stage-active .wcp-node-story .wcp-story-emblem-frame::before {
    animation: none;
    opacity: 0.75;
  }
}

/* Legacy fallback when preview still uses grey stage-future */
#wcp-scene.wcp-scene-future-preview:not(.wcp-scene-stage-active) {
  filter: saturate(0.55) contrast(0.95);
}
#wcp-scene.wcp-scene-future-preview:not(.wcp-scene-stage-active) .wcp-shard-wrap {
  opacity: 0.66;
}
#wcp-scene.wcp-scene-future-preview:not(.wcp-scene-stage-active) .wcp-node.wcp-locked {
  filter: grayscale(0.35);
}

/* Journey story module — manuscript grows with content; scroll inside the overlay column (not past the paper). */
#module-overlay .site-landing-dl-host.module-overlay-story-dl {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

#module-overlay .module-overlay-story-dl .module-story-ms-canvas.ms-canvas {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  min-height: min(520px, 72vh);
  max-width: none;
  background: rgba(255, 250, 240, 0.88);
  border-color: rgba(201, 184, 154, 0.38);
  box-shadow: 0 20px 56px rgba(20, 18, 14, 0.09);
}

#module-overlay .module-overlay-story-dl .landing-ms-panel.module-story-ms-panel {
  border-top: 1px solid rgba(201, 184, 154, 0.35);
  background: transparent;
}

#module-overlay .module-overlay-story-dl .module-story-chat-host.chat-log {
  background: rgba(255, 252, 246, 0.94);
  border-color: rgba(201, 184, 154, 0.32);
  /* Override .module-story-scene .module-story-chat-host max-height cap for full manuscript layout. */
  max-height: none;
  flex: 0 0 auto;
  overflow: visible;
}

#module-overlay .module-overlay-story-dl .module-story-chat-host .story-chat-thread {
  flex: 0 0 auto;
  overflow: visible;
}

@media (max-width: 820px) {
  #module-overlay .module-overlay-story-dl .ms-canvas {
    grid-template-columns: 1fr;
    padding: 1.4rem 1.3rem 1.6rem;
  }
}

.wcp-scene.wcp-scene-foundation-peek.wcp-scene-stage-future .wcp-node-story.wcp-node-mystery {
  opacity: 1 !important;
  pointer-events: none;
  z-index: 4;
}

.wcp-scene.wcp-scene-foundation-peek.wcp-scene-stage-future .wcp-node-story.wcp-node-mystery .wcp-story-emblem-frame {
  position: relative;
  opacity: 1 !important;
}

.wcp-scene.wcp-scene-foundation-peek.wcp-scene-stage-future .wcp-node-story.wcp-node-mystery .wcp-story-emblem-frame img {
  opacity: 0.35 !important;
  filter: grayscale(0.5) saturate(0.7);
}

.wcp-scene.wcp-scene-foundation-peek.wcp-scene-stage-future .wcp-node-story.wcp-node-mystery .wcp-story-emblem-frame::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(255, 252, 248, 0.95);
  text-shadow: 0 3px 18px rgba(24, 18, 12, 0.55);
  pointer-events: none;
}

.wcp-scene.wcp-scene-foundation-peek .wcp-node-story.wcp-node-mystery.wcp-locked::after {
  display: none;
}

.wcp-scene.wcp-scene-foundation-peek .wcp-node-story.wcp-node-mystery::before {
  display: none;
}

.wcp-scene-stage-active .wcp-story-stage,
.wcp-scene-stage-future .wcp-story-stage {
  z-index: 6;
}

.wcp-story-stage::before {
  content: '';
  position: absolute;
  inset: -22% -34%;
  background:
    radial-gradient(circle at 50% 42%, rgba(250,246,238,0.22) 0%, rgba(250,246,238,0.14) 22%, rgba(24,17,12,0.10) 48%, transparent 72%),
    radial-gradient(circle at 50% 48%, rgba(var(--wcp-tint-c), 0.20) 0%, rgba(var(--wcp-tint-c), 0.11) 34%, transparent 74%);
  backdrop-filter: blur(26px) saturate(118%);
  -webkit-backdrop-filter: blur(26px) saturate(118%);
  -webkit-mask-image: radial-gradient(circle at 50% 46%, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.84) 28%, rgba(0,0,0,0.34) 58%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 46%, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.84) 28%, rgba(0,0,0,0.34) 58%, transparent 78%);
  pointer-events: none;
}

.wcp-story-stage-backdrop,
.wcp-story-stage-wash {
  position: absolute;
  inset: 0;
  clip-path: url(#em-b1);
}

.wcp-story-stage-backdrop {
  background-size: cover;
  background-position: center center;
  /* Brighter + less blur so the painting is clearly readable behind the path. */
  filter: blur(9px) saturate(0.96) brightness(0.96);
  opacity: 0.98;
  transform: scale(1.04);
}

.wcp-story-stage-wash {
  /* Lighter wash so the painting reads more easily; keep a gentle darkening
   * only at the very bottom (where the path/labels sit) for contrast. */
  background:
    radial-gradient(circle at 50% 22%, var(--wcp-stage-wash-hi), var(--wcp-stage-wash-mid) 24%, rgba(18,13,9,0.05) 42%, transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03), var(--wcp-stage-wash-soft) 34%, var(--wcp-stage-wash-shadow) 84%),
    linear-gradient(180deg, rgba(22,16,11,0.02), rgba(22,16,11,0.16) 52%, rgba(22,16,11,0.44) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 46px rgba(0,0,0,0.16), inset 0 0 0 1px rgba(255,252,246,0.18);
}

.wcp-story-stage-content {
  position: relative;
  z-index: 1;
  width: clamp(240px, 31vw, 320px);
  display: grid;
  gap: 0.72rem;
  text-align: center;
  justify-items: center;
  padding: 1.8rem 1.6rem 2.5rem;
}

.wcp-story-stage-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  background: rgba(250,247,240,0.18);
  border: 1px solid rgba(250,247,240,0.24);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,249,240,0.9);
}

.wcp-story-stage-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #fff9f0;
  text-shadow: 0 16px 36px rgba(0,0,0,0.28);
}

.wcp-story-stage-copy {
  max-width: 290px;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.58;
  color: rgba(255,246,234,0.84);
  text-wrap: balance;
}

.wcp-story-stage-cta {
  pointer-events: auto;
  border: 1px solid rgba(255,250,242,0.28);
  border-radius: 999px;
  padding: 0.9rem 1.45rem;
  background: rgba(255,250,242,0.16);
  color: #fff8f0;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 28px rgba(17,13,9,0.18);
}

.wcp-story-stage-cta:hover {
  background: rgba(255,250,242,0.22);
}

.wcp-story-stage-question {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(6rem, 18vw, 11rem);
  line-height: 0.78;
  color: rgba(255,249,241,0.74);
  text-shadow: 0 26px 60px rgba(0,0,0,0.32);
  margin-top: -0.25rem;
}

.wcp-scene-stage-welcome .wcp-week-meta {
  max-width: min(560px, calc(100vw - 10rem));
}

.wcp-scene-stage-welcome .wcp-week-nav {
  opacity: 0.34;
}

.wcp-scene-stage-welcome .wcp-shards-layer,
.wcp-scene-stage-welcome .wcp-route-svg,
.wcp-scene-stage-welcome .wcp-emblem-node {
  opacity: 0.34;
}

.wcp-scene-stage-welcome .wcp-route-svg,
.wcp-scene-stage-welcome .wcp-emblem-node {
  filter: saturate(0.74);
}

.wcp-node-inert {
  pointer-events: none;
}

.wcp-story-stage-welcome {
  top: 50%;
  width: min(880px, calc(100vw - 3rem));
  height: auto;
  transform: translate(-50%, -50%);
}

.wcp-story-stage-welcome::before {
  inset: -18% -16%;
  background:
    radial-gradient(circle at 50% 42%, rgba(250,246,238,0.18) 0%, rgba(250,246,238,0.1) 24%, rgba(24,17,12,0.14) 48%, transparent 74%),
    radial-gradient(circle at 50% 48%, rgba(var(--wcp-tint-c), 0.16) 0%, rgba(var(--wcp-tint-c), 0.08) 34%, transparent 74%);
}

.wcp-story-stage-welcome .wcp-story-stage-backdrop,
.wcp-story-stage-welcome .wcp-story-stage-wash {
  clip-path: none;
  border-radius: 34px;
}

.wcp-story-stage-welcome .wcp-story-stage-backdrop {
  filter: blur(14px) saturate(0.82) brightness(0.72);
}

.wcp-story-stage-welcome .wcp-story-stage-wash {
  background:
    linear-gradient(180deg, rgba(255,250,242,0.16), rgba(255,250,242,0.06) 26%, rgba(17,13,9,0.52) 100%),
    radial-gradient(circle at 20% 16%, rgba(255,248,235,0.18), transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(var(--wcp-tint-a), 0.2), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(18,13,9,0.74), rgba(18,13,9,0.9));
  box-shadow: 0 28px 58px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,252,246,0.14);
}

.wcp-story-stage-content-welcome {
  width: min(100%, 700px);
  gap: 1rem;
  padding: 2.3rem 2.4rem 2.2rem;
}

.wcp-welcome-language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: end;
  padding: 0.28rem;
  border-radius: 999px;
  background: rgba(15, 12, 9, 0.34);
  border: 1px solid rgba(255, 249, 240, 0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.wcp-welcome-language-btn {
  min-width: 46px;
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  background: transparent;
  color: rgba(255, 245, 232, 0.68);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.wcp-welcome-language-btn:hover {
  color: rgba(255, 248, 238, 0.92);
  transform: translateY(-1px);
}

.wcp-welcome-language-btn.is-active {
  background: rgba(255, 248, 236, 0.14);
  color: #fff8ef;
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}

.wcp-welcome-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.6rem, 5.6vw, 4.7rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: #fff8ef;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 18px 42px rgba(0,0,0,0.3);
}

.wcp-welcome-copy {
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.66;
}

.wcp-welcome-form {
  width: min(100%, 560px);
  display: grid;
  gap: 0.7rem;
}

.wcp-welcome-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,244,230,0.72);
}

.wcp-welcome-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}

.wcp-welcome-input {
  min-width: 0;
  border: 1px solid rgba(255,248,236,0.16);
  border-radius: 999px;
  padding: 0.96rem 1.15rem;
  background: rgba(12,10,8,0.26);
  color: #fff7ec;
  font-size: 0.98rem;
  outline: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.wcp-welcome-input::placeholder {
  color: rgba(255,245,232,0.4);
}

.wcp-welcome-input:focus {
  border-color: rgba(201,168,76,0.62);
  background: rgba(12,10,8,0.34);
  box-shadow: 0 0 0 4px rgba(201,168,76,0.12);
}

.wcp-welcome-submit[disabled] {
  opacity: 0.64;
  cursor: wait;
}

.wcp-welcome-submit-secondary {
  background: rgba(12, 10, 8, 0.22);
  border-color: rgba(255, 248, 236, 0.2);
  color: rgba(255, 247, 236, 0.88);
}

.wcp-welcome-note {
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(255,244,230,0.66);
}

.wcp-welcome-highlights {
  width: min(100%, 700px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 0.3rem;
}

.wcp-welcome-highlight {
  min-height: 146px;
  padding: 1rem 1rem 1.05rem;
  border-radius: 22px;
  background: rgba(255,249,240,0.08);
  border: 1px solid rgba(255,249,240,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  text-align: left;
}

.wcp-welcome-highlight strong {
  display: block;
  margin-bottom: 0.45rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  color: #fff7ec;
}

.wcp-welcome-highlight p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255,243,228,0.74);
}

/* ── 4 INDIVIDUAL PAINTING SHARDS — mixed-shape system ─────────── */
/* Each shard wrap = atmospheric haze (::before) + crisp shape (::after).  */
/* The haze extends outside the shape boundary — images dissolve into       */
/* parchment with no hard cutoff. Shape is defined by .wcp-shape-* class.  */
.wcp-shard-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: wcp-seg-in 1.0s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

/* Outer atmospheric haze — tight so it clears node positions */
.wcp-shard-wrap::before {
  content: '';
  position: absolute;
  inset: -16%;
  background-image: var(--wcp-art-image);
  background-size: cover;
  background-position: var(--shard-bp-x, 50%) var(--shard-bp-y, 50%);
  background-repeat: no-repeat;
  filter: blur(13px) saturate(0.72) contrast(0.92);
  opacity: var(--shard-haze-op, 0.50);
  -webkit-mask-image: radial-gradient(ellipse 54% 54% at 50% 50%,
    rgba(0,0,0,0.82) 22%, rgba(0,0,0,0.38) 54%, transparent 70%);
  mask-image: radial-gradient(ellipse 54% 54% at 50% 50%,
    rgba(0,0,0,0.82) 22%, rgba(0,0,0,0.38) 54%, transparent 70%);
}

/* Crisp shaped image layer — acts as opaque window into the painting */
.wcp-shard-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--wcp-art-image);
  background-size: var(--img-w, 290%) var(--img-h, auto);
  background-position: var(--img-x, var(--shard-bp-x, 50%)) var(--img-y, var(--shard-bp-y, 50%));
  background-repeat: no-repeat;
  filter: saturate(1.08) contrast(1.02) brightness(1.0);
}

/* Story shard — higher z so it reads as centrepiece */
.wcp-shard-story { z-index: 2; }
/* 2026-06-13 owner: the story emblem diminished into the background and the painting
   didn't cover it fully. Drop the edge-fade so the painting fills the whole emblem,
   and add a stronger ring/glow so it reads as the clear centrepiece. */
.wcp-shard-story.wcp-shape-circle::after {
  -webkit-mask-image: none;
  mask-image: none;
}
.wcp-shard-story.wcp-shape-circle {
  box-shadow:
    0 0 0 3px   rgba(var(--wcp-tint-c), 0.6),
    0 0 0 9px   rgba(var(--wcp-tint-c), 0.2),
    0 12px 34px rgba(0, 0, 0, 0.3);
}

/* ── Circle ─── */
.wcp-shape-circle {
  /* 2026-06-12: owner — journey medallions ("blobs") read too large. Shrunk ~20%.
     2026-06-13: owner says still too large — shrink the background blobs again. */
  width: clamp(150px, 17vw, 245px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Subtle ring makes circle identity clear */
  box-shadow:
    0 0 0 2.5px rgba(var(--wcp-tint-c), 0.32),
    0 0 0 6px   rgba(var(--wcp-tint-c), 0.10),
    0 6px 22px  rgba(0,0,0,0.16);
}
.wcp-shape-circle::after {
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    black 80%, rgba(0,0,0,0.55) 92%, transparent 98%);
  mask-image: radial-gradient(circle at 50% 50%,
    black 80%, rgba(0,0,0,0.55) 92%, transparent 98%);
}
.wcp-shard-story.wcp-shape-circle { width: clamp(280px, 34vw, 440px); }

/* ── Arch (rounded top, flat bottom) ─── */
.wcp-shape-arch {
  width: clamp(168px, 20vw, 285px); /* 2026-06-13: shrink background blob (was 24vw/340) */
  aspect-ratio: 3/4;
}
.wcp-shape-arch::after {
  clip-path: inset(0 round 48% 48% 3px 3px / 38% 38% 3px 3px);
  filter: saturate(0.88) contrast(0.86) brightness(1.04)
          drop-shadow(0 4px 14px rgba(0,0,0,0.22));
}
.wcp-shard-story.wcp-shape-arch { width: clamp(250px, 30vw, 400px); }

/* ── Diamond ─── */
.wcp-shape-diamond {
  width: clamp(200px, 23vw, 310px); /* 2026-06-13: shrink background blob (was 28vw/380) */
  aspect-ratio: 1;
}
.wcp-shape-diamond::after {
  clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%);
  filter: saturate(0.88) contrast(0.86) brightness(1.04)
          drop-shadow(0 4px 14px rgba(0,0,0,0.20));
}
.wcp-shard-story.wcp-shape-diamond { width: clamp(290px, 36vw, 460px); }

/* ── Emblem / shield (story) — em-b1: rect top + rounded bottom ─── */
.wcp-shape-emblem {
  width: clamp(240px, 28vw, 380px);
  aspect-ratio: 3/4;
}
.wcp-shape-emblem::after {
  clip-path: url(#em-b1);
  filter: saturate(0.88) contrast(0.86) brightness(1.04)
          drop-shadow(0 5px 18px rgba(0,0,0,0.26));
}
.wcp-shard-story.wcp-shape-emblem {
  width: clamp(290px, 36vw, 460px);
}

.wcp-seg {
  opacity: 0;
  animation: wcp-seg-in 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes wcp-seg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wcp-scene-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.996);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes wcp-scene-enter-forward {
  from {
    opacity: 0;
    transform: translateX(10%) scale(0.996);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes wcp-scene-enter-backward {
  from {
    opacity: 0;
    transform: translateX(-10%) scale(0.996);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes wcp-scene-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(1.003);
  }
}

@keyframes wcp-scene-exit-forward {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-8%) scale(1.002);
  }
}

@keyframes wcp-scene-exit-backward {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(8%) scale(1.002);
  }
}

@keyframes wcp-unlock-overlay {
  0% {
    opacity: 0;
  }
  10%, 78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes wcp-unlock-card {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.92);
    filter: blur(10px);
  }
  18% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  76% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.02);
    filter: blur(6px);
  }
}

@keyframes wcp-unlock-burst-a {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  18% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@keyframes wcp-unlock-burst-b {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  16% {
    opacity: 0.92;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.24);
  }
}

@keyframes wcp-unlock-particle {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
  }
  12% {
    opacity: 1;
    transform: translate(calc(var(--particle-x) * 0.28), calc(var(--particle-y) * 0.28)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--particle-x), var(--particle-y)) scale(0.72);
  }
}

/* ── EMBLEM WAYPOINT NODES ─────────────────────────────────────── */
/* Compact circular milestone markers in painting gaps.                     */
/* The animated route path threads through these.                           */
.wcp-emblem-node {
  --wcp-idle-duration: 6.4s;
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none; user-select: none;
  z-index: 4;
  opacity: 0;
  animation: wcp-seg-in 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

/* Water drift: classic completed week paths — subtle ripple */
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-emblem-node.wcp-done {
  animation:
    wcp-seg-in 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) forwards,
    wcp-water-idle var(--wcp-idle-duration, 6.4s) var(--wcp-idle-ease, ease-in-out) var(--wcp-idle-delay, 0s) infinite;
}

/* Finished present arc only: stronger bob so celebration reads “live”. */
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-emblem-node.wcp-done {
  animation:
    wcp-seg-in 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) forwards,
    wcp-water-idle-history var(--wcp-idle-duration, 5.2s) var(--wcp-idle-ease, ease-in-out) var(--wcp-idle-delay, 0s) infinite;
}

/* Browsing an earlier arc: subtle drift only (avoid “floating” like the live path). */
.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate:not(.wcp-scene-journey-present-complete) .wcp-emblem-node.wcp-done {
  animation:
    wcp-seg-in 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) forwards,
    wcp-water-idle var(--wcp-idle-duration, 6.4s) var(--wcp-idle-ease, ease-in-out) var(--wcp-idle-delay, 0s) infinite;
}

.wcp-scene-stage-completed.wcp-scene-journey-modules:not(.wcp-scene-journey-history-celebrate):not(.wcp-scene-journey-present-complete) .wcp-emblem-node.wcp-done {
  animation: wcp-seg-in 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.wcp-scene-stage-active .wcp-emblem-node,
.wcp-scene-stage-future .wcp-emblem-node {
  z-index: 3;
}

/* Dim non-story nodes, but keep the active module and the route fully readable. */
.wcp-scene-stage-active .wcp-emblem-node:not(.wcp-node-story):not(.wcp-current):not(.wcp-done),
.wcp-scene-stage-future .wcp-emblem-node:not(.wcp-node-story):not(.wcp-current) {
  opacity: 0.50;
}
.wcp-scene-stage-active .wcp-emblem-node.wcp-done:not(.wcp-node-story),
.wcp-scene-stage-future .wcp-emblem-node.wcp-done:not(.wcp-node-story) {
  opacity: 0.66;
}
.wcp-scene-stage-active .wcp-emblem-node.wcp-current,
.wcp-scene-stage-future .wcp-emblem-node.wcp-current {
  opacity: 1;
  z-index: 6;
}

.wcp-node-position-badge {
  position: absolute;
  bottom: -0.42rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(0.58rem, 1.85vw, 0.76rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.48rem;
  border-radius: 999px;
  background: rgba(250, 247, 240, 0.96);
  color: rgba(62, 48, 28, 0.96);
  border: 1.5px solid rgba(193, 154, 87, 0.55);
  box-shadow: 0 6px 18px rgba(40, 30, 12, 0.2);
  pointer-events: none;
  z-index: 7;
}
html.dark .wcp-node-position-badge {
  background: rgba(34, 30, 24, 0.94);
  color: rgba(248, 240, 224, 0.96);
  border-color: rgba(198, 178, 138, 0.48);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.wcp-node-0 { animation-delay: 0.30s; }
.wcp-node-1 { animation-delay: 0.46s; }
.wcp-node-2 { animation-delay: 0.62s; }
.wcp-node-3 { animation-delay: 0.78s; }
.wcp-node-4 { animation-delay: 0.94s; }
.wcp-node-5 { animation-delay: 1.10s; }
.wcp-node-6 { animation-delay: 1.26s; }
.wcp-node-7 { animation-delay: 1.34s; }
.wcp-node-8 { animation-delay: 1.42s; }
.wcp-node-9 { animation-delay: 1.50s; }
.wcp-node-10 { animation-delay: 1.58s; }
.wcp-node-11 { animation-delay: 1.66s; }

.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate .wcp-node-0,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-node-0,
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-node-0 { --wcp-idle-duration: 6.1s; --wcp-idle-delay: -0.8s; --wcp-idle-ease: cubic-bezier(0.42, 0, 0.58, 1); animation-delay: 0.30s, -0.8s; }
.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate .wcp-node-1,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-node-1,
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-node-1 { --wcp-idle-duration: 7.0s; --wcp-idle-delay: -2.1s; --wcp-idle-ease: cubic-bezier(0.45, 0.05, 0.35, 1); animation-delay: 0.46s, -2.1s; }
.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate .wcp-node-2,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-node-2,
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-node-2 { --wcp-idle-duration: 6.6s; --wcp-idle-delay: -1.4s; --wcp-idle-ease: cubic-bezier(0.36, 0, 0.64, 1); animation-delay: 0.62s, -1.4s; }
.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate .wcp-node-3,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-node-3,
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-node-3 { --wcp-idle-duration: 7.4s; --wcp-idle-delay: -3.2s; --wcp-idle-ease: cubic-bezier(0.52, 0.12, 0.38, 0.92); animation-delay: 0.78s, -3.2s; }
.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate .wcp-node-4,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-node-4,
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-node-4 { --wcp-idle-duration: 6.8s; --wcp-idle-delay: -1.1s; --wcp-idle-ease: cubic-bezier(0.33, 0.12, 0.25, 1); animation-delay: 0.94s, -1.1s; }
.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate .wcp-node-5,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-node-5,
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-node-5 { --wcp-idle-duration: 7.2s; --wcp-idle-delay: -2.8s; --wcp-idle-ease: cubic-bezier(0.42, 0, 0.58, 1); animation-delay: 1.10s, -2.8s; }
.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate .wcp-node-6,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-node-6,
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-node-6 { --wcp-idle-duration: 6.4s; --wcp-idle-delay: -1.9s; --wcp-idle-ease: cubic-bezier(0.45, 0.05, 0.35, 1); animation-delay: 1.26s, -1.9s; }
.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate .wcp-node-7,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-node-7,
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-node-7 { --wcp-idle-duration: 6.5s; --wcp-idle-delay: -1.5s; --wcp-idle-ease: cubic-bezier(0.36, 0, 0.64, 1); animation-delay: 1.34s, -1.5s; }
.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate .wcp-node-8,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-node-8,
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-node-8 { --wcp-idle-duration: 6.7s; --wcp-idle-delay: -2.0s; --wcp-idle-ease: cubic-bezier(0.52, 0.12, 0.38, 0.92); animation-delay: 1.42s, -2.0s; }
.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate .wcp-node-9,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-node-9,
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-node-9 { --wcp-idle-duration: 6.9s; --wcp-idle-delay: -2.4s; --wcp-idle-ease: cubic-bezier(0.33, 0.12, 0.25, 1); animation-delay: 1.50s, -2.4s; }
.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate .wcp-node-10,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-node-10,
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-node-10 { --wcp-idle-duration: 7.1s; --wcp-idle-delay: -2.6s; --wcp-idle-ease: cubic-bezier(0.42, 0, 0.58, 1); animation-delay: 1.58s, -2.6s; }
.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate .wcp-node-11,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-node-11,
.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-node-11 { --wcp-idle-duration: 6.3s; --wcp-idle-delay: -1.2s; --wcp-idle-ease: cubic-bezier(0.45, 0.05, 0.35, 1); animation-delay: 1.66s, -1.2s; }

.wcp-emblem-node.wcp-node-mystery img,
.wcp-emblem-node.wcp-node-mystery .wcp-story-emblem-frame {
  filter: grayscale(0.35) saturate(0.75) blur(0.45px);
  opacity: 0.88;
}

.wcp-emblem-node.wcp-node-mystery.wcp-locked::after {
  content: "?";
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 0.92rem;
  font-weight: 800;
  border-radius: 50%;
  background: rgba(250, 247, 240, 0.94);
  color: rgba(72, 58, 38, 0.88);
  border: 1.5px solid rgba(184, 146, 42, 0.45);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

.wcp-emblem-node img {
  /* Smaller + subtler than before — shapes emerge gently from the painting,
   * not as bright bordered medallions that dominate the background. */
  width: clamp(80px, 12.5vw, 112px);
  height: clamp(80px, 12.5vw, 112px);
  border-radius: 50%;
  object-fit: cover; object-position: center;
  display: block;
  border: 2px solid rgba(255, 252, 245, 0.78);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.14),
    0 0 0 5px rgba(250,247,240,0.55),
    0 0 0 11px color-mix(in srgb, var(--wcp-node-glow) 48%, transparent);
  filter: drop-shadow(0 2px 10px rgba(74, 54, 26, 0.10));
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.wcp-node-task img {
  width: clamp(72px, 11vw, 98px);
  height: clamp(72px, 11vw, 98px);
  border-width: 2px;
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.12),
    0 0 0 4px rgba(250,247,240,0.5),
    0 0 0 9px color-mix(in srgb, var(--wcp-node-glow) 42%, transparent);
}

.wcp-node-task[data-activity-key="mastery"] img {
  width: clamp(76px, 11.5vw, 104px);
  height: clamp(76px, 11.5vw, 104px);
  border-color: color-mix(in srgb, var(--wcp-node-ring) 70%, #f8efd8);
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.12),
    0 0 0 4px rgba(250,247,240,0.55),
    0 0 0 9px color-mix(in srgb, var(--wcp-node-glow) 50%, transparent);
}

.wcp-node-task[data-activity-key="mastery"].wcp-next img,
.wcp-node-task[data-activity-key="mastery"].wcp-current img {
  box-shadow:
    0 9px 24px rgba(0,0,0,0.18),
    0 0 0 8px rgba(247,227,178,0.84),
    0 0 0 17px rgba(193,154,87,0.28),
    0 0 22px rgba(193,154,87,0.14);
}
.wcp-emblem-node.wcp-done img {
  border-color: var(--green);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.18),
    0 0 0 10px rgba(247,227,178,0.76),
    0 0 0 18px rgba(193,154,87,0.24),
    0 0 26px rgba(193,154,87,0.12);
}

/* ── Distinctive path nodes for the two new module types (2026-06-23) ──────────
   Lexical "Bygg fraser" and Flashcards "Flashkort" get their own colour, badge and
   silhouette so they read as different rituals from the painting-thumbnail drills. */

/* Lexical "Bygg fraser" + Flashcards "Flashkort" read as their own rituals while
   keeping the watercolour world: the path PAINTING stays visible behind a LIGHT
   colour wash, with a white icon on top (stacked phrase-tiles / a fanned deck), a
   coloured ring (option 3) and a soft dark float shadow. (2026-06-24) */
.wcp-emblem-node[data-module-stage="lexical"] {
  --wcp-node-ring: #2f8f86;
  --wcp-node-glow: rgba(47, 143, 134, 0.4);
}
.wcp-emblem-node[data-module-stage="flashcards"] {
  --wcp-node-ring: #9560a6;
  --wcp-node-glow: rgba(149, 96, 166, 0.38);
}
.wcp-emblem-node[data-module-stage="lexical"] img { border-radius: 26%; }
.wcp-emblem-node[data-module-stage="flashcards"] img { border-radius: 18%; }
.wcp-emblem-node[data-module-stage="lexical"]::after,
.wcp-emblem-node[data-module-stage="flashcards"]::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(72px, 11vw, 98px);
  height: clamp(72px, 11vw, 98px);
  border: 2px solid rgba(255, 252, 245, 0.9);
  /* soft dark centre keeps the white icon legible over a light/warm painting */
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.16);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center 46%, center, center;
  background-size: 42%, 100%, 100%;
  pointer-events: none;
  z-index: 3;
}
.wcp-emblem-node[data-module-stage="lexical"]::after {
  content: "";
  border-radius: 26%;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20fill%3D%27white%27%3E%3Crect%20x%3D%276%27%20y%3D%278%27%20width%3D%2728%27%20height%3D%277%27%20rx%3D%273.5%27%20opacity%3D%27.95%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2717%27%20width%3D%2719%27%20height%3D%277%27%20rx%3D%273.5%27%20opacity%3D%27.72%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2726%27%20width%3D%2724%27%20height%3D%277%27%20rx%3D%273.5%27%20opacity%3D%27.95%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(circle at 50% 46%, rgba(0,0,0,0.28), transparent 58%),
    linear-gradient(150deg, rgba(58,169,158,0.32) 0%, rgba(39,113,104,0.46) 100%);
}
.wcp-emblem-node[data-module-stage="flashcards"]::after {
  content: "";
  border-radius: 18%;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2044%2040%27%3E%3Cg%20fill%3D%27white%27%3E%3Crect%20x%3D%276%27%20y%3D%2712%27%20width%3D%2718%27%20height%3D%2724%27%20rx%3D%273%27%20transform%3D%27rotate%28-15%2015%2024%29%27%20opacity%3D%27.62%27%2F%3E%3Crect%20x%3D%2713%27%20y%3D%279%27%20width%3D%2718%27%20height%3D%2724%27%20rx%3D%273%27%20transform%3D%27rotate%28-2%2022%2021%29%27%20opacity%3D%27.82%27%2F%3E%3Crect%20x%3D%2720%27%20y%3D%277%27%20width%3D%2718%27%20height%3D%2724%27%20rx%3D%273%27%20opacity%3D%27.98%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(circle at 50% 46%, rgba(0,0,0,0.28), transparent 58%),
    linear-gradient(150deg, rgba(169,111,184,0.32) 0%, rgba(122,71,137,0.46) 100%);
}
/* Mastery node renders slightly larger — match the overlay so it covers the face. */
.wcp-emblem-node[data-module-stage="lexical"].wcp-current::after,
.wcp-emblem-node[data-module-stage="flashcards"].wcp-current::after,
.wcp-emblem-node[data-module-stage="lexical"].wcp-next::after,
.wcp-emblem-node[data-module-stage="flashcards"].wcp-next::after {
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.18), 0 0 14px color-mix(in srgb, var(--wcp-node-ring) 60%, transparent);
}
.wcp-emblem-node.wcp-locked[data-module-stage="lexical"]::after,
.wcp-emblem-node.wcp-locked[data-module-stage="flashcards"]::after {
  filter: grayscale(0.32) saturate(0.85);
  opacity: 0.94;
}

/* ── Conversazione + Situazione get their own faces on the path (owner
   2026-07-11): the speak/act kinds announce themselves before touch.
   Same overlay convention as lexical/flashcards; terracotta = speak/act
   (duo accent). Conversazione = the open-air speech bubble; Situazione =
   the survival-kit checklist. */
.wcp-emblem-node[data-module-stage="conversazione"] {
  --wcp-node-ring: #c0663f;
  --wcp-node-glow: rgba(192, 102, 63, 0.42);
}
.wcp-emblem-node[data-module-stage="situazione"] {
  --wcp-node-ring: #8f2f28;
  --wcp-node-glow: rgba(143, 47, 40, 0.4);
}
.wcp-emblem-node[data-module-stage="conversazione"]::after,
.wcp-emblem-node[data-module-stage="situazione"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(72px, 11vw, 98px);
  height: clamp(72px, 11vw, 98px);
  border: 2px solid rgba(255, 252, 245, 0.9);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.16);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center 46%, center, center;
  background-size: 42%, 100%, 100%;
  pointer-events: none;
  z-index: 3;
  border-radius: 26%;
}
.wcp-emblem-node[data-module-stage="conversazione"]::after {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20fill%3D%27white%27%3E%3Crect%20x%3D%274%27%20y%3D%277%27%20width%3D%2732%27%20height%3D%2720%27%20rx%3D%276%27%20opacity%3D%27.95%27%2F%3E%3Cpath%20d%3D%27M14%2027%20L14%2035%20L22%2027%20Z%27%20opacity%3D%27.95%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(circle at 50% 46%, rgba(0,0,0,0.28), transparent 58%),
    linear-gradient(150deg, rgba(192,102,63,0.34) 0%, rgba(140,66,36,0.5) 100%);
}
.wcp-emblem-node[data-module-stage="situazione"]::after {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2012%20l3%203%205-6%27%2F%3E%3Cpath%20d%3D%27M7%2024%20l3%203%205-6%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27white%27%3E%3Crect%20x%3D%2720%27%20y%3D%2711%27%20width%3D%2713%27%20height%3D%274.6%27%20rx%3D%272.3%27%20opacity%3D%27.9%27%2F%3E%3Crect%20x%3D%2720%27%20y%3D%2723%27%20width%3D%2713%27%20height%3D%274.6%27%20rx%3D%272.3%27%20opacity%3D%27.9%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(circle at 50% 46%, rgba(0,0,0,0.3), transparent 58%),
    linear-gradient(150deg, rgba(143,47,40,0.36) 0%, rgba(100,30,26,0.52) 100%);
}
.wcp-emblem-node[data-module-stage="conversazione"].wcp-current::after,
.wcp-emblem-node[data-module-stage="situazione"].wcp-current::after,
.wcp-emblem-node[data-module-stage="conversazione"].wcp-next::after,
.wcp-emblem-node[data-module-stage="situazione"].wcp-next::after {
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.18), 0 0 14px color-mix(in srgb, var(--wcp-node-ring) 60%, transparent);
}
.wcp-emblem-node.wcp-locked[data-module-stage="conversazione"]::after,
.wcp-emblem-node.wcp-locked[data-module-stage="situazione"]::after {
  filter: grayscale(0.32) saturate(0.85);
  opacity: 0.94;
}

/* ── The arch module look (2026-07-02) ─────────────────────────────────────
   From the lab archcard (design-lab/passeggiata-voce-addons.html): module nodes
   on the journey path are arch-topped portals — a painting seen through a Roman
   arch, softly squared at the base — instead of circular medallions. Decided
   "integrate into the path, not beside it". Story nodes keep their stage frame;
   the lexical/flashcards icon overlays adopt the same arch silhouette. */
#wcp-scene.wcp-scene-journey-modules .wcp-node-task img {
  width: clamp(62px, 9.2vw, 84px);
  height: clamp(84px, 12.6vw, 114px);
  border-radius: clamp(31px, 4.6vw, 42px) clamp(31px, 4.6vw, 42px) 12px 12px;
}
#wcp-scene.wcp-scene-journey-modules .wcp-node-task[data-activity-key="mastery"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-node-task[data-module-stage="mastery"] img {
  width: clamp(66px, 9.8vw, 90px);
  height: clamp(90px, 13.4vw, 122px);
  border-radius: clamp(33px, 4.9vw, 45px) clamp(33px, 4.9vw, 45px) 12px 12px;
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="lexical"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="flashcards"] img {
  border-radius: clamp(31px, 4.6vw, 42px) clamp(31px, 4.6vw, 42px) 12px 12px;
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="lexical"]::after,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="flashcards"]::after,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="conversazione"]::after,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="situazione"]::after {
  width: clamp(62px, 9.2vw, 84px);
  height: clamp(84px, 12.6vw, 114px);
  border-radius: clamp(31px, 4.6vw, 42px) clamp(31px, 4.6vw, 42px) 12px 12px;
  background-position: center 40%, center, center;
  background-size: 46%, 100%, 100%;
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="conversazione"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="situazione"] img {
  border-radius: clamp(31px, 4.6vw, 42px) clamp(31px, 4.6vw, 42px) 12px 12px;
}

/* Stage silhouettes. The server-authored stage already arrives as
 * data-module-stage; making it visible prevents a path of identical arches. */
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="introduce"] img {
  border-radius: 50%;
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="reinforce"] img {
  border-radius: 24% 38% 24% 38%;
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="expand"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="grammatica"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="lexical"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="lexical"]::after {
  border-radius: 0;
  clip-path: polygon(50% 0, 96% 27%, 82% 88%, 50% 100%, 18% 88%, 4% 27%);
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="apply"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="scena"] img {
  border-radius: 50% 50% 13% 13%;
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="challenge"] img {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="vary"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="ascolto"] img {
  border-radius: 50% / 34%;
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="speech"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="voce"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="conversazione"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="conversazione"]::after {
  border-radius: 50% 50% 50% 14%;
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="flashcards"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="flashcards"]::after {
  border-radius: 18%;
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="situazione"] img,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="situazione"]::after,
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node[data-module-stage="prova"] img {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 90% 50%, 100% 62%, 100% 100%, 0 100%, 0 62%, 10% 50%, 0 38%);
}
#wcp-scene.wcp-scene-journey-modules .wcp-node-task[data-module-stage="mastery"] img {
  border-radius: 0;
  clip-path: polygon(50% 0, 92% 16%, 86% 70%, 50% 100%, 14% 70%, 8% 16%);
}
@media (prefers-reduced-motion: reduce) {
  .wcp-node-story-path-reading .wcp-story-emblem-frame { transition: none; }
}

/* In-progress path: finished nodes stay readable but calm — no celebration gold or motion */
.wcp-scene-stage-active .wcp-emblem-node.wcp-done img,
.wcp-scene-stage-future .wcp-emblem-node.wcp-done img {
  border-color: color-mix(in srgb, var(--green) 78%, #6a7a6c);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.14),
    0 0 0 8px rgba(238,234,226,0.78),
    0 0 0 15px rgba(148,158,146,0.14);
  animation: none;
  filter: drop-shadow(0 2px 10px rgba(74, 54, 26, 0.08));
}
.wcp-emblem-node.wcp-next img {
  border-color: var(--wcp-node-ring);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.18),
    0 0 0 10px rgba(250,247,240,0.84),
    0 0 0 20px color-mix(in srgb, var(--wcp-node-glow) 82%, transparent);
}
.wcp-emblem-node.wcp-current img {
  border-color: var(--accent);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.22),
    0 0 0 10px rgba(247,227,178,0.84),
    0 0 0 22px rgba(193,154,87,0.32),
    0 0 28px rgba(193,154,87,0.16);
}

@keyframes wcp-gold-shimmer {
  0%, 100% {
    box-shadow:
      0 10px 28px rgba(0,0,0,0.24),
      0 0 0 10px rgba(255,242,200,0.94),
      0 0 0 21px rgba(214,175,97,0.42),
      0 0 60px rgba(214,175,97,0.40),
      0 0 96px rgba(255,226,150,0.20);
  }
  35% {
    box-shadow:
      0 10px 28px rgba(0,0,0,0.24),
      0 0 0 12px rgba(255,248,218,0.98),
      0 0 0 24px rgba(232,193,112,0.58),
      0 0 76px rgba(232,193,112,0.56),
      0 0 118px rgba(255,236,176,0.34);
  }
  55% {
    box-shadow:
      0 10px 28px rgba(0,0,0,0.24),
      0 0 0 9px rgba(255,245,214,0.96),
      0 0 0 18px rgba(255,230,156,0.34),
      0 0 40px rgba(255,242,196,0.74),
      0 0 130px rgba(255,247,222,0.28);
  }
}

@keyframes wcp-gold-sparkle {
  0%, 100% {
    opacity: 0.08;
    transform: translate(-50%, -50%) scale(0.72);
    filter: blur(0.55px);
  }
  11% {
    opacity: 0.14;
    transform: translate(-50%, -50%) scale(0.76);
  }
  18% {
    opacity: 0.64;
    transform: translate(-50%, -50%) scale(0.96);
    filter: blur(0);
  }
  24% {
    opacity: 0.16;
    transform: translate(-50%, -50%) scale(0.8);
  }
  49% {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(0.74);
    filter: blur(0.4px);
  }
  58% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1.02);
    filter: blur(0);
  }
  66% {
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(0.82);
  }
  83% {
    opacity: 0.46;
    transform: translate(-50%, -50%) scale(0.9);
    filter: blur(0.2px);
  }
}

@keyframes wcp-ring-sparkle {
  0%, 100% {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(0.86);
  }
  16% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.9);
  }
  27% {
    opacity: 0.52;
    transform: translate(-50%, -50%) scale(1.01);
  }
  36% {
    opacity: 0.16;
    transform: translate(-50%, -50%) scale(0.88);
  }
  63% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(1.03);
  }
  72% {
    opacity: 0.14;
    transform: translate(-50%, -50%) scale(0.87);
  }
  88% {
    opacity: 0.34;
    transform: translate(-50%, -50%) scale(0.93);
  }
}

@keyframes wcp-path-lantern {
  0%, 100% {
    opacity: 0.76;
    filter: drop-shadow(0 0 18px rgba(248,242,228,0.22)) drop-shadow(0 0 42px rgba(255,247,222,0.12));
  }
  28% {
    opacity: 0.9;
    filter: drop-shadow(0 0 24px rgba(255,246,218,0.28)) drop-shadow(0 0 56px rgba(255,247,222,0.18));
  }
  56% {
    opacity: 0.82;
    filter: drop-shadow(0 0 21px rgba(255,236,176,0.24)) drop-shadow(0 0 48px rgba(255,240,196,0.14));
  }
  82% {
    opacity: 0.94;
    filter: drop-shadow(0 0 28px rgba(255,247,222,0.30)) drop-shadow(0 0 64px rgba(255,247,222,0.20));
  }
}

@keyframes wcp-node-twinkle {
  0%, 100% {
    opacity: 0;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.7) rotate(-10deg);
    filter: blur(0.65px);
  }
  9% {
    opacity: 0;
  }
  14% {
    opacity: 0.94;
    transform: translate(var(--spark-x), var(--spark-y)) scale(1.12) rotate(5deg);
    filter: blur(0.06px);
  }
  23% {
    opacity: 0.32;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.86) rotate(-4deg);
    filter: blur(0.24px);
  }
  37% {
    opacity: 0.82;
    transform: translate(var(--spark-x), var(--spark-y)) scale(1.06) rotate(3deg);
    filter: blur(0.1px);
  }
  48% {
    opacity: 0.18;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.78) rotate(-2deg);
    filter: blur(0.35px);
  }
  61% {
    opacity: 0.68;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.98) rotate(2deg);
    filter: blur(0.12px);
  }
}

@keyframes wcp-node-twinkle-history {
  0%, 100% {
    opacity: 0;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.68) rotate(-10deg);
    filter: blur(0.45px);
  }
  11% {
    opacity: 0;
  }
  16% {
    opacity: 0.88;
    transform: translate(var(--spark-x), var(--spark-y)) scale(1.12) rotate(6deg);
    filter: blur(0);
  }
  28% {
    opacity: 0.34;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.86) rotate(-4deg);
    filter: blur(0.16px);
  }
  41% {
    opacity: 0.72;
    transform: translate(var(--spark-x), var(--spark-y)) scale(1.08) rotate(4deg);
    filter: blur(0.08px);
  }
  54% {
    opacity: 0.2;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.78) rotate(-3deg);
    filter: blur(0.32px);
  }
  67% {
    opacity: 0.62;
    transform: translate(var(--spark-x), var(--spark-y)) scale(1.02) rotate(2deg);
    filter: blur(0.1px);
  }
}

@keyframes wcp-water-idle {
  0%, 100% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
  }
  22% {
    transform: translate(-50%, -50%) translate(0.42px, -1.05px) rotate(0.09deg);
  }
  42% {
    transform: translate(-50%, -50%) translate(-0.48px, 0.38px) rotate(-0.07deg);
  }
  62% {
    transform: translate(-50%, -50%) translate(0.32px, 0.95px) rotate(0.05deg);
  }
  82% {
    transform: translate(-50%, -50%) translate(-0.35px, -0.42px) rotate(-0.04deg);
  }
}

@keyframes wcp-water-idle-history {
  0%, 100% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
  }
  18% {
    transform: translate(-50%, -50%) translate(1.45px, -1.75px) rotate(0.18deg);
  }
  38% {
    transform: translate(-50%, -50%) translate(-1.55px, 1.15px) rotate(-0.14deg);
  }
  58% {
    transform: translate(-50%, -50%) translate(1.25px, 1.85px) rotate(0.12deg);
  }
  78% {
    transform: translate(-50%, -50%) translate(-1.35px, -1.05px) rotate(-0.1deg);
  }
}

@keyframes wcp-route-bloom {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  16% {
    opacity: 0;
    transform: scale(1);
  }
  19% {
    opacity: var(--bloom-opacity, 0.28);
    transform: scale(1.02);
  }
  22% {
    opacity: calc(var(--bloom-opacity, 0.28) * 0.16);
    transform: scale(1.01);
  }
}

@keyframes wcp-route-bloom-history {
  0%, 100% {
    opacity: 0;
    transform: scale(0.96);
  }
  14% {
    opacity: 0;
    transform: scale(0.97);
  }
  18% {
    opacity: var(--bloom-opacity, 0.28);
    transform: scale(1.06);
  }
  24% {
    opacity: calc(var(--bloom-opacity, 0.28) * 0.22);
    transform: scale(1.02);
  }
  30% {
    opacity: calc(var(--bloom-opacity, 0.28) * 0.45);
    transform: scale(1.04);
  }
}

@keyframes wcp-route-flow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -30;
  }
}

.wcp-scene-stage-completed:not(.wcp-scene-journey-modules) .wcp-emblem-node.wcp-done img,
.wcp-scene-stage-completed.wcp-scene-journey-present-complete .wcp-emblem-node.wcp-done img {
  box-shadow:
    0 10px 28px rgba(0,0,0,0.24),
    0 0 0 10px rgba(255,242,200,0.94),
    0 0 0 21px rgba(214,175,97,0.42),
    0 0 60px rgba(214,175,97,0.40),
    0 0 96px rgba(255,226,150,0.20);
  animation: wcp-gold-shimmer 1.85s ease-in-out infinite;
}

.wcp-scene-stage-completed.wcp-scene-journey-history-celebrate:not(.wcp-scene-journey-present-complete) .wcp-emblem-node.wcp-done img {
  border-color: color-mix(in srgb, var(--green) 78%, #6a7a6c);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.14),
    0 0 0 8px rgba(238,234,226,0.78),
    0 0 0 15px rgba(148,158,146,0.14);
  animation: none;
  filter: drop-shadow(0 2px 10px rgba(74, 54, 26, 0.08));
}

.wcp-scene-stage-completed.wcp-scene-journey-modules:not(.wcp-scene-journey-history-celebrate):not(.wcp-scene-journey-present-complete) .wcp-emblem-node.wcp-done img {
  border-color: color-mix(in srgb, var(--green) 78%, #6a7a6c);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.14),
    0 0 0 8px rgba(238,234,226,0.78),
    0 0 0 15px rgba(148,158,146,0.14);
  animation: none;
  filter: drop-shadow(0 2px 10px rgba(74, 54, 26, 0.08));
}

/* Present arc celebration — gold wins over generic stage-active dimming. */
#wcp-scene.wcp-scene-journey-present-complete.wcp-scene-stage-completed .wcp-emblem-node.wcp-done {
  opacity: 1 !important;
}
#wcp-scene.wcp-scene-journey-present-complete.wcp-scene-stage-completed .wcp-emblem-node.wcp-done img {
  box-shadow:
    0 10px 28px rgba(0,0,0,0.24),
    0 0 0 10px rgba(255,242,200,0.94),
    0 0 0 21px rgba(214,175,97,0.42),
    0 0 60px rgba(214,175,97,0.40),
    0 0 96px rgba(255,226,150,0.20);
  animation: wcp-gold-shimmer 1.85s ease-in-out infinite;
  filter: saturate(1.1) brightness(1.05) drop-shadow(0 2px 12px rgba(120, 82, 20, 0.18));
}

/* Earlier arc in timeline: calmer emblems (no duplicate “current” celebration read). */
#wcp-scene.wcp-scene-journey-history-celebrate.wcp-scene-stage-completed:not(.wcp-scene-journey-present-complete) .wcp-emblem-node.wcp-done {
  opacity: 0.94 !important;
}

.wcp-scene-stage-completed .wcp-emblem-node {
  z-index: 3;
  overflow: visible;
}

.wcp-scene-stage-completed .wcp-emblem-node:not(.wcp-node-story)::before {
  content: none;
}

.wcp-scene-stage-completed .wcp-emblem-node:not(.wcp-node-story):not([data-module-stage="lexical"]):not([data-module-stage="flashcards"])::after {
  /* Lexical/Flashcards badges are identity markers, not celebration decor — keep them. */
  content: none;
}

.wcp-node-sparkle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--spark-size, 6px);
  height: var(--spark-size, 6px);
  margin-left: calc(var(--spark-size, 6px) / -2);
  margin-top: calc(var(--spark-size, 6px) / -2);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,253,242,0.98) 0%, rgba(255,253,242,0.98) 38%, rgba(255,243,202,0.82) 56%, transparent 72%);
  box-shadow:
    0 0 8px rgba(255,247,222,0.48),
    0 0 18px rgba(255,230,156,0.28);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--spark-x), var(--spark-y)) scale(0.72);
  animation: wcp-node-twinkle var(--spark-duration, 2.4s) ease-in-out var(--spark-delay, 0s) infinite;
}

.wcp-scene-stage-completed .wcp-node-sparkle {
  box-shadow:
    0 0 12px rgba(255,247,222,0.62),
    0 0 28px rgba(255,224,150,0.45),
    0 0 48px rgba(255,236,190,0.26);
}

.wcp-scene-journey-present-complete .wcp-node-sparkle {
  animation-name: wcp-node-twinkle-history;
  mix-blend-mode: normal;
  z-index: 14;
  box-shadow:
    0 0 10px rgba(255, 252, 236, 0.55),
    0 0 22px rgba(255, 228, 158, 0.38),
    0 0 38px rgba(255, 236, 190, 0.26);
}

.wcp-scene-journey-history-celebrate:not(.wcp-scene-journey-present-complete) .wcp-node-sparkle {
  animation-name: wcp-node-twinkle;
  mix-blend-mode: screen;
  z-index: 6;
  box-shadow:
    0 0 6px rgba(255, 247, 222, 0.38),
    0 0 14px rgba(255, 224, 150, 0.22);
}

.wcp-node-sparkle::before,
.wcp-node-sparkle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255,250,226,0.94);
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

.wcp-node-sparkle::before {
  width: 1.5px;
  height: calc(var(--spark-size, 6px) + 3px);
}

.wcp-node-sparkle::after {
  width: calc(var(--spark-size, 6px) + 3px);
  height: 1.5px;
}

.wcp-scene-stage-completed .wcp-node-story {
  z-index: 4;
}

.wcp-node-honors {
  position: absolute;
  inset: -18px -18px -10px;
  pointer-events: none;
  opacity: 0;
  animation: wcp-node-honors-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s forwards;
}

.wcp-node-honor,
.wcp-node-column,
.wcp-node-crown {
  position: absolute;
  display: block;
  filter: drop-shadow(0 5px 12px rgba(74, 52, 10, 0.16));
}

.wcp-node-column {
  top: 12px;
  width: 18px;
  height: 82px;
  opacity: 0.38;
}

.wcp-node-column-left {
  left: -2px;
}

.wcp-node-column-right {
  right: -2px;
}

.wcp-node-honor {
  top: 10px;
  width: 40px;
  height: 68px;
  opacity: 0.92;
}

.wcp-node-honor-left {
  left: 2px;
  transform: rotate(-9deg);
}

.wcp-node-honor-right {
  right: 2px;
  transform: rotate(9deg);
}

.wcp-node-honor svg,
.wcp-node-column svg,
.wcp-node-crown svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wcp-node-honor path,
.wcp-node-column path,
.wcp-node-crown path,
.wcp-node-crown circle {
  fill: none;
  stroke: rgba(198, 153, 62, 0.9);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wcp-node-honor path:first-child {
  stroke: rgba(126, 102, 30, 0.52);
  stroke-width: 2.8;
}

.wcp-node-column path {
  stroke: rgba(154, 120, 42, 0.42);
  stroke-width: 1.7;
}

.wcp-node-column path:nth-child(3),
.wcp-node-column path:nth-child(4) {
  stroke: rgba(126, 102, 30, 0.34);
  stroke-width: 1.9;
}

.wcp-node-crown {
  left: 50%;
  top: -14px;
  width: 48px;
  height: 26px;
  transform: translateX(-50%);
}

.wcp-node-crown path:first-child {
  stroke: rgba(208, 166, 76, 0.96);
  stroke-width: 2.6;
}

.wcp-node-crown path:nth-child(2) {
  stroke: rgba(160, 118, 34, 0.72);
  stroke-width: 2;
}

.wcp-node-crown circle {
  fill: rgba(255, 247, 214, 0.92);
  stroke-width: 1.6;
}

#wcp-scene.wcp-scene-journey-history-celebrate .wcp-node-honor path,
#wcp-scene.wcp-scene-journey-history-celebrate .wcp-node-column path,
#wcp-scene.wcp-scene-journey-present-complete .wcp-node-honor path,
#wcp-scene.wcp-scene-journey-present-complete .wcp-node-column path {
  stroke: rgba(255, 244, 214, 0.96);
  filter: drop-shadow(0 0 5px rgba(255, 214, 130, 0.55));
}
#wcp-scene.wcp-scene-journey-history-celebrate .wcp-node-crown path,
#wcp-scene.wcp-scene-journey-present-complete .wcp-node-crown path {
  stroke: rgba(255, 236, 188, 0.98);
  filter: drop-shadow(0 0 6px rgba(255, 200, 90, 0.45));
}
#wcp-scene.wcp-scene-journey-history-celebrate .wcp-node-column,
#wcp-scene.wcp-scene-journey-present-complete .wcp-node-column {
  opacity: 0.72;
}

@keyframes wcp-node-honors-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ── Module task UI: baseline “reading” (larger controls) — layout-specific below overrides this — */
#module-overlay[data-module-layout="reading"] .study-input {
  font-size: 1rem;
  line-height: 1.35;
  padding: 0.52rem 0.78rem;
  border-radius: 10px;
  min-height: unset;
}

#module-overlay[data-module-layout="reading"] .study-btn {
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.88rem 1.35rem;
  min-height: 3.05rem;
  border-radius: 14px;
}

#module-overlay[data-module-layout="reading"] .module-ex-translate-label {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

#module-overlay[data-module-layout="reading"] .module-ex-translate-source {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-style: italic;
  line-height: 1.5;
}

#module-overlay[data-module-layout="reading"] .module-ex-hint-subtle {
  font-size: 0.9rem;
}

#module-overlay[data-module-layout="reading"] .module-ex-cloze-instruction {
  font-size: 0.8rem;
  margin-bottom: 0.6rem;
}

#module-overlay[data-module-layout="reading"] .module-overlay-cloze-sentence {
  font-size: clamp(1.25rem, 2.7vw, 1.7rem);
  line-height: 1.5;
  margin: 0.4rem 0 1rem;
}

#module-overlay[data-module-layout="reading"] .module-mcq-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.9rem 1rem;
  font-size: 1.05rem;
  line-height: 1.35;
  min-height: 3.1rem;
  border-radius: 14px;
}

#module-overlay[data-module-layout="reading"] .module-word-chip {
  font-size: 1.02rem;
  padding: 0.58rem 0.95rem;
  min-height: 2.7rem;
}

#module-overlay[data-module-layout="reading"] .module-ex-translate-task {
  padding: 1.2rem 1.25rem 1.3rem;
}

#module-overlay[data-module-layout="reading"] .module-overlay-mcq-grid {
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
@media (min-width: 540px) {
  #module-overlay[data-module-layout="reading"] .module-overlay-mcq-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Fallback when attribute missing (shouldn’t happen while open): same as reading */
.module-overlay .study-input {
  /* Design Lab Parity — identical to landing-dl-widgets.css ms-input */
  font-family: var(--dl-serif, "Playfair Display", Georgia, serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  padding: 1.1rem 1.3rem;
  border-radius: 8px;
  min-height: 3.8rem;
  background: #fffdf8;
  border: 1.5px solid var(--dl-rule, #c9b89a);
  color: var(--dl-ink, var(--ds-ink));
  width: 100%;
  display: block;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.module-overlay .study-input:focus {
  background: #fffcf7;
  border-color: var(--dl-rose, #d97757);
  border-width: 2px;
  box-shadow: 0 0 0 4px rgba(217, 119, 87, 0.1);
  outline: none;
}

.module-overlay .study-input::placeholder {
  font-family: var(--dl-sans, "Inter", system-ui, sans-serif);
  font-style: italic;
  color: rgba(26, 23, 20, 0.45);
  font-size: 1.05rem;
}

/* Primary button (Send, Submit) — Rose accent like landing page */
.module-overlay .study-btn {
  font-family: var(--dl-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem 1.6rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.module-overlay .study-btn.primary {
  background: var(--dl-rose, #d97757);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(217, 119, 87, 0.25);
}

.module-overlay .study-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(217, 119, 87, 0.35);
  background: color-mix(in srgb, var(--dl-rose, #d97757) 90%, #000);
}

/* Soft/ghost button — Paper background with rose text */
.module-overlay .study-btn.soft {
  background: #fffaf0;
  color: var(--dl-rose, #d97757);
  border: 1px solid var(--dl-rule, #c9b89a);
}

.module-overlay .study-btn.soft:hover {
  background: rgba(217, 119, 87, 0.08);
  border-color: var(--dl-rose, #d97757);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Speech feedback cards — Design Lab pf-card parity
 * Exact same styling as landing-dl-widgets.css pitch analyzer
 * ──────────────────────────────────────────────────────────────────────── */
.module-overlay .speech-feedback-card,
.module-overlay .chat-speech-feedback-wrap .speech-feedback-card {
  background: rgba(255, 250, 240, 0.86);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid var(--dl-rule-soft, rgba(201, 184, 154, 0.45));
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(20, 18, 14, 0.12);
  padding: 1.8rem 2rem 2rem;
  margin: 1.5rem 0;
}

.module-overlay .speech-feedback-card h2,
.module-overlay .speech-feedback-card .pf-card > h2 {
  font-family: var(--dl-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.55);
  margin: 0 0 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.module-overlay .speaking-pronun-panel {
  background: rgba(255, 250, 240, 0.75);
  backdrop-filter: blur(1px);
  border: 1px solid var(--dl-rule-soft, rgba(201, 184, 154, 0.45));
  border-radius: 14px;
  padding: 1.5rem 1.8rem;
  margin: 1.2rem 0;
}

.module-overlay .speaking-pronun-row {
  background: rgba(255, 252, 248, 0.9);
  border: 1px dashed var(--dl-rule-soft, rgba(201, 184, 154, 0.45));
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin: 0.8rem 0;
}

.module-overlay .speaking-pronun-word {
  background: rgba(255, 255, 252, 0.82);
  border-color: rgba(184, 146, 42, 0.16);
  border-radius: 10px;
  padding: 0.5rem 0.7rem 0.6rem;
}

.module-overlay .speaking-pronun-word--matched {
  background: rgba(74, 138, 126, 0.14);
  border-color: rgba(74, 138, 126, 0.32);
}

.module-overlay .speaking-pronun-word--near {
  background: rgba(184, 146, 42, 0.16);
  border-color: rgba(184, 146, 42, 0.36);
}

.module-overlay .speaking-pronun-syll {
  font-size: 1.05rem;
}

.module-overlay .speaking-pronun-syll.is-stressed {
  font-size: 1.2rem;
  background: rgba(217, 119, 87, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
}
.module-overlay .module-overlay-mcq-grid {
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
@media (min-width: 540px) {
  .module-overlay .module-overlay-mcq-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Duo: let task column use width (reading column is already constrained) */
.module-overlay-modal--duo .module-overlay-content {
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Task UI — production uses only data-module-layout="reading" (see app.js).
   ═══════════════════════════════════════════════════════════════════════════ */

#module-overlay[data-module-layout="reading"] .study-input:focus {
  outline: 2px solid color-mix(in srgb, var(--mod-accent, var(--ds-gold)) 55%, transparent);
  border-color: color-mix(in srgb, var(--mod-accent, var(--ds-gold)) 45%, var(--border));
}

/* ── Path loading overlay (personalizing your path) ─────────────── */
/* path-loading-overlay: reskinned 2026-05-25 to match the app's primary
 * .loading-overlay (dark-luxe with cream/gold), replacing the old warm-paper
 * brown chrome that read as a separate, off-brand loader on story entry. */
.path-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 38%, rgba(184,146,42,0.16) 0%, rgba(184,146,42,0.04) 20%, rgba(14,10,7,0.68) 56%, rgba(8,6,4,0.88) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  /* visibility:hidden when idle — a resting opacity:0 layer with a full-screen
   * backdrop-filter otherwise stays in the compositor and taxes every repaint
   * (typing jank, especially Safari). */
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
  pointer-events: none;
}
.path-loading-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease;
  pointer-events: auto;
}
.path-loading-overlay.is-leaving {
  opacity: 0;
}
.path-loading-overlay .ploading-canvas {
  position: relative;
  width: min(90vw, 680px);
  max-height: min(82vh, 760px);
  padding: 2.4rem 2.2rem 2rem;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(24,18,13,0.84), rgba(17,12,9,0.74));
  border: 1px solid rgba(255,243,220,0.16);
  box-shadow: 0 26px 68px rgba(0,0,0,0.34);
  text-align: center;
  color: rgba(255,244,226,0.92);
  font-family: "Inter", system-ui, sans-serif;
  overflow: auto;
  transform: translateY(8px);
  transition: transform 320ms ease;
}
.path-loading-overlay.is-visible .ploading-canvas {
  transform: translateY(0);
}
.path-loading-overlay .ploading-stamp {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,235,198,0.74);
  margin-bottom: 0.6rem;
}
.path-loading-overlay .ploading-orbit {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 0.8rem;
}
.path-loading-overlay .ploading-orbit::before,
.path-loading-overlay .ploading-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(220,184,103,0.32);
  animation: ploading-orbit-spin 4.2s linear infinite;
}
.path-loading-overlay .ploading-orbit::before {
  inset: 8px;
  border-style: dashed;
}
.path-loading-overlay .ploading-orbit::after {
  inset: 22px;
  border: 2px solid rgba(220,184,103,0.88);
  border-top-color: transparent;
  border-right-color: transparent;
  animation-duration: 1.6s;
}
.path-loading-overlay .ploading-orbit-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(220,184,103,0.88);
  box-shadow: 0 0 12px rgba(220,184,103,0.55);
  top: 50%;
  left: 50%;
  margin: -4px;
  animation: ploading-orbit-dot 2.8s ease-in-out infinite;
}
.path-loading-overlay .ploading-orbit-dot:nth-child(1) {
  animation-delay: 0s;
}
.path-loading-overlay .ploading-orbit-dot:nth-child(2) {
  animation-delay: 0.9s;
  background: rgba(255,210,140,0.92);
  box-shadow: 0 0 12px rgba(255,210,140,0.5);
}
.path-loading-overlay .ploading-orbit-dot:nth-child(3) {
  animation-delay: 1.8s;
  background: rgba(255,248,238,0.92);
  box-shadow: 0 0 12px rgba(255,248,238,0.45);
}
@keyframes ploading-orbit-spin {
  to { transform: rotate(360deg); }
}
@keyframes ploading-orbit-dot {
  0%   { transform: translate(28px, 0) scale(1); }
  25%  { transform: translate(0, 28px) scale(1.1); }
  50%  { transform: translate(-28px, 0) scale(1); }
  75%  { transform: translate(0, -28px) scale(0.9); }
  100% { transform: translate(28px, 0) scale(1); }
}
.path-loading-overlay .ploading-title {
  margin: 0 0 0.5rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  font-weight: 600;
  color: rgba(255,248,238,0.96);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.path-loading-overlay .ploading-step {
  margin: 0 0 0.9rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,235,198,0.74);
  min-height: 1rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.path-loading-overlay .ploading-step.is-fade {
  opacity: 1;
  transform: translateY(0);
}
.path-loading-overlay .ploading-quote {
  margin: 1rem auto 0.4rem;
  max-width: 42ch;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: rgba(255,244,226,0.82);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.path-loading-overlay .ploading-quote blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 380ms ease;
}
.path-loading-overlay .ploading-quote blockquote.is-visible {
  opacity: 1;
}
.path-loading-overlay .ploading-quote figcaption {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,230,190,0.68);
  opacity: 0;
  transition: opacity 380ms ease 80ms;
}
.path-loading-overlay .ploading-quote figcaption.is-visible {
  opacity: 1;
}
.path-loading-overlay .ploading-fact {
  margin: 1rem auto 0.4rem;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255,244,226,0.82);
  opacity: 0;
  transition: opacity 380ms ease;
}
.path-loading-overlay .ploading-fact.is-visible {
  opacity: 1;
}
.path-loading-overlay .ploading-fact::before {
  content: attr(data-kicker) " · ";
  color: rgba(255,230,190,0.68);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.path-loading-overlay .ploading-progress {
  margin: 1.4rem auto 0;
  width: 200px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,239,213,0.10);
  overflow: hidden;
}
.path-loading-overlay .ploading-progress-fill {
  display: block;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, rgba(220,184,103,0.92), rgba(255,210,140,0.92), rgba(255,248,238,0.85), rgba(220,184,103,0.92));
  background-size: 300% 100%;
  border-radius: inherit;
  animation: ploading-progress-flow 1.8s linear infinite;
}
/* hidden="true" and visibility:hidden stop paint, not CSS animation clocks.
 * The retired loader's four infinite animations were still scheduling frames
 * beneath the story composer: key-to-frame p95 160–182 ms. Stop them whenever
 * the overlay is not actually visible; adding .is-visible starts them normally
 * on the next real path transition (measured hidden-loader bisection: 16 ms). */
.path-loading-overlay:not(.is-visible) .ploading-orbit::before,
.path-loading-overlay:not(.is-visible) .ploading-orbit::after,
.path-loading-overlay:not(.is-visible) .ploading-orbit-dot,
.path-loading-overlay:not(.is-visible) .ploading-progress-fill {
  animation: none;
}

/* ── Module-unlock UX clarity ────────────────────────────────────
 * Goal: make it obvious which node is the next thing to do, and
 * make locked nodes feel locked (so dead clicks don't read as bugs).
 */
.wcp-emblem-node.wcp-locked {
  cursor: not-allowed;
}
.wcp-emblem-node.wcp-locked img {
  filter: grayscale(0.6) saturate(0.5) brightness(0.92);
  opacity: 0.78;
}
.wcp-emblem-node.wcp-current {
  cursor: pointer;
}
.wcp-emblem-node.wcp-current::before {
  content: "Start here";
  position: absolute;
  top: -1.6rem;
  left: 50%;
  transform: translate(-50%, 0);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #d97757, #b8893b);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(217, 119, 87, 0.42);
  pointer-events: none;
  white-space: nowrap;
  z-index: 8;
  animation: wcp-start-here-bob 2.4s ease-in-out infinite;
}
/* Large center story CTA already anchors attention — hide duplicate path “Start here” pill + module badge. */
.wcp-scene-journey-story-hero .wcp-emblem-node.wcp-current::before {
  display: none;
}
.wcp-scene-journey-story-hero .wcp-node-position-badge {
  display: none;
}
html[lang="no"] .wcp-emblem-node.wcp-current::before,
html[lang="nb"] .wcp-emblem-node.wcp-current::before {
  content: "Start her";
}
@keyframes wcp-start-here-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -3px); }
}

/* Adaptive journey: skip floating “Start here” pills — ring/glow + lock states carry affordance. */
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node.wcp-current::before {
  display: none !important;
  content: none !important;
}
#wcp-scene.wcp-scene-journey-modules .wcp-node-story-journey-lead .wcp-story-emblem-frame {
  width: min(52vw, 252px);
  height: min(66vw, 312px);
  max-height: min(46vh, 312px);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    0 0 0 2px rgba(255, 248, 226, 0.96),
    0 0 0 11px rgba(193, 154, 87, 0.24),
    0 0 48px rgba(217, 155, 92, 0.38);
  filter: drop-shadow(0 10px 26px rgba(20, 14, 8, 0.42));
}
/* Gate + left story node: scale emblem to read as the same “segment” as the rail card. */
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero .wcp-node-story-journey-lead .wcp-story-emblem-frame {
  width: min(26vw, 198px);
  height: min(34vw, 248px);
  max-height: min(40vh, 248px);
}
/* Softer, larger breathing halo behind the lead story (replaces default pulse scale on this host). */
#wcp-scene.wcp-scene-journey-modules .wcp-node-story-journey-lead::before {
  clip-path: none;
  border-radius: 50%;
  width: min(78vw, 360px);
  height: min(92vw, 420px);
  margin: calc(min(92vw, 420px) / -2) 0 0 calc(min(78vw, 360px) / -2);
  filter: blur(22px);
  opacity: 0.5;
  animation: wcp-story-lead-halo 3.2s ease-in-out infinite;
}
#wcp-scene.wcp-scene-journey-modules.wcp-scene-journey-story-hero .wcp-node-story-journey-lead::before {
  width: min(44vw, 260px);
  height: min(52vw, 300px);
  margin: calc(min(52vw, 300px) / -2) 0 0 calc(min(44vw, 260px) / -2);
  opacity: 0.44;
}
@keyframes wcp-story-lead-halo {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.42;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.62;
  }
}
@media (prefers-reduced-motion: reduce) {
  #wcp-scene.wcp-scene-journey-modules .wcp-node-story-journey-lead::before {
    animation: none;
    opacity: 0.48;
  }
}
#wcp-scene.wcp-scene-journey-modules .wcp-node-story-journey-lead {
  z-index: 9;
}

/* Present arc: locked modules ahead read as muted / monochrome vs the living story lead. */
#wcp-scene.wcp-scene-journey-modules.wcp-scene-stage-active .wcp-emblem-node.wcp-node-task.wcp-locked img {
  filter: grayscale(1) saturate(0) brightness(0.72) contrast(0.9);
  opacity: 0.88;
}
.wcp-node-position-badge--story {
  font-weight: 800;
  letter-spacing: 0.04em;
  border-color: rgba(158, 122, 62, 0.55);
}
.wcp-emblem-node.wcp-shake {
  animation: wcp-shake-x 0.42s ease;
}
@keyframes wcp-shake-x {
  0%, 100% { transform: translate(0, 0); }
  18%      { transform: translate(-4px, 0); }
  38%      { transform: translate(4px, 0); }
  58%      { transform: translate(-3px, 0); }
  78%      { transform: translate(3px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wcp-emblem-node.wcp-shake { animation: none; }
  .wcp-emblem-node.wcp-current::before { animation: none; }
}
.wcp-emblem-node .wcp-lock-tip {
  position: absolute;
  top: -2.4rem;
  left: 50%;
  transform: translate(-50%, 4px);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.78rem;
  white-space: nowrap;
  padding: 0.42rem 0.7rem;
  border-radius: 8px;
  background: rgba(28, 24, 20, 0.94);
  color: #f7f1e6;
  border: 1px solid rgba(207, 138, 58, 0.5);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 12;
}
.wcp-emblem-node .wcp-lock-tip.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.wcp-emblem-node .wcp-lock-tip::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: rgba(28, 24, 20, 0.94);
  border-right: 1px solid rgba(207, 138, 58, 0.5);
  border-bottom: 1px solid rgba(207, 138, 58, 0.5);
  transform: rotate(45deg);
}
@keyframes ploading-progress-flow {
  0%   { background-position: 0% 50%; transform: translateX(-100%); }
  50%  { background-position: 50% 50%; transform: translateX(60%); }
  100% { background-position: 100% 50%; transform: translateX(220%); }
}
@media (max-width: 600px) {
  .path-loading-overlay .ploading-canvas {
    padding: 1.8rem 1.4rem 1.6rem;
  }
  .path-loading-overlay .ploading-title {
    font-size: 1.3rem;
  }
}

/* ── Rush-mode flashcards: deck stack + always-on rating chips ──── */

.module-overlay-flash--rush {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-5, 1.25rem) var(--space-5, 1.25rem) var(--space-4, 1rem);
  border-radius: var(--radius-3, 18px);
  background: var(--surface-paper, rgba(255, 250, 240, 0.94));
  color: var(--ink, inherit);
  border: 1px solid var(--surface-rule, rgba(60, 45, 30, 0.18));
  box-shadow: var(--surface-shadow, 0 12px 32px rgba(20, 18, 14, 0.1));
  font-family: var(--font-body, inherit);
  transform: translateZ(0);
}

/* Journey preface flash: strip outer manuscript “card” so one surface reads as a single floating tile */
#module-dyn-root .module-overlay-card.surface.module-card.module-overlay-flash--embedded-charm {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

#module-dyn-root .module-overlay-card.surface.module-card.module-overlay-flash--embedded-charm::before {
  display: none !important;
}

#module-dyn-root .module-overlay-flash--embedded-charm .module-flash-meta {
  display: none;
}

#module-dyn-root .module-overlay-flash--embedded-charm .module-flash-surface {
  min-height: clamp(220px, 36vh, 400px);
  padding: 2.5rem 2rem;
  border: none;
  border-radius: 24px;
  background: linear-gradient(
    155deg,
    rgba(255, 253, 248, 0.98) 0%,
    rgba(255, 246, 232, 0.94) 48%,
    rgba(252, 248, 240, 0.92) 100%
  );
  box-shadow:
    0 20px 48px rgba(20, 16, 10, 0.12),
    0 0 0 1px rgba(217, 119, 87, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

#module-dyn-root .module-overlay-flash--embedded-charm.is-revealed .module-flash-surface {
  cursor: pointer;
}

#module-dyn-root .module-overlay-flash--embedded-charm .module-flash-hint {
  font-style: normal;
  font-size: 0.9rem;
  color: rgba(42, 31, 18, 0.55);
  margin-top: 0.15rem;
}

#module-dyn-root .module-overlay-flash--embedded-charm .module-overlay-front,
#module-dyn-root .module-overlay-flash--embedded-charm .module-overlay-back {
  font-family: var(--dl-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.85rem);
  font-weight: 500;
  line-height: 1.45;
}

html.dark #module-dyn-root .module-overlay-card.surface.module-card.module-overlay-flash--embedded-charm {
  background: transparent;
  box-shadow: none;
}

/* C1 (2026-05-27): flashcards FORCE warm-paper backdrop even in dark mode.
 * Previous dark-mode rule inherited charcoal grey from `--surface-paper`,
 * which made flashcards read as "CRAP and DARK" per the user. The whole app
 * may be dark, but flashcards remain a luminous reading surface — like the
 * lab canon, like La Voce's warm-light bias. !important wins over the late
 * `--surface-paper` override in `views-tokens.css`. */
html.dark #module-dyn-root .module-overlay-flash--embedded-charm .module-flash-surface,
html.dark .module-overlay-flash--rush {
  background: linear-gradient(155deg, #fbf6ec 0%, #f4ecd4 100%) !important;
  color: #2a2118 !important;
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(184, 137, 59, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
html.dark #module-dyn-root .module-overlay-flash--embedded-charm .module-overlay-front,
html.dark #module-dyn-root .module-overlay-flash--embedded-charm .module-overlay-back,
html.dark .module-overlay-flash--rush .module-overlay-front,
html.dark .module-overlay-flash--rush .module-overlay-back {
  color: #2a2118 !important;
}
html.dark #module-dyn-root .module-overlay-flash--embedded-charm .module-flash-hint,
html.dark .module-overlay-flash--rush .module-flash-hint {
  color: rgba(42, 31, 18, 0.62) !important;
}
/* The Italian word on the front: Playfair italic for a literary feel. */
.module-overlay-flash--rush .module-overlay-front,
#module-dyn-root .module-overlay-flash--embedded-charm .module-overlay-front {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 600;
}

.module-flash-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.module-flash-ghost {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-3, 18px);
  background: var(--surface-paper-soft, rgba(255, 250, 240, 0.66));
  border: 1px solid var(--surface-rule, rgba(60, 45, 30, 0.18));
  box-shadow: var(--surface-shadow-soft, 0 4px 14px rgba(20, 18, 14, 0.06));
  transition: transform var(--motion-base, 200ms) ease, opacity var(--motion-base, 200ms) ease;
}

.module-flash-ghost--1 {
  transform: translateY(8px) scale(0.985);
  opacity: 0.85;
  z-index: 1;
}

.module-flash-ghost--2 {
  transform: translateY(16px) scale(0.965);
  opacity: 0.7;
  z-index: 0;
}

.module-flash-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft, rgba(42, 31, 18, 0.62));
}

.module-flash-counter,
.module-flash-batch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.module-flash-batch {
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--surface-rule, rgba(60, 45, 30, 0.18));
  background: var(--accent-tint, rgba(184, 146, 42, 0.12));
}

.module-flash-hint {
  margin: 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--ink-soft, rgba(42, 31, 18, 0.62));
  font-style: italic;
  min-height: 1.25em;
}

.module-flash-hint:empty {
  min-height: 0;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Flashcard surface — Design Lab ms-canvas parity
 * Much larger, more spacious cards matching landing manuscript style
 * ──────────────────────────────────────────────────────────────────────── */
.module-overlay-flash--rush .module-flash-surface {
  min-height: clamp(280px, 42vh, 480px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 3rem;
  border: 1px solid var(--dl-rule-soft, rgba(201, 184, 154, 0.45));
  border-radius: 14px;
  background: rgba(255, 250, 240, 0.86);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 24px 60px rgba(20, 18, 14, 0.16);
  transition: background var(--motion-base, 200ms) ease, border-color var(--motion-base, 200ms) ease, box-shadow var(--motion-base, 200ms) ease;
}

.module-overlay-flash--rush .module-flash-surface:hover {
  border-color: var(--dl-rose, #d97757);
  background: rgba(255, 252, 248, 0.92);
  box-shadow: 0 28px 68px rgba(20, 18, 14, 0.2);
}

.module-overlay-flash--rush.is-revealed .module-flash-surface {
  cursor: default;
}

.module-overlay-flash--rush .module-overlay-front {
  font-family: var(--dl-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(2.4rem, 5.5vw, 3.5rem);
  line-height: 1.3;
  color: var(--dl-ink, var(--ds-ink));
}

.module-overlay-flash--rush .module-overlay-back {
  font-family: var(--dl-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  line-height: 1.3;
  color: var(--dl-rose, #d97757);
  margin-top: 1rem;
}

.module-overlay-flash--rush .module-overlay-back-label {
  font-family: var(--dl-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(26, 23, 20, 0.55);
  display: block;
  margin-bottom: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Rating chip row — Design Lab button parity
 * Larger, more tappable chips matching landing page button style
 * ──────────────────────────────────────────────────────────────────────── */
.module-flash-rating-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  margin-top: 1.75rem;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.module-flash-chip {
  appearance: none;
  border: 1px solid var(--dl-rule, #c9b89a);
  background: #fffaf0;
  color: var(--dl-ink, var(--ds-ink));
  font-family: var(--dl-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 1.2rem 1.5rem;
  border-radius: 10px;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 11;
  box-shadow: 0 4px 12px rgba(20, 18, 14, 0.08);
  transition:
    transform var(--motion-fast, 120ms) ease,
    border-color var(--motion-base, 200ms) ease,
    background var(--motion-base, 200ms) ease,
    box-shadow var(--motion-base, 200ms) ease,
    color var(--motion-base, 200ms) ease;
}

.module-flash-chip--soft {
  color: rgba(26, 23, 20, 0.6);
  background: rgba(255, 250, 240, 0.7);
}

.module-flash-chip:hover {
  transform: translateY(-2px);
  border-color: var(--dl-rose, #d97757);
  background: rgba(217, 119, 87, 0.06);
  box-shadow: 0 8px 20px rgba(217, 119, 87, 0.12);
}

.module-flash-chip:focus-visible {
  outline: 2px solid var(--dl-rose, #d97757);
  outline-offset: 2px;
}

.module-flash-chip.is-tapped {
  transform: scale(0.96);
  background: rgba(217, 119, 87, 0.12);
  border-color: var(--dl-rose, #d97757);
}

.module-flash-chip--ok {
  color: var(--dl-success, #2f8f6a);
  border-color: rgba(47, 143, 106, 0.35);
  background: rgba(47, 143, 106, 0.06);
}

.module-flash-chip--ok:hover {
  background: rgba(47, 143, 106, 0.1);
  border-color: rgba(47, 143, 106, 0.55);
  box-shadow: 0 8px 20px rgba(47, 143, 106, 0.14);
}

.module-flash-chip--warn {
  color: var(--dl-warn, #cf8a3a);
}

/* Round-break card */
.module-overlay-flash--break {
  text-align: center;
}

.module-flash-break-title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  margin: 0 0 var(--space-3, 0.75rem);
}

.module-flash-break-body {
  margin: 0 auto var(--space-4, 1rem);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft, rgba(42, 31, 18, 0.78));
  max-width: 36ch;
}

/* Grammar intro card (pre-drill) */
.module-overlay-intro-lesson .module-intro-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(42, 31, 18, 0.55);
  margin: 0 0 0.35rem;
}
.module-overlay-intro-lesson .module-intro-title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  margin: 0 0 0.75rem;
}
.module-overlay-intro-lesson .module-intro-pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(42, 31, 18, 0.88);
}
.module-overlay-intro-lesson .module-intro-compare {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(60, 45, 30, 0.2);
}
.module-overlay-intro-lesson .module-intro-compare-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(42, 31, 18, 0.55);
  margin: 0 0 0.35rem;
}
.module-overlay-intro-lesson .module-intro-compare-pre {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* ── Intro lesson v2 — a real teaching card (2026-06-24) ───────────────────── */
.intro-v2 { position: relative; padding-top: 1.6rem; }
.intro-v2 .intro-badge {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 50%; margin-bottom: 0.5rem; color: #fff;
  background: radial-gradient(circle at 38% 30%, #d8b24e, #b8922a 92%);
  box-shadow: 0 6px 16px rgba(120, 90, 40, 0.35);
}
.intro-v2 .intro-title-v2 {
  font-size: clamp(1.45rem, 3vw, 2rem); margin: 0 0 1rem; line-height: 1.15; color: #2a1f12;
}
.intro-v2 .intro-body-v2 { margin: 0; }
.intro-v2 .intro-para {
  margin: 0 0 0.7rem; font-size: 1.08rem; line-height: 1.6; color: rgba(42, 31, 18, 0.9);
  max-width: 58ch;
}
.intro-v2 .intro-egs {
  margin: 1.1rem 0 0.4rem; padding: 0.9rem 1rem; border-radius: 14px;
  background: rgba(47, 143, 134, 0.06); border: 1px solid rgba(47, 143, 134, 0.18);
}
.intro-v2 .intro-egs-label {
  margin: 0 0 0.55rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 800; color: #2a7d75;
}
.intro-v2 .intro-eg {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.35rem 0; border-top: 1px solid rgba(47, 143, 134, 0.12);
}
.intro-v2 .intro-eg:first-of-type { border-top: none; }
.intro-v2 .intro-eg-it {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; color: #2a7d75; font-weight: 600;
}
.intro-v2 .intro-eg-arrow { color: #b8922a; font-weight: 800; }
.intro-v2 .intro-eg-no { font-size: 1rem; color: rgba(42, 31, 18, 0.75); }
.intro-v2 .intro-core {
  margin: 0 0 0.9rem; font-size: 1.2rem; line-height: 1.55; color: rgba(42, 31, 18, 0.92);
  max-width: 56ch;
}
.intro-v2 .intro-more-toggle {
  border: none; background: none; cursor: pointer; padding: 0.3rem 0; margin: 0 0 0.2rem;
  font-size: 0.92rem; font-weight: 700; color: #2a7d75; letter-spacing: 0.01em;
}
.intro-v2 .intro-more-toggle:hover { text-decoration: underline; }
.intro-v2 .intro-more-caret { font-size: 0.8rem; }
.intro-v2 .intro-more { margin-top: 0.4rem; animation: intro-more-in 0.25s ease; }
@keyframes intro-more-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.intro-v2 .intro-actions-v2 { margin-top: 1.3rem; display: flex; align-items: center; gap: 1rem; }
.intro-v2 .intro-actions-v2 .study-btn.primary { font-size: 1.05rem; padding: 0.8rem 1.6rem; }
.intro-v2 .intro-skip-link {
  border: none; background: none; cursor: pointer; font-size: 0.9rem; font-weight: 600;
  color: rgba(42, 31, 18, 0.5); padding: 0.4rem;
}
.intro-v2 .intro-skip-link:hover { color: rgba(42, 31, 18, 0.8); text-decoration: underline; }
html.dark .intro-v2 .intro-core { color: rgba(250, 246, 239, 0.9); }
html.dark .intro-v2 .intro-more-toggle { color: #7fd6cb; }
html.dark .intro-v2 .intro-skip-link { color: rgba(250, 246, 239, 0.55); }
html.dark .intro-v2 .intro-title-v2 { color: #faf6ef; }
html.dark .intro-v2 .intro-para { color: rgba(250, 246, 239, 0.88); }
html.dark .intro-v2 .intro-eg-it { color: #7fd6cb; }
html.dark .intro-v2 .intro-eg-no { color: rgba(250, 246, 239, 0.72); }

/* Translation stretch: scaffold cue + visibly distinct card */
.module-tr-scaffold-strip {
  margin: 0 auto 0.75rem;
  max-width: 34rem;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  border: 1px dashed rgba(184, 137, 59, 0.38);
  background: rgba(255, 250, 240, 0.65);
}
.module-overlay-translate.module-overlay-translate--stretch.module-overlay-card {
  border-color: rgba(184, 137, 59, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 12px 32px rgba(42, 31, 18, 0.08);
}
.module-tr-scaffold-note {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.48;
  color: rgba(42, 31, 18, 0.82);
}

html.dark .module-tr-scaffold-strip {
  background: rgba(30, 24, 20, 0.55);
  border-color: rgba(201, 184, 154, 0.28);
}
html.dark .module-tr-scaffold-note {
  color: rgba(252, 248, 240, 0.78);
}

/* Path skeleton / degraded recovery */
.wcp-path-skeleton-retry-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  justify-content: center;
  align-items: center;
  margin: 1rem 0 0;
  padding: 0 0.5rem;
}
.wcp-path-degraded .wcp-week-main {
  font-weight: 600;
  font-size: clamp(0.88rem, 2.4vw, 1rem);
}

/* Ambient wayfinding: next / current nodes + first-resolve breath */
@keyframes wcp-next-edge-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 10px rgba(193, 154, 87, 0.35)) drop-shadow(0 0 22px rgba(217, 119, 87, 0.18));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(217, 119, 87, 0.55)) drop-shadow(0 0 32px rgba(255, 200, 120, 0.22));
  }
}
@keyframes wcp-current-halo-soft {
  0%,
  100% {
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.22),
      0 0 0 10px rgba(247, 227, 178, 0.84),
      0 0 0 22px rgba(193, 154, 87, 0.32),
      0 0 28px rgba(193, 154, 87, 0.16);
  }
  50% {
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.24),
      0 0 0 11px rgba(255, 242, 210, 0.9),
      0 0 0 26px rgba(217, 119, 87, 0.26),
      0 0 36px rgba(217, 119, 87, 0.22);
  }
}
.wcp-scene-stage-active .wcp-emblem-node.wcp-next img {
  animation: wcp-next-edge-glow 3.2s ease-in-out infinite;
}
.wcp-scene-stage-active .wcp-emblem-node.wcp-current img {
  animation: wcp-current-halo-soft 3.8s ease-in-out infinite;
}
#wcp-scene.wcp-scene-journey-modules .wcp-emblem-node.wcp-locked img {
  opacity: 0.62;
  transform: scale(0.97);
  transition: opacity 220ms ease, transform 220ms ease;
}
@keyframes wcp-path-ambient-resolve {
  from {
    opacity: 0.9;
    filter: saturate(0.94);
  }
  to {
    opacity: 1;
    filter: saturate(1);
  }
}
#wcp-scene.wcp-path-ambient-enter {
  animation: wcp-path-ambient-resolve 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .wcp-scene-stage-active .wcp-emblem-node.wcp-next img,
  .wcp-scene-stage-active .wcp-emblem-node.wcp-current img {
    animation: none;
  }
  #wcp-scene.wcp-path-ambient-enter {
    animation: none;
  }
}

/* Passeggiata: explicit recovery when path render completes without shards (parallel render supersession). */
.wcp-path-sync-retry {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(140, 90, 40, 0.45);
  background: rgba(255, 248, 232, 0.96);
  color: rgba(42, 32, 18, 0.95);
  box-shadow: 0 4px 18px rgba(42, 28, 12, 0.12);
}
.wcp-path-sync-retry__msg {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  line-height: 1.35;
}
.wcp-path-sync-retry__btn {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(120, 82, 28, 0.55);
  background: rgba(255, 255, 252, 0.98);
  color: rgba(32, 24, 14, 0.92);
  cursor: pointer;
}
.wcp-path-sync-retry__btn:hover {
  background: rgba(255, 236, 200, 0.98);
}


/* ─────────────────────────────────────────────────────────────────
   Module concept switcher (A/B/C in overlay header)
   ───────────────────────────────────────────────────────────────── */
.module-concept-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.module-concept-switcher__label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.45);
  margin-right: 0.1rem;
}
.module-concept-switcher__btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(201, 184, 154, 0.5);
  background: transparent;
  color: rgba(26, 23, 20, 0.55);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.module-concept-switcher__btn:hover {
  background: rgba(201, 184, 154, 0.15);
  border-color: rgba(201, 184, 154, 0.75);
  color: rgba(26, 23, 20, 0.9);
}
.module-concept-switcher__btn[aria-pressed="true"] {
  background: rgba(184, 146, 42, 0.12);
  border-color: rgba(184, 146, 42, 0.5);
  color: #8b6914;
}

/* ─────────────────────────────────────────────────────────────────
   Concept: Kart (A) — narrow centered card (default, minimal overrides)
   ───────────────────────────────────────────────────────────────── */
#module-overlay[data-module-feel="kart"] .module-overlay-modal {
  max-width: min(720px, 98vw);
  place-self: center;
  border-radius: 16px;
}

/* ─────────────────────────────────────────────────────────────────
   Concept: Studio (B) — wide, source left / answer right
   ───────────────────────────────────────────────────────────────── */
#module-overlay[data-module-feel="studio"] .module-overlay-modal {
  max-width: min(1200px, 98vw);
  width: min(1200px, 98vw);
  place-self: center;
  border-radius: 16px;
}

#module-overlay[data-module-feel="studio"] #module-dyn-root {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  min-height: 60vh;
}

#module-overlay[data-module-feel="studio"] .module-card-prompt-zone {
  position: sticky;
  top: 1rem;
  border-right: 1px solid rgba(201, 184, 154, 0.3);
  padding-right: 2rem;
}

#module-overlay[data-module-feel="studio"] .module-ex-translate-task {
  border: none;
  background: transparent;
  padding: 0;
}

#module-overlay[data-module-feel="studio"] .module-ex-translate-source {
  font-size: clamp(1.8rem, 2.5vw + 0.5rem, 2.8rem);
  color: var(--ds-ink);
}

#module-overlay[data-module-feel="studio"] .module-card-input-zone {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 0.5rem;
}

#module-overlay[data-module-feel="studio"] .study-input {
  font-size: 1.1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  min-height: 6rem;
}

/* ─────────────────────────────────────────────────────────────────
   Concept: Scena (C) — immersive, no card border, big text, input at bottom
   ───────────────────────────────────────────────────────────────── */
#module-overlay[data-module-feel="scena"] .module-overlay-modal {
  border-radius: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
}

#module-overlay[data-module-feel="scena"] .module-overlay-modal-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#module-overlay[data-module-feel="scena"] .module-overlay-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#module-overlay[data-module-feel="scena"] .module-overlay-work-core {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#module-overlay[data-module-feel="scena"] #module-overlay-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#module-overlay[data-module-feel="scena"] #module-dyn-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  padding: 4vh 1.5rem 2rem;
}

#module-overlay[data-module-feel="scena"] .module-card-prompt-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#module-overlay[data-module-feel="scena"] .module-ex-translate-task {
  border: none;
  background: transparent;
  padding: 0;
  text-align: center;
}

#module-overlay[data-module-feel="scena"] .module-ex-translate-label {
  justify-content: center;
  border-bottom: none;
  margin-bottom: 1.5rem;
  opacity: 0.55;
}

#module-overlay[data-module-feel="scena"] .module-ex-translate-source {
  font-size: clamp(2rem, 5vw + 0.5rem, 4rem);
  line-height: 1.35;
  color: var(--ds-ink);
}

#module-overlay[data-module-feel="scena"] .module-card-input-zone {
  border-top: 1px solid rgba(201, 184, 154, 0.3);
  padding-top: 1.5rem;
}

#module-overlay[data-module-feel="scena"] .study-input {
  font-size: 1.05rem;
  text-align: center;
  border-radius: 10px;
}

#module-overlay[data-module-feel="scena"] .module-overlay-actions {
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

#module-overlay[data-module-feel="scena"] .study-btn.primary {
  padding: 0.65rem 2.5rem;
  font-size: 1rem;
  border-radius: 999px;
}

/* ── F3 diff + F5 teacher note feedback ─────────────────────────── */
/* B3 (2026-05-27): your-answer-vs-correct is the HEADLINE of feedback, not a
 * secondary table. Single-column stack so each line breathes; large Playfair
 * italic for the user's answer (their voice) above a slightly more measured
 * model answer. The structured explanation drops below as smaller blocks. */
.fb-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
/* 2026-05-28 (Feedback Engine): the wrong-answer card is SIDE-BY-SIDE — the
 * learner's own answer (marked) on the left, the model Italian on the right.
 * Stacks on narrow screens. */
.fb-compare-grid--sidebyside {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 560px) {
  .fb-compare-grid--sidebyside { grid-template-columns: 1fr; }
}
/* Explanation region now sits BELOW the diff (reordered 2026-05-29): stamp +
 * always-on headline + the "Forklar mer" expander. */
.fb-expl-region { margin-top: 1rem; margin-bottom: 0; }
.fb-explain-details { margin-top: 0.6rem; }
.fb-explain-loading {
  padding: 0.45rem 0 0.2rem;
  font-size: 0.82rem;
  color: rgba(60, 45, 30, 0.5);
  font-style: italic;
}
/* gap #2 residual: the visible "still checking" pill on the feedback card. Quiet
   enough not to feel slow, present enough that the learner knows a fuller verdict
   is landing and pauses the extra beat instead of taking the instant card as final. */
.fb-explain-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: rgba(60, 45, 30, 0.62);
  font-style: italic;
}
.fb-explain-pending-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
  animation: fb-pending-pulse 1.1s ease-in-out infinite;
}
@keyframes fb-pending-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.82); }
  50% { opacity: 0.8; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fb-explain-pending-dot { animation: none; }
}
.fb-explain-summary {
  cursor: pointer;
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--diff-add, #2a7a3a);
  padding: 0.25rem 0;
  user-select: none;
}
.fb-explain-summary::marker { content: ""; }
.fb-explain-summary::-webkit-details-marker { display: none; }
.fb-explain-summary::before { content: "▸ "; }
.fb-explain-details[open] .fb-explain-summary::before { content: "▾ "; }
.fb-explain-pending {
  margin-top: 0.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft, #8a7a5a);
  opacity: 0.85;
}
.fb-explain-pending::before { content: "⋯ "; }
/* When the LLM upgrades a "wrong" to a valid variant, soften the whole card. */
.module-overlay-feedback.is-variant-upgraded { /* hook for tone; stamp already flips */ }
.fb-compare-cell {
  border: none;
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  background: rgba(42, 31, 18, 0.03);
}
.fb-compare-cell.yours {
  background: rgba(200, 75, 42, 0.06);
  border-left: 2px solid rgba(200, 75, 42, 0.3);
}
.fb-compare-cell.yours--ok {
  background: rgba(61, 143, 108, 0.06);
  border-left: 2px solid rgba(61, 143, 108, 0.3);
}
.fb-compare-label {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 0.2rem;
}
.fb-compare-cell.yours .fb-compare-label { color: var(--diff-del, #c84b2a); opacity: 1; }
.fb-compare-cell.ideal .fb-compare-label { color: var(--diff-add, #2a7a3a); opacity: 1; }
/* Win-state F3 card (2026-05-25): correct answers also get the compare grid,
 * but the "yours" cell wears the green/teacher tone instead of the rust/del tone
 * so the card reads as celebration of what you did, not red marks. */
.fb-compare-cell.yours--ok .fb-compare-label { color: var(--diff-add, #2a7a3a); opacity: 1; }
.fb-matched-chip {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.06rem 0.45rem;
  border-radius: 99px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(61, 143, 108, 0.14);
  color: #2d8060;
  vertical-align: 0.05em;
}
html.dark .fb-matched-chip { background: rgba(61, 143, 108, 0.22); color: #7ed4a8; }
.fb-matched-chip--semantic { background: rgba(184, 137, 59, 0.18); color: #8a640f; }
html.dark .fb-matched-chip--semantic { background: rgba(184, 137, 59, 0.28); color: #d9b76b; }
.fb-matched-chip--exact { background: rgba(61, 143, 108, 0.18); color: #2d8060; }
.fb-compare-text {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.45;
}
.fb-compare-cell.ideal .fb-compare-text {
  font-style: normal;
  font-size: 1.08rem;
  color: rgba(20, 16, 10, 0.92);
}
html.dark .fb-compare-cell.ideal .fb-compare-text { color: rgba(245, 236, 223, 0.94); }
@media (max-width: 480px) {
  .fb-compare-text { font-size: 1.04rem; }
  .fb-compare-cell.ideal .fb-compare-text { font-size: 0.98rem; }
}
.fb-diff-del {
  background: var(--diff-del-bg, rgba(194, 85, 63, 0.15));
  color: var(--diff-del, #c84b2a);
  text-decoration: line-through;
  text-decoration-color: rgba(200, 75, 42, 0.6);
  border-radius: 2px;
  padding: 0 1px;
}
.fb-diff-add {
  background: var(--diff-add-bg, rgba(61, 143, 108, 0.14));
  color: var(--diff-add, #2a7a3a);
  border-radius: 2px;
  padding: 0 1px;
}
/* Orthography near-miss (§5): right word, missed accent/apostrophe. Counted
   correct — a gentle gold underline, NOT a red strike. */
.fb-diff-near {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--accent-gold, #c79a3a);
  text-underline-offset: 3px;
  cursor: help;
  border-radius: 2px;
  padding: 0 1px;
}
.fb-diff-alt {
  background: rgba(180, 160, 100, 0.12);
  color: inherit;
  text-decoration: none;
  border-radius: 2px;
  padding: 0 1px;
}

/* F5 teacher note */
.fb-teacher-note { margin-top: 0.5rem; }
.fb-teacher-inner {
  background: var(--paper-warm, #fdf6e8);
  border: 1px solid rgba(201, 184, 154, 0.6);
  border-radius: 4px 10px 10px 4px;
  padding: 0.7rem 0.85rem 0.65rem 0.9rem;
  position: relative;
  box-shadow: 1px 2px 6px rgba(20, 18, 14, 0.06);
}
html.dark .fb-teacher-inner {
  background: #22201a;
  border-color: rgba(255, 255, 255, 0.1);
}
.fb-teacher-inner::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 4px 0 0 4px;
  background: var(--teacher-gold, #b8893b);
}
.fb-note-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.fb-note-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teacher-gold, #b8893b), var(--diff-del, #c84b2a));
  color: #fff;
  font-size: 0.65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fb-note-from { font-size: 0.73rem; font-weight: 600; color: var(--gold-deep, #8a640f); }
html.dark .fb-note-from { color: var(--gold, #c9a84c); }
.fb-streak-chip {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  background: rgba(61, 143, 108, 0.14);
  color: #2d8060;
  letter-spacing: 0.06em;
}
html.dark .fb-streak-chip { background: rgba(61,143,108,0.22); color: #7ed4a8; }
.fb-note-text {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-mid, rgba(42, 31, 18, 0.76));
}
html.dark .fb-note-text { color: rgba(255, 250, 242, 0.7); }
/* F5 second line — the warmer register/naturalness note (smart_feedback.teacher_note). */
.fb-note-extra {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(184, 137, 59, 0.28);
  font-style: italic;
  opacity: 0.92;
}
.fb-note-highlight {
  background: rgba(184, 137, 59, 0.14);
  border-radius: 2px; padding: 0 2px;
}

/* C2/C3 (2026-05-26) — structured 3-part explanation blocks rendered under
 * the F3 diff grid when the LLM returned a `structured` field. Mirrors the
 * lab F5 "Lærersnotat" treatment but with three labelled mini-blocks instead
 * of one. Quiet (display:none) when the structured field is absent. */
.fb-explain {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.85rem;
}
/* B1 (2026-05-27): visible note when the LLM was unavailable for a near-miss.
 * Renders a small subdued banner so the user understands the structured
 * explanation is degraded (key not set), not unshipped. */
.fb-explain-degraded {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: #8a640f;
  background: rgba(184, 137, 59, 0.10);
  border: 1px dashed rgba(184, 137, 59, 0.45);
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
}
.fb-explain-degraded__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #b8893b;
  flex: 0 0 auto;
}
html.dark .fb-explain-degraded {
  color: #f0c98c;
  background: rgba(232, 192, 110, 0.12);
  border-color: rgba(232, 192, 110, 0.40);
}

/* B4 (2026-05-27): per-token bullets — the bit-by-bit breakdown. Each item
 * has a mono token (the change), a rule line, and an optional L1 note. */
.fb-explain-block--bullets {
  border-left-color: var(--diff-add, #2a7a3a);
  background: rgba(61, 143, 108, 0.05);
}
.fb-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.fb-bullet {
  display: grid;
  grid-template-columns: minmax(min-content, 14rem) 1fr;
  gap: 0.25rem 0.85rem;
  padding: 0.45rem 0 0.4rem;
  border-bottom: 1px dashed rgba(184, 137, 59, 0.22);
}
.fb-bullet:last-child { border-bottom: none; padding-bottom: 0; }
.fb-bullet__tok {
  grid-row: 1 / span 2;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--diff-del, #c84b2a);
  align-self: start;
  padding-top: 0.1rem;
}
.fb-bullet__rule {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink, #2a2118);
}
.fb-bullet__l1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(60, 45, 30, 0.78);
  grid-column: 2;
}
html.dark .fb-bullet__rule { color: #f3e9d4; }
html.dark .fb-bullet__l1 { color: rgba(245, 236, 223, 0.78); }
@media (max-width: 520px) {
  .fb-bullet { grid-template-columns: 1fr; }
  .fb-bullet__tok { grid-row: 1; }
  .fb-bullet__l1 { grid-column: 1; }
}
.fb-explain-block {
  position: relative;
  padding: 0.6rem 0.8rem 0.55rem 1rem;
  background: rgba(184, 137, 59, 0.07);
  border-left: 3px solid rgba(184, 137, 59, 0.6);
  border-radius: 4px 10px 10px 4px;
}
.fb-explain-block--what  { border-left-color: var(--diff-del, #c84b2a); background: rgba(200, 75, 42, 0.06); }
.fb-explain-block--why   { border-left-color: var(--diff-add, #2a7a3a); background: rgba(61, 143, 108, 0.07); }
.fb-explain-block--trap  { border-left-color: #8e6824; background: rgba(184, 137, 59, 0.10); }
.fb-explain-label {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  color: #8a640f;
}
.fb-explain-block--what .fb-explain-label  { color: #b04022; }
.fb-explain-block--why  .fb-explain-label  { color: #2d8060; }
.fb-explain-block--trap .fb-explain-label  { color: #8e6824; }
.fb-explain-body {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-mid, rgba(42, 31, 18, 0.84));
}
html.dark .fb-explain-block { background: rgba(184, 137, 59, 0.14); }
html.dark .fb-explain-body { color: rgba(255, 250, 242, 0.84); }
/* 2026-05-30: the module card is forced warm-paper LIGHT (lab canon) even in the
 * app's dark theme — so the explain text must stay dark INSIDE the card or it goes
 * light-on-light. Higher specificity (#module-overlay) beats the html.dark rule above. */
html.dark #module-overlay .module-overlay-card .fb-explain-body,
html.dark #module-overlay .module-overlay-card .fb-bullet__rule,
html.dark #module-overlay .module-overlay-card .fb-bullet__l1,
html.dark #module-overlay .module-overlay-card .fb-explain-loading,
html.dark #module-overlay .module-overlay-card .fb-explain-pending {
  color: var(--ds-ink);
}

/* ---------- Module feedback: lab "Stempel og gå" (F1) — clean stamp + note ---------- */
.module-overlay-feedback .stamp-feedback {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  margin: 0 0 0.35rem;
}
.module-overlay-feedback .stamp-feedback.is-ok {
  background: rgba(61, 143, 108, 0.06);
  border: none;
  border-left: 2px solid rgba(61, 143, 108, 0.4);
}
.module-overlay-feedback .stamp-feedback.is-soft {
  background: rgba(217, 119, 87, 0.05);
  border: none;
  border-left: 2px solid rgba(217, 119, 87, 0.4);
}
/* Middle tier (2026-06-19): meaning understood, but a real grammar/register fix
   remains. Gold — neither a clean green pass nor a red miss. */
.module-overlay-feedback .stamp-feedback.is-understood {
  background: rgba(199, 154, 58, 0.07);
  border: none;
  border-left: 2px solid rgba(199, 154, 58, 0.45);
}
.module-overlay-feedback .is-understood .stamp-icon { background: rgba(199, 154, 58, 0.16); color: var(--accent-gold, #c79a3a); }
.module-overlay-feedback .is-understood .stamp-label { color: var(--accent-gold, #c79a3a); }
.module-overlay-feedback .stamp-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.module-overlay-feedback .is-ok .stamp-icon { background: rgba(61, 143, 108, 0.15); color: var(--lab-green, #3d8f6c); }
.module-overlay-feedback .is-soft .stamp-icon { background: rgba(217, 119, 87, 0.15); color: var(--lab-rust, #d97757); }
.module-overlay-feedback .stamp-body { flex: 1; }
.module-overlay-feedback .stamp-label {
  font-family: var(--lab-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.1rem;
}
.module-overlay-feedback .is-ok .stamp-label { color: var(--lab-green, #3d8f6c); }
.module-overlay-feedback .is-soft .stamp-label { color: var(--lab-rust, #d97757); }
.module-overlay-feedback .stamp-note {
  font-size: 0.88rem;
  color: var(--lab-ink-mid, rgba(42, 31, 18, 0.66));
  line-height: 1.4;
}
.module-overlay-feedback .stamp-note .fb-note-extra { margin-top: 0.35rem; opacity: 0.85; }

/* ── Kontrast feedback (2026-06-25): Du skrev / Naturlig / Regelen / Brukes når ── */
.fb-kontrast { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.15rem; }
.fb-k-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--accent-soft, rgba(184, 146, 42, 0.28));
  border-radius: 10px; overflow: hidden;
}
.fb-k-col { background: var(--surface-paper, #fdf8ef); padding: 0.5rem 0.65rem; display: flex; flex-direction: column; gap: 0.15rem; }
.fb-k-col.fb-k-you { background: rgba(154, 92, 63, 0.07); }
.fb-k-h {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lab-ink-faint, rgba(42, 31, 18, 0.5));
}
.fb-k-t { font-size: 0.96rem; line-height: 1.3; color: var(--lab-ink, #2a1f12); }
.fb-k-you .fb-k-t { color: #9a5c3f; }
.fb-k-rule {
  padding: 0.55rem 0.7rem; border-radius: 10px;
  background: var(--accent-tint, rgba(184, 146, 42, 0.1));
  border-left: 3px solid var(--accent, #b8922a);
  display: flex; flex-direction: column; gap: 0.2rem;
}
.fb-k-rule-t { font-size: 0.92rem; line-height: 1.45; color: var(--lab-ink, #2a1f12); }
/* R8 grammar routing: the "open the rule in the Regelbok" deep-link chip */
.fb-k-regel { display: inline-block; margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pass-gold, #9a7b1e); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity 0.15s; }
.fb-k-regel:hover { opacity: 0.72; }
html.dark .fb-k-regel { color: #d8b24a; }
.fb-k-usage { font-size: 0.82rem; font-style: italic; color: var(--lab-ink-mid, rgba(42, 31, 18, 0.66)); }
html.dark .fb-k-col { background: rgba(40, 32, 24, 0.6); }
html.dark .fb-k-col.fb-k-you { background: rgba(154, 92, 63, 0.18); }
html.dark .fb-k-t { color: #f3e8d4; }
html.dark .fb-k-rule { background: rgba(184, 146, 42, 0.14); }
html.dark .fb-k-rule-t { color: #f3e8d4; }

/* tutor_full (2026-07-02): per-difference verdicts + verb-form note */
.fb-k-diff {
  padding: 0.45rem 0.65rem; border-radius: 9px; font-size: 0.88rem; line-height: 1.45;
  border-left: 3px solid #c84b2a; background: rgba(200, 75, 42, 0.07);
  color: var(--lab-ink, #2a1f12);
}
.fb-k-diff--equivalent { border-left-color: #2a7a3a; background: rgba(42, 122, 58, 0.07); }
.fb-k-diff--context { border-left-color: #b8893b; background: rgba(184, 137, 59, 0.09); }
.fb-k-diff-v {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.56rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin-left: 0.35rem;
  color: #c84b2a;
}
.fb-k-diff--equivalent .fb-k-diff-v { color: #2a7a3a; }
.fb-k-diff--context .fb-k-diff-v { color: #b8893b; }
.fb-k-diff-why { margin-top: 0.15rem; }
.fb-k-diff-when { margin-top: 0.15rem; font-size: 0.8rem; color: var(--lab-ink-mid, rgba(42, 31, 18, 0.66)); }
.fb-k-verb {
  padding: 0.55rem 0.7rem; border-radius: 10px; font-size: 0.88rem; line-height: 1.5;
  background: rgba(42, 122, 58, 0.07); border: 1px solid rgba(42, 122, 58, 0.25);
  display: flex; flex-direction: column; gap: 0.2rem; color: var(--lab-ink, #2a1f12);
}
.fb-k-verb .fb-k-h { color: #2a7a3a; }
.fb-k-verb-form { font-weight: 600; }
html.dark .fb-k-diff, html.dark .fb-k-verb, html.dark .fb-k-diff-why { color: #f3e8d4; }
html.dark .fb-k-diff { background: rgba(200, 75, 42, 0.12); }
html.dark .fb-k-diff--equivalent { background: rgba(94, 200, 122, 0.1); }
html.dark .fb-k-diff--context { background: rgba(184, 137, 59, 0.12); }
html.dark .fb-k-verb { background: rgba(94, 200, 122, 0.08); border-color: rgba(94, 200, 122, 0.3); }
html.dark .fb-k-verb .fb-k-h { color: #5ec87a; }
/* Personal pattern line: "third time recently this pattern caught you" */
.fb-k-personal {
  padding: 0.5rem 0.7rem; border-radius: 10px; font-size: 0.86rem; line-height: 1.45;
  background: rgba(154, 92, 63, 0.09); border-left: 3px solid #9a5c3f;
  display: flex; flex-direction: column; gap: 0.15rem; color: var(--lab-ink, #2a1f12);
}
.fb-k-personal .fb-k-h { color: #9a5c3f; }
.fb-k-personal-ref { font-size: 0.78rem; font-style: italic; color: var(--lab-ink-mid, rgba(42, 31, 18, 0.66)); }
html.dark .fb-k-personal { background: rgba(154, 92, 63, 0.16); color: #f3e8d4; }

/* ── A2 (2026-05-28): Named visual style variants (?module-style=theater|editorial) ── */

/* THEATER: prompt as stage centrepiece — large italic Playfair, minimal chrome */
html[data-module-style="theater"] #module-overlay .module-overlay-card {
  padding: 3.5rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.6rem;
}
html[data-module-style="theater"] #module-overlay .module-card-prompt-zone {
  text-align: center;
}
html[data-module-style="theater"] #module-overlay .module-overlay-support,
html[data-module-style="theater"] #module-overlay .module-ex-translate-task p,
html[data-module-style="theater"] #module-overlay .module-ex-translate-task {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  color: var(--lab-ink, var(--ds-ink));
  text-align: center;
  border: 0;
  background: transparent;
  padding: 0;
}
html[data-module-style="theater"] #module-overlay .module-ex-translate-task .module-ex-task-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lab-rust, #d97757);
  font-style: normal;
  font-weight: 600;
  display: block;
  margin-top: 0.6rem;
}
html[data-module-style="theater"] #module-overlay .study-input {
  font-size: 1.25rem;
  border: 0;
  border-bottom: 2px solid rgba(201, 184, 154, 0.7);
  border-radius: 0;
  background: transparent;
  padding: 0.8rem 0.4rem;
}
html[data-module-style="theater"] #module-overlay .study-input:focus {
  border-bottom-color: var(--lab-rust, #d97757);
  box-shadow: none;
  outline: none;
}
html[data-module-style="theater"] #module-overlay #mod-ex-submit {
  background: transparent;
  color: var(--lab-rust, #d97757);
  border: 1px solid var(--lab-rust, #d97757);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.65rem 2rem;
  border-radius: 999px;
}
html[data-module-style="theater"] #module-overlay #mod-ex-submit:hover {
  background: var(--lab-rust, #d97757);
  color: #fff;
}

/* EDITORIAL: prominent kicker above prompt, clean reading-card feel */
html[data-module-style="editorial"] #module-overlay .module-overlay-card {
  padding: 2.6rem 3rem;
}
html[data-module-style="editorial"] #module-overlay .module-ex-translate-task .module-ex-task-label {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lab-rust, #d97757);
  font-weight: 600;
  margin-bottom: 0.65rem;
}
html[data-module-style="editorial"] #module-overlay .module-overlay-support,
html[data-module-style="editorial"] #module-overlay .module-ex-translate-task p {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.75rem, 2.4vw, 2.2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  color: var(--lab-ink, var(--ds-ink));
}
html[data-module-style="editorial"] #module-overlay .module-overlay-hint-words {
  font-size: 0.82rem;
  opacity: 0.75;
  margin-top: 0.4rem;
}
html[data-module-style="editorial"] #module-overlay .study-input {
  font-size: 1.15rem;
  min-height: 3.2rem;
}
html[data-module-style="editorial"] #module-overlay #mod-ex-submit {
  min-width: 9rem;
}

/* Tier 0 tutor brain — the learner-facing "why this now" card above exercises.
   A warm parchment card that explains the tutor's reasoning PROMINENTLY (WS6a). */
.module-tutor-why {
  /* Below the module now, and a prominent panel — this is the tutor's voice, not a
     footnote (owner 2026-06-10). */
  margin: 1.75rem auto 1rem;
  max-width: min(96vw, 60rem);
  padding: 1.5rem 1.8rem;
  border-left: 6px solid var(--accent, var(--ds-gold));
  background: linear-gradient(92deg, rgba(184, 146, 42, 0.12), rgba(184, 146, 42, 0.04));
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(100, 80, 30, 0.09);
}
.module-tutor-why__k {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent, var(--ds-gold));
  margin-bottom: 0.6rem;
}
.module-tutor-why__v {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  color: var(--ink, var(--ds-ink));
  font-size: 1.5rem;
  line-height: 1.5;
}
.module-tutor-why__src {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.68rem;
  font-style: italic;
  opacity: 0.65;
  color: var(--ink-soft, rgba(42, 31, 18, 0.55));
}
.module-tutor-why__src[data-src="fallback"] {
  opacity: 0.5;
}
html.dark .module-tutor-why {
  background: rgba(200, 170, 60, 0.07);
  border-left-color: var(--accent, #d4a83a);
}
html.dark .module-tutor-why__v { color: var(--ink, #f5ecdf); }
html.dark .module-tutor-why__k { color: var(--accent, #d4a83a); }

/* GRAMMATICA (2026-07-13) — the rule-first explanation card above the drills.
   Same parchment voice as the tutor-why panel; green accent = grammar (canon). */
.module-grammar-intro {
  margin: 1rem auto 1.25rem;
  max-width: min(96vw, 60rem);
  padding: 1.5rem 1.8rem;
  border-left: 6px solid var(--ds-green, #3d8f6c);
  background: linear-gradient(92deg, rgba(74, 124, 89, 0.10), rgba(74, 124, 89, 0.03));
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(40, 80, 50, 0.08);
}
.module-grammar-intro__k {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ds-green, #3d8f6c);
  margin-bottom: 0.6rem;
}
.module-grammar-intro__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.6rem;
  margin: 0 0 0.5rem;
  color: var(--ink, var(--ds-ink));
}
.module-grammar-intro__contrast {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink, var(--ds-ink));
  margin: 0 0 0.5rem;
}
.module-grammar-intro__prompt {
  font-size: 0.95rem;
  font-style: italic;
  opacity: 0.8;
  margin: 0 0 0.5rem;
}
.module-grammar-intro__link {
  font-size: 0.85rem;
  color: var(--ds-green, #3d8f6c);
  text-decoration: underline;
}
html.dark .module-grammar-intro {
  background: rgba(90, 150, 105, 0.08);
  border-left-color: #5aa585;
}
html.dark .module-grammar-intro__title,
html.dark .module-grammar-intro__contrast { color: var(--ink, #f5ecdf); }
html.dark .module-grammar-intro__k,
html.dark .module-grammar-intro__link { color: #5aa585; }
@media (prefers-reduced-motion: no-preference) {
  .module-tutor-why { animation: tutorWhyFade 0.5s ease both; }
}
@keyframes tutorWhyFade {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -- Encouragement: streak watercolor emergence ----------------------------- */
.module-encouragement-watercolor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url("/watercolor/2_Sargent_In-the-Luxembourg-Gardens_1879-scaled-e1747761407171-2048x1160.jpg")
    center / cover no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in;
  border-radius: inherit;
  mix-blend-mode: multiply;
}
html.dark .module-encouragement-watercolor {
  mix-blend-mode: soft-light;
}

/* Pulse animation on correct answer */
@keyframes encouragePulse {
  0%   { box-shadow: 0 0 0 0 rgba(120, 160, 80, 0.30); }
  50%  { box-shadow: 0 0 0 8px rgba(120, 160, 80, 0.08); }
  100% { box-shadow: 0 0 0 0 rgba(120, 160, 80, 0); }
}
.encouragement-pulse {
  animation: encouragePulse 0.6s ease-out;
}

/* Correct-answer card: warmer green tint on the feedback strip */
.module-overlay-feedback.is-correct {
  border-left: 3px solid rgba(100, 140, 60, 0.5);
}
/* Understood-but card (2026-06-19): meaning passed, grammar/register still to fix —
   gold strip, overrides the green when both classes are present. */
.module-overlay-feedback.is-understood {
  border-left: 3px solid rgba(199, 154, 58, 0.55);
}

/* -- Compressed module review ------------------------------------------------ */
.module-review-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.module-review-ring {
  --size: 3.4rem;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(
    rgba(100, 140, 60, 0.65) calc(var(--pct) * 1%),
    rgba(200, 190, 170, 0.25) 0
  );
  display: grid;
  place-items: center;
  position: relative;
}
.module-review-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--bg-card, #faf6ef);
}
html.dark .module-review-ring::before {
  background: var(--bg-card, #2a2520);
}
.module-review-pct {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink, var(--ds-ink));
}
.module-review-summary {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0;
  color: var(--ink, var(--ds-ink));
}
.module-review-perfect {
  font-size: 0.92rem;
  text-align: center;
  color: rgba(100, 140, 60, 0.85);
  font-style: italic;
  margin: 0.75rem 0;
}
.module-review-explainer {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft, rgba(42, 31, 18, 0.6));
  margin: 0.5rem 0 0.75rem;
}
.module-review-production-note {
  margin: 0.5rem 0 0.75rem;
  padding: 0.45rem 0.7rem;
  border-left: 3px solid var(--accent, var(--ds-gold));
  border-radius: 6px;
  background: rgba(184, 146, 42, 0.05);
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-mid, rgba(42, 31, 18, 0.74));
}
html.dark .module-review-production-note { background: rgba(200, 170, 60, 0.08); }
.module-review-mistakes {
  margin-top: 0.5rem;
}
.module-review-mistakes-title {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft, rgba(42, 31, 18, 0.5));
  margin: 0 0 0.4rem;
}
.module-review-mistake {
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(42, 31, 18, 0.08);
}
.module-review-mistake:last-child {
  border-bottom: none;
}
.module-review-prompt {
  font-size: 0.88rem;
  margin: 0 0 0.2rem;
}
.module-review-yours {
  font-size: 0.84rem;
  color: rgba(180, 70, 50, 0.75);
  margin: 0;
}
.module-review-correct {
  font-size: 0.84rem;
  color: rgba(100, 140, 60, 0.8);
  margin: 0;
}
.module-review-skipped {
  font-size: 0.84rem;
  color: var(--ink-soft, rgba(42, 31, 18, 0.5));
  font-style: italic;
  margin: 0;
}
.module-review-lesson-link {
  font-size: 0.82rem;
}

/* Skill movement chips on review screen */
.module-review-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.6rem;
}
.module-review-skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  background: rgba(42, 31, 18, 0.06);
  color: var(--ink, var(--ds-ink));
}
.module-review-skill-chip .skill-arrow {
  font-size: 0.7rem;
}
.module-review-skill-chip .skill-arrow.up {
  color: rgba(100, 140, 60, 0.8);
}
.module-review-skill-chip .skill-arrow.down {
  color: rgba(180, 70, 50, 0.6);
}
html.dark .module-review-skill-chip {
  background: rgba(250, 246, 240, 0.08);
  color: #faf6ef;
}

/* ── Lexical sentence builder ("Bygg fraser") ───────────────────────────────
   Added 2026-06-23. Warm-paper / gold accent to match La Passeggiata. */
.module-overlay-lexical .lexv-eyebrow {
  color: #b8922a;
  letter-spacing: 0.04em;
}
.module-overlay-lexical .lexv-instruction {
  margin: 0.2rem 0 0.7rem;
  font-weight: 600;
  font-size: 1.05rem;
}
/* The varied target meaning leads — large and quiet, the content is the hero. */
.module-overlay-lexical .lexv-target {
  margin: 0 0 1.1rem;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  background: rgba(184, 146, 42, 0.08);
  border: 1px dashed rgba(184, 146, 42, 0.28);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.3;
}
.module-overlay-lexical .lexv-target-label {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #b8922a;
  font-weight: 700;
}
/* Live "what you're building" line — the assembled Italian updates as you toggle. */
.lexv-built {
  min-height: 2.2rem;
  margin: 0 0 1rem;
  padding: 0.5rem 0.2rem 0.7rem;
  border-bottom: 2px solid rgba(47, 143, 134, 0.35);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem;
  line-height: 1.25;
  color: #2a7d75;
  transition: color 0.2s;
}
.lexv-built:empty::before {
  content: "…";
  color: rgba(74, 58, 24, 0.3);
}
.lexv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 0.4rem;
}
/* "Lego" blocks — big, tactile, content-forward. */
.lexv-chip {
  padding: 0.8rem 1.15rem;
  border-radius: 16px;
  border: none;
  background: linear-gradient(180deg, rgba(184, 146, 42, 0.22), rgba(184, 146, 42, 0.14));
  color: #4a3a18;
  font-size: 1.35rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(140, 108, 30, 0.32), 0 6px 14px rgba(120, 90, 30, 0.14);
  transition: opacity 0.22s, transform 0.14s, box-shadow 0.16s, filter 0.2s;
  animation: lexv-pop 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes lexv-pop { from { opacity: 0; transform: translateY(6px) scale(0.92); } }
.lexv-chip:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.04); }
.lexv-chip:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(140, 108, 30, 0.32); }
.lexv-chip.is-selected {
  background: linear-gradient(180deg, rgba(47, 143, 134, 0.26), rgba(47, 143, 134, 0.16));
  box-shadow: 0 3px 0 rgba(31, 94, 87, 0.4), 0 6px 14px rgba(31, 94, 87, 0.16);
}
.lexv-chip.is-removed {
  background: rgba(120, 110, 96, 0.08);
  color: rgba(74, 58, 24, 0.34);
  text-decoration: line-through;
  box-shadow: none;
  transform: scale(0.9);
  opacity: 0.55;
}
.lexv-chip:disabled { cursor: default; }

/* type mode — bigger boxes, the gloss chips hover above and the active ones light up */
.lexv-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: flex-end;
  margin-bottom: 0.4rem;
}
.lexv-box {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 7rem;
}
/* Select mode = one editable sentence: the words ARE the sentence; tapping a word
   removes it in place, so it's obvious that selection changes the sentence. */
.lexv-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin: 0.4rem 0 0.2rem;
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.5;
}
.lexv-word {
  border: none;
  background: rgba(47, 143, 134, 0.14);
  color: #2a3a30;
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.18s, color 0.2s, opacity 0.2s, transform 0.12s, text-decoration-color 0.2s;
}
.lexv-word.is-in:hover { background: rgba(47, 143, 134, 0.24); }
.lexv-word.is-out {
  background: transparent;
  color: rgba(74, 58, 24, 0.32);
  text-decoration: line-through;
  text-decoration-color: rgba(181, 83, 46, 0.7);
  opacity: 0.7;
}
.lexv-word:disabled { cursor: default; }

/* Type mode: the Norwegian meaning leads, big. */
.lexv-type-target {
  margin: 0.2rem 0 0.5rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  line-height: 1.25;
  color: #3a2c10;
}
.lexv-box-gloss {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2a7d75;
  padding-left: 0.2rem;
}
.lexv-box-input {
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 2px solid rgba(47, 143, 134, 0.5);
  background: rgba(255, 252, 245, 0.96);
  font-size: 1.35rem;
  font-weight: 600;
  min-width: 7rem;
  outline: none;
  box-shadow: 0 3px 0 rgba(31, 94, 87, 0.18);
  transition: box-shadow 0.16s, border-color 0.16s;
}
.lexv-box-input:focus {
  border-color: #2a7d75;
  box-shadow: 0 0 0 4px rgba(47, 143, 134, 0.2);
}
.lexv-box.is-grey { opacity: 0.5; }
.lexv-box-faded {
  display: inline-block;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 2px dashed rgba(120, 110, 96, 0.3);
  background: rgba(120, 110, 96, 0.06);
  color: rgba(74, 58, 24, 0.5);
  font-size: 1.35rem;
}
html.dark .module-overlay-lexical .lexv-chip {
  color: #faf6ef;
  background: rgba(184, 146, 42, 0.24);
}
html.dark .module-overlay-lexical .lexv-box-input {
  background: rgba(250, 246, 240, 0.1);
  color: #faf6ef;
}
html.dark .module-overlay-lexical .lexv-box-faded {
  color: rgba(250, 246, 240, 0.45);
}

/* ── Growing-sentence lexical builder ("Bygg setningen") ─────────────────────
   Translate a simple core, then layer on chunks one at a time — the page grows in
   place. (2026-06-24) */
.lexv-build .lxb-dots { display: flex; gap: 0.4rem; margin: 0.2rem 0 0.8rem; }
.lexv-build .lxb-dot {
  width: 0.55rem; height: 0.55rem; border-radius: 999px;
  background: rgba(184, 146, 42, 0.25);
  transition: background 0.25s, transform 0.25s;
}
.lexv-build .lxb-dot.is-done { background: #2a7d75; }
.lexv-build .lxb-dot.is-now { background: #b8922a; transform: scale(1.25); }
/* the growing sentence — the input lives INSIDE the line, where the new words attach */
.lexv-build .lxb-line {
  min-height: 2.8rem;
  margin: 0.3rem 0 1rem;
  padding: 0.35rem 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.85rem;
  line-height: 1.5;
  color: #2a7d75;
  border-bottom: 2px solid rgba(47, 143, 134, 0.22);
}
.lexv-build .lxb-have { color: #2a7d75; }
.lexv-build .lxb-slot {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem; font-weight: 600; color: #2a7d75;
  min-width: 5ch; padding: 0.05rem 0.5rem; vertical-align: baseline;
  border: none; border-bottom: 3px solid #b8922a;
  background: rgba(184, 146, 42, 0.1); outline: none; border-radius: 6px 6px 0 0;
}
.lexv-build .lxb-slot:focus { background: rgba(47, 143, 134, 0.14); border-bottom-color: #2a7d75; }
.lexv-build .lxb-restructure {
  margin: 0 0 0.4rem; font-size: 0.92rem; color: #8a6a30;
}
.lexv-build .lxb-restructure span { color: #2a7d75; font-style: italic; }
.lexv-build .lxb-new {
  background: linear-gradient(180deg, transparent 58%, rgba(47, 143, 134, 0.28) 58%);
  border-radius: 3px;
  animation: lxb-glow 0.7s ease;
}
@keyframes lxb-glow {
  from { background-color: rgba(47, 143, 134, 0.4); }
  to { background-color: transparent; }
}
.lexv-build .lxb-lead {
  margin: 0.2rem 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6a5630;
}
.lexv-build .lxb-fn {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(150deg, #36a59a, #2a7d75);
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
}
.lexv-build .lxb-no {
  margin: 0 0 0.9rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem;
  line-height: 1.3;
  color: #3a2c10;
}
.lexv-build .lxb-no .lxb-new {
  background: linear-gradient(180deg, transparent 58%, rgba(184, 146, 42, 0.3) 58%);
}
.lexv-build .lxb-fasit { margin: 0.6rem 0 0; font-size: 1.15rem; font-weight: 600; color: #b5532e; }
.lexv-build .lxb-fasit-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 800; color: #b5532e; margin-right: 0.4rem;
}
/* gap #6: the teaching line under a wrong build step — what the chunk means + its role. */
.lexv-build .lxb-why {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.86rem;
  font-weight: 500;
  font-style: italic;
  color: rgba(60, 45, 30, 0.66);
}
.lexv-build .lxb-why b { font-style: normal; font-weight: 700; color: rgba(60, 45, 30, 0.82); }
html.dark .lexv-build .lxb-why { color: rgba(250, 246, 239, 0.62); }
html.dark .lexv-build .lxb-why b { color: rgba(250, 246, 239, 0.85); }
html.dark .lexv-build .lxb-line, html.dark .lexv-build .lxb-have, html.dark .lexv-build .lxb-slot { color: #7fd6cb; }
html.dark .lexv-build .lxb-no { color: #faf6ef; }
html.dark .lexv-build .lxb-slot { background: rgba(250, 246, 240, 0.1); }

/* ── Derived task types (transform / scramble / gap / register / preposition) ─
   (2026-06-24) */
.dtv-card .dtv-eyebrow { color: #b8922a; }
.dtv-card .dtv-instr { margin: 0.2rem 0 0.7rem; font-size: 1.05rem; font-weight: 600; color: #6a5630; }
.dtv-card .dtv-instr.small { font-size: 0.92rem; margin-top: 0.9rem; }
.dtv-card .dtv-source {
  margin: 0 0 1rem; font-family: 'Playfair Display', Georgia, serif; font-size: 1.7rem;
  line-height: 1.3; color: #2a7d75;
}
.dtv-card .dtv-fn {
  display: inline-block; margin-left: 0.4rem; font-size: 0.78rem; font-weight: 800;
  color: #fff; background: linear-gradient(150deg, #c98a3a, #a86a22);
  padding: 0.12rem 0.6rem; border-radius: 999px; vertical-align: middle;
}
.dtv-card .dtv-before {
  margin: 0.2rem 0 0.9rem; padding: 0.6rem 0.9rem; border-radius: 12px;
  background: rgba(184, 146, 42, 0.08); border-left: 3px solid rgba(184, 146, 42, 0.5);
}
.dtv-card .dtv-before-label {
  display: inline-block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 800; color: #8a6a30; margin-right: 0.5rem;
}
.dtv-card .dtv-before-it {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; color: #6a5630;
}
.dtv-card .dtv-before-no { display: block; font-size: 0.9rem; color: #8a6a30; margin-top: 0.15rem; }
.dtv-card .dtv-target {
  margin: 0.1rem 0 0.9rem; font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.55rem; line-height: 1.3; color: #2a7d75;
}
html.dark .dtv-card .dtv-target { color: #7fd6cb; }
.dtv-card .dtv-input {
  display: block; width: min(560px, 92%); padding: 0.75rem 1rem; border-radius: 14px;
  border: 2px solid rgba(47, 143, 134, 0.5); background: rgba(255, 252, 245, 0.96);
  font-size: 1.4rem; font-weight: 600; outline: none; box-shadow: 0 3px 0 rgba(31, 94, 87, 0.16);
}
.dtv-card .dtv-input:focus { border-color: #2a7d75; box-shadow: 0 0 0 4px rgba(47, 143, 134, 0.2); }
/* gap fill */
.dtv-card .dtv-gap {
  margin: 0.4rem 0 1rem; font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem;
  line-height: 1.6; color: #3a2c10;
}
.dtv-card .dtv-gap-input {
  display: inline-block; width: 7.5rem; padding: 0.2rem 0.6rem; border: none;
  border-bottom: 3px solid #2a7d75; background: rgba(47, 143, 134, 0.08);
  font-size: 1.5rem; font-weight: 700; color: #2a7d75; text-align: center; outline: none;
  font-family: 'Playfair Display', Georgia, serif;
}
/* register dial */
.dtv-card .dtv-dial { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; }
.dtv-card .dtv-reg {
  font-weight: 800; font-size: 0.95rem; padding: 0.25rem 0.85rem; border-radius: 999px;
  background: rgba(184, 146, 42, 0.18); color: #8a6a30;
}
.dtv-card .dtv-reg.is-to { background: linear-gradient(150deg, #36a59a, #2a7d75); color: #fff; }
.dtv-card .dtv-arrow { color: #b8922a; font-weight: 800; }
/* preposition picker */
.dtv-card .dtv-prep-slot {
  display: inline-block; min-width: 2.4rem; padding: 0 0.5rem; border-bottom: 3px solid #b8922a;
  color: #b8922a; text-align: center;
}
.dtv-card .dtv-prep-opts { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0 0.4rem; }
.dtv-card .dtv-prep-opt {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; font-weight: 700;
  padding: 0.55rem 1.4rem; border-radius: 14px; border: 2px solid rgba(47, 143, 134, 0.4);
  background: rgba(255, 252, 245, 0.96); color: #2a7d75; cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
.dtv-card .dtv-prep-opt:hover { transform: translateY(-2px); }
.dtv-card .dtv-prep-opt.is-sel { background: linear-gradient(150deg, #36a59a, #2a7d75); color: #fff; border-color: transparent; }
/* scramble */
.dtv-card .dtv-scr-answer {
  min-height: 3rem; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem;
  margin: 0 0 0.8rem; border: 2px dashed rgba(47, 143, 134, 0.4); border-radius: 14px;
  background: rgba(47, 143, 134, 0.05);
}
.dtv-card .dtv-scr-pool { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.6rem; }
.dtv-card .dtv-scr-chip {
  text-align: left; padding: 0.6rem 0.9rem; border-radius: 12px; border: 1px solid rgba(184, 146, 42, 0.3);
  background: rgba(255, 252, 245, 0.96); font-size: 1.1rem; color: #3a2c10; cursor: pointer;
  font-family: 'Playfair Display', Georgia, serif;
}
.dtv-card .dtv-scr-chip:hover { border-color: #2a7d75; }
.dtv-card .dtv-scr-chip.is-placed { border-color: #2a7d75; background: rgba(47, 143, 134, 0.1); }
.dtv-card .dtv-scr-num {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: 0.6rem;
  border-radius: 50%; background: #2a7d75; color: #fff; font-size: 0.85rem; font-weight: 800;
  font-family: var(--font-ui, Inter, sans-serif);
}
html.dark .dtv-card .dtv-source, html.dark .dtv-card .dtv-prep-opt { color: #7fd6cb; }
html.dark .dtv-card .dtv-gap, html.dark .dtv-card .dtv-scr-chip { color: #faf6ef; }
html.dark .dtv-card .dtv-input { background: rgba(250, 246, 240, 0.1); color: #faf6ef; }

/* ── Vocab-expansion flashcards ("Flashkort") ───────────────────────────────
   Added 2026-06-23. Two-round browse / self-test runner. */
.vfc-card { text-align: center; }
.vfc-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  color: rgba(74, 58, 24, 0.6);
}
.vfc-round { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.vfc-count { margin-left: auto; }
.vfc-badge {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.vfc-badge--saved { background: rgba(184, 146, 42, 0.18); color: #8a6a14; }
.vfc-badge--new { background: rgba(58, 122, 90, 0.16); color: #2f6a4a; }
.vfc-front {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 1.2rem 0 0.6rem;
  color: #3a2c10;
}
.vfc-back, .vfc-prompt {
  font-size: 1.3rem;
  margin: 0.4rem 0 1rem;
  color: #4a3a18;
}
.vfc-prompt-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b8922a;
  font-weight: 700;
  margin: 0.6rem 0 0.2rem;
}
.vfc-answer { color: #2f6a4a; }
/* type-the-answer (round 2 escalation for seen cards) */
.vfc-typed .vfc-input {
  display: block;
  width: min(420px, 80%);
  margin: 0.4rem auto 0.2rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  border: 2px solid rgba(149, 96, 166, 0.5);
  background: rgba(255, 252, 245, 0.96);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  outline: none;
}
.vfc-typed .vfc-input:focus { border-color: #9560a6; box-shadow: 0 0 0 4px rgba(149, 96, 166, 0.2); }
.vfc-answer-line { margin: 0.7rem 0 0; font-size: 1.2rem; font-weight: 600; }
.vfc-answer-line.is-ok { color: #2f6a4a; }
.vfc-answer-line.is-wrong { color: #b5532e; }
.vfc-fasit-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 800; color: #9560a6; margin-right: 0.4rem;
}
html.dark .vfc-front { color: #faf6ef; }
html.dark .vfc-back, html.dark .vfc-prompt { color: rgba(250, 246, 240, 0.85); }
html.dark .vfc-head { color: rgba(250, 246, 240, 0.6); }
html.dark .vfc-typed .vfc-input { background: rgba(250, 246, 240, 0.1); color: #faf6ef; }

/* ── "Vask" — a faint watercolour wash on module cards (2026-06-24) ───────────
   A small, static (cheap) tint behind the content; the phrases/lexical builder
   gets an even lighter teal wash. Enables the previously-disabled ::before. */
.module-overlay-card::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(72% 56% at 10% -6%, rgba(47, 143, 134, 0.06), transparent 70%),
    radial-gradient(62% 50% at 106% 110%, rgba(184, 146, 42, 0.06), transparent 72%);
}
/* phrases / "Bygg setningen" — lighter, all-teal wash ("lett vask") */
.module-overlay-card.lexv-build::before {
  background:
    radial-gradient(78% 60% at 8% -8%, rgba(47, 143, 134, 0.045), transparent 72%),
    radial-gradient(60% 50% at 110% 112%, rgba(120, 160, 150, 0.035), transparent 75%);
}
html.dark .module-overlay-card::before {
  background:
    radial-gradient(72% 56% at 10% -6%, rgba(95, 200, 188, 0.06), transparent 70%),
    radial-gradient(62% 50% at 106% 110%, rgba(214, 184, 110, 0.05), transparent 72%);
}
html.dark .module-overlay-card.lexv-build::before {
  background: radial-gradient(78% 60% at 8% -8%, rgba(95, 200, 188, 0.05), transparent 73%);
}


/* ── Maestro path register (RETIRED 2026-07-03): the coin/edicola decoration is
   gone — the Maestro rungs are real modules on the path (scena / situazione).
   app.js clearMaestroPathDecor() still removes stale layers from live sessions. ── */

/* ─── scena — the Maestro scripted scene AS a journey module (2026-07-03) ─────
   Warm paper (module-card canon), never the cinema-dark of trunk chapters.
   The character speaks (audio chip + reveal segments), the learner answers on
   rails; the taccuino is the completion feedback. Runner: runScenaModule. */
.scn-card { --scn-accent: #b85e3f; display: flex; flex-direction: column; gap: 1rem; position: relative; overflow: hidden; }

/* ── Distinct chromes per module family (2026-07-06): a story scene and a survival
   kit must LOOK different from ordinary modules and from each other. The watercolor
   (already on the scene) becomes a faint backdrop; survival adds a field-checklist. */
.scn-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--scn-water, none);
  background-size: cover; background-position: center; opacity: 0;
}
.scn-card > * { position: relative; z-index: 1; }
.scn-card--story::before { opacity: 0.16; }
.scn-card--story { --scn-accent: #7a5a2a; }
.scn-card--survival::before { opacity: 0.10; filter: saturate(0.8); }
.scn-card--survival { --scn-accent: #b0562f; box-shadow: inset 0 3px 0 var(--scn-accent); }

.scn-kit {
  border: 1px solid rgba(176, 86, 47, 0.3); border-radius: 14px;
  background: rgba(255, 250, 242, 0.78); padding: 0.75rem 0.95rem;
}
.scn-kit-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 0.65rem; }
.scn-kit-k { font: 800 0.62rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--scn-accent); }
.scn-kit-m { font-family: "Playfair Display", Georgia, serif; font-size: 1.05rem; font-weight: 700; color: #241a10; }
.scn-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.scn-obj { display: grid; grid-template-columns: 1.25rem 1fr; align-items: start; gap: 0.55rem; }
.scn-obj-box { width: 1.05rem; height: 1.05rem; margin-top: 2px; border-radius: 5px; border: 2px solid rgba(120, 90, 50, 0.5); position: relative; transition: background .25s ease, border-color .25s ease; }
.scn-obj-t { font-size: 0.95rem; color: #2b2013; line-height: 1.3; }
.scn-obj-hint { grid-column: 2; font-size: 0.78rem; font-style: italic; color: rgba(80, 60, 35, 0.6); margin-top: 1px; }
.scn-obj.done .scn-obj-box { background: #5f8a4f; border-color: #5f8a4f; }
.scn-obj.done .scn-obj-box::after { content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.scn-obj.done .scn-obj-t { color: rgba(60, 45, 30, 0.5); text-decoration: line-through; text-decoration-color: rgba(95, 138, 79, 0.55); }
.scn-obj.done .scn-obj-hint { opacity: 0; }
.scn-obj.just-ticked { animation: scn-tick-pop 0.6s ease; }
@keyframes scn-tick-pop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .scn-obj.just-ticked { animation: none; } }
html.dark .scn-kit { background: rgba(30, 24, 16, 0.55); }
html.dark .scn-kit-m, html.dark .scn-obj-t { color: #faf6ef; }
/* P2d — Il Registro: the tone the Place expects (text-derived; the acoustic
   verdict on what the learner did comes later, ISA-gated). */
.scn-tono { display: flex; align-items: baseline; gap: 0.55rem; margin: 0.55rem 0 0.2rem; }
.scn-tono-k { font: 600 0.6rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--scn-accent); }
.scn-tono-v { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 0.98rem; color: #3a2c1b; }
html.dark .scn-tono-v { color: #ecdcc2; }
/* the speak-your-reply mic in the kit composer */
.scn-mic { padding: 0 0.7rem; min-width: 2.4rem; font-size: 1rem; }
.scn-mic.is-listening { color: #c0392b; border-color: #c0392b; animation: scn-mic-pulse 1.1s ease-in-out infinite; }
@keyframes scn-mic-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.35); } 50% { box-shadow: 0 0 0 6px rgba(192,57,43,0); } }
.scn-loc {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: 1.05rem; color: rgba(33, 25, 16, 0.6); margin: 0;
  border-bottom: 1px solid rgba(60, 45, 30, 0.12); padding-bottom: 0.6rem;
}
/* situazione (guidato) — the mission chip: the communicative goal, always visible */
.scn-mission {
  display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap;
  background: rgba(184, 146, 42, 0.09); border: 1px solid rgba(184, 146, 42, 0.35);
  border-radius: 12px; padding: 0.5rem 0.8rem;
}
.scn-mission-k {
  font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.56rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #8a5a20;
}
.scn-mission-no { font-family: "Playfair Display", Georgia, serif; font-size: 1rem; font-weight: 600; color: #211910; }
.scn-mission-it { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 0.95rem; color: rgba(33, 25, 16, 0.6); }
.scn-mission.done { background: rgba(95, 138, 79, 0.1); border-color: rgba(95, 138, 79, 0.45); }
.scn-mission.done .scn-mission-k { color: #5f8a4f; }
.scn-mission.done .scn-mission-k::after { content: " · fatto"; letter-spacing: 0.08em; }
/* the character's scaffold hint (guidato) — quiet, under the composer */
.scn-scaffold {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: 0.95rem; color: rgba(138, 90, 32, 0.85);
  border-left: 2px dotted rgba(138, 90, 32, 0.45); padding-left: 0.6rem;
}
.scn-thread { display: flex; flex-direction: column; gap: 0.9rem; }
.scn-line { max-width: 58ch; }
.scn-who {
  font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--scn-accent);
  margin-bottom: 0.28rem;
}
.scn-it {
  font-family: "Playfair Display", Georgia, serif; font-weight: 500;
  font-size: 1.32rem; line-height: 1.35; color: #211910;
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
}
.scn-no {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: 1rem; color: rgba(33, 25, 16, 0.55); margin-top: 0.22rem;
}
.scn-you {
  align-self: flex-end; text-align: right; max-width: 46ch;
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.08rem;
  color: rgba(33, 25, 16, 0.8); background: rgba(184, 94, 63, 0.07);
  border: 1px solid rgba(184, 94, 63, 0.18); border-radius: 14px 14px 4px 14px;
  padding: 0.45rem 0.85rem;
}
.scn-react {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: 1.02rem; color: rgba(33, 25, 16, 0.66);
  border-left: 2px solid rgba(201, 164, 92, 0.6); padding: 0.12rem 0 0.12rem 0.7rem;
  display: flex; align-items: center; gap: 0.45rem;
}
.scn-farewell { border-left-color: var(--scn-accent); }
.scn-note {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  color: rgba(33, 25, 16, 0.5); text-align: center; font-size: 0.95rem;
}
/* audio chip — CSS shapes only (no-emoji canon) */
.scn-audio {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: 50%; border: 1px solid rgba(138, 90, 32, 0.5);
  background: rgba(201, 164, 92, 0.16); cursor: pointer; transition: 0.18s; padding: 0;
}
.scn-audio:hover { background: rgba(201, 164, 92, 0.32); }
.scn-audio::before {
  content: ""; display: block; width: 0; height: 0; margin-left: 2px;
  border-left: 8px solid #8a5a20; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent;
}
.scn-audio.playing::before {
  width: 8px; height: 10px; margin-left: 0;
  border: 0; border-left: 2.5px solid #8a5a20; border-right: 2.5px solid #8a5a20;
}
.scn-audio.sm { width: 22px; height: 22px; }
.scn-audio.sm::before { border-left-width: 6px; border-top-width: 4.5px; border-bottom-width: 4.5px; }
.scn-audio.sm.playing::before { width: 6px; height: 8px; border-left-width: 2px; border-right-width: 2px; }
/* the target is a scaffold, not a spoiler — collapsed until asked for */
.scn-goalrow { margin-top: 0.4rem; }
.scn-goal-toggle {
  font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(138, 90, 32, 0.75);
  background: transparent; border: 1px dotted rgba(138, 90, 32, 0.45);
  border-radius: 999px; padding: 0.22rem 0.75rem; cursor: pointer; transition: 0.18s;
}
.scn-goal-toggle:hover { color: #8a5a20; border-color: rgba(138, 90, 32, 0.8); }
.scn-goal-text {
  display: none; font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 0.7rem; letter-spacing: 0.05em; color: #8a5a20;
}
.scn-goalrow.open .scn-goal-toggle { display: none; }
.scn-goalrow.open .scn-goal-text { display: block; }
.scn-composer { display: flex; gap: 0.55rem; align-items: center; margin-top: 0.3rem; }
.scn-input {
  flex: 1; min-width: 0;
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.18rem;
  color: #211910; background: rgba(255, 252, 245, 0.9);
  border: 1px solid rgba(33, 25, 16, 0.22); border-radius: 999px;
  padding: 0.55rem 1.15rem; outline: none; transition: border-color 0.18s;
}
.scn-input:focus { border-color: rgba(184, 94, 63, 0.6); }
.scn-input::placeholder { color: rgba(33, 25, 16, 0.35); }

/* ---- Situazione redesign (owner 2026-07-09): checkpoints on a SIDE RAIL, the
   conversation as a story-manuscript over the Place watercolor — between the
   Conversazione (La Trama) and the Story module. Self-contained buttons so it never
   looks unstyled in the lab. ---- */
.scn-card--survival { display: grid; grid-template-columns: 254px 1fr; column-gap: 1.9rem; row-gap: .9rem; align-items: start; }
.scn-card--survival > * { grid-column: 2; min-width: 0; }
.scn-card--survival > .scn-loc { grid-column: 1 / -1; }
.scn-card--survival > .scn-kit { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: .5rem; align-self: start; }
.scn-card--survival::before { opacity: 0.18; filter: saturate(0.92); }
/* the checkpoint rail */
.scn-card--survival .scn-kit {
  background: rgba(255, 253, 247, 0.72); border: 1px solid rgba(96, 72, 40, 0.2);
  border-radius: 14px; padding: 1.15rem 1.15rem 1.2rem; box-shadow: 0 12px 30px rgba(60, 40, 20, 0.08);
}
.scn-card--survival .scn-checklist { gap: 0.85rem; }
.scn-card--survival .scn-obj { position: relative; padding-left: .1rem; }
.scn-card--survival .scn-obj + .scn-obj { border-top: 1px solid rgba(96, 72, 40, 0.12); padding-top: .85rem; }
.scn-card--survival .scn-obj-t { font-size: 1rem; }
/* composer buttons — no dependency on the app's study-btn */
.scn-send {
  flex: none; border: 0; border-radius: 999px; background: var(--scn-accent); color: #fff;
  font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 0.92rem;
  padding: 0.62rem 1.35rem; cursor: pointer; transition: filter 0.18s; box-shadow: 0 8px 18px rgba(176, 86, 47, 0.24);
}
.scn-send:hover { filter: brightness(0.95); }
.scn-mic {
  flex: none; border: 1px solid rgba(96, 72, 40, 0.28); border-radius: 999px; background: #fffdf7;
  color: var(--scn-accent); min-width: 2.7rem; height: 2.7rem; cursor: pointer; display: inline-grid; place-items: center;
}
.scn-mic:hover { border-color: var(--scn-accent); }
@media (max-width: 680px) {
  .scn-card--survival { grid-template-columns: 1fr; }
  .scn-card--survival > * { grid-column: 1; }
  .scn-card--survival > .scn-kit { grid-row: auto; position: static; }
}
.scn-final { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.3rem; }
.scn-continue { align-self: center; }
/* the taccuino — same visual language as the module feedback cards, on paper */
.scn-tc-head {
  font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(33, 25, 16, 0.45);
  text-align: center; margin: 0.4rem 0 0;
}
.scn-tc-turn {
  background: rgba(255, 252, 245, 0.75); border: 1px solid rgba(160, 120, 60, 0.28);
  border-radius: 14px; padding: 0.85rem 1rem;
}
.scn-tc-ctx {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: 0.92rem; color: rgba(33, 25, 16, 0.5); margin-bottom: 0.5rem;
}
.scn-tc-cols { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.scn-tc-col { flex: 1 1 12rem; background: rgba(238, 224, 198, 0.55); border-radius: 8px; padding: 0.45rem 0.6rem; }
.scn-tc-col.you { background: rgba(197, 120, 80, 0.12); }
.scn-tc-h {
  font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.52rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(33, 25, 16, 0.5);
  display: block; margin-bottom: 0.18rem;
}
.scn-tc-t { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 0.98rem; color: #211910; }
.scn-tc-rule {
  font-size: 0.9rem; color: #211910; background: rgba(184, 146, 42, 0.1);
  border-left: 3px solid rgba(184, 146, 42, 0.75); border-radius: 8px;
  padding: 0.45rem 0.6rem; margin-top: 0.35rem; line-height: 1.5;
}
.scn-tc-diff {
  font-size: 0.88rem; color: #211910; border-left: 3px solid #b85e3f;
  background: rgba(184, 94, 63, 0.08); border-radius: 8px;
  padding: 0.4rem 0.6rem; margin-top: 0.35rem; line-height: 1.5;
}
.scn-tc-diff.eq { border-left-color: #5f8a4f; background: rgba(95, 138, 79, 0.08); }
.scn-tc-diff.ctx { border-left-color: #c9a45c; background: rgba(184, 137, 59, 0.08); }
.scn-tc-v {
  font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.5rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin-left: 0.3rem; color: #b85e3f;
}
.scn-tc-diff.eq .scn-tc-v { color: #5f8a4f; }
.scn-tc-diff.ctx .scn-tc-v { color: #a07828; }
.scn-tc-verb {
  font-size: 0.88rem; color: #211910; background: rgba(95, 138, 79, 0.07);
  border: 1px solid rgba(95, 138, 79, 0.26); border-radius: 8px;
  padding: 0.45rem 0.6rem; margin-top: 0.35rem; line-height: 1.55;
}
.scn-tc-ok { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 0.92rem; color: #5f8a4f; margin-top: 0.25rem; }
.scn-tc-pending {
  font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(33, 25, 16, 0.4); margin-top: 0.35rem;
}
@media (max-width: 640px) {
  .scn-it { font-size: 1.15rem; }
  .scn-composer { flex-wrap: wrap; }
}

/* ── LM-11 follow-up (2026-07-07, measured with e2e/_typing_bisect_module.mjs) ──
   The module overlay is an OPAQUE full-screen sheet (#fdfaf4, position:fixed,
   inset:0), yet the path scene beneath it — filter: blur(60px) week-peek washes,
   stage gradients, dozens of node box-shadows — was repainted on EVERY keystroke
   inside the overlay: p50 872 ms per key. The path is 100% invisible while the
   overlay is open, so skip painting it entirely. visibility (not display) keeps
   layout/scroll state for a cheap restore on close. */
body.module-overlay-open #main-app {
  visibility: hidden;
}


/* ── Giradischi — the shared audio-module chrome (Il Cammino P2b/P2c).
   Ascolto (listen) + Voce (speak) are one warm, watercolor-grounded "record
   player": house tokens, terracotta action, the one green for good, the Place's
   painting as the spinning vinyl label. Warm-paper LIGHT (La Voce identity + lab
   canon). Distinct from text modules by the vinyl + audio-forward layout, not by
   leaving the house palette. No backdrop-filter (LM-11). */
.gd-root{
  --gd-terra:#d97757; --gd-terra-deep:#b85e3f; --gd-gold:#b8893b; --gd-green:#3d8f6c;
  font-family:var(--font-ui,"Inter",system-ui,sans-serif);
  color:var(--ink,#241a12);
  max-width:560px;margin:0 auto;padding:4px 2px 18px;
}
.gd-top{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.gd-kick{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gd-terra-deep);}
.gd-place{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-left:auto;}
.gd-title{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.15;margin:2px 0 4px;color:var(--ink);}
.gd-title em{font-style:italic;color:var(--gd-terra-deep);}
.gd-lede{color:var(--ink-soft);font-size:13.5px;line-height:1.5;margin:0 0 16px;max-width:46ch;}
.gd-pips{display:flex;gap:6px;margin:0 0 16px;}
.gd-pip{height:4px;flex:1;border-radius:3px;background:var(--surface-rule);}
.gd-pip.done{background:var(--gd-green);}
.gd-pip.now{background:linear-gradient(90deg,var(--gd-terra),transparent);}

/* the record-player card: warm paper + a soft watercolor wash bleeding from the top edge */
.gd-card{position:relative;overflow:hidden;border-radius:var(--radius-2,18px);
  background:var(--surface-paper);border:1px solid var(--surface-rule);box-shadow:var(--surface-shadow);
  padding:20px 20px 18px;}
.gd-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;z-index:0;
  background-image:var(--gd-water,none);background-size:cover;background-position:center;
  -webkit-mask-image:radial-gradient(130% 88% at 50% -12%, #000, transparent 70%);
          mask-image:radial-gradient(130% 88% at 50% -12%, #000, transparent 70%);}
.gd-card > *{position:relative;z-index:1;}

/* the turntable */
.gd-deck{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0 14px;}
.gd-platter{position:relative;width:196px;height:196px;display:grid;place-items:center;}
.gd-vinyl{width:180px;height:180px;border-radius:50%;position:relative;cursor:pointer;border:none;padding:0;
  background:
    repeating-radial-gradient(circle at 50% 50%, #1c1712 0 2px, #241d16 2px 3.6px);
  box-shadow:0 12px 26px rgba(20,18,14,.30), inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .18s ease;}
.gd-vinyl:hover{transform:scale(1.02);}
.gd-vinyl:active{transform:scale(.98);}
.gd-vinyl.spinning{animation:gd-spin 3.4s linear infinite;}
@keyframes gd-spin{to{transform:rotate(360deg);}}
.gd-label{position:absolute;inset:54px;border-radius:50%;background-size:cover;background-position:center;
  background-image:var(--gd-art,linear-gradient(135deg,#d97757,#b8893b));
  box-shadow:0 0 0 3px rgba(255,250,240,.9), 0 2px 6px rgba(0,0,0,.3);display:grid;place-items:center;}
.gd-label::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--surface-paper);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);}
/* tonearm: a slim arm pivoting from the top-right; swings onto the record when live */
.gd-arm{position:absolute;top:2px;right:6px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #8a7a63, #4f4331);box-shadow:0 1px 3px rgba(0,0,0,.4);
  transform-origin:50% 50%;transform:rotate(-20deg);transition:transform .5s cubic-bezier(.4,1.25,.5,1);z-index:2;}
.gd-arm::before{content:"";position:absolute;top:6px;right:6px;width:78px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#5c4f3d,#8a7a63);transform-origin:right center;transform:rotate(52deg);}
.gd-arm::after{content:"";position:absolute;width:9px;height:14px;border-radius:2px;background:#4f4331;
  left:-58px;top:40px;transform:rotate(52deg);}
.gd-arm.on{transform:rotate(8deg);}

.gd-speed{display:flex;gap:8px;}
.gd-speed button{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);background:transparent;
  border:1px solid var(--surface-rule);border-radius:999px;padding:5px 12px;cursor:pointer;}
.gd-speed button.on{color:var(--gd-terra-deep);border-color:var(--gd-terra);}
.gd-hint{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);}

/* write-back (ascolto) / say (voce) shared input row */
.gd-wb label,.gd-say label{display:block;font-size:12.5px;color:var(--ink-soft);margin:0 0 8px;}
.gd-wb textarea{width:100%;min-height:58px;resize:vertical;font-family:var(--font-display);font-size:19px;color:var(--ink);
  background:var(--surface-paper-soft);border:1px solid var(--surface-rule);border-radius:12px;padding:11px 13px;line-height:1.4;}
.gd-wb textarea:focus{outline:none;border-color:var(--gd-terra);box-shadow:0 0 0 3px rgba(217,119,87,.14);}
.gd-say-line{font-family:var(--font-display);font-size:22px;line-height:1.4;color:var(--ink);text-align:center;margin:4px 0 2px;}
.gd-say-gloss{color:var(--ink-soft);font-size:13.5px;font-style:italic;text-align:center;margin:0 0 6px;}
.gd-status{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);text-align:center;min-height:16px;margin:6px 0 0;}

.gd-row{display:flex;gap:10px;margin-top:14px;align-items:center;justify-content:center;flex-wrap:wrap;}
/* P2f: match the established module button language — mono, uppercase, letterspaced
   (as the text/scena modules) so the fleet's buttons read as one. */
.gd-btn{font-family:var(--font-mono);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  border:none;border-radius:12px;padding:11px 22px;cursor:pointer;}
.gd-btn-primary{background:linear-gradient(180deg,var(--gd-terra),var(--gd-terra-deep));color:#fffaf0;flex:1;min-width:140px;}
.gd-btn-rec{background:linear-gradient(180deg,var(--gd-terra),var(--gd-terra-deep));color:#fffaf0;
  display:inline-flex;align-items:center;gap:9px;}
.gd-btn-rec.is-recording{background:linear-gradient(180deg,#c0392b,#96271c);animation:gd-pulse 1.1s ease-in-out infinite;}
@keyframes gd-pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.4);}50%{box-shadow:0 0 0 8px rgba(192,57,43,0);}}
.gd-btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--surface-rule);}
.gd-link{background:none;border:none;color:var(--ink-faint);font-size:12px;text-decoration:underline;cursor:pointer;font-family:var(--font-ui);}

/* reveal (ascolto diff + teach) */
.gd-reveal{margin-top:16px;animation:gd-rise .3s ease;}
@keyframes gd-rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.gd-verdict{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px;}
.gd-verdict .gd-dot{width:9px;height:9px;border-radius:50%;}
.gd-verdict.ok{color:var(--gd-green);} .gd-verdict.ok .gd-dot{background:var(--gd-green);}
.gd-verdict.miss{color:var(--gd-terra-deep);} .gd-verdict.miss .gd-dot{background:var(--gd-terra-deep);}
.gd-answer{font-family:var(--font-display);font-size:21px;line-height:1.4;margin:0 0 4px;color:var(--ink);}
.gd-answer .g{color:var(--gd-green);} .gd-answer .b{color:var(--gd-terra-deep);text-decoration:line-through;opacity:.7;}
.gd-gloss{color:var(--ink-soft);font-size:13.5px;font-style:italic;margin:0 0 12px;}
.gd-teach{background:var(--ds-green-soft,rgba(61,143,108,.1));border:1px solid rgba(61,143,108,.28);border-radius:12px;padding:12px 14px;}
.gd-teach .tk{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gd-green);margin-bottom:6px;}
.gd-teach .th{font-size:14px;line-height:1.5;margin:0 0 6px;color:var(--ink);}
.gd-teach .tt{color:var(--ink-soft);font-size:12.5px;line-height:1.5;margin:0;}
.gd-fb{margin-top:14px;}

.gd-end{text-align:center;padding:20px 0 4px;}
.gd-end .big{font-family:var(--font-display);font-size:24px;margin:0 0 6px;color:var(--ink);}
.gd-end .sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 4px;}

/* ── Conversazione — the free-conversation path module (Il Cammino P2e).
   "Open-air": no boxes around the talk, just the character and a fading
   transcript over a soft watercolor of the Place. Warm-paper, house tokens. */
.conv-root{max-width:560px;margin:0 auto;padding:4px 2px 12px;color:var(--ink);font-family:var(--font-ui,"Inter",sans-serif);position:relative;}
.conv-top{display:flex;align-items:baseline;gap:10px;margin-bottom:2px;}
.conv-kick{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gd-terra-deep,#b85e3f);}
.conv-turns{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-faint);margin-left:auto;}
.conv-who{font-family:var(--font-display);font-weight:600;font-size:20px;margin:0 0 2px;}
.conv-where{color:var(--ink-soft);font-size:12.5px;font-style:italic;margin:0 0 12px;}
.conv-stage{position:relative;overflow:hidden;border-radius:var(--radius-2,18px);border:1px solid var(--surface-rule);
  background:var(--surface-paper);box-shadow:var(--surface-shadow);padding:18px;min-height:230px;}
.conv-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;z-index:0;
  background-image:var(--gd-water,none);background-size:cover;background-position:center;
  -webkit-mask-image:radial-gradient(140% 100% at 50% 0%, #000, transparent 78%);mask-image:radial-gradient(140% 100% at 50% 0%, #000, transparent 78%);}
.conv-flow{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;}
.conv-line{opacity:1;transition:opacity .5s ease;}
.conv-line.fade1{opacity:.5;} .conv-line.fade2{opacity:.28;} .conv-line.fade3{opacity:.15;}
.conv-line .who{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 3px;}
.conv-line.char .it{font-family:var(--font-display);font-size:20px;line-height:1.4;color:var(--ink);margin:0;}
.conv-line.char .no{color:var(--ink-soft);font-size:12.5px;font-style:italic;margin:2px 0 0;}
.conv-line.you .it{font-size:15px;line-height:1.45;color:var(--ink-soft);margin:0;text-align:right;}
.conv-line.you .who{text-align:right;}
.conv-scaffold{position:relative;z-index:1;margin-top:12px;font-size:12.5px;color:var(--ink-soft);
  border-left:2px solid var(--gd-gold,#b8893b);padding-left:10px;font-style:italic;}
.conv-compose{display:flex;gap:9px;align-items:flex-end;margin-top:12px;}
.conv-compose textarea{flex:1;min-height:44px;max-height:120px;resize:none;font-family:var(--font-ui);font-size:15px;color:var(--ink);
  background:var(--surface-paper-soft);border:1px solid var(--surface-rule);border-radius:14px;padding:11px 14px;line-height:1.4;}
.conv-compose textarea:focus{outline:none;border-color:var(--gd-terra,#d97757);box-shadow:0 0 0 3px rgba(217,119,87,.14);}
.conv-send{border:none;border-radius:50%;width:44px;height:44px;flex:none;cursor:pointer;color:#fffaf0;font-size:18px;
  background:linear-gradient(180deg,var(--gd-terra,#d97757),var(--gd-terra-deep,#b85e3f));}
.conv-send:disabled{opacity:.5;cursor:default;}
.conv-status{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-faint);text-align:center;min-height:15px;margin-top:8px;}
.conv-end{text-align:center;padding:22px 0 6px;}
.conv-end .big{font-family:var(--font-display);font-size:23px;margin:0 0 6px;color:var(--ink);}
.conv-end .sub{color:var(--ink-soft);font-size:13.5px;margin:0 auto 4px;max-width:40ch;}

/* ============================================================================
   IL CAMMINO — warm-paper module system (Ascolto / Voce / Conversazione)
   ONE consistent shell reused across the speech + listen path modules, so the
   fleet reads as a single system. Palette + fonts match /lab/ux/voce-studio
   (the approved surface). Centerpieces: Ascolto = the La Voce-home vinyl.
   ============================================================================ */
.cam-surface{
  --cam-paper:#f7f1e8; --cam-paper-warm:#efe3cc;
  --cam-ink:#211b13; --cam-ink-2:rgba(33,27,19,.82); --cam-ink-3:rgba(33,27,19,.60); --cam-ink-4:rgba(33,27,19,.40);
  --cam-line:rgba(96,72,40,.22);
  --cam-terra:#c0663f; --cam-terra-deep:#a24f2e;
  --cam-gold:#b58a3c; --cam-gold-deep:#906a26;
  --cam-olive:#5f7442;
  --cam-serif:"Playfair Display",Georgia,serif;
  --cam-gloss:"Cormorant Garamond",Georgia,serif;
  --cam-mono:"JetBrains Mono",ui-monospace,monospace;
  --cam-sans:"Inter",system-ui,-apple-system,sans-serif;
  position:relative; min-height:100%;
  background:linear-gradient(180deg,var(--cam-paper) 0%,var(--cam-paper-warm) 128%);
  font-family:var(--cam-sans); color:var(--cam-ink);
  overflow:hidden; isolation:isolate;
}
/* Outer watercolor wash — the place painting, heavily blurred, bleeding in from
   the top + bottom edges (the La Voce-home treatment). Behind content; never on
   the cards. */
.cam-surface::before,
.cam-surface::after{
  content:"";position:absolute;left:0;right:0;height:38%;
  background-image:var(--cam-water,none);background-size:cover;background-position:center;
  filter:blur(54px) saturate(1.05);opacity:.24;pointer-events:none;z-index:0;
}
.cam-surface::before{top:0;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);}
.cam-surface::after{bottom:0;-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000);}
.cam-wrap{position:relative;z-index:1;max-width:620px;margin:0 auto;padding:clamp(1.2rem,3.4vw,2rem) .6rem 2.4rem;}

/* head */
.cam-kick{font-family:var(--cam-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cam-terra-deep);margin:0 0 .55rem;display:flex;align-items:center;gap:.5rem;}
.cam-kick .cam-place{color:var(--cam-ink-3);letter-spacing:.1em;}
.cam-kick .cam-place::before{content:"·";margin-right:.5rem;color:var(--cam-line);}
.cam-title{font-family:var(--cam-serif);font-weight:700;font-size:clamp(1.7rem,4.4vw,2.25rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 .6rem;color:var(--cam-ink);}
.cam-title em{font-style:normal;color:var(--cam-terra);}
.cam-lede{font-family:var(--cam-gloss);font-size:1.18rem;line-height:1.5;color:var(--cam-ink-2);margin:0 0 1.5rem;max-width:46ch;}

/* progress pips */
.cam-pips{display:flex;gap:.4rem;margin:0 0 1.4rem;}
.cam-pip{width:8px;height:8px;border-radius:50%;background:var(--cam-line);transition:all .3s;}
.cam-pip.now{background:transparent;box-shadow:inset 0 0 0 2px var(--cam-terra);transform:scale(1.18);}
.cam-pip.done{background:var(--cam-terra);}

/* buttons — house pill */
.cam-btn{font-family:var(--cam-sans);font-size:.94rem;font-weight:600;border-radius:999px;padding:.72rem 1.5rem;border:1.5px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;}
.cam-btn:active{transform:translateY(1px);}
.cam-btn--primary{background:var(--cam-terra);color:#fff;box-shadow:0 8px 20px rgba(192,102,63,.26);}
.cam-btn--primary:hover{background:var(--cam-terra-deep);box-shadow:0 10px 26px rgba(192,102,63,.32);}
.cam-btn--ghost{background:transparent;color:var(--cam-terra-deep);border-color:var(--cam-line);}
.cam-btn--ghost:hover{border-color:var(--cam-terra);background:rgba(192,102,63,.06);}
.cam-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1rem;}

/* field — warm paper, no harsh white box */
.cam-fieldlabel{font-family:var(--cam-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cam-ink-3);margin:0 0 .5rem;display:block;}
.cam-field{width:100%;box-sizing:border-box;font-family:var(--cam-serif);font-size:1.28rem;line-height:1.5;color:var(--cam-ink);background:rgba(249,242,229,.5);border:1px solid rgba(96,72,40,.16);border-radius:14px;padding:.85rem 1rem;resize:none;transition:border-color .2s,box-shadow .2s,background .2s;}
.cam-field::placeholder{color:var(--cam-ink-4);}
.cam-field:focus{outline:none;border-color:rgba(192,102,63,.7);background:rgba(251,246,235,.72);box-shadow:0 0 0 3px rgba(192,102,63,.09);}

/* reveal card */
.cam-reveal{margin-top:1.4rem;background:rgba(255,252,244,.62);border:1px solid var(--cam-line);border-radius:16px;padding:1.2rem 1.35rem;animation:cam-rise .3s ease;}
@keyframes cam-rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.cam-verdict{display:flex;align-items:center;gap:.55rem;font-family:var(--cam-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:.7rem;}
.cam-verdict .cam-dot{width:9px;height:9px;border-radius:50%;}
.cam-verdict.ok{color:var(--cam-olive);} .cam-verdict.ok .cam-dot{background:var(--cam-olive);}
.cam-verdict.miss{color:var(--cam-terra-deep);} .cam-verdict.miss .cam-dot{background:var(--cam-terra);}
.cam-answer{font-family:var(--cam-serif);font-size:1.5rem;line-height:1.4;margin:0 0 .5rem;color:var(--cam-ink);}
.cam-answer .g{color:var(--cam-olive);}
.cam-answer .b{color:var(--cam-terra-deep);text-decoration:line-through;text-decoration-color:rgba(162,79,46,.5);}
.cam-gloss{font-family:var(--cam-gloss);font-style:italic;font-size:1.18rem;color:var(--cam-ink-2);margin:0 0 .3rem;}
.cam-teach{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--cam-line);}
.cam-teach .tk{font-family:var(--cam-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cam-gold-deep);margin-bottom:.35rem;}
.cam-teach .th{font-family:var(--cam-serif);font-size:1.08rem;color:var(--cam-ink);margin:0 0 .25rem;}
.cam-teach .tt{font-size:.92rem;color:var(--cam-ink-2);margin:0;line-height:1.55;}

/* end */
.cam-end{text-align:center;padding:2.2rem 0 1rem;animation:cam-rise .4s ease;}
.cam-end .big{font-family:var(--cam-serif);font-size:1.7rem;color:var(--cam-ink);margin:0 0 .4rem;}
.cam-end .sub{font-family:var(--cam-gloss);font-size:1.18rem;color:var(--cam-ink-2);margin:0;}

/* ---- Ascolto centerpiece: the La Voce-home vinyl ----
   The Place's painting IS the disc face at full clarity; a slim dark grooved rim,
   NO dark plate box, NO tonearm. The watercolor breathes on the OUTER page edges
   (see .cam-asc-surface below). Press the disc to play → spins up, coasts to a stop.
   Speed controls sit to the SIDE like a deck's pitch buttons. */
.cam-asc-surface::before,
.cam-asc-surface::after{height:58%;opacity:.52;filter:blur(42px) saturate(1.14);}
.cam-asc-stage{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin-bottom:.4rem;}
.cam-asc-deck{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,3vw,1.6rem);}
.cam-asc-vinyl{display:block;position:relative;border:0;padding:0;background:transparent;cursor:pointer;
  width:min(80vw,400px);height:min(80vw,400px);border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 34px 66px rgba(18,10,4,.5),0 6px 16px rgba(0,0,0,.42);
  transition:transform .35s cubic-bezier(.33,1,.68,1);}
/* every click lands on the BUTTON, never a child (owner 2026-07-11: "finicky");
   the ::after ring adds forgiving slack around the disc's edge */
.cam-asc-vinyl *{pointer-events:none;}
.cam-asc-vinyl::after{content:"";position:absolute;inset:-16px;border-radius:50%;}
.cam-asc-vinyl:hover{transform:scale(1.015);}
.cam-asc-vinyl:active{transform:scale(.99);}
/* The record body — glossy black with fine concentric grooves (La Voce-home look) */
.cam-asc-disc{position:absolute;inset:0;z-index:0;border-radius:50%;overflow:hidden;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.5) 0 1.5px, rgba(30,22,15,.0) 1.5px, rgba(30,22,15,.55) 3px 5px),
    radial-gradient(circle at 50% 50%, #201810 0%, #14100b 46%, #080604 78%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 0 -8px 24px rgba(0,0,0,.5);}
/* The watercolor label — a large centered disc (the painting), the part that visibly spins */
.cam-asc-face{position:absolute;inset:29%;z-index:1;border-radius:50%;overflow:hidden;transform-origin:50% 50%;
  box-shadow:0 0 0 2px rgba(0,0,0,.55),0 0 0 6px rgba(16,11,7,.9),inset 0 0 16px rgba(0,0,0,.4);}
.cam-asc-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* Glossy sheen — a fixed light reflection over the whole disc (does NOT rotate) */
.cam-asc-vinyl::before{content:"";position:absolute;inset:0;z-index:3;border-radius:50%;pointer-events:none;
  background:radial-gradient(72% 58% at 33% 23%, rgba(255,255,255,.18), rgba(255,255,255,.05) 42%, rgba(255,255,255,0) 62%);}
.cam-asc-spindle{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#d98a5a,#8a3f22);box-shadow:0 0 0 2px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.5);z-index:4;}
/* Play affordance — a soft disc that fades out while spinning */
.cam-asc-play{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;
  background:rgba(12,8,4,.5);display:flex;align-items:center;justify-content:center;z-index:2;
  transition:opacity .3s ease,transform .3s ease;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.4);}
.cam-asc-play svg{width:24px;height:24px;fill:rgba(255,244,228,.95);margin-left:2px;}
.cam-asc-vinyl.is-playing .cam-asc-play{opacity:0;transform:scale(.6);}
.cam-asc-caption{font-family:var(--cam-gloss);font-style:italic;font-size:1.12rem;color:var(--cam-ink-2);margin:0;text-align:center;}
.cam-asc-speed{display:flex;flex-direction:column;gap:.5rem;}
.cam-asc-speed button{font-family:var(--cam-mono);font-size:.68rem;letter-spacing:.04em;padding:.5rem .72rem;border-radius:999px;
  border:1.5px solid var(--cam-line);background:rgba(249,242,229,.5);color:var(--cam-ink-3);cursor:pointer;transition:all .18s;min-width:3.4rem;}
.cam-asc-speed button:hover{border-color:var(--cam-terra);color:var(--cam-terra-deep);}
.cam-asc-speed button.on{background:var(--cam-terra);border-color:var(--cam-terra);color:#fff;box-shadow:0 6px 14px rgba(192,102,63,.26);}
.cam-asc-wb{width:100%;max-width:470px;margin:0 auto;}

/* ---- Voce centerpiece: the voce-studio La Nota (leggio → record → nota) ---- */
.cam-voce{--cam-terra-tint:rgba(192,102,63,.13);--cam-olive-tint:rgba(95,116,66,.16);--cam-olive:#5f7442;--cam-paper-card:rgba(255,252,244,.66);}
/* Voce: drop the muddy full-bleed wash; the watercolor lives in a CLEAN framed scene
   postcard in the header instead (the "smart way" — real painting, at full clarity). */
.cam-voce.cam-surface::before,.cam-voce.cam-surface::after{opacity:.14; filter:blur(64px) saturate(1.02); height:30%;}
.cam-voce-head{display:flex; align-items:flex-start; justify-content:space-between; gap:1.4rem;}
.cam-voce-intro{flex:1; min-width:0;}
.cam-voce-scene{flex:none; width:clamp(112px,22vw,152px);}
.cam-voce-scene figure{margin:0; padding:6px 6px 0; background:#fdfaf3; border:1px solid var(--cam-line); border-radius:4px; box-shadow:0 14px 30px rgba(60,40,20,.18),0 2px 5px rgba(60,40,20,.1); transform:rotate(1.7deg);}
.cam-voce-scene img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px;}
.cam-voce-scene figcaption{font-family:var(--cam-mono); font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cam-ink-4); text-align:center; padding:.45rem 0 .5rem;}
@media(max-width:560px){.cam-voce-scene{width:96px;}}
/* No box — the line sits on the warm paper, exactly like the feedback (Nota) text (owner ask) */
.cam-leggio{position:relative;border:0;background:transparent;padding:.4rem 0 .6rem;box-shadow:none;margin-bottom:1.2rem;}
.cam-leggio::before{display:none;}
.cam-leggio-line{position:relative;font-family:var(--cam-serif);font-style:italic;font-size:clamp(1.7rem,4.8vw,2.55rem);line-height:1.32;margin:.2rem 0 .9rem;color:var(--cam-ink);text-align:center;}
.cam-leggio-gloss{position:relative;font-family:var(--cam-gloss);font-style:italic;font-size:1.14rem;color:var(--cam-ink-2);text-align:center;margin:0 0 1.2rem;}
.cam-leggio-row{position:relative;display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;}
.cam-playpill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--cam-line);border-radius:999px;background:var(--cam-paper-card);padding:.45rem .95rem .45rem .75rem;font-family:var(--cam-sans);font-size:.82rem;font-weight:600;color:var(--cam-ink-2);cursor:pointer;box-shadow:0 1px 0 rgba(96,72,40,.08);transition:border-color .2s,color .2s;}
.cam-playpill i{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--cam-terra-deep);display:inline-block;}
.cam-playpill.is-playing{border-color:var(--cam-terra);color:var(--cam-terra-deep);}
.cam-playpill small{font-weight:500;color:var(--cam-ink-3);}
.cam-btn-big{border:0;border-radius:999px;padding:.85rem 2.4rem;background:linear-gradient(160deg,var(--cam-terra),var(--cam-terra-deep));color:#fdf6ea;font-family:var(--cam-sans);font-size:1.02rem;font-weight:700;cursor:pointer;box-shadow:0 14px 28px -14px rgba(162,79,46,.75);display:inline-flex;align-items:center;gap:.6rem;transition:transform .12s;}
.cam-btn-big:active{transform:translateY(1px);}
.cam-btn-big .dot{width:11px;height:11px;border-radius:50%;background:#fdf6ea;transition:border-radius .2s;}
.cam-btn-big.is-recording{background:linear-gradient(160deg,#b0402a,#8f2f20);}
.cam-btn-big.is-recording .dot{border-radius:2px;}
.cam-btn-quiet{background:transparent;border:0;color:var(--cam-ink-3);font-family:var(--cam-sans);font-size:.86rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.cam-nota-line{font-family:var(--cam-serif);font-size:clamp(1.7rem,4.8vw,2.55rem);line-height:1.32;text-align:center;margin:.2rem 0 .7rem;font-style:italic;color:var(--cam-ink);}
.cam-nota-line .mark{font-style:italic;color:var(--cam-terra-deep);background:var(--cam-terra-tint);border-bottom:3px solid var(--cam-terra);border-radius:4px 4px 0 0;padding:0 .08em;}
.cam-nota-line .mark2{border-bottom:2.5px dotted rgba(192,102,63,.55);cursor:pointer;padding:0 .04em;}
.cam-nota-margins{text-align:center;font-size:.8rem;color:var(--cam-ink-3);margin:0 0 1.15rem;font-family:var(--cam-sans);}
.cam-nota-margins button{border:1px solid var(--cam-line);background:var(--cam-paper-card);border-radius:999px;padding:.22rem .7rem;font-size:.72rem;font-weight:600;color:var(--cam-ink-2);margin:0 .15rem;cursor:pointer;}
.cam-nota-margins button:hover{border-color:var(--cam-terra);color:var(--cam-terra-deep);}
.cam-nota-note{text-align:center;font-family:var(--cam-gloss);font-size:1.4rem;line-height:1.4;margin:0 0 .45rem;color:var(--cam-ink);}
.cam-nota-note b{font-weight:700;}
.cam-nota-ev{text-align:center;font-family:var(--cam-mono);font-size:.76rem;color:var(--cam-ink-3);margin:0 auto 1.3rem;max-width:620px;}
.cam-nota-ev b{color:var(--cam-terra-deep);font-weight:600;}
/* C6 — "what happened to this take". A measured-clear read, an unmeasurable
   one and a bad-audio one are three different things and must LOOK like three
   different things; an empty panel reads as a broken app. Neutral by
   construction: none of these is a correction, so none of them borrows the
   corrective card's terracotta. */
.cam-nota-state{max-width:620px;margin:0 auto 1.3rem;padding:.7rem 1rem;border:1px solid var(--cam-line);border-radius:var(--ds-r-2);background:var(--cam-paper-card);text-align:center;}
.cam-nota-state__head{margin:0;font-family:var(--cam-gloss);font-size:1.05rem;color:var(--cam-ink-2);}
.cam-nota-state__tip{margin:.3rem 0 0;font-family:var(--cam-sans);font-size:.78rem;color:var(--cam-ink-3);}
.cam-nota-state--measured_clear{border-color:var(--cam-line);}
.cam-nota-state--not_measured{border-left:3px solid var(--cam-gold);}
.cam-nota-state--needs_another_take{border-left:3px solid var(--cam-gold-deep);}
.cam-comesifa{max-width:640px;margin:0 auto 1.4rem;border:1px solid var(--cam-line);border-radius:16px;background:var(--cam-paper-card);overflow:hidden;box-shadow:0 8px 22px rgba(60,45,30,.07);}
.cam-comesifa-head{font-family:var(--cam-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cam-ink-3);padding:.7rem 1.1rem .15rem;}
.cam-csf-row{display:grid;grid-template-columns:auto 1fr;gap:.9rem;padding:.9rem 1.1rem;align-items:start;}
.cam-csf-row + .cam-csf-row{border-top:1px dashed rgba(96,72,40,.16);}
.cam-csf-row .csf-k{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--cam-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;white-space:nowrap;padding-top:.12rem;}
.cam-csf-row .csf-k::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;}
.cam-csf-row.munnen{background:linear-gradient(90deg,rgba(192,102,63,.07),transparent 62%);}
.cam-csf-row.munnen .csf-k{color:var(--cam-terra-deep);} .cam-csf-row.munnen .csf-k::before{background:var(--cam-terra);box-shadow:0 0 0 3px rgba(192,102,63,.12);}
.cam-csf-row.hodet{background:linear-gradient(90deg,rgba(181,138,60,.07),transparent 62%);}
.cam-csf-row.hodet .csf-k{color:var(--cam-gold-deep);} .cam-csf-row.hodet .csf-k::before{background:var(--cam-gold);box-shadow:0 0 0 3px rgba(181,138,60,.12);}
.cam-csf-row p{margin:0;font-size:.94rem;line-height:1.6;color:var(--cam-ink-2);}
.cam-csf-row p b{color:var(--cam-ink);font-weight:700;}
.cam-earproof{display:flex;align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap;margin:0 0 1.3rem;}
.cam-nota-actions{display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;margin-top:.2rem;}

/* ---- Conversazione centerpiece: the Passeggiata story-page manuscript ---- */
.cam-conv{--cam-paper-card:rgba(255,252,244,.66);}
.cam-conv .cam-wrap{max-width:720px;min-height:100%;display:flex;flex-direction:column;}
/* Manuscript head: the character + place, with the Place painting as a framed
   scene postcard on the right (the real Passeggiata story-page treatment). */
.cam-conv-head{display:flex;align-items:flex-start;gap:1.4rem;margin:.2rem 0 1.7rem;
  padding-bottom:1.5rem;border-bottom:1px solid var(--cam-line);}
.cam-conv-intro{flex:1;min-width:0;}
.cam-conv-title{font-family:var(--cam-serif);font-weight:700;font-size:clamp(1.9rem,5vw,2.6rem);font-style:italic;line-height:1.1;margin:.2rem 0 .25rem;color:var(--cam-ink);}
.cam-conv-where{font-family:var(--cam-gloss);font-style:italic;font-size:1.12rem;color:var(--cam-ink-3);margin:0 0 .2rem;}
.cam-conv-scene{flex:none;width:clamp(120px,26vw,168px);}
.cam-conv-scene figure{margin:0;padding:7px 7px 0;background:#fdfaf3;border:1px solid var(--cam-line);
  border-radius:4px;box-shadow:0 14px 30px rgba(60,40,20,.16),0 2px 5px rgba(60,40,20,.1);transform:rotate(1.4deg);}
.cam-conv-scene img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;}
.cam-conv-scene figcaption{font-family:var(--cam-mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cam-ink-4);text-align:center;padding:.5rem 0 .55rem;}
@media(max-width:560px){.cam-conv-head{flex-direction:column-reverse;align-items:flex-start;}.cam-conv-scene{align-self:flex-end;}}
.cam-conv-flow{display:flex;flex-direction:column;gap:1.7rem;flex:1;}
.cam-conv-turn{max-width:88%;}
.cam-conv-turn.char{align-self:flex-start;}
.cam-conv-turn.you{align-self:flex-end;text-align:right;}
.cam-conv-name{font-family:var(--cam-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--cam-terra-deep);margin:0 0 .4rem;}
.cam-conv-it{font-family:var(--cam-serif);font-size:clamp(1.35rem,3.6vw,1.9rem);line-height:1.32;margin:0;color:var(--cam-ink);}
.cam-conv-turn.you .cam-conv-it{color:var(--cam-terra-deep);}
/* «In plain words» — the story-page gloss card (italic serif, terracotta rule) */
.cam-conv-gloss{font-family:var(--cam-gloss);font-style:italic;font-size:1.1rem;color:var(--cam-ink-2);
  margin:.55rem 0 0;line-height:1.45;border-left:2px solid rgba(192,102,63,.55);padding:.15rem 0 .15rem .8rem;}
.cam-conv-turn.you .cam-conv-gloss{border-left:0;}
.cam-conv-turn.is-new .cam-conv-it{animation:cam-rise .45s ease;}
.cam-conv-compose{position:sticky;bottom:0;margin-top:1.8rem;padding:.7rem 0 .2rem;background:linear-gradient(180deg,transparent,var(--cam-paper) 34%);}
.cam-conv-prompt{font-family:var(--cam-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cam-terra-deep);
  margin:0 0 .7rem;padding-top:.9rem;border-top:1px dashed var(--cam-line);}
.cam-conv-row{display:flex;align-items:flex-end;gap:.55rem;}
.cam-conv-input{flex:1;box-sizing:border-box;font-family:var(--cam-serif);font-size:1.18rem;line-height:1.4;color:var(--cam-ink);background:rgba(249,242,229,.62);border:1px solid rgba(96,72,40,.18);border-radius:16px;padding:.72rem 1rem;resize:none;max-height:130px;transition:border-color .2s,box-shadow .2s;}
.cam-conv-input:focus{outline:none;border-color:rgba(192,102,63,.7);box-shadow:0 0 0 3px rgba(192,102,63,.09);}
.cam-conv-iconbtn{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--cam-line);background:var(--cam-paper-card);color:var(--cam-terra-deep);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;}
.cam-conv-iconbtn.listening{border-color:#b0402a;color:#b0402a;}
.cam-conv-send{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--cam-terra);color:#fff;cursor:pointer;box-shadow:0 8px 18px rgba(192,102,63,.28);display:inline-flex;align-items:center;justify-content:center;transition:background .2s;}
.cam-conv-send:hover{background:var(--cam-terra-deep);}
/* the OPTIONAL aid — pull it only if you want it (owner ask 2026-07-09) */
.cam-conv-aidbar{display:flex;align-items:center;gap:.5rem;margin:0 0 .55rem;}
.cam-conv-aidbtn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--cam-sans);font-size:.8rem;font-weight:600;color:var(--cam-gold-deep);background:transparent;border:1px solid var(--cam-line);border-radius:999px;padding:.3rem .8rem;cursor:pointer;transition:border-color .2s,background .2s;}
.cam-conv-aidbtn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cam-gold);flex:none;}
.cam-conv-aidbtn.armed{border-color:var(--cam-gold);background:rgba(181,138,60,.08);}
.cam-conv-aidbtn.armed::before{animation:cam-pulse 1.6s infinite;}
@keyframes cam-pulse{0%,100%{opacity:.45;}50%{opacity:1;}}
.cam-conv-aid{font-family:var(--cam-gloss);font-style:italic;font-size:1.08rem;color:var(--cam-ink-2);background:rgba(181,138,60,.09);border-left:3px solid var(--cam-gold);border-radius:0 10px 10px 0;padding:.6rem .9rem;margin:0 0 .6rem;animation:cam-rise .3s ease;}
.cam-conv-status{font-family:var(--cam-mono);font-size:.66rem;color:var(--cam-ink-4);text-align:center;min-height:1em;margin:.5rem 0 0;}

/* ---- Conversazione: the cinematic "La Trama" look (maestro-sessions ref) ----
   Full-bleed Place watercolor, centered cream serif, character labels, centered
   composer. The owner's "big watercolor background + beautiful text". */
.cam-trama{position:relative;min-height:100%;color:#f3e8d6;overflow:hidden;background:#19130c;isolation:isolate;
  font-family:var(--cam-sans);--who:#e8a978;}
.cam-trama-bg{position:absolute;inset:0;z-index:0;background-image:var(--cam-water,none);background-size:cover;background-position:center 40%;transform:scale(1.06);}
.cam-trama-vig{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,10,6,.18) 0%,rgba(15,10,6,.05) 26%,rgba(15,10,6,.52) 72%,rgba(15,10,6,.96) 100%);}
.cam-trama-scrim{position:absolute;inset:0;z-index:2;background:radial-gradient(78% 76% at 50% 56%,rgba(10,7,3,.72) 0%,rgba(10,7,3,.48) 42%,rgba(10,7,3,.15) 66%,transparent 82%);}
.cam-trama-inner{position:relative;z-index:3;max-width:720px;margin:0 auto;padding:clamp(1.4rem,4vw,2.6rem) clamp(1.2rem,5vw,2.4rem) 2.4rem;min-height:100%;display:flex;flex-direction:column;text-align:center;}
.cam-trama-spine{display:flex;align-items:center;gap:.7rem;justify-content:center;font-family:var(--cam-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,232,214,.72);margin-bottom:.4rem;}
.cam-trama-spine .seal{width:23px;height:23px;border-radius:50%;border:1px solid rgba(243,232,214,.4);display:grid;place-items:center;font-family:var(--cam-serif);font-style:italic;font-size:.78rem;color:#f3e8d6;}
.cam-trama-spine .turns{color:rgba(243,232,214,.5);}
.cam-trama-establishing{margin:1.3rem auto .6rem;max-width:34ch;}
.cam-trama-establishing .cap{font-family:var(--cam-gloss);font-style:italic;font-size:clamp(1.25rem,3vw,1.7rem);line-height:1.4;color:rgba(243,232,214,.92);margin:0;}
.cam-trama-flow{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:1.5rem;}
/* owner 2026-07-11: a soft dark hue behind each spoken line so the text never
   fights the watercolor — a radial wash, not a box (blur-free per LM-11). */
.cam-trama-line{max-width:42ch;animation:cam-rise .5s ease;padding:.55rem 1rem;border-radius:16px;
  background:radial-gradient(120% 140% at 50% 50%, rgba(10,7,3,.58) 0%, rgba(10,7,3,.34) 60%, transparent 100%);}
.cam-trama-line .who{font-family:var(--cam-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--who);margin:0 0 .4rem;}
.cam-trama-line .it{font-family:var(--cam-serif);font-weight:500;font-size:clamp(1.45rem,3.3vw,2.1rem);line-height:1.2;color:#fdf6e9;margin:0;}
.cam-trama-line .no{font-family:var(--cam-gloss);font-style:italic;font-size:1.16rem;color:rgba(243,232,214,.64);margin:.5rem 0 0;}
.cam-trama-line.you .who{color:rgba(243,232,214,.6);}
.cam-trama-line.you .it{color:#f0d9c4;font-style:italic;}
.cam-trama-composer{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(243,232,214,.16);}
.cam-trama-aid{font-family:var(--cam-gloss);font-style:italic;font-size:1.06rem;color:rgba(243,232,214,.82);max-width:44ch;margin:0 auto .9rem;line-height:1.4;text-align:left;}
/* R10 conversation aid ladder — pull-only rungs, never pushed */
.cam-trama-aid .rung{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 .55rem;}
.cam-trama-aid .rn{flex:none;width:1.35em;height:1.35em;border-radius:50%;display:grid;place-items:center;font-family:var(--cam-mono);font-style:normal;font-size:.62rem;color:#241400;background:var(--who,#c98a3a);margin-top:.15rem;}
.cam-trama-aid .rung3{flex-direction:column;}
.cam-trama-aid .r3{display:flex;flex-direction:column;gap:.5rem;width:100%;}
.cam-trama-aid .r3 textarea{font-family:var(--cam-gloss);font-style:italic;font-size:1rem;color:#fdf6e9;background:rgba(243,232,214,.07);border:1px solid rgba(243,232,214,.2);border-radius:14px;padding:.55rem .8rem;resize:none;}
.cam-trama-aid .r3 textarea:focus{outline:none;border-color:var(--who);}
.cam-trama-aid .r3 button,.cam-trama-morehelp{align-self:flex-start;font-family:var(--cam-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,232,214,.62);background:transparent;border:1px solid rgba(243,232,214,.22);border-radius:999px;padding:.35rem .8rem;cursor:pointer;transition:.2s;}
.cam-trama-aid .r3 button:hover,.cam-trama-morehelp:hover{border-color:var(--who);color:#f3e8d6;}
.cam-trama-aid .recast-it{font-family:var(--cam-serif,var(--cam-gloss));font-style:normal;font-size:1.15rem;color:#fdf6e9;margin:.4rem 0 .5rem;}
.cam-trama-morehelp{display:block;margin:.2rem auto 0;}
.cam-trama-say{display:flex;align-items:center;gap:.8rem;justify-content:center;}
.cam-trama-mic{width:52px;height:52px;flex:none;border-radius:50%;border:1px solid rgba(243,232,214,.4);background:rgba(243,232,214,.06);color:#f3e8d6;cursor:pointer;display:grid;place-items:center;transition:.2s;}
.cam-trama-mic:hover{background:var(--who);color:#241400;border-color:transparent;}
.cam-trama-mic.listening{background:#b0402a;border-color:transparent;color:#fff;}
.cam-trama-input{flex:1 1 auto;min-width:0;max-width:26rem;box-sizing:border-box;font-family:var(--cam-gloss);font-style:italic;font-size:1.2rem;line-height:1.3;color:#fdf6e9;text-align:center;background:rgba(243,232,214,.07);border:1px solid rgba(243,232,214,.2);border-radius:20px;padding:.7rem 1.2rem;resize:none;overflow:hidden;transition:border-color .2s,background .2s;}
.cam-trama-input::placeholder{color:rgba(243,232,214,.5);font-style:italic;}
.cam-trama-input:focus{outline:none;border-color:var(--who);background:rgba(243,232,214,.1);}
.cam-trama-send{width:52px;height:52px;flex:none;border-radius:50%;border:0;background:var(--cam-terra);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.4);transition:background .2s;}
.cam-trama-send:hover{background:var(--cam-terra-deep);}
.cam-trama-altrow{margin-top:.9rem;display:flex;justify-content:center;gap:.6rem;}
.cam-trama-alt{font-family:var(--cam-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,232,214,.5);background:transparent;border:1px solid rgba(243,232,214,.22);border-radius:999px;padding:.35rem .8rem;cursor:pointer;transition:.2s;}
.cam-trama-alt:hover,.cam-trama-alt.armed{border-color:var(--who);color:#f3e8d6;}
.cam-trama-status{font-family:var(--cam-mono);font-size:.6rem;letter-spacing:.1em;color:rgba(243,232,214,.5);text-align:center;min-height:1em;margin:.7rem 0 0;}
.cam-trama-end{text-align:center;padding:2rem 0 1rem;animation:cam-rise .5s ease;}
.cam-trama-end .big{font-family:var(--cam-serif);font-size:1.7rem;color:#fdf6e9;margin:0 0 .4rem;}
.cam-trama-end .sub{font-family:var(--cam-gloss);font-style:italic;font-size:1.18rem;color:rgba(243,232,214,.7);margin:0;}

/* ── Il Filo: the terracotta lantern (Shape D) — a non-blocking story offer on the
   path scene. Rendered by renderProgressPath from journeyStatus.filo_lantern;
   never a gate, never a module. Glow = 3+ idle days (showrunner). No emoji:
   the flame is a CSS shape. */
.wcp-filo-lantern{position:absolute;right:1.1rem;bottom:1.1rem;z-index:6;display:flex;align-items:center;gap:.7rem;
  max-width:min(19rem,72vw);padding:.6rem .95rem .6rem .7rem;border-radius:14px;text-decoration:none;cursor:pointer;
  background:linear-gradient(160deg,rgba(38,22,12,.92),rgba(58,30,16,.9));border:1px solid rgba(196,110,64,.45);
  box-shadow:0 14px 34px rgba(0,0,0,.45);transition:transform .2s,border-color .2s;}
.wcp-filo-lantern:hover{transform:translateY(-2px);border-color:rgba(230,150,96,.7);}
.wcp-filo-lantern-flame{flex:none;width:14px;height:20px;border-radius:50% 50% 46% 46%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 72%,#ffdf9e 0 28%,#e8935a 60%,#b0522a 100%);
  box-shadow:0 0 14px 3px rgba(232,147,90,.45);}
.wcp-filo-lantern-glow .wcp-filo-lantern-flame{animation:wcp-filo-flicker 2.6s ease-in-out infinite;}
@keyframes wcp-filo-flicker{0%,100%{box-shadow:0 0 14px 3px rgba(232,147,90,.45);}50%{box-shadow:0 0 22px 6px rgba(255,196,120,.6);}}
.wcp-filo-lantern-text{display:flex;flex-direction:column;gap:.12rem;min-width:0;}
.wcp-filo-lantern-kicker{font-family:var(--sprk-font-mono,ui-monospace,monospace);font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(240,214,182,.7);}
.wcp-filo-lantern-text strong{font-family:var(--sprk-font-serif,Georgia,serif);font-weight:600;font-size:.98rem;
  color:#f6e7d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Il Filo: the letter as a STOP ON THE PATH — a wax-sealed envelope one step
   beyond the last module node (owner 2026-07-11). JS anchors it relative to the
   last node; these left/top are only the fallback. No emoji: envelope + seal are
   CSS shapes. */
.wcp-filo-stop{position:absolute;left:84%;top:32%;z-index:6;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  width:140px;transform:translate(-50%,-50%);text-decoration:none;cursor:pointer;text-align:center;}
.wcp-filo-stop-trail{width:3px;height:32px;border-radius:3px;
  background-image:repeating-linear-gradient(180deg,rgba(240,220,190,.55) 0 4px,transparent 4px 9px);}
.wcp-filo-stop-env{position:relative;width:76px;height:54px;border-radius:7px;flex:none;
  background:linear-gradient(180deg,#f4ead2,#e3d2ab);
  box-shadow:0 12px 28px rgba(0,0,0,.5),inset 0 0 0 1px rgba(122,90,44,.4);transition:transform .25s;}
.wcp-filo-stop-env::before{content:"";position:absolute;left:0;top:0;width:0;height:0;
  border-left:38px solid transparent;border-right:38px solid transparent;border-top:27px solid rgba(122,90,44,.16);}
.wcp-filo-stop-seal{position:absolute;left:50%;top:19px;width:21px;height:21px;margin-left:-10.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c0663f,#8d3f24 72%);
  box-shadow:0 2px 7px rgba(0,0,0,.45),inset 0 0 0 2.5px rgba(58,26,14,.4);}
.wcp-filo-stop-glow .wcp-filo-stop-seal{animation:wcp-filo-flicker 2.6s ease-in-out infinite;}
.wcp-filo-stop:hover .wcp-filo-stop-env{transform:translateY(-3px);}
.wcp-filo-stop-text{display:flex;flex-direction:column;gap:.1rem;min-width:0;max-width:140px;}
.wcp-filo-stop-kicker{font-family:var(--sprk-font-mono,ui-monospace,monospace);font-size:.54rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(240,220,190,.72);}
.wcp-filo-stop-text strong{font-family:var(--sprk-font-serif,Georgia,serif);font-weight:600;font-size:.85rem;line-height:1.25;
  color:#f7ecd8;text-shadow:0 2px 10px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:700px){
  .wcp-filo-stop{width:112px;}
  .wcp-filo-stop-env{width:62px;height:44px;}
  .wcp-filo-stop-env::before{border-left-width:31px;border-right-width:31px;border-top-width:22px;}
  .wcp-filo-stop-seal{top:15px;width:17px;height:17px;margin-left:-8.5px;}
}

/* ── La Lettera (Il Filo, 2026-07-11): the listened letter as a PATH MODULE.
   Corsivo letter under connected band bars; word-wake; dopo pins. Rides the
   warm .cam-* system. The path node face is a cream envelope + wax seal
   (targeted via data-module-stage="lettera"; CSS shapes, no emoji). */
.cam-lt-wrap{max-width:780px;}
.cam-lt-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 0 1.1rem;flex-wrap:wrap;}
.cam-lt-disc{width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;flex:none;
  background:radial-gradient(circle at 50% 50%,#caa45c 0 15%,#241c12 16% 36%,#35291a 37% 55%,#241c12 56% 74%,#35291a 75% 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 5px rgba(243,234,217,.08);}
.cam-lt-disc.spin{animation:cam-lt-spin 33s linear infinite;}
@keyframes cam-lt-spin{to{transform:rotate(360deg);}}
.cam-lt-side{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;}
.cam-lt-state{font-family:var(--sprk-font-mono,ui-monospace,monospace);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(58,44,26,.6);}
.cam-lt-btns{display:flex;gap:.35rem;flex-wrap:wrap;}
.cam-lt-btns button{font-family:var(--sprk-font-mono,ui-monospace,monospace);font-size:.6rem;letter-spacing:.05em;cursor:pointer;
  border:1px solid rgba(90,66,34,.32);background:rgba(255,255,255,.35);color:rgba(58,44,26,.75);padding:.26rem .6rem;border-radius:99px;}
.cam-lt-btns button.on{background:#a24f2e;border-color:#a24f2e;color:#fff;}
.cam-lt-sheet{border-radius:4px;padding:clamp(1.6rem,4vw,2.8rem) clamp(1.4rem,4vw,3rem);text-align:left;
  background:linear-gradient(180deg,#f7f0de,#efe4c8);color:#3a2c1a;
  box-shadow:0 30px 70px rgba(0,0,0,.35),inset 0 0 80px rgba(120,90,50,.12);}
.cam-lt-para{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.34rem;line-height:1.85;color:rgba(58,44,26,.88);margin:0 0 1.05rem;text-align:justify;}
.cam-lt-address{font-weight:600;font-size:1.5rem;}
.cam-lt-playing{border-left:3px solid #a24f2e;padding-left:.8rem;margin-left:-.8rem;}
.cam-lt-para .tk{transition:color .3s,background-color .3s;}
.cam-lt-para .tk.hid{color:transparent;background-color:rgba(133,101,58,.38);}
.cam-lt-para .w.tk.hid{cursor:pointer;}
.cam-lt-para .tk.hid.lit{background-color:rgba(201,164,92,.62);}
.cam-lt-l1{display:block;font-family:var(--sprk-font-sans,system-ui,sans-serif);font-style:normal;font-size:.9rem;line-height:1.5;
  color:rgba(58,44,26,.55);margin-top:.4rem;padding-left:.9rem;border-left:2px solid rgba(90,66,34,.24);text-align:left;}
.cam-lt-tools{display:flex;gap:.5rem;flex-wrap:wrap;margin:-.55rem 0 1rem;}
.cam-lt-tools button{font-family:var(--sprk-font-mono,ui-monospace,monospace);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  border:1px solid rgba(90,66,34,.24);background:rgba(255,255,255,.35);color:rgba(58,44,26,.55);border-radius:99px;padding:.2rem .6rem;}
.cam-lt-tools button:hover{border-color:#a24f2e;color:#a24f2e;}
.cam-lt-fine{display:flex;justify-content:center;margin:1.3rem 0 0;}
.cam-lt-fine button{font-family:var(--sprk-font-mono,ui-monospace,monospace);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  border:1px solid rgba(90,66,34,.32);background:transparent;color:rgba(58,44,26,.7);padding:.5rem 1.1rem;border-radius:99px;}
.cam-lt-fine .cam-lt-avanti{background:#a24f2e;border-color:#a24f2e;color:#fff;}
.cam-lt-pins{margin:1.4rem auto 0;border-radius:4px;padding:clamp(1.2rem,3.5vw,2rem) clamp(1.2rem,3.5vw,2.2rem);text-align:left;
  background:linear-gradient(180deg,#efe4c8,#e2d3ae);color:#3a2c1a;box-shadow:0 24px 60px rgba(0,0,0,.3);}
.cam-lt-pinshead{font-family:var(--sprk-font-mono,ui-monospace,monospace);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#a24f2e;text-align:center;margin:0 0 1rem;}
.cam-lt-pin{border-top:1px dashed rgba(90,66,34,.24);padding:1rem 0 .4rem;}
.cam-lt-pinkind{font-family:var(--sprk-font-mono,ui-monospace,monospace);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(58,44,26,.5);margin:0 0 .35rem;}
.cam-lt-pinprompt{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.12rem;line-height:1.5;margin:0 0 .6rem;}
.cam-lt-line{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.14rem;margin:0 0 .6rem;}
.cam-lt-input{display:block;width:100%;box-sizing:border-box;font-family:var(--sprk-font-sans,system-ui,sans-serif);font-size:.95rem;line-height:1.5;
  color:inherit;background:rgba(255,255,255,.4);border:1px solid rgba(90,66,34,.24);border-radius:8px;padding:.6rem .7rem;resize:vertical;}
.cam-lt-send{margin-top:.55rem;font-family:var(--sprk-font-mono,ui-monospace,monospace);font-size:.62rem;letter-spacing:.06em;cursor:pointer;
  border:1px solid #a24f2e;background:#a24f2e;color:#fff;padding:.4rem .9rem;border-radius:99px;}
.cam-lt-opt{display:block;width:100%;text-align:left;font-family:var(--sprk-font-sans,system-ui,sans-serif);font-size:.92rem;line-height:1.45;cursor:pointer;
  margin:0 0 .45rem;padding:.5rem .75rem;border-radius:10px;border:1px solid rgba(90,66,34,.24);background:rgba(255,255,255,.35);color:inherit;}
.cam-lt-opt:hover{border-color:#a24f2e;}
.cam-lt-opt.right{border-color:#3f7d4e;background:rgba(63,125,78,.16);}
.cam-lt-opt.wrong{border-color:#a24f2e;background:rgba(162,79,46,.14);}
.cam-lt-res{font-family:var(--sprk-font-sans,system-ui,sans-serif);font-size:.9rem;color:rgba(58,44,26,.82);background:rgba(201,164,92,.18);
  border-radius:8px;padding:.5rem .7rem;margin:.6rem 0 0;}

/* the lettera node ON the path: a cream envelope with a wax seal */
.wcp-emblem-node[data-module-stage="lettera"]{background:linear-gradient(180deg,#f4ead2,#e3d2ab);
  box-shadow:0 12px 28px rgba(0,0,0,.45),inset 0 0 0 1px rgba(122,90,44,.4);}
.wcp-emblem-node[data-module-stage="lettera"] img{display:none;}
.wcp-emblem-node[data-module-stage="lettera"]::before{content:"";position:absolute;left:8%;right:8%;top:10%;height:36%;
  background:linear-gradient(115deg,transparent 46%,rgba(122,90,44,.2) 47% 53%,transparent 54%),
             linear-gradient(245deg,transparent 46%,rgba(122,90,44,.2) 47% 53%,transparent 54%);}
.wcp-emblem-node[data-module-stage="lettera"]::after{content:"";position:absolute;left:50%;top:38%;width:26%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c0663f,#8d3f24 72%);
  box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 0 0 2px rgba(58,26,14,.4);}

/* ── La Prova (D7/P6): the graduation exam chrome — wax seal, exam sheet, meter.
   Rides the warm .cam-* system; the seal is CSS (no emoji, no images). */
.cam-pv-surface .cam-wrap{max-width:680px;text-align:center;}
.cam-pv-seal{width:92px;height:92px;margin:0 auto 1.1rem;border-radius:50%;position:relative;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 36%,#b8433a,#8f2f28 68%);
  box-shadow:0 10px 26px rgba(0,0,0,.5),inset 0 2px 6px rgba(255,255,255,.18);}
.cam-pv-seal::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1.5px dashed rgba(255,235,220,.5);}
.cam-pv-seal span{font-family:var(--cam-serif,Georgia,serif);font-style:italic;font-weight:700;font-size:2.1rem;color:#ffe9df;}
.cam-pv-seal.is-pass{background:radial-gradient(circle at 40% 36%,#3d8f6c,#2a6b4e 68%);}
.cam-pv-seal.is-fail{filter:saturate(.55);}
.cam-pv-line{font-family:var(--cam-serif,Georgia,serif);font-style:italic;font-size:1.35rem;line-height:1.5;color:#fdf6e9;margin:.4rem 0 .8rem;}
.cam-pv-exam{background:rgba(20,14,9,.5);border:1px solid rgba(242,231,214,.16);border-radius:16px;padding:1.1rem 1.25rem;text-align:left;margin:1.2rem 0;}
.cam-pv-eh{display:flex;justify-content:space-between;font-family:var(--cam-mono,monospace);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,231,214,.6);margin-bottom:.6rem;}
.cam-pv-obj{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-top:1px solid rgba(242,231,214,.1);}
.cam-pv-obj:first-of-type{border-top:0;}
.cam-pv-mo{flex:none;min-width:44px;text-align:center;padding:.35rem .4rem;border-radius:8px;font-family:var(--cam-mono,monospace);font-size:.56rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.cam-pv-mo-listen{background:rgba(92,111,158,.3);color:#c3d0ee;}
.cam-pv-mo-speak{background:rgba(192,102,63,.3);color:#f2c3a8;}
.cam-pv-mo-write{background:rgba(181,138,60,.3);color:#eed7a0;}
.cam-pv-mo-curveball{background:rgba(143,47,40,.4);color:#f4c0b6;}
.cam-pv-ot{flex:1;font-family:var(--cam-serif,Georgia,serif);font-size:1.08rem;color:#fbf1e4;line-height:1.3;}
.cam-pv-ot em.cam-pv-on{display:block;font-family:var(--cam-gloss,Georgia,serif);font-style:italic;font-size:.9rem;color:rgba(242,231,214,.62);margin-top:.15rem;}
.cam-pv-wt{flex:none;font-family:var(--cam-mono,monospace);font-size:.62rem;color:rgba(242,231,214,.55);}
.cam-pv-obj.is-curve .cam-pv-ot::after{content:" · obligatorisk";font-family:var(--cam-mono,monospace);font-size:.56rem;letter-spacing:.06em;color:#e08a7e;text-transform:uppercase;}
.cam-pv-answer{display:flex;align-items:center;gap:.8rem;justify-content:center;margin:.6rem 0 0;}
.cam-pv-input{flex:1 1 auto;min-width:0;max-width:30rem;box-sizing:border-box;font-family:var(--cam-gloss,Georgia,serif);font-style:italic;font-size:1.15rem;line-height:1.4;color:#fdf6e9;background:rgba(243,232,214,.07);border:1px solid rgba(243,232,214,.2);border-radius:14px;padding:.7rem 1rem;resize:vertical;}
.cam-pv-input:focus{outline:none;border-color:var(--cam-terra,#c0663f);background:rgba(243,232,214,.1);}
.cam-pv-note{font-family:var(--cam-mono,monospace);font-size:.62rem;letter-spacing:.08em;color:rgba(243,232,214,.55);min-height:1em;margin:.6rem 0 0;}
/* Soft timer (NEW-6, written prova) — makes spontaneity visible, never locks.
   Matches the /lab/ux/la-prova soft-clock: gold + pulse while time remains, muted on lapse. */
.cam-pv-clock{display:flex;align-items:center;gap:.55rem;justify-content:center;margin:0 0 1.2rem;font-family:var(--cam-mono,monospace);font-size:.7rem;letter-spacing:.04em;color:rgba(243,232,214,.72);}
.cam-pv-clock .sc-dot{width:8px;height:8px;border-radius:50%;background:var(--cam-gold,#b58a3c);box-shadow:0 0 0 4px rgba(181,138,60,.18);animation:campvpulse 2s ease-in-out infinite;}
.cam-pv-clock .sc-t{font-size:1rem;font-weight:600;color:#eed7a0;font-variant-numeric:tabular-nums;}
.cam-pv-clock .sc-note{font-family:var(--cam-gloss,Georgia,serif);font-style:italic;font-size:.9rem;color:rgba(243,232,214,.6);}
.cam-pv-clock.lapsed .sc-dot{background:rgba(243,232,214,.4);box-shadow:none;animation:none;}
.cam-pv-clock.lapsed .sc-t{color:rgba(243,232,214,.55);}
@keyframes campvpulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.cam-pv-row{margin-top:1.1rem;display:flex;justify-content:center;}
.cam-pv-meter{margin:1rem 0 .4rem;text-align:left;}
.cam-pv-ml{display:flex;justify-content:space-between;font-family:var(--cam-mono,monospace);font-size:.62rem;color:rgba(242,231,214,.6);margin-bottom:.45rem;}
.cam-pv-bar{height:10px;border-radius:6px;background:rgba(242,231,214,.12);position:relative;overflow:hidden;}
.cam-pv-bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,var(--cam-terra,#c0663f),#b58a3c);}
.cam-pv-bar>u{position:absolute;top:-4px;bottom:-4px;width:2px;background:#fbf1e4;}
.cam-pv-tl{font-family:var(--cam-mono,monospace);font-size:.58rem;color:rgba(242,231,214,.5);margin-top:.4rem;}

/* Optional kit hints (owner 2026-07-15): on LLM surfaces the per-objective
 * hints are collapsed until asked for. data-hints lives on #scn-kit. */
.scn-kit[data-hints="off"] .scn-obj-hint { display: none; }
.scn-hint-toggle {
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: 14px;
  border: 1px solid rgba(80, 60, 35, 0.25);
  background: transparent;
  color: rgba(80, 60, 35, 0.62);
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.scn-hint-toggle:hover { color: rgba(80, 60, 35, 0.9); border-color: rgba(80, 60, 35, 0.5); }
.scn-hint-toggle[aria-pressed="true"] { border-color: var(--scn-accent, #b85e3f); color: var(--scn-accent, #b85e3f); }

/* Feedback-fidelity mirror chip (plan F4) — names the learner's own past slip,
   exact + dated, then closes when the fix is proven. Mirror-voice, no juice, no
   emoji (a CSS dot). Theme-aware via the accent/ink tokens (dark flips them). */
#module-overlay .module-repair-chip {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-1, 8px);
  background: var(--accent-tint, rgba(184, 146, 42, 0.14));
  font-size: 0.86rem;
  line-height: 1.35;
  overflow: hidden;
  max-height: 6rem;
  opacity: 1;
  transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.4s ease, padding 0.4s ease;
}
#module-overlay .module-repair-chip .module-repair-chip-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 0.35em;
  border-radius: var(--radius-pill, 999px);
  background: var(--accent-strong, var(--accent));
}
#module-overlay .module-repair-chip .module-repair-chip-text {
  color: var(--ink-soft, var(--ink));
}
#module-overlay .module-repair-chip .module-repair-chip-rule {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-faint, var(--ink-soft));
  font-size: 0.82rem;
}
#module-overlay .module-repair-chip.is-closing {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  #module-overlay .module-repair-chip { transition: opacity 0.2s ease; }
  #module-overlay .module-repair-chip.is-closing { max-height: 0; }
}