/* ============================================================
   classroom/css/teach.css — Prep View · Class Mode · Teacher Console
   Reuses the classroom palette (classroom.css) + block styles (blocks.css).
   ============================================================ */

.pc-hosterr { background: var(--warn-tint); border: 1.5px solid var(--warn); color: #7A2A22;
  border-radius: 12px; padding: 18px 22px; font-weight: 700; margin: 40px auto; max-width: 520px; text-align: center; }
.pc-hosterr code { background: #fff; border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 6px; }

/* ═══════════════ CLASS MODE (shared presentation window) ═══════════════ */
body.pc-class { margin: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--page); overflow: hidden; }
.pc-class-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--pc-theme-bar, var(--paper)); }
/* Theme token layer (Phase 8 S4): chrome reads --pc-theme-* with today's
   values as the fallback, so no theme = byte-identical default look. */
.pc-class-badge { font-size: 14px; font-weight: 800; padding: 3px 12px; border-radius: 99px;
  background: var(--pc-theme-accent, var(--indigo)); color: #fff; white-space: nowrap; }
.pc-theme-art { font-size: 20px; line-height: 1; margin-right: 2px; }
.pc-class-bt { font-size: 15px; font-weight: 700; color: var(--ink-soft);
  flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-class-stage { flex: 1 1 auto; display: grid; place-items: center; padding: 3vh 4vw; overflow: auto; }
.pc-class-content { width: 100%; max-width: 1000px; }
.pc-class-nav { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 12px; border-top: 1px solid var(--line); background: var(--paper); }
.pc-class-nav button { min-width: 64px; min-height: 48px; border-radius: 99px; border: 1.5px solid var(--indigo-soft);
  background: var(--paper); color: var(--indigo); font-size: 22px; font-weight: 800; cursor: pointer; }
.pc-class-nav button:disabled { opacity: .35; pointer-events: none; }
.pc-class-nav #pc-prog { font-size: 15px; font-weight: 700; color: var(--ink-mid); min-width: 66px; text-align: center; }
.pc-class-nav #pc-open-console { min-width: 0; font-size: 12.5px; font-weight: 700; padding: 6px 12px;
  border-style: dashed; color: var(--ink-soft); }

/* Presentation scale + hide teacher-only cues on the SHARED screen. */
body.pc-class .pcb-block { border: none; box-shadow: none; margin: 0; background: transparent; }
body.pc-class .pcb-head { background: transparent; border: none; padding: 0 0 10px; }
body.pc-class .pcb-body { padding: 0; }
body.pc-class .pcb-big { font-size: clamp(30px, 5.5vw, 60px); line-height: 1.2; }
body.pc-class .pcb-slide { border: none; padding: 0; }
body.pc-class .pcb-slide-n { display: none; }
body.pc-class .pcb-img { max-height: 46vh; margin-inline: auto; }
body.pc-class .pcb-board { min-height: 40vh; }
body.pc-class .pcb-anchor { font-size: 20px; justify-content: center; }
body.pc-class .pcb-prompt { font-size: 22px; }
body.pc-class .pcb-cue { display: none !important; }   /* teacher cues → console, never the shared screen */
body.pc-class .pcb-slide { text-align: center; }
body.pc-class .pcb-task { font-size: clamp(24px, 4vw, 40px); }
body.pc-class .pcb-models li { font-size: clamp(20px, 3vw, 30px); }

/* ═══════════════ TEACHER CONSOLE (private window) ═══════════════ */
body.pc-console { margin: 0; font-family: var(--font-ui); color: var(--ink); background: var(--page); }
.pc-con-top { position: sticky; top: 0; background: var(--indigo-deep); color: #fff; padding: 12px 16px; z-index: 5; }
.pc-con-top h1 { margin: 0; font-size: 16px; font-family: var(--font-wordmark); }
.pc-con-top #pc-con-prog { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.pc-con-controls { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pc-con-controls button { min-height: 40px; border-radius: 99px; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12); color: #fff; font-weight: 700; font-size: 14px; padding: 4px 16px; cursor: pointer; }
.pc-con-controls button:hover { background: rgba(255,255,255,.24); }
.pc-con-body { display: grid; grid-template-columns: 1fr; }
#pc-strip { padding: 10px; display: grid; gap: 5px; border-bottom: 1px solid var(--line); }
.pc-strip-item { display: grid; grid-template-columns: 22px 22px 1fr auto; align-items: center; gap: 8px; text-align: left;
  border: 1px solid var(--line); background: var(--paper); border-radius: 9px; padding: 8px 10px; cursor: pointer; font-size: 14px; }
.pc-strip-item.on { border-color: var(--indigo); background: var(--indigo-tint); }
.pc-strip-n { font-weight: 800; color: var(--ink-soft); }
.pc-strip-t { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-strip-m { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
#pc-detail { padding: 14px 16px 40px; }
.pc-detail-head { font-size: 16px; font-weight: 800; color: var(--indigo-deep); margin-bottom: 8px; }
.pc-kv { font-size: 14px; margin: 4px 0; color: var(--ink-mid); }
.pc-cue { background: var(--amber-tint); border: 1px dashed #E0C083; color: #5C4A21; border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 600; margin: 8px 0; }
.pc-script, .pc-akey { background: var(--indigo-wash); border-radius: 8px; padding: 8px 12px; font-size: 14px; margin: 8px 0; }
.pc-notes { margin-top: 10px; font-size: 14px; }
.pc-notes ul { margin: 6px 0 0; padding-left: 18px; } .pc-notes li { margin-bottom: 5px; color: var(--ink-mid); }

/* ═══════════════ PREP VIEW (planning page) ═══════════════ */
body.pc-prep { font-family: var(--font-ui); color: var(--ink); background: var(--page); margin: 0; }
.pc-prep-wrap { max-width: 860px; margin: 0 auto; padding: 24px 16px 80px; }
.pc-prep-meta { font-size: 15px; color: var(--ink-mid); font-weight: 700; margin: 2px 0 14px; }
.pc-prep-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.pc-prep-row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.pc-prep-row.optional { opacity: .82; }
.pc-prep-time { text-align: right; }
.pc-prep-mins { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.pc-prep-run { display: block; font-size: 11.5px; color: var(--ink-soft); }
.pc-prep-toprow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pc-prep-badge { font-size: 12.5px; font-weight: 800; padding: 2px 10px; border-radius: 99px; background: var(--indigo); color: #fff; }
.pc-prep-badge.pcb-teach { background: #6D4AA6; } .pc-prep-badge.pcb-game { background: #C0432B; }
.pc-prep-badge.pcb-talk { background: #1F8A5B; } .pc-prep-badge.pcb-paper { background: #4353A8; }
.pc-prep-badge.pcb-wrap { background: var(--amber); color: #4A340B; } .pc-prep-badge.pcb-break { background: var(--ink-soft); }
.pc-prep-badge.pcb-warmup { background: #2E9E6B; }
.pc-prep-title { font-size: 17px; font-weight: 700; }
.pc-prep-flags { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); font-weight: 700; }
.pc-prep-sub { font-size: 14px; color: var(--ink-mid); margin: 2px 0; }
.pc-prep-note { font-size: 14px; color: var(--ink-mid); background: var(--indigo-wash); border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
.pc-prep-notes { margin-top: 6px; font-size: 13.5px; } .pc-prep-notes summary { cursor: pointer; font-weight: 700; color: var(--indigo); }
.pc-prep-notes ul { margin: 6px 0 0; padding-left: 18px; } .pc-prep-notes li { margin-bottom: 4px; color: var(--ink-mid); }
.pc-prep-mats { margin-top: 6px; font-size: 13.5px; }
.pc-mat { margin-right: 12px; } .pc-mat a { color: var(--indigo); font-weight: 700; text-decoration: none; }
.pc-mat-print { font-size: 12px; color: var(--ink-soft); } .pc-mat-bad { color: var(--warn); font-weight: 700; }

@media print {
  .pc-prep-actions { display: none; }
  body.pc-prep { background: #fff; }
  .pc-prep-notes[open] summary { display: none; }
}

/* ── console: live Library insert drawer (Phase 4) ── */
.pc-insert { margin-top: 10px; background: rgba(255,255,255,.1); border-radius: 10px; padding: 10px; }
.pc-insert-filter, #pc-insert-filter { width: 100%; min-height: 38px; border-radius: 8px; border: 1px solid rgba(255,255,255,.4);
  background: #fff; color: var(--ink); font-size: 14px; padding: 6px 10px; margin-bottom: 8px; }
#pc-insert-list { display: grid; gap: 5px; max-height: 240px; overflow: auto; }
.pc-ins-item { text-align: left; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 13.5px; }
.pc-ins-item:hover { border-color: var(--indigo); background: var(--indigo-tint); }
.pc-ins-item span { color: var(--ink-soft); font-size: 12px; }
.pc-insert-note { color: rgba(255,255,255,.8); font-size: 11.5px; margin: 8px 2px 0; }

/* ═══════════════ LESSON RHYTHM — sections (Phase 7) ═══════════════
   One accent per recurring section, used identically in Prep, Console,
   and Class Mode so the rhythm is recognizable at a glance. */
:root {
  --sec-welcome:        #2E9E6B;  /* green — energy */
  --sec-todays-english: #6D4AA6;  /* purple — new language */
  --sec-practice:       #4353A8;  /* indigo — work */
  --sec-real-life:      #C0432B;  /* red — the world */
  --sec-create:         #B5791C;  /* amber — production */
  --sec-wrap:           #8A5E17;  /* gold — closing */
}
.pc-sec-welcome        { --sec: var(--sec-welcome); }
.pc-sec-todays-english { --sec: var(--sec-todays-english); }
.pc-sec-practice       { --sec: var(--sec-practice); }
.pc-sec-real-life      { --sec: var(--sec-real-life); }
.pc-sec-create         { --sec: var(--sec-create); }
.pc-sec-wrap           { --sec: var(--sec-wrap); }

/* Class Mode: section chip (leftmost, loudest) + rhythm strip (right) */
.pc-class-sec { font-size: 15px; font-weight: 800; padding: 4px 14px; border-radius: 99px;
  background: var(--sec, var(--indigo)); color: #fff; white-space: nowrap; }
.pc-class-sec i { font-style: normal; font-weight: 600; opacity: .9; }
.pc-rhythm { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.pc-rhythm-dot { font-size: 15px; opacity: .3; filter: grayscale(.6); padding: 2px 3px; }
.pc-rhythm-dot.on { opacity: 1; filter: none; font-size: 19px; }

/* Console: section headers inside the strip */
.pc-strip-sec { display: flex; align-items: baseline; gap: 7px; margin: 8px 2px 2px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sec, var(--ink-soft)); border-bottom: 2px solid var(--sec, var(--line)); padding-bottom: 3px; }
.pc-strip-sec span { margin-left: auto; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }

/* Prep: section headings with purpose + subtotal */
.pc-prep-sec { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 26px 0 4px; padding: 8px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--sec, var(--indigo)) 8%, white);
  border-left: 5px solid var(--sec, var(--indigo)); }
.pc-prep-sec-ico { font-size: 20px; }
.pc-prep-sec-lbl { font-size: 17px; font-weight: 800; color: var(--sec, var(--indigo-deep)); }
.pc-prep-sec-why { font-size: 13px; color: var(--ink-mid); }
.pc-prep-sec-mins { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--sec, var(--ink-soft)); }
.pc-prep-sec + .pc-prep-row { border-top: none; }

/* ═══════════════ TEACHER-CONFIGURABLE BLOCKS (Phase 7A) ═══════════════ */
/* media */
.pcb-media-title { font-size: clamp(22px, 3.4vw, 34px); font-weight: 800; color: var(--indigo-deep); margin: 0 0 12px; }
.pcb-media-frame { position: relative; width: 100%; max-width: 880px; aspect-ratio: 16/9;
  margin: 0 auto; border-radius: 14px; overflow: hidden; background: #000; box-shadow: var(--shadow); }
.pcb-media-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pcb-media-notes { margin: 14px auto 0; max-width: 880px; background: var(--amber-tint);
  border: 1px solid #F2DCB4; color: #5C4A21; border-radius: 10px; padding: 10px 16px;
  font-size: clamp(16px, 2vw, 21px); font-weight: 600; }
.pcb-media-empty { border: 2px dashed var(--line-strong); border-radius: 14px; padding: 40px 20px;
  text-align: center; color: var(--ink-soft); font-weight: 700; font-size: 19px; }
.pcb-media-empty small { font-weight: 600; font-size: 13px; }
.pcb-media-open { display: grid; gap: 12px; justify-items: center; padding: 30px 0; }
.pcb-media-open .pc-btn { text-decoration: none; }
.pcb-url-line { background: var(--indigo-wash); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; font-size: 13px; color: var(--ink-mid); max-width: 100%; overflow-wrap: anywhere; }

/* bulletin */
.pcb-bulletin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 820px; }
.pcb-bulletin-list li { background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--amber);
  border-radius: 12px; padding: 14px 20px; font-size: clamp(19px, 2.6vw, 28px); font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow-sm); text-align: left; }
.pcb-bulletin-empty { color: var(--ink-soft); font-weight: 700; font-size: 20px; }
body.pc-class .pcb-bulletin-list { margin-inline: auto; }

/* console editor */
.pc-editor { margin-top: 16px; border: 1.5px dashed var(--indigo-soft); border-radius: 12px;
  padding: 12px 14px; background: var(--indigo-wash); }
.pc-editor-head { font-size: 14px; font-weight: 800; color: var(--indigo-dark); margin-bottom: 10px; }
.pc-editor-head small { display: block; font-weight: 600; color: var(--ink-soft); font-size: 11.5px; }
.pc-editor label { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-mid); margin-bottom: 10px; }
.pc-editor label small { font-weight: 600; color: var(--ink-soft); }
.pc-editor input, .pc-editor textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  border: 1.5px solid var(--line-strong); border-radius: 8px; font-family: var(--font-ui);
  font-size: 14px; color: var(--ink); padding: 8px 10px; background: #fff; }
.pc-editor input:focus, .pc-editor textarea:focus { outline: none; border-color: var(--indigo); }
.pc-editor-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pc-ed-save { border: none; border-radius: 99px; background: var(--indigo); color: #fff;
  font-weight: 800; font-size: 14px; padding: 8px 22px; cursor: pointer; }
.pc-ed-reset { border: 1px solid var(--line-strong); border-radius: 99px; background: var(--paper);
  color: var(--ink-soft); font-weight: 700; font-size: 12.5px; padding: 7px 14px; cursor: pointer; }
.pc-ed-fb { font-size: 13px; font-weight: 800; color: var(--ok); }

/* question of the day (Phase 7A) */
.pcb-q-text { font-size: clamp(26px, 4.4vw, 46px); font-weight: 800; color: var(--indigo-deep); line-height: 1.25; }
.pcb-q-model { margin-top: 16px; font-size: clamp(17px, 2.4vw, 24px); color: var(--ink-mid); font-weight: 600;
  background: var(--indigo-tint); border-radius: 12px; padding: 12px 18px; display: inline-block; }
.pcb-q-model b { color: var(--indigo-dark); }
.pcb-q-hint { margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--ink-soft); }
body.pc-class .pcb-q-text, body.pc-class .pcb-q-model, body.pc-class .pcb-q-hint { text-align: center; }
body.pc-class .pcb-q-model { display: block; max-width: 760px; margin-inline: auto; }

/* homework (Phase 7A) */
.pcb-hw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 820px; }
.pcb-hw-list li { background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--indigo);
  border-radius: 12px; padding: 14px 20px; font-size: clamp(19px, 2.6vw, 28px); font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow-sm); text-align: left; }
.pcb-hw-due { margin-top: 14px; font-size: clamp(16px, 2vw, 22px); font-weight: 700; color: var(--ink-mid); }
body.pc-class .pcb-hw-list { margin-inline: auto; }
body.pc-class .pcb-hw-due { text-align: center; }

/* ═══════════════ SHARED-SCREEN OVERLAYS — timer + Quick Slide (Sprint 1) ═══════════════ */
.pc-overlay { position: fixed; inset: 0; z-index: 80000; display: grid; place-items: center;
  background: var(--indigo-deep); color: #fff; }
.pc-overlay[hidden] { display: none; }
.pc-ov-close { position: fixed; top: 18px; right: 22px; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5); background: rgba(255,255,255,.1); color: #fff;
  font-size: 22px; cursor: pointer; }
.pc-ov-close:hover { background: rgba(255,255,255,.22); }
/* timer */
.pc-ov-mode-timer { background: radial-gradient(circle at 50% 40%, #34418C, var(--indigo-deep)); }
.pc-ov-timer { text-align: center; }
.pc-ov-clock { font-family: var(--font-ui); font-weight: 800; font-size: clamp(90px, 26vw, 300px);
  line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.pc-ov-sub { font-size: clamp(20px, 4vw, 40px); font-weight: 700; opacity: .85; margin-top: 10px; text-transform: uppercase; letter-spacing: .15em; }
.pc-ov-timer.done { animation: pc-ov-flash 1s steps(1) infinite; }
.pc-ov-timer.done .pc-ov-sub { color: #FFD9A0; }
@keyframes pc-ov-flash { 50% { opacity: .45; } }
/* quick slide */
.pc-ov-mode-slide { background: var(--paper); color: var(--ink); }
.pc-ov-mode-slide .pc-ov-close { color: var(--ink-mid); border-color: var(--line-strong); background: var(--paper); }
.pc-ov-slide { max-width: 92vw; text-align: center; }
.pc-ov-text { font-size: clamp(40px, 9vw, 120px); font-weight: 800; color: var(--indigo-deep); line-height: 1.15; }
.pc-ov-text .pcb-say { width: clamp(44px, 6vw, 72px); height: clamp(44px, 6vw, 72px); font-size: clamp(20px, 3vw, 34px); vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .pc-ov-timer.done { animation: none; } }

/* console tools row */
.pc-con-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,.18); }
.pc-con-tools-lbl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .8; margin-right: 2px; }
.pc-con-tools-sep { width: 1px; height: 22px; background: rgba(255,255,255,.22); margin: 0 4px; }
.pc-con-tools button { min-height: 36px; border-radius: 99px; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12); color: #fff; font-weight: 700; font-size: 13px; padding: 3px 13px; cursor: pointer; }
.pc-con-tools button:hover { background: rgba(255,255,255,.24); }
.pc-con-tools .pc-tmr-stop { border-style: dashed; opacity: .8; }
#pc-quick { flex: 1; min-width: 130px; min-height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,.4);
  background: #fff; color: var(--ink); font-size: 13px; padding: 4px 10px; }

/* wrap — the one closing screen (Sprint 1) */
.pcb-hw-block { margin-top: 4px; }
.pcb-hw-head { font-size: clamp(18px, 2.4vw, 24px); font-weight: 800; color: var(--indigo-deep); margin-bottom: 8px; }
.pcb-takehome { margin-top: 12px; font-size: 15px; color: var(--ink-mid); display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.pcb-th { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pcb-th code { background: var(--indigo-wash); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: 12.5px; color: var(--ink-mid); }

/* homework review (Phase 8) */
.pcb-review-head { font-size: clamp(18px, 2.6vw, 26px); font-weight: 800; color: var(--indigo-deep); margin: 0 0 12px; }
.pcb-review-head span { font-weight: 600; color: var(--ink-mid); font-size: .8em; }

/* ═══════════════ COACHING LAYER (Phase 8 Sprint 2) ═══════════════ */
/* Console: prominent, above teacher notes */
.pc-coach { margin: 10px 0; display: grid; gap: 6px; }
.pc-coach-f { font-size: 14px; line-height: 1.4; border-radius: 8px; padding: 8px 12px; border-left: 4px solid; }
.pc-coach-f span { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; margin-right: 6px;
  padding: 1px 7px; border-radius: 5px; color: #fff; vertical-align: 1px; }
.pc-coach-f.say   { background: #E9F6F0; border-color: #2E9E6B; } .pc-coach-f.say span   { background: #2E9E6B; }
.pc-coach-f.do    { background: #EEF0FA; border-color: #4353A8; } .pc-coach-f.do span    { background: #4353A8; }
.pc-coach-f.watch { background: #FBF1DC; border-color: #B5791C; } .pc-coach-f.watch span { background: #B5791C; }
.pc-coach-f.ccq   { background: #F1ECFA; border-color: #6D4AA6; } .pc-coach-f.ccq span   { background: #6D4AA6; }
/* Prep: compact printable script */
.pc-prep-coach { margin: 6px 0; display: grid; gap: 3px; font-size: 13.5px; color: var(--ink-mid);
  border-left: 3px solid var(--indigo-soft); padding-left: 10px; }
.pc-prep-coach b { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-right: 5px; }
.pc-prep-coach b.say { color: #2E9E6B; } .pc-prep-coach b.do { color: #4353A8; }
.pc-prep-coach b.watch { color: #B5791C; } .pc-prep-coach b.ccq { color: #6D4AA6; }

/* ═══════════════ MULTILINGUAL — reveal strip + Today's words (Phase 8 S2) ═══════════════ */
.pc-langstrip { position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 12px);
  z-index: 70000; max-width: 92vw; background: rgba(35,39,58,.96); color: #fff;
  border-radius: 12px; padding: 12px 20px; font-size: clamp(16px, 2.4vw, 24px); font-weight: 600;
  box-shadow: var(--shadow-md); opacity: 0; transition: opacity .4s, transform .4s; text-align: center; }
.pc-langstrip.show { opacity: 1; transform: translate(-50%, 0); }
.pc-langstrip[hidden] { display: none; }
.pc-ls-lang { font-size: .7em; font-weight: 800; background: rgba(255,255,255,.22); border-radius: 5px; padding: 1px 6px; margin-right: 4px; vertical-align: 2px; }
.pc-ls-sep { opacity: .4; margin: 0 12px; }
.pc-ls-none { opacity: .7; font-style: italic; }
/* Today's words overlay */
.pc-ov-mode-vocab { background: var(--paper); color: var(--ink); align-items: start; overflow: auto; }
.pc-ov-vocab { max-width: 1000px; width: 100%; padding: 6vh 4vw; }
.pc-ov-vocab h2 { font-family: var(--font-wordmark); font-size: clamp(28px, 5vw, 46px); color: var(--indigo-deep); margin: 0 0 22px; }
.pc-vocab-grid { display: grid; gap: 12px 20px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pc-vword { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: var(--page); }
.pc-vw-en { font-size: clamp(19px, 2.4vw, 26px); font-weight: 800; color: var(--indigo-deep); }
.pc-vw-tr { display: block; margin-top: 6px; font-size: clamp(14px, 1.8vw, 18px); color: var(--ink-mid); font-weight: 600; }
.pc-vocab-toggle { margin-top: 24px; border: 1.5px solid var(--indigo-soft); background: var(--indigo-tint); color: var(--indigo-dark);
  border-radius: 99px; font-weight: 800; font-size: 16px; padding: 10px 22px; cursor: pointer; }

/* ═══════════════ persistent hide + setup portability (Phase 8 S2) ═══════════════ */
.pc-prep-row.ishidden { opacity: .5; }
.pc-prep-row.ishidden .pc-prep-title { text-decoration: line-through; }
.pc-hide-toggle { margin-left: 8px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft);
  border-radius: 99px; font-size: 11px; font-weight: 700; padding: 2px 10px; cursor: pointer; white-space: nowrap; }
.pc-hide-toggle:hover { border-color: var(--indigo-soft); color: var(--indigo); }
.pc-strip-item.ishidden { opacity: .45; }
.pc-strip-item.ishidden .pc-strip-t { text-decoration: line-through; }
.pc-hide-block { margin: 4px 0 8px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-mid);
  border-radius: 99px; font-size: 12.5px; font-weight: 700; padding: 5px 14px; cursor: pointer; }
.pc-hide-block:hover { border-color: var(--indigo-soft); color: var(--indigo); }
@media print { .pc-prep-row.ishidden { display: none; } .pc-hide-toggle, .pc-prep-actions { display: none; } }

/* ═══════════════ SECTION WASHES + BLOCK MOODS (Phase 8 S3) ═══════════════
   The Class Mode stage tints to the current section's accent; content cards
   stay clean paper (they set their own background). Subtle by design — the
   tint is a low-% mix over --page so dark ink keeps full WCAG contrast. */
.pc-class-stage { background: color-mix(in srgb, var(--sec, transparent) 7%, var(--page)); transition: background .6s ease; }
/* moods: game livelier, wrap warmer, teach calm (default) */
.pc-class-stage.pc-mood-game { background: color-mix(in srgb, var(--sec, var(--sec-practice)) 12%, var(--page)); }
.pc-class-stage.pc-mood-wrap { background: color-mix(in srgb, var(--sec-wrap) 10%, #FFFDF6); }
.pc-class-stage.pc-mood-talk { background: color-mix(in srgb, var(--sec, var(--sec-real-life)) 9%, var(--page)); }
.pc-class-stage.pc-mood-break { background: var(--page); }
@supports not (background: color-mix(in srgb, red, blue)) {
  .pc-class-stage { background: var(--page); }   /* graceful fallback: no tint */
}
/* speaking ritual hint — small, standing, one place */
.pc-speak-hint { position: fixed; right: 16px; top: 58px; z-index: 60000;
  background: var(--indigo-tint); color: var(--indigo-dark); border: 1px solid var(--indigo-soft);
  border-radius: 99px; padding: 5px 13px; font-size: 12.5px; font-weight: 700; box-shadow: var(--shadow-sm); }
.pc-speak-hint[hidden] { display: none; }

/* ═══════════════ SECTION-TRANSITION SPLASH (Phase 8 S3) ═══════════════ */
.pc-transition-stage { background: color-mix(in srgb, var(--sec, var(--indigo)) 16%, var(--page)) !important; }
.pc-transition { text-align: center; animation: pc-trans-in .5s ease-out; }
.pc-trans-ico { font-size: clamp(64px, 14vw, 150px); line-height: 1; }
.pc-trans-label { font-family: var(--font-wordmark); font-size: clamp(34px, 8vw, 72px); font-weight: 800;
  color: var(--sec, var(--indigo-deep)); margin-top: 8px; }
.pc-trans-sub { font-size: clamp(16px, 3vw, 24px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 10px; }
.pc-trans-why { font-size: clamp(15px, 2.2vw, 20px); color: var(--ink-mid); margin-top: 14px; max-width: 30ch; margin-inline: auto; }
@keyframes pc-trans-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pc-transition { animation: none; } }
/* console note */
.pc-trans-note { background: var(--indigo-tint); border: 1px solid var(--indigo-soft); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--indigo-dark); margin-bottom: 8px; }

/* media block: inline image (Phase 8 S3) */
.pcb-media-img { display: block; max-width: 100%; max-height: 56vh; border-radius: 12px; margin: 0 auto; box-shadow: var(--shadow); }
body.pc-class .pcb-media-img { max-height: 62vh; }