@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap');

:root {
  --dialogue-forest: #103d21;
  --dialogue-deep: #0c3319;
  --dialogue-ink: #1d211c;
  --dialogue-paper: #f4f1e6;
  --dialogue-card: #fffdf7;
  --dialogue-line: #d8d3c2;
  --dialogue-gold: #b9924f;
  --dialogue-moss: #6f8f62;
  --dialogue-clay: #b0563a;
  --dialogue-focus: #1f7a47;
  --dialogue-gold-soft: #f0e6cd;
  --dialogue-moss-soft: #e3ead9;
  --dialogue-forest-rgb: 16,61,33;
  --dialogue-ink-soft: #5f6a5c;
}

html { font-family: 'Public Sans', system-ui, sans-serif; }
body { background: var(--dialogue-paper); }

/*
 * Dialogue shared activity layer
 * ------------------------------
 * This file is deliberately a skin, not a layout reset. Each activity keeps
 * its own illustrations, game states, and semantic colors; this layer only
 * harmonises the surfaces that frame them.
 */
body.dialogue-activity-shell {
  --bg: var(--dialogue-paper);
  --surface: var(--dialogue-card);
  --surface-card: var(--dialogue-card);
  --surface-hover: var(--dialogue-moss-soft);
  --border: var(--dialogue-line);
  --border-focus: var(--dialogue-focus);
  --accent: var(--dialogue-forest);
  --accent-hover: var(--dialogue-deep);
  --accent-glow: rgba(185, 146, 79, .22);
  --text: var(--dialogue-ink);
  --text-muted: var(--dialogue-ink-soft);
  color: var(--dialogue-ink);
  background: var(--dialogue-paper);
  font-family: 'Public Sans', system-ui, sans-serif;
}

body.dialogue-home {
  --bg: #eae7dc;
  --surface: var(--dialogue-paper);
  --surface-card: var(--dialogue-card);
  --surface-hover: var(--dialogue-moss-soft);
  --border: var(--dialogue-line);
  --accent: var(--dialogue-forest);
  --accent-hover: var(--dialogue-deep);
  --accent-glow: rgba(185, 146, 79, .22);
  --text: var(--dialogue-ink);
  --text-muted: var(--dialogue-ink-soft);
  color: var(--dialogue-ink);
  background: #eae7dc;
  font-family: 'Public Sans', system-ui, sans-serif;
}

/* Dark-first activities keep their interaction contrast, but inherit the
   Dialogue forest rather than an unrelated navy product shell. */
body.dialogue-activity-shell:has(.setup-view) {
  --bg: var(--dialogue-deep);
  --surface: #174629;
  --surface-2: #205536;
  --paper: var(--dialogue-card);
  --text: var(--dialogue-paper);
  --muted: #c4d0c0;
  --line: rgba(216, 211, 194, .24);
  --lime: #d2b978;
  --yellow: #d2b978;
  --blue: #9bb695;
  --coral: #c67a5d;
  background: var(--dialogue-deep);
}
body.dialogue-activity-shell:has(.setup-view) :where(.topbar, .panel, .mode-card, .score-column, .phase-card, .complete-card, .help-dialog, .deck-dialog) {
  background-color: #174629;
  border-color: rgba(216, 211, 194, .24);
}
body.dialogue-activity-shell:has(.setup-view) :where(.challenge-card, .deck-card) {
  color: var(--dialogue-ink);
}
body.dialogue-activity-shell:where(:has(.setup-view), :has(.qband), :has(.cardwrap)) {
  --border: rgba(216, 211, 194, .22);
  --glass: rgba(8, 37, 15, .72);
  --ink: var(--dialogue-paper);
  --muted: #c4d0c0;
}
body.dialogue-activity-shell:where(:has(.setup-view), :has(.qband), :has(.cardwrap)) :where(.game-panel, .audio-match-board, .game-picker-card) {
  background: rgba(12, 51, 25, .96);
  border-color: rgba(185, 146, 79, .45);
}
body.dialogue-activity-shell:where(:has(.setup-view), :has(.qband), :has(.cardwrap)) :where(.action, .view-toggle, .game-menu-button) {
  background: rgba(244, 241, 230, .1);
  border-color: rgba(216, 211, 194, .28);
}

/* Good Bird's tabletop is intentionally dark and immersive, not blue. */
body.dialogue-activity-shell:has(#viewer-container) {
  --bg: #0c3319;
  --surface: #174629;
  --border: rgba(216, 211, 194, .24);
  --accent: var(--dialogue-gold);
  --accent-hover: #d2b978;
  --text: var(--dialogue-paper);
  --text-muted: #c4d0c0;
}
body.dialogue-activity-shell:has(#viewer-container) :where(#app-header, .activity-header, .sequence-section, .feedback-banner) {
  background: rgba(16, 61, 33, .97);
}

/* Shared chrome on the older single-file activities. */
.dialogue-activity-shell :where(#app-header, .site-header, .topbar, .activity-header) {
  background: rgba(16, 61, 33, .97);
  color: var(--dialogue-paper);
  border-color: rgba(185, 146, 79, .55);
}
.dialogue-activity-shell :where(#app-header a, #app-header button, .site-header a, .topbar button, .activity-header button) {
  color: var(--dialogue-paper);
}
.dialogue-activity-shell :where(.back-btn, .header-action-btn, .icon-button, .sub-toggle-btn, .btn-secondary, .btn-outline) {
  background: rgba(244, 241, 230, .1);
  border-color: rgba(244, 241, 230, .28);
  color: var(--dialogue-paper);
}
.dialogue-activity-shell :where(.back-btn:hover, .header-action-btn:hover, .icon-button:hover, .sub-toggle-btn:hover, .btn-secondary:hover, .btn-outline:hover) {
  background: rgba(244, 241, 230, .18);
  border-color: var(--dialogue-gold);
}
.dialogue-activity-shell :where(.tab-btn.active, .view-btn.active, .song-mode-btn.active, .btn-primary, .primary-button) {
  background: var(--dialogue-gold);
  border-color: var(--dialogue-gold);
  color: #20180a;
  box-shadow: none;
}
.dialogue-activity-shell :where(.tab-btn:hover, .view-btn:hover, .song-mode-btn:hover) {
  color: var(--dialogue-gold-soft);
}
.dialogue-activity-shell :where(input, select, textarea) {
  background: var(--dialogue-card);
  color: var(--dialogue-ink);
  border-color: var(--dialogue-line);
}
.dialogue-activity-shell :where(input:focus, select:focus, textarea:focus) {
  border-color: var(--dialogue-focus);
  box-shadow: 0 0 0 3px rgba(31, 122, 71, .14);
}
.dialogue-activity-shell :where(.card, .panel, .modal, .dialog, .activity-header, .sequence-section, .feedback-banner, .game-picker-card, .game-panel, .audio-match-board) {
  border-color: var(--dialogue-line);
}

/* Light tools: warm paper surrounds the content, with deep green actions. */
.dialogue-activity-shell :where(.entry-card, .phase-control-card, .topic-card, .wheel-card, .transcript-card, .definition-card, .clues-card, .reflection-card, .group-report, .waiting-card, .qr-card-item, .slide-info-card) {
  background: var(--dialogue-card);
  border-color: var(--dialogue-line);
  box-shadow: 0 18px 50px rgba(16, 61, 33, .09);
}
.dialogue-activity-shell :where(.section-kicker, .eyebrow, .card-kicker, .dialog-kicker, .phase-kicker) {
  color: #8a6d2c;
}

/* Immersive readers retain a forest-tinted stage instead of a paper canvas. */
.dialogue-activity-shell :where(#viewer-container, #song-container, .song-wrapper, .tabletop-section, .stage) {
  background-color: var(--dialogue-deep);
}
.dialogue-activity-shell :where(.tabletop-section) {
  background-image:
    radial-gradient(circle at 50% 35%, rgba(111, 143, 98, .16), transparent 48%),
    linear-gradient(145deg, #174629 0%, #0c3319 62%, #08250f 100%);
}
/* Explicit projector stages; never darken an unrelated light .app. */
body.dialogue-activity-shell:has(.setup-view) .app,
body.dialogue-activity-shell:has(.qband) .app,
body.dialogue-activity-shell:has(.cardwrap) .app {
  background-color: var(--dialogue-deep);
  background-image:
    radial-gradient(circle at 50% -4%, rgba(111, 143, 98, .2), transparent 46%),
    radial-gradient(circle at 92% 4%, rgba(185, 146, 79, .1), transparent 32%),
    linear-gradient(150deg, #174629 0%, #0c3319 58%, #08250f 100%);
}
.dialogue-activity-shell :where(.game-picker, .phase-overlay, .session-complete, .cloze-modal-overlay, #celebration-overlay) {
  background: rgba(8, 37, 15, .86);
}
.dialogue-activity-shell :where(.game-picker-card, .phase-card, .complete-card, .cloze-card) {
  background: var(--dialogue-card);
  color: var(--dialogue-ink);
  border-color: var(--dialogue-gold);
  box-shadow: 0 28px 90px rgba(5, 32, 13, .34);
}

/* Do not recolour illustrations or semantic game states. Gold is chrome only. */
.dialogue-activity-shell :where(.qr-card-preview-wrap, .slide-qr-card, .qr-frame) {
  background: #fffdf7;
  border-color: #fffdf7;
}
.dialogue-activity-shell :where(.slide-nav-btn, .fullscreen, #fullscreen-btn) {
  background: var(--dialogue-forest);
  border-color: var(--dialogue-gold);
  color: var(--dialogue-paper);
}
.dialogue-activity-shell :where(.slide-nav-btn:hover, .fullscreen:hover, #fullscreen-btn:hover) {
  background: var(--dialogue-deep);
}

/* Homepage directory and presentation views. */
.dialogue-home :where(#app-header) { background: rgba(16, 61, 33, .97); border-color: rgba(185, 146, 79, .55); }
.dialogue-home :where(#grid-view) { background: #eae7dc; }
.dialogue-home :where(.qr-card-item, .slide-info-card, .slideshow-footer) {
  background: var(--dialogue-card);
  border-color: var(--dialogue-line);
  box-shadow: 0 16px 38px rgba(16, 61, 33, .1);
}
.dialogue-home :where(#slideshow-view) {
  background: radial-gradient(circle at 60% 35%, #1b4d2c 0%, #0c3319 62%, #08250f 100%);
}
.dialogue-home :where(.slide-title, .qr-card-title) { color: var(--dialogue-ink); text-shadow: none; }
.dialogue-home :where(.slide-desc, .qr-card-desc) { color: var(--dialogue-ink-soft); }
.dialogue-home .slide-feature-badge {
  color: #38543b;
  background: var(--dialogue-moss-soft);
  border-color: #b9c8af;
}
.dialogue-home :where(.slide-url-box) { background: #f0ede3; border-color: var(--dialogue-line); }
.dialogue-home :where(.slide-url-text) { color: var(--dialogue-forest); }
.dialogue-home :where(.slide-action-btn, .fs-toggle-btn, .qr-card-present-btn) {
  color: var(--dialogue-ink);
  background: var(--dialogue-moss-soft);
  border-color: #b9c8af;
}
.dialogue-home :where(.play-pause-btn, .slide-qr-scan-badge) { background: var(--dialogue-forest); box-shadow: none; }
.dialogue-home :where(.grid-search-input) { background: var(--dialogue-card); color: var(--dialogue-ink); border-color: var(--dialogue-line); }

/* QR hub is an activity route, so its body receives dialogue-activity-shell
   rather than dialogue-home. */
body.dialogue-activity-shell:has(#slideshow-view) #app-header {
  background: rgba(16, 61, 33, .98);
}
body.dialogue-activity-shell:has(#slideshow-view) #slideshow-view {
  background: radial-gradient(circle at 58% 34%, #1b4d2c 0%, #0c3319 62%, #08250f 100%);
}
body.dialogue-activity-shell:has(#slideshow-view) .slide-info-card {
  color: var(--dialogue-ink);
  background: var(--dialogue-card);
  border-color: var(--dialogue-line);
}
body.dialogue-activity-shell:has(#slideshow-view) .slide-info-card :where(.slide-title, .slide-desc, .slide-feature-badge, .slide-url-text) {
  color: var(--dialogue-ink);
}
body.dialogue-activity-shell:has(#slideshow-view) .slide-info-card :where(.slide-counter-badge, .slide-category-pill) {
  color: #5c451c;
  background: var(--dialogue-gold-soft);
  border-color: #d2b978;
}
body.dialogue-activity-shell:has(#slideshow-view) .slide-info-card .slide-url-box {
  background: #f0ede3;
  border-color: var(--dialogue-line);
}
body.dialogue-activity-shell:has(#slideshow-view) .slide-info-card :where(.slide-action-btn, .fs-toggle-btn) {
  color: var(--dialogue-ink);
  background: var(--dialogue-moss-soft);
  border-color: #b9c8af;
}
body.dialogue-activity-shell:has(#slideshow-view) .slide-qr-card {
  background: #fff;
  border-color: #fff;
}
body.dialogue-activity-shell:has(#slideshow-view) :where(.slide-progress-bar, .play-pause-btn, .slide-qr-scan-badge) {
  background: var(--dialogue-forest);
  box-shadow: none;
}

/* Busy Pictures receives this layer at runtime because its bundled HTML is too
   large to patch safely. Replace its navy utility chrome, not its illustration
   or semantic grammar/vocabulary feedback colors. */
body.dialogue-activity-shell:has(#prompt-panel) #page-nav-bar,
body.dialogue-activity-shell:has(#prompt-panel) #speech-toast,
body.dialogue-activity-shell:has(#prompt-panel) #prompt-panel,
body.dialogue-activity-shell:has(#prompt-panel) #tour-controls {
  color: var(--dialogue-paper);
  background: rgba(12, 51, 25, .94);
  border-color: rgba(185, 146, 79, .58);
  box-shadow: 0 12px 34px rgba(5, 32, 13, .34);
}
body.dialogue-activity-shell:has(#prompt-panel) #page-indicator,
body.dialogue-activity-shell:has(#prompt-panel) #speech-toast .toast-title {
  color: #dec78f;
}
body.dialogue-activity-shell:has(#prompt-panel) .nav-btn,
body.dialogue-activity-shell:has(#prompt-panel) #tour-launch,
body.dialogue-activity-shell:has(#prompt-panel) #mute-btn,
body.dialogue-activity-shell:has(#prompt-panel) #toggle-btn,
body.dialogue-activity-shell:has(#prompt-panel) #fullscreen-btn {
  color: var(--dialogue-paper);
  background: rgba(16, 61, 33, .96);
  border-color: rgba(185, 146, 79, .65);
}
body.dialogue-activity-shell:has(#prompt-panel) .nav-btn:hover,
body.dialogue-activity-shell:has(#prompt-panel) #tour-launch:hover,
body.dialogue-activity-shell:has(#prompt-panel) #mute-btn:hover,
body.dialogue-activity-shell:has(#prompt-panel) #toggle-btn:hover,
body.dialogue-activity-shell:has(#prompt-panel) #fullscreen-btn:hover {
  color: #20180a;
  background: var(--dialogue-gold);
}
body.dialogue-activity-shell:has(#prompt-panel) .action-btn.primary {
  color: #20180a;
  background: var(--dialogue-gold);
  border-color: var(--dialogue-gold);
}
body.dialogue-activity-shell:has(#prompt-panel) .action-btn.primary:hover {
  color: var(--dialogue-paper);
  background: var(--dialogue-forest);
  border-color: var(--dialogue-gold);
}

/* Debate presentation cards use the light paper treatment, so restore ink
   explicitly without touching government/opposition semantic accents. */
body.dialogue-activity-shell:has(#modal-slideshow) #modal-slideshow {
  background: #0c3319 !important;
}
body.dialogue-activity-shell:has(#modal-slideshow) #modal-slideshow .modal-dialog.slideshow-dialog {
  background: var(--dialogue-paper) !important;
  color: var(--dialogue-ink);
}
body.dialogue-activity-shell:has(#modal-slideshow) #modal-slideshow .slideshow-header-bar {
  background: var(--dialogue-forest);
  color: var(--dialogue-paper);
  border-color: rgba(185, 146, 79, .55);
}
body.dialogue-activity-shell:has(#modal-slideshow) #modal-slideshow .slideshow-content {
  background: var(--dialogue-paper);
  color: var(--dialogue-ink);
}
body.dialogue-activity-shell:has(#modal-slideshow) #modal-slideshow :where(.slideshow-slide, .turn-persona-card, .turn-action-card, .speech-queue-card, .card) {
  color: var(--dialogue-ink);
}
body.dialogue-activity-shell:has(#modal-slideshow) #modal-slideshow :where(.slide-heading-en, .turn-action-title-en, .card-title, .card-desc) {
  color: var(--dialogue-ink);
  text-shadow: none;
}
body.dialogue-activity-shell:has(#modal-slideshow) #modal-slideshow :where(.slide-heading-bn, .turn-action-title-bn, .turn-speaker-title) {
  color: #38543b;
}
body.dialogue-activity-shell:has(#modal-slideshow) #modal-slideshow :where(.turn-persona-card, .turn-action-card, .speech-queue-card, .card) {
  background: var(--dialogue-card);
  border-color: var(--dialogue-line);
  box-shadow: 0 12px 28px rgba(16, 61, 33, .1);
}

/* Debate's regular motion hero is a light card too; its legacy hard-coded
   white type otherwise disappears after the paper reskin. */
body.dialogue-activity-shell:has(.topic-hero) header.app-header {
  background: rgba(16, 61, 33, .98);
  border-color: rgba(185, 146, 79, .55);
}
body.dialogue-activity-shell:has(.topic-hero) :where(.topic-hero, .card) {
  color: var(--dialogue-ink);
}
body.dialogue-activity-shell:has(.topic-hero) .topic-hero {
  background: var(--dialogue-card);
  border-color: var(--dialogue-line);
  box-shadow: 0 16px 38px rgba(16, 61, 33, .1);
}
body.dialogue-activity-shell:has(.topic-hero) :where(.motion-title-en, .motion-title-bn, .card-title, .card-desc) {
  color: var(--dialogue-ink);
  text-shadow: none;
}
body.dialogue-activity-shell:has(.topic-hero) .card-desc {
  color: var(--dialogue-ink-soft);
}
body.dialogue-activity-shell:has(.topic-hero) :where(.motion-badge, .motion-category-tag) {
  color: #5c451c;
  background: var(--dialogue-gold-soft);
  border-color: #d2b978;
}
body.dialogue-activity-shell:has(.topic-hero) main.main-content > div[style*="linear-gradient"] {
  background: var(--dialogue-card) !important;
  border-color: var(--dialogue-line) !important;
  color: var(--dialogue-ink);
}
body.dialogue-activity-shell:has(.topic-hero) main.main-content > div[style*="linear-gradient"] :where(div[style*="font-weight: 800"], div[style*="font-size: 0.78rem"]) {
  color: var(--dialogue-ink) !important;
}

/* Guess What: cream type remains legible on its forest presentation surfaces. */
body.dialogue-activity-shell:has(.setup-view) {
  color: var(--dialogue-paper);
}
body.dialogue-activity-shell:has(.setup-view) :where(.hero h1, .mode-copy h2, .mode-card strong, .settings h2, .score-heading h2, .phase-card h2, .complete-card h2, .topic-prompt h2, .score-column, .shortcut-card, .start-dock) {
  color: var(--dialogue-paper);
}
body.dialogue-activity-shell:has(.setup-view) :where(.mode-copy p, .mode-card small, .hero p, .setting-row p, .class-summary, .speaker-banner p, .score-heading span, .team-meta span, .phase-card > p, .complete-card > p) {
  color: #c4d0c0;
}
body.dialogue-activity-shell:has(.setup-view) .start-dock :where(strong, span) {
  color: var(--dialogue-paper);
}

/* Icebreakers: lift question, support panels, chunks and action tray. */
body.dialogue-activity-shell:has(.qband) {
  --ink: var(--dialogue-paper);
  --muted: #d0d9ca;
  --faint: #a9bba5;
}
body.dialogue-activity-shell:has(.qband) :where(.qband, .q, .note, .panel, .panel__head, .panel__body, .c, .footer, .action, .wh) {
  color: var(--dialogue-paper);
}
body.dialogue-activity-shell:has(.qband) :where(.note, .panel__body, .c, .wh .n, .action .sub) {
  color: #c4d0c0;
}
body.dialogue-activity-shell:has(.qband) :where(.panel, .panel__head, .panel__body) {
  background-color: rgba(23, 70, 41, .86);
  border-color: rgba(216, 211, 194, .24);
}
body.dialogue-activity-shell:has(.qband) .action {
  background: rgba(244, 241, 230, .1);
  color: var(--dialogue-paper);
  border-color: rgba(216, 211, 194, .28);
}
body.dialogue-activity-shell:has(.qband) .action--next {
  background: var(--dialogue-gold);
  color: #20180a;
}

/* Who's This: forest prompt, answer rail and action tray; identity card
   typography stays owned by the card's own light theme. */
body.dialogue-activity-shell:has(.cardwrap) :where(.prompt, .prompt span.q, .footer, .action, .rail, .wh, .kq__a) {
  color: var(--dialogue-paper);
}
body.dialogue-activity-shell:has(.cardwrap) :where(.prompt, .footer, .action, .wh) {
  background-color: rgba(23, 70, 41, .86);
  border-color: rgba(216, 211, 194, .24);
}
body.dialogue-activity-shell:has(.cardwrap) .action--next {
  background: var(--dialogue-gold);
  color: #20180a;
}
body.dialogue-activity-shell:has(.cardwrap) .action--check {
  background: rgba(244, 241, 230, .1);
  color: var(--dialogue-paper);
}

/* Fullscreen owns the whole viewport: no shared shell over the lesson. */
:fullscreen .dialogue-brandbar,
:-webkit-full-screen .dialogue-brandbar,
body.fullscreen-active .dialogue-brandbar,
:fullscreen .dialogue-home #app-header,
:fullscreen .dialogue-activity-shell #app-header,
:-webkit-full-screen #app-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dialogue-brandbar {
  position: fixed;
  z-index: 15000;
  top: 8px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: 38px;
  height: 38px;
  padding: 3px;
  color: var(--dialogue-paper);
  background: rgba(16,61,33,.94);
  border: 1px solid rgba(185,146,79,.65);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16,61,33,.18);
  text-decoration: none;
  backdrop-filter: blur(12px);
  transition: width .2s ease, transform .2s ease, background .2s ease;
  overflow: hidden;
}
.dialogue-brandbar:hover, .dialogue-brandbar:focus-visible { color: var(--dialogue-paper); background: var(--dialogue-deep); transform: translateY(-1px); }
.dialogue-brandbar:hover, .dialogue-brandbar:focus-visible { width: 174px; gap: 9px; padding-right: 11px; }
.dialogue-brandbar img { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; background: var(--dialogue-paper); border-radius: 50%; }
.dialogue-brandbar > span { min-width: 122px; opacity: 0; transform: translateX(-5px); transition: opacity .15s ease, transform .15s ease; }
.dialogue-brandbar:hover > span, .dialogue-brandbar:focus-visible > span { opacity: 1; transform: none; }
.dialogue-brandbar strong { display: block; font-size: 12px; letter-spacing: .04em; }
.dialogue-brandbar span span { display: block; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: #dec78f; }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #d2aa61;
  outline-offset: 3px;
}

/* Keep the shared home control clear of each activity's own chrome. */
/* Reserve only the compact mark's footprint in shared top chrome. The old
   190–210px gutter made the injected bar cover lesson controls on projectors. */
.dialogue-home #app-header { padding-left: 60px; }
.dialogue-activity-shell #app-header { padding-left: 60px; }
.dialogue-activity-shell .site-header { padding-left: 60px; }
.dialogue-activity-shell header.app-header { padding-left: 60px; }
.dialogue-activity-shell .topbar { padding-left: max(60px, env(safe-area-inset-left)); }
.dialogue-activity-shell #page-nav-bar { left: 60px; }

/* Reading pages have their own sticky navigation; keep its first link clear
   without shifting the passage or creating a second overlay layer. */
.dialogue-activity-shell nav.top .bar { padding-left: 60px; }

/* The optional two-page story control used to sit exactly underneath the
   injected mark. Keep both controls visible in projector view. */
.dialogue-activity-shell #story-spread-toggle { left: 60px; top: 8px; }

/* Good Bird: cream cards and a forest tabletop replace the inherited navy
   surfaces while leaving semantic feedback colours and artwork untouched. */
body.dialogue-activity-shell:has(#viewer-container) {
  --bg: #f4f1e6 !important;
  --surface: #fffdf7 !important;
  --surface-hover: #e3ead9 !important;
  --tabletop-bg: radial-gradient(circle at 50% 30%, #285b3c 0%, #174629 64%, #0c3319 100%) !important;
  --border: #d8d3c2 !important;
  --accent: #103d21 !important;
  --accent-hover: #0c3319 !important;
  --text: #f4f1e6 !important;
  --text-muted: #c4d0c0 !important;
}
body.dialogue-activity-shell:has(#viewer-container) :where(.activity-header, .sequence-section, .song-header-bar) {
  background: rgba(16,61,33,.97) !important;
  border-color: rgba(185,146,79,.55) !important;
}
body.dialogue-activity-shell:has(#viewer-container) :where(#viewer-container, #song-container, .song-wrapper) {
  background: #174629 !important;
}
body.dialogue-activity-shell:has(#viewer-container) .tabletop-section {
  background: var(--tabletop-bg) !important;
  border-color: rgba(216,211,194,.3) !important;
}

/* Debate's light content surfaces use ink, while government/opposition remain
   meaningful and distinct. */
body.dialogue-activity-shell:has(.topic-hero) {
  --bg: #eae7dc !important;
  --surface: #f4f1e6 !important;
  --surface-card: #fffdf7 !important;
  --surface-hover: #e3ead9 !important;
  --border: #d8d3c2 !important;
  --accent: #103d21 !important;
  --text: #1d211c !important;
  --text-muted: #5f6a5c !important;
}
body.dialogue-activity-shell:has(.topic-hero) :where(.stepper-bar, .card, .team-card, .schedule-turn-card, .stage-main, .speech-queue-card, .modal-dialog) {
  background: #fffdf7 !important;
  color: #1d211c !important;
  border-color: #d8d3c2 !important;
}
body.dialogue-activity-shell:has(.topic-hero) :where(.team-name-input, .current-speaker-name, .stage-timer-display, .turn-speaker-title, .slide-card-title, .turn-action-title-en) {
  color: #1d211c !important;
}
body.dialogue-activity-shell:has(.topic-hero) .step-tab.active {
  background: var(--dialogue-forest) !important;
  border-bottom-color: var(--dialogue-gold) !important;
  color: var(--dialogue-paper) !important;
}
body.dialogue-activity-shell:has(.topic-hero) .step-tab:not(.active) {
  color: #5f6a5c !important;
}
body.dialogue-activity-shell:has(.topic-hero) .step-tab:not(.active):hover {
  color: var(--dialogue-forest) !important;
  background: var(--dialogue-moss-soft) !important;
}

/* Good Bird widescreen is a projector surface in its own right. These
   explicit selectors win over the activity's legacy navy rules without
   recolouring the photographic story cards. */
body.dialogue-activity-shell:has(#widescreen-container) #widescreen-container {
  --bg: #0c3319;
  background: radial-gradient(circle at 50% 28%, #285b3c 0%, #174629 58%, #0c3319 100%) !important;
  color: var(--dialogue-paper);
}
body.dialogue-activity-shell:has(#widescreen-container) .ws-board-wrapper {
  background: rgba(8,37,15,.28);
  border: 1px solid rgba(216,211,194,.2);
  border-radius: 12px;
}
body.dialogue-activity-shell:has(#widescreen-container) :where(.ws-card, .ws-card-img-wrap) {
  background: var(--dialogue-card);
}
body.dialogue-activity-shell:has(#widescreen-container) .ws-card {
  border-color: #d8d3c2;
  box-shadow: 0 8px 22px rgba(5,32,13,.35);
}
body.dialogue-activity-shell:has(#widescreen-container) .ws-card:hover {
  border-color: var(--dialogue-gold);
  box-shadow: 0 16px 36px rgba(5,32,13,.5);
}
body.dialogue-activity-shell:has(#widescreen-container) .ws-card-stage-tag {
  background: rgba(16,61,33,.92);
  color: var(--dialogue-paper);
  border-color: rgba(185,146,79,.65);
}
body.dialogue-activity-shell:has(#widescreen-container) :where(.ws-header-bar, .ws-spotlight-header, .ws-spotlight-footer) {
  background: rgba(16,61,33,.97) !important;
  border-color: rgba(185,146,79,.55) !important;
  color: var(--dialogue-paper);
}
body.dialogue-activity-shell:has(#widescreen-container) :where(.ws-title-text, .ws-title-text span) {
  color: var(--dialogue-paper) !important;
}
body.dialogue-activity-shell:has(#widescreen-container) .ws-badge,
body.dialogue-activity-shell:has(#widescreen-container) .ws-card-badge,
body.dialogue-activity-shell:has(#widescreen-container) .ws-spotlight-badge {
  background: var(--dialogue-gold-soft) !important;
  border-color: var(--dialogue-gold) !important;
  color: #5c451c !important;
}
body.dialogue-activity-shell:has(#widescreen-container) :where(.ws-segmented-control, .ws-seg-btn, .ws-tool-btn) {
  border-color: rgba(216,211,194,.32);
}
body.dialogue-activity-shell:has(#widescreen-container) .ws-segmented-control {
  background: rgba(8,37,15,.72);
}
body.dialogue-activity-shell:has(#widescreen-container) :where(.ws-seg-btn, .ws-tool-btn) {
  color: var(--dialogue-paper);
  background: rgba(244,241,230,.1);
}
body.dialogue-activity-shell:has(#widescreen-container) .ws-seg-btn.active,
body.dialogue-activity-shell:has(#widescreen-container) .ws-tool-btn.primary {
  background: var(--dialogue-gold) !important;
  border-color: var(--dialogue-gold) !important;
  color: #20180a !important;
  box-shadow: none !important;
}
body.dialogue-activity-shell:has(#widescreen-container) :where(.ws-seg-btn:hover, .ws-tool-btn:hover) {
  background: rgba(185,146,79,.28);
  border-color: var(--dialogue-gold);
  color: var(--dialogue-paper);
}
body.dialogue-activity-shell:has(#widescreen-container) #widescreen-spotlight-modal {
  background: rgba(8,37,15,.92) !important;
}
body.dialogue-activity-shell:has(#widescreen-container) .ws-spotlight-box {
  background: var(--dialogue-card) !important;
  border-color: var(--dialogue-gold) !important;
  box-shadow: 0 25px 80px rgba(5,32,13,.5);
}
body.dialogue-activity-shell:has(#widescreen-container) :where(.ws-spotlight-title, .ws-spotlight-stage) {
  color: var(--dialogue-ink) !important;
}
body.dialogue-activity-shell:has(#widescreen-container) .ws-spotlight-stage {
  color: var(--dialogue-ink-soft) !important;
}
body.dialogue-activity-shell:has(#widescreen-container) :where(.ws-spotlight-nav-btn, .ws-spotlight-close) {
  background: var(--dialogue-forest);
  border-color: var(--dialogue-gold);
  color: var(--dialogue-paper);
}

/* Discussion Rooms keeps red reserved for actual danger/error states; its
   previous teal/coral tokens now speak the shared forest, cream and gold UI. */
body.dialogue-activity-shell:has(.teacher-card) {
  --teal: var(--dialogue-forest) !important;
  --teal-dark: var(--dialogue-deep) !important;
  --teal-soft: var(--dialogue-moss-soft) !important;
  --coral: var(--dialogue-gold) !important;
  --coral-soft: var(--dialogue-gold-soft) !important;
  --gold: var(--dialogue-gold) !important;
  --gold-soft: var(--dialogue-gold-soft) !important;
  --blue: var(--dialogue-moss) !important;
}
body.dialogue-activity-shell:has(.teacher-card) .site-header {
  background: rgba(16,61,33,.97);
  border-color: rgba(185,146,79,.55);
}
body.dialogue-activity-shell:has(.teacher-card) :where(.back-link, .wordmark, .wordmark small, .icon-button) {
  color: var(--dialogue-paper);
}
body.dialogue-activity-shell:has(.teacher-card) .wordmark-mark {
  background: var(--dialogue-gold);
}
body.dialogue-activity-shell:has(.topic-hero) #modal-slideshow {
  background: #103d21 !important;
}
body.dialogue-activity-shell:has(.topic-hero) #modal-slideshow .slideshow-nav-bar {
  background: #0c3319 !important;
  border-color: rgba(185,146,79,.6) !important;
}

/* Full-screen activities should remain completely immersive. */
:fullscreen .dialogue-brandbar,
:-webkit-full-screen .dialogue-brandbar,
body.fullscreen-active .dialogue-brandbar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 600px) {
  .dialogue-brandbar { top: 8px; left: 8px; width: 34px; height: 34px; }
  .dialogue-brandbar img { width: 26px; height: 26px; }
  .dialogue-brandbar:hover { width: 150px; }
  .dialogue-home #app-header, .dialogue-activity-shell #app-header { padding-left: 50px; }
  .dialogue-activity-shell .site-header, .dialogue-activity-shell header.app-header, .dialogue-activity-shell .topbar { padding-left: 50px; }
  .dialogue-activity-shell #page-nav-bar { left: 50px; }
  .dialogue-activity-shell nav.top .bar { padding-left: 50px; }
  .dialogue-activity-shell #story-spread-toggle { left: 50px; top: 8px; }
}

/* --------------------------------------------------------------------------
 * Page-aware production pass · September 2026
 *
 * dialogue-brand.js gives every route a stable data-dialogue-page value. This
 * keeps the collection recognisably Dialogue without flattening twenty-seven
 * very different teaching tools into one generic theme.
 * -------------------------------------------------------------------------- */

body[data-dialogue-page] {
  --page-accent: var(--dialogue-gold);
  --page-tint: var(--dialogue-gold-soft);
  --page-shadow: rgba(16, 61, 33, .16);
}
body[data-dialogue-page="action-pictures"],
body[data-dialogue-page="busy-pictures"],
body[data-dialogue-page="picture-this"],
body[data-dialogue-page="whos-this"] { --page-accent: #86a87a; --page-tint: #e3ead9; }
body[data-dialogue-page="debate"],
body[data-dialogue-page="discussion"],
body[data-dialogue-page="cross-cultural-coms"] { --page-accent: #b9924f; --page-tint: #f0e6cd; }
body[data-dialogue-page="emotions"],
body[data-dialogue-page="reflecting-listening"],
body[data-dialogue-page="kindness-repentence"] { --page-accent: #b0563a; --page-tint: #f2ded5; }
body[data-dialogue-page="good-bird"],
body[data-dialogue-page="mouse-strawberry"],
body[data-dialogue-page="american-fisherman"],
body[data-dialogue-page="hingsha"],
body[data-dialogue-page="mezban"],
body[data-dialogue-page="north-end"],
body[data-dialogue-page="stories"],
body[data-dialogue-page="narratives"] { --page-accent: #d2b978; --page-tint: #f0e6cd; }

body[data-dialogue-page] .dialogue-brandbar {
  width: 44px;
  height: 44px;
  border-color: var(--page-accent);
  box-shadow: 0 8px 24px var(--page-shadow);
}
body[data-dialogue-page] .dialogue-brandbar img { width: 36px; height: 36px; flex-basis: 36px; }
body[data-dialogue-page] .dialogue-brandbar:hover,
body[data-dialogue-page] .dialogue-brandbar:focus-visible { width: 184px; }
body[data-dialogue-page] :where(button, a[role="button"], .btn, .action) { min-height: 44px; }

/* 01 · Collection home — directory stays quiet; controls meet touch contrast. */
body[data-dialogue-page="home"] #app-header :where(button, .view-btn) {
  min-height: 44px;
  color: var(--dialogue-paper) !important;
  border-color: rgba(244, 241, 230, .35) !important;
}
body[data-dialogue-page="home"] #app-header .view-btn.active {
  color: #20180a !important;
  background: #d2b978 !important;
}
body[data-dialogue-page="home"] :where(.play-pause-btn, #btn-play-pause),
body[data-dialogue-page="qr"] :where(.play-pause-btn, #btn-play-pause) {
  color: #f4f1e6 !important;
  background: #103d21 !important;
  border: 1px solid #b9924f !important;
  box-shadow: 0 6px 18px rgba(16, 61, 33, .2) !important;
}
body[data-dialogue-page="home"] .timer-selector-group,
body[data-dialogue-page="qr"] .timer-selector-group {
  color: #314034 !important;
  background: #e3ead9 !important;
  border-color: #9aae90 !important;
}
body[data-dialogue-page="home"] .timer-btn,
body[data-dialogue-page="qr"] .timer-btn { color: #314034 !important; }
body[data-dialogue-page="home"] .timer-btn.active,
body[data-dialogue-page="qr"] .timer-btn.active {
  color: #f4f1e6 !important;
  background: #31583e !important;
}
body[data-dialogue-page="home"] .slideshow-dots-track,
body[data-dialogue-page="qr"] .slideshow-dots-track {
  min-height: 46px;
  padding: 0 9px;
  gap: 2px;
  background: #edf3e9;
  border: 1px solid #9aae90;
  border-radius: 999px;
  scrollbar-color: #31583e transparent;
}
body[data-dialogue-page="home"] .slide-dot,
body[data-dialogue-page="qr"] .slide-dot {
  position: relative;
  width: 18px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body[data-dialogue-page="home"] .slide-dot::before,
body[data-dialogue-page="qr"] .slide-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 2px solid #31583e;
  border-radius: 50%;
  background: #fffdf7;
  transform: translate(-50%, -50%);
  transition: width .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
body[data-dialogue-page="home"] .slide-dot:hover::before,
body[data-dialogue-page="qr"] .slide-dot:hover::before {
  background: #d2b978 !important;
  border-color: #6d5624 !important;
  transform: translate(-50%, -50%) scale(1.14);
}
body[data-dialogue-page="home"] .slide-dot.active,
body[data-dialogue-page="qr"] .slide-dot.active {
  width: 34px;
}
body[data-dialogue-page="home"] .slide-dot.active::before,
body[data-dialogue-page="qr"] .slide-dot.active::before {
  width: 28px;
  height: 13px;
  border-radius: 999px;
  background: #103d21 !important;
  border-color: #b9924f !important;
  box-shadow: 0 0 0 2px rgba(185, 146, 79, .2) !important;
}
body[data-dialogue-page="home"] .slide-dot:focus-visible,
body[data-dialogue-page="qr"] .slide-dot:focus-visible {
  outline: 3px solid #b9924f;
  outline-offset: 2px;
}
body[data-dialogue-page="home"] .slide-action-btn,
body[data-dialogue-page="qr"] .slide-action-btn {
  box-sizing: border-box;
  width: 78px;
  min-height: 42px;
  padding: 8px 12px !important;
  justify-content: center;
  line-height: 1;
}
body.dialogue-home .slide-qr-card {
  cursor: zoom-in;
  outline-offset: 5px;
}
body.dialogue-home .slide-qr-card:focus-visible {
  outline: 4px solid #d2b978;
}
body.dialogue-home .qr-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vmin, 40px);
  background: rgba(5, 32, 13, .95);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: zoom-out;
  transition: opacity .16s ease, visibility .16s ease;
}
body.dialogue-home .qr-zoom-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.dialogue-home .qr-zoom-overlay__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(100vw - 36px);
  max-height: calc(100dvh - 36px);
  padding: clamp(15px, 2.2vmin, 26px);
  color: #1d211c;
  background: #fffdf7;
  border: clamp(4px, .55vmin, 7px) solid #b9924f;
  border-radius: clamp(20px, 3vmin, 34px);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .56);
  transform: scale(.94);
  transition: transform .16s ease;
}
body.dialogue-home .qr-zoom-overlay.is-visible .qr-zoom-overlay__card { transform: scale(1); }
body.dialogue-home .qr-zoom-overlay__image {
  display: block;
  width: min(80vmin, 880px);
  max-width: 100%;
  max-height: calc(100dvh - 150px);
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  image-rendering: pixelated;
}
body.dialogue-home .qr-zoom-overlay__card p {
  margin: 12px 0 2px;
  color: #17351f;
  font-size: clamp(1rem, 2.2vmin, 1.45rem);
  font-weight: 700;
  text-align: center;
}
body.dialogue-home .qr-zoom-overlay__card strong { color: #6d5624; }
body.dialogue-home .qr-zoom-overlay__card small {
  color: #4f5a4d;
  font-size: clamp(.72rem, 1.4vmin, .95rem);
}
body.dialogue-home .qr-zoom-overlay__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  color: #f4f1e6;
  background: #103d21;
  border: 2px solid #b9924f;
  border-radius: 50%;
  box-shadow: 0 5px 18px rgba(5, 32, 13, .24);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
body.dialogue-home .qr-zoom-overlay__close:hover { color: #20180a; background: #d2b978; }
body.dialogue-home .qr-card-present-btn {
  min-height: 44px;
  color: var(--dialogue-forest) !important;
}

/* 02 · Action Pictures — immersive canvas, forest HUD, legible loading state. */
body[data-dialogue-page="action-pictures"] {
  --text: #f4f1e6 !important;
  --text-muted: #d5dfd1 !important;
  --text-dim: #aebfac !important;
  --accent: #d2b978 !important;
  --accent-hover: #ead8a5 !important;
  --surface: rgba(12, 51, 25, .93) !important;
  --surface-elevated: #174629 !important;
  --surface-hover: #205536 !important;
  --border: rgba(216, 211, 194, .34) !important;
}
body[data-dialogue-page="action-pictures"] :where(.hud-pill, .hud-btn, .flank-btn, #loading-indicator) {
  color: #f4f1e6 !important;
  background: rgba(12, 51, 25, .94) !important;
  border-color: rgba(210, 185, 120, .62) !important;
}
body[data-dialogue-page="action-pictures"] :where(.glass-pill, .btn-icon, .flank-btn) {
  color: #f4f1e6 !important;
  background: rgba(12, 51, 25, .94) !important;
  border-color: rgba(210, 185, 120, .62) !important;
}
body[data-dialogue-page="action-pictures"] :where(.btn-primary, .btn-dice) {
  color: #20180a !important;
  background: #d2b978 !important;
  border-color: #d2b978 !important;
}
body[data-dialogue-page="action-pictures"] #viewport-container {
  background-color: #0c3319 !important;
  background-image: radial-gradient(circle at 50% 45%, rgba(86, 125, 91, .28), rgba(5, 32, 13, .98) 76%) !important;
}
body[data-dialogue-page="action-pictures"] :where(.modal-backdrop, #gallery-modal) {
  background: rgba(5, 32, 13, .74) !important;
}
body[data-dialogue-page="action-pictures"] #gallery-modal .modal-card {
  color: #1d211c !important;
  background: #f4f1e6 !important;
  border-color: #b8b29f !important;
}
body[data-dialogue-page="action-pictures"] #gallery-modal :where(.modal-header, .modal-controls) {
  color: #1d211c !important;
  background: #fffdf7 !important;
  border-color: #d8d3c2 !important;
}
body[data-dialogue-page="action-pictures"] #gallery-modal .modal-controls { background: #e9e4d6 !important; }
body[data-dialogue-page="action-pictures"] #gallery-modal .modal-body { background: #f4f1e6 !important; }
body[data-dialogue-page="action-pictures"] #gallery-modal :where(.modal-title, .thumb-title) { color: #1d211c !important; }
body[data-dialogue-page="action-pictures"] #gallery-modal :where(.modal-title span, .thumb-desc) { color: #4f5a4d !important; }
body[data-dialogue-page="action-pictures"] #gallery-modal .search-box input {
  color: #1d211c !important;
  background: #fffdf7 !important;
  border-color: #9aae90 !important;
}
body[data-dialogue-page="action-pictures"] #gallery-modal .filter-tab {
  color: #314034 !important;
  background: #e3ead9 !important;
  border-color: #b8c6af !important;
}
body[data-dialogue-page="action-pictures"] #gallery-modal .filter-tab.active {
  color: #20180a !important;
  background: #d2b978 !important;
  border-color: #b9924f !important;
}
body[data-dialogue-page="action-pictures"] #gallery-modal .thumb-card {
  color: #1d211c !important;
  background: #fffdf7 !important;
  border-color: #d8d3c2 !important;
}
body[data-dialogue-page="action-pictures"] #gallery-modal .thumb-badge {
  color: #f4f1e6 !important;
  background: rgba(16, 61, 33, .94) !important;
  border-color: #b9924f !important;
}
body[data-dialogue-page="action-pictures"] #gallery-modal .thumb-active-indicator {
  color: #20180a !important;
  background: #d2b978 !important;
}
body[data-dialogue-page="action-pictures"] :where(#toast, #loading-indicator) {
  background: rgba(12, 51, 25, .95) !important;
  border-color: #b9924f !important;
}
body[data-dialogue-page="action-pictures"] .spinner {
  border-color: rgba(210, 185, 120, .25) !important;
  border-top-color: #d2b978 !important;
}
body[data-dialogue-page="action-pictures"] :where(.hud-btn:hover, .hud-btn.primary, .flank-btn:hover) {
  color: #20180a !important;
  background: #d2b978 !important;
}
body[data-dialogue-page="action-pictures"] #loading-text { color: #f4f1e6 !important; }

/* 03 · AI Fluency — its component owns layout; shared focus uses the brand. */
body[data-dialogue-page="ai-fluency"] :focus-visible { outline-color: #b9924f; }

/* 04, 10, 14, 18, 19, 22, 26 · image and PDF readers — retain an immersive
   stage while replacing neutral black chrome with forest and gold. */
body[data-dialogue-page="american-fisherman"],
body[data-dialogue-page="ecclesiastes"],
body[data-dialogue-page="hingsha"],
body[data-dialogue-page="kindness-repentence"],
body[data-dialogue-page="mezban"],
body[data-dialogue-page="north-end"],
body[data-dialogue-page="stories"] {
  background: #0c3319 !important;
  color: #f4f1e6 !important;
}
body[data-dialogue-page="american-fisherman"] :where(#loading, .controls, .nav-button),
body[data-dialogue-page="ecclesiastes"] :where(#loading, .controls, .nav-button),
body[data-dialogue-page="hingsha"] :where(#loading, .controls, .nav-button),
body[data-dialogue-page="kindness-repentence"] :where(#loading, .controls, .nav-button),
body[data-dialogue-page="mezban"] :where(#loading, .controls, .nav-button),
body[data-dialogue-page="north-end"] :where(#loading, .controls, .nav-button),
body[data-dialogue-page="stories"] :where(#loading, .controls, .nav-button) {
  color: #f4f1e6 !important;
  background-color: rgba(12, 51, 25, .92) !important;
  border-color: rgba(210, 185, 120, .58) !important;
}

/* 05 · Busy Pictures — cream learning panel with forest actions, over the art. */
body[data-dialogue-page="busy-pictures"] {
  --dialogue-busy-ink: #1d211c;
  background: #e9e4d6 !important;
  color: var(--dialogue-busy-ink) !important;
}
body[data-dialogue-page="busy-pictures"] #viewer-container { background: #e9e4d6 !important; }
body[data-dialogue-page="busy-pictures"] :where(#page-nav-bar, #prompt-panel, #tour-controls) {
  color: var(--dialogue-busy-ink) !important;
  background: rgba(255, 253, 247, .96) !important;
  border-color: #c9c3af !important;
  box-shadow: 0 14px 34px rgba(16, 61, 33, .2) !important;
}
body[data-dialogue-page="busy-pictures"] #speech-toast {
  color: #f4f1e6 !important;
  background: rgba(12, 51, 25, .96) !important;
  border-color: #b9924f !important;
}
body[data-dialogue-page="busy-pictures"] :where(.panel-title, .panel-section-title, .grammar-point, .prompt-text, .vocab-focus-title, .form-toggle-label) {
  color: #1d211c !important;
}
body[data-dialogue-page="busy-pictures"] :where(.panel-subtitle, .instruction-text, .formula-label, .example-label, .vocab-focus-desc) {
  color: #4f5a4d !important;
}
body[data-dialogue-page="busy-pictures"] :where(.mode-toggle-card, .form-toggle-card, .grammar-card, .output-card, .vocab-focus-banner) {
  background: #f4f1e6 !important;
  border-color: #d8d3c2 !important;
}
body[data-dialogue-page="busy-pictures"] :where(.nav-btn, .mode-btn, .form-btn, .action-btn, #tour-launch, #mute-btn, #toggle-btn, #fullscreen-btn) {
  color: #103d21 !important;
  background: #e3ead9 !important;
  border-color: #9aae90 !important;
}
body[data-dialogue-page="busy-pictures"] :where(.tour-btn, .close-panel) {
  color: #f4f1e6 !important;
  background: #103d21 !important;
  border-color: #103d21 !important;
}
body[data-dialogue-page="busy-pictures"] .close-panel {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  border-radius: 10px !important;
  line-height: 1 !important;
}
body[data-dialogue-page="busy-pictures"] :where(.voice-summary, .filter-label) { color: #3f5044 !important; }
body[data-dialogue-page="busy-pictures"] :where(.hint-container, #example-box) {
  color: #1d211c !important;
  background: #edf3e9 !important;
  border-left-color: #31583e !important;
  box-shadow: inset 0 0 0 1px rgba(49, 88, 62, .12);
}
body[data-dialogue-page="busy-pictures"] :where(.hint-title, .hint-text, #hint-text, #example-text) {
  color: #314034 !important;
}
body[data-dialogue-page="busy-pictures"] .hint-title { color: #6d5624 !important; }
body[data-dialogue-page="busy-pictures"] :where(.mode-btn.active-grammar, .mode-btn.active-vocab, .form-btn.active, .action-btn.primary) {
  color: #f4f1e6 !important;
  background: #103d21 !important;
  border-color: #103d21 !important;
}
body[data-dialogue-page="busy-pictures"] :where(#page-indicator, #speech-toast .toast-title) { color: #8a6d2c !important; }
body[data-dialogue-page="busy-pictures"] .flooding-banner {
  color: #493611 !important;
  background: #f0e6cd !important;
  border-color: #b9924f !important;
}
body[data-dialogue-page="busy-pictures"] .dialogue-brandbar { display: none; }
body[data-dialogue-page="busy-pictures"] #page-nav-bar { left: 16px !important; }

/* 06 · Cross-cultural communication — editorial paper and a gold cue line. */
body[data-dialogue-page="cross-cultural-coms"] :where(.card, .scenario-card, .activity-card) {
  background: #fffdf7;
  border-color: #d8d3c2;
}
body[data-dialogue-page="cross-cultural-coms"] :where(.btn-primary, .primary-button) {
  color: #f4f1e6 !important;
  background: #103d21 !important;
}

/* 07 · Debate — light working canvas; semantic teams stay green and red. */
body[data-dialogue-page="debate"] {
  --govt: #176b46 !important;
  --opp: #a93636 !important;
  --text: #1d211c !important;
  --text-muted: #4f5a4d !important;
  --text-dim: #687268 !important;
}
body[data-dialogue-page="debate"] header.app-header :where(.brand-title h1, .brand-title span.sub) {
  color: #f4f1e6 !important;
}
body[data-dialogue-page="debate"] header.app-header .badge-fmt {
  color: #f0e6cd !important;
  background: rgba(185, 146, 79, .2) !important;
  border-color: #b9924f !important;
}
body[data-dialogue-page="debate"] header.app-header :where(.header-btn, .btn-back) {
  color: #1d211c !important;
  background: #fffdf7 !important;
  border-color: #d8d3c2 !important;
}
body[data-dialogue-page="debate"] .step-tab:not(.active) :where(.step-num, span) { color: #4f5a4d !important; }
body[data-dialogue-page="debate"] :where(.btn-action, .btn-primary) {
  color: #f4f1e6 !important;
  background: #103d21 !important;
  border-color: #103d21 !important;
}
body[data-dialogue-page="debate"] :where(.btn-secondary, .timing-btn) {
  color: #314034 !important;
  background: #f4f1e6 !important;
  border-color: #c9c3af !important;
}
body[data-dialogue-page="debate"] .timing-btn.active { color: #f4f1e6 !important; background: #31583e !important; }
body[data-dialogue-page="debate"] #modal-slideshow :where(.slide-step-badge, .slide-badge-row > span) {
  color: #38543b !important;
  background: #f0e6cd !important;
  border-color: #b9924f !important;
}
body[data-dialogue-page="debate"] #modal-slideshow :where(.slide-card-title, .slide-card-bn, .slide-card-desc, .turn-action-title-en, .turn-action-title-bn, .turn-action-desc-en, .turn-action-desc-bn) {
  color: #1d211c !important;
}
body[data-dialogue-page="debate"] #slide-1 .slide-feature-card > div > div[style*="font-size: 1.45rem"],
body[data-dialogue-page="debate"] #slide-1 .slide-feature-card > div > div[style*="font-size: 1.35rem"] {
  color: #1d211c !important;
}
body[data-dialogue-page="debate"] #modal-slideshow .slideshow-content :where(
  [style*="color: #fff"],
  [style*="color: #f1f5f9"],
  [style*="color: #e2e8f0"],
  [style*="color: #cbd5e1"],
  [style*="color: #94a3b8"]
) { color: #1d211c !important; }
body[data-dialogue-page="debate"] #modal-slideshow .slideshow-content [style*="color: #34d399"] { color: #176b46 !important; }
body[data-dialogue-page="debate"] #modal-slideshow .slideshow-content :where([style*="color: #f87171"], [style*="color: #fca5a5"]) { color: #922f2f !important; }
body[data-dialogue-page="debate"] #modal-slideshow .slideshow-content [style*="color: #93c5fd"] { color: #38543b !important; }
body[data-dialogue-page="debate"] #modal-slideshow .slideshow-content [style*="color: #c084fc"] { color: #6a3d7a !important; }
body[data-dialogue-page="debate"] #modal-slideshow .slideshow-content [style*="color: #fbbf24"] { color: #765300 !important; }
body[data-dialogue-page="debate"] #slide-1 .slide-feature-card > div:last-child {
  color: #1d211c !important;
  background: rgba(255, 253, 247, .86) !important;
  border-color: currentColor !important;
}
body[data-dialogue-page="debate"] #modal-slideshow .slideshow-header-bar [style*="color: #93c5fd"] {
  color: #f0e6cd !important;
}
body[data-dialogue-page="debate"] #modal-slideshow :where(.turn-persona-card.govt, .slide-feature-card.govt) {
  background: linear-gradient(180deg, #dbeadf 0%, #fffdf7 100%) !important;
  border-color: #4e8c6d !important;
}
body[data-dialogue-page="debate"] #modal-slideshow :where(.turn-persona-card.opp, .slide-feature-card.opp) {
  background: linear-gradient(180deg, #f1d8d2 0%, #fffdf7 100%) !important;
  border-color: #b85b50 !important;
}
body[data-dialogue-page="debate"] #modal-slideshow :where(.turn-persona-card.accent, .turn-persona-card.warning, .slide-feature-card) {
  background-color: #fffdf7 !important;
}
body[data-dialogue-page="debate"] #modal-slideshow .slideshow-nav-bar :where(.btn-secondary, button) {
  color: #f4f1e6 !important;
  background-color: #174629 !important;
  border-color: #b9924f !important;
}
body[data-dialogue-page="debate"] #modal-slideshow .slide-dot { background: #809184 !important; }
body[data-dialogue-page="debate"] #modal-slideshow .slide-dot.active { background: #d2b978 !important; }

/* 08 · Dialogue Comics — preserve its illustrative voice, repair header links. */
body[data-dialogue-page="dialogue-comics-practice"] :where(header, nav.topbar) :where(a, .nav-link) {
  color: #f4f1e6 !important;
  text-decoration-color: #d2b978;
}
body[data-dialogue-page="dialogue-comics-practice"] :where(.eyebrow, .hint strong) { color: #6d5624 !important; }
body[data-dialogue-page="dialogue-comics-practice"] :where(.step-card p, .quick-start .step p) { color: #405762 !important; }

/* 09 · Discussion Rooms — gold is an accent, not a white-text button fill. */
body[data-dialogue-page="discussion"] {
  --ink: #1d211c;
  --ink-soft: #4f5a4d;
  --paper: #f4f1e6;
  --paper-deep: #e9e4d6;
  --card: #fffdf7;
  --line: #d8d3c2;
  --teal: #174629;
  --teal-dark: #103d21;
  --teal-soft: #e3ead9;
  --coral: #b9924f;
  --coral-soft: #f0e6cd;
  --gold: #b9924f;
  --gold-soft: #f0e6cd;
  --blue: #31583e;
  --blue-soft: #e3ead9;
  --danger: #a14331;
}
body[data-dialogue-page="discussion"] .wordmark-mark { background: #b9924f !important; }
body[data-dialogue-page="discussion"] :where(.onboarding-role.phone, .move-evidence span, .speak-word) {
  color: #174629 !important;
  background: #e3ead9 !important;
  border-color: rgba(23, 70, 41, .22) !important;
}
body[data-dialogue-page="discussion"] :where(.onboarding-close, .modal-close) { border-color: #b9924f !important; }
body[data-dialogue-page="discussion"] :where(.teacher-icon, .recovery-launch-icon) { color: #20180a !important; }
body[data-dialogue-page="discussion"] :where(.primary-button, .entry-action, .btn-primary) {
  color: #f4f1e6 !important;
  background: #103d21 !important;
}
body[data-dialogue-page="discussion"] .intro em { color: #6d5624 !important; }
body[data-dialogue-page="discussion"] :where(.hero h1 em, h1 em) { color: #6d5624 !important; }
body[data-dialogue-page="discussion"] .eyebrow { color: #71591f !important; }
body[data-dialogue-page="discussion"] .onboarding-stage-number { color: #71591f !important; }

/* 11 · Emotions — a composed masthead and readable three-step pathway. */
body[data-dialogue-page="emotions"] .dialogue-brandbar { display: none; }
body[data-dialogue-page="emotions"] .page-shell { padding-inline: clamp(16px, 3vw, 34px); }
body[data-dialogue-page="emotions"] .site-header {
  min-height: 82px;
  margin: 0 calc(clamp(16px, 3vw, 34px) * -1);
  padding: 14px clamp(18px, 3.4vw, 46px) !important;
  background: linear-gradient(110deg, #0c3319 0%, #174629 70%, #285b3c 100%) !important;
  border-bottom: 3px solid #b9924f !important;
  box-shadow: 0 10px 30px rgba(16,61,33,.14);
}
body[data-dialogue-page="emotions"] .site-logo {
  min-height: 48px;
  padding: 5px 12px;
  background: #fffdf7;
  border: 1px solid #d2b978;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(5,32,13,.25);
}
body[data-dialogue-page="emotions"] .site-logo__img { height: 38px; max-height: 38px; }
body[data-dialogue-page="emotions"] .date-chip {
  color: #f4f1e6 !important;
  background: rgba(244,241,230,.12) !important;
  border-color: rgba(244,241,230,.4) !important;
}
body[data-dialogue-page="emotions"] .sticky-bar-container {
  border: 1px solid #d8d3c2;
  border-top: 0;
  background: rgba(255,253,247,.96);
  box-shadow: 0 12px 28px rgba(16,61,33,.1);
}
body[data-dialogue-page="emotions"] :where(.step, .step span, .step strong) { color: #59665c; }
body[data-dialogue-page="emotions"] .step.is-active span { color: #fffdf7 !important; }
body[data-dialogue-page="emotions"] .step.is-active strong { color: #1d211c !important; }
body[data-dialogue-page="emotions"] :where(.quiet-button, .rotation-buttons button, .show-more-clues) {
  min-height: 44px;
  color: #314034 !important;
}
body[data-dialogue-page="emotions"] .intro h1 em { color: #a14331 !important; }
body[data-dialogue-page="emotions"] .intro__copy { color: #4f5a4d !important; }
body[data-dialogue-page="emotions"] .cefr-btn--a { color: #f4f1e6 !important; background: #176b46 !important; }
body[data-dialogue-page="emotions"] .cefr-btn--a :where(strong, span) { color: #f4f1e6 !important; }
body[data-dialogue-page="emotions"] .eyebrow { color: #71591f !important; }

/* 12 + 20 · Good Bird and Red Ripe Strawberry — cream labels on the forest
   tabletop; modal navigation returns to dark ink on cream. */
body[data-dialogue-page="good-bird"] :where(.activity-header h2, .activity-header p, .section-title, .section-hint-text, .feedback-banner, .sequence-section .section-head, .sequence-section .section-title),
body[data-dialogue-page="mouse-strawberry"] :where(.activity-header h2, .activity-header p, .section-title, .section-hint-text, .feedback-banner, .sequence-section .section-head, .sequence-section .section-title) {
  color: #f4f1e6 !important;
}
body[data-dialogue-page="good-bird"] :where(.sequence-section .phase-label, .sequence-section .phase-description, .slot-label),
body[data-dialogue-page="mouse-strawberry"] :where(.sequence-section .phase-label, .sequence-section .phase-description, .slot-label) {
  color: #e3ead9 !important;
}
body[data-dialogue-page="good-bird"] .narrative-stages :where(.stage-title, .stage-desc),
body[data-dialogue-page="mouse-strawberry"] .narrative-stages :where(.stage-title, .stage-desc) {
  color: #f4f1e6 !important;
}
body[data-dialogue-page="good-bird"] :where(.modal-card, .modal-header, .modal-body, .modal-nav),
body[data-dialogue-page="mouse-strawberry"] :where(.modal-card, .modal-header, .modal-body, .modal-nav, .dual-modal-content, .dual-modal-nav) {
  color: #1d211c !important;
  background: #fffdf7 !important;
  border-color: #d8d3c2 !important;
}
body[data-dialogue-page="good-bird"] :where(.modal-close, #modal-prev-btn, #modal-next-btn),
body[data-dialogue-page="mouse-strawberry"] :where(.modal-close, #modal-prev-btn, #modal-next-btn, #dual-modal-prev-btn, #dual-modal-next-btn) {
  color: #f4f1e6 !important;
  background: #103d21 !important;
  border-color: #b9924f !important;
}
body[data-dialogue-page="mouse-strawberry"] #dual-modal-counter { color: #4f5a4d !important; }
body[data-dialogue-page="mouse-strawberry"] #perspective-switcher {
  color: #f4f1e6 !important;
  background: rgba(12, 51, 25, .97) !important;
  border-bottom-color: #b9924f !important;
}
body[data-dialogue-page="mouse-strawberry"] #perspective-switcher > span { color: #f0e6cd !important; }
body[data-dialogue-page="mouse-strawberry"] .perspective-btn {
  min-height: 40px;
  padding: 7px 16px;
  border: 1.5px solid rgba(210, 185, 120, .58);
  border-radius: 999px;
  color: #f4f1e6;
  background: rgba(244, 241, 230, .1);
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
body[data-dialogue-page="mouse-strawberry"] .perspective-btn:hover { transform: translateY(-1px); }
body[data-dialogue-page="mouse-strawberry"] .perspective-btn.active {
  color: #20180a;
  background: #d2b978;
  border-color: #d2b978;
}

/* 13 · Guess What — forest projector stage with dark ink on gold controls. */
body[data-dialogue-page="guess-what"] :where(.brand-mark, .mode-icon, button.active) {
  color: #20180a !important;
}
body[data-dialogue-page="guess-what"] .eyebrow { color: #dec78f !important; }
body[data-dialogue-page="guess-what"] :where(.primary-button, .start-button, .start-dock button) {
  color: #20180a !important;
  background: #d2b978 !important;
}
body[data-dialogue-page="guess-what"] #start-button :where(span, strong),
body[data-dialogue-page="guess-what"] .deck-button strong { color: #17351f !important; }

/* 15 · Icebreakers — question and language support must read on forest. */
body[data-dialogue-page="icebreakers"] {
  --ink: #1d211c !important;
  --muted: rgba(29, 33, 28, .82) !important;
  --faint: rgba(29, 33, 28, .62) !important;
  --glass: rgba(255, 253, 247, .92) !important;
  --border: rgba(23, 70, 41, .22) !important;
  --panel: rgba(255, 253, 247, .88) !important;
  --rule: rgba(23, 70, 41, .17) !important;
}
body[data-dialogue-page="icebreakers"] #app {
  --accent: 140 38% 30% !important;
  background: radial-gradient(circle at 50% -4%, rgba(185, 146, 79, .15), transparent 44%), linear-gradient(150deg, #fffdf7 0%, #f4f1e6 58%, #e9e4d6 100%) !important;
}
body[data-dialogue-page="icebreakers"] .app::before { opacity: .08; }
body[data-dialogue-page="icebreakers"] .topbar {
  margin: -10px -16px 0;
  padding: 10px 16px 10px 56px;
  color: #f4f1e6 !important;
  background: #103d21 !important;
}
body[data-dialogue-page="icebreakers"] .topbar :where(.brand, .pill:not(.is-on)) { color: #f4f1e6 !important; }
body[data-dialogue-page="icebreakers"] .topbar .pill:not(.is-on) { background: rgba(244, 241, 230, .1) !important; }
body[data-dialogue-page="icebreakers"] .topbar .pill.is-on { color: #20180a !important; background: #d2b978 !important; }
body[data-dialogue-page="icebreakers"] :where(.qband, .panel, .panel__head, .panel__body, .footer) {
  color: #1d211c !important;
  background-color: #fffdf7 !important;
  border-color: rgba(23, 70, 41, .22) !important;
}
body[data-dialogue-page="icebreakers"] .qband {
  background: linear-gradient(180deg, #fffdf7, #edf3e9) !important;
  box-shadow: 0 16px 36px rgba(16, 61, 33, .12) !important;
}
body[data-dialogue-page="icebreakers"] :where(.panel__head, .panel__body) { color: #1d211c !important; }
body[data-dialogue-page="icebreakers"] :where(#q, #note, #catLab, #qno, .panel, .panel__head, .panel__body) {
  color: #1d211c !important;
}
body[data-dialogue-page="icebreakers"] .panel :where(.v, .v span, .v b, .c, .wh, .wh span, .lab) { color: #1d211c !important; }
body[data-dialogue-page="icebreakers"] .panel .lab { color: #31583e !important; }
body[data-dialogue-page="icebreakers"] :where(#note b, #catLab) { color: #31583e !important; }
body[data-dialogue-page="icebreakers"] .pill.is-on { border-color: #b9924f !important; }
body[data-dialogue-page="icebreakers"] .action--next :where(span, .sub, .kbd) { color: #20180a !important; }
body[data-dialogue-page="icebreakers"] .action:not(.action--next) :where(span, .sub) { color: #1d211c !important; }

/* 16 · IELTS Reading — restrained academic palette and stronger metadata. */
body[data-dialogue-page="ielts-reading"] :where(.eyebrow, .station-kicker) { color: #6d5624 !important; }
body[data-dialogue-page="ielts-reading"] :where(.tag.pairs, .tag.classroom) {
  color: #513d7c !important;
  background: #eee7f1 !important;
}
body[data-dialogue-page="ielts-reading"] :where(.primary, .btn-primary) { color: #f4f1e6 !important; background: #103d21 !important; }

/* 17 · Community — keep the welcoming dark card instead of paper-washing it. */
body[data-dialogue-page="join-community"] {
  background: radial-gradient(circle at 18% 12%, rgba(111,143,98,.22), transparent 34rem), #08250f !important;
  color: #f4f1e6 !important;
}
body[data-dialogue-page="join-community"] main { background: linear-gradient(145deg, #174629, #0c3319) !important; }
body[data-dialogue-page="join-community"] :where(h1, .intro, .benefits li, .content p) { color: #eef3e9 !important; }
body[data-dialogue-page="join-community"] :where(.direct-link, .maps-link) {
  min-height: 44px;
  color: #17351f !important;
  background: #f0e6cd !important;
  border-color: #d2b978 !important;
}
body[data-dialogue-page="join-community"] .eyebrow { color: #ead8a5 !important; }

/* 21 · Action Narratives — editorial controls around full-bleed imagery. */
body[data-dialogue-page="narratives"] :where(.nav, .controls, .story-header) {
  color: #f4f1e6;
  background: rgba(12,51,25,.94);
  border-color: rgba(210,185,120,.58);
}

/* 23 · Picture This — paper card details stay inked inside a forest theatre. */
body[data-dialogue-page="picture-this"] :where(#card-count, #instructions-text) { color: #314034 !important; }
body[data-dialogue-page="picture-this"] .app { background: radial-gradient(circle at 50% 42%, rgba(111,143,98,.25), transparent 42%), linear-gradient(145deg,#174629,#08250f) !important; }
body[data-dialogue-page="picture-this"] :where(.topbar, .game-strip, .action) { color: #f4f1e6; }
@media (min-width: 700px) {
  body[data-dialogue-page="picture-this"] .stage {
    padding-top: calc(80px + var(--game-header-h, 0px));
  }
  body[data-dialogue-page="picture-this"] .deck {
    width: min(calc(100vw - 32px), calc((100dvh - 172px - var(--game-header-h, 0px)) * var(--card-ratio)), 540px);
  }
}

/* 24 · QR presentation — strong controls on the dark slideshow surround. */
body[data-dialogue-page="qr"] :where(.timer-btn, #btn-fullscreen) {
  min-height: 44px;
  color: #f4f1e6 !important;
  background: #174629 !important;
  border-color: #b9924f !important;
}
body[data-dialogue-page="qr"] .timer-btn.active { color: #20180a !important; background: #d2b978 !important; }

/* 25 · Reflective Listening — preserve the lime signal, use dark readable ink. */
body[data-dialogue-page="reflecting-listening"] .shareButton {
  min-height: 44px;
  color: #17351f !important;
  background: #d2b978 !important;
  border-color: #8a6d2c !important;
}
body[data-dialogue-page="reflecting-listening"] :where(.lead, .quiet) { color: #4f5a4d !important; }

/* 27 · Who's This — restore the physical card face while the room stays forest. */
body[data-dialogue-page="whos-this"] {
  --ink: #f6f7f5 !important;
  --muted: #d8e2d5 !important;
  --faint: #aebfac !important;
  --glass: rgba(8,37,15,.72) !important;
  --border: rgba(216,211,194,.28) !important;
}
body[data-dialogue-page="whos-this"] .app { background: radial-gradient(circle at 50% 22%, rgba(111,143,98,.25), transparent 44%), linear-gradient(150deg,#174629,#08250f) !important; }
body[data-dialogue-page="whos-this"] :where(.card__face, .cardface, .face--front, .face--back) {
  color: #12343a !important;
  background: #fffaf0 !important;
}
body[data-dialogue-page="whos-this"] :where(.card__face .lab, .cardface .lab, .face--front .lab) { color: #455c56 !important; }
body[data-dialogue-page="whos-this"] :where(#pName, #pAge, #pJob, #pFrom, #pPay, .adj) { color: #12343a !important; }
body[data-dialogue-page="whos-this"] :where(.prompt, .footer, .action, .rail, .rolechip, .kq) { color: #f4f1e6 !important; }
body[data-dialogue-page="whos-this"] .action--next { color: #17351f !important; background: #d2b978 !important; }

/* The answer key is printed on the cream identity card. Keep every layer of
   its type in the card's dark ink instead of inheriting the forest-stage type. */
body[data-dialogue-page="whos-this"] .face--back .kq {
  color: #17351f !important;
  background: rgba(255, 253, 247, .84) !important;
  border-color: #d8d3c2 !important;
  box-shadow: none;
}
body[data-dialogue-page="whos-this"] .face--back .kq.is-active {
  background: #e3ead9 !important;
  border-color: #86a87a !important;
  box-shadow: inset 4px 0 0 #b9924f;
}
body[data-dialogue-page="whos-this"] .face--back :where(.kq__q, .kq__a, .kq__a .hi, .kq__a .fig) {
  opacity: 1;
  text-shadow: none;
}
body[data-dialogue-page="whos-this"] .face--back .kq__q { color: #3f5149 !important; }
body[data-dialogue-page="whos-this"] .face--back .kq__a { color: #17351f !important; }
body[data-dialogue-page="whos-this"] .face--back .kq__a .hi { color: #087457 !important; }
body[data-dialogue-page="whos-this"] .face--back .kq__a .fig { color: #536158 !important; }
body[data-dialogue-page="whos-this"] .face--back .kq__n {
  color: #31583e !important;
  background: #f0e6cd;
  border-color: #b9924f;
}
body[data-dialogue-page="whos-this"] .face--back .kq.is-active .kq__n {
  color: #f4f1e6 !important;
  background: #103d21;
  border-color: #103d21;
}

/* Stable circles and full-size speaker glyphs replace the squeezed oval
   controls produced when the shared 44px button rule met the card layout. */
body[data-dialogue-page="whos-this"] .tts { padding: 0; }
body[data-dialogue-page="whos-this"] .tts--prompt {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  color: #f4f1e6;
  background: #103d21;
  border: 2px solid #b9924f;
}
body[data-dialogue-page="whos-this"] .tts--prompt:hover,
body[data-dialogue-page="whos-this"] .tts--prompt.is-speaking {
  color: #17351f;
  background: #d2b978;
  border-color: #d2b978;
}
body[data-dialogue-page="whos-this"] .tts--key {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  color: #f4f1e6;
  background: #174629;
  border: 2px solid #b9924f;
  box-shadow: 0 2px 5px rgba(16, 61, 33, .14);
}
body[data-dialogue-page="whos-this"] .tts--key svg {
  width: 18px;
  height: 18px;
}
body[data-dialogue-page="whos-this"] .tts--key:hover,
body[data-dialogue-page="whos-this"] .tts--key.is-speaking {
  color: #17351f;
  background: #d2b978;
  border-color: #8a6d2c;
}

/* Compact every fixed-height layer together on short phones so all five
   answers remain visible above the passport strip without scrolling. */
@media (max-height: 680px) {
  body[data-dialogue-page="whos-this"] .topbar { padding-bottom: 6px; }
  body[data-dialogue-page="whos-this"] #deckBtn { min-height: 32px; }
  body[data-dialogue-page="whos-this"] .roles { padding-bottom: 6px; }
  body[data-dialogue-page="whos-this"] .rolechip { padding-block: 3px; }
  body[data-dialogue-page="whos-this"] .face--back .band {
    padding: 3px 10px;
  }
  body[data-dialogue-page="whos-this"] .face--back .band::after {
    bottom: -2px;
    height: 2px;
  }
  body[data-dialogue-page="whos-this"] .face--back .key {
    overflow: hidden;
    justify-content: space-between;
    padding: 4px 6px;
    gap: 2px;
  }
  body[data-dialogue-page="whos-this"] .face--back .kq {
    padding: 2px 4px;
    gap: 5px;
    border-radius: 7px;
  }
  body[data-dialogue-page="whos-this"] .face--back .kq__n {
    width: 16px;
    height: 16px;
    margin-top: 0;
    font-size: 7px;
  }
  body[data-dialogue-page="whos-this"] .face--back .kq__q {
    font-size: 8.5px;
    line-height: 1.05;
  }
  body[data-dialogue-page="whos-this"] .face--back .kq__a {
    margin-top: 0;
    font-size: 10px;
    line-height: 1.1;
  }
  body[data-dialogue-page="whos-this"] .tts--key {
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    border-width: 1px;
  }
  body[data-dialogue-page="whos-this"] .tts--key svg {
    width: 14px;
    height: 14px;
  }
  body[data-dialogue-page="whos-this"] .face--back .mrz {
    padding: 2px 10px 3px;
    font-size: 6px;
    line-height: 1;
  }
}

@media (max-width: 600px) {
  body[data-dialogue-page] .dialogue-brandbar { width: 44px; height: 44px; }
  body[data-dialogue-page] .dialogue-brandbar img { width: 36px; height: 36px; }
  body[data-dialogue-page="whos-this"] .topbar { padding-left: 58px; }
  body[data-dialogue-page="action-pictures"] :where(.hud-btn, .flank-btn, .gallery-nav-btn, #info-btn) { min-width: 44px; }
  body[data-dialogue-page="busy-pictures"] :where(.nav-btn, .panel-close, #close-panel, #toggle-btn, #fullscreen-btn) { min-width: 44px; min-height: 44px; }
  body[data-dialogue-page="dialogue-comics-practice"] nav.topbar a { min-height: 44px; display: inline-flex; align-items: center; }
  body[data-dialogue-page="discussion"] :where(.back-link, .icon-button) { min-width: 44px; min-height: 44px; }
  body[data-dialogue-page="good-bird"] .modal-close,
  body[data-dialogue-page="mouse-strawberry"] .modal-close { min-width: 44px; min-height: 44px; }
  body[data-dialogue-page="guess-what"] :where(.icon-button, .brand) { min-width: 44px; }
  body[data-dialogue-page="icebreakers"] :where(.pill, .speak, .action) { min-height: 44px; }
  body[data-dialogue-page="picture-this"] :where(.topbar button, .icon-button) { min-width: 44px; min-height: 44px; }
  body[data-dialogue-page="qr"] :where(.timer-btn, .slide-nav-btn, #btn-open-current) { min-width: 44px; min-height: 44px; }
  body[data-dialogue-page="whos-this"] :where(.speak, .answer-audio, .icon-button) { min-width: 44px; min-height: 44px; }
  body[data-dialogue-page="emotions"] .site-header { min-height: 70px; padding-block: 10px !important; }

  /* Give the illustrated readers a second toolbar row on phones. Long labels
     were technically in-bounds but visually clipped and hard to distinguish. */
  body[data-dialogue-page="good-bird"],
  body[data-dialogue-page="mouse-strawberry"] { --header-h: 104px; }
  body[data-dialogue-page="good-bird"] #app-header,
  body[data-dialogue-page="mouse-strawberry"] #app-header {
    height: var(--header-h);
    padding: 5px 8px 7px 50px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 42px 48px;
    gap: 2px;
  }
  body[data-dialogue-page="good-bird"] #app-header .header-left,
  body[data-dialogue-page="mouse-strawberry"] #app-header .header-left { min-width: 0; gap: 8px; }
  body[data-dialogue-page="good-bird"] #app-header .back-btn,
  body[data-dialogue-page="mouse-strawberry"] #app-header .back-btn {
    min-width: 78px;
    min-height: 38px;
    justify-content: center;
  }
  body[data-dialogue-page="good-bird"] #app-header .story-title,
  body[data-dialogue-page="mouse-strawberry"] #app-header .story-title { min-width: 0; }
  body[data-dialogue-page="good-bird"] #app-header .story-title span,
  body[data-dialogue-page="mouse-strawberry"] #app-header .story-title span { display: none; }
  body[data-dialogue-page="good-bird"] #app-header .nav-tabs,
  body[data-dialogue-page="mouse-strawberry"] #app-header .nav-tabs {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  body[data-dialogue-page="good-bird"] #app-header .tab-btn,
  body[data-dialogue-page="mouse-strawberry"] #app-header .tab-btn {
    min-width: 0;
    min-height: 42px;
    padding: 4px 2px;
    justify-content: center;
    gap: 3px;
    font-size: 0;
  }
  body[data-dialogue-page="good-bird"] #app-header .tab-btn .icon,
  body[data-dialogue-page="mouse-strawberry"] #app-header .tab-btn .icon { font-size: 1.05rem; }
  body[data-dialogue-page="good-bird"] #tab-read::after,
  body[data-dialogue-page="mouse-strawberry"] #tab-read::after { content: "Read"; font-size: .68rem; }
  body[data-dialogue-page="good-bird"] #tab-widescreen::after { content: "Board"; font-size: .68rem; }
  body[data-dialogue-page="good-bird"] #tab-activity::after,
  body[data-dialogue-page="mouse-strawberry"] #tab-activity::after { content: "Order"; font-size: .68rem; }
  body[data-dialogue-page="good-bird"] #tab-song::after,
  body[data-dialogue-page="mouse-strawberry"] #tab-song::after { content: "Song"; font-size: .68rem; }

  body[data-dialogue-page="emotions"] .site-logo { min-height: 42px; }
  body[data-dialogue-page="emotions"] .site-logo__img { height: 32px; }
  body[data-dialogue-page="emotions"] .sticky-bar__left { width: 100%; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); }
  body[data-dialogue-page="emotions"] .audio-tune-inline { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 68px; }
  body[data-dialogue-page="emotions"] .tune-select { width: 100%; min-width: 0; }
  body[data-dialogue-page="debate"] #modal-slideshow .slideshow-content { padding: 14px 16px; }
  body[data-dialogue-page="debate"] header.app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 9px;
    padding: 9px 10px 9px 60px !important;
  }
  body[data-dialogue-page="debate"] .nav-left { min-width: 0; width: 100%; }
  body[data-dialogue-page="debate"] .btn-back { min-width: 44px; width: 44px; padding: 8px; justify-content: center; }
  body[data-dialogue-page="debate"] .btn-back span:last-child,
  body[data-dialogue-page="debate"] .badge-fmt { display: none !important; }
  body[data-dialogue-page="debate"] .brand-title { min-width: 0; }
  body[data-dialogue-page="debate"] .brand-title h1 { font-size: .98rem; line-height: 1.15; }
  body[data-dialogue-page="debate"] .brand-title span.sub { font-size: .66rem; white-space: normal; }
  body[data-dialogue-page="debate"] .nav-right { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  body[data-dialogue-page="debate"] .nav-right .header-btn { min-width: 0; min-height: 44px; justify-content: center; padding: 6px 3px; font-size: .64rem; line-height: 1.15; text-align: center; }
  body[data-dialogue-page="debate"] .stepper-bar { width: 100%; max-width: 100vw; padding-inline: 0; }
  body[data-dialogue-page="debate"] .step-tab { flex: 0 0 140px; }
}