/*
 * Teacher chrome + pages. Kit tokens only (static/design-system.css :root) —
 * no literal colours. Bright tokens (--sun/--sky/--mint/--tangerine/--berry)
 * are fills only; text uses the -ink siblings. Every control >= 52px
 * (inputs 56px, primary buttons 60px) per the phase 6 teacher spec.
 */

/* ── Sub-header: caps "TEACHER" + account pill, rendered under the site nav
   on every teacher page (setup, dashboard, class-report, student-report,
   join-sheet, pro, dashboard-locked — never join/student-privacy, which are
   student-facing). ───────────────────────────────────────────────────── */
.t-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.6rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1.5px solid var(--rule-color);
}
.t-subheader__caps {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.t-subheader__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap-min);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--rule-color);
  background: var(--paper-2);
  padding: 0 1rem 0 0.25rem;
  font-weight: 700;
  color: var(--ink) !important;
  text-decoration: none !important;
}
.t-subheader__pill:hover, .t-subheader__pill:focus {
  border-color: var(--ink);
}
.t-subheader__pill--signin {
  padding: 0 1rem;
}
.t-subheader__initials {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--currant);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
}

/* ── Generic flat card, replaces ad-hoc Bulma .box (shadowed) usage. ───── */
.t-card {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--r-xl);
  box-shadow: none;
  padding: 2rem 2.25rem;
}

/* ── Set up your class (/games/teacher/) ───────────────────────────────
   Two columns .9fr/1.1fr, 48px gap; stacks under 760px. */
.ts-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: start;
  padding: 1.5rem 0 2rem;
}
@media (max-width: 760px) {
  .ts-wrap { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
.ts-h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
}
.ts-lede {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 36ch;
  margin: 0 0 1.5rem;
}
.ts-steps {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.ts-step {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.ts-step-num {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper-3);
  font-family: var(--font-display);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-step-text {
  padding-top: 0.3rem;
}
.ts-form-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ts-card.is-quiet {
  border: 1.5px solid var(--rule-color);
  padding: 1.5rem 2.25rem;
}
.ts-card h2 { margin: 0 0 1rem; }
.ts-card a:not(.td-btn), .ts-home a { color: var(--sky-ink); text-decoration: underline; }
.ts-hint { font-weight: 400; color: var(--ink-soft); font-size: 0.92rem; }
/* Inputs: kit floor is 56px (td-input), set-up page inputs get the ink border. */
.ts-input { width: 100%; height: 56px; border: 2px solid var(--ink); box-shadow: none; }
.ts-btn-primary { width: 100%; height: 60px; margin-top: 1rem; }
.ts-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; }
.ts-label { font-weight: 700; color: var(--ink); }
.ts-error { color: var(--berry-ink); font-weight: 700; margin: 0.5rem 0 0; }
.ts-btn-open { height: 52px; min-height: 52px; }
.ts-open { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.ts-open .ts-input { flex: 1 1 160px; text-transform: uppercase; letter-spacing: 0.1em; }
.ts-classes[hidden] { display: none; }
.ts-classes { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.ts-classes a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: var(--tap-min); padding: 0.5rem 1rem; border: 1.5px solid var(--rule-color); border-radius: var(--r-md); background: var(--paper); color: var(--ink) !important; text-decoration: none !important; font-weight: 700; }
.ts-classes a:hover, .ts-classes a:focus { border-color: var(--ink); }
.ts-classes code { background: none; color: var(--ink-soft); font-weight: 700; letter-spacing: 0.08em; }
.ts-home { max-width: 560px; margin: 1.25rem auto 0; text-align: center; font-size: 0.9rem; color: var(--ink-soft); }
/* Silent demo: create → add names → students tap their name. */
.ts-demo { margin: 2rem 0 0; }
.ts-demo video { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: var(--r-lg); background: var(--paper-2); }
.ts-demo figcaption { text-align: center; font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.5rem; }

/* Grade chips — radiogroup, 52px, selected = ink/white. */
.ts-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.ts-chip {
  min-width: 52px;
  height: 52px;
  padding: 0 0.9rem;
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.ts-chip[aria-checked="true"] {
  background: var(--ink);
  color: #fff;
}
/* The hidden native select stays in the DOM (synced by the chips) so the
   existing create-flow script and e2e select_option step keep working —
   visually hidden, not display:none, so it stays actionable. */
.ts-grade-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 480px) {
  .ts-card, .ts-card.is-quiet { padding: 1.5rem 1.1rem; }
}

/* ── Dashboard (/games/teacher/<code>/) — screens 06/07. ─────────────── */
.td-wrap { max-width: 1120px; padding: 0 16px 3rem; }
.td-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.td-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.td-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 4.5vw, 44px); line-height: 1.05; letter-spacing: -0.03em; margin: 4px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.td-h2 { font-family: var(--font-display); font-weight: 900; font-size: 24px; margin: 0; color: var(--ink); }
.td-caps { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin: 0; }
.td-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.td-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Outlined pill button (header actions, Full report, Pick a skill). */
.td-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0 18px; border-radius: var(--r-pill); border: 2px solid var(--ink); background: transparent; color: var(--ink) !important; font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none !important; cursor: pointer; max-width: 100%; }
.td-btn:hover, .td-btn:focus-visible { background: var(--paper-3); }
.td-btn:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 2px; }
/* Filled primary (Assign, Add students, Get share code, Claim this class):
   white text only on --tangerine-ink / --ink. */
.td-btn--fill { background: var(--tangerine-ink); border-color: var(--tangerine-ink); color: #fff !important; }
.td-btn--fill:hover, .td-btn--fill:focus-visible { background: var(--ink); border-color: var(--ink); }
.td-btn--danger { border-color: var(--berry-ink); color: var(--berry-ink) !important; }
.td-btn--danger:hover, .td-btn--danger:focus-visible { background: var(--berry-tint); }
.td-btn--icon { width: 52px; height: 52px; padding: 0; flex: none; font-size: 22px; }
/* Bulma .button on teacher pages (re-skinned to a pill in design-system.css,
   which loads first) meets the kit's 52px floor, not the content-page 44px. */
body:not(.synonyms-brand) .button.button { min-height: var(--tap-min); }
/* "See what your students see" keeps its pinned Bulma class string
   (tests.py) as a hook; it renders as a .td-btn pill. */
.td-wrap .button.td-student-view { display: inline-flex; align-items: center; gap: 0.5rem; height: auto; min-height: 52px; padding: 0 18px; border-radius: var(--r-pill); border: 2px solid var(--ink); background: transparent; color: var(--ink) !important; font-size: 1rem; font-weight: 700; box-shadow: none; transform: none; white-space: normal; max-width: 100%; }
.td-wrap .button.td-student-view:hover, .td-wrap .button.td-student-view:focus-visible { background: var(--paper-3); transform: none; }
.td-btn--solid { background: var(--ink); color: #fff !important; align-self: flex-start; }
.td-btn--solid:hover, .td-btn--solid:focus-visible { background: var(--currant); }
.td-link { font-weight: 700; font-size: 15px; color: var(--sky-ink); text-decoration: underline; display: inline-flex; align-items: center; min-height: var(--tap-min); }
.td-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* Top grid: code card + (step 1 | this week's skill). */
.td-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; margin-bottom: 1.5rem; }
.td-codecard { background: var(--currant); color: #fff; border-radius: var(--r-xl); padding: 26px 28px; display: flex; flex-direction: column; gap: 6px; }
.td-codecard__caps { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--paper-3); margin: 0; }
.td-codecard__code { margin: 0; }
.td-codecard .td-code { font-family: var(--font-body); font-weight: 700; font-size: 48px; letter-spacing: 0.14em; line-height: 1.1; color: #fff; white-space: nowrap; }
.td-codecard__url { font-size: 16px; color: var(--paper-3); margin: 0; }
.td-codecard__url strong { color: #fff; }
.td-codecard__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.td-cc-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: var(--r-pill); font-weight: 700; font-size: 1rem; cursor: pointer; }
.td-cc-btn--copy { background: var(--sun); color: var(--ink); border: 2px solid var(--sun); }
.td-cc-btn--board { background: transparent; color: #fff; border: 2px solid #fff; }
.td-cc-btn:focus-visible, .td-board__close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Step cards (empty class). Step 1 carries the ink border, 2–3 the hairline. */
.td-stepcard { background: var(--paper-2); border: 2px solid var(--ink); border-radius: var(--r-xl); padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.td-stepcard.is-quiet { border: var(--line); border-radius: var(--r-lg); padding: 22px 24px; background: transparent; }
.td-stepcard [hidden], .td-board[hidden], .td-nomatch[hidden], .td-rows > li[hidden] { display: none !important; }
.td-stepcard__head { display: flex; align-items: center; gap: 10px; }
.td-stepcard h2 { font-family: var(--font-display); font-weight: 900; font-size: 22px; margin: 0; color: var(--ink); }
.td-stepcard.is-quiet h2 { font-family: var(--font-body); font-weight: 700; font-size: 18px; }
.td-stepcard p { margin: 0; color: var(--ink-soft); }
.td-step-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-family: var(--font-display); background: var(--paper-3); color: var(--ink); }
.td-stepcard.is-current .td-step-num { background: var(--tangerine-dark); color: #fff; }
.td-stepcard.is-done .td-step-num { background: var(--mint-ink); color: #fff; }
.td-step-tag { display: inline-block; margin-left: 0.4rem; font-family: var(--font-body); font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); vertical-align: middle; background: var(--mint-tint); color: var(--mint-ink); }
.td-step-tag.is-optional { background: var(--paper-3); color: var(--ink-soft); }
.td-step-body > * + * { margin-top: 0.6rem; }
.td-steps2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 1.5rem; }
.td-stepcard a:not(.td-btn):not(.button), .td-keep a:not(.td-btn), .td-done a:not(.td-btn):not(.button), .td-card a:not(.td-btn) { color: var(--sky-ink); text-decoration: underline; }
.td-hint { font-size: 15px; color: var(--ink-soft); margin: 0; }
.td-status { font-size: 15px; font-weight: 700; color: var(--mint-ink); margin: 0; }
.td-status:empty { display: none; }
.td-result { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.td-result:empty { display: none; }
/* One input style: 56px, 2px --ink-soft, setup-page radius (--r-sm), focus ring. */
.td-input { height: 56px; min-width: 0; max-width: 100%; padding: 0 14px; border: 2px solid var(--ink-soft); border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink); font: inherit; font-size: 17px; box-shadow: none; }
.td-input:focus { outline: 3px solid var(--sky-ink); outline-offset: 2px; border-color: var(--ink); }
.td-input--area { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.td-input--skill { flex: 0 1 260px; }
.td-input--num { width: 96px; }
.td-input--date { flex: 0 1 190px; }
.td-input--grade { flex: 0 1 200px; }
.td-input--grow { flex: 1 1 200px; }
.td-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.td-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
/* Checkbox rows: 52px label, 24px native box. */
.td-check { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; font-weight: 700; color: var(--ink); }
.td-check input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--ink); cursor: pointer; }
.td-checks { display: flex; gap: 4px 20px; flex-wrap: wrap; padding-top: 4px; }
.td-roster-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.td-roster-add .td-input--area { flex: 1 1 240px; }
/* Roster: name left, actions right, 64px rows, divider lines. */
.td-roster-list { margin: 0; padding: 0; list-style: none; border-top: var(--line); }
.td-roster-list:not(:has(li)) { border-top: 0; }
.td-rs-row { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 6px 0; border-bottom: var(--line); }
.td-rs-row .rs-name { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.td-rs-row.is-inactive .rs-name { color: var(--ink-soft); font-weight: 400; }

/* This week's skill. */
.td-week { background: var(--paper-2); border: var(--line); border-radius: var(--r-xl); padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.td-week__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.td-week__skill { display: flex; align-items: center; gap: 12px; }
.td-week__icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; font-size: 26px; }
.td-week__name { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1.15; margin: 0; color: var(--ink); }
.td-week__meta { font-size: 15px; color: var(--ink-soft); margin: 0; }
.td-week__progress { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; margin-top: 6px; }
.td-week__pct { color: var(--ink-soft); }
.td-bar { height: 12px; border-radius: 6px; background: var(--paper-3); overflow: hidden; }
.td-bar__fill { height: 100%; background: var(--mint); border-radius: 6px; }
/* Family / avatar tints: fill = -tint, glyph = -ink. */
.td-tone--tangerine { background: var(--tangerine-tint); color: var(--tangerine-ink); }
.td-tone--mint { background: var(--mint-tint); color: var(--mint-ink); }
.td-tone--sky { background: var(--sky-tint); color: var(--sky-ink); }
.td-tone--sun { background: var(--sun-tint); color: var(--sun-ink); }
.td-tone--berry { background: var(--berry-tint); color: var(--berry-ink); }

/* Setup-complete line. */
.td-done { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; background: var(--paper-2); border: var(--line); border-radius: var(--r-md); padding: 0.6rem 1rem; margin-bottom: 1.5rem; }
.td-done > i { color: var(--mint-ink); font-size: 1.3rem; }

/* Show on board overlay. */
.td-board { position: fixed; inset: 0; z-index: 1000; background: var(--currant); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 24px 16px; text-align: center; }
.td-board__caps { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--paper-3); margin: 0; }
.td-board__code { font-family: var(--font-body); font-weight: 700; font-size: clamp(64px, 14vw, 200px); letter-spacing: 0.14em; line-height: 1; margin: 0; white-space: nowrap; }
.td-board__url { font-size: clamp(20px, 3vw, 36px); font-weight: 700; margin: 0; }
.td-board__close { min-height: 60px; padding: 0 28px; border-radius: var(--r-pill); border: 2px solid #fff; background: transparent; color: #fff; font-weight: 700; font-size: 1.1rem; cursor: pointer; margin-top: 1rem; }
body.td-board-on { overflow: hidden; }

/* Students table (Option A). */
.td-section { margin-bottom: 2rem; }
.td-students-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.td-students-head .td-h2 { flex: 1; }
.td-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.td-filter { min-height: 52px; padding: 0 16px; border-radius: var(--r-pill); border: 2px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer; }
.td-filter[aria-pressed="true"] { background: var(--ink); color: #fff; }
.td-table { background: var(--paper-2); border: var(--line); border-radius: var(--r-lg); overflow: hidden; }
.td-rows { list-style: none; margin: 0; padding: 0; }
.td-tr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 0.8fr) 190px; gap: 16px; padding: 12px 20px; border-bottom: var(--line); align-items: center; min-height: 64px; }
.td-th { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); min-height: 0; }
.td-rowd > summary { cursor: pointer; list-style: none; }
.td-rowd > summary::-webkit-details-marker { display: none; }
.td-rowd > summary:hover { background: var(--paper); }
.td-rowd > summary:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: -3px; }
.td-namecell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.td-namecell__txt { min-width: 0; display: flex; flex-direction: column; }
.td-name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.td-sub { display: none; font-size: 14px; color: var(--ink-soft); }
.td-av { width: 38px; height: 38px; border-radius: 50%; color: var(--ink); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.td-col { font-size: 16px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.td-col--acc { font-weight: 700; }
.td-col--soft { color: var(--ink-soft); }
.td-statuscell { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.td-caret { color: var(--ink-soft); transition: transform 0.15s; }
.td-rowd[open] .td-caret { transform: rotate(180deg); }
.td-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 5px 12px; font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.td-pill--progress { background: var(--sky-tint); color: var(--sky-ink); }
.td-pill--done { background: var(--mint-tint); color: var(--mint-ink); }
.td-pill--help { background: var(--berry-tint); color: var(--berry-ink); }
.td-pill--none { background: var(--paper-3); color: var(--ink-soft); }
.td-detail { padding: 14px 20px 18px 70px; border-bottom: var(--line); background: var(--paper); display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.td-detail p { margin: 0; }
.td-nomatch { margin: 0; padding: 20px; color: var(--ink-soft); }
.td-foot { font-size: 15px; color: var(--ink-soft); margin-top: 12px; }
/* Deactivated students with history: collapsed list, each to its report. */
.td-former { margin-top: 1rem; }
.td-former > summary { display: flex; align-items: center; min-height: 52px; cursor: pointer; font-weight: 700; color: var(--ink); }
.td-former ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.td-former li { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
/* Trend bars on the student report reuse this class. */
.td-acc-bar { height: 6px; background: var(--paper-3); border-radius: var(--r-pill); overflow: hidden; min-width: 60px; }
.td-empty { border: 2px dashed var(--ink-faint); border-radius: var(--r-lg); padding: 28px; text-align: center; color: var(--ink-soft); }

/* Per-student detail chips (inside each expanded row). */
.td-game-chip { display: inline-block; background: var(--sky-tint); color: var(--sky-ink); border-radius: var(--r-sm); padding: 0.15rem 0.5rem; font-size: 14px; margin: 0.15rem; }
/* Berry is this dashboard's colour for "struggling with this" (see
   .td-hard-word). The count is stated in words too — colour never carries
   the meaning alone. */
.td-missed-chip { display: inline-block; background: var(--berry-tint); color: var(--berry-ink); border-radius: var(--r-sm); padding: 0.15rem 0.5rem; font-size: 14px; margin: 0.15rem; font-weight: 600; }
.td-pattern-chip { display: inline-block; border-radius: var(--r-sm); padding: 0.15rem 0.5rem; font-size: 14px; margin: 0.15rem; font-weight: 600; }
.td-pattern-chip.is-struggling { background: var(--berry-tint); color: var(--berry-ink); }
.td-pattern-chip.is-secure { background: var(--mint-tint); color: var(--mint-ink); }
.td-pattern-chip.is-developing { background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule-color); }
.td-pattern-chip.is-unknown { background: var(--paper-2); color: var(--ink-soft); border: 1px dashed var(--rule-color); }
.td-meta { font-size: 14px; color: var(--ink-soft); }
.td-stars { color: var(--sun-ink); }

/* Words to revisit, assignments, roster, more tools, settings. */
.td-hard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.td-hard-word { background: var(--paper); border-radius: var(--r-md); border: 2px solid var(--berry-tint); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.td-hard-word-text { font-weight: 600; color: var(--ink); }
.td-hard-acc { font-size: 14px; color: var(--berry-ink); font-weight: 600; }
/* One card style below the table: .t-card with the This-week card's padding and gap. */
.td-card { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; padding: 26px 28px; border: var(--line); min-width: 0; }
.td-card > * { margin: 0; }
.td-h2 { display: flex; align-items: center; gap: 10px; }
.td-h2 > i { font-size: 22px; flex: none; }
.td-h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 800; font-size: 18px; color: var(--ink); margin: 0; }
.td-h3 > i { font-size: 20px; }
.td-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.td-student-card { background: var(--paper); border-radius: var(--r-lg); border: var(--line); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.td-student-header { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.td-student-name { font-weight: 700; font-size: 18px; color: var(--ink); }
.td-student-actions { margin-left: auto; }
.td-help { color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.td-help ol { padding-left: 1.5rem; margin: 0 0 0.75rem; }
.td-help p { margin: 0; }
.td-help a { color: var(--sky-ink); text-decoration: underline; }
.td-flash { display: flex; align-items: center; gap: 0.6rem; background: var(--mint-tint); color: var(--ink); border: 1.5px solid var(--mint-ink); border-radius: var(--r-md); padding: 0.75rem 1rem; margin-bottom: 1.25rem; }
.td-flash i { color: var(--mint-ink); font-size: 1.4rem; }
/* Kit notice (claim banner here; free-plan / empty notes on the reports):
   tinted fill, 2px border, --r-lg, Phosphor info icon. */
.t-notice { display: flex; gap: 12px; align-items: flex-start; background: var(--paper-2); border: 2px solid var(--rule-color); border-radius: var(--r-lg); padding: 16px 20px; margin: 0 0 1.5rem; color: var(--ink); font-size: 16px; }
.t-notice--sun { background: var(--sun-tint); border-color: var(--sun); }
.t-notice--mint { background: var(--mint-tint); border-color: var(--mint-ink); }
.t-notice > i { font-size: 24px; color: var(--ink); flex: none; }
.t-notice > div, .t-notice > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.t-notice p { margin: 0; }
.t-notice a:not(.td-btn) { color: var(--sky-ink); text-decoration: underline; }
.td-keep .td-why { font-size: 15px; }
.td-more { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 12px; }
.td-more > .td-h2 { margin-bottom: 4px; }
.td-more > .td-card { margin-bottom: 4px; }
/* Details toggles: 56px summary rows with a caret, like the students-table expander. */
.td-settings > summary, .td-disclose > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; cursor: pointer; list-style: none; color: var(--ink); }
.td-settings > summary::-webkit-details-marker, .td-disclose > summary::-webkit-details-marker { display: none; }
.td-settings > summary:focus-visible, .td-disclose > summary:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 2px; border-radius: var(--r-sm); }
.td-settings[open] > summary .td-caret, .td-disclose[open] > summary .td-caret { transform: rotate(180deg); }
.td-settings { padding-top: 12px; padding-bottom: 12px; }
.td-settings[open] { padding-bottom: 26px; }
.td-settings > h3 { margin-top: 8px; }
.td-disclose { border-top: var(--line); }
.td-disclose > summary { font-weight: 700; }

@media (max-width: 760px) {
  .td-top, .td-steps2 { grid-template-columns: minmax(0, 1fr); }
}
/* < 640px: table rows collapse to name + status; the sub-line carries skill · accuracy. */
@media (max-width: 640px) {
  .td-hide-sm, .td-th, .td-col { display: none !important; }
  .td-sub { display: block; }
  .td-tr { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .td-detail { padding: 14px; }
  .td-head-actions { width: 100%; }
  .td-head-actions > * { flex: 1 1 40%; justify-content: center; }
  .td-codecard, .td-stepcard, .td-week { padding: 22px 18px; }
  .td-codecard .td-code { font-size: 40px; }
  .td-card { padding: 22px 18px; }
  .td-student-actions { margin-left: 0; }
}

/* ── Class report = skill grid (/games/teacher/<code>/report/), screen 08:
   sticky name column, 52px skill-heading toggles, 40px state cells, ink
   assign bar. The table scrolls inside .cr-scroll; the page never does. ── */
.cr-page { max-width: 1180px; padding: 1.5rem 1rem 3rem; }
.cr-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; }
.cr-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 4.5vw, 44px); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); margin: 4px 0 0.25rem; }
.cr-meta, .cr-sub, .cr-hint, .cr-foot { color: var(--ink-soft); }
.cr-sub { font-size: 0.9rem; margin: 0 0 0.75rem; }
.cr-hint { font-size: 15.5px; margin-top: 1rem; }
.cr-foot { font-size: 0.8rem; margin-top: 0.75rem; }
.cr-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cr-note { background: var(--paper-3); border-radius: var(--r-md); padding: 0.75rem 1rem; font-size: 0.9rem; margin-bottom: 1rem; color: var(--ink); }
.cr-legend { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0 0 0.75rem; padding: 0; font-size: 14.5px; }
.cr-legend li { display: flex; align-items: center; gap: 6px; }
.cr-legend .cr-cell { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.cr-scroll { overflow-x: auto; background: var(--paper-2); border: var(--line); border-radius: var(--r-lg); }
.cr-table { border-collapse: collapse; width: 100%; }
.cr-table th, .cr-table td { border-bottom: var(--line); padding: 4px; text-align: center; vertical-align: middle; }
.cr-table thead th { padding: 8px 4px; vertical-align: bottom; min-width: 96px; }
.cr-table .cr-name { position: sticky; left: 0; z-index: 1; background: var(--paper-2); text-align: left; padding: 6px 16px; font-weight: 700; white-space: nowrap; min-width: 150px; }
.cr-table thead .cr-name { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.cr-table .cr-name a { color: var(--ink); }
.cr-skill { width: 100%; min-height: 52px; border-radius: 10px; border: 2px solid transparent; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2; padding: 6px; cursor: pointer; }
.cr-skill:hover { background: var(--paper-3); }
.cr-skill:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.cr-skill[aria-pressed="true"] { background: var(--sun-tint); border-color: var(--ink); }
.cr-fam { display: block; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.cr-fam--sky { color: var(--sky-ink); }
.cr-fam--tangerine { color: var(--tangerine-ink); }
.cr-fam--mint { color: var(--mint-ink); }
.cr-fam--berry { color: var(--berry-ink); }
.cr-fam--sun { color: var(--sun-ink); }
.cr-fam--ink { color: var(--ink-soft); }
.cr-td.is-picked { background: var(--sun-tint); }
.cr-cell { width: 40px; height: 40px; margin: 0 auto; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.cr-cell.is-mastered { background: var(--mint-tint); color: var(--mint-ink); }
.cr-cell.is-practising { background: var(--sky-tint); color: var(--sky-ink); }
.cr-cell.is-help { background: var(--berry-tint); color: var(--berry-ink); }
.cr-cell.is-none { background: transparent; border: 2px dashed var(--ink-faint); color: var(--ink-soft); }
.cr-flag { display: inline-block; background: var(--berry-tint); color: var(--berry-ink); border-radius: var(--r-sm); padding: 0.1rem 0.4rem; font-size: 0.75rem; font-weight: 700; margin-left: 0.3rem; }
.cr-bar { background: var(--ink); color: var(--paper-2); border-radius: var(--r-lg); padding: 18px 22px; margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cr-bar[hidden] { display: none; }
.cr-bar__text { flex: 1; min-width: 220px; }
.cr-bar__title { font-weight: 700; font-size: 18px; margin: 0; }
.cr-bar__games { font-size: 15px; color: var(--paper-3); margin: 0; }
.cr-bar__status { font-size: 15px; margin: 0.25rem 0 0; }
.cr-bar__status:empty { display: none; }
.cr-bar__status a { color: var(--paper-2); text-decoration: underline; font-weight: 700; }
.cr-bar__btn { min-height: 52px; border-radius: var(--r-pill); border: 2px solid var(--paper-2); background: transparent; color: var(--paper-2); padding: 0 20px; font: inherit; font-weight: 700; cursor: pointer; }
.cr-bar__btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.cr-bar__btn--sun { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.cr-bar__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.cr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .cr-bar__btn { flex: 1 1 100%; }
  .cr-table .cr-name { min-width: 110px; padding: 6px 10px; }
}
@media print {
  nav, .navbar, footer, .footer, .breadcrumb, .button, .no-print, .a11y-toggle, .cr-bar, .cr-hint { display: none !important; }
  /* Dashboard: controls and toggles never print. */
  .td-btn, .td-cc-btn, .td-filters, .td-input, .td-check, .td-form, .td-roster-add, .td-settings, .td-disclose, .td-keep, .td-board { display: none !important; }
  body { background: #fff !important; }
  .cr-scroll { overflow: visible; border: none; }
  .cr-name { position: static !important; }
  .cr-skill { border: none !important; background: none !important; min-height: 0; padding: 2px; }
  .cr-table { font-size: 11px; }
  .cr-table th, .cr-table td { padding: 2px !important; }
  .cr-page { padding: 0 !important; }
  .cr-table thead th { min-width: 0; }
  .cr-table .cr-name { min-width: 0; }
  .cr-skill { font-size: 10px; }
  .cr-fam { font-size: 9px; }
  .cr-cell { width: 26px; height: 26px; font-size: 13px; }
  .cr-td.is-picked { background: none !important; }
  .cr-cell { background: #fff !important; color: #000 !important; }
  .cr-cell.is-help { border: 2px solid #000 !important; }
}
/* Named pages: teacher.css carries three print layouts, and unnamed @page
   rules cascade into each other (the last one won, so the class report
   printed portrait). Each layout names its own page, set on <body> so the
   site header and footer share it (a name change forces a page break). */
body:has(.cr-page) { page: cr-report; }
@page cr-report { margin: 1.5cm; size: letter landscape; }

/* ── Student report (/games/teacher/<code>/students/<id>/report/) — moved
   as-is. ─────────────────────────────────────────────────────────────── */
.sr-section { margin-bottom: 2rem; }
.sr-h2 { margin-bottom: 12px; }
/* Recent sessions: 6 columns + a select and a button per row; scroll inside
   the section at phone width instead of widening the page. */
.sr-actions-block { overflow-x: auto; }
.sr-actions-block .sr-actions { flex-wrap: nowrap; }
.sr-row { background: var(--paper-3); border-radius: var(--r-lg); border: 1.5px solid var(--rule-color); padding: 1rem 1.25rem; margin-bottom: 0.75rem; }
.sr-row-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; }
.sr-label { font-weight: 700; color: var(--ink); }
.sr-figure { display: inline-block; border-radius: var(--r-sm); padding: 0.2rem 0.6rem; font-weight: 700; font-size: 0.9rem; }
.sr-figure.is-struggling { background: var(--berry-tint); color: var(--berry-ink); }
.sr-figure.is-secure { background: var(--mint-tint); color: var(--mint-ink); }
.sr-figure.is-developing { background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule-color); }
.sr-figure.is-unknown { background: var(--paper-2); color: var(--ink-soft); border: 1px dashed var(--rule-color); }
.sr-meta { font-size: 0.85rem; color: var(--ink-soft); }
.sr-missed { margin-top: 0.5rem; }
.sr-missed-chip { display: inline-block; background: var(--berry-tint); color: var(--berry-ink); border-radius: var(--r-sm); padding: 0.15rem 0.5rem; font-size: 0.78rem; margin: 0.15rem 0.35rem 0.15rem 0; font-weight: 600; }
.sr-actions { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sr-action-status { font-size: 0.85rem; color: var(--mint-ink); font-weight: 600; }
/* Phase 3 — printable: same page, no fork. White ground, black ink,
   hairline rules — the kit's toner rule (bright tints are fills for
   screen only, never worth a teacher's toner). Site chrome, breadcrumbs
   and every interactive control (nav links, the two action buttons)
   disappear; the name, mastery figures and missed words stay, exactly
   the same precedent as worksheet-base.html's @media print block. */
@media print {
  nav, .navbar, footer, .footer, .breadcrumb, .button, .sr-actions,
  .sr-action-status { display: none !important; }
  body { background: #fff !important; }
  .sr-row {
    background: #fff !important; border: 1px solid #000 !important;
    box-shadow: none !important; break-inside: avoid;
  }
  .sr-label, .sr-meta { color: #000 !important; }
  .sr-figure {
    background: #fff !important; color: #000 !important;
    border: 1px solid #000 !important;
  }
  .sr-missed-chip {
    background: #fff !important; color: #000 !important;
    border: 1px solid #000 !important;
  }
  a[href]:after { content: none !important; }
}
body:has(.sr-page) { page: sr-report; }
@page sr-report { margin: 1.5cm; size: letter; }

/* ── Join sheet (/games/teacher/<code>/join-sheet/) — moved as-is. ─────── */
.js-sheet { max-width: 720px; margin: 1.5rem auto 3rem; background: #fff; border: 2px solid var(--ink); border-radius: var(--r-lg); padding: 2rem 2.25rem; }
/* clamp() instead of a fixed size: at print widths (~800px+) these hit their
   max and render exactly as before; below ~490px (this on-screen preview is
   shown before printing too) they shrink so the un-breakable code/URL never
   force horizontal scroll (found at 390px: 8B3WT7 needed 383px in a 282px box). */
.js-code { font-size: clamp(2.1rem, 13vw, 4rem); font-weight: 900; letter-spacing: 0.3em; text-align: center; margin: 0.5rem 0 0.25rem; }
.js-url { font-size: clamp(1.1rem, 5vw, 1.6rem); font-weight: 700; text-align: center; }
.js-h1 { justify-content: center; text-align: center; margin: 0 0 0.25rem; }
.js-h2 { margin: 2rem 0 0.5rem; }
.js-names { columns: 3; column-gap: 1.5rem; font-size: 1.05rem; line-height: 2; }

/* Join cards (screen 08): one dashed card per active student, printed 4-up
   after the class sheet (which stays page 1). */
.jc-section { max-width: 900px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.jc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.jc-card { border: 1.5px dashed var(--ink-soft); border-radius: var(--r-md); padding: 16px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.jc-name { font-family: var(--font-display); font-weight: 900; font-size: 22px; }
.jc-url { font-size: 14px; color: var(--ink-soft); }
.jc-code { font-weight: 700; font-size: 26px; letter-spacing: 0.14em; }
@media print {
  nav, .navbar, footer, .footer, .breadcrumb, .no-print, .a11y-toggle { display: none !important; }
  body { background: #fff !important; }
  .js-sheet { border: none; margin: 0; padding: 0; max-width: 100%; }
  .jc-section { break-before: page; margin: 0; padding: 0; max-width: 100%; }
  .jc-grid { grid-template-columns: repeat(2, 1fr); }
  .jc-card { break-inside: avoid; }
  .jc-card:nth-child(4n) { page-break-after: always; }
}
body:has(.js-sheet) { page: join-sheet; }
@page join-sheet { margin: 1.5cm; size: letter; }

/* ── Student join (/join/) — screen 09. Student-facing: no .t-subheader on
   this page, but it shares the kit tokens so its styles live here rather
   than an inline <style> block (moved from join.html's own <style>, kept
   under this dedicated section). Avatar tints reuse .td-tone--* above. */
.jn-wrap { max-width: 720px; margin: 0 auto; padding: 40px 16px 60px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.jn-brand { display: flex; align-items: center; gap: 10px; }
.jn-brand__mark { width: 44px; height: 44px; border-radius: 12px; background: var(--tangerine); color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 23px; display: flex; align-items: center; justify-content: center; }
.jn-brand__name { font-family: var(--font-display); font-weight: 900; font-size: 21px; }
.jn-step { display: none; width: 100%; }
.jn-step.active { display: flex; flex-direction: column; align-items: center; }
.jn-card { max-width: 520px; background: var(--paper-2); border: var(--line); border-radius: var(--r-xl); padding: 36px; gap: 20px; text-align: center; }
.jn-h1 { font-family: var(--font-display); font-weight: 900; font-size: 32px; margin: 0; letter-spacing: -0.02em; }
/* Programmatically focused on every step change (tabindex="-1"); no ring
   for the non-keyboard case, a normal one when :focus-visible applies. */
.jn-h1:focus { outline: none; }
.jn-h1:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 4px; }
.jn-sub { font-size: 17px; color: var(--ink-soft); margin: 0; }
.jn-caps { font-size: 15px; font-weight: 700; color: var(--ink-soft); margin: 0 0 6px; }
.jn-code-input { width: 100%; max-width: 340px; height: 80px; margin: 4px 0; border-radius: var(--r-lg); border: 3px solid var(--ink); background: var(--paper-2); text-align: center; font-family: var(--font-body); font-weight: 700; font-size: 40px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); padding: 0 0 0 0.22em; }
.jn-next { width: 100%; max-width: 340px; min-height: 60px; border-radius: var(--r-pill); border: none; background: var(--tangerine-dark); color: #fff !important; font-family: var(--font-display); font-weight: 900; font-size: 19px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none !important; margin-top: 8px; }
.jn-next:hover, .jn-next:focus-visible { background: var(--tangerine-ink); }
.jn-next:disabled { background: var(--paper-3); color: var(--ink-faint) !important; cursor: not-allowed; }
.jn-error { color: var(--berry-ink); font-weight: 700; margin: 0; }
.jn-link { min-height: var(--tap-min); border: none; background: transparent; color: var(--sky-ink); font-weight: 700; font-size: 16px; cursor: pointer; }
.jn-names { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 4px 0 18px; }
.jn-name { min-height: 72px; border-radius: var(--r-lg); border: 2px solid var(--ink); background: var(--paper-2); color: var(--ink); font-weight: 700; font-size: 19px; display: flex; align-items: center; gap: 12px; padding: 0 14px; text-align: left; cursor: pointer; }
.jn-name:hover, .jn-name:focus-visible { background: var(--tangerine-tint); }
.jn-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex: none; }
.jn-avatar--lg { width: 84px; height: 84px; font-size: 30px; }
.jn-skill-card { width: 100%; display: flex; align-items: center; gap: 12px; border: var(--line); border-radius: var(--r-lg); padding: 14px 18px; text-align: left; }
.jn-skill-card[hidden] { display: none; }
.jn-skill-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--tangerine-tint); color: var(--tangerine-ink); display: flex; align-items: center; justify-content: center; flex: none; font-size: 26px; }
.jn-skill-name { font-weight: 700; font-size: 18px; }
.jn-skill-meta { font-size: 15px; color: var(--ink-soft); }
/* Home players: name + PIN profile (moved here from the teacher setup page). */
.jn-home { width: 100%; max-width: 520px; margin-top: 4px; background: var(--paper-2); border: 1.5px solid var(--rule-color); border-radius: var(--r-lg); padding: 0 1.25rem; }
.jn-home summary { display: flex; align-items: center; gap: 0.5rem; min-height: var(--tap-min); cursor: pointer; font-weight: 700; color: var(--ink); }
.jn-home[open] { padding-bottom: 1.25rem; }
.jn-home .td-input { width: 100%; }
.jn-home-lead { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 1rem; }
.jn-home-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.jn-home-ok { color: var(--mint-ink); font-weight: 700; margin: 0.5rem 0 0; }
@media (max-width: 640px) {
  .jn-card { padding: 24px; }
}

/* ── Teacher Pro (/pro/). ─────────────────────────────────────────────── */
.pr-wrap { max-width: 900px; margin: 0 auto; padding: 1.5rem 16px 3rem; text-align: center; color: var(--ink); }
.pr-wrap .td-h2 { justify-content: center; }
.pr-lede { max-width: 620px; margin: 0.75rem auto 0; color: var(--ink-soft); font-size: 1.05rem; }
.pr-notice { max-width: 620px; margin: 1.25rem auto 0; text-align: left; }
.pr-cta { width: 100%; }
.pr-cta + .pr-cta { margin-top: 0.5rem; }
.pr-small { font-size: 0.9rem; color: var(--ink-soft); }
.pr-on { font-weight: 700; color: var(--mint-ink); }
.pr-free { margin-top: 2.5rem; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; max-width: 760px; margin: 1.5rem auto; }
.pr-card { background: var(--paper-2); border: 2px solid var(--ink); border-radius: var(--r-lg); padding: 1.5rem; }
.pr-card.is-pro { background: var(--sun-tint); }
.pr-price { font-size: 2rem; font-weight: 900; }
.pr-list { list-style: none; padding: 0; margin: 1rem 0; }
.pr-list li { padding: 0.3rem 0; display: flex; gap: 0.5rem; align-items: flex-start; text-align: left; }
.pr-list i { color: var(--mint-ink); margin-top: 0.2rem; }

/* ── Prose pages (/student-privacy/), locked dashboard, /account/. ─────── */
.t-prose { max-width: 760px; margin: 0 auto; padding: 1.5rem 16px 3rem; display: flex; flex-direction: column; gap: 16px; color: var(--ink); font-size: 17px; line-height: 1.6; }
.t-prose .t-card, .t-acct .t-card { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.t-prose p, .t-prose ul, .t-acct p, .t-acct ul { margin: 0; }
.t-list { list-style: disc; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 6px; }
.t-prose a, .t-acct a:not(.td-btn) { color: var(--sky-ink); text-decoration: underline; }
.t-lede { font-size: 19px; }
.t-locked { max-width: 640px; margin: 0 auto; padding: 2rem 16px 4rem; }
.t-locked .t-card { background: var(--berry-tint); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.t-locked p { margin: 0; }
.t-acct { max-width: 760px; margin: 0 auto; padding: 1.5rem 16px 3rem; display: flex; flex-direction: column; gap: 16px; color: var(--ink); font-size: 17px; }
.t-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.t-row .td-input { flex: 1 1 180px; text-transform: uppercase; letter-spacing: 0.1em; }
@media (max-width: 480px) {
  .t-prose .t-card, .t-acct .t-card, .t-locked .t-card { padding: 20px; }
}