/* ==========================================================================
   Little Roos Talk — the board.
   Every colour comes from tokens.css (--lr-* and --talk-*). Nothing here moves
   a word: sizes change how big cells are, never where a word sits.
   ========================================================================== */

:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }

html, body { height: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--talk-ground);
  color: var(--talk-ink);
  font-family: var(--lr-font-body);
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

.talk {
  --gap: clamp(4px, 1vmin, 12px);
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--gap);
  padding: max(var(--gap), env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(var(--gap), env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  position: relative;
}

/* ── Sentence strip ─────────────────────────────────────────────────────── */
.strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--gap);
  height: clamp(64px, 11vmin, 104px);
}
.unlock {
  position: relative;
  width: clamp(56px, 10vmin, 92px);
  border: 0; padding: 0; margin: 0;
  background: var(--lr-white);
  border-radius: var(--lr-radius-md);
  display: grid; place-items: center;
  cursor: pointer;
}
.unlock img { width: 82%; height: auto; display: block; }
.unlock svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); pointer-events: none; }
.unlock circle { fill: none; stroke: var(--lr-coral); stroke-width: 5; stroke-dasharray: 289; stroke-dashoffset: 289; transform: rotate(-90deg); transform-origin: 50% 50%; }
.unlock.holding circle { transition: stroke-dashoffset 3s linear; stroke-dashoffset: 0; }

.said {
  background: var(--talk-strip);
  border-radius: var(--lr-radius-md);
  border: 2px solid var(--lr-hairline);
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  cursor: pointer;
}
.said::-webkit-scrollbar { display: none; }
.said:empty::before { content: ""; width: 100%; height: 56%; border: 3px dashed var(--lr-hairline); border-radius: var(--lr-radius-sm); }
.chip { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; align-self: stretch; padding: 2px 6px; border-radius: var(--lr-radius-sm); }
.chip img, .chip .glyph { width: clamp(32px, 6.4vmin, 60px); height: clamp(32px, 6.4vmin, 60px); object-fit: contain; background: var(--talk-plate); border-radius: var(--lr-radius-sm); }
.chip .glyph { display: grid; place-items: center; font-weight: 800; font-size: clamp(0.8rem, 2vmin, 1.1rem); background: var(--talk-cell); }
.chip span { font-weight: 700; font-size: clamp(0.8rem, 1.8vmin, 1.05rem); line-height: 1.1; white-space: nowrap; }
.chip.speaking { background: var(--talk-press); }

.keys { display: flex; gap: var(--gap); }
.key {
  width: clamp(60px, 10.5vmin, 100px);
  border: 0; margin: 0; padding: 4px;
  border-radius: var(--lr-radius-md);
  display: grid; place-items: center; align-content: center; gap: 2px;
  font: 700 clamp(0.72rem, 1.5vmin, 0.92rem)/1 var(--lr-font-body);
  cursor: pointer;
  color: var(--talk-ink);
  background: var(--talk-cell);
  box-shadow: inset 0 0 0 3px var(--lr-hairline);
}
.key svg { width: 44%; height: auto; max-height: 44px; }
.key--speak { background: var(--talk-speak); color: var(--lr-white); box-shadow: none; }
.key.down { transform: scale(0.96); }

/* ── The board: core words on the left, the changing topic area on the right ─ */
.board {
  display: flex;
  gap: calc(var(--gap) * 2.2);
  min-height: 0;
}
.core, .fringe {
  display: grid;
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: var(--gap);
  min-height: 0; min-width: 0;
}
.core { grid-template-columns: repeat(var(--core-cols), minmax(0, 1fr)); flex: var(--core-cols) 1 0; }
.fringe {
  grid-template-columns: repeat(var(--fringe-cols), minmax(0, 1fr));
  flex: var(--fringe-cols) 1 0;
  position: relative;
}
/* the topic area sits on a faint panel, so it reads as the part that changes */
.fringe::before {
  content: ""; position: absolute; inset: calc(var(--gap) * -0.8);
  background: var(--talk-press); border-radius: var(--lr-radius-md); opacity: 0.55; pointer-events: none;
}

.cell {
  --edge: var(--talk-little-edge);
  --band: var(--talk-little-band);
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0; min-width: 0;
  margin: 0; padding: 0;
  border: var(--edge-w, 5px) solid var(--edge);
  border-radius: var(--cell-r, var(--lr-radius-md));
  background: var(--talk-cell);
  color: var(--talk-ink);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  transition: transform 90ms ease-out;
}
.cell .pic { display: grid; place-items: center; min-height: 0; padding: 7% 8% 3%; }
.cell .pic img { width: 100%; height: 100%; object-fit: contain; min-height: 0; pointer-events: none; background: var(--talk-plate); border-radius: var(--lr-radius-sm); }
.cell .word {
  background: var(--band);
  font-weight: 700;
  font-size: var(--label-size, 1rem);
  line-height: 1.12;
  padding: 0.22em 0.15em 0.28em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
/* no picture yet: the word is the picture */
.cell.wordonly { grid-template-rows: minmax(0, 1fr); }
.cell.wordonly .pic { font-weight: 800; font-size: calc(var(--label-size, 1rem) * 1.5); line-height: 1; padding: 4%; text-align: center; place-content: center; white-space: nowrap; }
.cell.wordonly .word { display: none; }
.cell.empty { visibility: hidden; pointer-events: none; }
.cell::after { content: ""; position: absolute; inset: 0; background: var(--talk-press); opacity: 0; pointer-events: none; }
.cell.down { transform: scale(0.97); }
.cell.down::after { opacity: 1; }
.cell:focus-visible, .key:focus-visible, .unlock:focus-visible, .said:focus-visible, .qk:focus-visible { outline: 4px solid var(--lr-coral); outline-offset: 2px; }

.cell[data-type="pronoun"]    { --edge: var(--talk-pronoun-edge);    --band: var(--talk-pronoun-band); }
.cell[data-type="verb"]       { --edge: var(--talk-verb-edge);       --band: var(--talk-verb-band); }
.cell[data-type="describing"] { --edge: var(--talk-describing-edge); --band: var(--talk-describing-band); }
.cell[data-type="noun"]       { --edge: var(--talk-noun-edge);       --band: var(--talk-noun-band); }
.cell[data-type="social"]     { --edge: var(--talk-social-edge);     --band: var(--talk-social-band); }
.cell[data-type="question"]   { --edge: var(--talk-question-edge);   --band: var(--talk-question-band); }
.cell[data-type="negation"]   { --edge: var(--talk-negation-edge);   --band: var(--talk-negation-band); }
.cell[data-type="phrase"]     { --edge: var(--talk-phrase-edge);     --band: var(--talk-phrase-band); }

/* Topic keys look like folders: a tab on top, so they read as "opens", not "says" */
.cell.folder { border-top-left-radius: 4px; border-color: var(--talk-noun-edge); }
.cell.folder::before {
  content: ""; position: absolute; top: 0; left: 0; width: 42%; height: 12%;
  background: var(--talk-noun-edge); border-bottom-right-radius: 10px; pointer-events: none;
}
.cell.folder .word { background: var(--talk-noun-band); }
.cell.nav { border-color: var(--talk-ink-soft); border-style: dashed; }
.cell.nav .pic svg { width: 64%; height: 64%; color: var(--talk-ink); }
.cell.nav .word { background: transparent; }

/* ── Quick row: always there, never moves ─────────────────────────────────── */
.quick {
  display: grid;
  grid-template-columns: repeat(var(--quick-n, 7), minmax(0, 1fr));
  gap: var(--gap);
  height: clamp(54px, 9vmin, 88px);
}
.qk {
  --edge: var(--talk-little-edge);
  --band: var(--talk-little-band);
  display: flex; align-items: center; justify-content: center; gap: 6%;
  border: 4px solid var(--edge);
  border-radius: var(--lr-radius-md);
  background: var(--band);
  color: var(--talk-ink);
  font: 800 clamp(0.8rem, 2.1vmin, 1.25rem)/1.1 var(--lr-font-body);
  cursor: pointer; margin: 0; padding: 4px 6px; min-width: 0;
  overflow: hidden;
}
.qk img { height: 76%; aspect-ratio: 1; object-fit: contain; background: var(--talk-plate); border-radius: 8px; flex: none; }
.qk span { white-space: nowrap; overflow: hidden; }
.qk[data-type="social"]     { --edge: var(--talk-social-edge);     --band: var(--talk-social-band); }
.qk[data-type="negation"]   { --edge: var(--talk-negation-edge);   --band: var(--talk-negation-band); }
.qk[data-type="describing"] { --edge: var(--talk-describing-edge); --band: var(--talk-describing-band); }
.qk[data-type="phrase"]     { --edge: var(--talk-phrase-edge);     --band: var(--talk-phrase-band); }
.qk.down { transform: scale(0.97); }

/* Colour style (grown-up setting) */
.talk[data-colour="fill"] .cell:not(.nav) { background: var(--band); }
.talk[data-colour="off"] .cell:not(.nav), .talk[data-colour="off"] .qk { --edge: var(--lr-hairline); --band: transparent; }
.talk[data-colour="off"] .cell.folder { border-color: var(--lr-hairline); }
/* Label position */
.talk[data-labels="above"] .cell { grid-template-rows: auto minmax(0, 1fr); }
.talk[data-labels="above"] .cell .word { order: -1; }
.talk[data-labels="hidden"] .cell:not(.wordonly):not(.nav) { grid-template-rows: minmax(0, 1fr); }
.talk[data-labels="hidden"] .cell:not(.wordonly):not(.nav) .word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }

/* Upright phone: the strip keys drop under the message */
@media (max-aspect-ratio: 3/4) {
  .strip { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; height: auto; }
  .said { min-height: 60px; }
  .keys { grid-column: 1 / -1; }
  .key { flex: 1; width: auto; height: 48px; grid-auto-flow: column; }
  .key svg { width: 24px; }
  .quick { height: 64px; }
  .qk { flex-direction: column; gap: 2px; padding: 3px 2px; border-width: 3px; font-size: 0.66rem; }
  .qk img { height: 58%; }
}

/* ── Loading ─────────────────────────────────────────────────────────────── */
.loading {
  position: absolute; inset: 0; z-index: 5;
  background: var(--talk-ground);
  display: grid; place-content: center; justify-items: center; gap: 16px;
  text-align: center; padding: 24px;
}
.loading img { width: 140px; height: auto; background: var(--lr-white); border-radius: var(--lr-radius-md); padding: 10px 14px; }
.loading p { margin: 0; font-weight: 700; font-size: 1.1rem; }
.loading .bar { width: min(320px, 70vw); height: 10px; border-radius: 5px; background: var(--talk-press); overflow: hidden; }
.loading .bar i { display: block; height: 100%; width: 0; background: var(--lr-deep-teal); transition: width 0.2s; }

/* ── Grown-up drawer ────────────────────────────────────────────────────── */
.grownup { position: fixed; inset: 0; background: rgba(7, 53, 46, 0.45); display: grid; justify-items: end; z-index: 10; }
.panel {
  width: min(460px, 100%); height: 100%; overflow-y: auto;
  background: var(--lr-sand); color: var(--lr-forest);
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; display: grid; align-content: start; gap: 18px;
  -webkit-user-select: text; user-select: text;
  color-scheme: light;
}
.panel h2 { font-family: var(--lr-font-display); font-weight: 400; font-size: 1.9rem; margin: 0; line-height: 1; }
.panel p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--lr-text-muted); text-wrap: pretty; }
.panel .hint { font-size: 0.85rem; margin-top: 4px; }
.panel fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.panel legend { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.opt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: var(--lr-white); border-radius: var(--lr-radius-sm); padding: 10px 12px; min-height: 48px; box-sizing: border-box; cursor: pointer; }
.opt input { width: 22px; height: 22px; accent-color: var(--lr-deep-teal); margin: 0; }
.opt b { font-weight: 700; }
.opt small { display: block; color: var(--lr-text-muted); font-size: 0.8rem; }
.opt .hear { border: 0; background: var(--lr-mint-soft); color: var(--lr-forest); border-radius: var(--lr-radius-pill); padding: 8px 12px; font: 700 0.85rem var(--lr-font-body); cursor: pointer; min-height: 36px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { flex: 1; min-width: 80px; position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 11px 8px; background: var(--lr-white); border-radius: var(--lr-radius-sm); font-weight: 700; font-size: 0.9rem; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; }
.seg input:checked + span { box-shadow: inset 0 0 0 3px var(--lr-deep-teal); }
.seg input:focus-visible + span { outline: 3px solid var(--lr-coral); outline-offset: 2px; }
.meter { font-variant-numeric: tabular-nums; background: var(--lr-white); border-radius: var(--lr-radius-sm); padding: 12px; font-size: 0.9rem; line-height: 1.6; }
.meter strong { font-size: 1.4rem; }
.done { justify-self: start; }
.credit { border-top: 1px solid var(--lr-hairline); padding-top: 14px; font-size: 0.8rem !important; }

@media (prefers-reduced-motion: reduce) {
  .cell, .key, .qk { transition: none; }
  .cell.down, .key.down, .qk.down { transform: none; }
}

/* ── Set-up (grown-ups, first run) and device health ─────────────────────── */
.setup {
  position: fixed; inset: 0; z-index: 12;
  background: rgba(7, 53, 46, 0.55);
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.setup-card {
  width: min(560px, 100%);
  background: var(--lr-sand); color: var(--lr-forest);
  border-radius: var(--lr-radius-lg);
  padding: clamp(20px, 4vw, 32px);
  display: grid; gap: 16px;
  box-shadow: var(--lr-shadow-pop);
  color-scheme: light;
  -webkit-user-select: text; user-select: text;
}
.setup-card h2 { font-family: var(--lr-font-display); font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1.05; margin: 0; text-wrap: balance; }
.setup-card > p { margin: 0; line-height: 1.5; color: var(--lr-text-muted); text-wrap: pretty; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; background: var(--lr-white); border-radius: var(--lr-radius-md); padding: 14px; }
.steps li > div > b { display: block; font-size: 1rem; }
.steps small { display: block; margin-top: 3px; font-size: 0.9rem; line-height: 1.45; color: var(--lr-text-muted); }
.steps small svg { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.tick {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 3px var(--lr-hairline);
  flex: none;
}
[data-state="done"] > .tick { background: var(--lr-deep-teal); box-shadow: none; }
[data-state="done"] > .tick::after { content: ""; width: 12px; height: 7px; border: solid var(--lr-white); border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
[data-state="wait"] > .tick { box-shadow: inset 0 0 0 3px var(--lr-mint); }
[data-state="wait"] > .tick::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lr-teal); animation: talk-pulse 1.2s ease-in-out infinite; }
[data-state="warn"] > .tick { background: var(--lr-coral); box-shadow: none; }
[data-state="warn"] > .tick::after { content: "!"; color: var(--lr-white); font-weight: 800; }
@keyframes talk-pulse { 50% { transform: scale(0.5); opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { [data-state="wait"] > .tick::after { animation: none; } }
.tip { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--lr-text-muted); }
.tip:empty { display: none; }
.setup-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.step-btn {
  margin-top: 8px; border: 0; border-radius: var(--lr-radius-pill);
  background: var(--lr-forest); color: var(--lr-white);
  font: 700 0.9rem var(--lr-font-body); padding: 10px 16px; min-height: 44px; cursor: pointer;
}
.link-btn { justify-self: start; border: 0; background: none; padding: 6px 0; min-height: 44px; color: var(--lr-deep-teal); font: 700 0.9rem var(--lr-font-body); text-decoration: underline; cursor: pointer; }
.health { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.health li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; background: var(--lr-white); border-radius: var(--lr-radius-sm); padding: 10px 12px; font-size: 0.9rem; line-height: 1.4; }
.health .tick { width: 26px; height: 26px; }
.update { background: var(--lr-mint-soft); border-radius: var(--lr-radius-sm); padding: 12px; }
.update p { margin: 0; }

/* ── Grown-up mode (T3) ─────────────────────────────────────────────────── */
/* The question gate: a sum a young child can't do, three answers to tap. */
.gate {
  position: fixed; inset: 0; z-index: 14;
  background: rgba(7, 53, 46, 0.55);
  display: grid; place-items: center; padding: 16px;
}
.gate-card {
  width: min(420px, 100%);
  background: var(--lr-sand); color: var(--lr-forest);
  border-radius: var(--lr-radius-lg); padding: 24px;
  display: grid; gap: 14px; justify-items: center; text-align: center;
  box-shadow: var(--lr-shadow-pop); color-scheme: light;
}
.gate-kicker { margin: 0; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lr-text-muted); }
.gate-card h2 { margin: 0; font-family: var(--lr-font-display); font-weight: 400; font-size: 2rem; line-height: 1.1; }
.gate-answers { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gate-answers button {
  min-width: 84px; min-height: 64px; border: 0; border-radius: var(--lr-radius-md);
  background: var(--lr-white); color: var(--lr-forest);
  font: 800 1.5rem var(--lr-font-body); cursor: pointer;
  box-shadow: inset 0 0 0 3px var(--lr-hairline);
}
.gate-answers button:focus-visible { outline: 4px solid var(--lr-coral); outline-offset: 2px; }
.gate-card.wrong { animation: talk-shake 0.3s; }
@keyframes talk-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .gate-card.wrong { animation: none; } }

/* The bar that says "you're changing the board" */
.editbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 9;
  width: min(640px, calc(100% - 24px)); box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  background: var(--lr-forest); color: var(--lr-white);
  border-radius: var(--lr-radius-pill); padding: 8px 8px 8px 20px;
  box-shadow: var(--lr-shadow-pop);
}
.editbar p { margin: 0; flex: 1; font-size: 0.9rem; line-height: 1.35; }
.editbar .step-btn { margin: 0; background: var(--lr-coral); color: var(--lr-forest); flex: none; }
.talk.editing { padding-bottom: 76px; }
.talk.editing .quick { margin-bottom: 4px; }

/* Cells while editing: a pencil, and hidden words shown faded and striped */
.pen {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: clamp(22px, 3.6vmin, 34px); height: clamp(22px, 3.6vmin, 34px);
  border-radius: 50%; background: var(--lr-forest); color: var(--lr-white);
  display: grid; place-items: center; pointer-events: none;
}
.pen svg { width: 58%; height: 58%; }
.pen--folder { pointer-events: auto; cursor: pointer; background: var(--lr-coral); color: var(--lr-forest); width: clamp(30px, 4.6vmin, 44px); height: clamp(30px, 4.6vmin, 44px); }
.qk { position: relative; }
.qk .pen { top: 2px; right: 2px; width: 20px; height: 20px; }
.cell.is-hidden, .qk.is-hidden { opacity: 0.45; }
.cell.is-hidden::before, .qk.is-hidden::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--talk-press) 10px 20px);
}
.cell.folder.is-hidden::before { width: auto; height: auto; border-radius: 0; }
.cell.add { border-color: var(--lr-deep-teal); background: transparent; color: var(--lr-deep-teal); }
.cell.add .pic svg { width: 46%; height: 46%; color: var(--lr-deep-teal); }
.cell.add .word { font-size: calc(var(--label-size, 1rem) * 0.85); }
.cell.masked { visibility: hidden; }

/* The sheet: every change happens here, one word at a time */
.sheet {
  position: fixed; inset: 0; z-index: 13;
  background: rgba(7, 53, 46, 0.55);
  /* flex + auto margins: centred when it fits, scrolls from the top when it doesn't */
  display: flex; flex-direction: column; align-items: center; overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.sheet-card {
  width: min(520px, 100%); box-sizing: border-box; margin-block: auto; flex: none;
  background: var(--lr-sand); color: var(--lr-forest);
  border-radius: var(--lr-radius-lg); padding: clamp(18px, 4vw, 28px);
  display: grid; gap: 14px; align-content: start;
  box-shadow: var(--lr-shadow-pop); color-scheme: light;
  -webkit-user-select: text; user-select: text;
}
.sheet-card h2 { margin: 0; font-family: var(--lr-font-display); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2rem); line-height: 1.05; }
.sheet-card .hint { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--lr-text-muted); }
.ed-top { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.ed-cell { width: 112px; height: 112px; cursor: default; --label-size: 0.95rem; }
.ed-cell .pic { padding: 8% 8% 3%; }
.ed-textpic { font-weight: 800; font-size: 1.1rem; text-align: center; }
.ed-where { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--lr-text-muted); }
.ed-field { display: grid; gap: 6px; font-weight: 700; font-size: 0.9rem; }
.ed-field small { display: inline; font-weight: 400; color: var(--lr-text-muted); }
.ed-field input, .ed-field select {
  font: 500 1.05rem var(--lr-font-body); color: var(--lr-forest);
  background: var(--lr-white); border: 2px solid var(--lr-hairline); border-radius: var(--lr-radius-sm);
  padding: 10px 12px; min-height: 48px; box-sizing: border-box; width: 100%;
  -webkit-user-select: text; user-select: text;
}
.ed-field input:focus, .ed-field select:focus { outline: 3px solid var(--lr-coral); outline-offset: 1px; border-color: transparent; }
.ed-group { display: grid; gap: 4px; }
.ed-group > b { font-size: 0.9rem; }
.ed-voice { margin: 0; font-size: 0.9rem; color: var(--lr-text-muted); }
.ed-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: var(--lr-white); border-radius: var(--lr-radius-sm); padding: 12px; cursor: pointer; }
.ed-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--lr-deep-teal); }
.ed-check small { display: block; font-size: 0.85rem; color: var(--lr-text-muted); line-height: 1.4; margin-top: 2px; }
.ed-status { margin: 0; min-height: 1.4em; font-size: 0.9rem; font-weight: 700; color: var(--lr-deep-teal); }
.ed-status:empty { min-height: 0; }
.ed-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ed-actions .step-btn, .ed-actions .lr-cta { margin: 0; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.row-btns .step-btn { margin-top: 4px; }
.step-btn--ghost { background: var(--lr-white); color: var(--lr-forest); box-shadow: inset 0 0 0 2px var(--lr-hairline); }
.step-btn:disabled, .lr-cta:disabled { opacity: 0.5; cursor: default; }
.link-btn--danger { color: #A3362B; }
.lr-cta--danger { background: #A3362B; color: var(--lr-white); }
.rec-on { background: var(--lr-coral) !important; color: var(--lr-forest) !important; box-shadow: none !important; }
.rec-on::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #A3362B; margin-right: 8px; vertical-align: 0; animation: talk-pulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rec-on::before { animation: none; } }

/* Symbol finder */
.sy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: min(52vh, 420px); overflow-y: auto; padding: 2px; }
.sy { display: grid; grid-template-rows: 1fr auto; gap: 4px; justify-items: center; background: var(--lr-white); border: 0; border-radius: var(--lr-radius-sm); padding: 8px 4px 6px; cursor: pointer; font: 600 0.75rem var(--lr-font-body); color: var(--lr-forest); aspect-ratio: 0.9; min-height: 0; }
.sy img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.sy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sy:focus-visible { outline: 3px solid var(--lr-coral); }

/* Drawer: whose board */
.prof { grid-template-columns: auto 1fr auto; }

/* ── Access (T4) ─────────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.panel .group-h { margin: 10px 0 -4px; padding-top: 14px; border-top: 2px solid var(--lr-hairline); font-family: var(--lr-font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.cell.held::after { opacity: 1; }

/* Picture size */
.talk[data-pics="smaller"] .cell .pic { padding: 14% 16% 5%; }
.talk[data-pics="larger"] .cell .pic { padding: 3% 3% 1%; }

/* Typed words in the message: text, no picture */
.chip .glyph--text { width: auto; min-width: clamp(32px, 6.4vmin, 60px); padding: 0 10px; white-space: nowrap; font-size: clamp(0.95rem, 2.4vmin, 1.35rem); }

/* The abc key */
.key--abc b { font-size: clamp(1rem, 2.6vmin, 1.5rem); font-weight: 800; line-height: 1; }
.key--abc[aria-pressed="true"] { background: var(--talk-speak); color: var(--lr-white); box-shadow: none; }

/* The keyboard page: sits where the board is; the strip and quick row stay */
.keypage { display: grid; grid-template-rows: minmax(44px, 0.8fr) repeat(5, minmax(0, 1fr)); gap: var(--gap); min-height: 0; }
.kp-line {
  display: flex; align-items: center; padding: 0 16px; min-width: 0;
  background: var(--talk-strip); border: 2px solid var(--lr-hairline); border-radius: var(--lr-radius-md);
  font: 800 clamp(1.2rem, 4.2vmin, 2.4rem)/1.1 var(--lr-font-body); color: var(--talk-ink);
  overflow: hidden; white-space: pre;
}
.kp-line::after { content: ""; width: 3px; height: 1.1em; margin-left: 2px; background: var(--talk-ink); flex: none; }
.kp-text { overflow: hidden; text-overflow: clip; direction: rtl; unicode-bidi: plaintext; }
.kp-row { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--gap); min-height: 0; }
.kp-bottom { grid-template-columns: 1.2fr 3fr 1.2fr 1.4fr; }
.kk {
  position: relative; min-width: 0; min-height: 0; margin: 0; padding: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--talk-cell); color: var(--talk-ink);
  border: 3px solid var(--talk-little-edge); border-radius: var(--lr-radius-md);
  font: 800 clamp(1.1rem, 4.4vmin, 2.4rem)/1 var(--lr-font-body);
  cursor: pointer; overflow: hidden;
}
.kk span { font-size: clamp(0.7rem, 1.8vmin, 1rem); font-weight: 700; }
.kk svg { width: auto; height: 42%; max-height: 44px; }
.kk--guess { border-color: var(--talk-phrase-edge); background: var(--talk-phrase-band); font-size: clamp(0.95rem, 3vmin, 1.6rem); white-space: nowrap; }
.kk--none { visibility: hidden; }
.kk--add { background: var(--talk-speak); color: var(--lr-white); border-color: var(--talk-speak); }
.kk--nav { border-style: dashed; border-color: var(--talk-ink-soft); }
.kk.down { transform: scale(0.97); background: var(--talk-press); }
.kk:focus-visible { outline: 4px solid var(--lr-coral); outline-offset: 2px; }

/* Switch scanning: the row is outlined, the target gets a thick ring */
.talk { --scan: var(--lr-coral); }
.scan-row { outline: 4px dashed var(--scan) !important; outline-offset: -1px; }
.scan-on { outline: 8px solid var(--scan) !important; outline-offset: 2px; z-index: 3; }
.scan-on.cell::after, .scan-on.kk::after { content: ""; position: absolute; inset: 0; background: var(--scan); opacity: 0.16; pointer-events: none; }
.qk.scan-on, .key.scan-on, .kk.scan-on { position: relative; }

/* High contrast: black board, bright borders, white words on black */
.talk[data-look="contrast"] {
  --talk-ground: #000; --talk-cell: #000; --talk-strip: #000; --talk-ink: #fff; --talk-ink-soft: #fff;
  --talk-press: rgba(255, 255, 255, 0.28); --talk-plate: #fff; --talk-speak: #FFD400;
  --talk-pronoun-edge: #FFD400; --talk-verb-edge: #3DDC62; --talk-describing-edge: #4DA3FF; --talk-noun-edge: #FF8A1F;
  --talk-social-edge: #FF6FC8; --talk-question-edge: #C9A6FF; --talk-negation-edge: #FF5A5A; --talk-little-edge: #E6E6E6; --talk-phrase-edge: #2FE0C8;
  --talk-pronoun-band: #000; --talk-verb-band: #000; --talk-describing-band: #000; --talk-noun-band: #000;
  --talk-social-band: #000; --talk-question-band: #000; --talk-negation-band: #000; --talk-little-band: #000; --talk-phrase-band: #000;
  --lr-hairline: #fff; --scan: #FFD400;
  background: #000;
}
.talk[data-look="contrast"] .cell { --edge-w: 6px !important; }
.talk[data-look="contrast"] .cell .word { font-weight: 800; }
.talk[data-look="contrast"] .cell .pic { padding-left: 5%; padding-right: 5%; }
.talk[data-look="contrast"] .cell .pic img { background: #fff; }
.talk[data-look="contrast"] .key--speak, .talk[data-look="contrast"] .kk--add, .talk[data-look="contrast"] .key--abc[aria-pressed="true"] { color: #000; }
.talk[data-look="contrast"] .fringe::before { opacity: 0; }
.talk[data-look="contrast"] .unlock { background: #fff; }
.talk[data-look="contrast"] .said:empty::before { border-color: #fff; }

/* Low stimulation: muted colours, borders only, the quietest press */
.talk[data-look="calm"] .strip, .talk[data-look="calm"] .board, .talk[data-look="calm"] .quick, .talk[data-look="calm"] .keypage { filter: saturate(0.45); }
.talk[data-look="calm"] .cell, .talk[data-look="calm"] .qk { --band: transparent; }
.talk[data-look="calm"] .cell { --edge-w: 3px !important; }
.talk[data-look="calm"] .cell.folder::before { opacity: 0.5; }
.talk[data-look="calm"] .fringe::before { opacity: 0.3; }
.talk[data-look="calm"] .cell.down, .talk[data-look="calm"] .qk.down, .talk[data-look="calm"] .key.down, .talk[data-look="calm"] .kk.down { transform: none; }
.talk[data-look="calm"] .cell.down::after { opacity: 0.5; }
.talk[data-look="calm"] .said:empty::before { border-style: solid; opacity: 0.5; }

/* The keyguard template (printed) */
.kg-sheet .ed-field select { font-size: 1rem; }

/* ── Pilot additions (T5) ──────────────────────────────────────────────── */
/* Big message: the sentence, full screen, for someone else to read */
.big {
  position: fixed; inset: 0; z-index: 11;
  background: var(--talk-cell); color: var(--talk-ink);
  display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
  cursor: pointer;
}
.big-inner { display: grid; gap: clamp(16px, 4vmin, 40px); justify-items: center; text-align: center; max-width: 100%; }
.big.flipped .big-inner { transform: rotate(180deg); }
.big-words { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2vmin, 24px); }
.big-chip { display: grid; justify-items: center; gap: 6px; }
.big-chip img { width: clamp(72px, 17vmin, 200px); height: clamp(72px, 17vmin, 200px); object-fit: contain; background: var(--talk-plate); border-radius: var(--lr-radius-md); }
.big-chip span { font-weight: 700; font-size: clamp(1rem, 3vmin, 1.8rem); }
.big-text { margin: 0; font: 800 clamp(2rem, 8vmin, 6rem)/1.1 var(--lr-font-body); overflow-wrap: anywhere; text-wrap: balance; }
.big-flip, .big-close {
  position: absolute; bottom: max(16px, env(safe-area-inset-bottom, 0px));
  border: 0; border-radius: var(--lr-radius-pill); min-height: 52px; padding: 8px 18px;
  display: flex; align-items: center; gap: 8px;
  font: 700 1rem var(--lr-font-body); cursor: pointer;
  background: var(--talk-press); color: var(--talk-ink);
}
.big-flip { left: 16px; } .big-close { right: 16px; }
.big-flip svg { width: 28px; height: 28px; }
.big-flip:focus-visible, .big-close:focus-visible { outline: 4px solid var(--lr-coral); outline-offset: 2px; }
.talk[data-look="contrast"] ~ .big, :root[data-look="contrast"] .big { background: #000; color: #fff; }

/* Show me: a still, dark ring on the next thing to tap */
.model-on { outline: 7px solid var(--lr-forest) !important; outline-offset: 3px; z-index: 4; box-shadow: 0 0 0 13px var(--lr-mint) !important; }
:root[data-theme="dark"] .model-on, .talk[data-look="contrast"] .model-on { outline-color: #fff !important; box-shadow: 0 0 0 13px var(--lr-deep-teal) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .model-on { outline-color: #fff !important; box-shadow: 0 0 0 13px var(--lr-deep-teal) !important; } }

.md-list { display: grid; gap: 6px; max-height: min(40vh, 320px); overflow-y: auto; }
.md-item { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; text-align: left; border: 0; background: var(--lr-white); border-radius: var(--lr-radius-sm); padding: 6px 10px; min-height: 52px; cursor: pointer; font: 500 1rem var(--lr-font-body); color: var(--lr-forest); }
.md-item img { width: 40px; height: 40px; object-fit: contain; grid-column: 1; }
.md-item b { grid-column: 2; }
.md-item small { color: var(--lr-text-muted); font-size: 0.85rem; }
.md-item:focus-visible { outline: 3px solid var(--lr-coral); }
.md-chosen { margin: 0; font-size: 0.95rem; }
.md-chosen:empty { display: none; }
.md-report { width: 100%; box-sizing: border-box; font: 0.8rem/1.4 ui-monospace, Menlo, monospace; border-radius: var(--lr-radius-sm); border: 2px solid var(--lr-hairline); padding: 8px; -webkit-user-select: text; user-select: text; }
.panel a.link-btn { display: inline; padding: 0; min-height: 0; }

/* ── Paper board ────────────────────────────────────────────────────────── */
.print-root { display: none; }
@media print {
  @page { size: A4 landscape; margin: 5mm; }
  html, body { height: auto; overflow: visible; background: #fff; }
  body > *:not(.print-root) { display: none !important; }
  .print-root { display: block; color: #000; font-family: var(--lr-font-body); }
  .pp { break-after: page; page-break-after: always; display: grid; gap: 3mm; height: 198mm; padding: 5mm; box-sizing: border-box; grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .pp:last-child { break-after: auto; page-break-after: auto; }
  .kg { break-after: page; page-break-after: always; display: grid; place-items: start; }
  .kg:last-child { break-after: auto; page-break-after: auto; }
  .kg svg { display: block; }
  .kg-notes { font-size: 11pt; line-height: 1.45; max-width: 190mm; }
  .kg-notes h2 { font-size: 16pt; margin: 0 0 4mm; }
  .pp header { display: flex; justify-content: space-between; align-items: baseline; font-size: 10pt; border-bottom: 0.3mm solid #999; padding-bottom: 1.5mm; }
  .pp header b { font-size: 13pt; }
  .pp footer { font-size: 8.5pt; color: #444; }
  .pgrid { display: grid; gap: 1.6mm; grid-auto-rows: minmax(0, 1fr); min-height: 0; }
  .pp--topic .pgrid { grid-auto-rows: 30mm; align-content: start; }
  .pcell { border: 1.2mm solid #999; border-radius: 2mm; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; padding: 1mm; box-sizing: border-box; overflow: hidden; min-height: 0; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pcell img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
  .pcell span { font-weight: 700; font-size: 8.5pt; line-height: 1.1; text-align: center; white-space: nowrap; }
  .pcell .pword { font-size: 12pt; }
  .pcell--empty { border-color: transparent; }
  .pquick { grid-auto-rows: 15mm; }
  .pquick .pcell { grid-template-rows: none; grid-template-columns: auto auto; gap: 1.5mm; }
  .pquick .pcell img { height: 11mm; width: 11mm; }
}

/* Grown-up panels: muted text and the coral button meet WCAG AA (4.5:1) here,
   where the site's lighter muted text and white-on-coral don't */
.panel, .sheet-card, .setup-card, .gate-card { --lr-text-muted: #52706A; }
.panel .lr-cta, .sheet-card .lr-cta, .setup-card .lr-cta { color: var(--lr-forest); }
.sheet-card .lr-cta--danger { color: var(--lr-white); }
/* while scanning, the switch highlight is the only highlight */
.talk.scanning .unlock:focus-visible, .talk.scanning .said:focus-visible { outline: none; }