/* ============================================================
   classroom/css/activities.css — shared activity styling (Phase 8 S3)

   Scoped under `.pcx` so a shared activity renders identically in a
   standalone page, in print, on a phone, and NATIVELY inside Class Mode
   (no iframe). Reuses classroom.css tokens. The migration pilot is
   find-the-parts; the other exercises join this file next.
   ============================================================ */
.pcx {
  /* One color per PART being hunted — not a permanent word identity. */
  --verb: #C0432B; --verb-bg: #FBEBE6;
  --noun: #1F8A5B; --noun-bg: #E9F6F0;
  --subj: #4353A8; --subj-bg: #EEF0FA;
  --adj:  #B5791C; --adj-bg:  #FBF1DC;
  font-family: var(--font-ui); color: var(--ink);
}
.pcx-partlabel { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); margin: 0 0 12px; }

/* Part 1 · definitions */
.pcx-defgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pcx-def { border: 1px solid var(--line); border-left: 5px solid; border-radius: 10px; padding: 11px 14px; }
.pcx-def.verb { border-left-color: var(--verb); } .pcx-def.noun { border-left-color: var(--noun); }
.pcx-def.subj { border-left-color: var(--subj); } .pcx-def.adj { border-left-color: var(--adj); }
.pcx-def h3 { margin: 0 0 2px; font-size: 17px; font-weight: 800; }
.pcx-def.verb h3 { color: var(--verb); } .pcx-def.noun h3 { color: var(--noun); }
.pcx-def.subj h3 { color: var(--subj); } .pcx-def.adj h3 { color: var(--adj); }
.pcx-den { font-size: 13.5px; color: var(--ink-mid); font-weight: 600; margin-bottom: 6px; }
.pcx-dtr { display: grid; gap: 2px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
.pcx-dtr b { color: var(--ink-mid); font-weight: 700; }
/* Language name (endonym) tag — names the language, not a country flag. */
.pcx-lang { font-style: normal; font-weight: 700; color: var(--indigo); font-size: 11px; margin-right: 3px; }

/* Part 2 · find-the-part blocks */
.pcx-findblocks { display: grid; gap: 0; }
.pcx-block { margin-bottom: 18px; break-inside: avoid; }
.pcx-q { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; padding: 8px 12px; border-radius: 9px; }
.pcx-block.verb .pcx-q { background: var(--verb-bg); } .pcx-block.noun .pcx-q { background: var(--noun-bg); }
.pcx-block.subj .pcx-q { background: var(--subj-bg); } .pcx-block.adj .pcx-q { background: var(--adj-bg); }
.pcx-q h2 { margin: 0; font-size: 18px; font-weight: 800; }
.pcx-block.verb .pcx-q h2 { color: var(--verb); } .pcx-block.noun .pcx-q h2 { color: var(--noun); }
.pcx-block.subj .pcx-q h2 { color: var(--subj); } .pcx-block.adj .pcx-q h2 { color: var(--adj); }
.pcx-hint { font-size: 13px; font-weight: 700; color: var(--ink-mid); }
.pcx-sents { display: grid; gap: 8px; }
.pcx-sent { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; padding: 6px 4px; }
.pcx-tok { -webkit-appearance: none; appearance: none; font-family: var(--font-ui); font-size: 20px; font-weight: 700;
  color: var(--ink); background: transparent; border: none; border-bottom: 2px dotted transparent; padding: 2px 4px;
  cursor: pointer; border-radius: 5px; transition: background .12s, color .12s; }
.pcx-tok:hover { border-bottom-color: var(--line-strong); }
.pcx-tok.found { color: #fff; border-bottom-color: transparent; }
.pcx-block.verb .pcx-tok.found { background: var(--verb); } .pcx-block.noun .pcx-tok.found { background: var(--noun); }
.pcx-block.subj .pcx-tok.found { background: var(--subj); } .pcx-block.adj .pcx-tok.found { background: var(--adj); }
.pcx-tok.miss { animation: pcx-shake .35s; color: var(--warn); }
.pcx-done { font-size: 16px; color: var(--ok); font-weight: 800; opacity: 0; transition: opacity .2s; }
.pcx-done.show { opacity: 1; }
@keyframes pcx-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pcx-hear { -webkit-appearance: none; appearance: none; cursor: pointer; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--indigo-soft); background: var(--indigo-tint); color: var(--indigo-dark); font-size: 15px; display: grid; place-items: center; }
.pcx-hear:active { transform: scale(.92); }

/* ── mode: SCREEN (Class Mode) — presentation scale, native, no iframe ── */
body.pc-class .pcx.pcx-mode-screen { max-height: none; }
.pcx-mode-screen .pcx-tok { font-size: clamp(20px, 2.6vw, 30px); }
.pcx-mode-screen .pcx-q h2 { font-size: clamp(18px, 2.4vw, 26px); }
.pcx-mode-screen .pcx-defgrid { grid-template-columns: 1fr 1fr; }

/* ── mode: PHONE / narrow ── */
@media (max-width: 560px) { .pcx-defgrid { grid-template-columns: 1fr; } .pcx-tok { font-size: 19px; } }
.pcx-mode-phone .pcx-defgrid { grid-template-columns: 1fr; }

/* ============================================================
   Phase 8 S4 — the other five exercises join the shared renderer.
   Each is scoped under .pcx with a per-exercise sub-class; all reuse the
   --verb/--noun/--subj/--adj tokens above so colors mean the same thing
   across every activity.
   ============================================================ */

/* ── match-the-adjective (.mta) — two-step tap: adjective, then its noun ── */
.pcx.mta .mta-steps { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.pcx.mta .mta-steps .s1 { color: var(--adj); } .pcx.mta .mta-steps .s2 { color: var(--noun); }
.pcx.mta .mta-sents { display: grid; gap: 10px; }
.pcx.mta .mta-sent { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; padding: 8px 6px; border: 1px solid var(--line); border-radius: 11px; break-inside: avoid; }
.pcx.mta .mta-sent.turn-noun { box-shadow: 0 0 0 2px var(--noun-bg) inset; }
.pcx.mta .mta-num { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--indigo-tint); color: var(--indigo-dark); }
.pcx.mta .pcx-tok.adjfound { color: #fff; background: var(--adj); border-bottom-color: transparent; }
.pcx.mta .pcx-tok.nounfound { color: #fff; background: var(--noun); border-bottom-color: transparent; }
.pcx.mta .mta-cue { font-size: 12px; font-weight: 800; color: var(--adj); margin-left: 2px; white-space: nowrap; }
.pcx.mta .mta-cue.noun { color: var(--noun); } .pcx.mta .mta-cue.done { color: var(--ok); }
.pcx.mta.pcx-mode-screen .pcx-tok { font-size: clamp(20px, 2.6vw, 30px); }

/* ── sort-by-type (.sbt) — tap a word, then tap its group ── */
.pcx.sbt .sbt-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.pcx.sbt .sbt-col { border: 1.5px solid; border-radius: 12px; min-height: 150px; padding: 10px 10px 14px; cursor: pointer; }
.pcx.sbt .sbt-col.verb { border-color: var(--verb); background: var(--verb-bg); }
.pcx.sbt .sbt-col.noun { border-color: var(--noun); background: var(--noun-bg); }
.pcx.sbt .sbt-col.adj { border-color: var(--adj); background: var(--adj-bg); }
.pcx.sbt .sbt-col h2 { margin: 0 0 3px; font-size: 16px; font-weight: 800; }
.pcx.sbt .sbt-col.verb h2 { color: var(--verb); } .pcx.sbt .sbt-col.noun h2 { color: var(--noun); } .pcx.sbt .sbt-col.adj h2 { color: var(--adj); }
.pcx.sbt .sbt-q { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }
.pcx.sbt .sbt-drop { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; }
.pcx.sbt .sbt-col.pulse { box-shadow: 0 0 0 3px rgba(67,83,168,.18); }
.pcx.sbt .sbt-placed { color: #fff; border-radius: 8px; padding: 6px 11px; font-size: 15px; font-weight: 700; line-height: 1.15; display: inline-flex; align-items: center; }
.pcx.sbt .sbt-col.verb .sbt-placed { background: var(--verb); } .pcx.sbt .sbt-col.noun .sbt-placed { background: var(--noun); } .pcx.sbt .sbt-col.adj .sbt-placed { background: var(--adj); }
.pcx.sbt .sbt-fb { min-height: 24px; font-size: 16px; font-weight: 800; color: var(--ok); text-align: center; margin: 4px 0 0; }
.pcx.sbt .sbt-pool { margin-top: 8px; }
.pcx.sbt .sbt-tiles { display: flex; flex-wrap: wrap; gap: 9px; }
.pcx.sbt .sbt-tile { -webkit-appearance: none; appearance: none; font-family: var(--font-ui); min-height: 48px; border: 2px solid var(--line-strong); border-radius: 12px; background: var(--paper); font-size: 19px; font-weight: 700; color: var(--ink); padding: 8px 16px; cursor: pointer; transition: transform .1s, border-color .15s, background .15s; }
.pcx.sbt .sbt-tile:active { transform: scale(.96); }
.pcx.sbt .sbt-tile.sel { border-color: var(--indigo); background: var(--indigo-tint); }
.pcx.sbt .sbt-tile.miss { animation: pcx-shake .35s; border-color: var(--warn); }
.pcx.sbt.pcx-mode-screen .sbt-tile { font-size: clamp(19px, 2.4vw, 27px); }
@media (max-width: 560px) { .pcx.sbt .sbt-cols { grid-template-columns: 1fr; } }
.pcx.sbt.pcx-mode-phone .sbt-cols { grid-template-columns: 1fr; }
@media print { .pcx.sbt .sbt-fb { display: none; } }

/* ── build-it (.bld) — the sentence machine ── */
.pcx.bld .bld-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 26px; font-weight: 800; min-height: 44px; }
.pcx.bld .bld-slot { padding: 2px 8px; border-radius: 7px; border-bottom: 3px solid var(--line-strong); color: var(--ink-soft); font-weight: 800; }
.pcx.bld .bld-slot.filled { border-bottom-color: transparent; }
.pcx.bld .bld-slot.subj.filled { color: var(--subj); background: var(--subj-bg); }
.pcx.bld .bld-slot.verb.filled { color: var(--verb); background: var(--verb-bg); }
.pcx.bld .bld-slot.adj.filled { color: var(--adj); background: var(--adj-bg); }
.pcx.bld .bld-slot.noun.filled { color: var(--noun); background: var(--noun-bg); }
.pcx.bld .bld-dot { color: var(--ink); }
.pcx.bld .bld-say { -webkit-appearance: none; appearance: none; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--indigo-soft); background: var(--indigo-tint); color: var(--indigo-dark); font-size: 19px; display: grid; place-items: center; margin-left: 4px; }
.pcx.bld .bld-say:active { transform: scale(.92); }
.pcx.bld .bld-say.off { opacity: .4; pointer-events: none; }
.pcx.bld .bld-hint { font-size: 13px; color: var(--ink-mid); font-weight: 600; margin: 6px 0 0; }
.pcx.bld .bld-menus { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; margin-top: 12px; }
.pcx.bld .bld-menu { border: 1.5px solid; border-radius: 12px; padding: 10px 10px 12px; }
.pcx.bld .bld-menu.subj { border-color: var(--subj); } .pcx.bld .bld-menu.verb { border-color: var(--verb); }
.pcx.bld .bld-menu.adj { border-color: var(--adj); } .pcx.bld .bld-menu.noun { border-color: var(--noun); }
.pcx.bld .bld-menu h2 { margin: 0 0 8px; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.pcx.bld .bld-menu.subj h2 { color: var(--subj); } .pcx.bld .bld-menu.verb h2 { color: var(--verb); }
.pcx.bld .bld-menu.adj h2 { color: var(--adj); } .pcx.bld .bld-menu.noun h2 { color: var(--noun); }
.pcx.bld .bld-opts { display: flex; flex-direction: column; gap: 6px; }
.pcx.bld .bld-opt { -webkit-appearance: none; appearance: none; font-family: var(--font-ui); text-align: left; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--paper); font-size: 16px; font-weight: 700; color: var(--ink); padding: 8px 12px; cursor: pointer; }
.pcx.bld .bld-opt:hover { border-color: var(--indigo-soft); }
.pcx.bld .bld-opt.clash { opacity: .32; pointer-events: none; text-decoration: line-through; }
/* Agreement feedback: a Build It where the student picks am/is/are needs a way
   to say "not with that subject" without taking the choice away from them. The
   pick stays selected and stays wrong until they change it. */
.pcx.bld .bld-menu .bld-opt.wrong.on { background: var(--warn); border-color: var(--warn); color: #fff; }
.pcx.bld .bld-slot.wrong.filled { color: var(--warn); background: var(--warn-tint); border-bottom: 3px solid var(--warn); }
.pcx.bld .bld-hint.wrong { color: var(--warn); font-weight: 700; }
.pcx.bld .bld-menu.subj .bld-opt.on { background: var(--subj); border-color: var(--subj); color: #fff; }
.pcx.bld .bld-menu.verb .bld-opt.on { background: var(--verb); border-color: var(--verb); color: #fff; }
.pcx.bld .bld-menu.adj .bld-opt.on { background: var(--adj); border-color: var(--adj); color: #fff; }
.pcx.bld .bld-menu.noun .bld-opt.on { background: var(--noun); border-color: var(--noun); color: #fff; }
/* Neutral "goal" column (build-it-now) — the object isn't a hunted part,
   so it stays gray instead of claiming a fifth part color. */
.pcx.bld .bld-slot.goal.filled { color: var(--ink-mid); background: #EEF0F2; }
/* "going to" — a permanently-filled fixed chip (build-it-future); it is
   not a menu and never shows a placeholder. */
.pcx.bld .bld-slot.gt { color: var(--indigo-dark); background: var(--indigo-tint); border-bottom-color: transparent; }
/* build-it-future has FIVE menus (the added am/is/are-going-to column),
   so it overrides the 4-col grid. Scoped to .bld-fut — build-it and
   build-it-now keep their 4 columns. Mobile 2-col is inherited. */
.pcx.bld.bld-fut .bld-menus { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) { .pcx.bld.bld-fut .bld-menus { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 560px) { .pcx.bld.bld-fut .bld-menus { grid-template-columns: 1fr 1fr; } }
.pcx.bld .bld-menu.goal { border-color: var(--line-strong); }
.pcx.bld .bld-menu.goal h2 { color: var(--ink-mid); }
.pcx.bld .bld-menu.goal .bld-opt.on { background: var(--ink-mid); border-color: var(--ink-mid); color: #fff; }
.pcx.bld.pcx-mode-screen .bld-line { font-size: clamp(26px, 3.4vw, 40px); }
@media (max-width: 560px) { .pcx.bld .bld-menus { grid-template-columns: 1fr 1fr; } .pcx.bld .bld-line { font-size: 22px; } }
.pcx.bld.pcx-mode-phone .bld-menus { grid-template-columns: 1fr 1fr; }
@media print { .pcx.bld .bld-say { display: none !important; } }

/* ── reference cards (.ref) — alphabet-card / numbers-card ── */
.pcx.ref .pcx-partlabel { margin-top: 18px; }
.pcx.ref .pcx-partlabel:first-child { margin-top: 0; }
.pcx.ref .ref-dir, .pcx.spr .ref-dir { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; }
.pcx.ref .ref-dir .pcx-lang, .pcx.spr .ref-dir .pcx-lang { margin-right: 2px; }
.pcx.ref .ref-rows { display: grid; gap: 8px; }
.pcx.ref .ref-row { -webkit-appearance: none; appearance: none; display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--paper); padding: 10px 14px; min-height: 56px; cursor: pointer; font-family: var(--font-ui); text-align: left; }
.pcx.ref .ref-row b { font-size: 23px; font-weight: 800; letter-spacing: .22em; color: var(--ink); }
.pcx.ref .ref-row .pcx-hear { pointer-events: none; }
.pcx.ref .ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.pcx.ref .ref-grid.nums { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.pcx.ref .ref-tile { -webkit-appearance: none; appearance: none; min-height: 56px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--paper); font-family: var(--font-ui); font-size: 23px; font-weight: 800; color: var(--ink); cursor: pointer; padding: 6px 4px; }
.pcx.ref .ref-tile small { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin-top: 1px; }
.pcx.ref .ref-tile.play, .pcx.ref .ref-row.play { border-color: var(--indigo); background: var(--indigo-tint); }
.pcx.ref .ref-pairs { display: grid; gap: 8px; }
.pcx.ref .ref-pair { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-left: 4px solid var(--adj); border-radius: 12px; padding: 8px 12px; }
.pcx.ref .ref-pair .ref-tile { min-width: 88px; }
.pcx.ref .ref-pair .vs { font-weight: 800; color: var(--ink-soft); }

/* ── sprint games (.spr) — letter-sprint / number-sprint ── */
.pcx.spr .spr-top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 800; color: var(--ink-mid); min-height: 20px; }
.pcx.spr .spr-stage { border: 1.5px solid var(--line-strong); border-radius: 16px; padding: 28px 16px; margin-top: 8px; text-align: center; }
.pcx.spr .spr-clock { font-size: 58px; font-weight: 800; color: var(--indigo); line-height: 1; margin-bottom: 14px; }
.pcx.spr .spr-clock.low { color: var(--warn); }
.pcx.spr .spr-controls { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pcx.spr .spr-in { width: 170px; min-height: 54px; font: 800 27px var(--font-ui); text-align: center; color: var(--ink); border: 2px solid var(--line-strong); border-radius: 12px; background: var(--paper); }
.pcx.spr .spr-in:focus { outline: 2px solid var(--indigo-soft); }
.pcx.spr .spr-in.miss { animation: pcx-shake .35s; }
.pcx.spr .spr-btn { -webkit-appearance: none; appearance: none; min-height: 48px; padding: 10px 24px; border-radius: 12px; font: 700 16px var(--font-ui); cursor: pointer; }
.pcx.spr .spr-btn.primary { background: var(--indigo); border: 1.5px solid var(--indigo); color: #fff; }
.pcx.spr .spr-btn.ghost { background: none; border: 1.5px solid var(--line-strong); color: var(--ink-mid); }
.pcx.spr .spr-big { font-size: 64px; font-weight: 800; line-height: 1.1; margin-bottom: 14px; }
.pcx.spr .spr-big.ok { color: var(--ok); }
.pcx.spr .spr-big.plain { color: var(--ink); }
.pcx.spr .spr-final { font-size: 30px; font-weight: 800; color: var(--indigo); margin-bottom: 14px; }
.pcx.spr.pcx-mode-screen .spr-clock { font-size: clamp(58px, 9vw, 110px); }
.pcx.spr.pcx-mode-screen .spr-big { font-size: clamp(64px, 11vw, 140px); }

/* ── job-application (.jap) — form vocabulary + fill the application ── */
.pcx.jap .pcx-partlabel { margin-top: 16px; }
.pcx.jap .pcx-partlabel:first-child { margin-top: 0; }
.pcx.jap .jap-groups { display: grid; gap: 8px; }
.pcx.jap .jap-group { border: 1px solid var(--line); border-left: 4px solid var(--indigo); border-radius: 12px; overflow: hidden; break-inside: avoid; }
.pcx.jap .jap-group.subj { border-left-color: var(--subj); } .pcx.jap .jap-group.noun { border-left-color: var(--noun); } .pcx.jap .jap-group.adj { border-left-color: var(--adj); }
.pcx.jap .jap-group-head { -webkit-appearance: none; appearance: none; width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 48px; padding: 10px 14px; background: none; border: 0; font-family: var(--font-ui); font-size: 15px; font-weight: 800; color: var(--ink); cursor: pointer; text-align: left; }
.pcx.jap .jap-group.subj .jap-group-head b { color: var(--subj); } .pcx.jap .jap-group.noun .jap-group-head b { color: var(--noun); } .pcx.jap .jap-group.adj .jap-group-head b { color: var(--adj); }
.pcx.jap .jap-group-head::before { content: "▸"; font-size: 13px; color: var(--ink-soft); flex: none; }
.pcx.jap .jap-group.open .jap-group-head::before { content: "▾"; }
.pcx.jap .jap-group-words { font-size: 12px; font-weight: 700; color: var(--ink-soft); flex: 1 1 auto; }
.pcx.jap .jap-group-body { display: none; padding: 0 10px 10px; }
.pcx.jap .jap-group.open .jap-group-body { display: grid; gap: 8px; }
@media print {
  .pcx.jap .jap-group-body { display: grid !important; gap: 8px; }
  .pcx.jap .jap-group-head::before { content: "" !important; }
}
.pcx.jap .jap-word { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; break-inside: avoid; }
.pcx.jap .jap-word .pcx-hear { margin-top: 2px; }
.pcx.jap .jap-word h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--indigo); display: inline; }
.pcx.jap .jap-en { font-size: 13.5px; font-weight: 600; color: var(--ink-mid); }
.pcx.jap .jap-tr { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 2px; }
.pcx.jap .jap-tr b { color: var(--ink-mid); font-weight: 700; }
.pcx.jap .jap-card { border: 2px solid var(--indigo); border-radius: 14px; overflow: hidden; break-inside: avoid; }
.pcx.jap .jap-card-head { background: var(--indigo); color: #fff; padding: 8px 14px; font-weight: 800; font-size: 14px; letter-spacing: .05em; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pcx.jap .jap-card-note { font-size: 12px; opacity: .92; font-weight: 700; letter-spacing: 0; }
.pcx.jap .jap-card-rows { padding: 10px 14px 12px; display: grid; gap: 4px; }
.pcx.jap .jap-card-rows div { font-size: 15.5px; font-weight: 600; }
.pcx.jap .jap-card-rows i { font-style: normal; font-weight: 800; color: var(--ink-mid); display: inline-block; min-width: 96px; }
.pcx.jap .jap-formtitle { font-size: 17px; font-weight: 800; letter-spacing: .06em; margin: 2px 0 2px; }
.pcx.jap .jap-formtitle span { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); margin-left: 8px; }
.pcx.jap .jap-sec { border: 1.5px solid var(--line-strong); border-radius: 14px; padding: 12px 14px 14px; margin-top: 12px; break-inside: avoid; }
.pcx.jap .jap-sec h2 { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--indigo); }
.pcx.jap .jap-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 12px; }
.pcx.jap .jap-f { display: flex; flex-direction: column; gap: 4px; grid-column: span 3; }
.pcx.jap .jap-f.xs { grid-column: span 1; }
.pcx.jap .jap-f.sm { grid-column: span 2; }
.pcx.jap .jap-f.wide { grid-column: span 6; }
.pcx.jap .jap-f label { font-size: 12.5px; font-weight: 800; color: var(--ink-mid); letter-spacing: .02em; }
.pcx.jap .jap-f label .hint { font-weight: 600; color: var(--ink-soft); }
.pcx.jap .jap-in { position: relative; display: flex; align-items: center; }
.pcx.jap .jap-f input { width: 100%; min-height: 46px; font: 700 17px var(--font-ui); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 8px 32px 8px 12px; background: var(--paper); }
.pcx.jap .jap-f input:focus { outline: 2px solid var(--indigo-soft); }
.pcx.jap .jap-f.ok input { border-color: var(--ok); }
.pcx.jap .jap-f .pcx-done { position: absolute; right: 10px; }
.pcx.jap .jap-f input.sig { font-family: var(--font-wordmark); font-size: 21px; }
.pcx.jap .jap-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pcx.jap .jap-chip { -webkit-appearance: none; appearance: none; font-family: var(--font-ui); min-height: 46px; padding: 8px 16px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--paper); font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; }
.pcx.jap .jap-chip.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.pcx.jap .jap-chip.miss { animation: pcx-shake .35s, pcx-warnflash .9s; }
@keyframes pcx-warnflash { 0%, 60% { border-color: var(--warn); } 100% { border-color: var(--line-strong); } }
.pcx.jap .jap-note { font-size: 13px; color: var(--ink-mid); font-weight: 600; margin: 12px 0 0; }
@media (max-width: 560px) { .pcx.jap .jap-grid { grid-template-columns: 1fr 1fr; } .pcx.jap .jap-f, .pcx.jap .jap-f.wide { grid-column: span 2; } .pcx.jap .jap-f.xs, .pcx.jap .jap-f.sm { grid-column: span 1; } }
.pcx.jap.pcx-mode-phone .jap-grid { grid-template-columns: 1fr 1fr; }
.pcx.jap.pcx-mode-phone .jap-f, .pcx.jap.pcx-mode-phone .jap-f.wide { grid-column: span 2; }
.pcx.jap.pcx-mode-phone .jap-f.xs, .pcx.jap.pcx-mode-phone .jap-f.sm { grid-column: span 1; }

/* ── fix-the-sentence (.fix) — tap the one in correct order ── */
.pcx.fix { display: grid; gap: 18px; }
.pcx.fix .fix-item { break-inside: avoid; }
.pcx.fix .fix-n { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); margin: 0 0 8px; }
.pcx.fix .fix-opts { display: grid; gap: 9px; }
.pcx.fix .fix-opt { -webkit-appearance: none; appearance: none; font-family: var(--font-ui); text-align: left; display: flex; align-items: center; gap: 10px; min-height: 52px; border: 2px solid var(--line-strong); border-radius: 12px; background: var(--paper); font-size: 19px; font-weight: 700; color: var(--ink); padding: 10px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.pcx.fix .fix-box { flex: 0 0 22px; height: 22px; border: 2px solid var(--line-strong); border-radius: 6px; display: grid; place-items: center; font-size: 15px; color: #fff; }
.pcx.fix .fix-opt:hover { border-color: var(--indigo-soft); }
.pcx.fix .fix-opt.right { border-color: var(--ok); background: var(--ok-tint); }
.pcx.fix .fix-opt.right .fix-box { background: var(--ok); border-color: var(--ok); }
.pcx.fix .fix-opt.wrong { border-color: var(--warn); background: var(--warn-tint); animation: pcx-shake .35s; }
.pcx.fix.pcx-mode-screen .fix-opt { font-size: clamp(19px, 2.4vw, 26px); }
@media (max-width: 560px) { .pcx.fix .fix-opt { font-size: 17px; } }

/* ── write-your-own (.wyo) — production with a word bank ── */
.pcx.wyo .wyo-recipe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pcx.wyo .wyo-chip { font-weight: 800; font-size: 15px; padding: 6px 13px; border-radius: 9px; color: #fff; }
.pcx.wyo .wyo-chip.subj { background: var(--subj); } .pcx.wyo .wyo-chip.verb { background: var(--verb); }
.pcx.wyo .wyo-chip.adj { background: var(--adj); } .pcx.wyo .wyo-chip.noun { background: var(--noun); }
.pcx.wyo .wyo-plus { font-size: 18px; font-weight: 800; color: var(--ink-soft); }
.pcx.wyo .wyo-model { font-size: 14px; color: var(--ink-mid); margin: 8px 0 4px; }
.pcx.wyo .wyo-model b.s { color: var(--subj); } .pcx.wyo .wyo-model b.v { color: var(--verb); }
.pcx.wyo .wyo-model b.a { color: var(--adj); } .pcx.wyo .wyo-model b.n { color: var(--noun); }
.pcx.wyo .wyo-bank { margin: 10px 0 2px; }
.pcx.wyo .wyo-bankrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pcx.wyo .wyo-w { border-radius: 99px; padding: 3px 11px; font-size: 14px; font-weight: 700; border: 1px solid; }
.pcx.wyo .wyo-w.subj { color: var(--subj); border-color: var(--subj); background: var(--subj-bg); }
.pcx.wyo .wyo-w.verb { color: var(--verb); border-color: var(--verb); background: var(--verb-bg); }
.pcx.wyo .wyo-w.adj { color: var(--adj); border-color: var(--adj); background: var(--adj-bg); }
.pcx.wyo .wyo-w.noun { color: var(--noun); border-color: var(--noun); background: var(--noun-bg); }
.pcx.wyo .wyo-prompts { display: grid; gap: 14px; margin-top: 12px; }
.pcx.wyo .wyo-ask { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.pcx.wyo .wyo-field { display: flex; gap: 8px; align-items: center; }
.pcx.wyo .wyo-field input { flex: 1; min-height: 50px; border: 2px solid var(--line-strong); border-radius: 10px; font-family: var(--font-ui); font-size: 19px; color: var(--ink); padding: 10px 14px; background: #fff; }
.pcx.wyo .wyo-field input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-tint); }
.pcx.wyo .wyo-field input.ok { border-color: var(--ok); background: var(--ok-tint); }
.pcx.wyo .wyo-check { -webkit-appearance: none; appearance: none; cursor: pointer; min-height: 50px; border: none; border-radius: 99px; background: var(--indigo); color: #fff; font-size: 16px; font-weight: 700; padding: 0 22px; }
.pcx.wyo .wyo-check:active { transform: scale(.97); }
.pcx.wyo .wyo-fb { min-height: 20px; font-size: 14px; font-weight: 700; margin-top: 5px; }
.pcx.wyo .wyo-fb.ok { color: var(--ok); } .pcx.wyo .wyo-fb.no { color: var(--warn); }
@media (max-width: 560px) { .pcx.wyo .wyo-field { flex-wrap: wrap; } }
@media print { .pcx.wyo .wyo-check { display: none !important; } }

/* ── mode: PRINT (paper — students circle by hand) ── */
@media print {
  .pcx-hear { display: none !important; }
  .pcx-tok { cursor: default; border-bottom: none; }
}

/* ── in-on-under-card · place prepositions reference (2026-07-20) ──
   One desk drawn three times; only the book moves. The picture carries
   the meaning, so it must survive print in black and white. */
.pcx.iou .ref-dir { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; }
.pcx.iou .ref-dir .pcx-lang { margin-right: 2px; }
.pcx.iou .pcx-partlabel { margin-top: 18px; }
.pcx.iou .pcx-partlabel:first-child { margin-top: 0; }

.pcx.iou .iou-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pcx.iou .iou-word { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left;
  display: grid; gap: 3px; font-family: var(--font-ui); break-inside: avoid;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--paper); padding: 10px 12px 11px; }
.pcx.iou .iou-word b { font-size: 27px; font-weight: 800; color: var(--indigo-deep); line-height: 1.05;
  display: flex; align-items: center; gap: 8px; }
.pcx.iou .iou-word .pcx-hear { pointer-events: none; width: 28px; height: 28px; font-size: 13px; }
.pcx.iou .iou-word.play { border-color: var(--indigo); background: var(--indigo-tint); }
.pcx.iou .iou-meaning { font-size: 13.5px; font-weight: 700; color: var(--ink-mid); }
.pcx.iou .iou-ex { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.pcx.iou .iou-gloss { gap: 1px; margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-mid); line-height: 1.35; }
/* .iou-gloss also carries .pcx-tr, so it must lose to the shared hidden
   default; these two rules restate it at matching specificity. */
.pcx.iou .iou-gloss.pcx-tr { display: none; }
.pcx.iou .pcx-part.tr-open .iou-gloss.pcx-tr { display: grid; }
body.tr-all .pcx.iou .iou-gloss.pcx-tr { display: grid; }

/* The drawing. Strokes only + one filled slab, so it prints clean. */
.pcx.iou .iou-pic { width: 100%; height: auto; display: block; margin-bottom: 6px; }
.pcx.iou .iou-pic .iou-fill { fill: var(--ink-soft); stroke: none; }
.pcx.iou .iou-pic .iou-line { fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.pcx.iou .iou-pic .iou-cut { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 4 3; }
.pcx.iou .iou-pic .iou-floor { stroke: var(--line-strong); stroke-width: 2; }
.pcx.iou .iou-pic .iou-book rect { fill: var(--indigo); stroke: none; }
.pcx.iou .iou-pic .iou-book line { stroke: #fff; stroke-width: 1.5; }

.pcx.iou .iou-sents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcx.iou .iou-sent { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 11px; min-height: 52px; break-inside: avoid;
  border: 1px solid var(--line); border-left: 4px solid var(--indigo-soft); border-radius: 10px;
  background: var(--paper); padding: 8px 12px; font-family: var(--font-ui); font-size: 16.5px; font-weight: 600; color: var(--ink); }
.pcx.iou .iou-sent u { text-decoration-color: var(--indigo); text-underline-offset: 3px; font-weight: 800; color: var(--indigo-deep); }
.pcx.iou .iou-sent .pcx-hear { pointer-events: none; }
.pcx.iou .iou-sent.play { border-left-color: var(--indigo); background: var(--indigo-tint); }

.pcx.iou .iou-fixed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pcx.iou .iou-fix { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left; display: grid; gap: 2px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--amber-tint); padding: 8px 11px;
  font-family: var(--font-ui); break-inside: avoid; }
.pcx.iou .iou-fix b { font-size: 17px; font-weight: 800; color: var(--ink); }
.pcx.iou .iou-fix span { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.pcx.iou .iou-fix.play { border-color: var(--amber); }

.pcx.iou .iou-traps { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.pcx.iou .iou-trapshead { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--warn); margin: 0 0 5px; }
.pcx.iou .iou-trap { font-size: 12.5px; color: var(--ink-mid); line-height: 1.5; margin: 0 0 4px; }
.pcx.iou .iou-trap b { color: var(--indigo-deep); font-weight: 800; }

.pcx.iou .iou-check { margin: 0; padding-left: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px;
  font-size: 16px; font-weight: 600; color: var(--ink); }
.pcx.iou .iou-check li { break-inside: avoid; }
.pcx.iou .iou-blank { display: inline-block; min-width: 74px; border-bottom: 1.5px solid var(--ink-soft); }

@media (max-width: 620px) {
  .pcx.iou .iou-words, .pcx.iou .iou-fixed { grid-template-columns: 1fr; }
  .pcx.iou .iou-sents, .pcx.iou .iou-check { grid-template-columns: 1fr; }
}
/* Print: this is a ONE-sheeter. The screen version breathes; on paper
   everything tightens so the whole ladder + the key fit a single page. */
@media print {
  .pcx.iou .iou-word, .pcx.iou .iou-sent, .pcx.iou .iou-fix { cursor: default; }
  .pcx.iou .iou-pic .iou-book rect { fill: #23273A; }
  /* Picture moves beside the word instead of above it — same drawing,
     roughly an inch less height across the row. */
  .pcx.iou .iou-word { grid-template-columns: 78px 1fr; column-gap: 9px; align-items: start; }
  /* Spans the word/meaning/example rows and centres against them; the
     gloss row sits below in the text column. Deliberately NOT 1/-1 —
     spanning the gloss too grows the card onto a third page. */
  .pcx.iou .iou-pic { grid-column: 1; grid-row: 1 / span 4; align-self: center; margin: 0; }
  .pcx.iou .iou-word > :not(.iou-pic) { grid-column: 2; }
  /* The four-language blocks are the other big cost. Two columns keeps
     every language on the page instead of dropping any. */
  /* Revealed blocks are block-per-language now, which is taller than the
     old packed inline run — claw that back with a tight gap/leading. */
  .pcx-tr { gap: 0 !important; }
  .pcx-trline { margin: 0 0 1px; }
  /* Print shows every translation (paper can't be tapped), so the
     revealed blocks get the 2-column treatment. break-inside is ignored
     on INLINE boxes — .pcx-trline / .iou-trap are blocks, so a Kreyòl
     sentence can no longer snap in half across the column gap. */
  .pcx.iou .pcx-tr, .pcx.syl .pcx-tr { columns: 2; column-gap: 18px; }
  .pcx.iou .iou-gloss.pcx-tr, .pcx.syl .syl-traps .pcx-tr { columns: 1; }
  .pcx-trline, .pcx.iou .iou-trap, .pcx.syl .syl-trap { break-inside: avoid; }
  .pcx.iou .iou-trapshead { column-span: all; }
  .pcx.iou .pcx-partlabel { margin: 6px 0 3px; font-size: 11px; }
  .pcx.iou .ref-dir { font-size: 10.5px; line-height: 1.3; margin-bottom: 3px; }
  .pcx.iou .pcx-trline { font-size: 10px; line-height: 1.3; }
  .pcx.iou .iou-words, .pcx.iou .iou-fixed { gap: 7px; }
  .pcx.iou .iou-word { padding: 7px 9px 8px; gap: 1px; }
  .pcx.iou .iou-word b { font-size: 21px; }
  .pcx.iou .iou-meaning { font-size: 12px; }
  .pcx.iou .iou-ex { font-size: 11.5px; }
  .pcx.iou .iou-gloss { font-size: 10.5px; margin-top: 3px; padding-top: 4px; }
  .pcx.iou .iou-sents { gap: 5px; }
  .pcx.iou .iou-sent { min-height: 0; padding: 5px 10px; font-size: 14px; }
  .pcx.iou .iou-fix { padding: 6px 9px; }
  .pcx.iou .iou-fix b { font-size: 14.5px; }
  .pcx.iou .iou-fix span { font-size: 11px; }
  .pcx.iou .iou-traps { margin-top: 7px; padding-top: 6px; }
  .pcx.iou .iou-trap { font-size: 10.5px; line-height: 1.4; margin-bottom: 3px; }
  /* Page 1 = the reference card, page 2 = the practice side. Printed
     double-sided this is still ONE sheet, and the reference stays clean. */
  .pcx.iou .iou-practice { break-before: page; page-break-before: always; padding-top: 4px; }
  .pcx.iou .iou-practice .pcx-partlabel { margin-top: 0; }
  .pcx.iou .iou-check { font-size: 16px; gap: 14px 22px; margin-top: 4px; }
  .pcx.iou .iou-blank { min-width: 96px; }
}

/* ── syllables-card · syllables & stress reference (2026-07-20) ──
   Beat dots carry the meaning (filled = strong), so they must survive a
   black-and-white photocopy: filled vs hollow, never colour alone. */
.pcx.syl .ref-dir { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; }
.pcx.syl .ref-dir .pcx-lang { margin-right: 2px; }
.pcx.syl .pcx-partlabel { margin-top: 18px; }
.pcx.syl .pcx-partlabel:first-child { margin-top: 0; }

.pcx.syl .syl-dots { display: flex; gap: 5px; align-items: center; justify-content: center; min-height: 15px; }
.pcx.syl .syl-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--indigo-soft); background: transparent; }
.pcx.syl .syl-dot.on { width: 15px; height: 15px; background: var(--indigo); border-color: var(--indigo); }
.pcx.syl .syl-part { font-weight: 700; }
.pcx.syl .syl-part.on { font-weight: 800; color: var(--indigo-deep); }
.pcx.syl .syl-sep { color: var(--line-strong); margin: 0 3px; font-weight: 700; }

.pcx.syl .syl-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.pcx.syl .syl-card { -webkit-appearance: none; appearance: none; cursor: pointer; position: relative;
  display: grid; gap: 5px; justify-items: center; text-align: center; break-inside: avoid;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--paper);
  padding: 11px 8px 10px; font-family: var(--font-ui); }
.pcx.syl .syl-card b { font-size: 20px; color: var(--ink); line-height: 1.15; }
.pcx.syl .syl-n { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.pcx.syl .syl-card .pcx-hear { pointer-events: none; position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; font-size: 12px; }
.pcx.syl .syl-card.play { border-color: var(--indigo); background: var(--indigo-tint); }

.pcx.syl .syl-count { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcx.syl .syl-row { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 11px; min-height: 52px; break-inside: avoid;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 8px 12px;
  font-family: var(--font-ui); }
.pcx.syl .syl-row .pcx-hear { pointer-events: none; }
.pcx.syl .syl-w { font-size: 19px; font-weight: 700; color: var(--ink); flex: 1; }
.pcx.syl .syl-blank { width: 46px; height: 30px; border: 1.5px dashed var(--line-strong); border-radius: 7px; flex: none; }
.pcx.syl .syl-row.play { border-color: var(--indigo); background: var(--indigo-tint); }

.pcx.syl .syl-stress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pcx.syl .syl-card.strong b { font-size: 19px; }

.pcx.syl .syl-pairs { margin-top: 18px; }
.pcx.syl .syl-pairhead, .pcx.syl .syl-writehead { font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--indigo); margin: 0 0 6px; }
.pcx.syl .syl-pair { display: flex; align-items: stretch; gap: 9px; margin-bottom: 8px; break-inside: avoid; }
.pcx.syl .syl-pairside { -webkit-appearance: none; appearance: none; cursor: pointer; flex: 1;
  display: grid; gap: 3px; justify-items: center; text-align: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--amber-tint);
  padding: 8px 10px; font-family: var(--font-ui); }
.pcx.syl .syl-pairside b { font-size: 18px; color: var(--ink); }
.pcx.syl .syl-pairside span { font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.35; }
.pcx.syl .syl-pairside.play { border-color: var(--amber); }
.pcx.syl .syl-vs { align-self: center; font-weight: 800; color: var(--ink-soft); font-size: 15px; }

.pcx.syl .syl-haiku { display: grid; gap: 7px; }
.pcx.syl .syl-hline { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 11px; min-height: 50px; break-inside: avoid;
  border: 1px solid var(--line); border-left: 4px solid var(--indigo-soft); border-radius: 10px;
  background: var(--paper); padding: 7px 12px; font-family: var(--font-ui); }
.pcx.syl .syl-hline .pcx-hear { pointer-events: none; }
.pcx.syl .syl-htext { flex: 1; font-size: 18px; font-weight: 600; color: var(--ink); }
.pcx.syl .syl-hn { flex: none; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  background: var(--indigo-tint); color: var(--indigo-dark); font-size: 13.5px; font-weight: 800; }
.pcx.syl .syl-hline.play { border-left-color: var(--indigo); background: var(--indigo-tint); }

.pcx.syl .syl-write { margin-top: 12px; }
.pcx.syl .syl-wline { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.pcx.syl .syl-wrule { flex: 1; border-bottom: 1.5px solid var(--line-strong); height: 22px; }

.pcx.syl .syl-traps { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 9px; }
.pcx.syl .syl-trapshead { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--warn); margin: 0 0 5px; }
.pcx.syl .syl-trap { font-size: 12.5px; color: var(--ink-mid); line-height: 1.5; margin: 0 0 4px; }
.pcx.syl .syl-trap b { color: var(--indigo-deep); font-weight: 800; }

@media (max-width: 620px) {
  .pcx.syl .syl-ladder, .pcx.syl .syl-stress { grid-template-columns: repeat(2, 1fr); }
  .pcx.syl .syl-count { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .pcx.syl .syl-ladder, .pcx.syl .syl-stress { grid-template-columns: 1fr; }
}

/* Print: page 1 = the reference (what a syllable is, counting, stress),
   page 2 = the haiku writing side. One sheet, double-sided. */
@media print {
  .pcx.syl .syl-card, .pcx.syl .syl-row, .pcx.syl .syl-pairside, .pcx.syl .syl-hline { cursor: default; }
  .pcx.syl .syl-dot { border-color: #23273A; }
  .pcx.syl .syl-dot.on { background: #23273A; border-color: #23273A; }
  .pcx.syl .pcx-partlabel { margin: 10px 0 4px; font-size: 11px; }
  .pcx.syl .ref-dir { font-size: 10.5px; line-height: 1.4; margin-bottom: 4px; }
  .pcx.syl .pcx-trline { font-size: 10.5px; line-height: 1.4; }
  .pcx.syl .syl-ladder, .pcx.syl .syl-stress { gap: 7px; }
  .pcx.syl .syl-card { padding: 8px 6px 7px; }
  .pcx.syl .syl-card b, .pcx.syl .syl-card.strong b { font-size: 17px; }
  .pcx.syl .syl-row { min-height: 0; padding: 6px 10px; }
  .pcx.syl .syl-w { font-size: 16px; }
  .pcx.syl .syl-pairside b { font-size: 16px; }
  .pcx.syl .syl-pairside span { font-size: 11px; }
  /* Page 1 = the syllable/stress reference, page 2 = the haiku (read the
     example, then write one). Printed double-sided this is ONE sheet. */
  .pcx.syl .syl-haikupage { break-before: page; page-break-before: always; padding-top: 4px; }
  .pcx.syl .syl-haikupage > .syl-pairs { margin-top: 0; }
  .pcx.syl .syl-write { margin-top: 16px; }
  .pcx.syl .syl-wline { margin-bottom: 34px; }
  .pcx.syl .syl-wrule { height: 38px; }
  /* Reference side has to fit 10.1in: pack the two widest bands. */
  .pcx.syl .syl-count { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .pcx.syl .syl-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-items: start; }
  .pcx.syl .syl-pairhead { grid-column: 1 / -1; margin-bottom: 0; }
  .pcx.syl .syl-pair { margin-bottom: 0; }
  .pcx.syl .syl-traps { margin-top: 14px; }
  .pcx.syl .syl-traps .pcx-tr { columns: 2; column-gap: 18px; }
  .pcx.syl .syl-trap { font-size: 10.5px; line-height: 1.4; }
}

/* ── shared translation reveal (2026-07-22) ──────────────────────
   English-first: the English direction is always visible, the four
   language lines are hidden until asked for. Matches the shipped
   pattern on printables/slow-down-expressions.html (per-item "🌐 my
   language" + a header "show all" control) so the atoms behave the
   same way across the set. See the volunteer-english-first-principle.

   Scoping: each part wraps in .pcx-part; its button flips .tr-open on
   that wrapper, so one tap reveals every translated line in that part
   (direction lines AND any in-card glosses). The shell's header button
   flips .tr-all on <body> to open all parts at once for screenshare. */
.pcx-part { display: block; }
.pcx-trbtn { -webkit-appearance: none; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 9px;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--indigo);
  border-radius: 99px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700;
  padding: 5px 13px; min-height: 32px; }
.pcx-trbtn:active { transform: scale(.97); }
.pcx-part.tr-open > .pcx-trbtn, body.tr-all .pcx-trbtn { background: var(--indigo-tint); border-color: var(--indigo-soft); }
.pcx-tr { display: none; }
.pcx-part.tr-open .pcx-tr, body.tr-all .pcx-tr { display: grid; gap: 3px; }
.pcx-trline { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.pcx-trline .pcx-lang { margin-right: 3px; }

/* Paper cannot be tapped, so print always shows the translations and
   drops the controls. */
@media print {
  .pcx-trbtn { display: none !important; }
  .pcx-tr { display: grid !important; }
}

/* ── syllable-sprint additions (2026-07-22) ──────────────────────
   A reading round: the word is the prompt, so it dominates the stage
   and the clock steps back. The reveal shows the SPLIT above the count,
   so a wrong answer still teaches why. */
.pcx.spr .spr-word { font-size: 46px; font-weight: 800; color: var(--ink); line-height: 1.1;
  margin-bottom: 10px; word-break: break-word; }
.pcx.spr .spr-word + .spr-clock { font-size: 34px; color: var(--ink-soft); margin-bottom: 12px; }
.pcx.spr .spr-word + .spr-clock.low { color: var(--warn); }
.pcx.spr .spr-split { display: block; font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.pcx.spr .spr-split i { font-style: normal; color: var(--line-strong); margin: 0 5px; }
.pcx.spr .spr-count { display: block; font-size: 17px; font-weight: 700; color: var(--ink-soft); margin-top: 4px; }
.pcx.spr .spr-big:has(.spr-split) { font-size: inherit; }
/* Presentation: the word has to read from the back of the room. */
.pcx.spr.pcx-mode-screen .spr-word { font-size: clamp(46px, 9vw, 120px); }
.pcx.spr.pcx-mode-screen .spr-word + .spr-clock { font-size: clamp(34px, 5vw, 64px); }
.pcx.spr.pcx-mode-screen .spr-split { font-size: clamp(34px, 6vw, 84px); }
@media (max-width: 480px) { .pcx.spr .spr-word { font-size: 36px; } .pcx.spr .spr-split { font-size: 27px; } }

/* ── family-vacations · Class 6 grammar sheet (2026-07-22) ───────
   Self-contained (does not depend on the .pcx.wia rules, which live on
   a separate branch). Family vocab grid, then the going-to rule cards,
   model plan sentences, and an am/is/are self-check. */
.pcx.fam .ref-dir { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; }
.pcx.fam .pcx-partlabel { margin-top: 18px; }
.pcx.fam .pcx-partlabel:first-child { margin-top: 0; }

/* Part 1 · family words. The gloss rides the shared .pcx-tr reveal, so
   it must lose to the hidden default at matching specificity. */
.pcx.fam .fam-vocab { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcx.fam .fam-word { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; break-inside: avoid;
  border: 1px solid var(--line); border-left: 4px solid var(--indigo-soft); border-radius: 10px;
  background: var(--paper); padding: 8px 12px; min-height: 46px; font-family: var(--font-ui); }
.pcx.fam .fam-word b { font-size: 18px; font-weight: 800; color: var(--ink); }
.pcx.fam .fam-word .pcx-hear { pointer-events: none; }
.pcx.fam .fam-word.play { border-left-color: var(--indigo); background: var(--indigo-tint); }
.pcx.fam .fam-gloss { flex-basis: 100%; margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--line);
  gap: 1px; font-size: 12px; color: var(--ink-mid); line-height: 1.4; }
.pcx.fam .fam-gloss.pcx-tr { display: none; }
.pcx.fam .pcx-part.tr-open .fam-gloss.pcx-tr { display: grid; }
body.tr-all .pcx.fam .fam-gloss.pcx-tr { display: grid; }
.pcx.fam .fam-gloss .pcx-lang { margin-right: 3px; }

/* Part 2 · the rule. Three agreement cards + the base-verb note. */
.pcx.fam .fam-rule { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pcx.fam .fam-rulecard { border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 10px 12px;
  display: grid; gap: 3px; justify-items: start; break-inside: avoid; }
.pcx.fam .fam-subj { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.pcx.fam .fam-big { font-size: 27px; font-weight: 800; color: var(--indigo-deep); line-height: 1; }
.pcx.fam .fam-plus { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.pcx.fam .fam-ex { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: flex; align-items: flex-start; gap: 8px; border: none; background: transparent; padding: 5px 0 0;
  margin-top: 2px; border-top: 1px solid var(--line); font-family: var(--font-ui);
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.pcx.fam .fam-ex .pcx-hear { pointer-events: none; margin-top: 1px; }
.pcx.fam .fam-ex b, .pcx.fam .fam-plan b { color: var(--indigo-deep); font-weight: 800; }
.pcx.fam .fam-ex u, .pcx.fam .fam-plan u { text-decoration-color: var(--indigo-soft); text-underline-offset: 3px; }
.pcx.fam .fam-ex.play { color: var(--indigo-dark); }
.pcx.fam .fam-note { font-size: 13px; font-weight: 600; color: var(--ink-mid); line-height: 1.5;
  margin: 11px 0 0; padding: 9px 13px; background: var(--amber-tint); border-radius: 10px; }
.pcx.fam .fam-note b { color: var(--indigo-deep); font-weight: 800; }

/* Part 3 · model plan sentences. */
.pcx.fam .fam-plans { display: grid; gap: 7px; }
.pcx.fam .fam-plan { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 11px; min-height: 50px; break-inside: avoid;
  border: 1px solid var(--line); border-left: 4px solid var(--indigo-soft); border-radius: 10px;
  background: var(--paper); padding: 8px 13px; font-family: var(--font-ui);
  font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.pcx.fam .fam-plan .pcx-hear { pointer-events: none; }
.pcx.fam .fam-plan.play { border-left-color: var(--indigo); background: var(--indigo-tint); }

.pcx.fam .fam-traps { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 9px; }
.pcx.fam .fam-trapshead { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--warn); margin: 0 0 5px; }
.pcx.fam .fam-trap { font-size: 12.5px; color: var(--ink-mid); line-height: 1.5; margin: 0 0 4px; }
.pcx.fam .fam-trap b { color: var(--indigo-deep); font-weight: 800; }

/* Part 4 · check yourself: chips on screen, a written blank on paper. */
.pcx.fam .fam-check { margin: 0; padding-left: 22px; display: grid; gap: 11px;
  font-size: 16.5px; font-weight: 600; color: var(--ink); }
.pcx.fam .fam-check li { break-inside: avoid; line-height: 2; }
.pcx.fam .fam-slot { display: inline-flex; gap: 5px; vertical-align: middle; }
.pcx.fam .fam-chip { -webkit-appearance: none; appearance: none; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--paper); border-radius: 8px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink-mid);
  padding: 4px 11px; min-height: 34px; }
.pcx.fam .fam-chip.ok { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
.pcx.fam .fam-chip.miss { animation: pcx-shake .35s; border-color: var(--warn); color: var(--warn); }
.pcx.fam .fam-slot.done .fam-chip:not(.ok) { opacity: .3; pointer-events: none; }
.pcx.fam .fam-blank { display: none; }

@media (max-width: 620px) {
  .pcx.fam .fam-vocab { grid-template-columns: 1fr; }
  .pcx.fam .fam-rule { grid-template-columns: 1fr; }
}

@media print {
  .pcx.fam .fam-word, .pcx.fam .fam-plan, .pcx.fam .fam-ex { cursor: default; }
  .pcx.fam .fam-chip { display: none !important; }
  .pcx.fam .fam-blank { display: inline-block; min-width: 76px; border-bottom: 1.5px solid var(--ink-soft); }
  .pcx.fam .pcx-partlabel { margin: 8px 0 3px; font-size: 11px; }
  .pcx.fam .ref-dir { font-size: 10.5px; line-height: 1.3; margin-bottom: 3px; }
  .pcx.fam .pcx-trline { font-size: 10px; line-height: 1.3; }
  .pcx.fam .fam-vocab { gap: 5px; }
  .pcx.fam .fam-word { min-height: 0; padding: 5px 10px; }
  .pcx.fam .fam-word b { font-size: 15px; }
  .pcx.fam .fam-rule { gap: 7px; }
  .pcx.fam .fam-rulecard { padding: 7px 10px; }
  .pcx.fam .fam-big { font-size: 22px; }
  .pcx.fam .fam-ex { font-size: 12px; }
  .pcx.fam .fam-note { font-size: 11px; padding: 6px 10px; margin-top: 8px; }
  .pcx.fam .fam-plan { min-height: 0; padding: 5px 11px; font-size: 13px; }
  .pcx.fam .fam-plans { gap: 5px; }
  .pcx.fam .fam-trap { font-size: 10px; line-height: 1.35; break-inside: avoid; }
  .pcx.fam .fam-traps .pcx-tr { columns: 2; column-gap: 16px; }
  /* Page 1 = family words + the rule. Page 2 = the plans, the language
     traps, and the written practice. */
  .pcx.fam .fam-page2 { break-before: page; page-break-before: always; padding-top: 4px; }
  .pcx.fam .fam-page2 > .pcx-part:first-child .pcx-partlabel { margin-top: 0; }
  /* Enough room to hand-write am/is/are, but tight enough that page 2
     (plans + traps + practice) holds to one page. */
  .pcx.fam .fam-check { gap: 10px; font-size: 15px; }
  .pcx.fam .fam-check li { line-height: 1.85; }
}

/* ── sentence-sprint (.ssb) — build the going-to sentence (2026-07-22) ──
   Reuses the .spr top/clock/button tokens; adds the answer row + tile
   bank. Tiles are big touch targets so it works one-handed on a phone. */
.pcx.ssb .spr-top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 800; color: var(--ink-mid); min-height: 20px; }
.pcx.ssb .ssb-stage { border: 1.5px solid var(--line-strong); border-radius: 16px; padding: 22px 16px; margin-top: 8px; text-align: center; }
.pcx.ssb .ssb-clock { font-size: 40px; font-weight: 800; color: var(--indigo); line-height: 1; margin-bottom: 14px; }
.pcx.ssb .ssb-clock.low { color: var(--warn); }
.pcx.ssb .spr-btn { -webkit-appearance: none; appearance: none; min-height: 48px; padding: 10px 24px; border-radius: 12px; font: 700 16px var(--font-ui); cursor: pointer; }
.pcx.ssb .spr-btn.primary { background: var(--indigo); border: 1.5px solid var(--indigo); color: #fff; }
.pcx.ssb .spr-btn.ghost { background: none; border: 1.5px solid var(--line-strong); color: var(--ink-mid); }

/* Answer row: where the built sentence forms. Dashed = still empty. */
.pcx.ssb .ssb-answer { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center;
  min-height: 58px; padding: 10px; margin-bottom: 14px; border: 2px dashed var(--line-strong); border-radius: 12px; background: var(--indigo-wash); }
.pcx.ssb .ssb-answer.miss { animation: pcx-shake .35s; border-color: var(--warn); }
.pcx.ssb .ssb-hint { font-size: 14px; font-weight: 600; color: var(--ink-soft); }

.pcx.ssb .ssb-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; min-height: 46px; }
.pcx.ssb .ssb-tile { -webkit-appearance: none; appearance: none; cursor: pointer; min-height: 46px;
  border: 1.5px solid var(--line-strong); border-radius: 11px; background: var(--paper);
  font: 700 18px var(--font-ui); color: var(--ink); padding: 8px 16px; }
.pcx.ssb .ssb-tile:active { transform: scale(.96); }
.pcx.ssb .ssb-tile.placed { background: var(--indigo-tint); border-color: var(--indigo-soft); color: var(--indigo-deep); }

.pcx.ssb .ssb-solved { margin-bottom: 16px; }
.pcx.ssb .ssb-sentence { display: block; font-size: 26px; font-weight: 800; line-height: 1.25; margin-bottom: 6px; }
.pcx.ssb .ssb-sentence.ok { color: var(--ok); }
.pcx.ssb .ssb-sentence.plain { color: var(--ink); }
.pcx.ssb .ssb-verdict { font-size: 15px; font-weight: 800; color: var(--ink-soft); }
.pcx.ssb .spr-final { font-size: 30px; font-weight: 800; color: var(--indigo); margin-bottom: 14px; }

/* Presentation: read from the back of the room. */
.pcx.ssb.pcx-mode-screen .ssb-clock { font-size: clamp(40px, 6vw, 72px); }
.pcx.ssb.pcx-mode-screen .ssb-tile { font-size: clamp(18px, 3vw, 30px); min-height: clamp(46px, 7vw, 68px); }
.pcx.ssb.pcx-mode-screen .ssb-sentence { font-size: clamp(26px, 5vw, 60px); }
@media (max-width: 400px) { .pcx.ssb .ssb-tile { font-size: 16px; padding: 8px 12px; } }

/* ── this-that-these-those · Class 6 grammar-part-2 sheet (2026-07-22) ──
   Self-contained. Now PICTURE-driven (Brian: the text-only sheet wasn't
   landing): every part shows a scene from demonstrative-scenes.js (the
   same engine as the sprint). Grid = the same apple × near/far × one/many;
   models = person silhouettes; check = an object picture per item. */
.pcx.dem .ref-dir { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; }
.pcx.dem .pcx-partlabel { margin-top: 18px; }
.pcx.dem .pcx-partlabel:first-child { margin-top: 0; }
.pcx.dem .dem-pic { display: block; }
.pcx.dem .dem-pic .dsp-svg { border-radius: 8px; }

/* Part 1 · the 2x2 grid — picture on top, then the word. */
.pcx.dem .dem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcx.dem .dem-card { -webkit-appearance: none; appearance: none; cursor: pointer; position: relative;
  display: flex; flex-direction: column; gap: 3px; text-align: left; break-inside: avoid;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--paper); padding: 10px 12px 12px; font-family: var(--font-ui); }
.pcx.dem .dem-card .dem-pic { margin-bottom: 5px; }
.pcx.dem .dem-word { font-size: 26px; font-weight: 800; color: var(--indigo-deep); line-height: 1; }
.pcx.dem .dem-tag { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.pcx.dem .dem-ex { font-size: 14.5px; font-weight: 600; color: var(--ink-mid); line-height: 1.35; margin-top: 2px; }
.pcx.dem .dem-ex b { color: var(--indigo-deep); font-weight: 800; }
.pcx.dem .dem-ex u { text-decoration-color: var(--indigo-soft); text-underline-offset: 3px; }
.pcx.dem .dem-card .pcx-hear { pointer-events: none; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; font-size: 13px; }
.pcx.dem .dem-card.play { border-color: var(--indigo); background: var(--indigo-tint); }

/* Part 2 · family models — small person picture on the left. */
.pcx.dem .dem-models { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pcx.dem .dem-model { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 11px; break-inside: avoid;
  border: 1px solid var(--line); border-left: 4px solid var(--indigo-soft); border-radius: 10px;
  background: var(--paper); padding: 8px 12px; font-family: var(--font-ui); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.pcx.dem .dem-model .dem-pic.sm { width: 78px; flex: none; }
.pcx.dem .dem-modeltext { flex: 1; display: flex; align-items: center; gap: 9px; }
.pcx.dem .dem-model .pcx-hear { pointer-events: none; flex: none; }
.pcx.dem .dem-model b { color: var(--indigo-deep); font-weight: 800; }
.pcx.dem .dem-model u { text-decoration-color: var(--indigo-soft); text-underline-offset: 3px; }
.pcx.dem .dem-model.play { border-left-color: var(--indigo); background: var(--indigo-tint); }

.pcx.dem .dem-traps { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 9px; }
.pcx.dem .dem-trapshead { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); margin: 0 0 5px; }
.pcx.dem .dem-trap { font-size: 12.5px; color: var(--ink-mid); line-height: 1.5; margin: 0 0 4px; }
.pcx.dem .dem-trap b { color: var(--indigo-deep); font-weight: 800; }

/* Part 3 · check — a picture per item; chips on screen, a blank on paper. */
.pcx.dem .dem-check { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.pcx.dem .dem-check li { break-inside: avoid; display: flex; align-items: center; gap: 12px; counter-increment: dem; }
.pcx.dem .dem-check .dem-pic.sm { width: 104px; flex: none; }
.pcx.dem .dem-checkq { flex: 1; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.pcx.dem .dem-checkq::before { content: counter(dem) ". "; font-weight: 800; color: var(--ink-soft); }
.pcx.dem .dem-check { counter-reset: dem; }
.pcx.dem .dem-slot { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }
.pcx.dem .dem-chip { -webkit-appearance: none; appearance: none; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--paper); border-radius: 8px;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: var(--ink-mid); padding: 3px 9px; min-height: 32px; }
.pcx.dem .dem-chip.ok { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
.pcx.dem .dem-chip.miss { animation: pcx-shake .35s; border-color: var(--warn); color: var(--warn); }
.pcx.dem .dem-slot.done .dem-chip:not(.ok) { opacity: .3; pointer-events: none; }
.pcx.dem .dem-blank { display: none; }

@media (max-width: 620px) {
  .pcx.dem .dem-grid, .pcx.dem .dem-models, .pcx.dem .dem-check { grid-template-columns: 1fr; }
}

@media print {
  .pcx.dem .dem-card, .pcx.dem .dem-model { cursor: default; }
  .pcx.dem .dem-chip { display: none !important; }
  .pcx.dem .dem-blank { display: inline-block; min-width: 82px; border-bottom: 1.5px solid var(--ink-soft); }
  .pcx.dem .pcx-partlabel { margin: 8px 0 3px; font-size: 11px; }
  .pcx.dem .ref-dir { font-size: 10.5px; line-height: 1.3; margin-bottom: 3px; }
  .pcx.dem .pcx-trline { font-size: 10px; line-height: 1.3; }
  .pcx.dem .dem-grid { gap: 7px; }
  .pcx.dem .dem-card { padding: 7px 10px 8px; }
  /* On paper the grid pictures shrink and centre — still clearly near/far,
     but compact enough that grid + models + traps hold to one page. */
  .pcx.dem .dem-card .dem-pic { max-width: 148px; margin: 0 auto 4px; }
  .pcx.dem .dem-word { font-size: 20px; }
  .pcx.dem .dem-ex { font-size: 12px; }
  .pcx.dem .dem-models { gap: 5px; }
  .pcx.dem .dem-model { padding: 5px 10px; font-size: 12.5px; }
  .pcx.dem .dem-model .dem-pic.sm { width: 58px; }
  .pcx.dem .dem-trap { font-size: 10px; line-height: 1.35; break-inside: avoid; }
  .pcx.dem .dem-traps .pcx-tr { columns: 2; column-gap: 16px; }
  /* Page 1 = grid + models + traps. Page 2 = the picture practice. */
  .pcx.dem .dem-checkpage { break-before: page; page-break-before: always; padding-top: 4px; }
  .pcx.dem .dem-checkpage .pcx-partlabel { margin-top: 0; }
  .pcx.dem .dem-check { gap: 12px 16px; }
  .pcx.dem .dem-check .dem-pic.sm { width: 92px; }
  .pcx.dem .dem-checkq { font-size: 13px; }
}

/* ── demonstrative-sprint (.dsp) — pick this/that/these/those (2026-07-22) ──
   Class 6 grammar-part-2 game. Reuses .spr button tokens; adds the
   sentence frame + a 2x2 choice grid of big touch targets. */
.pcx.dsp .spr-top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 800; color: var(--ink-mid); min-height: 20px; }
.pcx.dsp .dsp-stage { border: 1.5px solid var(--line-strong); border-radius: 16px; padding: 22px 16px; margin-top: 8px; text-align: center; }
.pcx.dsp .dsp-clock { font-size: 40px; font-weight: 800; color: var(--indigo); line-height: 1; margin-bottom: 14px; }
.pcx.dsp .dsp-clock.low { color: var(--warn); }
.pcx.dsp .spr-btn { -webkit-appearance: none; appearance: none; min-height: 48px; padding: 10px 24px; border-radius: 12px; font: 700 16px var(--font-ui); cursor: pointer; }
.pcx.dsp .spr-btn.primary { background: var(--indigo); border: 1.5px solid var(--indigo); color: #fff; }

/* The picture cue: a receding-floor SVG scene. Near objects are big and
   low; far objects are small and high toward the back. */
.pcx.dsp .dsp-scene { max-width: 300px; margin: 0 auto 16px; }
.pcx .dsp-svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 12px; background: #F7F8FD; }
.pcx.dsp .dsp-scene.small { max-width: 150px; margin: 0 auto 8px; }

.pcx.dsp .dsp-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcx.dsp .dsp-choice { -webkit-appearance: none; appearance: none; cursor: pointer; min-height: 58px;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--paper);
  font: 800 22px var(--font-ui); color: var(--ink); }
.pcx.dsp .dsp-choice:active { transform: scale(.97); }
.pcx.dsp .dsp-choice.miss { animation: pcx-shake .35s; border-color: var(--warn); color: var(--warn); }

.pcx.dsp .dsp-solved { margin-bottom: 16px; }
.pcx.dsp .dsp-sentence { display: block; font-size: 26px; font-weight: 800; line-height: 1.25; margin-bottom: 6px; }
.pcx.dsp .dsp-sentence.ok { color: var(--ok); }
.pcx.dsp .dsp-sentence.plain { color: var(--ink); }
.pcx.dsp .dsp-verdict { font-size: 15px; font-weight: 800; color: var(--ink-soft); }
.pcx.dsp .spr-final { font-size: 30px; font-weight: 800; color: var(--indigo); margin-bottom: 14px; }

.pcx.dsp.pcx-mode-screen .dsp-clock { font-size: clamp(40px, 6vw, 72px); }
.pcx.dsp.pcx-mode-screen .dsp-scene { max-width: min(46vh, 420px); }
.pcx.dsp.pcx-mode-screen .dsp-choice { font-size: clamp(22px, 4vw, 40px); min-height: clamp(58px, 9vw, 92px); }
.pcx.dsp.pcx-mode-screen .dsp-sentence { font-size: clamp(26px, 5vw, 56px); }

/* ── yes-no-present · Class 7 grammar 1 (2026-07-29) ──────────────
   Answering yes/no present-continuous questions. Echo rule cards,
   airport Q&A pairs, and a be-verb self-check. */
.pcx.ynp .ref-dir { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; }
.pcx.ynp .pcx-partlabel { margin-top: 18px; }
.pcx.ynp .pcx-partlabel:first-child { margin-top: 0; }

.pcx.ynp .ynp-rule { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pcx.ynp .ynp-rulecard { border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; break-inside: avoid; }
.pcx.ynp .ynp-subj { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 4px; }
.pcx.ynp .ynp-ex { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: flex; align-items: flex-start; gap: 8px; border: none; background: transparent; padding: 0;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.pcx.ynp .ynp-ex .pcx-hear { pointer-events: none; margin-top: 1px; }
.pcx.ynp .ynp-ex b, .pcx.ynp .ynp-q b, .pcx.ynp .ynp-a b { color: var(--indigo-deep); font-weight: 800; }
.pcx.ynp .ynp-ex u, .pcx.ynp .ynp-q u { text-decoration-color: var(--noun); text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--noun); font-weight: 700; }
.pcx.ynp .ynp-short { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-top: 3px; }
.pcx.ynp .ynp-short b { color: var(--indigo-deep); }
.pcx.ynp .ynp-ex.play { color: var(--indigo-dark); }
.pcx.ynp .ynp-note { font-size: 13px; font-weight: 600; color: var(--ink-mid); line-height: 1.5;
  margin: 11px 0 0; padding: 9px 13px; background: var(--amber-tint); border-radius: 10px; }
.pcx.ynp .ynp-note b { color: var(--indigo-deep); font-weight: 800; }

.pcx.ynp .ynp-pairs { display: grid; gap: 7px; }
.pcx.ynp .ynp-pair { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; align-items: stretch; break-inside: avoid; }
.pcx.ynp .ynp-q, .pcx.ynp .ynp-a { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 9px; min-height: 48px; border-radius: 10px; padding: 8px 12px;
  font-family: var(--font-ui); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.pcx.ynp .ynp-q { border: 1px solid var(--line); border-left: 4px solid var(--indigo-soft); background: var(--paper); }
.pcx.ynp .ynp-a { border: 1px solid var(--line); background: var(--indigo-wash); }
.pcx.ynp .ynp-q .pcx-hear { pointer-events: none; flex: none; }
.pcx.ynp .ynp-q.play { border-left-color: var(--indigo); background: var(--indigo-tint); }
.pcx.ynp .ynp-a.play { border-color: var(--indigo-soft); }

.pcx.ynp .ynp-traps { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 9px; }
.pcx.ynp .ynp-trapshead { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); margin: 0 0 5px; }
.pcx.ynp .ynp-trap { font-size: 12.5px; color: var(--ink-mid); line-height: 1.5; margin: 0 0 4px; }
.pcx.ynp .ynp-trap b { color: var(--indigo-deep); font-weight: 800; }

.pcx.ynp .ynp-check { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pcx.ynp .ynp-check li { break-inside: avoid; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; counter-increment: ynp; }
.pcx.ynp .ynp-check { counter-reset: ynp; }
.pcx.ynp .ynp-cq { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.pcx.ynp .ynp-cq::before { content: counter(ynp) ". "; font-weight: 800; color: var(--ink-soft); }
.pcx.ynp .ynp-ca { font-size: 16px; font-weight: 700; color: var(--indigo-deep); display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pcx.ynp .ynp-slot { display: inline-flex; gap: 5px; vertical-align: middle; }
.pcx.ynp .ynp-chip { -webkit-appearance: none; appearance: none; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--paper); border-radius: 8px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink-mid); padding: 3px 10px; min-height: 32px; }
.pcx.ynp .ynp-chip.ok { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
.pcx.ynp .ynp-chip.miss { animation: pcx-shake .35s; border-color: var(--warn); color: var(--warn); }
.pcx.ynp .ynp-slot.done .ynp-chip:not(.ok) { opacity: .3; pointer-events: none; }
.pcx.ynp .ynp-blank { display: none; }

@media (max-width: 620px) {
  .pcx.ynp .ynp-rule { grid-template-columns: 1fr; }
  .pcx.ynp .ynp-pair { grid-template-columns: 1fr; gap: 4px; }
  .pcx.ynp .ynp-a { margin-left: 14px; }
}
@media print {
  .pcx.ynp .ynp-q, .pcx.ynp .ynp-a, .pcx.ynp .ynp-ex { cursor: default; }
  .pcx.ynp .ynp-chip { display: none !important; }
  .pcx.ynp .ynp-blank { display: inline-block; min-width: 68px; border-bottom: 1.5px solid var(--ink-soft); }
  .pcx.ynp .pcx-partlabel { margin: 8px 0 3px; font-size: 11px; }
  .pcx.ynp .ref-dir { font-size: 10.5px; line-height: 1.3; margin-bottom: 3px; }
  .pcx.ynp .pcx-trline { font-size: 10px; line-height: 1.3; }
  .pcx.ynp .ynp-rule { gap: 7px; }
  .pcx.ynp .ynp-rulecard { padding: 7px 10px; }
  .pcx.ynp .ynp-ex { font-size: 12.5px; }
  .pcx.ynp .ynp-note { font-size: 11px; padding: 6px 10px; margin-top: 8px; }
  .pcx.ynp .ynp-q, .pcx.ynp .ynp-a { min-height: 0; padding: 5px 10px; font-size: 13px; }
  .pcx.ynp .ynp-pairs { gap: 5px; }
  .pcx.ynp .ynp-trap { font-size: 10px; line-height: 1.35; break-inside: avoid; }
  .pcx.ynp .ynp-traps .pcx-tr { columns: 2; column-gap: 16px; }
  .pcx.ynp .ynp-checkpage { break-before: page; page-break-before: always; padding-top: 4px; }
  .pcx.ynp .ynp-checkpage .pcx-partlabel { margin-top: 0; }
  .pcx.ynp .ynp-check { gap: 16px; }
  .pcx.ynp .ynp-cq, .pcx.ynp .ynp-ca { font-size: 13.5px; }
}

/* ── object-pronouns · Class 7 grammar 2 (2026-07-29) ────────────── */
.pcx.opr .ref-dir { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; }
.pcx.opr .pcx-partlabel { margin-top: 18px; }
.pcx.opr .pcx-partlabel:first-child { margin-top: 0; }

.pcx.opr .opr-pairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pcx.opr .opr-pair { -webkit-appearance: none; appearance: none; cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 52px; break-inside: avoid;
  border: 1.5px solid var(--line-strong); border-radius: 11px; background: var(--paper); padding: 8px 10px; font-family: var(--font-ui); }
.pcx.opr .opr-subj { font-size: 17px; font-weight: 700; color: var(--ink-mid); }
.pcx.opr .opr-arrow { color: var(--ink-soft); font-weight: 700; }
.pcx.opr .opr-obj { font-size: 19px; font-weight: 800; color: var(--noun); }
.pcx.opr .opr-pair .pcx-hear { pointer-events: none; position: absolute; top: 5px; right: 6px; width: 22px; height: 22px; font-size: 11px; }
.pcx.opr .opr-pair.play { border-color: var(--noun); background: var(--noun-bg); }

.pcx.opr .opr-sents { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pcx.opr .opr-sent { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px; min-height: 48px; break-inside: avoid;
  border: 1px solid var(--line); border-left: 4px solid var(--noun); border-radius: 10px;
  background: var(--paper); padding: 8px 12px; font-family: var(--font-ui); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.pcx.opr .opr-sent .pcx-hear { pointer-events: none; }
.pcx.opr .opr-sent b { color: var(--noun); font-weight: 800; }
.pcx.opr .opr-sent.play { background: var(--noun-bg); }

.pcx.opr .opr-traps { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 9px; }
.pcx.opr .opr-trapshead { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); margin: 0 0 5px; }
.pcx.opr .opr-trap { font-size: 12.5px; color: var(--ink-mid); line-height: 1.5; margin: 0 0 4px; }
.pcx.opr .opr-trap b { color: var(--noun); font-weight: 800; }

.pcx.opr .opr-check { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.pcx.opr .opr-check li { break-inside: avoid; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 16px; font-weight: 600; color: var(--ink); counter-increment: opr; }
.pcx.opr .opr-check { counter-reset: opr; }
.pcx.opr .opr-check li::before { content: counter(opr) ". "; font-weight: 800; color: var(--ink-soft); }
.pcx.opr .opr-slot { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }
.pcx.opr .opr-chip { -webkit-appearance: none; appearance: none; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--paper); border-radius: 8px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink-mid); padding: 3px 9px; min-height: 32px; }
.pcx.opr .opr-chip.ok { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
.pcx.opr .opr-chip.miss { animation: pcx-shake .35s; border-color: var(--warn); color: var(--warn); }
.pcx.opr .opr-slot.done .opr-chip:not(.ok) { opacity: .3; pointer-events: none; }
.pcx.opr .opr-blank { display: none; }
.pcx.opr .opr-cue { font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink-soft); }

@media (max-width: 620px) {
  .pcx.opr .opr-pairs { grid-template-columns: repeat(2, 1fr); }
  .pcx.opr .opr-sents { grid-template-columns: 1fr; }
}
@media print {
  .pcx.opr .opr-pair, .pcx.opr .opr-sent { cursor: default; }
  .pcx.opr .opr-chip { display: none !important; }
  .pcx.opr .opr-blank { display: inline-block; min-width: 62px; border-bottom: 1.5px solid var(--ink-soft); }
  .pcx.opr .pcx-partlabel { margin: 8px 0 3px; font-size: 11px; }
  .pcx.opr .ref-dir { font-size: 10.5px; line-height: 1.3; margin-bottom: 3px; }
  .pcx.opr .pcx-trline { font-size: 10px; line-height: 1.3; }
  .pcx.opr .opr-pairs { gap: 6px; grid-template-columns: repeat(7, 1fr); }
  .pcx.opr .opr-pair { min-height: 0; padding: 6px 4px; flex-direction: column; gap: 1px; }
  .pcx.opr .opr-subj { font-size: 13px; } .pcx.opr .opr-obj { font-size: 15px; }
  .pcx.opr .opr-sents { gap: 5px; }
  .pcx.opr .opr-sent { min-height: 0; padding: 5px 10px; font-size: 13px; }
  .pcx.opr .opr-trap { font-size: 10px; line-height: 1.35; break-inside: avoid; }
  .pcx.opr .opr-traps .pcx-tr { columns: 2; column-gap: 16px; }
  .pcx.opr .opr-checkpage { break-before: page; page-break-before: always; padding-top: 4px; }
  .pcx.opr .opr-checkpage .pcx-partlabel { margin-top: 0; }
  .pcx.opr .opr-check { gap: 15px; }
}