/* MaTalk styles shared by the extension side panel and the class web page.
   Keep identical in both places: scripts/sync-web.sh copies it.

   The brand: warm cream, MaTalk blue, Verbi, and picture cards bordered in
   Fitzgerald category colours. Motion is gentle and brief, because many of
   the children are sensitive to it, and it switches off entirely when the
   device asks for reduced motion. No web fonts: nothing is loaded from a third
   party on a child's device. */

:root {
  --cream: #fff5e0;
  --cream-deep: #f8e8c6;
  --paper: #fffdf8;
  --ink: #2b2a33;
  --muted: #6e6a73;
  --blue: #478ddb;
  --blue-dark: #2f6fb8;
  --blue-soft: #eaf3fd;
  --blue-line: #cfe1f7;
  --card: #ffffff;
  --line: #eadfc8;
  --green: #29d414;
  --green-dark: #1f9c0f;
  --green-soft: #e9fbe4;
  --sun: #f2c230;
  --sun-soft: #fff5d1;
  --red: #d8323f;

  --radius-s: 12px;
  --radius: 16px;
  --radius-l: 22px;
  --shadow-s: 0 1px 2px rgba(92, 64, 20, 0.06), 0 2px 8px rgba(92, 64, 20, 0.05);
  --shadow: 0 2px 4px rgba(92, 64, 20, 0.05), 0 8px 24px rgba(92, 64, 20, 0.08);
  --shadow-l: 0 4px 10px rgba(92, 64, 20, 0.07), 0 18px 44px rgba(92, 64, 20, 0.14);
  --spring: cubic-bezier(0.2, 0.9, 0.3, 1.2);

  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 105% -8%, #ffeccb 0%, rgba(255, 236, 203, 0) 60%),
    radial-gradient(900px 480px at -12% 108%, #ffeed2 0%, rgba(255, 238, 210, 0) 60%),
    var(--cream);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; }

/* ---------- Buttons ---------- */

button {
  border: 0;
  border-radius: 14px;
  padding: 11px 20px;
  background: linear-gradient(180deg, #5a9de5 0%, var(--blue) 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 0 var(--blue-dark), 0 6px 14px rgba(47, 111, 184, 0.2);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
button:hover { background: linear-gradient(180deg, #4d94e0 0%, #3b82d2 100%); }
button:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 var(--blue-dark), 0 3px 8px rgba(47, 111, 184, 0.18); }
button:disabled { background: #cfccd2; box-shadow: none; cursor: not-allowed; transform: none; }

button.secondary { background: #fff; color: var(--blue-dark); border: 2px solid var(--blue-line); box-shadow: var(--shadow-s); }
button.secondary:hover { background: var(--blue-soft); border-color: var(--blue); }
button.secondary:active { box-shadow: none; }
button.danger { background: #fff; color: var(--red); border: 2px solid #f1c3c7; box-shadow: none; }
button.danger:hover { background: #fff3f4; border-color: var(--red); }
button.small { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
button.wide { width: 100%; }
button.link-button { background: none; color: var(--blue-dark); padding: 4px 6px; font-weight: 600; font-size: 13px; box-shadow: none; }
/* Red only for taking something away. */
button.link-button.remove, button.link-button.remove-question, button.link-button.remove-picture, button.link-button.ws-item-remove, .picker-tile-tools .link-button:last-child { color: var(--red); }
button.link-button:hover { background: none; text-decoration: underline; }
button.link-button:active { transform: none; }
/* Link-style buttons that aren't destructive: the base rule colours
   button.link-button red (for "Remove"), which reads as "danger" elsewhere. */
button.link-button.toggle-questions, button.link-button.mark-right { color: var(--blue-dark); font-weight: 700; }
button.link-button.end-button { color: var(--muted); margin-left: auto; }

button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid #f0a020;
  outline-offset: 2px;
}

/* ---------- Fields & type ---------- */

input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea {
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-soft);
  outline: none;
}
input::placeholder, textarea::placeholder { color: #a39d93; }
textarea { resize: vertical; width: 100%; }

h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
h2 { margin: 18px 0 8px; font-size: 17px; font-weight: 800; }
h3 { margin: 0; font-size: 15px; font-weight: 800; }
.hint { margin: 0; color: var(--muted); font-size: 14px; }
.error { color: var(--red); }

/* ---------- Views & headers ---------- */

.view { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: 12px; }

.view-header { display: flex; align-items: center; gap: 12px; padding: 14px 12px 6px; }
.back-button {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 20px;
  box-shadow: var(--shadow-s);
}
.back-button:hover { background: var(--paper); border-color: var(--blue-line); }
.view-title { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.view-title h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }

.connection {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #c4c4ca; flex: none; }
.connection[data-status="live"] .dot { background: var(--green); }
.connection[data-status="reconnecting"] .dot, .connection[data-status="connecting"] .dot { background: #f0a020; }
.connection[data-status="gone"] .dot { background: var(--red); }
.teacher-view .connection[data-status="live"] .dot { animation: ping 2.6s ease-out infinite; }

/* ---------- Home ---------- */

.home-header { display: flex; align-items: center; gap: 14px; padding: 20px 16px 6px; }
.home-mascot {
  width: 72px;
  height: 72px;
  object-fit: contain;
  padding: 8px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}
.home-section { padding: 0 16px; }
.home-section > p:first-child { margin-top: 12px; }
#view-home > .wide { margin: 18px 16px 0; width: auto; }
#view-home { gap: 0; }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; margin-bottom: 8px; }
.section-head h2 { margin: 0; }
.create-class { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.create-class input { flex: 1 1 220px; }

.google-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-s);
  width: 100%;
  justify-content: center;
  margin: 8px 0;
}
.google-button:hover { background: var(--paper); border-color: var(--blue-line); }
.g-logo { font-weight: 800; color: #4285f4; font-size: 18px; }

.dev-signin { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px; border: 2px dashed var(--line); border-radius: var(--radius-s); }

.class-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.class-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  text-align: left;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-s);
}
.class-item::after { content: "›"; order: 99; margin-left: auto; font-size: 26px; line-height: 1; color: #c9bda4; font-weight: 400; }
.class-item:has(.live-badge)::after { margin-left: 4px; }
.class-item:hover { background: #fff; border-color: var(--blue-line); box-shadow: var(--shadow); transform: translateY(-1px); }
.class-item:hover::after { color: var(--blue); }
.class-item:disabled { background: #faf7f0; box-shadow: none; }
.class-item-name { font-weight: 800; font-size: 16px; }
.live-badge {
  margin-left: auto;
  background: var(--green-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(41, 212, 20, 0.18);
}
/* A child's classes: big tiles, easy to tap. */
.class-list.big .class-item { min-height: 88px; padding: 16px 20px; border-radius: var(--radius-l); }
.class-list.big .class-item-name { font-size: 24px; }
.class-list.big .live-badge { font-size: 16px; padding: 6px 14px; }

.inline-form, .type-form { display: flex; gap: 8px; margin-top: 10px; }
.inline-form input, .type-form input { flex: 1; }

.role-options { display: flex; flex-direction: column; gap: 12px; }
.role-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  text-align: left;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 16px 18px;
  box-shadow: var(--shadow-s);
}
.role-card:hover { background: #fff; border-color: var(--blue-line); box-shadow: var(--shadow); transform: translateY(-1px); }
.role-icon { grid-row: 1 / span 2; font-size: 30px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; background: var(--sun-soft); }
.role-card[data-role="student"] .role-icon { background: var(--green-soft); }
.role-name { font-size: 17px; font-weight: 800; }
.role-desc { font-size: 13px; font-weight: 500; color: var(--muted); }
.link-back { background: none; color: var(--blue-dark); padding: 12px 0 4px; font-weight: 700; box-shadow: none; }
.link-back:hover { background: none; text-decoration: underline; }
.role-pill-row { margin: 4px 0 0; }
.role-pill { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #e6f1fb; color: #0c447c; }
.role-pill[data-role="student"] { background: #eaf3de; color: #27500a; }
.signin-status { margin-top: 8px; }
.switch-role { margin-top: 8px; }
.home-status { padding: 0 16px; }

.settings { border-top: 1px solid var(--line); padding: 8px 16px 12px; font-size: 14px; margin-top: auto; }
.settings summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
#settings-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
#settings-form label { display: flex; flex-direction: column; gap: 4px; }
#settings-form input { padding: 8px 10px; border-width: 1px; border-radius: 8px; }
.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-actions button { padding: 8px 14px; }
#view-home .settings { margin-top: auto; padding-top: 16px; }

/* ---------- Solo practice (the original Q&A) ---------- */

.top-bar { display: flex; gap: 10px; padding: 12px; align-items: stretch; }
.mic-button { flex: none; width: 60px; border-radius: 16px; padding: 0; display: grid; place-items: center; }
.mic-button svg { width: 28px; height: 28px; fill: currentColor; }
.mic-button.listening { background: #e5334a; box-shadow: 0 0 0 6px rgba(229, 51, 74, 0.18); animation: pulse 1.2s ease-in-out infinite; }

.question-box {
  flex: 1;
  min-width: 0;
  background: var(--card);
  border: 2px solid var(--blue-line);
  border-radius: var(--radius);
  padding: 8px 12px;
  box-shadow: var(--shadow-s);
}
.question-text {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.question-text.placeholder { color: var(--muted); font-weight: 400; font-size: 14px; }
.status-line { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.grid-picker select { margin-left: 4px; border-radius: 6px; border: 1px solid var(--line); }

#view-solo > .phase, .class-view .phase { padding: 12px 12px 0; }
.phase { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.mascot { width: 140px; height: auto; }
.prompt { margin: 0; font-size: 21px; font-weight: 800; }
.big-icon { font-size: 56px; margin-top: 20px; }
.phase .type-form { width: 100%; margin-top: 12px; }

/* ---------- Answer cards ---------- */

.answer-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 14px;
}
.answer-card {
  position: relative;
  aspect-ratio: 1 / 1.05;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%);
  color: var(--ink);
  border: 3px solid var(--card-border, #e3dccd);
  border-radius: 20px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--card-border, #e3dccd) 45%, transparent), 0 8px 18px rgba(92, 64, 20, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.2s ease;
}
.answer-card:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 4px 0 color-mix(in srgb, var(--card-border, #e3dccd) 50%, transparent), 0 14px 26px rgba(92, 64, 20, 0.12); }
.answer-card:active { transform: scale(0.97); }
.answer-card .emoji { font-size: 46px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(60, 40, 10, 0.14)); }
.answer-card .label { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }

/* How much of the class chose a card: a tint that deepens with the share. */
.answer-card.chosen { background: color-mix(in srgb, #d6e8ff calc(var(--share) * 100%), #fff); }
.answer-card.selected {
  background: var(--green-soft);
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(41, 212, 20, 0.22), 0 8px 18px rgba(31, 156, 15, 0.14);
}
/* Once the answer is shown: the right card glows, the others step back. */
.answer-card.outcome-right {
  border-color: var(--green);
  background: var(--green-soft);
  box-shadow: 0 0 0 6px rgba(41, 212, 20, 0.28), 0 10px 26px rgba(31, 156, 15, 0.18);
}
.answer-card.outcome-faded { opacity: 0.42; transform: none; }
/* Green means only "right". A child's own pick, if it wasn't right, drops to a
   calm blue outline so it can't be read as correct. */
.answer-card.outcome-faded.selected { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(71, 141, 219, 0.2); opacity: 0.85; }

.answer-card.more { --card-border: var(--blue-line); color: var(--blue-dark); background: var(--blue-soft); }
.answer-card.more .label { font-size: 15px; }
.answer-card.more:disabled { color: #9a9aa2; --card-border: #e2dfd8; background: #f6f4ef; transform: none; box-shadow: none; }

.count-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5a9de5, var(--blue));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(47, 111, 184, 0.3);
}
.count-badge.zero { background: #efe8da; color: #9a917f; box-shadow: none; }
.count-badge.bump { animation: bump 0.45s var(--spring); }
.corner-badge { position: absolute; bottom: 7px; font-size: 11px; font-weight: 800; color: var(--green-dark); }

.number-card .emoji { font-size: 54px; font-weight: 900; color: var(--ink); font-family: inherit; filter: none; }
.dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; color: var(--blue-dark); font-size: 13px; letter-spacing: 1px; }

/* Fitzgerald-style border colours by category */
.cat-person { --card-border: #f2c230; }
.cat-activity { --card-border: #43a047; }
.cat-description, .cat-feeling { --card-border: #478ddb; }
.cat-animal, .cat-thing, .cat-food, .cat-place { --card-border: #f08a24; }
.cat-choice, .cat-need, .cat-support { --card-border: #e5334a; }
.cat-question, .cat-time { --card-border: #8e5cc9; }

/* Fewer cards come out bigger. */
.answer-grid.few { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.answer-grid.few .answer-card .emoji { font-size: 66px; }
.answer-grid.few .answer-card .label { font-size: 22px; }

/* A new question's cards glide in, one after another. */
.answer-grid.enter > * { animation: card-in 0.42s var(--spring) both; }
.answer-grid.enter > :nth-child(2) { animation-delay: 0.04s; }
.answer-grid.enter > :nth-child(3) { animation-delay: 0.08s; }
.answer-grid.enter > :nth-child(4) { animation-delay: 0.12s; }
.answer-grid.enter > :nth-child(5) { animation-delay: 0.16s; }
.answer-grid.enter > :nth-child(6) { animation-delay: 0.2s; }
.answer-grid.enter > :nth-child(7) { animation-delay: 0.24s; }
.answer-grid.enter > :nth-child(n + 8) { animation-delay: 0.28s; }

/* Teacher cards: the card itself, plus a separate ✓ circle. */
.card-wrap { position: relative; display: grid; }
.card-wrap > .answer-card { width: 100%; }
.correct-toggle {
  position: absolute; top: -9px; left: -9px; width: 36px; height: 36px; padding: 0;
  border-radius: 999px; background: #fff; color: #c9c2b2; border: 2px solid #ded7c6;
  font-size: 18px; font-weight: 900; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 3px 8px rgba(92, 64, 20, 0.16);
}
.correct-toggle:hover { background: var(--green-soft); color: var(--green-dark); border-color: var(--green); }
.correct-toggle.on { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.correct-toggle:disabled { cursor: default; }
.correct-toggle:disabled:not(.on) { display: none; }

/* ---------- Class views (teacher + student) ---------- */

.class-view { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.class-view > .answer-grid, .class-view > .pick-status, .class-view > .question-box { margin: 0 12px; width: auto; }
.pick-status { text-align: center; }

.tabs {
  align-self: flex-start;
  max-width: calc(100% - 24px);
  overflow-x: auto;
  display: flex;
  gap: 2px;
  margin: 2px 12px 0;
  padding: 4px;
  border-radius: 14px;
  background: var(--cream-deep);
  box-shadow: inset 0 1px 2px rgba(92, 64, 20, 0.08);
}
.tab { background: none; color: var(--muted); border-radius: 11px; padding: 8px 16px; font-size: 15px; white-space: nowrap; box-shadow: none; }
.tab:hover { background: rgba(255, 255, 255, 0.55); }
.tab:active { transform: none; box-shadow: none; }
.tab[aria-selected="true"] { color: var(--blue-dark); background: #fff; box-shadow: var(--shadow-s); }

.tab-panel { display: flex; flex-direction: column; gap: 12px; }
.tab-panel .top-bar { padding: 4px 12px 0; }
.tab-panel > .type-form { margin: 0 12px; }
.tab-panel > .live-error:empty { display: none; }
.tab-panel > .live-error, .no-question, .live-question, .roster { margin: 0 12px; }
.teacher-view > .tab-panel[data-panel="live"] { flex: 1; }

/* Big segmented buttons instead of dropdowns: easy to hit on an iPad. */
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: #f4ead6; box-shadow: inset 0 1px 2px rgba(92, 64, 20, 0.08); }
.segmented button { background: none; color: var(--muted); border-radius: 9px; padding: 7px 14px; font-size: 15px; min-height: 38px; box-shadow: none; }
.segmented button:hover { background: rgba(255, 255, 255, 0.6); color: var(--ink); }
.segmented button:active { transform: none; box-shadow: none; }
.segmented button[aria-checked="true"] { background: linear-gradient(180deg, #5a9de5, var(--blue)); color: #fff; box-shadow: 0 2px 6px rgba(47, 111, 184, 0.3); }
.ask-settings, .planned-settings { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.grid-slot, .choices-slot { display: inline-flex; align-items: center; gap: 8px; }
.setting { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.setting-label { font-weight: 700; font-size: 13px; color: var(--muted); }

/* ---------- Teacher: lesson panel ---------- */

.lesson-panel { margin: 0 12px; display: flex; flex-direction: column; gap: 8px; }
.lesson-bar {
  padding: 8px 12px; border-radius: 14px;
  background: var(--blue-soft); border: 1px solid var(--blue-line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.lesson-title { font-weight: 800; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.toggle-questions { font-size: 14px; }
.lesson-questions {
  list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  max-height: 320px; overflow-y: auto;
}
.lesson-question {
  width: 100%; display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center;
  text-align: left; background: none; color: var(--ink); border-radius: 10px; padding: 10px 12px; min-height: 44px; box-shadow: none;
}
.lesson-question:hover { background: #f5f9ff; }
.lesson-question:active { transform: none; box-shadow: none; }
.lesson-question.selected { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue); }
.lesson-question.live .lq-status { color: var(--green-dark); font-weight: 800; }
.lq-number { font-weight: 800; color: var(--muted); }
.lq-text { font-weight: 700; overflow-wrap: anywhere; }
.lq-mode, .lq-status { font-size: 13px; }
.lesson-next {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 18px; padding: 14px 16px;
  border: 1px solid var(--blue-line); border-left: 6px solid var(--blue);
  box-shadow: var(--shadow);
}
.lesson-next-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lesson-next-label { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue-dark); }
.lesson-next-question { font-size: 21px; font-weight: 800; overflow-wrap: anywhere; }
.ask-lesson { font-size: 18px; padding: 12px 28px; }

/* ---------- Teacher: the question on stage ---------- */

.live-question {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 16px;
  box-shadow: var(--shadow);
}
.asked { margin: 0; }
.asked-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.asked-top .end-button { flex: none; }
.asked-status { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-dark); }
.asked-text { margin: 4px 0 0; font-size: 28px; font-weight: 800; line-height: 1.22; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.question-hint { min-height: 20px; margin: -4px 0 0; }
.question-hint:empty { min-height: 0; display: none; }
.live-question .answer-grid { padding-top: 6px; }

.results { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.answered-summary { margin: 0; font-weight: 800; font-size: 16px; }
.progress { height: 12px; background: #f3ead8; border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(92, 64, 20, 0.1); }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5ee04a, var(--green) 60%, #24c010); transition: width 0.45s var(--spring); }
.question-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.question-actions .reveal-button, .question-actions .next-button { font-size: 17px; padding: 12px 22px; }
.question-actions .reveal-button:disabled { opacity: 0.6; }
.next-up { font-size: 13px; }

.live-status { margin: 0 12px; font-weight: 700; color: var(--blue-dark); display: flex; align-items: center; gap: 8px; }
.live-status::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--blue-line); border-top-color: var(--blue); animation: spin 0.8s linear infinite; }
.live-status:empty { display: none; }

/* Older list-style results, kept for the extension. */
.results-header { display: flex; justify-content: space-between; align-items: center; }
.distribution { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.distribution li { display: grid; grid-template-columns: minmax(60px, 1fr) 2fr auto; align-items: center; gap: 8px; font-size: 14px; }
.dist-label { font-weight: 700; overflow-wrap: anywhere; }
.dist-bar { height: 12px; background: #f3ead8; border-radius: 999px; overflow: hidden; }
.dist-fill { display: block; height: 100%; background: var(--blue); transition: width 0.3s ease; }
.dist-count { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ---------- Teacher: nothing asked yet ---------- */

.idle-stage {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 20px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background:
    radial-gradient(260px 180px at 100% 0%, var(--blue-soft) 0%, rgba(234, 243, 253, 0) 70%),
    radial-gradient(220px 160px at 0% 100%, var(--sun-soft) 0%, rgba(255, 245, 209, 0) 70%),
    var(--paper);
  box-shadow: var(--shadow);
}
.idle-stage.in-lesson { padding: 0; border: 0; background: none; box-shadow: none; }
.idle-title { margin: 0; font-size: 24px; letter-spacing: -0.01em; }
.idle-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.idle-stage.in-lesson .idle-actions { margin-top: 0; }
.idle-actions .start-lesson-button, .idle-actions .start-question-button { font-size: 17px; padding: 14px 22px; }
.lesson-picker, .lesson-done { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-s); }
.lesson-picker-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.lesson-done h3 { margin: 0 0 6px; font-size: 18px; }
.lesson-done h3::before { content: "🎉 "; }

/* ---------- Teacher: roster ---------- */

.roster-head { margin: 8px 12px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.roster-title { margin: 0; }
.roster-head .online-summary { flex-basis: 100%; }
.roster-head .online-summary:empty { display: none; }
.show-answers { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.roster { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.roster li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 10px;
  font-size: 14px;
  box-shadow: var(--shadow-s);
}
.avatar {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  background: color-mix(in srgb, var(--avatar, #478ddb) 26%, #fff);
  border: 2px solid color-mix(in srgb, var(--avatar, #478ddb) 70%, #fff);
}
.roster li.online .avatar::after {
  content: ""; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--green); border: 2px solid #fff;
}
.roster li.offline { background: #fbf8f2; box-shadow: none; }
.roster li.offline .avatar { filter: grayscale(1); opacity: 0.55; }
.roster li.offline .roster-name { color: var(--muted); }
.roster-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.roster-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.roster-choices { font-size: 12px; }
.roster-choices:empty { display: none; }
.roster-pick { color: var(--muted); font-size: 12px; white-space: nowrap; }
.roster li[data-pick="answered"] .roster-pick { color: var(--green-dark); background: var(--green-soft); font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.roster li.online[data-pick="waiting"] .roster-pick { color: #8a6d12; background: var(--sun-soft); font-weight: 700; padding: 1px 8px; border-radius: 999px; }

/* A narrow side panel or phone: three cards a row, and a little less padding. */
@media (max-width: 520px) {
  .live-question { padding: 12px; border-radius: 18px; }
  .asked-text { font-size: 24px; }
  .live-question .answer-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
  .live-question .answer-card { border-radius: 16px; }
  .live-question .answer-card .emoji { font-size: 34px; }
  .live-question .answer-card .label { font-size: 14px; }
  .live-question .answer-grid.few .answer-card .emoji { font-size: 48px; }
  .live-question .answer-grid.few .answer-card .label { font-size: 17px; }
  .live-question .count-badge { top: 5px; right: 5px; min-width: 24px; height: 24px; font-size: 13px; }
  .lesson-next { flex-wrap: wrap; }
  .lesson-next-question { font-size: 19px; }
}

/* ---------- Teacher: the ask bar, always at the bottom ---------- */

.composer {
  position: sticky;
  bottom: 10px;
  z-index: 5;
  margin: auto 12px 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
}
.composer-settings { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.composer .segmented button { padding: 5px 12px; min-height: 34px; font-size: 14px; }
.composer .mode-help { font-size: 13px; margin: -4px 0 0; }
.composer.slim .mode-help { display: none; }
.composer .type-form { margin: 0; align-items: stretch; }
.composer .type-input { font-size: 17px; min-height: 52px; border-radius: 16px; }
.composer .mic-button { width: 52px; min-height: 52px; border-radius: 16px; }
.composer .type-form button[type="submit"] { padding: 0 26px; font-size: 17px; border-radius: 16px; }
@media (max-width: 520px) {
  .composer { padding: 10px; gap: 8px; }
  .composer .setting-label { font-size: 12px; }
  .composer .segmented button { padding: 4px 9px; font-size: 13px; min-height: 32px; }
  .composer .type-form button[type="submit"] { padding: 0 18px; }
}

/* ---------- Teacher: students tab ---------- */

.tab-panel[data-panel="students"] { padding: 4px 12px 0; }
.add-students-form { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-s); }
.add-students-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.add-students-form button { align-self: flex-start; }
.student-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.student-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow-s);
}
.student-list li > div { display: flex; flex-direction: column; min-width: 0; }
.student-list li.pending { background: #fbf8f2; box-shadow: none; }
.student-list li.pending .student-name { color: var(--muted); }
.student-list .choices-slot { margin-left: auto; }
.student-list .choices-slot .segmented button { padding: 4px 10px; min-height: 32px; font-size: 13px; }
.student-name { font-weight: 700; overflow-wrap: anywhere; }
.student-email { font-size: 12px; }
.share-box { background: var(--paper); border: 2px dashed var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.share-box p { margin: 0; }
.share-link-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-link { color: var(--blue-dark); overflow-wrap: anywhere; font-size: 14px; }
.delete-class { align-self: flex-start; margin-top: 8px; }

/* ---------- Who needs help ---------- */

.tab-panel[data-panel="summary"] { padding: 4px 12px 0; }
.summary-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.summary-section h3 { margin: 0; }
.summary-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.summary-student { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow-s); }
.summary-student.needs-help { border-color: #f2d46a; background: #fffbea; }
.summary-student-head { display: flex; justify-content: space-between; gap: 10px; }
.summary-name { font-weight: 800; }
.summary-missed summary { cursor: pointer; color: var(--blue-dark); font-size: 14px; font-weight: 600; margin-top: 4px; }
.summary-missed ul { margin: 6px 0 0; padding-left: 18px; }
.summary-question { font-weight: 700; }
.reteach-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow-s); }

/* ---------- Lesson editor ---------- */

.lesson-editor { display: flex; flex-direction: column; gap: 14px; padding: 0 12px 24px; }
.lesson-editor .view-header { padding-left: 0; padding-right: 0; }
.lesson-editor .view-header .save-lesson { margin-left: auto; }
.editor-field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.editor-field input, .editor-field textarea, .planned-text { font: inherit; font-weight: 500; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; }
.pdf-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: -4px; }
.suggest-questions-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.planned-questions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.planned-question { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-s); }
.planned-head { display: flex; gap: 8px; align-items: center; }
.planned-number { font-weight: 800; color: var(--muted); width: 22px; }
.planned-text { flex: 1; min-width: 0; }
.planned-tools { display: flex; }
.planned-tools .link-button { color: var(--muted); font-size: 16px; }
.planned-tools .link-button:disabled { opacity: 0.3; background: none; }
.planned-answers { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.planned-answers:empty { display: none; }
.planned-answer { position: relative; display: grid; }
.planned-answer .answer-card { width: 100%; }
.planned-answer .answer-card .emoji { font-size: 34px; }
.planned-answer .answer-card .label { font-size: 14px; }
.remove-answer {
  position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; padding: 0;
  border-radius: 999px; background: #fff; color: var(--red); border: 1px solid var(--line);
  font-size: 16px; font-weight: 800; display: grid; place-items: center; box-shadow: var(--shadow-s);
}
.remove-answer:hover { background: #fff3f4; }
.planned-answer-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.add-answer { display: flex; gap: 6px; }
.add-answer input { padding: 6px 10px; border: 2px solid var(--line); border-radius: 10px; font: inherit; }

/* ---------- A child's screen ---------- */

/* The question: a big heading, not a box that looks like a text field. */
.student-question { flex: none; background: none; border: none; box-shadow: none; padding: 8px 0 4px; }
.student-question .question-text { font-size: 30px; font-weight: 800; line-height: 1.25; -webkit-line-clamp: 6; letter-spacing: -0.01em; }
.student-question.math .question-text { font-size: 44px; font-weight: 900; text-align: center; }

.mascot-halo {
  width: 190px;
  height: 190px;
  margin-top: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #ffffff 0%, #ffffff 52%, rgba(255, 255, 255, 0) 71%);
}
.mascot-halo .mascot { width: 128px; }
.waiting .prompt { font-size: 24px; }

/* Cards: larger by default, and a few fill the screen. */
.class-view:not(.teacher-view) > .answer-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.class-view:not(.teacher-view) > .answer-grid .emoji { font-size: 58px; }
.class-view:not(.teacher-view) > .answer-grid .label { font-size: 20px; }
.class-view:not(.teacher-view) > .answer-grid.few { grid-template-columns: repeat(var(--count, 2), minmax(0, 300px)); justify-content: center; }
.class-view:not(.teacher-view) > .answer-grid.few .emoji { font-size: 110px; }
.class-view:not(.teacher-view) > .answer-grid.few .label { font-size: 30px; }
.class-view:not(.teacher-view) > .pick-status { font-size: 18px; text-align: center; }

/* A tap answers back with a small, soft bounce. */
.answer-card.just-picked { animation: pick-pop 0.32s var(--spring); }
/* The right answer gets a star once it's shown: good news, never a red X. */
.class-view:not(.teacher-view) .answer-card.outcome-right::after {
  content: "⭐";
  position: absolute;
  top: -16px;
  right: -12px;
  font-size: 36px;
  filter: drop-shadow(0 2px 3px rgba(120, 80, 0, 0.3));
  animation: star-in 0.5s var(--spring) both;
}
.class-view > .pick-status:empty { display: none; }
.class-view > .pick-status.revealed {
  align-self: center;
  margin: 4px 12px 0;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--sun-soft);
  border: 1px solid #f3dc8a;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: var(--shadow-s);
}

/* ---------- Motion ---------- */

@keyframes pulse { 50% { opacity: 0.6; } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(41, 212, 20, 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(41, 212, 20, 0); } }
@keyframes card-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes pick-pop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes star-in { from { opacity: 0; transform: scale(0.3) rotate(-30deg); } to { opacity: 1; transform: none; } }
.pulse { animation: pulse 1.2s ease-in-out infinite; }
.bob { animation: bob 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Fill in the blank ---------- */

.blank-gap {
  display: inline-block;
  min-width: 3.2em;
  margin: 0 0.15em;
  padding: 0 0.25em;
  border-bottom: 3px solid var(--blue);
  border-radius: 4px 4px 0 0;
  background: var(--blue-soft);
  line-height: 1.1;
  text-align: center;
}
.blank-gap.filled { color: #2e7d32; background: #e7f6e8; border-bottom-color: #43a047; }

/* ---------- Quick questions ---------- */

.quick-buttons { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.composer .quick-button { padding: 5px 12px; min-height: 34px; font-size: 14px; }
.quick-timer { display: inline-block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--blue-dark); font-variant-numeric: tabular-nums; }
.quick-timer.done { color: #2e7d32; }

/* ---------- Shuffled cards ---------- */

.shuffle-setting { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-s); }
.shuffle-setting label { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.shuffle-setting p { margin: 4px 0 0; }
.student-list .student-settings { margin-left: auto; gap: 6px; align-items: flex-end; }
.student-list .student-settings .choices-slot { margin-left: 0; }
.summary-student.habit { border-color: var(--blue-line); background: var(--blue-soft); }

/* ---------- Written summary ---------- */

.summary-written { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-s); margin-bottom: 16px; }
.summary-written-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.summary-written-head h3 { margin: 0; }
.summary-written-part h4 { margin: 10px 0 2px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.summary-written-part p { margin: 2px 0; }

/* "Ask a question" on the ready screen points the teacher at the ask bar. */
.composer.attention { animation: composer-attention 1.2s ease-out; }
@keyframes composer-attention {
  0%, 60% { box-shadow: 0 0 0 4px var(--blue-line), var(--shadow-l); }
  100% { box-shadow: var(--shadow-l); }
}

/* ---------- Summary: every question and each child ---------- */

.asked-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.asked-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow-s); }
.asked-card p { margin: 0; }
.asked-meta { font-size: 12px; }
.asked-question { font-weight: 800; font-size: 17px; margin: 2px 0 !important; overflow-wrap: anywhere; }
.asked-score { font-size: 14px; color: var(--muted); }
.asked-bars { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 5px; }
.asked-bar { display: grid; grid-template-columns: minmax(70px, 1fr) 3fr 2.5em; align-items: center; gap: 8px; font-size: 14px; }
.asked-bar-label { font-weight: 700; overflow-wrap: anywhere; }
.asked-bar.right .asked-bar-label { color: #2e7d32; }
.asked-bar-track { height: 12px; background: #f3ead8; border-radius: 999px; overflow: hidden; }
.asked-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--blue); }
.asked-bar.right .asked-bar-fill { background: #43a047; }
.asked-bar-count { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.child-table-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-s); }
.child-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.child-table th, .child-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.child-table thead th { color: var(--muted); font-weight: 800; background: var(--paper); }
.child-table .child-name-cell { text-align: left; font-weight: 700; position: sticky; left: 0; background: #fff; }
.child-table thead .child-name-cell { background: var(--paper); }
.child-table tr.needs-help .child-name-cell { background: #fffbea; }
.child-table .child-score { font-weight: 700; }
.child-table .cell-right { background: #e7f6e8; color: #2e7d32; font-weight: 700; }
.child-table .cell-wrong { background: #fdecee; color: #b3261e; font-weight: 700; }
.child-table .cell-answered { background: #f4f1ea; }
.child-table .cell-no_answer, .child-table .cell-away { color: var(--muted); }

/* ---------- Summary tab: built to skim ---------- */

.tab-panel[data-panel="summary"] .summary-note { display: none; }
.summary-body { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.sum-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sum-head h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.sum-empty { text-align: center; padding: 32px 16px; background: var(--paper); border: 2px dashed var(--line); border-radius: var(--radius); }
.sum-empty p { margin: 2px 0; }
.sum-empty-title { font-weight: 800; font-size: 18px; }

.sum-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.sum-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-s); }
.sum-tile-value { font-size: 30px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.sum-tile-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.sum-tile.good .sum-tile-value { color: #2e7d32; }
.sum-tile.mid .sum-tile-value { color: #b7791f; }
.sum-tile.low .sum-tile-value { color: #c62828; }

.sum-block { display: flex; flex-direction: column; gap: 8px; }
.sum-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sum-block-head h3 { margin: 0; font-size: 17px; }
.sum-block-hint { font-size: 12px; color: var(--muted); }

.sum-takeaways { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sum-take { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-s); }
.sum-take-icon { font-size: 22px; line-height: 1.2; flex: none; }
.sum-take-body { min-width: 0; }
.sum-take-body p { margin: 0; }
.sum-take-head { font-size: 16px; overflow-wrap: anywhere; }
.sum-take-head strong { margin-right: 2px; }
.sum-take-note { font-size: 13px; color: var(--muted); margin-top: 2px !important; }

.sum-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sum-chip { padding: 5px 12px; border-radius: 999px; background: var(--blue-soft); border: 1px solid var(--blue-line); font-size: 14px; font-weight: 700; color: var(--blue-dark); }

.sum-q-list { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-s); overflow: hidden; }
.sum-q + .sum-q { border-top: 1px solid var(--line); }
.sum-q-line { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.sum-q-line::-webkit-details-marker { display: none; }
.sum-q-line:hover { background: var(--paper); }
.sum-q[open] .sum-q-line { background: var(--paper); }
.sum-q-num { flex: none; font-size: 12px; font-weight: 800; color: var(--blue-dark); background: var(--blue-soft); border-radius: 8px; padding: 3px 7px; }
.sum-q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sum-q-text { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sum-q[open] .sum-q-text { white-space: normal; }
.sum-spread { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: #f3ead8; }
.sum-spread span { display: block; height: 100%; }
.sum-spread .right { background: #43a047; }
.sum-spread .wrong { background: #ef9a9a; }
.sum-spread .choice.c0 { background: var(--blue); }
.sum-spread .choice.c1 { background: #7fb0e8; }
.sum-spread .choice.c2 { background: #a9c9ef; }
.sum-spread .choice.c3 { background: #cfe1f7; }
.sum-q-body { padding: 4px 14px 14px 58px; }
.sum-q-meta { margin: 0; font-size: 12px; color: var(--muted); }

.sum-pill { flex: none; min-width: 48px; text-align: center; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sum-pill.good { background: #e7f6e8; color: #2e7d32; }
.sum-pill.mid { background: #fff4d6; color: #9a6a12; }
.sum-pill.low { background: #fdecee; color: #c62828; }
.sum-pill.plain { background: #f4f1ea; color: var(--muted); }

.child-flag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fff4d6; color: #9a6a12; font-size: 11px; font-weight: 800; }
.child-table .child-score .sum-pill { min-width: 0; }

@media (max-width: 520px) {
  .sum-tile-value { font-size: 24px; }
  .sum-q-body { padding-left: 14px; }
}

/* ---------- Worksheets ---------- */

.section-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.worksheet-view { display: flex; flex-direction: column; gap: 16px; padding-bottom: 32px; }
.ws-drop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 18px; background: var(--paper); border: 2px dashed var(--blue-line); border-radius: var(--radius-l); }
.ws-drop p { margin: 0; }
.ws-drop-title { font-size: 20px; font-weight: 800; }
.ws-choose { font-size: 17px; padding: 12px 24px; margin-top: 6px; }
.ws-status { min-height: 1.2em; font-weight: 600; }
.ws-result { display: flex; flex-direction: column; gap: 12px; }
.ws-result-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ws-result-head h2, .ws-result-head p { margin: 0; }
.ws-passage { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.ws-passage summary { cursor: pointer; font-weight: 700; color: var(--blue-dark); }
.ws-passage-text { white-space: pre-wrap; margin: 8px 0 0; }
.ws-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-s); display: flex; flex-direction: column; gap: 8px; }
.ws-item.flagged { border-color: #f2d46a; background: #fffdf2; }
.ws-item p { margin: 0; }
.ws-item-head { display: flex; align-items: center; gap: 8px; }
.ws-item-num { font-size: 12px; font-weight: 800; color: var(--blue-dark); background: var(--blue-soft); border-radius: 8px; padding: 2px 8px; }
.ws-item-kind { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.ws-item-text { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.ws-item .answer-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.ws-item-note { font-size: 14px; font-weight: 600; color: #8a6d12; }
.ws-skipped { background: #fbf8f2; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.ws-skipped h3 { margin: 0 0 4px; font-size: 15px; }
.ws-skipped ul { margin: 0; padding-left: 18px; color: var(--muted); }

/* ---------- Worksheet storyboard ---------- */

.ws-story { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-s); }
.ws-story-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ws-story-head h3, .ws-story-head p { margin: 0; }
.ws-story-status:empty { display: none; }
.ws-story-figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-story-img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.ws-story-captions { list-style: none; counter-reset: panel; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr)); gap: 8px; }
.ws-story-captions li { counter-increment: panel; font-size: 15px; font-weight: 700; line-height: 1.3; background: var(--paper); border-radius: 10px; padding: 8px 10px; }
.ws-story-captions li::before { content: counter(panel); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-dark); font-size: 12px; font-weight: 800; }
a.button-link { display: inline-flex; align-items: center; align-self: flex-start; text-decoration: none; border-radius: 12px; padding: 6px 14px; font-weight: 700; font-size: 14px; }
a.button-link.secondary { background: #fff; color: var(--blue-dark); border: 2px solid var(--blue-line); }
@media (max-width: 520px) {
  .ws-story-captions { grid-template-columns: 1fr; }
}

/* ---------- Worksheet library and pictures ---------- */

.ws-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ws-title-input { flex: 1 1 240px; font-size: 20px; font-weight: 800; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--line); }
.ws-action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-counts { margin: -4px 0 0; }
.ws-lesson-picker { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-s); }
.ws-lesson-picker p { margin: 0 0 8px; }
.ws-item-head input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
.ws-item-remove { margin-left: auto; color: var(--muted); }
.ws-item-picture { display: flex; align-items: flex-end; gap: 10px; }
.ws-item-picture img { max-width: 220px; max-height: 160px; border-radius: 10px; border: 1px solid var(--line); background: #fff; object-fit: contain; }
.ws-item-help { margin: -2px 0 0 !important; font-size: 12px; }
.ws-delete { align-self: flex-start; margin-top: 8px; }

/* A picture from a worksheet on a card, in place of the emoji. */
.answer-card .card-picture { width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #fff; }
.answer-grid.few .answer-card .card-picture { max-width: 220px; }

/* A question's own picture, above the cards. */
.question-picture { display: block; max-width: min(100%, 360px); max-height: 240px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: #fff; margin: 8px 0; }
.question-picture[hidden] { display: none; }
.student-question .question-picture { margin: 0 auto 10px; max-height: 280px; }
.planned-picture { display: flex; align-items: flex-end; gap: 10px; }
.planned-picture img { max-width: 200px; max-height: 140px; border-radius: 10px; border: 1px solid var(--line); object-fit: contain; }
.planned-picture[hidden] { display: none; }

/* ---------- Picture picker ---------- */

.card-picture-button { position: absolute; left: -6px; top: -6px; width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; font-size: 15px; background: #fff; border: 2px solid var(--blue-line); box-shadow: var(--shadow-s); z-index: 2; }
.planned-answer { position: relative; }
.picker-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(40, 30, 10, 0.35); display: grid; place-items: center; padding: 16px; }
.picker { width: min(760px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; gap: 10px; background: var(--paper, #fffdf8); border-radius: var(--radius-l, 22px); padding: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.picker-head { display: flex; justify-content: space-between; align-items: center; }
.picker-head h3 { margin: 0; }
.picker-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.picker-search { flex: 1 1 200px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--line); font-size: 15px; }
.picker-status { margin: 0; }
.picker-status:empty { display: none; }
.picker-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 2px; }
.picker-tile { display: flex; flex-direction: column; gap: 2px; }
.picker-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; min-height: 0; background: #fff; color: var(--ink); border: 2px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-s); }
.picker-pick:hover { border-color: var(--blue); }
.picker-tile.current .picker-pick { border-color: #43a047; }
.picker-pick img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; }
.picker-label { font-size: 13px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-tile-tools { display: flex; justify-content: center; gap: 8px; font-size: 12px; }
.picker-tile-tools .link-button { font-size: 12px; padding: 0; min-height: 0; }
.picker-foot { display: flex; justify-content: flex-end; }
.planned-picture { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }

/* ---------- Image bank ---------- */

.image-bank { display: flex; flex-direction: column; gap: 14px; padding-bottom: 32px; }
.picture-browser { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.picker .picture-browser { overflow: hidden; }
.image-bank .picker-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); overflow: visible; }
.picker-pick { width: 100%; }
div.picker-pick { cursor: default; }
.picker-source { font-size: 11px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-adjust-button { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; font-size: 14px; background: #fff; color: var(--ink); border: 2px solid var(--blue-line); box-shadow: var(--shadow-s); z-index: 2; }

/* ---------- Word problems as things to count ---------- */

.math-slot[hidden] { display: none; }
.math-scene { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 12px; margin: 8px 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.math-group { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; background: var(--paper); border: 2px dashed var(--blue-line); border-radius: 14px; }
.math-group-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.math-sign { font-size: 34px; font-weight: 900; color: var(--blue-dark); }
.count-pictures { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.15; }
.count-row { font-size: 26px; letter-spacing: 2px; white-space: nowrap; }
.count-pictures .taken { position: relative; opacity: 0.35; }
.count-pictures .taken::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: #d32f2f; font-weight: 900; opacity: 1; }
.answer-card .count-pictures .count-row { font-size: 15px; letter-spacing: 1px; }
.student-question .math-scene { margin: 4px auto 10px; }
.student-question .count-row { font-size: 34px; }
.class-view:not(.teacher-view) > .answer-grid .answer-card .count-pictures .count-row { font-size: 20px; }

/* ---------- A worksheet opened from a lesson ---------- */

.questions-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.questions-head h3 { margin: 0; }
.worksheet-status:empty { display: none; }
.ws-layer { position: fixed; inset: 0; z-index: 90; overflow-y: auto; background: var(--cream); padding: 16px 12px; }
.ws-layer .page { max-width: 900px; margin: 0 auto; }
body.ws-layer-open { overflow: hidden; }
.picker .ws-new { align-self: flex-start; }
.picker .ws-choices { overflow-y: auto; }

/* ---------- Books ---------- */

.bk-author { flex: 0 1 200px; font-size: 15px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--line); }
.bk-section { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-s); }
.bk-section h3 { margin: 0; font-size: 17px; }
.bk-section > p { margin: 0; }
.bk-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bk-stops { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bk-stop { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.bk-stop-page { flex: none; width: 96px; border-radius: 8px; border: 1px solid var(--line); background: #fff; object-fit: contain; }
div.bk-stop-page { height: 120px; display: grid; place-items: center; font-weight: 800; color: var(--muted); }
.bk-stop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bk-stop-body p { margin: 0; }
.bk-stop .answer-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.bk-words { display: flex; flex-direction: column; gap: 8px; }
.bk-word-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bk-word-label { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; }
.bk-word { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--blue-soft); border: 1px solid var(--blue-line); font-weight: 700; font-size: 14px; }
.bk-word .link-button { padding: 0 4px; min-height: 0; font-size: 15px; }
.bk-pages-box summary { cursor: pointer; list-style: none; }
.bk-pages-box summary h3 { display: inline; }
.bk-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.bk-page { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.bk-page.muted { opacity: 0.6; }
.bk-page img { width: 100%; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.bk-page p { margin: 0; }
.bk-page-num { font-size: 12px; font-weight: 800; color: var(--blue-dark); }
.bk-page-text { font-size: 14px; font-weight: 600; }
.bk-page-picture { font-size: 12px; }
.bk-things { display: flex; flex-wrap: wrap; gap: 4px; }
.bk-thing { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.bk-thing img { width: 24px; height: 24px; object-fit: contain; border-radius: 50%; }
.bk-progress { width: min(360px, 100%); }
@media (max-width: 520px) {
  .bk-stop { flex-direction: column; }
  .bk-stop-page { width: 100%; max-height: 200px; }
  div.bk-stop-page { width: auto; height: auto; padding: 4px 10px; place-items: start; }
}

/* ======================================================================
   Calmer teacher screens: one main action per screen, one list of
   material, controls shown when they're needed.
   ====================================================================== */

.icon-wrap { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon { display: block; }

/* ---------- Home: Teach ---------- */

.class-row { display: flex; align-items: center; gap: 10px; }
.class-row > .class-item { flex: 1; min-width: 0; }
.class-start { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 10px 18px; font-size: 15px; }
.home-section .section-head .link-button { font-size: 14px; }

/* ---------- Home: Prepare ---------- */

.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 260px; display: flex; flex-direction: column; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-l); }
.menu[hidden] { display: none; }
.menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 10px 12px; min-height: 0; background: none; color: var(--ink); border: 0; border-radius: 10px; box-shadow: none; }
.menu button:hover, .menu button:focus-visible { background: var(--blue-soft); }
.menu-title { font-weight: 800; font-size: 15px; }
.menu-sub { font-size: 13px; color: var(--muted); font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.chip { padding: 5px 12px; min-height: 0; font-size: 14px; font-weight: 700; background: #fff; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; box-shadow: none; }
.chip[aria-selected="true"] { background: var(--blue-soft); color: var(--blue-dark); border-color: var(--blue-line); }

.library-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-s); }
.library-list:empty { display: none; }
.library-list li + li { border-top: 1px solid var(--line); }
.library-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 0; background: none; color: var(--ink); border: 0; border-radius: 0; box-shadow: none; text-align: left; }
.library-row:hover { background: var(--paper); }
.library-row > .icon-wrap:first-child { color: var(--blue-dark); }
.library-row > .icon-wrap:last-child { color: var(--muted); }
.library-title { flex: 1; min-width: 0; font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-meta { flex: none; font-size: 13px; color: var(--muted); font-weight: 600; }
@media (max-width: 520px) {
  .library-row { flex-wrap: wrap; }
  .library-meta { order: 3; width: 100%; padding-left: 30px; }
}
.empty-state { text-align: center; padding: 28px 16px; background: #fff; border: 2px dashed var(--line); border-radius: var(--radius); }
.empty-state p { margin: 2px 0; }
.empty-title { font-weight: 800; font-size: 17px; }
.home-foot { margin-top: 24px; }
.class-row > .class-item::after { content: none; }

/* ---------- Live class: a calmer ask bar ---------- */

.composer { gap: 8px; }
.composer-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.composer-chips .segmented.chip-group { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 0; background: none; box-shadow: none; }
.composer-chips .segmented.chip-group button { padding: 4px 12px; min-height: 30px; font-size: 13px; font-weight: 700; background: #fff; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; box-shadow: none; }
.composer-chips .segmented.chip-group button[aria-checked="true"] { background: var(--blue-soft); color: var(--blue-dark); border-color: var(--blue-line); }
.composer-chips .chip { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 4px 12px; font-size: 13px; }
.composer-chips .settings-toggle { padding: 4px 8px; }
.composer-chips .settings-toggle[aria-expanded="true"] { background: var(--blue-soft); color: var(--blue-dark); }
.composer .quick-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; min-width: 220px; }
.composer-more { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid var(--line); }
.composer-more[hidden] { display: none; }
.composer-more .mode-help { margin: 4px 0 0; font-size: 13px; }
.idle-actions button { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Lesson planner: compact questions ---------- */

.big-title { font-size: 22px; font-weight: 800; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line); width: 100%; box-sizing: border-box; }
.about-lesson { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow-s); }
.about-lesson summary { cursor: pointer; display: flex; flex-direction: column; gap: 1px; list-style: none; }
.about-lesson summary::-webkit-details-marker { display: none; }
.about-title { font-weight: 800; }
.about-title::after { content: " ▾"; color: var(--muted); font-weight: 400; }
.about-lesson[open] .about-title::after { content: " ▴"; }
.about-sub { font-size: 13px; color: var(--muted); }
.about-lesson textarea { width: 100%; box-sizing: border-box; margin-top: 10px; }
.about-lesson .pdf-row { margin-top: 8px; }
.pdf-status:empty, .worksheet-status:empty, .suggest-questions-status:empty { display: none; }
.planned-question.compact { padding: 0; }
.compact-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 0; background: #fff; color: var(--ink); border: 0; border-radius: inherit; box-shadow: none; text-align: left; }
.compact-row:hover { background: var(--paper); }
.compact-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.compact-text { font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-thumb { flex: none; width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.compact-row > .icon-wrap { color: var(--muted); }
.planned-done-row { display: flex; justify-content: flex-end; }
.add-menu-wrap { align-self: flex-start; }
.add-menu-wrap .add-questions { display: inline-flex; align-items: center; gap: 6px; }
.add-menu { left: 0; right: auto; top: calc(100% + 6px); }
.lesson-editor .delete-lesson { align-self: flex-start; color: var(--muted); margin-top: 12px; }

/* ---------- Review screens: steps and one main action ---------- */

.steps { list-style: none; counter-reset: step; display: flex; gap: 6px; margin: 0; padding: 0; }
.steps li { counter-increment: step; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; font-size: 13px; font-weight: 700; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f4ead6; color: var(--muted); font-size: 12px; }
.steps li.current { color: var(--blue-dark); border-color: var(--blue-line); background: var(--blue-soft); }
.steps li.current::before { background: var(--blue); color: #fff; }
.steps li.done::before { content: "✓"; background: #43a047; color: #fff; }
.review-tip { margin: 0; font-size: 14px; color: var(--muted); }
.action-bar { position: sticky; bottom: 10px; z-index: 5; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
.action-bar-buttons { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.action-bar-buttons button { font-size: 16px; padding: 10px 20px; }
.action-bar .ws-lesson-picker { max-height: 40vh; overflow-y: auto; border: 0; box-shadow: none; padding: 0; }
.ws-story { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow-s); }
.ws-story summary { cursor: pointer; display: flex; flex-direction: column; gap: 1px; list-style: none; }
.ws-story .ws-make-story { align-self: flex-start; margin-top: 8px; }
.bk-section summary { cursor: pointer; display: flex; flex-direction: column; gap: 1px; list-style: none; }
.bk-section summary::-webkit-details-marker, .ws-story summary::-webkit-details-marker { display: none; }
.bk-section[open] .about-title::after, .ws-story[open] .about-title::after { content: " ▴"; }
.worksheet-view .ws-delete, .book-view .bk-delete { align-self: flex-start; color: var(--muted); }
.worksheet-view .ws-drop-title { font-size: 20px; }
.home-section .section-head .link-button { color: var(--blue-dark); font-weight: 700; }
/* One strong button per area: Start is quiet; a class with a question on is not. */
.class-start { background: #fff; color: var(--blue-dark); border: 2px solid var(--blue-line); box-shadow: var(--shadow-s); }
.class-start.live { background: linear-gradient(180deg, #5a9de5 0%, var(--blue) 100%); color: #fff; border: 0; }

/* ======================================================================
   Inviting look: a sunny welcome, colour that means something (lessons
   blue, books coral, worksheets green, pictures violet), softer buttons
   and roomier cards. The children's answer cards keep their own look.
   ====================================================================== */

:root {
  --coral: #e8704f;
  --coral-dark: #c4553a;
  --coral-soft: #fdebe4;
  --teal-dark: #1f7f5c;
  --teal-soft: #e2f5ec;
  --violet-dark: #6f43a8;
  --violet-soft: #f1e9fb;
  --sun-dark: #a87a00;
  --shadow-s: 0 1px 2px rgba(92, 64, 20, 0.05), 0 3px 10px rgba(92, 64, 20, 0.06);
}

/* Softer buttons: flat colour, a gentle lift, no heavy 3D edge. */
button {
  background: var(--blue);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(47, 111, 184, 0.22), 0 4px 12px rgba(47, 111, 184, 0.16);
}
button:hover { background: #3d83d2; }
button:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(47, 111, 184, 0.22); }
button.secondary { border-width: 1.5px; box-shadow: 0 1px 2px rgba(92, 64, 20, 0.05); }

/* ---------- The welcome ---------- */

.home-header { padding: 30px 16px 8px; gap: 16px; }
.mascot-sun {
  flex: none;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff8dc 0%, #ffe9a8 58%, #ffd978 100%);
  box-shadow: 0 0 0 8px rgba(255, 217, 120, 0.22), 0 10px 24px rgba(214, 160, 30, 0.2);
}
.mascot-sun .home-mascot { width: 72px; height: 72px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.home-greeting h1 { font-size: 28px; letter-spacing: -0.02em; }
.home-greeting .hint { font-size: 15px; margin-top: 4px; max-width: 34ch; }

/* ---------- Sign in: who's here ---------- */

.role-question { font-size: 21px; font-weight: 800; margin: 22px 0 12px; }
.role-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.role-card { padding: 20px; border-radius: 20px; }
.role-icon { width: 58px; height: 58px; border-radius: 18px; color: var(--sun-dark); }
.role-card[data-role="student"] .role-icon { color: var(--green-dark); }
.role-sub { grid-column: 2; font-size: 14px; color: var(--muted); font-weight: 500; }
.role-card:hover .role-name { color: var(--blue-dark); }

/* ---------- Sections ---------- */

#signed-in .section-head { margin-top: 28px; margin-bottom: 10px; }
#signed-in .section-head h2 { font-size: 21px; letter-spacing: -0.01em; }

/* ---------- Classes as cards ---------- */

#class-list:not(.big) { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.class-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 10px 12px 10px 8px;
  box-shadow: var(--shadow-s);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.class-row:hover { border-color: var(--blue-line); box-shadow: var(--shadow); transform: translateY(-1px); }
.class-row > .class-item { background: none; border: 0; box-shadow: none; padding: 4px; }
.class-row > .class-item:hover { transform: none; box-shadow: none; }
.class-item { flex-wrap: nowrap; }
.class-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 21px;
  font-weight: 900;
  color: var(--ink);
  background: color-mix(in srgb, var(--avatar, #478ddb) 26%, #fff);
  border: 2px solid color-mix(in srgb, var(--avatar, #478ddb) 55%, #fff);
}
.class-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.class-item-text .class-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-list.big .class-avatar { width: 60px; height: 60px; font-size: 28px; border-radius: 18px; }

/* ---------- Material, colour-coded ---------- */

.library-list { border-radius: 20px; }
.library-row { gap: 14px; padding: 12px 16px; }
.library-row > .icon-wrap:first-child { width: 42px; height: 42px; border-radius: 13px; background: var(--blue-soft); color: var(--blue-dark); }
.library-row[data-type="book"] > .icon-wrap:first-child { background: var(--coral-soft); color: var(--coral-dark); }
.library-row[data-type="worksheet"] > .icon-wrap:first-child { background: var(--teal-soft); color: var(--teal-dark); }
.library-row[data-type="picture"] > .icon-wrap:first-child { background: var(--violet-soft); color: var(--violet-dark); }
.chip { padding: 6px 14px; font-size: 14px; }
.chip:hover { border-color: var(--blue-line); color: var(--blue-dark); }

.menu { border-radius: 16px; padding: 8px; }
.menu button { border-radius: 12px; }

.empty-state { padding: 26px 16px 22px; border-radius: 20px; border-style: dashed; }
.empty-mascot { width: 76px; height: 76px; object-fit: contain; margin-bottom: 6px; }

.home-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.home-foot .link-button { font-size: 13px; }

/* ---------- Class screen chrome ---------- */

.teacher-view .view-header .class-name { font-size: 22px; letter-spacing: -0.01em; }
.teacher-view .tabs { background: rgba(255, 255, 255, 0.6); border: 1px solid var(--line); }
.idle-stage { border-radius: 22px; }
.idle-title { font-size: 26px; }

/* ---------- Planner and review: the same friendly cards ---------- */

.planned-question, .ws-item, .bk-section, .about-lesson, .ws-story, .ws-passage { border-radius: 18px; }
.big-title { border-radius: 16px; border-width: 1.5px; }
.steps li { padding: 5px 14px 5px 5px; }
.library-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.library-text .library-title { flex: none; }
.library-row { flex-wrap: nowrap; }
@media (max-width: 520px) {
  .library-row { flex-wrap: nowrap; }
  .library-meta { order: 0; width: auto; padding-left: 0; }
}
.class-item-text .live-badge { align-self: flex-start; margin: 2px 0 0; }

/* ======================================================================
   Side panel: a quick look without leaving the page. From the right on
   wider screens, a sheet from the bottom on a phone.
   ====================================================================== */

.sp-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(43, 42, 51, 0); transition: background 0.2s ease; }
.sp-scrim.shown { background: rgba(43, 42, 51, 0.28); }
.sp-panel {
  position: fixed; z-index: 81; top: 0; right: 0; bottom: 0;
  width: min(480px, 100%);
  display: flex; flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(92, 64, 20, 0.16);
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sp-panel.wide { width: min(640px, 100%); }
.sp-panel.shown { transform: none; }
body.sp-open { overflow: hidden; }
.sp-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--line); }
.sp-titles { flex: 1; min-width: 0; }
.sp-title { margin: 0; font-size: 21px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sp-subtitle { margin: 3px 0 0; font-size: 14px; color: var(--muted); }
.sp-close { flex: none; width: 38px; height: 38px; padding: 0; min-height: 0; border-radius: 12px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; font-size: 16px; }
.sp-close:hover { background: var(--blue-soft); }
.sp-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.sp-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.sp-actions .sp-left { margin-right: auto; }
.sp-actions button { display: inline-flex; align-items: center; gap: 6px; }
.sp-actions .button-link { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 14px; font-weight: 700; font-size: 15px; text-decoration: none; }
.sp-actions .sp-primary-link { background: var(--blue); color: #fff; }
@media (max-width: 640px) {
  .sp-panel, .sp-panel.wide { top: auto; left: 0; width: 100%; max-height: 88vh; border-left: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; box-shadow: 0 -18px 48px rgba(92, 64, 20, 0.16); transform: translateY(100%); }
  .sp-panel.shown { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-panel, .sp-scrim { transition: none; }
}

/* ---------- What's inside the previews ---------- */

.pv-questions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pv-question { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.pv-question-head { display: flex; align-items: center; gap: 8px; }
.pv-num { font-size: 12px; font-weight: 800; color: var(--blue-dark); background: var(--blue-soft); border-radius: 8px; padding: 2px 8px; }
.pv-meta { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pv-text { margin: 0; font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.pv-picture { max-width: 180px; max-height: 130px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.pv-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-card { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.pv-card img { width: 22px; height: 22px; object-fit: contain; border-radius: 6px; }
.pv-card.right { background: #e7f6e8; border-color: #b9e3bc; color: #2e7d32; }
.pv-note { margin: 0; font-size: 13px; color: var(--muted); }
.pv-about { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.pv-about summary { cursor: pointer; font-weight: 800; }
.pv-about p { margin: 8px 0 0; font-size: 14px; white-space: pre-wrap; color: var(--muted); }
.pv-heading { margin: 4px 0 0; font-size: 16px; }
.pv-cover-row { display: flex; gap: 14px; align-items: center; }
.pv-cover { width: 120px; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-s); background: #fff; }
.pv-facts p { margin: 2px 0; font-weight: 700; }
.pv-words { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-word { padding: 4px 10px; border-radius: 999px; background: var(--coral-soft); color: var(--coral-dark); font-weight: 700; font-size: 13px; }
.pv-word.core { background: var(--blue-soft); color: var(--blue-dark); }
.pv-storyboard { width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.pv-flag { margin: 0; padding: 8px 12px; border-radius: 12px; background: #fff8e1; color: #8a6d12; font-weight: 700; font-size: 14px; }
.pv-classes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pv-class { width: 100%; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.pv-class:hover { background: var(--blue-soft); }
.pv-file { width: 100%; min-height: 60vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
img.pv-file { min-height: 0; }
.sp-body .picture-browser .picker-grid { overflow: visible; }

/* Tabs in Prepare, with counts. */
.chip-count { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: rgba(47, 111, 184, 0.1); font-size: 12px; }
.library-row[data-type="file"] > .icon-wrap:first-child { background: #f4f1ea; color: var(--muted); }

/* ======================================================================
   Class: the ask bar on top, the class in the middle, lessons beside it.
   ====================================================================== */

.teach-panel { gap: 12px; }
.teach-panel > .composer { position: static; margin: 4px 12px 0; box-shadow: var(--shadow); }
.teach-panel > .composer .quick-menu { top: calc(100% + 6px); bottom: auto; }
.teach-panel > .live-status, .teach-panel > .live-error { margin: 0 12px; }
.teach-panel > .live-error:empty { display: none; }

.teach-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 12px; }
.teach-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.teach-main .roster-head { margin: 4px 0 0; }
@media (min-width: 900px) {
  .teach-layout { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
  .teach-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
}

.teach-side { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-s); }
.side-label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.teach-side .lesson-panel { margin: 0; }
.teach-side .lesson-bar { background: none; border: 0; padding: 0; align-items: flex-start; flex-wrap: nowrap; }
.lesson-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.teach-side .lesson-title { font-size: 18px; }
.teach-side .lesson-next { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; border-left-width: 4px; box-shadow: none; }
.teach-side .lesson-next-question { font-size: 17px; }
.teach-side .ask-lesson { align-self: flex-start; }
.teach-side .lesson-questions { max-height: none; box-shadow: none; border: 0; padding: 0; }
.teach-side .lesson-question { grid-template-columns: 24px 1fr; row-gap: 2px; padding: 8px 10px; }
.teach-side .lq-mode, .teach-side .lq-status { grid-column: 2; }
.teach-side .lq-status:empty { display: none; }
.teach-side .lesson-picker { display: flex; flex-direction: column; gap: 8px; }
.teach-side .lesson-picker ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.side-lesson { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 0; text-align: left; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.side-lesson:hover { background: var(--blue-soft); border-color: var(--blue-line); }
.side-lesson > .icon-wrap { color: var(--blue-dark); }
.side-lesson-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.side-lesson-title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-lesson-meta { font-size: 13px; color: var(--muted); }
.teach-main .idle-stage { padding: 20px; }
.teach-main .idle-title { font-size: 22px; }

/* ======================================================================
   Book review as a reader: pages on the left, the open page and where to
   stop on it on the right. On a phone the pages become a strip.
   ====================================================================== */

.bk-top { display: flex; flex-direction: column; gap: 6px; }
.bk-titles { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bk-titles .big-title { flex: 1 1 280px; width: auto; }
.bk-titles .bk-author { flex: 0 1 220px; }
.bk-words { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.bk-word.core { background: var(--blue-soft); border-color: var(--blue-line); }
.bk-word.topic { background: var(--coral-soft); border-color: #f5c9bb; color: var(--coral-dark); }

.reader { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 860px) {
  .reader { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .reader-pages { position: sticky; top: 12px; max-height: calc(100vh - 140px); overflow-y: auto; }
}
.reader-pages { display: flex; flex-direction: column; gap: 4px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.rp-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; min-height: 0; text-align: left; background: none; color: var(--ink); border: 0; border-radius: 12px; box-shadow: none; }
.rp-row:hover { background: var(--paper); }
.rp-row.current { background: var(--coral-soft); box-shadow: inset 0 0 0 2px #f5c9bb; }
.rp-row.muted { opacity: 0.6; }
.rp-thumb { flex: none; width: 44px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); }
.rp-thumb.blank { display: grid; place-items: center; font-weight: 800; color: var(--muted); }
.rp-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rp-row-number { font-size: 12px; font-weight: 800; color: var(--coral-dark); }
.rp-row-snippet { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-marker { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; }
.rp-marker.off { background: #d9d2c4; }
@media (max-width: 859px) {
  .reader-pages { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; }
  .rp-row { flex: none; width: auto; flex-direction: column; gap: 4px; scroll-snap-align: start; }
  .rp-row-text .rp-row-snippet { display: none; }
  .rp-thumb { width: 56px; height: 72px; }
}

.reader-page { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-s); min-width: 0; }
.rp-head { display: flex; align-items: center; gap: 10px; }
.rp-number { font-size: 20px; font-weight: 900; }
.rp-kind { font-size: 12px; font-weight: 800; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.rp-nav { margin-left: auto; display: flex; gap: 6px; }
.rp-nav button { width: 38px; padding: 6px 0; font-size: 18px; }
.rp-spread { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1100px) { .rp-spread { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.rp-image { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.rp-words { display: flex; flex-direction: column; gap: 8px; }
.rp-text { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
.rp-picture { margin: 0; font-size: 14px; color: var(--muted); }
.rp-stops { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.rp-stops-title { margin: 0; font-size: 16px; color: var(--coral-dark); }
.stop-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--paper); border: 1px solid #f5c9bb; border-left: 4px solid var(--coral); border-radius: 14px; }
.stop-card.off { opacity: 0.55; border-left-color: #d9d2c4; }
.stop-head { display: flex; align-items: center; gap: 8px; }
.stop-use { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.stop-use input { width: 18px; height: 18px; margin: 0; }
.stop-head .remove { margin-left: auto; }
.stop-text { font-size: 17px; font-weight: 800; }
.stop-cards { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.stop-tip { margin: 0; font-size: 13px; color: var(--muted); }
.rp-add { display: flex; gap: 8px; }
.rp-add input { flex: 1; }
.action-bar .bk-replan { margin-right: auto; }

/* Worksheet review uses the reader layout: questions beside the open one. */
.ws-list .rp-row.current { background: var(--teal-soft); box-shadow: inset 0 0 0 2px #b7e3cf; }
.ws-list .rp-row-number { color: var(--teal-dark); }
.rp-thumb.square { width: 44px; height: 44px; }
.rp-marker.flag { background: #f2c230; color: #5c4500; }
.ws-editor { display: flex; flex-direction: column; gap: 10px; }
.ws-editor .ws-item-note { margin: 0; padding: 8px 12px; border-radius: 12px; background: #fff8e1; }
.ws-editor .ws-item-remove { align-self: flex-start; }
@media (max-width: 859px) { .ws-list .rp-row-text .rp-row-snippet { display: none; } }
.teach-side .lesson-title { flex: none; }
.bk-result .bk-words { flex-direction: row; justify-content: flex-start; }
.bk-word-label { margin-right: 4px; }

/* ======================================================================
   Books and worksheets, round 3: a header with the title and the two
   actions, then tabs -- one thing at a time. Details open in the side panel.
   ====================================================================== */

/* The side panel sits above a book or worksheet opened from a lesson. */
.sp-scrim { z-index: 94; }
.sp-panel { z-index: 95; }

.doc-view { display: flex; flex-direction: column; gap: 14px; padding-bottom: 40px; }
.doc-header { display: flex; align-items: center; gap: 12px; padding: 14px 12px 4px; flex-wrap: wrap; }
.doc-titles { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-heading { margin: 0; font-size: 24px; }
.doc-title { width: 100%; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; padding: 4px 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); }
.doc-sub { width: 100%; font-size: 15px; padding: 2px 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); }
.doc-title:hover, .doc-sub:hover { border-color: var(--line); }
.doc-title:focus, .doc-sub:focus { border-color: var(--blue-line); background: #fff; outline: none; }
.doc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-status { font-size: 13px; color: var(--muted); font-weight: 600; }
.doc-view > .ws-drop { margin: 0 12px; }
.doc-view .bk-result, .doc-view .ws-result { display: flex; flex-direction: column; gap: 14px; padding: 0 12px; }
.doc-view .bk-result[hidden], .doc-view .ws-result[hidden], .doc-view .ws-drop[hidden] { display: none; }

.doc-tabs { align-self: flex-start; max-width: 100%; overflow-x: auto; display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--cream-deep); box-shadow: inset 0 1px 2px rgba(92, 64, 20, 0.08); }
.doc-tab { display: inline-flex; align-items: center; gap: 6px; background: none; color: var(--muted); border-radius: 11px; padding: 8px 16px; font-size: 15px; white-space: nowrap; box-shadow: none; min-height: 0; }
.doc-tab[hidden] { display: none; }
.doc-tab:hover { background: rgba(255, 255, 255, 0.55); }
.doc-tab:active { transform: none; box-shadow: none; }
.doc-tab[aria-selected="true"] { color: var(--ink); background: #fff; box-shadow: var(--shadow-s); }
.tab-count { font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); }
.tab-count:empty { display: none; }
.doc-panel { display: flex; flex-direction: column; gap: 12px; }
.doc-panel[hidden] { display: none; }
.doc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.doc-tip { margin: 0; color: var(--muted); font-size: 15px; }
.doc-empty { list-style: none; color: var(--muted); padding: 24px; text-align: center; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); }

/* Stops: one card each, the page on the left. */
.stop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.doc-view .stop-card, .sp-body .stop-card { flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--coral); border-radius: var(--radius); box-shadow: var(--shadow-s); }
.sp-body .stop-card { background: var(--paper); box-shadow: none; }
.stop-card.off { opacity: 0.55; border-left-color: #d9d2c4; }
.stop-thumb { flex: none; width: 116px; display: flex; flex-direction: column; gap: 4px; padding: 0; min-height: 0; background: none; border: 0; box-shadow: none; color: var(--coral-dark); cursor: pointer; }
.stop-thumb img { width: 116px; height: 88px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); }
.stop-thumb:hover img { border-color: var(--coral); }
.stop-thumb-label { font-size: 12px; font-weight: 800; }
.stop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.stop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stop-use { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.stop-use input { width: 20px; height: 20px; margin: 0; accent-color: var(--coral); }
.stop-kind { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--coral-dark); background: var(--coral-soft); padding: 2px 9px; border-radius: 999px; }
.stop-head .remove { color: var(--muted); font-size: 14px; }
.stop-text { width: 100%; font-size: 18px; font-weight: 700; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: var(--paper); resize: vertical; font-family: inherit; color: var(--ink); }
.stop-text:focus { border-color: var(--blue-line); background: #fff; outline: none; }
.stop-note { margin: 0; font-size: 13px; color: var(--muted); }
.stop-cards { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.stop-cards .answer-card { min-height: 0; padding: 8px 6px; }
.stop-cards .answer-card .emoji { font-size: 30px; }
.stop-cards .answer-card .card-picture { max-width: 64px; }
.stop-cards .answer-card .label { font-size: 14px; }
@media (max-width: 560px) {
  .doc-view .stop-card { flex-direction: column; }
  .stop-thumb { width: 100%; flex-direction: row; align-items: center; }
  .stop-thumb img { width: 64px; height: 48px; }
}

/* Pages: the book as a grid of pages. */
.page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.page-tile { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; min-height: 0; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s); cursor: pointer; font-weight: 400; }
.page-tile:hover { border-color: var(--coral); transform: translateY(-1px); box-shadow: var(--shadow); }
.page-tile.muted { opacity: 0.6; }
.page-tile-image { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--paper); }
.page-tile-image img { width: 100%; height: 100%; object-fit: cover; }
.page-tile-stop { position: absolute; top: 6px; right: 6px; font-size: 11px; font-weight: 800; color: #fff; background: var(--coral); padding: 2px 8px; border-radius: 999px; box-shadow: var(--shadow-s); }
.page-tile-number { font-size: 12px; font-weight: 800; color: var(--coral-dark); margin-top: 2px; }
.page-tile-text { font-size: 13px; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* A page in the side panel. */
.pp-image { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.pp-text { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 600; }
.pp-picture { margin: 0; font-size: 14px; color: var(--muted); font-style: italic; }
.pp-stops-title { margin: 6px 0 0; font-size: 15px; font-weight: 800; }
.sp-body .rp-add { display: flex; gap: 8px; }
.sp-body .rp-add input { flex: 1; min-width: 0; }

/* Words. */
.word-group { display: flex; flex-direction: column; gap: 8px; }
.word-group h3 { margin: 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.word-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.word-chips:empty::before { content: "None yet."; color: var(--muted); font-size: 14px; }
.word-chips .bk-word { font-size: 16px; padding: 6px 8px 6px 14px; }
.word-add { display: flex; gap: 8px; max-width: 360px; }
.word-add input { flex: 1; min-width: 0; }

/* Worksheet questions: one card each; tap to open. */
.q-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.q-item { display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal-dark); border-radius: var(--radius); box-shadow: var(--shadow-s); overflow: hidden; }
.q-item.flagged { border-left-color: var(--sun); background: #fffdf2; }
.q-item.off { opacity: 0.55; }
.q-use { flex: none; width: 22px; height: 22px; margin: 18px 4px 0 14px; accent-color: var(--teal-dark); }
.q-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 10px; min-height: 0; text-align: left; background: none; color: var(--ink); border: 0; border-radius: 0; box-shadow: none; font-weight: 400; cursor: pointer; }
.q-open:hover { background: var(--paper); }
.q-open:active { transform: none; }
.q-thumb { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.q-thumb.blank { display: grid; place-items: center; font-size: 22px; font-weight: 800; color: var(--teal-dark); background: var(--teal-soft); border-color: transparent; }
.q-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.q-meta { display: flex; align-items: center; gap: 8px; }
.q-number { font-size: 12px; font-weight: 800; color: var(--teal-dark); text-transform: uppercase; letter-spacing: 0.04em; }
.q-flag { font-size: 11px; font-weight: 800; color: #8a6d12; background: var(--sun-soft); padding: 1px 8px; border-radius: 999px; }
.q-text { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.q-answers { display: flex; flex-wrap: wrap; gap: 6px; }
.q-answer { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 2px 10px 2px 4px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.q-answer:not(:has(img, span + span)) { padding-left: 10px; }
.q-answer img { width: 22px; height: 22px; object-fit: contain; border-radius: 50%; background: #fff; }
.q-answer.right { background: var(--green-soft); border-color: #b8e8ad; color: var(--green-dark); }
.q-answer.right::after { content: "✓"; font-weight: 900; }
.q-chevron { flex: none; font-size: 26px; color: #c9bda4; }
.q-open:hover .q-chevron { color: var(--teal-dark); }

.sp-body .ws-item-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--sun-soft); color: #8a6d12; font-weight: 700; font-size: 14px; }
.sp-body .ws-item-picture { flex-direction: column; align-items: flex-start; gap: 6px; }
.sp-body .ws-item-picture img { max-width: 100%; max-height: 240px; }
.ws-item-picture-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.sp-body .answer-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.sp-body .ws-item-remove { align-self: flex-start; margin: 8px 0 0; }
.ws-passage-text { margin: 0; white-space: pre-line; font-size: 17px; line-height: 1.5; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.ws-skipped-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.ws-more-status:empty { display: none; }
.ws-lesson-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.doc-view .bk-error:empty, .doc-view .ws-error:empty { display: none; }
.doc-view .ws-delete, .doc-view .bk-delete { align-self: flex-start; color: var(--muted); }

/* ======================================================================
   Class screen, round 3: less to read.
   ====================================================================== */
.teacher-view .connection-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.teacher-view .view-title { display: flex; align-items: center; gap: 10px; }
.teacher-view .view-title .connection { margin: 0; }
.asked-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.asked-status:empty { display: none; }
.status-chip { font-size: 12px; font-weight: 800; color: var(--blue-dark); background: var(--blue-soft); padding: 3px 10px; border-radius: 999px; letter-spacing: 0.02em; }
.question-hint:empty { display: none; }
/* A tick on the face of a child who has answered. */
.roster li .avatar { position: relative; }
.roster li[data-pick="answered"] .avatar::before { content: "✓"; position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; background: var(--green-dark); border: 2px solid #fff; border-radius: 50%; z-index: 1; }
.roster-pick:empty, .roster-choices:empty { display: none; }

/* Quick look: tap a question to see it in full; Expand for a closer look. */
.sp-expand { flex: none; width: 38px; height: 38px; padding: 0; min-height: 0; border-radius: 12px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; font-size: 18px; }
.sp-expand:hover, .sp-expand[aria-pressed="true"] { background: var(--blue-soft); border-color: var(--blue-line); }
.sp-panel.expanded { width: min(1100px, 100%); }
.pv-question { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; position: relative; padding-right: 36px; }
.pv-question:hover { border-color: var(--blue-line); }
.pv-question::after { content: "›"; position: absolute; right: 14px; top: 8px; font-size: 22px; color: #c9bda4; transition: transform 0.15s ease; }
.pv-question.open::after { transform: rotate(90deg); color: var(--blue); }
.pv-question.open { border-color: var(--blue-line); box-shadow: var(--shadow-s); }
.pv-question.open > .pv-cards, .pv-question.open > .pv-picture { display: none; }
.pv-full { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; cursor: default; }
.pv-full-picture { max-width: min(100%, 360px); max-height: 240px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.pv-full-cards { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.pv-full-cards .answer-card { cursor: default; }
.sp-panel.expanded .pv-questions { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); align-items: start; }
@media (max-width: 640px) { .sp-expand { display: none; } }

/* The lesson screen: the title and Teach at the top, questions as cards,
   one question open in the side panel. */
.lesson-editor.doc-view { gap: 10px; padding: 0 0 40px; }
.le-body { display: flex; flex-direction: column; gap: 14px; padding: 0 12px; }
.le-body .about-lesson { margin: 0; }
.teach-lesson { display: inline-flex; align-items: center; gap: 6px; }
.questions-head { margin-top: 4px; }
.questions-head[hidden] { display: none; }
.questions-head h3 { margin: 0; font-size: 18px; }
.le-status:empty { display: none; }
.lesson-q { border-left-color: var(--blue); }
.lesson-q.current { border-color: var(--blue-line); box-shadow: 0 0 0 2px var(--blue-line); }
.lesson-q .q-number { color: var(--blue-dark); }
.lesson-q .q-thumb.blank { color: var(--blue-dark); background: var(--blue-soft); }
.lesson-q .q-open > .icon-wrap { flex: none; color: #c9bda4; }
.lesson-q .q-open:hover > .icon-wrap { color: var(--blue); }
.q-note { font-size: 13px; color: var(--muted); font-style: italic; }
.le-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 16px; background: var(--paper); border: 2px dashed var(--blue-line); border-radius: var(--radius-l); }
.le-empty[hidden] { display: none; }
.le-empty-title { margin: 0; font-size: 20px; font-weight: 800; }
.le-starts { width: 100%; max-width: 760px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.le-start { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; min-height: 0; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s); font-weight: 400; }
.le-start:hover { border-color: var(--blue-line); box-shadow: var(--shadow); transform: translateY(-1px); }
.le-start svg { color: var(--blue); margin-bottom: 4px; }
.le-start .menu-title { font-weight: 800; font-size: 16px; }
.le-start .menu-sub { font-size: 13px; color: var(--muted); }
.le-editor { display: flex; flex-direction: column; gap: 16px; }
.le-field { display: flex; flex-direction: column; gap: 8px; }
.le-label { margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.le-editor .planned-picture { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.le-editor .planned-picture img { max-width: 100%; max-height: 220px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.le-editor .answer-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.le-editor .answers-hint:empty { display: none; }
.le-editor .answers-hint { margin: 0; }
.le-editor .planned-answer-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.le-editor .add-answer { display: flex; gap: 8px; flex: 1 1 220px; }
.le-editor .add-answer input { flex: 1; min-width: 0; }
.le-more summary { cursor: pointer; font-size: 14px; color: var(--muted); font-weight: 700; }
.le-more .grid-slot { margin-top: 8px; }
.sp-actions .icon-button { width: 40px; padding: 0; justify-content: center; }
.le-upload { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 14px; }
@media (max-width: 560px) {
  .doc-actions { width: 100%; justify-content: flex-end; }
  .sp-actions { flex-wrap: wrap; }
}

/* The header's title and author: plain text until tapped. Beats the general
   input style and the older book-screen rules. */
.doc-titles .doc-title, .doc-titles .doc-sub { flex: none; width: 100%; min-height: 0; margin-left: -10px; border: 1px solid transparent; background: transparent; box-shadow: none; }
.doc-titles .doc-title { font-size: 24px; font-weight: 800; padding: 4px 10px; border-radius: 10px; }
.doc-titles .doc-sub { font-size: 15px; padding: 2px 10px; border-radius: 8px; color: var(--muted); }
.doc-titles .doc-title:hover, .doc-titles .doc-sub:hover { border-color: var(--line); }
.doc-titles .doc-title:focus, .doc-titles .doc-sub:focus { border-color: var(--blue-line); background: #fff; outline: none; }
.sp-actions .icon-button { height: 40px; min-height: 40px; font-size: 17px; }

/* ======================================================================
   Teaching a lesson: one bar on top with its steps, one stage below
   (picture left, question and cards right), one row of actions.
   ====================================================================== */

/* A class uses the width of the screen. */
.page:has(> #view-class:not([hidden])) { max-width: 1280px; }

.teacher-view.in-lesson .teach-layout { grid-template-columns: minmax(0, 1fr); }
.teacher-view.in-lesson .composer:not(:focus-within) .composer-chips,
.teacher-view.in-lesson .composer:not(:focus-within) .composer-more { display: none; }

.lesson-strip { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-s); }
.ls-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ls-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--blue-soft); color: var(--blue-dark); }
.ls-titles { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ls-titles .lesson-title { font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.ls-top .stop-lesson { color: var(--muted); }
.ls-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ls-step { width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; font-size: 15px; font-weight: 800; background: var(--paper); color: var(--muted); border: 2px solid var(--line); box-shadow: none; }
.ls-step:hover { border-color: var(--blue-line); color: var(--blue-dark); }
.ls-step:active { transform: none; }
.ls-step.done { background: var(--green-soft); border-color: #b8e8ad; color: var(--green-dark); }
.ls-step.selected { background: #fff; border-color: var(--blue); color: var(--blue-dark); box-shadow: 0 0 0 3px var(--blue-soft); }
.ls-step.live { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 3px var(--blue-soft); }

/* Up next: the stage when nothing is being asked. */
.teach-main .lesson-next { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; margin: 0; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow); }
.teach-main .lesson-next:has(.ln-picture:not([hidden])) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ln-picture { width: 100%; max-height: 380px; object-fit: contain; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.ln-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.teach-main .lesson-next-label { font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue-dark); }
.teach-main .lesson-next-question { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.teach-main .ask-lesson { font-size: 18px; padding: 14px 28px; margin-top: 6px; }
/* Under a question that's being asked: a slim bar. */
.teach-main .lesson-next.slim { display: flex; align-items: center; padding: 10px 14px; box-shadow: none; background: var(--blue-soft); border-color: var(--blue-line); order: 2; }
.teach-main .lesson-next.slim .ln-text { flex: 1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.teach-main .lesson-next.slim .lesson-next-question { flex: 1 1 240px; font-size: 17px; }
.teach-main .lesson-next.slim .ask-lesson { margin: 0; font-size: 15px; padding: 9px 18px; }
.teach-main .live-question { order: 1; }
.teach-main .lesson-strip { order: 0; }
.teach-main .no-question { order: 1; }
.teach-main .roster-head, .teach-main .roster { order: 3; }

/* The question: with a picture, picture on the left and the rest beside it. */
@media (min-width: 760px) {
  .live-question.has-picture { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "top top" "pic text" "pic hint" "pic grid" "res res"; column-gap: 22px; row-gap: 12px; align-items: start; }
  .live-question.has-picture .asked { display: contents; }
  .live-question.has-picture .asked-top { grid-area: top; }
  .live-question.has-picture .asked-text { grid-area: text; margin: 0; }
  .live-question.has-picture .question-picture { grid-area: pic; width: 100%; max-width: 100%; max-height: 420px; margin: 0; }
  .live-question.has-picture .math-slot { grid-area: hint; }
  .live-question.has-picture .question-hint { grid-area: hint; }
  .live-question.has-picture .answer-grid { grid-area: grid; padding-top: 0; }
  .live-question.has-picture .results { grid-area: res; }
}
.live-question .answer-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.live-question .answer-grid.few { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.live-question .answer-grid .answer-card { min-height: 0; aspect-ratio: auto; padding: 14px 8px; }
.live-question.has-picture .answer-grid.few .answer-card .emoji { font-size: 56px; }

/* One row: how many answered, then the buttons, always in reach. */
.teacher-view .results { position: sticky; bottom: 10px; z-index: 4; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; box-shadow: var(--shadow); }
.teacher-view .results .answered-summary { flex: none; font-size: 15px; }
.teacher-view .results .progress { flex: 1 1 120px; min-width: 100px; }
.teacher-view .results .question-actions { flex: none; margin-left: auto; }
.teacher-view .results .question-actions .repeat-button { order: -1; }
.teacher-view .results .next-up { display: none; }

/* Students: a row of faces. */
.teach-main .roster { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.teach-main .roster li { padding: 5px 12px 5px 5px; border-radius: 999px; gap: 8px; box-shadow: none; }
.teach-main .roster .avatar { width: 30px; height: 30px; font-size: 13px; }
.teach-main .roster-name { font-size: 14px; }
.teach-main .roster-head { align-items: center; }
.teach-main .roster-title { font-size: 15px; }

/* All questions, in the side panel. */
.ls-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ls-row { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; min-height: 0; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; font-weight: 400; }
.ls-row:hover { border-color: var(--blue-line); }
.ls-row.selected { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.ls-row-number { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue-dark); font-weight: 800; font-size: 13px; }
.ls-row.live .ls-row-number { background: var(--blue); color: #fff; }
.ls-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ls-row-question { font-weight: 700; font-size: 16px; }
.ls-row-meta { font-size: 13px; color: var(--muted); }
.ls-row-meta:empty { display: none; }
.ls-titles .lesson-title { flex: none; }
@media (min-width: 760px) {
  .live-question.has-picture { grid-template-rows: auto auto auto 1fr auto; }
}

/* ======================================================================
   Student: a book's page is big -- the class needs to see it.
   ====================================================================== */
.student-question .question-picture { cursor: zoom-in; }
.class-view.has-picture .student-question .question-picture { width: 100%; max-width: 100%; max-height: 52vh; object-fit: contain; margin: 0 0 12px; border-radius: 18px; border: 2px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.class-view.has-picture .student-question .question-text { font-size: 26px; }
/* Wide screens (an iPad on its side, a laptop, a smartboard): the page on
   the left, as tall as the screen allows; the question and cards beside it. */
@media (min-width: 820px) and (orientation: landscape) {
  .page:has(> #view-class:not([hidden])) { max-width: 1400px; }
  .class-view.has-picture:not(.teacher-view) { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "head head" "pic text" "pic grid" "pic status"; column-gap: 24px; align-items: start; }
  .class-view.has-picture:not(.teacher-view) > .view-header { grid-area: head; }
  .class-view.has-picture:not(.teacher-view) > .student-question { display: contents; }
  .class-view.has-picture:not(.teacher-view) .question-picture { grid-area: pic; max-height: calc(100vh - 110px); margin: 0 0 0 12px; position: sticky; top: 12px; }
  .class-view.has-picture:not(.teacher-view) .question-text { grid-area: text; margin: 0 12px 0 0; }
  .class-view.has-picture:not(.teacher-view) .math-slot { grid-area: text; }
  .class-view.has-picture:not(.teacher-view) > .answer-grid { grid-area: grid; margin: 12px 12px 0 0; }
  .class-view.has-picture:not(.teacher-view) > .pick-status { grid-area: status; margin: 8px 12px 0 0; }
}
.picture-zoom { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(20, 18, 14, 0.85); cursor: zoom-out; }
.picture-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; background: #fff; }

/* ======================================================================
   Teacher class screen, redesigned: one top line (class + tabs), the stage
   on the left, a rail on the right with the lesson and the students.
   ====================================================================== */
.teacher-view { gap: 12px; }
.class-top { display: flex; align-items: center; gap: 12px; padding: 12px 12px 4px; flex-wrap: wrap; }
.class-top-title { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; }
.class-top-title .class-name { margin: 0; font-size: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-top .connection { margin: 0; display: inline-flex; }
.class-top .tabs { margin: 0; align-self: center; }
.teacher-view .tab-panel { padding: 0 12px; }

.teacher-view .teach-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; align-items: start; }
@media (min-width: 900px) {
  .teacher-view .teach-layout, .teacher-view.in-lesson .teach-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .teach-rail { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
}
.teacher-view .teach-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.teacher-view .teach-main > * { margin: 0; }
.teacher-view .live-status:empty, .teacher-view .live-error:empty { display: none; }
.teacher-view .composer { margin: 0; }
.teacher-view .lesson-next { order: 0; }
.teacher-view .lesson-next.slim { order: 2; }
.teacher-view .live-question, .teacher-view .no-question { order: 1; }

.teach-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rail-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-s); }
.rail-title { margin: 0; font-size: 16px; font-weight: 800; }
.rail-card .lesson-picker, .rail-card .lesson-running { display: flex; flex-direction: column; gap: 10px; }
.rail-card .lesson-picker[hidden], .rail-card .lesson-running[hidden] { display: none; }
.rail-card .lesson-picker ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lesson-running .lesson-title { margin: -4px 0 0; font-size: 19px; font-weight: 800; line-height: 1.25; flex: none; overflow-wrap: anywhere; }
.lr-progress { display: flex; align-items: center; gap: 10px; }
.lr-bar { flex: 1; height: 8px; border-radius: 999px; background: #f3ead8; overflow: hidden; }
.lr-fill { height: 100%; border-radius: 999px; background: var(--green); transition: width 0.3s ease; }
.lr-count { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); }
.lr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; }
.lr-row { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; min-height: 0; text-align: left; background: none; color: var(--ink); border: 1px solid transparent; border-radius: 12px; box-shadow: none; font-weight: 400; }
.lr-row:hover { background: var(--paper); border-color: var(--line); }
.lr-row:active { transform: none; }
.lr-number { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 800; background: var(--paper); color: var(--muted); border: 2px solid var(--line); }
.lr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lr-question { font-size: 15px; font-weight: 600; line-height: 1.3; }
.lr-meta { font-size: 12px; font-weight: 700; color: var(--muted); }
.lr-meta:empty { display: none; }
.lr-row.done .lr-number { background: var(--green-soft); border-color: #b8e8ad; color: var(--green-dark); }
.lr-row.done .lr-question { color: var(--muted); }
.lr-row.selected { background: var(--blue-soft); border-color: var(--blue-line); }
.lr-row.selected .lr-number { border-color: var(--blue); color: var(--blue-dark); background: #fff; }
.lr-row.selected .lr-meta { color: var(--blue-dark); }
.lr-row.live { background: var(--blue-soft); border-color: var(--blue); }
.lr-row.live .lr-number { background: var(--blue); border-color: var(--blue); color: #fff; }
.lr-row.live .lr-meta { color: var(--blue-dark); }
.lr-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.lr-actions button { flex: 1 1 auto; }

.students-card .roster-head { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.students-card .show-answers { font-size: 13px; color: var(--muted); font-weight: 600; }
.students-card .online-summary { margin: 0; }
.students-card .online-summary:empty { display: none; }
.teacher-view .students-card .roster { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.teacher-view .students-card .roster li { padding: 5px 10px 5px 5px; border-radius: 999px; gap: 8px; box-shadow: none; font-size: 14px; }
.teacher-view .students-card .roster .avatar { width: 28px; height: 28px; font-size: 12px; }
.teacher-view .students-card .roster-meta:has(.roster-pick:empty):has(.roster-choices:empty) { display: none; }

/* The idle stage: a calm, roomy welcome. */
.teacher-view .idle-stage { padding: 36px 24px; text-align: center; align-items: center; }
.teacher-view .idle-actions { justify-content: center; }
.class-view.has-picture:not(.teacher-view) > .pick-status { align-self: start; position: static; }
.class-view.has-picture:not(.teacher-view) .question-text { font-size: 30px; }
.rail-card .lesson-picker { padding: 0; border: 0; background: none; box-shadow: none; }
.teacher-view .students-card .roster li[data-pick="answered"] .avatar::before { right: -7px; top: -7px; width: 16px; height: 16px; font-size: 10px; }
@media (min-width: 820px) and (orientation: landscape) {
  .class-view.has-picture:not(.teacher-view) { grid-template-rows: auto auto auto 1fr; }
}

/* ======================================================================
   Lesson panel, round 2: the ways out on top; questions told apart by
   their pictures, one line each.
   ====================================================================== */
.lr-head { display: flex; align-items: center; gap: 12px; }
.lr-cover { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: var(--blue-soft); color: var(--blue-dark); border: 1px solid var(--line); }
.lr-cover img { width: 100%; height: 100%; object-fit: cover; }
.lr-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lr-titles .lesson-title { margin: 0; font-size: 17px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lr-actions, .rail-card .lr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; }
.lr-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 0; padding: 10px 10px; font-size: 14px; font-weight: 800; border-radius: 12px; background: var(--blue-soft); color: var(--blue-dark); border: 1px solid var(--blue-line); box-shadow: none; }
.lr-action:hover { background: #dcebfb; }
.lr-action.lr-end { background: #fdecec; color: #b3261e; border-color: #f5c6c2; }
.lr-action.lr-end:hover { background: #fbdcdc; }
.lr-progress { gap: 8px; }
.lr-count { font-size: 12px; }

.lr-list { gap: 2px; }
.lr-row { align-items: center; gap: 10px; padding: 5px 8px 5px 5px; }
.lr-pic { position: relative; flex: none; width: 44px; height: 34px; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.lr-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lr-pic .lr-number { position: relative; width: auto; height: auto; border: 0; background: none; font-size: 13px; font-weight: 800; color: var(--muted); }
.lr-pic img + .lr-number { position: absolute; left: 2px; bottom: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 6px; font-size: 10px; background: rgba(255, 255, 255, 0.92); color: var(--ink); display: grid; place-items: center; }
.lr-question { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-tag { flex: none; font-size: 11px; font-weight: 800; color: var(--muted); }
.lr-tag:empty { display: none; }
.lr-row.done { opacity: 0.55; }
.lr-row.done .lr-pic { border-color: #b8e8ad; }
.lr-row.done .lr-number { color: var(--green-dark); }
.lr-row.selected .lr-question, .lr-row.live .lr-question { white-space: normal; font-weight: 800; }
.lr-row.selected .lr-pic { border: 2px solid var(--blue); }
.lr-row.selected .lr-tag { color: #fff; background: var(--blue); padding: 2px 8px; border-radius: 999px; }
.lr-row.live .lr-pic { border: 2px solid var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.lr-row.live .lr-tag { color: #fff; background: var(--green-dark); padding: 2px 8px; border-radius: 999px; }
.lr-row.live .lr-number, .lr-row.selected .lr-number { color: var(--blue-dark); }

/* Lessons to start: a cover and a colour for each kind. */
.side-lesson { padding: 8px 10px 8px 8px; }
.side-lesson-cover { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: var(--blue-soft); color: var(--blue-dark); }
.side-lesson-cover img { width: 100%; height: 100%; object-fit: cover; }
.side-lesson[data-kind="book"] .side-lesson-cover { background: var(--coral-soft); color: var(--coral-dark); }
.side-lesson[data-kind="worksheet"] .side-lesson-cover { background: var(--teal-soft); color: var(--teal-dark); }
.side-lesson[data-kind="book"] .side-lesson-meta { color: var(--coral-dark); }
.side-lesson[data-kind="worksheet"] .side-lesson-meta { color: var(--teal-dark); }
.side-lesson-meta { font-size: 12px; font-weight: 700; }
.lr-action { white-space: nowrap; font-size: 13px; padding: 10px 6px; }

/* Change and End lesson on the class's top line, apart from the tabs. */
.class-top .lesson-controls { display: flex; gap: 8px; margin-left: auto; }
.class-top .lesson-controls[hidden] { display: none; }
.class-top .lesson-controls + .tabs { margin-left: 8px; }
.class-top .lesson-controls .lr-action { padding: 10px 14px; font-size: 14px; }
@media (max-width: 700px) {
  .class-top .lesson-controls { order: 3; width: 100%; margin-left: 0; }
  .class-top .lesson-controls .lr-action { flex: 1; }
  .class-top .lesson-controls + .tabs { margin-left: 0; }
}
/* The number over a question's picture: no coloured disc behind it. */
.lr-row.live .lr-pic .lr-number, .lr-row.selected .lr-pic .lr-number, .lr-row.done .lr-pic .lr-number { background: none; border: 0; box-shadow: none; width: auto; height: auto; }
.lr-row.live .lr-pic img + .lr-number, .lr-row.selected .lr-pic img + .lr-number, .lr-row.done .lr-pic img + .lr-number { background: rgba(255, 255, 255, 0.92); }

/* ======================================================================
   Word boards
   ====================================================================== */
.word-board { display: grid; grid-template-columns: repeat(var(--board-columns, 6), minmax(0, 1fr)); gap: 6px; }
.wb-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px;
  aspect-ratio: 1 / 1; min-width: 0; min-height: 0; padding: 6px 4px 5px; margin: 0;
  background: var(--cell-colour, #fff); color: var(--ink);
  border: 3px solid var(--cell-edge, var(--line)); border-radius: 12px; box-shadow: none;
  font-weight: 800; text-align: center; overflow: hidden;
}
button.wb-cell { cursor: pointer; }
button.wb-cell:hover { filter: brightness(0.97); }
button.wb-cell:active { transform: scale(0.97); }
.wb-cell.empty { background: transparent; border: 2px dashed var(--line); }
.wb-picture { flex: 1; min-height: 0; width: 100%; object-fit: contain; border-radius: 8px; background: #fff; }
.wb-emoji { flex: 1; min-height: 0; display: grid; place-items: center; font-size: clamp(20px, 4vw, 44px); line-height: 1; }
.wb-label { flex: none; max-width: 100%; font-size: clamp(11px, 1.4vw, 17px); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-add { font-size: 26px; color: #c9bda4; margin: auto; }
.wb-cell.spoken { animation: wb-spoken 0.5s ease; }
@keyframes wb-spoken { 0% { transform: scale(1); } 40% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(71, 141, 219, 0.35); } 100% { transform: scale(1); } }

/* The editor. */
.board-view .bv-step { display: flex; flex-direction: column; gap: 14px; padding: 0 12px; }
.bv-step[hidden], .bv-edit[hidden] { display: none; }
.bv-step-title { margin: 0; font-size: 20px; font-weight: 800; }
.bv-from-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.bv-from-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px; min-height: 0; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-s); font-size: 17px; font-weight: 800; }
.bv-from-card:hover { border-color: var(--blue-line); box-shadow: var(--shadow); transform: translateY(-1px); }
.bv-from-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--blue-soft); color: var(--blue-dark); }
.bv-from-card.kind-book .bv-from-icon { background: var(--coral-soft); color: var(--coral-dark); }
.bv-from-card.kind-worksheet .bv-from-icon { background: var(--teal-soft); color: var(--teal-dark); }
.bv-sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.bv-sizes .chip.selected { background: var(--blue); color: #fff; border-color: var(--blue); }
.bv-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.bv-option { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px; min-height: 0; text-align: left; background: #fff; color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-s); font-weight: 400; }
.bv-option:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.bv-preview { gap: 3px; margin-bottom: 4px; pointer-events: none; }
.bv-preview .wb-cell { border-width: 2px; border-radius: 6px; padding: 2px; }
.bv-preview .wb-emoji { font-size: 16px; }
.bv-preview .wb-label { font-size: 8px; }
.bv-option-title { font-size: 16px; font-weight: 800; }
.bv-option-sub { font-size: 13px; color: var(--muted); }
.board-view .bv-edit { display: flex; flex-direction: column; gap: 12px; padding: 0 12px; }
.bv-lesson-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.bv-lesson { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--ink); max-width: 260px; }
.bv-progress:empty, .board-view .bv-working:empty, .board-view .bv-error:empty { display: none; }
.board-view .bv-working { padding: 24px 12px; font-size: 17px; font-weight: 700; color: var(--ink); text-align: center; }
.bv-sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 16px; box-shadow: var(--shadow-s); }
.bv-sheet-title { margin: 0 0 12px; font-size: 20px; text-align: center; }
.bv-legend { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.bv-legend-item { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--cell-colour); border: 2px solid var(--cell-edge); }
.bv-tools { display: flex; justify-content: space-between; gap: 12px; }
.bv-cell-form { display: flex; flex-direction: column; gap: 8px; }
.bv-cell-form input { font-size: 18px; font-weight: 700; }
.bv-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.bv-group { min-height: 0; padding: 6px 12px; font-size: 13px; font-weight: 800; color: var(--ink); background: var(--cell-colour); border: 2px solid var(--cell-edge); border-radius: 999px; box-shadow: none; }
.bv-group.selected { box-shadow: 0 0 0 3px rgba(43, 42, 51, 0.25); }
.bv-cell-picture { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.bv-cell-preview { width: 130px; flex: none; }
.bv-cell-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pv-board { margin-top: 4px; }
.library-row[data-type="board"] > .icon-wrap:first-child { background: var(--sun-soft); color: #8a6d12; }
.side-lesson[data-kind="board"] .side-lesson-cover { background: var(--sun-soft); color: #8a6d12; }

/* Printing: only the board, as big as the page allows. */
@media print {
  body.printing-board { background: #fff !important; }
  body.printing-board * { visibility: hidden; }
  body.printing-board .bv-sheet, body.printing-board .bv-sheet * { visibility: visible; }
  body.printing-board .bv-sheet { position: absolute; left: 0; top: 0; width: 100%; border: 0; box-shadow: none; padding: 0; }
  body.printing-board .wb-cell { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-board .wb-cell.empty { border-color: transparent; }
  body.printing-board .wb-add { display: none; }
  body.printing-board .wb-label { font-size: 14pt; }
  body.printing-board .wb-emoji { font-size: 34pt; }
  body.printing-board .bv-legend-item { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* In class: the teacher's button, and the board big for the smartboard. */
.class-top .board-toggle { padding: 10px 14px; font-size: 14px; background: var(--sun-soft); color: #7a5f0c; border-color: #f0dc8c; }
.class-top .board-toggle.on { background: #fff1a8; border-color: #e2c43a; box-shadow: 0 0 0 3px rgba(242, 194, 48, 0.25); }
.class-top .board-toggle + .lesson-controls { margin-left: 8px; }
.class-top .board-toggle { margin-left: auto; }
.class-top .lesson-controls { margin-left: 8px; }
.board-overlay { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; background: var(--cream); overflow: auto; }
.bo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bo-title { margin: 0; flex: 1 1 200px; font-size: 24px; }
.bo-note { font-size: 13px; color: var(--muted); font-weight: 700; }
.board-overlay .bo-grid { flex: 1; min-height: 0; align-content: center; width: min(100%, calc((100vh - 110px) * var(--board-columns) / var(--board-rows))); margin: 0 auto; gap: 8px; }
.board-overlay .wb-label { font-size: clamp(13px, 1.8vw, 24px); }
.board-overlay .wb-emoji { font-size: clamp(28px, 5vw, 64px); }

/* Students: the board while waiting, and a Words button during a question. */
.student-board { margin: 0 12px; }
.class-view.with-board .waiting { padding-top: 4px; }
.class-view.with-board .waiting .mascot-halo, .class-view.with-board .waiting .hint { display: none; }
.class-view.with-board .waiting .waiting-text { font-size: 18px; }
.words-button { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20; padding: 14px 22px; font-size: 18px; border-radius: 999px; background: #fff1a8; color: #5a4608; border: 3px solid #e2c43a; box-shadow: var(--shadow-l); }
/* The whole board in view while editing. */
.bv-sheet .word-board { width: min(100%, calc((100vh - 250px) * var(--board-columns) / var(--board-rows))); margin: 0 auto; }
.student-board .word-board { width: min(100%, calc((100vh - 200px) * var(--board-columns) / var(--board-rows))); margin: 0 auto; }

/* ======================================================================
   Word boards, round 2: square cells on square boards, editing on the board
   (drag, ✕, +), where each picture came from, and a branded sheet.
   ====================================================================== */
.word-board { grid-template-rows: repeat(var(--board-rows, 5), minmax(0, 1fr)); }
.wb-cell { aspect-ratio: 1 / 1; }
.word-board.editable .wb-cell:not(.empty) { touch-action: none; cursor: grab; }
.wb-remove { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #b3261e; font-size: 11px; font-weight: 900; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); opacity: 0; transition: opacity 0.12s ease; cursor: pointer; }
.wb-cell:hover .wb-remove, .wb-cell:focus-visible .wb-remove { opacity: 1; }
@media (hover: none) { .wb-remove { opacity: 1; } }
.wb-pending { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: var(--blue-dark); background: rgba(255, 255, 255, 0.95); padding: 1px 7px; border-radius: 999px; animation: wb-pulse 1.2s ease-in-out infinite; white-space: nowrap; }
@keyframes wb-pulse { 50% { opacity: 0.45; } }
.wb-cell.dragging { opacity: 0.35; }
.wb-cell.drop-target { outline: 3px dashed var(--blue); outline-offset: 2px; }
.wb-ghost { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; opacity: 0.92; box-shadow: var(--shadow-l); transform-origin: center; }
.wb-legend-item { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--cell-colour); border: 2px solid var(--cell-edge); color: var(--ink); }

.bv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.bv-size-slot { display: flex; gap: 6px; flex-wrap: wrap; }
.bv-size-slot .chip.selected { background: var(--blue); color: #fff; border-color: var(--blue); }
.bv-pictures { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-dark); font-size: 14px; font-weight: 700; }
.bv-pictures:empty { display: none; }
.bv-help { text-align: center; }
.bv-source { margin: 0; font-size: 13px; font-weight: 800; color: var(--muted); }
.bv-moves { display: flex; gap: 6px; }
.bv-moves .icon-button { width: 44px; height: 44px; min-height: 0; padding: 0; font-size: 18px; }

/* The sheet: looks the same on screen and on paper. */
.bv-sheet { display: flex; flex-direction: column; gap: 12px; }
.bv-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 3px solid var(--sun); }
.bv-logo { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--sun-soft); display: grid; place-items: center; overflow: hidden; }
.bv-logo img { width: 40px; height: 40px; object-fit: contain; }
.bv-sheet-titles { flex: 1; min-width: 0; text-align: center; }
.bv-sheet-titles .bv-sheet-title { margin: 0; font-size: 22px; }
.bv-sheet-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); font-weight: 700; }
.bv-sheet-sub:empty { display: none; }
.bv-wordmark { flex: none; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: var(--blue-dark); }
.bv-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
.bv-sheet-foot .bv-legend { margin: 0; justify-content: flex-start; }
.bv-made { font-size: 12px; font-weight: 800; color: var(--muted); }
.bv-sheet .word-board { width: min(100%, calc((100vh - 330px) * var(--board-columns) / var(--board-rows))); }

@media print {
  body.printing-board .bv-sheet { display: flex; height: 100vh; padding: 0; gap: 6mm; }
  body.printing-board .bv-sheet .word-board { width: min(100%, calc((100vh - 42mm) * var(--board-columns) / var(--board-rows))); margin: 0 auto; }
  body.printing-board .bv-brand, body.printing-board .bv-logo, body.printing-board .bv-legend-item, body.printing-board .wb-legend-item { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-board .wb-remove, body.printing-board .wb-pending { display: none !important; }
  body.printing-board .bv-sheet-title { font-size: 20pt; }
}
/* Labels size themselves to their square, so "caterpillar" fits whole. */
.wb-cell { container-type: inline-size; }
.wb-label { font-size: clamp(9px, 13cqw, 26px); white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; }
.wb-emoji { font-size: clamp(18px, 38cqw, 72px); }
.bv-preview .wb-label { font-size: 7px; }
.bv-preview .wb-emoji { font-size: 14px; }

/* Create menu: an icon beside each kind, in that kind's colour. */
#create-menu button[data-create] { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; align-items: center; }
#create-menu button[data-create] > .icon-wrap { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--blue-soft); color: var(--blue-dark); }
#create-menu button[data-create="book"] > .icon-wrap { background: var(--coral-soft); color: var(--coral-dark); }
#create-menu button[data-create="worksheet"] > .icon-wrap { background: var(--teal-soft); color: var(--teal-dark); }
#create-menu button[data-create="board"] > .icon-wrap { background: var(--sun-soft); color: #8a6d12; }

/* Moving words: grab to drag, or pick a square after "Move to another square". */
.word-board.editable .wb-cell { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.word-board.is-dragging .wb-cell:not(.dragging) { transition: transform 0.12s ease; }
.wb-cell.drop-target { outline: 4px solid var(--blue); outline-offset: 2px; transform: scale(1.04); }
.word-board.moving .wb-cell { cursor: pointer; }
.word-board.moving .wb-cell:not(.move-source):hover { outline: 4px solid var(--blue); outline-offset: 2px; }
.wb-cell.move-source { outline: 4px dashed var(--blue); outline-offset: 2px; opacity: 0.6; }
.bv-moving { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 800; position: sticky; top: 8px; z-index: 5; }
.bv-moving[hidden] { display: none; }
.bv-moving .link-button { color: #fff; text-decoration: underline; }

/* The sheet is a page: portrait for square boards, and the board takes its
   whole width. The brand is a thin strip above and below. */
.bv-sheet { width: min(100%, 780px); margin: 0 auto; padding: 22px 24px; gap: 12px; }
.bv-sheet[data-shape="portrait"] { aspect-ratio: 210 / 297; }
.bv-sheet[data-shape="landscape"] { width: min(100%, 1040px); aspect-ratio: 297 / 210; }
.bv-sheet .word-board, .bv-sheet[data-shape] .word-board { width: 100%; margin: 0; gap: 8px; }
.bv-sheet[data-shape="landscape"] .word-board { width: min(100%, calc((min(100vw, 1040px) * 210 / 297 - 120px) * var(--board-columns) / var(--board-rows))); margin: 0 auto; }
.bv-brand { gap: 10px; padding-bottom: 8px; border-bottom-width: 2px; }
.bv-logo { width: 34px; height: 34px; }
.bv-logo img { width: 30px; height: 30px; }
.bv-sheet-titles .bv-sheet-title { font-size: 20px; }
.bv-wordmark { font-size: 16px; }
.bv-sheet-foot { padding-top: 6px; margin-top: auto; }
.bv-sheet .wb-cell { border-width: 3px; border-radius: 10px; padding: 5% 4% 4%; }

@media print {
  body.printing-board .bv-sheet, body.printing-board .bv-sheet[data-shape] { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: auto; padding: 0; margin: 0; border: 0; box-shadow: none; gap: 3mm; display: flex; flex-direction: column; }
  body.printing-board .bv-brand { padding-bottom: 2mm; }
  body.printing-board .bv-logo { width: 9mm; height: 9mm; }
  body.printing-board .bv-logo img { width: 8mm; height: 8mm; }
  body.printing-board .bv-sheet-title { font-size: 15pt; }
  body.printing-board .bv-sheet-sub { font-size: 8pt; }
  body.printing-board .bv-wordmark { font-size: 11pt; }
  /* As big as the page allows: the full width, unless the height runs out. */
  body.printing-board .bv-sheet .word-board { width: min(100%, calc((100vh - 30mm) * var(--board-columns) / var(--board-rows))); margin: 0 auto; gap: 2mm; }
  body.printing-board .bv-sheet .wb-cell { border-width: 0.7mm; border-radius: 2.5mm; padding: 1.5mm 1mm 1mm; }
  body.printing-board .wb-label { font-size: clamp(8pt, 13cqw, 18pt); }
  body.printing-board .wb-emoji { font-size: clamp(16pt, 40cqw, 60pt); }
  body.printing-board .bv-sheet-foot { padding-top: 1.5mm; margin-top: 0; }
  body.printing-board .wb-legend-item { font-size: 7pt; padding: 0.5mm 2mm; border-width: 0.4mm; }
  body.printing-board .bv-made { font-size: 7pt; }
}

/* Tiles are buttons, but must not look or move like the app's buttons:
   no blue hover, no press nudge, and the dragged tile follows the pointer
   exactly (no easing), so a drag feels direct. */
.word-board .wb-cell, .word-board button.wb-cell:hover, .word-board button.wb-cell:active, .word-board button.wb-cell:focus {
  background: var(--cell-colour, #fff); box-shadow: none; transition: filter 0.12s ease, outline-color 0.12s ease;
}
.word-board button.wb-cell.empty:hover, .word-board button.wb-cell.empty:active { background: var(--paper); }
.word-board button.wb-cell:active { transform: none; }
.word-board.editable button.wb-cell:not(.empty):hover { filter: brightness(0.96); }
.wb-ghost { transition: none !important; will-change: transform; box-shadow: 0 14px 30px rgba(43, 42, 51, 0.28) !important; cursor: grabbing; border-radius: 12px; }
.word-board.is-dragging, .word-board.is-dragging * { cursor: grabbing !important; }
.bv-sheet, .bv-sheet * { -webkit-user-select: none; user-select: none; }
.wb-cell.drop-target { transform: none; outline: 4px solid var(--blue); outline-offset: 2px; filter: brightness(0.94); }

/* Swaps you can see: the word being displaced slides to the dragged tile's
   old square, the dragged tile glides into place, and both pulse once. */
.word-board .wb-cell.making-room { transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.12s ease; z-index: 2; filter: none; outline: 3px dashed var(--blue); outline-offset: 2px; }
.wb-ghost.landing { transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) !important; box-shadow: 0 4px 10px rgba(43, 42, 51, 0.18) !important; }
.word-board .wb-cell.sliding { z-index: 3; position: relative; }
.word-board .wb-cell.just-moved { animation: wb-moved 0.7s ease-out; z-index: 1; }
@keyframes wb-moved {
  0% { box-shadow: 0 0 0 0 rgba(71, 141, 219, 0.7); filter: brightness(1.08); }
  45% { box-shadow: 0 0 0 7px rgba(71, 141, 219, 0.35); }
  100% { box-shadow: 0 0 0 12px rgba(71, 141, 219, 0); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .word-board .wb-cell.making-room, .wb-ghost.landing, .word-board .wb-cell.sliding { transition: none !important; }
  .word-board .wb-cell.just-moved { animation: none; outline: 3px solid var(--blue); }
}