/*
  Spell Beasts for Schools: the teacher app (site/teach/).

  The same picture book as the children's app (base.css's paper, inks, Fraunces headings,
  Andika for every spelling word, hard offset undersides, never a blurred shadow), set
  calmer and denser for adults: a school exercise book. Classes are exercise-book covers
  with their label filled in; a class has index tabs; word lists sit on feint ruled lines
  with a margin; new words are reviewed on index cards; progress is a grid of eggs filling up.

  Desktop-first (1280px), fine at 390px. Focus is always visible (base.css :focus-visible).
  Text meets WCAG AA on every surface; --ink-faint is decoration only.
  Print: login cards (8 to an A4 page, with cut lines), test results and word lists.

  The second pass's shell (docs/TEACHER-UX.md sections 3, 6, 9 and 10) is at the end of this
  file: the header with its switcher and Me menu, the phone bottom bar, the class and School
  bars with their tabs, the toolbar and group chips, page heads, figure tiles, tables, the
  selection bar, menus, sheets, checklist, status list, What next?, levels, name and word
  chips, codes, Show on board, charts, placeholders and print basics. Packages style their
  own screens in teach-analytics.css (P1: wk- ch- nc- wd-), teach-classes.css (P2: kid- grp-
  su- lc- fam- cl-), teach-insights.css (P3: ins- ti- tt-) and teach-school.css (P4: sc- st-
  yr- hol- me- si-); the first-pass rules above stay until the integrator prunes them,
  because picker.js, review.js and testtab.js still use them.

  What this must never do: carry meaning in colour alone, hide focus, or let a page scroll
  sideways at 390px (only a table inside its own box may).
*/

:root {
  --t-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --t-maxw: 1200px;
  --t-feint: #BCD6E2;          /* exercise-book ruled lines */
  --t-margin: #EDA3C1;         /* the margin line */
  --t-radius: 12px;
  --t-gap: clamp(16px, 2.2vw, 24px);
  --t-under: 3px;
  --cover: var(--yolk);
  --cover-deep: var(--yolk-deep);
}

body.teach {
  font-family: var(--t-font);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--ink);
  background: var(--paper);
}
body.teach::after { opacity: 0.045; }

.teach h1 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
.teach h2 { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 800; }
.teach h3 { font-size: 1.0625rem; font-weight: 700; }
.teach h4 { margin: 0; font-size: 1rem; }
.teach ul, .teach ol { margin: 0; }
.teach a { color: var(--pond-deep); }
.teach :focus-visible { outline: 3px solid var(--pond); outline-offset: 2px; border-radius: 4px; }
.teach h1:focus, .teach h2:focus, .teach h3:focus, .teach [tabindex="-1"]:focus { outline: none; }
.teach code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.875em; }

.t-skip {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--paper-light);
  font-weight: 700; text-decoration: none;
}
.t-skip:focus { top: 12px; }

.t-noscript { max-width: 32rem; margin: 15vh auto; padding: 24px; text-align: center; }

/* ---------- words, the way children see them ---------- */

.t-word {
  font-family: var(--font-word);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  isolation: isolate;
}
.t-word--small { font-size: 1rem; }
.t-word--line { font-size: 1.25rem; }
.t-word--chip { font-size: 1.0625rem; }
mark.t-tricky {
  color: inherit;
  background: linear-gradient(to bottom, transparent 52%, var(--think) 52%, var(--think) 88%, transparent 88%);
  border-radius: 2px;
  padding: 0 0.02em;
}
.t-code-text {
  font-family: var(--font-word);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.t-break { overflow-wrap: anywhere; }

/* ---------- header ---------- */

.t-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px 20px;
  padding: 10px max(16px, calc((100vw - var(--t-maxw)) / 2)) 10px;
  background: var(--paper);
  border-bottom: 2px dashed var(--rule);
  min-height: 64px;
}
.t-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.t-brand-mark svg { display: block; }
.t-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.t-brand-name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-weight: 800;
  font-size: 1.25rem;
}
.t-brand-sub {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.t-nav { display: flex; gap: 4px; flex: 1 1 auto; }
.t-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
  border: 1.5px solid transparent;
}
.t-nav-link:hover { background: var(--paper-deep); }
.t-nav-link[aria-current="page"] {
  background: var(--paper-light);
  border-color: var(--ink);
  box-shadow: 0 2px 0 var(--paper-shade);
}
.t-me {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 6px 4px 12px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: right;
}
.t-me:hover { border-color: var(--ink); background: var(--paper-light); }
.t-me-name { display: flex; flex-direction: column; line-height: 1.2; }
.t-me-who { font-weight: 700; font-size: 0.9375rem; }
.t-me-school { font-size: 0.8125rem; color: var(--ink-soft); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- page ---------- */

.t-main {
  display: block;
  max-width: var(--t-maxw);
  margin: 0 auto;
  padding: 24px max(16px, env(safe-area-inset-left, 0px)) 64px;
  outline: none;
}
.t-screen { display: flex; flex-direction: column; gap: var(--t-gap); }
.t-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}
.t-page-head h1 { margin-top: 2px; }
.t-page-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.t-kicker {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.t-lede { color: var(--ink-soft); max-width: 62ch; margin-top: 6px; }
.t-hint { font-size: 0.875rem; color: var(--ink-soft); }
.t-label {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
}
.t-label-inline {
  display: inline-block;
  margin-right: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.t-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.t-stack { display: flex; flex-direction: column; gap: 14px; }
.t-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 14px;
}
.t-chip-static {
  display: inline-flex;
  align-items: center;
  padding: 1px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-light);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* a sheet of paper */
.t-sheet {
  position: relative;
  background: var(--paper-light);
  border: 1.5px solid var(--ink);
  border-radius: var(--t-radius);
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 var(--t-under) 0 var(--paper-shade);
}
.t-sheet > h2:first-child, .t-sheet > .t-section-head:first-child h2 { margin-bottom: 0; }
.t-sheet > h2:first-child { margin-bottom: 14px; }

/* exercise-book paper: feint ruled lines and a pink margin */
.t-ruled {
  --rule-gap: 36px;
  --margin-x: 44px;
  background-image:
    linear-gradient(90deg, transparent calc(var(--margin-x) - 1px), var(--t-margin) calc(var(--margin-x) - 1px), var(--t-margin) calc(var(--margin-x) + 1px), transparent calc(var(--margin-x) + 1px));
  background-color: var(--paper-light);
  padding-left: calc(var(--margin-x) + 18px);
}
/* the feint lines, on a list whose items are exactly one line high */
.t-lines {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rule-gap) - 1px), var(--t-feint) calc(var(--rule-gap) - 1px), var(--t-feint) var(--rule-gap));
  border-top: 1px solid var(--t-feint);
}

/* ---------- buttons ---------- */

.t-btn {
  --b-bg: var(--paper-light);
  --b-hover: var(--paper);
  --b-fg: var(--ink);
  --b-under: var(--paper-shade);
  --b-border: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 16px;
  border: 1.5px solid var(--b-border);
  border-radius: 10px;
  background: var(--b-bg);
  color: var(--b-fg);
  font: 650 0.9375rem/1.2 var(--t-font);
  text-decoration: none;
  box-shadow: 0 var(--t-under) 0 var(--b-under);
  cursor: pointer;
  transition: transform var(--t-micro) var(--out), box-shadow var(--t-micro) var(--out), background-color var(--t-micro);
  touch-action: manipulation;
  white-space: nowrap;
}
.t-btn:hover { background: var(--b-hover); }
.t-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--b-under); }
.t-btn:disabled, .t-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: 0 var(--t-under) 0 var(--b-under); }
.t-btn.is-busy { cursor: progress; opacity: 0.8; }
.t-btn.is-busy::after {
  content: "";
  width: 12px; height: 15px;
  border: 2px solid currentColor;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: t-wobble 1s ease-in-out infinite;
}
.t-btn--primary { --b-bg: var(--yolk); --b-hover: var(--yolk-hover); --b-under: var(--yolk-deep); }
.t-btn--go { --b-bg: var(--leaf); --b-hover: var(--leaf-hover); --b-fg: var(--paper-light); --b-under: var(--leaf-deep); }
.t-btn--pond { --b-bg: var(--pond); --b-hover: var(--pond-hover); --b-fg: var(--paper-light); --b-under: var(--pond-deep); }
.t-btn--danger { --b-fg: var(--think-ink); --b-border: var(--think-ink); --b-under: var(--think-light); --b-hover: var(--think-hover); }
.t-btn--quiet {
  --b-bg: transparent; --b-hover: var(--paper-deep);
  border-color: transparent;
  box-shadow: none;
  padding-inline: 10px;
  color: var(--ink);
}
.t-btn--quiet:active { box-shadow: none; transform: translateY(1px); }
.t-btn--quiet:disabled { box-shadow: none; }
.t-btn--small { min-height: 34px; padding: 4px 11px; font-size: 0.875rem; border-radius: 8px; --t-under: 2px; }
.t-btn--icon { padding: 0; width: 42px; min-width: 42px; }
.t-btn--icon.t-btn--small { width: 34px; min-width: 34px; }
.t-icon { display: inline-flex; flex: none; }
.t-icon svg { display: block; }

@media (pointer: coarse) {
  .t-btn { min-height: 46px; }
  .t-btn--small { min-height: 40px; }
  .t-btn--icon.t-btn--small { width: 40px; min-width: 40px; }
}

/* ---------- forms ---------- */

.t-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.t-field--inline { flex-direction: row; align-items: center; gap: 10px; }
.t-field--inline .t-label { font-size: 0.875rem; white-space: nowrap; }
.t-input, .t-textarea, .t-select {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: 400 1rem/1.4 var(--t-font);
}
.t-textarea { resize: vertical; min-height: 84px; }
.t-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%232A2633' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.t-field--inline .t-select, .t-field--inline .t-input { width: auto; min-width: 12rem; }
.t-input:hover, .t-textarea:hover, .t-select:hover { border-color: var(--ink); }
.t-input:focus, .t-textarea:focus, .t-select:focus { border-color: var(--pond); }
.t-input[aria-invalid="true"], .t-textarea[aria-invalid="true"] { border-color: var(--think-ink); background: #FFF7FA; }
.t-field--code .t-input {
  max-width: 13rem;
  font-family: var(--font-word);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.25em;
  text-align: center;
  padding-block: 6px;
}
.t-error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--think-ink);
  font-weight: 600;
  font-size: 0.9375rem;
}
.t-error::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--think-ink);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
}
.t-error[hidden] { display: none; }
.t-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9375rem; }
.t-check input { width: 20px; height: 20px; accent-color: var(--leaf); flex: none; margin: 0; }

.t-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--pond);
  background: var(--pond-light);
  font-size: 0.9375rem;
}
.t-note > .t-icon { margin-top: 2px; }
.t-note--ok { border-color: var(--leaf); background: var(--leaf-light); }
.t-note--warn { border-color: var(--yolk-deeper); background: var(--yolk-light); }
.t-note ul { padding-left: 18px; margin-top: 4px; }

.t-banner {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--yolk-deeper);
  background: var(--yolk-light);
  font-weight: 600;
}

/* switch */
.t-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1.5px dashed var(--rule);
}
.t-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.t-toggle-label { font-weight: 700; }
.t-toggle .t-error { grid-column: 1 / -1; }
.t-switch {
  padding: 4px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 999px;
}
.t-switch-track {
  display: block;
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--paper-deep);
  box-shadow: inset 0 2px 0 var(--paper-shade);
  transition: background-color var(--t-micro);
}
.t-switch-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--paper-light);
  border: 1.5px solid var(--ink);
  transition: transform var(--t-move) var(--spring);
}
.t-switch[aria-checked="true"] .t-switch-track { background: var(--leaf); box-shadow: none; }
.t-switch[aria-checked="true"] .t-switch-knob { transform: translateX(22px); }
.t-switch:disabled { cursor: progress; opacity: 0.7; }

/* segmented control */
.t-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--paper-deep);
  box-shadow: inset 0 2px 0 var(--paper-shade);
}
.t-seg-btn {
  min-height: 38px;
  padding: 6px 14px;
  border: 1.5px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font: 650 0.9375rem/1.2 var(--t-font);
  cursor: pointer;
}
.t-seg-btn:hover { background: var(--paper); }
.t-seg-btn[aria-selected="true"], .t-seg-btn[aria-pressed="true"] {
  background: var(--paper-light);
  border-color: var(--ink);
  box-shadow: 0 2px 0 var(--paper-shade);
}
.t-seg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.t-seg--small .t-seg-btn { min-height: 32px; padding: 4px 11px; font-size: 0.875rem; }

/* radio choice cards */
.t-choices { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.t-choices legend { margin-bottom: 8px; }
.t-choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.t-choice:has(input:checked) { border-color: var(--ink); background: var(--yolk-light); box-shadow: 0 2px 0 var(--yolk-deep); }
.t-choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.t-choice-body { display: flex; flex-direction: column; gap: 2px; }

/* badges */
.t-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1.5px solid var(--ink-soft);
  background: var(--paper-light);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.5;
}
.t-badge--builtin, .t-badge--approved { background: var(--leaf-light); border-color: var(--leaf-deep); color: var(--leaf-deep); }
.t-badge--review { background: var(--yolk-light); border-color: var(--yolk-deeper); }
.t-badge--writing, .t-badge--waiting, .t-badge--checking { background: var(--pond-light); border-color: var(--pond); color: var(--pond-deep); }
.t-badge--failed, .t-badge--blocked, .t-badge--warn { background: var(--think-light); border-color: var(--think-ink); color: var(--think-ink); }

/* tabs (index tabs on the class page) */
.t-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.t-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--ink);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--paper-deep);
  color: var(--ink);
  font: 650 0.9375rem/1.2 var(--t-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  top: 1.5px;
}
.t-tab:hover { background: var(--paper); }
.t-tab[aria-selected="true"] {
  background: var(--paper-light);
  z-index: 1;
  box-shadow: inset 0 4px 0 var(--cover);
}
.t-tab-badge {
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper-light);
  font-size: 0.75rem;
  line-height: 1.6;
}
.t-tabs--class { padding-left: 10px; border-bottom: 1.5px solid var(--ink); }
.t-panel { display: flex; flex-direction: column; gap: var(--t-gap); outline: none; }

/* ---------- loading, empty, failed ---------- */

.t-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 4px;
  color: var(--ink-soft);
  font-weight: 600;
}
.t-egg-spin {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 23px;
  border: 2px solid var(--ink);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(to top, var(--yolk) 0 42%, var(--paper-light) 42%);
  transform-origin: 50% 90%;
  animation: t-wobble 1.4s ease-in-out infinite;
}
.t-egg-spin--small { width: 12px; height: 15px; border-width: 1.5px; }
@keyframes t-wobble { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-10deg); } 78% { transform: rotate(8deg); } 90% { transform: rotate(-3deg); } }

.t-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 8px;
}
.t-empty p { color: var(--ink-soft); max-width: 46ch; }
.t-empty-nest svg { display: block; }
.t-failed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--think-ink);
  background: var(--think-light);
}
.t-failed p { flex: 1 1 20rem; font-weight: 600; }

/* ---------- sign in ---------- */

.t-main.is-signin { max-width: 560px; }
.t-signin { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 3vh; }
.t-signin-art svg { display: block; }
.t-signin-sheet { width: 100%; }
.t-signin-sheet h1 { font-size: clamp(1.8rem, 5vw, 2.3rem); }
.t-signin-sheet .t-btn--primary { align-self: flex-start; }
.t-signin-help { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1.5px dashed var(--rule); }
.t-signin-foot { color: var(--ink-soft); font-size: 0.875rem; text-align: center; max-width: 42ch; }
.t-turnstile { position: fixed; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; z-index: 60; pointer-events: none; }
.t-turnstile > div { pointer-events: auto; }

/* ---------- class list: exercise books ---------- */

[data-cover="robin"] { --cover: var(--robin); --cover-deep: #A9402A; }
[data-cover="marmalade"] { --cover: var(--marmalade); --cover-deep: #B86514; }
[data-cover="yolk"] { --cover: var(--yolk); --cover-deep: var(--yolk-deep); }
[data-cover="leaf"] { --cover: var(--leafy); --cover-deep: #3D7A4D; }
[data-cover="lagoon"] { --cover: var(--lagoon); --cover-deep: #2A7680; }
[data-cover="cornflower"] { --cover: var(--cornflower); --cover-deep: #3F5FA8; }
[data-cover="plum"] { --cover: var(--plum); --cover-deep: #6A4080; }
[data-cover="bubblegum"] { --cover: var(--bubblegum); --cover-deep: #D06F99; }

.t-books {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: 22px 20px;
}
.t-book-item { display: flex; }
.t-books-title { margin: 28px 0 14px; }
.teach .t-book {
  flex: 1;
  display: flex;
  min-height: 268px;
  border: 2px solid var(--ink);
  border-radius: 6px 16px 16px 6px;
  background: var(--cover);
  background: color-mix(in srgb, var(--cover) 62%, var(--paper-light));
  box-shadow: 0 5px 0 var(--cover-deep);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--t-move) var(--out);
}
.t-book:hover { transform: translateY(-3px) rotate(-0.4deg); }
.t-book:active { transform: translateY(1px); }
.t-book:focus-visible { outline-offset: 4px; border-radius: 6px 16px 16px 6px; }
.t-book-spine {
  flex: none;
  width: 22px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 9px, rgba(255, 250, 241, 0.75) 9px 15px) 9px 0 / 2px 100% no-repeat,
    var(--cover);
  border-right: 2px solid var(--ink);
}
.t-book-cover { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; min-width: 0; }
.t-book-brand {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.t-book-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--paper-light);
  box-shadow: 0 2px 0 rgba(42, 38, 51, 0.18);
}
.t-book-name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.t-book-lines { margin: 0; display: flex; flex-direction: column; }
.t-book-row {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 8px;
  padding: 3px 0 2px;
  border-bottom: 1px solid var(--t-feint);
  font-size: 0.875rem;
}
.t-book-row dt { color: var(--ink-soft); font-weight: 600; }
.t-book-row dd { margin: 0; font-weight: 650; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.t-book-row.is-empty dd { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.t-book-code {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.t-book-code-k { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.t-book-code .t-code-text { font-size: 1.25rem; }
.t-book-closed { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 700; }
.t-books--small .t-book { min-height: 0; opacity: 0.85; }
.t-books--small .t-book-lines { display: none; }

.t-start ol.t-steps { padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.t-create h2 { margin-bottom: 12px; }
.t-create > .t-hint { margin-top: 8px; }
.t-create-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: end;
}
.t-create-row .t-btn { margin-bottom: 0; }
.t-create-row--2 { grid-template-columns: minmax(0, 1fr) auto; }
.t-archived summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.t-archived[open] summary { margin-bottom: 8px; }

/* ---------- a class ---------- */

.t-class-head {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 18px 20px 18px 34px;
  border: 2px solid var(--ink);
  border-radius: 6px 16px 16px 6px;
  background: var(--cover);
  background: color-mix(in srgb, var(--cover) 45%, var(--paper-light));
  box-shadow: 0 4px 0 var(--cover-deep);
  position: relative;
}
.t-class-head::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 20px;
  border-right: 2px solid var(--ink);
  background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(255, 250, 241, 0.75) 9px 15px) 8px 0 / 2px 100% no-repeat, var(--cover);
  border-radius: 4px 0 0 4px;
}
.t-class-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.t-class-title h1 { overflow-wrap: anywhere; }
.t-crumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.t-crumb:hover { text-decoration: underline; }
.t-class-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 0.9375rem; color: var(--ink); }
.t-class-code {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 10px 12px 10px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--paper-light);
  align-self: center;
}
.t-class-code-k { grid-column: 1; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.t-class-code-v { grid-column: 1; font-size: 1.9rem; line-height: 1.1; }
.t-class-code-state { grid-column: 1; font-size: 0.8125rem; font-weight: 600; color: var(--leaf-deep); }
.t-class-code.is-closed .t-class-code-state { color: var(--think-ink); }
.t-class-code .t-btn { grid-column: 2; grid-row: 1 / span 3; }

.t-gone { max-width: 40rem; }
.t-gone p { margin-top: 10px; }

/* ---------- this week ---------- */

.t-week-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px 24px; }
.t-week-dates { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; color: var(--ink-soft); font-weight: 600; }
.t-week-test { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.t-week-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.t-week-current { --rule-gap: 44px; }
.t-wordlist {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  columns: 3 15rem;
  column-gap: 32px;
}
.t-wordlist li {
  break-inside: avoid;
  height: var(--rule-gap);
  display: flex;
  align-items: flex-end;
  padding-bottom: 5px;
  overflow: hidden;
}
.t-wordlist .t-word { font-size: 1.4rem; line-height: 1.2; }
.t-week-current .t-week-head { margin-bottom: 18px; }
.t-week-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 10px; }
.t-week-foot .t-btn--quiet { margin-left: auto; }
.t-history-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.t-history-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 0;
  border-top: 1.5px dashed var(--rule);
}
.t-history-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 18rem; }
.t-history-words { font-family: var(--font-word); font-size: 0.9375rem; color: var(--ink-soft); }

/* the builder */
.t-builder { display: flex; flex-direction: column; gap: 18px; }
.t-step { display: flex; flex-direction: column; gap: 14px; }
.t-step-title { display: flex; align-items: center; gap: 10px; }
.t-step-n {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--yolk);
  font-family: var(--font-word);
  font-weight: 700;
  font-size: 1rem;
}
.t-step-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.t-build-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
.t-build-tray { position: sticky; top: 84px; }
.t-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(14px, 2vw, 22px);
  border: 1.5px solid var(--ink);
  border-radius: var(--t-radius);
  background: var(--paper-light);
  box-shadow: 0 var(--t-under) 0 var(--paper-shade);
  min-width: 0;
}
.t-pick-panel { display: flex; flex-direction: column; gap: 12px; outline: none; }
.t-pick-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.t-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr));
  gap: 8px;
}
.t-pick-grid--tight { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.t-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-height: 42px;
  padding: 7px 10px 7px 30px;
  border: 1.5px solid var(--rule);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.t-pick::before {
  content: "";
  position: absolute;
  left: 9px; top: 11px;
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 4px;
  background: #fff;
}
.t-pick:hover { border-color: var(--ink); }
.t-pick[aria-pressed="true"] { border-color: var(--leaf-deep); background: var(--leaf-light); }
.t-pick[aria-pressed="true"]::before {
  border-color: var(--leaf-deep);
  background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.8 9.6 17.4 19.5 7' fill='none' stroke='%23FFFAF1' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.t-pick-word { font-family: var(--font-word); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; overflow-wrap: anywhere; }
.t-pick-meter {
  display: flex;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: var(--paper-deep);
  overflow: hidden;
}
.t-pick-meter-s { background: var(--leaf); }
.t-pick-meter-p { background: var(--yolk); }
.t-packs { display: flex; flex-direction: column; gap: 12px; }
.t-pack { padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: 10px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.t-pack-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.t-pack-rule { font-size: 0.875rem; color: var(--ink-soft); max-width: 75ch; }

.t-tray {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1.5px dashed var(--ink-soft);
  border-radius: var(--t-radius);
  background: var(--paper-light);
}
.t-tray-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.t-tray-count { font-weight: 700; font-size: 0.875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-tray-count.is-full { color: var(--think-ink); }
.t-tray-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: min(52vh, 560px);
  overflow-y: auto;
  background: repeating-linear-gradient(to bottom, transparent 0 37px, var(--t-feint) 37px 38px);
  background-attachment: local;
}
.t-tray-item { display: flex; align-items: center; gap: 8px; height: 38px; }
.t-tray-n { width: 1.6rem; text-align: right; color: var(--ink-soft); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.t-tray-item .t-word { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.t-tray-empty { color: var(--ink-soft); font-size: 0.9375rem; padding: 8px 0; line-height: 1.6; background: var(--paper-light); }
.t-tray-foot { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1.5px dashed var(--rule); }
.t-tray-foot .t-btn--primary { flex: 1 1 auto; }

/* review */
.t-review-banner:empty { display: none; }
.t-review-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.t-review-item > .t-review-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 14px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-light);
}
.t-review-item.is-blocked > .t-review-line, .t-review-item.is-failed > .t-review-line { border-color: var(--think-ink); }
.t-review-def { color: var(--ink-soft); font-size: 0.875rem; flex: 1 1 14rem; }
.t-review-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.t-review-why { padding: 6px 14px 0; color: var(--ink-soft); font-size: 0.875rem; }
.t-listen { display: inline-flex; gap: 2px; flex-wrap: wrap; }

.t-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--t-radius);
  background: var(--paper-light);
  box-shadow: 0 var(--t-under) 0 var(--yolk-deep);
}
.t-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px 20px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--t-margin);
}
.teach .t-card-word { font-family: var(--font-word); font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.1; font-weight: 700; }
.t-card-word .t-word { font-size: inherit; }
.t-card-facts { display: flex; flex-direction: column; gap: 3px; font-size: 0.9375rem; min-width: 0; }
.t-chunks { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.t-chunk {
  padding: 0 8px;
  border: 1.5px solid var(--ink);
  border-radius: 7px;
  background: #fff;
  font-family: var(--font-word);
  font-weight: 700;
  box-shadow: 0 2px 0 var(--paper-shade);
}
.t-card-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.t-card-fields .t-field > .t-hint { order: 2; }
.t-card-fields .t-field > .t-error { order: 3; }
.t-card-preview { margin-top: 6px; font-size: 0.875rem; }
.t-card-tip strong { background: var(--think-light); padding: 0 2px; border-radius: 3px; }
.t-card-extra { font-size: 0.875rem; color: var(--ink-soft); }
.t-card-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.t-save { display: flex; flex-direction: column; gap: 14px; }
.t-save-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.t-save-wait { flex: 1 1 16rem; }

/* ---------- progress ---------- */

.t-progress { display: flex; flex-direction: column; gap: var(--t-gap); }
.t-progress-top:empty { display: none; }
.t-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.t-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--t-radius);
  background: var(--paper-light);
  box-shadow: 0 var(--t-under) 0 var(--paper-shade);
}
.t-stat-k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.t-stat-v { font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: 800; font-size: 1.6rem; line-height: 1.15; }
.t-stat-v.t-word { font-family: var(--font-word); }
.t-stat-sub { font-size: 0.875rem; color: var(--ink-soft); }
.t-meter { display: block; height: 10px; margin: 6px 0 2px; border-radius: 6px; border: 1.5px solid var(--ink); background: var(--paper-deep); overflow: hidden; }
.t-meter-fill { display: block; height: 100%; background: var(--yolk); }

/* eggs filling up: not started (dashed, empty) -> practising -> hatched -> grown -> golden (a star) */
.t-egg {
  --fill: 0%;
  --egg: var(--paper-light);
  display: inline-block;
  width: 17px;
  height: 21px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(to top, var(--egg) 0 var(--fill), var(--paper-light) var(--fill));
  vertical-align: middle;
}
.t-egg--new { border-style: dashed; border-color: var(--ink-faint); }
.t-egg--practising { --fill: 34%; --egg: var(--yolk); border-color: var(--yolk-deeper); }
.t-egg--hatched { --fill: 67%; --egg: var(--leaf-light); border-color: var(--leaf-deep); }
.t-egg--grown { --fill: 100%; --egg: var(--leaf); border-color: var(--leaf-deep); }
.t-egg--golden {
  border: none;
  border-radius: 0;
  width: 21px;
  height: 21px;
  background: var(--yolk-deeper);
  clip-path: polygon(50% 0, 63% 33%, 98% 36%, 71% 58%, 80% 94%, 50% 75%, 20% 94%, 29% 58%, 2% 36%, 37% 33%);
  position: relative;
}
.t-egg--golden::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--yolk);
  clip-path: inherit;
}

.t-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; font-size: 0.875rem; }
.t-legend li { display: inline-flex; align-items: center; gap: 7px; }
.t-state { display: inline-flex; align-items: center; gap: 7px; }

.t-heat-sheet { padding-bottom: 14px; }
.t-heat-scroll { overflow: auto; max-height: 72vh; max-width: 100%; width: max-content; margin-top: 8px; border-radius: 8px; border: 1.5px solid var(--rule); background: var(--paper-light); }
.t-heat { border-collapse: separate; border-spacing: 0; font-size: 0.875rem; }
.t-heat th, .t-heat td { padding: 0; border-bottom: 1px solid var(--t-feint); }
.t-heat thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper-light);
  border-bottom: 1.5px solid var(--ink);
  vertical-align: bottom;
}
.t-heat tbody th, .t-heat tfoot th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper-light);
  text-align: left;
  padding: 4px 12px 4px 10px;
  border-right: 1.5px solid var(--rule);
  min-width: 10.5rem;
  max-width: 14rem;
}
.t-heat thead .t-heat-corner { left: 0; z-index: 3; text-align: left; padding: 8px 10px; border-right: 1.5px solid var(--rule); }
.t-heat-col { width: 36px; min-width: 36px; }
.t-heat-word {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding: 10px 4px 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink);
}
.t-heat-word span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-word);
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
  max-height: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-heat-word:hover span { text-decoration: underline; }
.t-heat-col[aria-sort] { background: var(--yolk-light); }
.t-heat-min { padding: 4px 10px !important; text-align: right; white-space: nowrap; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-heat-cell { text-align: center; height: 36px; }
.t-heat tbody tr:hover td, .t-heat tbody tr:hover th { background: var(--yolk-light); }
.t-heat-name {
  display: block;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink);
  font: 700 0.9375rem/1.25 var(--t-font);
  text-align: left;
  cursor: pointer;
}
.t-heat-name:hover { text-decoration: underline; }
.t-heat-seen { display: block; font-size: 0.75rem; color: var(--ink-soft); }
.t-heat tfoot th, .t-heat tfoot td { border-top: 1.5px solid var(--ink); border-bottom: none; font-weight: 700; }
.t-heat-total { text-align: center; padding: 6px 0 !important; font-variant-numeric: tabular-nums; }

.t-progress-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-gap); }
.t-missed-list, .t-word-results { list-style: none; padding: 0; display: flex; flex-direction: column; }
.t-missed-list li, .t-word-results li { padding: 10px 0; border-top: 1.5px dashed var(--rule); }
.t-missed-list li:first-child, .t-word-results li:first-child { border-top: none; padding-top: 0; }
.t-missed-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.t-missed-head .t-word { font-size: 1.2rem; }
.t-missed-n { font-size: 0.875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-missed-spell { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 6px; }
.t-missed-k { font-size: 0.8125rem; color: var(--ink-soft); }
.t-slip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 7px;
  background: var(--think-light);
  font-family: var(--font-word);
  font-weight: 700;
  font-size: 0.9375rem;
}
.t-slip s { text-decoration: none; }
.t-slip-n { font-family: var(--t-font); font-size: 0.75rem; color: var(--think-ink); }
.t-concept-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.t-concept { padding: 10px 12px; border-left: 4px solid var(--think); background: #fff; border-radius: 0 8px 8px 0; }
.t-concept-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.t-concept-n { font-size: 0.875rem; font-weight: 700; color: var(--think-ink); }
.t-concept-words { font-size: 0.875rem; margin-top: 3px; }
.t-concept-words span { font-family: var(--font-word); font-weight: 700; }
.t-concept-ex { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.t-cov-sum { margin-bottom: 8px; }
.t-cov-legend { list-style: none; padding: 0; display: flex; gap: 16px; font-size: 0.875rem; margin-bottom: 10px; }
.t-cov-legend li { display: inline-flex; align-items: center; gap: 6px; }
.t-cov-key { width: 14px; height: 10px; border-radius: 3px; border: 1px solid var(--ink-soft); }
.t-cov-key--s { background: var(--leaf); }
.t-cov-key--p { background: var(--yolk); }
.t-cov-key--n { background: var(--paper-deep); }
.t-cov-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 6px 16px; }
.t-cov-item { display: flex; flex-direction: column; gap: 3px; padding: 4px 0; }
.t-cov-word { font-family: var(--font-word); font-weight: 700; font-size: 0.9375rem; }
.t-cov-bar { display: flex; height: 7px; border-radius: 4px; background: var(--paper-deep); overflow: hidden; border: 1px solid var(--rule); }
.t-cov-s { background: var(--leaf); }
.t-cov-p { background: var(--yolk); }

.t-pupil-detail { display: flex; flex-direction: column; gap: 16px; }
.t-days { margin: 0; }
.t-days-bars {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 4px;
  align-items: end;
  height: 92px;
  margin-top: 8px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid var(--ink);
  position: relative;
}
.t-days-bar {
  position: relative;
  height: calc(var(--v, 0) * 70px + 2px);
  border-radius: 4px 4px 0 0;
  background: var(--pond);
}
.t-days-day { position: absolute; bottom: -19px; left: 0; right: 0; text-align: center; font-size: 0.6875rem; color: var(--ink-soft); }
.t-mistakes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.t-mistakes li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }

/* ---------- tables ---------- */

.t-table-scroll { overflow-x: auto; }
.t-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.t-table caption { text-align: left; padding-bottom: 6px; }
.t-caption { font-weight: 700; font-size: 0.9375rem; caption-side: top; }
.t-table th, .t-table td { padding: 9px 10px; border-bottom: 1px solid var(--t-feint); text-align: left; vertical-align: middle; }
.t-table thead th { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1.5px solid var(--ink); }
.t-table tbody th { font-weight: 650; }
.t-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.t-table--compact th, .t-table--compact td { padding: 6px 8px; }
.t-col-actions { text-align: right !important; width: 1%; white-space: nowrap; }
.t-has { display: inline-flex; align-items: center; gap: 4px; color: var(--leaf-deep); font-weight: 650; }
.t-pupil-name { margin-right: 8px; }

/* ---------- pupils ---------- */

.t-pupils-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--t-gap); align-items: start; }
.t-join-main { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.t-join-code { display: flex; flex-direction: column; gap: 6px; }
.t-big-code { font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: var(--ink); }
.t-qr-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.t-qr { width: 128px; height: 128px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; }
.t-join-steps { padding-left: 1.3em; margin: 14px 0 !important; display: flex; flex-direction: column; gap: 3px; font-size: 0.9375rem; }
.t-join-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.t-link-text { padding: 3px 8px; border-radius: 6px; background: var(--paper-deep); overflow-wrap: anywhere; }
.t-add { display: flex; flex-direction: column; gap: 12px; }
.t-add-result { display: flex; flex-direction: column; gap: 8px; }
.t-manage-rename { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
.t-manage-row { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; padding-top: 12px; border-top: 1.5px dashed var(--rule); flex-wrap: wrap; }
.t-manage-row > div { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 4px; }
.t-dialog--edit .t-card-foot .t-btn--quiet { display: none; }

/* ---------- test ---------- */

.t-test-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin: 14px 0; }
.t-test-words { border: 1.5px dashed var(--rule); border-radius: 10px; padding: 10px 14px 12px; margin: 0; }
.t-test-word-list { padding-left: 1.6em; columns: 2 9rem; margin: 8px 0 !important; }
.t-test-word-list li { break-inside: avoid; padding: 2px 0; }
.t-live-status { font-weight: 600; color: var(--ink-soft); margin: 4px 0 10px; }
.t-live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 3px var(--leaf-light);
  animation: t-pulse 1.6s ease-in-out infinite;
}
@keyframes t-pulse { 50% { box-shadow: 0 0 0 6px var(--leaf-light); } }
.t-answers { font-size: 0.875rem; }
.t-answers th, .t-answers td { padding: 6px 8px; white-space: nowrap; }
.t-answers thead th.num { text-align: center; }
.t-answers thead th:last-child { text-align: right; }
.t-ans { font-family: var(--font-word); font-weight: 700; text-align: center; }
.t-ans.is-ok { background: var(--leaf-light); }
.t-ans.is-wrong { background: var(--think-light); color: var(--think-ink); }
.t-ans.is-none { color: var(--ink-faint); }
.t-ans-score { font-weight: 700; }
.t-script { --rule-gap: 52px; }
.t-script-list { padding-left: 1.6em; display: flex; flex-direction: column; margin-top: 8px !important; }
.t-script-list li { padding: 12px 0 8px 6px; border-bottom: 1px solid var(--t-feint); }
.t-script-word { margin-right: 14px; }
.t-script-list li::marker { font-family: var(--font-word); font-weight: 700; font-size: 1.1rem; }
.t-script-word .t-word { font-size: 1.45rem; }
.t-script-sent { color: var(--ink-soft); font-size: 0.9375rem; }
.t-results-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 18px; }
.t-results-cols h3 { margin-bottom: 8px; }
.t-score-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.t-score-list li { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr 3.4rem; gap: 10px; align-items: center; }
.t-score-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-score-bar { height: 10px; border-radius: 6px; background: var(--paper-deep); overflow: hidden; }
.t-score-bar span { display: block; height: 100%; background: var(--leaf); }
.t-score-n { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.t-results-all { margin-top: 18px; }
.t-results-all summary { cursor: pointer; font-weight: 700; padding: 6px 0; }

/* ---------- words library ---------- */

.t-lib-add { display: flex; flex-direction: column; gap: 12px; }
.t-lib-review:empty { display: none; }
.t-lib-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.t-lib-item {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) auto;
  gap: 6px 20px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--t-feint);
}
.t-lib-word .t-word { font-size: 1.45rem; }
.t-lib-body { display: flex; flex-direction: column; gap: 3px; }
.t-lib-sent { font-size: 0.9375rem; color: var(--ink-soft); }
.t-lib-body .t-hint { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.t-lib-tools { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- school ---------- */

.t-school-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-gap); align-items: start; }
.t-school-grid .t-sheet { display: flex; flex-direction: column; gap: 12px; }
.t-invites { list-style: none; padding: 0; margin: 8px 0 !important; display: flex; flex-direction: column; gap: 4px; }
.t-invite { margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed var(--rule); display: flex; flex-direction: column; gap: 8px; }
.t-invite .t-create-row { grid-template-columns: minmax(0, 1fr) auto; }
.t-privacy-list { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px !important; max-width: 80ch; }

/* ---------- dialogs and toasts ---------- */

.t-dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper-light);
  color: var(--ink);
  box-shadow: 0 6px 0 rgba(42, 38, 51, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.t-dialog:not([open]) { display: none; }
.t-dialog--wide { width: min(940px, calc(100vw - 24px)); }
.t-dialog::backdrop { background: rgba(42, 38, 51, 0.45); }
.t-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px 20px;
  border-bottom: 2px solid var(--t-margin);
}
.t-dialog-head h2 { font-size: 1.3rem; overflow-wrap: anywhere; }
.t-dialog-body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.t-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 12px 20px 16px; border-top: 1.5px dashed var(--rule); }

.t-toasts {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: max-content;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.t-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper-light);
  font-weight: 600;
  box-shadow: 0 4px 0 rgba(42, 38, 51, 0.25);
  animation: t-toast-in var(--t-move) var(--out) both;
}
.t-toast--info { background: var(--pond-deep); }
.t-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; }
@keyframes t-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- narrower screens ---------- */

@media (max-width: 1020px) {
  .t-build-grid { grid-template-columns: minmax(0, 1fr); }
  .t-build-tray { position: static; }
  /* the chosen words flow as chips, and Check stays in reach at the bottom of the screen */
  .t-tray-list { max-height: none; flex-direction: row; flex-wrap: wrap; gap: 6px; background: none; }
  .t-tray-item { height: auto; padding: 2px 2px 2px 10px; border: 1.5px solid var(--rule); border-radius: 8px; background: #fff; }
  .t-tray-n { display: none; }
  .t-tray-foot {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 10px max(16px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-top: 2px dashed var(--rule);
  }
  .t-builder .t-step[data-step="1"] { padding-bottom: 72px; }
  .t-card-fields { grid-template-columns: minmax(0, 1fr); }
  .t-pupils-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .t-header { flex-wrap: wrap; padding-block: 8px; gap: 6px 10px; }
  .t-nav { order: 3; flex-basis: 100%; justify-content: space-between; }
  .t-nav-link { flex: 1; justify-content: center; padding-inline: 6px; }
  .t-me-school { max-width: 140px; }
  .t-main { padding-top: 16px; }
  .t-create-row, .t-save-grid { grid-template-columns: minmax(0, 1fr); }
  .t-create-row .t-btn { justify-self: start; }
  .t-progress-cols, .t-results-cols, .t-test-grid, .t-school-grid { grid-template-columns: minmax(0, 1fr); }
  .t-card-head { grid-template-columns: minmax(0, 1fr); }
  .t-class-head { padding: 14px 14px 14px 30px; }
  .t-class-code { width: 100%; }
  .t-class-code-v { font-size: 1.6rem; }
  .t-tab { padding: 8px 12px; }
  .t-tab .t-icon { display: none; }
  .t-ruled { --margin-x: 26px; padding-left: calc(var(--margin-x) + 12px); }
  .t-wordlist { columns: 1; }
  .t-lib-item { grid-template-columns: minmax(0, 1fr) auto; }
  .t-lib-body { grid-column: 1 / -1; grid-row: 2; }
  .t-heat tbody th, .t-heat tfoot th { min-width: 6.5rem; padding-right: 6px; }
  .t-heat-min { padding: 4px 6px !important; }
  .t-field--inline { flex-wrap: wrap; }
  .t-field--inline .t-select, .t-field--inline .t-input { min-width: 0; flex: 1 1 10rem; }
  .t-score-list li { grid-template-columns: minmax(5rem, 8rem) 1fr 3rem; }
  .t-week-foot .t-btn--quiet { margin-left: 0; }
  .t-dialog-body { padding: 14px 16px; }
}

@media (max-width: 480px) {
  .t-tabs--class { padding-left: 0; gap: 2px; }
  .t-tab { padding: 8px 7px; font-size: 0.8125rem; gap: 4px; }
  .t-tab-badge { padding: 0 5px; font-size: 0.6875rem; }
  .t-stat { padding: 10px 12px; }
  .t-stat-v { font-size: 1.3rem; }
  .t-sheet { padding: 14px; }
  .t-ruled { padding-left: calc(var(--margin-x) + 10px); }
}

@media (max-width: 420px) {
  .t-brand-sub { display: none; }
  .t-me-name { display: none; }
  .t-me { padding: 4px 8px; }
}

/* ---------- print ---------- */

#print-root { display: none; }

@page { size: A4; margin: 12mm; }

@media print {
  body.teach { background: #fff; font-size: 10pt; }
  .t-header, .t-main, .t-toasts, .t-skip, .t-dialog, .t-turnstile, .t-bottom, .t-sdlg, .t-board, .t-selbar { display: none !important; }
  #print-root { display: block; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* login cards: 2 x 4 to an A4 page, dashed cut lines */
  .p-cards { display: grid; grid-template-columns: 1fr 1fr; }
  .p-card {
    break-inside: avoid;
    height: 68mm;
    padding: 4mm 5mm;
    border: 0.3mm dashed #8E8798;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 1.5mm;
    overflow: hidden;
  }
  .p-card-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 8pt; }
  .p-card-brand { font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: 800; font-size: 10pt; }
  .p-card-class { color: #5D5869; font-weight: 700; }
  .p-card-name {
    font-family: var(--font-word);
    font-weight: 700;
    font-size: 21pt;
    line-height: 1.1;
    border-bottom: 0.4mm solid #BCD6E2;
    padding-bottom: 1mm;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .p-card-body { display: grid; grid-template-columns: 1fr 24mm 22mm; gap: 3mm; align-items: center; min-height: 0; }
  .p-card-code { display: flex; flex-direction: column; gap: 0.5mm; }
  .p-card-k { font-size: 7pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #5D5869; }
  .p-card-v { font-family: var(--font-word); font-weight: 700; font-size: 16pt; letter-spacing: 0.04em; white-space: nowrap; }
  .p-card-beast { display: flex; flex-direction: column; align-items: center; gap: 0.5mm; text-align: center; }
  .p-card-beast svg { width: 21mm; height: 21mm; }
  .p-card-beast-k { font-size: 7pt; line-height: 1.15; color: #5D5869; }
  .p-card-beast.is-blank {
    height: 22mm;
    justify-content: center;
    border: 0.3mm dashed #8E8798;
    border-radius: 3mm;
    padding: 1mm;
  }
  .p-card-qr .t-qr { width: 22mm; height: 22mm; border: none; border-radius: 0; }
  .p-card-steps { margin: 0; padding-left: 4.5mm; font-size: 8pt; display: flex; gap: 5mm; list-style: decimal; }
  .p-card-steps li { flex: 1; }

  /* word lists and results */
  .p-list-head { margin-bottom: 6mm; padding-bottom: 3mm; border-bottom: 0.5mm solid #2A2633; }
  .p-list-head h1 { font-size: 22pt; margin: 1mm 0; }
  .p-kicker { font-size: 9pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #5D5869; }
  .p-list-words { padding-left: 8mm; columns: 2; column-gap: 10mm; }
  .p-list-words li { break-inside: avoid; padding: 2.5mm 0; border-bottom: 0.3mm solid #BCD6E2; }
  .p-list-words .t-word { font-size: 17pt; }
  .p-list-sent { display: block; font-size: 9pt; color: #5D5869; }
  .p-list-foot { margin-top: 8mm; font-size: 9pt; color: #5D5869; }
  .p-results .t-table { font-size: 8.5pt; margin-bottom: 6mm; }
  .p-results .t-answers { font-size: 7.5pt; }
  .p-results .t-answers th, .p-results .t-answers td { white-space: normal; overflow-wrap: anywhere; padding: 1mm 0.8mm; }
  .p-results .t-table th, .p-results .t-table td { padding: 1.2mm 1.5mm; border-bottom: 0.2mm solid #BCD6E2; }
  .p-results .t-ans.is-ok { background: #E3F2E6; }
  .p-results .t-ans.is-wrong { background: #FBE7EF; }
  .p-results tr { break-inside: avoid; }
  mark.t-tricky { background: linear-gradient(to bottom, transparent 52%, #F7C4DA 52%, #F7C4DA 88%, transparent 88%); }
}

/* =====================================================================================
   The second pass's shell (docs/TEACHER-UX.md). Everything below is the shell's (prefix t-);
   packages add their own files.
   ===================================================================================== */

.teach { --t-bottom-h: 0px; }
.t-linkbtn { border: none; background: none; padding: 0; color: var(--pond-deep); text-decoration: underline; cursor: pointer; font: inherit; }
.t-muted { color: var(--ink-soft); }
.t-small { font-size: 0.875rem; }
.t-only-phone { display: none !important; }

/* ---------- header: brand, switcher, Words · School, Me ---------- */

.t-header { gap: 8px 14px; min-height: 64px; }
.t-header .t-brand-mark svg { width: 34px; height: 34px; }
.t-swwrap { position: relative; min-width: 0; }
.t-switcher {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; max-width: 100%; padding: 4px 10px 4px 6px;
  border: 1.5px solid var(--ink); border-radius: 10px;
  background: var(--paper-light); box-shadow: 0 2px 0 var(--paper-shade);
  color: var(--ink); font: inherit; cursor: pointer;
}
.t-switcher:hover { background: var(--paper); }
.t-sw-cover { flex: none; width: 22px; height: 26px; border-radius: 3px 7px 7px 3px; background: var(--cover, var(--cornflower)); border: 1.5px solid var(--ink); }
.t-sw-cover--school { background: var(--leafy); border-radius: 4px; }
.t-sw-cover--none { background: var(--paper-deep); }
.t-sw-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 14rem; }
.t-sw-year { font-size: 0.875rem; color: var(--ink-soft); white-space: nowrap; }
.t-swpop {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 70;
  width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 8px; border: 1.5px solid var(--ink); border-radius: 12px;
  background: var(--paper-light); box-shadow: 0 4px 0 var(--paper-shade);
}
.t-swpop[hidden] { display: none; }
.t-sw-find { margin: 4px 4px 8px; }
.t-sw-find .t-input { width: 100%; min-height: 38px; }
.t-sw-h { padding: 8px 8px 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.t-sw-list { list-style: none; padding: 0; margin: 0; }
.t-sw-item {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 8px;
  border-radius: 8px; color: var(--ink); text-decoration: none;
}
.t-sw-item:hover, .t-sw-item:focus-visible { background: var(--paper-deep); }
.t-sw-item[aria-current="page"] { background: var(--yolk-light); }
.t-sw-item b { font-weight: 750; }
.t-sw-item small { display: block; color: var(--ink-soft); font-size: 0.8125rem; }
.t-sw-item .t-sw-cover { width: 18px; height: 22px; }
.t-sw-item--action { color: var(--pond-deep); font-weight: 650; }
.t-sw-empty { padding: 6px 8px; color: var(--ink-soft); font-size: 0.875rem; }

.t-hnav { display: flex; gap: 2px; margin-left: auto; }
.t-hlink {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 6px 12px;
  border-radius: 10px; color: var(--ink); font-weight: 650; text-decoration: none;
}
.t-hlink:hover { background: var(--paper-deep); }
.t-hlink[aria-current="page"] { background: var(--paper-deep); box-shadow: inset 0 -3px 0 var(--ink); }

.t-memenu .t-mebtn, .t-mebtn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 3px 8px 3px 4px;
  border: 1.5px solid var(--rule); border-radius: 10px; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; box-shadow: none;
}
.t-mebtn:hover { border-color: var(--ink); background: var(--paper-light); }
.t-me-i {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--yolk-light); border: 1.5px solid var(--ink); font-weight: 800; font-size: 0.8125rem;
}
.t-me-i--admin { background: var(--leaf-light); }
.t-me-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.t-me-t b { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.t-me-t small { font-size: 0.75rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.t-memenu { margin-left: 4px; }
.t-header .t-memenu--alone { margin-left: auto; }
.t-me-card { padding: 8px 10px 10px; border-bottom: 1.5px dashed var(--rule); margin-bottom: 4px; }
.t-me-card b { display: block; }
.t-me-card span { display: block; font-size: 0.8125rem; color: var(--ink-soft); overflow-wrap: anywhere; }

/* links drawn as controls take their own colour, not .teach a's */
.teach .t-hlink, .teach .t-sw-item, .teach .t-menu-item, .teach a.t-namechip, .teach a.t-wchip,
.teach .t-fig--link, .teach .t-dt-link, .teach .t-sheetlinks a, .teach .t-ctab { color: var(--ink); }
.teach a.t-btn { color: var(--b-fg); }
.teach .t-sw-item--action { color: var(--pond-deep); }
.teach .t-menu-item.is-danger { color: var(--think-ink); }

/* ---------- menus ---------- */

.t-menu { position: relative; display: inline-flex; }
.t-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 70;
  min-width: 230px; max-width: calc(100vw - 24px); padding: 6px;
  border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper-light);
  box-shadow: 0 4px 0 var(--paper-shade);
  display: flex; flex-direction: column;
}
.t-menu-pop[hidden] { display: none; }
.t-menu--left .t-menu-pop { left: 0; right: auto; }
.t-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 7px 10px;
  border: none; border-radius: 8px; background: transparent; color: var(--ink);
  font: 600 0.9375rem/1.25 var(--t-font); text-align: left; text-decoration: none; cursor: pointer;
}
.t-menu-item:hover, .t-menu-item:focus { background: var(--paper-deep); outline: none; }
.t-menu-item:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.t-menu-item small { margin-left: auto; color: var(--ink-soft); font-weight: 500; }
.t-menu-item.is-danger { color: var(--think-ink); }
.t-menu-item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.t-menu-sep { height: 0; margin: 5px 6px; border-top: 1.5px dashed var(--rule); }
.t-menu-head { padding: 6px 10px 2px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- page frame ---------- */

.t-main { padding-bottom: calc(64px + var(--t-bottom-h)); }
.t-frame { display: flex; flex-direction: column; gap: 0; }
.t-frame > .t-frame-body { display: flex; flex-direction: column; gap: var(--t-gap); margin-top: 18px; min-width: 0; }

/* ---------- class bar (one line) and School bar, with their tabs ---------- */

.t-cbar {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
  padding: 10px 14px 10px 30px;
  border: 1.5px solid var(--ink); border-radius: var(--t-radius) var(--t-radius) 0 0;
  background: var(--paper-light); overflow: hidden;
}
.t-cbar::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: repeating-linear-gradient(to bottom, transparent 0 7px, rgba(255, 250, 241, 0.8) 7px 11px) 6px 0 / 2px 100% no-repeat, var(--cover, var(--cornflower));
  border-right: 1.5px solid var(--ink);
}
.t-cbar--school { --cover: var(--leafy); }
.t-cb-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.teach .t-cb-name { font-size: 1.75rem; line-height: 1.15; overflow-wrap: anywhere; }
.t-cb-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--ink-soft); font-size: 0.9375rem; }
.t-chip-admin { gap: 4px; background: var(--leaf-light); border-color: var(--leaf-deep); white-space: nowrap; }
.t-cb-code { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.t-cb-code-k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.t-cb-code-v { font-size: 1.35rem; }
.t-cb-code-off { font-size: 0.8125rem; font-weight: 700; color: var(--think-ink); }
.t-cb-plan { font-weight: 700; font-size: 0.9375rem; }
.t-cb-plan-k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-right: 6px; }
.t-cb-plus { display: none; }

.t-ctabs {
  display: flex; align-items: stretch; gap: 0;
  border: 1.5px solid var(--ink); border-top: none; border-radius: 0 0 var(--t-radius) var(--t-radius);
  background: var(--paper-deep); padding: 0 6px; box-shadow: 0 var(--t-under) 0 var(--paper-shade);
  min-width: 0;
}
.t-ctabs .t-tabs { gap: 0; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.t-ctabs .t-tabs::-webkit-scrollbar { display: none; }
.t-ctab {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  min-height: 46px; padding: 8px 14px; border-bottom: 4px solid transparent;
  color: var(--ink); font: 650 0.9375rem/1.2 var(--t-font); text-decoration: none; white-space: nowrap;
}
.t-ctab:hover { background: var(--paper); }
.t-ctab[aria-selected="true"] { border-bottom-color: var(--ink); background: var(--paper-light); }
.t-ctab:focus-visible { outline-offset: -3px; }
.t-tab-badge--act { background: var(--think-ink); }
.t-ctabs-qa { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 12px; flex: none; }

.t-frame-note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 8px 12px;
  border-radius: 10px; font-size: 0.9375rem;
  background: var(--pond-light); border: 1.5px solid var(--pond);
}
.t-frame-note--quiet { background: transparent; border: 1.5px dashed var(--rule); color: var(--ink-soft); }
.t-frame-note--warn { background: var(--think-light); border-color: var(--think-ink); }
.t-frame-note .t-icon { margin-top: 2px; }

/* ---------- toolbar: group chips on the left, the page's own controls on the right ---------- */

.t-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; min-width: 0; }
.t-toolbar:empty, .t-toolbar:not(:has(.t-chiprow)):not(:has(> .t-toolbar-start:not(:empty))):has(> .t-toolbar-end:empty) { display: none; }
.t-toolbar-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.t-toolbar-start:empty { display: none; }
.t-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.t-toolbar-end:empty { display: none; }
.t-chiprow { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; padding: 2px; }
.t-chiprow::-webkit-scrollbar { display: none; }
.t-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 4px 13px;
  border: 1.5px solid var(--ink-soft); border-radius: 999px; background: var(--paper-light); color: var(--ink);
  font: 650 0.9375rem/1.2 var(--t-font); white-space: nowrap; cursor: pointer; flex: none;
}
.t-chip:hover { border-color: var(--ink); }
.t-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper-light); border-color: var(--ink); }
.t-chip-n { font-size: 0.8125rem; font-weight: 700; opacity: 0.85; }
.t-gdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; }
.t-chip[aria-pressed="true"] .t-gdot { border-color: var(--paper-light); }
.t-gdot--big { width: 18px; height: 18px; }
.t-gtag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.t-gtag--none { color: var(--ink-soft); }
.t-gtag-n { color: var(--ink-soft); font-size: 0.875rem; }
.t-filtered { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.9375rem; color: var(--ink-soft); }
.t-filtered b { color: var(--ink); }

.t-weekstep { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1.5px solid var(--rule); border-radius: 10px; background: var(--paper-light); max-width: 100%; }
.t-ws-label { display: inline-flex; align-items: center; gap: 7px; padding: 0 8px; font-weight: 650; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- page heads ---------- */

.t-ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; }
.t-ph-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.teach .t-ph-title { font-size: clamp(1.4rem, 2.6vw, 1.75rem); overflow-wrap: anywhere; }
.teach h1.t-ph-title { font-size: clamp(1.75rem, 3.2vw, 2.2rem); }
.t-ph-crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.t-ph-crumbs li::after { content: "›"; margin-left: 6px; }
.t-ph-crumbs a { color: inherit; }
.t-ph-meta { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 0.9375rem; color: var(--ink-soft); }
.t-ph-meta span + span::before { content: "·"; margin: 0 8px; }
.t-ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- figure tiles ---------- */

.t-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.t-figs--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.t-fig {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: var(--t-radius);
  background: var(--paper-light); box-shadow: 0 var(--t-under) 0 var(--paper-shade); color: var(--ink);
}
.t-fig-k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.t-fig-v { font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: 800; font-size: 1.85rem; line-height: 1.15; overflow-wrap: anywhere; }
.t-fig-of { font-size: 1.05rem; font-weight: 700; color: var(--ink-soft); }
.t-fig-d { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.35; }
.t-fig .t-bar { margin: 4px 0 4px; }
.t-fig--test { background: var(--yolk-light); }
.t-fig--link { text-decoration: none; padding-right: 34px; }
.t-fig--link:hover { background: var(--paper); }
.t-fig--test.t-fig--link:hover { background: var(--yolk-hover); }
.t-fig-go { position: absolute; top: 12px; right: 10px; color: var(--ink-soft); }
.t-fig-more { margin-top: 2px; color: var(--pond-deep); font-weight: 650; font-size: 0.875rem; text-decoration: underline; }
.t-fig--skeleton .t-skel-line { display: block; }

/* bars */
.t-bar { display: block; width: 100%; height: 10px; border-radius: 6px; border: 1.5px solid var(--ink); background: var(--paper-deep); overflow: hidden; flex: none; }
.t-bar--wide { height: 12px; }
.t-bar-fill { display: block; height: 100%; background: var(--leaf); }
.t-bar-fill--yolk { background: var(--yolk); }
.t-bar-fill--pond { background: var(--pond); }
.t-bar-fill--leaf { background: var(--leaf); }
.t-bar-fill--think { background: var(--think-ink); }

/* skeleton and placeholders */
.t-skel { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.t-skel-line { display: block; height: 0.9rem; border-radius: 6px; background: linear-gradient(90deg, var(--paper-deep), var(--paper-shade), var(--paper-deep)); background-size: 200% 100%; animation: t-skel 1.4s ease-in-out infinite; }
@keyframes t-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.t-coming {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px;
  border: 1.5px dashed var(--ink-soft); border-radius: var(--t-radius); background: transparent;
}
.t-coming p { color: var(--ink-soft); max-width: 70ch; }
.t-coming .t-kicker { color: var(--pond-deep); }
.t-notready { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-weight: 600; }

/* ---------- tables ---------- */

.t-dt-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.t-dt-scroll { overflow-x: auto; min-width: 0; }
.t-dt { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.t-dt caption { text-align: left; font-weight: 700; padding: 0 0 8px; }
.t-dt thead th {
  padding: 9px 10px; border-bottom: 1.5px solid var(--ink); background: var(--paper-light);
  text-align: left; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.t-dt td, .t-dt tbody th { padding: 8px 10px; border-bottom: 1px solid var(--t-feint); vertical-align: middle; text-align: left; }
.t-dt tbody th { font-weight: 650; }
.t-dt tbody th a, .t-dt-link { color: var(--ink); }
.t-dt tbody tr:hover > * { background: var(--yolk-light); }
.t-dt tbody tr.is-sel > * { background: var(--pond-light); }
.t-dt .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-dt small { color: var(--ink-soft); font-size: 0.8125rem; }
.t-dt-sort { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: none; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.t-dt-sort:hover { color: var(--ink); text-decoration: underline; }
.t-dt-arrow { font-size: 0.7rem; min-width: 0.8em; }
.t-dt th[aria-sort="ascending"], .t-dt th[aria-sort="descending"] { color: var(--ink); }
.t-dt-sel { width: 36px; }
.t-dt-sel input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.t-dt-empty td { color: var(--ink-soft); text-align: center; padding: 18px; }
.t-dt-sortsel { display: none; align-items: center; gap: 8px; }
.t-dt--plain { font-size: 0.875rem; }

/* selection bar */
.t-selbar {
  position: sticky; bottom: calc(12px + var(--t-bottom-h)); z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px;
  border: 2px solid var(--ink); border-radius: 14px; background: var(--ink); color: var(--paper-light);
  box-shadow: 0 4px 0 rgba(42, 38, 51, 0.25);
}
.t-selbar[hidden] { display: none; }
.t-selbar b { margin-right: 6px; }
.t-selbar-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.t-selbar .t-btn--quiet { color: var(--paper-light); }
.t-selbar .t-btn--quiet:hover { background: rgba(255, 250, 241, 0.15); }
.t-selbar-clear { margin-left: auto; }

/* ---------- sheets (side on a laptop, bottom on a phone) ---------- */

.t-sdlg {
  padding: 0; border: 2px solid var(--ink); background: var(--paper-light); color: var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 6px 0 rgba(42, 38, 51, 0.3);
}
.t-sdlg:not([open]) { display: none; }
.t-sdlg::backdrop { background: rgba(42, 38, 51, 0.45); }
.t-sdlg--side {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(480px, 100vw);
  border-radius: 16px 0 0 16px; border-right: none;
}
.t-sdlg--side.t-sdlg--wide { width: min(720px, 100vw); }
.t-sdlg--centre { width: min(620px, calc(100vw - 24px)); height: fit-content; max-height: calc(100dvh - 32px); border-radius: 16px; }
.t-sdlg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 12px 20px; border-bottom: 2px solid var(--t-margin); }
.t-sdlg-head h2 { font-size: 1.3rem; overflow-wrap: anywhere; }
.t-sdlg-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.t-sdlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 20px 16px; border-top: 1.5px dashed var(--rule); }
.t-sheetlinks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.t-sheetlinks a, .t-sheetlinks button {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 6px;
  border: none; border-bottom: 1px solid var(--t-feint); background: none; color: var(--ink);
  font: 650 1rem/1.2 var(--t-font); text-align: left; text-decoration: none; cursor: pointer;
}

/* ---------- checklist, status list, What next? ---------- */

.t-cl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 10px; }
.t-cl-head h2 { font-size: 1.5rem; margin: 2px 0 4px; }
.t-cl-lede { color: var(--ink-soft); }
.t-cl-prog { display: flex; flex-direction: column; gap: 6px; min-width: 220px; font-size: 0.9375rem; }
.t-cl-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.t-cl-step { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1.5px dashed var(--rule); }
.t-cl-step.is-open { grid-template-columns: 36px minmax(0, 1fr); }
.t-cl-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper-light); font-weight: 800; }
.t-cl-step.is-done .t-cl-n { background: var(--leaf); border-color: var(--leaf-deep); color: #fff; }
.t-cl-step.is-done h3 { color: var(--ink-soft); }
.t-cl-step.is-open .t-cl-n { background: var(--yolk); }
.t-cl-step.is-open h3 { font-size: 1.1875rem; }
.t-cl-step.is-skipped .t-cl-n { border-style: dashed; color: var(--ink-soft); }
.t-cl-b { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.t-cl-sum { color: var(--ink-soft); font-size: 0.9375rem; }
.t-cl-body { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.t-cl-skip { margin-top: 4px; }
.t-cl-a { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.t-cl-later { padding-top: 12px; border-top: 1.5px dashed var(--rule); font-size: 0.9375rem; }

.t-slist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.t-slist li { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--t-feint); }
.t-sl-k { font-weight: 750; }
.t-sl-v { color: var(--ink-soft); font-size: 0.9375rem; min-width: 0; }
.t-sl-a { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

.t-whatnext {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1.5px solid var(--leaf-deep); border-radius: var(--t-radius); background: var(--leaf-light);
}
.t-whatnext-i { color: var(--leaf-deep); margin-top: 2px; }
.t-whatnext-b { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.t-whatnext-b > p { font-weight: 650; }

/* ---------- levels, names, words, misspellings, definitions, limits ---------- */

/* inline pieces keep their own width inside a column layout */
.t-lvl, .t-wchip, .t-codeview, .t-weekstep, .t-miss, .t-namechip, .t-gtag { width: fit-content; max-width: 100%; }

.t-lvl {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 6px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.t-lvl--act { background: var(--think-light); }
.t-lvl--act .t-icon { color: var(--think-ink); }
.t-lvl--watch { background: var(--yolk-light); }
.t-lvl--watch .t-icon { color: var(--yolk-deeper); }
.t-lvl--celebrate { background: var(--leaf-light); }
.t-lvl--celebrate .t-icon { color: var(--leaf-deep); }

.t-namechips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.t-namechip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 1px 10px 1px 3px;
  border: 1.5px solid var(--ink-soft); border-radius: 999px; background: #fff; color: var(--ink);
  font: 650 0.9375rem/1.2 var(--t-font); text-decoration: none; white-space: nowrap;
}
a.t-namechip:hover { border-color: var(--ink); background: var(--yolk-light); }
.t-namechip-b { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; overflow: hidden; }
.t-namechip-b svg { width: 26px; height: 26px; display: block; }
.t-namechip-b.is-none { width: 6px; }
.t-namechip--more { padding-left: 10px; cursor: pointer; color: var(--pond-deep); border-style: dashed; }

.t-wchip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 12px; min-height: 34px;
  border: 1.5px solid var(--ink-soft); border-radius: 999px; background: #fff; color: var(--ink);
  font: inherit; text-decoration: none;
}
button.t-wchip, a.t-wchip { cursor: pointer; }
button.t-wchip:hover, a.t-wchip:hover { border-color: var(--ink); background: var(--yolk-light); }
.t-wchip small { font-size: 0.8125rem; color: var(--ink-soft); }
.t-miss s { text-decoration-line: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--think-ink); color: var(--ink); font-family: var(--font-word); font-weight: 700; }

.t-def { font-size: 0.875rem; color: var(--ink-soft); }
.t-defs { margin: 0; display: flex; flex-direction: column; }
.t-defs div { padding: 10px 0; border-bottom: 1px solid var(--t-feint); }
.t-defs div.is-focus { background: var(--yolk-light); padding-inline: 8px; border-radius: 8px; }
.t-defs dt { font-weight: 750; }
.t-defs dd { margin: 2px 0 0; color: var(--ink-soft); }

.t-limit { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; color: var(--ink-soft); }
.t-limit .t-icon { margin-top: 2px; }

/* ---------- codes and Show on board ---------- */

.t-codeview { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.t-codeview-k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.t-codeview-v { font-size: 1.25rem; }

.t-board {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0;
  border: none; background: var(--dusk); color: var(--paper-light);
}
.t-board:not([open]) { display: none; }
.t-board[open] { display: flex; flex-direction: column; }
.t-board::backdrop { background: var(--dusk); }
.t-board-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; }
.t-board-k { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yolk); }
.t-board .t-btn--quiet { color: var(--paper-light); min-height: 56px; font-size: 1.1rem; }
.t-board .t-btn--quiet:hover { background: rgba(255, 250, 241, 0.12); }
.t-board-main { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3vw 5vw; padding: 2vw; text-align: center; min-height: 0; }
.t-board-steps { display: flex; flex-direction: column; gap: 1vh; }
.t-board-steps p { font-size: clamp(1.2rem, 2.4vw, 2rem); font-weight: 700; }
.t-board-code { font-size: clamp(2.6rem, 8.5vw, 8rem) !important; line-height: 1.1; color: var(--paper-light); white-space: nowrap; }
.t-board-qr .t-qr { display: block; width: min(34vw, 58vh); height: auto; border-radius: 12px; border: 10px solid #fff; background: #fff; }

/* ---------- charts ---------- */

.t-chart { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.t-chart-cap { font-weight: 700; }
.t-chart-note { font-size: 0.8125rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.t-bars { display: flex; flex-direction: column; gap: 6px; }
.t-bars-row { display: grid; grid-template-columns: minmax(3rem, 7rem) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.9375rem; }
.t-bars-l { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-bars-track { display: block; height: 14px; border-radius: 4px; background: var(--paper-deep); overflow: hidden; }
.t-bars-fill { display: block; height: 100%; background: var(--pond); }
.t-bars-fill--leaf { background: var(--leaf); }
.t-bars-fill--yolk { background: var(--yolk); }
.t-bars-fill--think { background: var(--think-ink); }
.t-bars-v { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.875rem; }
.t-split { display: flex; flex-direction: column; gap: 6px; }
.t-split-bar { display: flex; height: 16px; border: 1.5px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--paper-deep); }
.t-split-s { background: var(--pond); }
.t-split-h { background: var(--leaf); border-left: 1.5px solid var(--paper-light); }
.t-split-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.875rem; }
.t-split-key span { display: inline-flex; align-items: center; gap: 6px; }

.t-hg-scroll { overflow-x: auto; }
.t-hg { border-collapse: separate; border-spacing: 2px; font-size: 0.75rem; }
.t-hg caption { text-align: left; font-weight: 700; font-size: 0.9375rem; padding-bottom: 6px; }
.t-hg th { font-weight: 700; color: var(--ink-soft); padding: 2px 4px; white-space: nowrap; }
.t-hg tbody th { text-align: left; }
.t-hg td { width: 30px; min-width: 26px; height: 26px; text-align: center; border-radius: 4px; background: var(--paper); color: var(--ink); font-variant-numeric: tabular-nums; }
.t-hg .t-hg-1 { background: #DCEEF2; }
.t-hg .t-hg-2 { background: #A9D2DD; }
.t-hg .t-hg-3 { background: #5FA4B9; color: #fff; }
.t-hg .t-hg-4 { background: var(--pond-deep); color: #fff; }
.t-hg td.is-school { box-shadow: inset 0 0 0 1.5px var(--ink); }
.t-hg tr.is-holiday td { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(42, 38, 51, 0.08) 4px 6px); }
.t-hg-key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--paper); }

.t-marks { display: inline-flex; gap: 3px; align-items: center; }
.t-mk-cell { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 16px; min-height: 16px; }
.t-mk-cell.is-holiday { background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(42, 38, 51, 0.12) 3px 5px); border-radius: 3px; }
.t-mk { display: inline-block; width: 13px; height: 13px; vertical-align: middle; flex: none; }
.t-mk--s { border-radius: 50%; background: var(--pond); border: 1.5px solid var(--pond-deep); }
.t-mk--h { width: 14px; height: 14px; background: var(--leaf); clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); }
.t-mk--o { border-radius: 50%; border: 2px solid var(--ink-soft); background: #fff; }
.t-mk--n { width: 10px; height: 2px; background: var(--ink-faint); border-radius: 1px; }
.t-mk-legend { font-size: 0.8125rem; color: var(--ink-soft); }

.t-sq100 { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; max-width: 380px; }
.t-sq { position: relative; display: inline-block; aspect-ratio: 1; min-width: 10px; border: 1.5px solid var(--leaf-deep); border-radius: 2px; background: #fff; }
.t-sq--s { background: var(--leaf); }
.t-sq--p { background: linear-gradient(135deg, var(--yolk) 0 50%, #fff 50% 100%); border-color: var(--yolk-deeper); }
.t-sq--n { border-style: dashed; border-color: var(--ink-faint); }
.t-sq.is-set::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--ink); }
.t-sq--s.is-set::after { background: #fff; }
.t-sq-legend .t-sq { width: 14px; }
.t-spark { display: inline-flex; color: var(--pond-deep); vertical-align: middle; }
.t-withtable { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.t-wt-bar { display: flex; justify-content: flex-end; }

/* ---------- calm whole-page notes: only School Admins, paused, not set up, not found ---------- */

.t-calm { max-width: 44rem; display: flex; flex-direction: column; gap: 12px; }
.t-calm p { max-width: 62ch; }

/* ---------- the phone's bottom bar ---------- */

.t-bottom { display: none; }

/* ---------- Teach it: no app chrome ---------- */

body.is-teachit { background: var(--dusk); }
body.is-teachit::after { display: none; }
body.is-teachit .t-header, body.is-teachit .t-bottom, body.is-teachit .t-skip { display: none !important; }
body.is-teachit .t-main { max-width: none; padding: 0; }
.t-ti-fallback { min-height: 100dvh; display: flex; flex-direction: column; gap: 24px; padding: 24px; color: var(--paper-light); }
.t-ti-fallback .t-kicker { color: var(--yolk); }
.t-ti-fallback .t-coming { border-color: rgba(255, 250, 241, 0.5); }
.t-ti-fallback .t-coming p, .t-ti-fallback .t-coming h2 { color: var(--paper-light); }
.t-ti-words { display: flex; flex-wrap: wrap; gap: 18px 36px; }
.t-ti-words .t-word { color: var(--paper-light); font-size: clamp(2rem, 7vw, 5rem); }
.t-ti-fallback .t-btn--quiet { color: var(--paper-light); align-self: flex-start; min-height: 72px; font-size: 1.15rem; }

/* ---------- narrower screens ---------- */

@media (max-width: 1100px) {
  .t-figs--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-me-t { display: none; }
  .t-slist li { grid-template-columns: 150px minmax(0, 1fr); }
  .t-sl-a { grid-column: 2; justify-content: flex-start; }
}

@media (max-width: 1020px) {
  .t-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-ctab { padding: 8px 11px; }
  .t-ctab > .t-icon { display: none; }
  /* the quick actions keep their names for screen readers, as icons only */
  .t-ctabs-qa .t-btn { padding-inline: 9px; }
  .t-ctabs-qa .t-btn > span:not(.t-icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 760px) {
  .teach { --t-bottom-h: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .t-only-phone { display: revert !important; }
  .t-not-phone { display: none !important; }
  .t-header { flex-wrap: nowrap; gap: 8px; min-height: 58px; padding-block: 6px; }
  .t-header .t-brand-text, .t-hnav { display: none; }
  .t-swwrap { margin-right: auto; }
  .t-sw-name { max-width: 9rem; }
  .t-mebtn { border: none; padding: 0; min-height: 44px; }
  .t-mebtn > .t-icon { display: none; }
  .t-memenu { margin-left: 0; }
  .t-main { padding-top: 12px; }

  .t-cbar { border-radius: var(--t-radius); padding: 8px 10px 8px 26px; box-shadow: 0 var(--t-under) 0 var(--paper-shade); flex-wrap: nowrap; }
  .teach .t-cb-name { font-size: 1.35rem; }
  .t-cb-main { flex-wrap: nowrap; min-width: 0; }
  .t-cb-meta, .t-cb-code-k, .t-cb-board, .t-cb-plan-k { display: none; }
  .t-cbar--school .t-cb-main { flex-wrap: wrap; gap: 2px 10px; }
  .teach .t-cbar--school .t-cb-name { font-size: 1.2rem; }
  .t-cbar--school .t-cb-meta { display: inline-flex; }
  .t-cbar--school .t-cb-meta > :nth-child(n+2) { display: none; }
  .t-cbar--school .t-cb-plan { display: none; }
  .t-cb-code { flex-wrap: nowrap; gap: 2px 4px; }
  .t-cb-code-v { font-size: 1.05rem; }
  .t-cb-plus { display: inline-flex; }
  .t-ctabs { display: none; }
  .t-frame > .t-frame-body { margin-top: 12px; }
  .t-toolbar { gap: 8px; }
  .t-toolbar-end { margin-left: 0; width: 100%; }
  .t-weekstep { width: 100%; justify-content: space-between; }
  .t-ws-label { font-size: 0.875rem; }

  .t-figs, .t-figs--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .t-fig { padding: 10px 12px; }
  .t-fig-v { font-size: 1.5rem; }
  .t-fig-more { display: none; }
  .t-ph-actions { width: 100%; }
  .t-cl-step { grid-template-columns: 32px minmax(0, 1fr); }
  .t-cl-a { grid-column: 2; justify-content: flex-start; }
  .t-cl-prog { min-width: 0; width: 100%; }
  .t-slist li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .t-sl-a { grid-column: 1; }

  /* tables become stacked rows: the main cells first, the rest small beneath */
  .t-dt-sortsel { display: flex; }
  .t-dt-scroll:has(> .t-dt:not(.t-dt--plain)) { overflow-x: visible; }
  .t-dt:not(.t-dt--plain) thead { display: none; }
  .t-dt:not(.t-dt--plain), .t-dt:not(.t-dt--plain) tbody { display: block; width: 100%; }
  .t-dt:not(.t-dt--plain) caption { display: block; }
  .t-dt:not(.t-dt--plain) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 4px; border-bottom: 1px solid var(--t-feint); }
  .t-dt:not(.t-dt--plain) td, .t-dt:not(.t-dt--plain) tbody th { display: block; padding: 0; border: none; text-align: left; font-size: 0.875rem; }
  .t-dt:not(.t-dt--plain) .t-dt-main { font-size: 1rem; }
  .t-dt:not(.t-dt--plain) tbody th.t-dt-main { flex: 1 1 auto; }
  .t-dt:not(.t-dt--plain) .t-dt-sub[data-label]::before { content: attr(data-label) " "; color: var(--ink-soft); font-size: 0.8125rem; font-weight: 600; }
  .t-dt:not(.t-dt--plain) .t-dt-hide { display: none; }
  .t-dt:not(.t-dt--plain) .t-dt-sel { order: -1; width: auto; }
  .t-dt tbody tr:hover > * { background: transparent; }
  .t-dt:not(.t-dt--plain) .t-dt-empty td { width: 100%; }

  .t-selbar { bottom: calc(10px + var(--t-bottom-h)); padding: 8px 10px; gap: 6px; }

  /* dialogs and sheets become bottom sheets */
  .t-dialog { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 16px 16px 0 0; max-height: 88dvh; }
  .t-sdlg--side, .t-sdlg--centre { margin: auto auto 0; width: 100vw; max-width: 100vw; height: fit-content; max-height: 88dvh; border-radius: 16px 16px 0 0; border-right: 2px solid var(--ink); }

  .t-bottom {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--t-bottom-h); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--paper-light); border-top: 1.5px solid var(--ink);
  }
  .t-bottom[hidden] { display: none; }
  .teach .t-bb {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 44px; border: none; background: none; color: var(--ink-soft); text-decoration: none; cursor: pointer;
    font: 700 0.72rem/1.1 var(--t-font); padding: 0 2px; text-align: center;
  }
  .teach .t-bb[aria-current="page"] { color: var(--ink); }
  .t-bb[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 4px; border-radius: 0 0 4px 4px; background: var(--ink); }
  .t-bb-badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--think-ink); color: #fff; font-style: normal; font-size: 0.6875rem; line-height: 1.5; }
  body.is-teachit .t-main { padding-bottom: 0; }
}

@media (max-width: 420px) {
  .t-sw-year { display: none; }
  .t-cb-code .t-btn--icon.t-btn--small { width: 36px; min-width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .t-skel-line { animation: none; }
}

/* ---------- print basics (every print view is its own document: printDocument in ui.js) ---------- */

@media print {
  body.teach, body.is-teachit { background: #fff; color: #000; }
  .t-bottom { display: none !important; }
  .p-doc { color: #000; font-size: 10.5pt; }
  .p-doc h1 { font-family: var(--font-display); font-variation-settings: var(--display-axes); font-size: 20pt; margin: 0 0 2mm; }
  .p-doc h2 { font-size: 13pt; margin: 5mm 0 2mm; }
  .p-doc p { margin: 0 0 2mm; }
  .p-meta { color: #333; font-size: 9pt; }
  .p-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .p-table th, .p-table td { text-align: left; padding: 1.2mm 1.5mm; border-bottom: 0.2mm solid #999; }
  .p-table thead th { border-bottom: 0.4mm solid #000; }
  .p-table .num { text-align: right; }
  .p-break { break-after: page; }
  .p-avoid { break-inside: avoid; }
  .p-doc s { text-decoration-thickness: 0.4mm; }
}