@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   SmartExamPrep Test Engine
   ------------------------------------------------------------
   Design note, so the next person understands the choices:

   This is an exam sat by a nine-to-eleven year old. The room
   should be QUIET. Nothing pulses, nothing celebrates, nothing
   competes with the question. Visual energy is spent on two
   things only: the question, and knowing where you are in it.

   The visual language is borrowed from where this product is
   actually heading — a printed answer sheet. Keycap letters, a
   cell that fills when shaded, a rail of question boxes. That is
   already the child's mental model.

   Typeface is Poppins, matching the SmartExamPrep site so the
   engine reads as one product with the rest of the app.

   White-label: everything is driven by six custom properties,
   emitted per-brand by te_brand_css(). No second stylesheet.
   ============================================================ */


:root {
  /* ============================================================
     SmartExamPrep app palette — taken VERBATIM from the live app
     header/footer (--sep-* tokens). The engine now wears the exact
     same skin as the dashboard a child arrives from.

     The structure is NAVY. The action colour is ORANGE. The page
     ground is WHITE — the cream (#faf3ec) is ONLY the nav-bar
     gradient, not the page. (An earlier version flooded the whole
     page cream; that was the mismatch.)
     ============================================================ */

  /* --- exact --sep-* values --- */
  --te-navy:    #0f2c4d;   /* --sep-navy  — top bar, footer, structural */
  --te-blue:    #1a76d1;   /* --sep-blue */
  --te-blue-700:#155fa8;   /* --sep-blue-700 */
  --te-teal:    #17a2a2;   /* --sep-teal */
  --te-teal-d:  #0c7d7d;
  --te-gold:    #f5a623;   /* --sep-gold  — accents only */

  --te-primary:   #ef6c2f;   /* the ACTION colour: buttons, active, links-that-do */
  --te-primary-d: #d2581c;   /* button hover */
  --te-primary-x: #c2511a;   /* orange text on light (ghost buttons) */
  --te-orange-wash: #fdeee4; /* the hover wash the app uses on nav items */
  --te-orange-wash2:#fbe7d8;

  --te-ink:     #1f2733;   /* --sep-ink */
  --te-muted:   #ffffff;   /* PAGE GROUND = white, exactly like the app */
  --te-surface: #ffffff;   /* cards */
  --te-nav-grad-a: #fce6d8;  /* the nav bar's warm gradient, start */
  --te-nav-grad-b: #faf3ec;  /* ...and end */

  --te-font:  'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --te-serif: 'Poppins', system-ui, -apple-system, sans-serif; /* app uses Poppins throughout, no serif */

  /* --- status (kept meaningful, tuned to the app) --- */
  --te-ok:      #1e7e34;   --te-ok-bg:   #e7f6ec;
  --te-bad:     #b32218;   --te-bad-bg:  #fdecea;
  --te-warn:    #9b5a10;   --te-warn-bg: #fdf1e6;

  --te-dim:    #6b7785;    /* --sep-muted, exactly */
  --te-line:   #e7ecf3;    /* --sep-line, exactly */
  --te-line-2: #f1f4f8;    /* the app's softer divider */

  --te-cream-2: #fce6d8;   /* warm wash for hero panels only */
  --te-cream-3: #ffffff;   /* inputs are white in the app, not cream */

  --te-r:    10px;
  --te-r-l:  14px;
  --te-r-pill: 999px;
  --te-shadow:   0 12px 34px rgba(15, 44, 77, .08);   /* navy-tinted, like the app */
  --te-shadow-l: 0 16px 40px rgba(15, 44, 77, .12);

  --te-tap: 44px;
}



/* Load the brand fonts the same way the main site does. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--te-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--te-ink);
  background: var(--te-muted);
  -webkit-font-smoothing: antialiased;
}

/* Focus you can actually see. Non-negotiable. */
:focus-visible {
  outline: 3px solid var(--te-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Display headings use Fraunces — the site's serif — for warmth and
   personality. Body and UI stay in Poppins. This pairing IS the
   SmartExamPrep voice. */
h1 {
  font-family: var(--te-font);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--te-navy);
}
h2 {
  font-family: var(--te-font);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  color: var(--te-navy);
}
a  { color: var(--te-primary-x); text-underline-offset: 3px; font-weight: 500; }
a:hover { color: var(--te-primary); }

.te-sub { color: var(--te-dim); margin: 0 0 20px; font-size: 15px; }

/* ============================================================
   CHROME
   ============================================================ */
.te-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  height: 66px;
  background: linear-gradient(90deg, var(--te-nav-grad-a) 0%, var(--te-nav-grad-b) 58%, var(--te-nav-grad-b) 100%);
  border-bottom: 1px solid var(--te-line);
  position: sticky;
  top: 0;
  z-index: 40;
}

.te-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* The wordmark, set the way the site sets it: "SmartExam" ink + "Prep" orange,
   so the engine's header reads as the same brand lockup. */
.te-brand-mark {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--te-navy);
}
.te-brand-mark b { color: var(--te-primary); font-weight: 700; }
.te-brand-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(100deg, #ef6c2f 0%, #f08a5a 46%, #f6d9c4 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
}

.te-nav { display: flex; align-items: center; gap: 2px; }
.te-nav a {
  text-decoration: none;
  color: var(--te-dim);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--te-r-pill);
  transition: color .15s, background .15s;
}
.te-nav a:hover { color: var(--te-primary); background: var(--te-orange-wash); }
.te-who {
  font-size: 14px;
  font-weight: 500;
  color: var(--te-ink);
  padding: 0 6px 0 14px;
  border-left: 1px solid var(--te-line);
  margin-left: 8px;
}

/* The little status pill in nav counts (Marking 3, Papers 2). */
.te-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: var(--te-r-pill);
  background: var(--te-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}

.te-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

/* ============================================================
   SURFACES
   ============================================================ */
.te-card {
  background: var(--te-surface);
  border: 1px solid var(--te-line);
  border-radius: var(--te-r-l);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--te-shadow);
}
/* A card can lead with a warm cream wash for hero/section openers. */
.te-card--warm {
  background: linear-gradient(180deg, var(--te-nav-grad-a), var(--te-surface) 62%);
  border-color: var(--te-nav-grad-a);
}

.te-empty {
  background: var(--te-surface);
  border: 1px dashed var(--te-line);
  border-radius: var(--te-r-l);
  padding: 44px 24px;
  text-align: center;
  color: var(--te-dim);
}
.te-empty h2 { color: var(--te-ink); }

/* Notes get a heavy left rule as well as colour. Colour alone
   excludes roughly one boy in twelve. */
.te-note {
  border-radius: var(--te-r);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 15px;
  border-left: 4px solid;
}
.te-note--good { background: var(--te-ok-bg);   border-color: var(--te-ok);   color: #0E4F2C; }
.te-note--bad  { background: var(--te-bad-bg);  border-color: var(--te-bad);  color: #7C1D16; }
.te-note--warn { background: var(--te-warn-bg); border-color: var(--te-warn); color: #6B4600; }

/* ============================================================
   CONTROLS
   ============================================================ */
/* Pill buttons — the site's signature. Rounded-full, weighted, with a
   soft orange lift on hover. */
.te-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 2px solid transparent;
  background: var(--te-primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  min-height: var(--te-tap);
  padding: 0 22px;
  border-radius: var(--te-r-pill);
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.te-btn:hover  { background: var(--te-primary-d); }
.te-btn:active { transform: translateY(1px); }
.te-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Ghost = outline pill, for secondary actions. */
.te-btn--ghost {
  background: transparent;
  color: var(--te-primary-x);
  border-color: #f0b791;
}
.te-btn--ghost:hover { border-color: var(--te-primary); color: var(--te-primary);
                       background: var(--te-orange-wash); }

/* Teal variant — the "second voice", for info-forward actions. */
.te-btn--teal { background: var(--te-teal); }
.te-btn--teal:hover { background: var(--te-teal-d); }

.te-btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; box-shadow: none; }
.te-btn--sm:hover { box-shadow: none; }

.te-field { margin-bottom: 16px; }
.te-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}
.te-field input[type=text],
.te-field input[type=email],
.te-field input[type=password],
.te-field input[type=number],
.te-field select,
.te-field textarea,
.te-optrow input[type=text] {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--te-ink);
  background: var(--te-surface);
  border: 1px solid var(--te-line);
  border-radius: var(--te-r);
  padding: 10px 12px;
  min-height: var(--te-tap);
}
.te-field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.te-field input:focus,
.te-field select:focus,
.te-field textarea:focus { border-color: var(--te-primary); }

.te-opt-note { font-weight: 400; color: var(--te-dim); font-size: 13px; }

.te-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.te-field--wide { grid-column: 1 / -1; }

/* ============================================================
   THE RAIL — the signature element.
   A child must always be able to answer, without asking:
   where am I, and how much is left?
   ============================================================ */
.te-player-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--te-surface);
  border-bottom: 1px solid var(--te-line);
  box-shadow: var(--te-shadow);
}
.te-player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px 0;
  max-width: 840px;
  margin: 0 auto;
}

.te-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 20px 14px;
  max-width: 840px;
  margin: 0 auto;
}
.te-rail button {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--te-line);
  background: var(--te-surface);
  color: var(--te-dim);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.te-rail button:hover { border-color: var(--te-primary); color: var(--te-ink); }

/* Answered: FILLED. Like a bubble that has been shaded in. */
.te-rail button.is-answered {
  background: var(--te-primary);
  border-color: var(--te-primary);
  color: #fff;
}

/* Current: a ring, so it reads clearly whether or not the cell is
   also filled. Two independent signals, never one. */
.te-rail button.is-current {
  box-shadow: 0 0 0 3px var(--te-surface), 0 0 0 5px var(--te-accent);
  position: relative;
  z-index: 1;
}

/* ============================================================
   THE QUESTION
   ============================================================ */
.te-q { animation: te-in .18s ease-out; }
@keyframes te-in { from { opacity: 0; transform: translateY(4px); } }

.te-q-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--te-dim);
  font-variant-numeric: tabular-nums;
}

.te-chip {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--te-line);
  background: var(--te-surface);
  color: var(--te-dim);
}

.te-q-stem {
  font-size: 20px;
  line-height: 1.5;
  color: var(--te-ink);
  margin-bottom: 18px;
}
.te-q-stem p { margin: 0 0 10px; }

/* Question diagram. White plate, centred, never cropped — a
   cropped NVR figure is a wrong question. */
.te-qimg {
  margin: 0 0 20px;
  padding: 16px;
  background: var(--te-surface);
  border: 1px solid var(--te-line);
  border-radius: var(--te-r-l);
  text-align: center;
}
.te-qimg img {
  max-width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
}

/* ============================================================
   OPTIONS — the answer sheet
   ============================================================ */
.te-opts { display: flex; flex-direction: column; gap: 10px; }

.te-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  min-height: var(--te-tap);
  background: var(--te-surface);
  border: 1.5px solid var(--te-line);
  border-radius: var(--te-r-l);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.te-opt:hover { border-color: var(--te-primary); }

/* The native radio is hidden but stays focusable and readable by
   screen readers. State is drawn on the keycap instead. */
.te-opt input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* The keycap. The whole visual idea: it looks like the letter box
   on a printed answer sheet, and it fills when chosen. */
.te-opt-key {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--te-line);
  background: var(--te-muted);
  color: var(--te-dim);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.te-opt-body { flex: 1; min-width: 0; font-size: 17px; }
.te-opt-body p { margin: 0; }
.te-opt-text { display: block; }

.te-opt:has(input:checked) {
  border-color: var(--te-primary);
  background: color-mix(in srgb, var(--te-primary) 5%, var(--te-surface));
}
.te-opt:has(input:checked) .te-opt-key {
  background: var(--te-primary);
  border-color: var(--te-primary);
  color: #fff;
}
.te-opt:has(input:focus-visible) {
  outline: 3px solid var(--te-primary);
  outline-offset: 2px;
}

/* Older browsers without :has() — show the radio itself. */
@supports not selector(:has(*)) {
  .te-opt input[type=radio] {
    position: static;
    opacity: 1;
    width: 20px;
    height: 20px;
  }
}

/* --- Picture options (NVR) ---------------------------------
   When every option is a picture, a stacked list is wrong. The
   child needs to COMPARE, which means seeing them all at once,
   side by side, at the same size. */
.te-opts--tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.te-opts--tiles .te-opt {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
}
.te-opts--tiles .te-opt-key { align-self: flex-start; }
.te-opts--tiles .te-opt-body { display: block; text-align: center; }

.te-opt-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 170px;
  object-fit: contain;
  border-radius: 6px;
}

/* ============================================================
   PLAYER FOOTER
   ============================================================ */
.te-player-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--te-line-2);
}
.te-save {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: var(--te-dim);
  min-height: 20px;
}
.te-save--offline { color: var(--te-warn); font-weight: 500; }

/* ============================================================
   REVIEW
   ============================================================ */
.te-score { text-align: center; padding: 30px 20px; }
.te-score-n {
  font-size: 54px;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.te-score-of { color: var(--te-dim); font-size: 16px; margin-top: 8px; }

.te-review-q { padding: 18px 0; border-bottom: 1px solid var(--te-line-2); }
.te-review-q:last-child { border-bottom: 0; }

/* The verdict is a WORD first. Colour is a second, redundant
   signal — never the only one. */
.te-verdict {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.te-verdict--ok  { background: var(--te-ok-bg);  color: var(--te-ok); }
.te-verdict--bad { background: var(--te-bad-bg); color: var(--te-bad); }

.te-review-stem {
  display: flex;
  gap: 10px;
  font-size: 17px;
  margin-bottom: 10px;
}
.te-review-n {
  color: var(--te-dim);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.te-answer-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 0;
  font-size: 15px;
}
.te-answer-img {
  max-height: 72px;
  width: auto;
  border: 1px solid var(--te-line);
  border-radius: 6px;
  background: var(--te-surface);
}

.te-explain {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--te-muted);
  border-radius: var(--te-r);
  font-size: 15px;
}

/* ============================================================
   TABLES
   ============================================================ */
.te-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.te-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--te-dim);
  padding: 10px 12px;
  border-bottom: 1px solid var(--te-line);
  white-space: nowrap;
}
.te-table td {
  padding: 12px;
  border-bottom: 1px solid var(--te-line-2);
  vertical-align: middle;
}
.te-table tbody tr:hover { background: var(--te-muted); }
.te-table .te-num { font-variant-numeric: tabular-nums; text-align: right; }
.te-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   ADMIN — option editor rows
   ============================================================ */
.te-optrow {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--te-line-2);
}
.te-optrow:last-of-type { border-bottom: 0; }

.te-optrow-key {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding-top: 10px;
}
.te-optrow-key input[type=radio] { width: 20px; height: 20px; min-height: 0; }
.te-optrow-body { flex: 1; min-width: 0; }

.te-imgrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.te-thumb {
  height: 56px;
  width: auto;
  border: 1px solid var(--te-line);
  border-radius: 6px;
  background: var(--te-surface);
}
.te-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--te-dim);
  margin: 0;
}
input[type=file] {
  font: inherit;
  font-size: 13px;
  color: var(--te-dim);
  max-width: 100%;
}

/* ============================================================
   RESPONSIVE — many of these children work on a tablet
   ============================================================ */
@media (max-width: 640px) {
  .te-main { padding: 20px 14px 70px; }
  .te-card { padding: 16px; }
  .te-grid { grid-template-columns: 1fr; }
  .te-q-stem { font-size: 18px; }
  .te-opt-body { font-size: 16px; }
  .te-rail button { width: 32px; height: 32px; }
  .te-optrow { flex-direction: column; gap: 8px; }
  .te-optrow-key { padding-top: 0; }
  .te-player-foot { flex-wrap: wrap; }
  .te-save { order: 3; flex-basis: 100%; }
  .te-opts--tiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   PRINT — a child must not be able to print an answer key.
   ============================================================ */
@media print {
  .te-top, .te-rail, .te-player-foot, .te-nav, .te-btn { display: none !important; }
  .te-verdict, .te-answer-line, .te-explain { display: none !important; }
  body { background: #fff; }
  .te-card { border: 1px solid #ccc; box-shadow: none; }
}

/* Player title bar text */
.te-player-title {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.te-player-count {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--te-dim);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   COMPREHENSION
   ------------------------------------------------------------
   On a laptop the passage sits BESIDE the question, both visible
   at once. Making a child scroll up to re-read, then back down to
   answer, tests working memory rather than comprehension — and
   that is not the skill the exam is measuring.

   On a phone it stacks, because there is no room. The passage
   goes first: read, then answer.
   ============================================================ */
/* The two-column layout is gone: the passage now opens in its own tab,
   as specified. What remains here styles (a) the link to that tab, and
   (b) the passage tab itself, and (c) the passage shown inline on the
   REVIEW page, where side-by-side is fine because the test is over. */

.te-passage-link {
  margin-bottom: 18px;
}
.te-passage-link .te-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.te-passage-link-note {
  font-size: 12px;
  font-weight: 400;
  color: var(--te-dim);
}

.te-passage {
  background: var(--te-surface);
  border: 1px solid var(--te-line);
  border-radius: var(--te-r-l);
  padding: 20px 22px;
  box-shadow: var(--te-shadow);

  margin: 24px 0 8px;
}

.te-passage-title {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.te-passage-by {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--te-dim);
}

.te-passage-body {
  font-size: 16px;
  line-height: 1.75;   /* generous: this is sustained reading */
}
.te-passage-body p {
  margin: 0 0 12px;
  padding-left: 34px;
  text-indent: -34px;  /* hanging indent, so the number sits clear */
}

/* Line numbers. Questions cite them ("in line 12..."), so they are
   content, not decoration — but they must never be read aloud by a
   screen reader mid-sentence, hence aria-hidden in the PHP. */
.te-ln {
  display: inline-block;
  width: 26px;
  margin-right: 8px;
  text-indent: 0;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--te-dim);
  user-select: none;
}

/* In review, the passage is a full-width header for its block. */
.te-review-q ~ .te-passage,
.te-main > .te-passage {
  position: static;
  max-height: none;
  margin: 24px 0 8px;
}

/* ============================================================
   THE PASSAGE TAB (te_passage.php)
   ------------------------------------------------------------
   A reading surface, not an app screen. Wide margins, generous
   leading, nothing to click. The child is reading 600 words under
   time pressure and everything else is noise.
   ============================================================ */
.te-pv-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--te-surface);
  border-bottom: 1px solid var(--te-line);
}
.te-pv-title { font-size: 16px; }
.te-pv-by { color: var(--te-dim); font-weight: 400; margin-left: 6px; }
.te-pv-hint { font-size: 13px; color: var(--te-dim); }

.te-pv {
  max-width: 680px;      /* ~65 characters. Longer lines lose the eye. */
  margin: 0 auto;
  padding: 36px 24px 80px;
}

.te-pv-paper {
  position: relative;
  background: var(--te-surface);
  border: 1px solid var(--te-line);
  border-radius: var(--te-r-l);
  padding: 44px 44px 28px;
  box-shadow: var(--te-shadow);
}
.te-pv-paper .te-passage-body { font-size: 17px; line-height: 1.85; }
.te-pv-paper .te-passage-body p { margin: 0 0 16px; }

/* Watermark. Not decoration — accountability. A leaked passage traces
   back to a named account, which is the only content control that
   actually works. (Right-click blocking does not; a phone camera
   defeats it in two seconds, and it breaks screen readers.) */
.te-pv-mark {
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--te-line-2);
  font-size: 12px;
  color: var(--te-dim);
}
.te-pv[data-watermark]::before {
  content: attr(data-watermark);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 30px;
  font-weight: 600;
  color: var(--te-ink);
  opacity: .05;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

@media print {
  .te-pv-bar { display: none; }
  .te-pv-paper { border: 0; box-shadow: none; padding: 0; }
  .te-pv[data-watermark]::before { opacity: .12; position: fixed; }
}

/* ============================================================
   THE TIMER (Slice 2)
   ------------------------------------------------------------
   Deliberately calm. A big red pulsing clock makes a ten-year-old
   panic and stop reading the question, which loses them more marks
   than the clock ever saves. It changes state twice — under five
   minutes, and under one — and both times it changes WEIGHT and
   BORDER as well as colour, because a red number on white is
   invisible to a colour-blind child.
   ============================================================ */
.te-player-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.te-timer {
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--te-line);
  background: var(--te-surface);
  color: var(--te-ink);
  min-width: 74px;
  text-align: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.te-timer.is-low {
  color: var(--te-warn);
  border-color: var(--te-warn);
  background: var(--te-warn-bg);
  font-weight: 600;
}
.te-timer.is-out {
  color: var(--te-bad);
  border-color: var(--te-bad);
  background: var(--te-bad-bg);
  font-weight: 700;
}
/* A single, brief pulse when a voice cue fires — so a child with the
   sound off still sees that something was announced. */
.te-timer.is-cue { animation: te-cue 1.2s ease-out 2; }
@keyframes te-cue {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* Screen-reader-only live region for the same warnings. */
.te-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .te-player-right { gap: 8px; }
  .te-timer { font-size: 15px; min-width: 64px; padding: 4px 10px; }
}

/* ============================================================
   ANNOUNCEMENT BUILDER (Slice 2)
   ============================================================ */
.te-cues {
  border: 1px solid var(--te-line);
  border-radius: var(--te-r-l);
  padding: 14px 16px 16px;
  margin-bottom: 16px;
}
.te-cues legend { padding: 0 6px; }

.te-cue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.te-cue-at, .te-cue-unit {
  font-size: 14px;
  color: var(--te-dim);
  white-space: nowrap;
}
.te-cue-row input[type=number] {
  width: 76px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 10px;
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--te-line);
  border-radius: var(--te-r);
  background: var(--te-surface);
  color: var(--te-ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.te-cue-row input[type=text] {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--te-line);
  border-radius: var(--te-r);
  background: var(--te-surface);
  color: var(--te-ink);
}
.te-cue-row input:focus { border-color: var(--te-primary); }

.te-cue-del {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--te-line);
  background: var(--te-surface);
  color: var(--te-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.te-cue-del:hover {
  border-color: var(--te-bad);
  color: var(--te-bad);
  background: var(--te-bad-bg);
}

@media (max-width: 640px) {
  .te-cue-row input[type=text] { flex-basis: 100%; }
}

/* ============================================================
   SLICES 3-5 — reports, roster, assignment
   ============================================================ */
.te-main--wide { max-width: 1080px; }

.te-plain { margin: 0; padding-left: 20px; }
.te-plain li { margin-bottom: 8px; }

/* --- stat strip (tutor report) --- */
.te-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.te-stat {
  background: var(--te-surface);
  border: 1px solid var(--te-line);
  border-radius: var(--te-r-l);
  padding: 16px;
  text-align: center;
}
.te-stat-n {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.te-stat-l { font-size: 12px; color: var(--te-dim); margin-top: 4px; }

/* --- prediction --- */
.te-predict-head {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -.02em;
  margin: 4px 0 6px;
}

/* --- question table --- */
.te-row-bad { background: var(--te-bad-bg); }
.te-tick  { color: var(--te-ok); font-weight: 700; }
.te-cross { color: var(--te-bad); font-weight: 700; }
/* Slow is flagged by WEIGHT and a mark, not colour alone. */
.te-slow {
  color: var(--te-warn);
  font-weight: 700;
}
.te-slow::after { content: ' ⚠'; }

/* --- checkbox grids --- */
.te-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 16px;
}
.te-checks--tall { max-height: 320px; overflow-y: auto; padding-right: 8px; }
.te-checks .te-inline-check {
  padding: 7px 0;
  font-size: 15px;
  color: var(--te-ink);
  min-height: 40px;
}

/* --- roster rows --- */
.te-roster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
}
.te-roster-name { flex: 1 1 180px; min-width: 0; }
.te-roster-row input[type=text],
.te-roster-row input[type=email] {
  min-height: 38px;
  padding: 7px 10px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--te-line);
  border-radius: 8px;
  background: var(--te-surface);
  color: var(--te-ink);
}
.te-roster-row input[type=email] { flex: 1 1 200px; min-width: 0; }

/* --- read aloud --- */
.te-speak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--te-dim);
  background: var(--te-muted);
  border: 1px solid var(--te-line);
  border-radius: 999px;
  cursor: pointer;
  vertical-align: middle;
  min-height: 32px;
}
.te-speak:hover { color: var(--te-primary); border-color: var(--te-primary); }

@media print {
  .te-speak, .te-btn { display: none !important; }
}

/* ============================================================
   SLICES 6 & 7 — written answers, marking, sign-off
   ============================================================ */
.te-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--te-bad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* --- the child's writing, as written --- */
.te-written {
  background: var(--te-muted);
  border: 1px solid var(--te-line);
  border-left: 3px solid var(--te-primary);
  border-radius: var(--te-r);
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.75;
  white-space: pre-wrap;
}
.te-written--plan {
  border-left-color: var(--te-dim);
  font-size: 14px;
  color: var(--te-dim);
}

/* --- sign-off screen --- */
.te-mark-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.te-mark-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.te-mark-grid h3 { font-size: 14px; margin: 0 0 8px; }

.te-crit {
  border: 1px solid var(--te-line);
  border-radius: var(--te-r);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.te-crit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.te-crit-head label { font-weight: 500; font-size: 14px; }
.te-crit-head input[type=number] {
  width: 62px;
  min-height: 40px;
  padding: 6px 8px;
  font: inherit;
  font-size: 16px;
  text-align: center;
  border: 1px solid var(--te-line);
  border-radius: 8px;
  background: var(--te-surface);
  color: var(--te-ink);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.te-crit-max { font-size: 13px; color: var(--te-dim); }

/* THE EVIDENCE. The most important element on the sign-off screen —
   it is what lets you check a mark in ten seconds, and it is where a
   hallucinated mark has nowhere to hide. */
.te-evidence {
  margin: 10px 0 6px;
  padding: 8px 12px;
  border-left: 3px solid var(--te-accent);
  background: var(--te-muted);
  border-radius: 0 var(--te-r) var(--te-r) 0;
  font-style: italic;
  font-size: 14px;
  color: var(--te-ink);
}
.te-crit-why { margin: 4px 0 0; font-size: 13px; color: var(--te-dim); }

/* --- the writing surface --- */
.te-write { max-width: 780px; }
.te-write-task { font-size: 17px; margin-bottom: 8px; }

.te-write-plan, .te-write-body {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font: inherit;
  border: 1px solid var(--te-line);
  border-radius: var(--te-r);
  background: var(--te-surface);
  color: var(--te-ink);
  resize: vertical;
}
.te-write-plan { font-size: 15px; line-height: 1.6; }
.te-write-body {
  font-size: 17px;
  line-height: 1.9;   /* generous: they are reading back what they wrote */
}
.te-write-plan:focus, .te-write-body:focus {
  border-color: var(--te-primary);
  outline: 2px solid var(--te-primary);
  outline-offset: 1px;
}

.te-write-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.te-wordcount {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--te-dim);
}

/* The stage rail: a prompt, NOT a container. One continuous box —
   a story chopped into five textareas reads like five paragraphs. */
.te-stages {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.te-stage {
  padding: 7px 13px;
  font: inherit;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid var(--te-line);
  background: var(--te-surface);
  color: var(--te-dim);
  cursor: pointer;
  min-height: 36px;
}
.te-stage.is-current {
  background: var(--te-primary);
  border-color: var(--te-primary);
  color: #fff;
  font-weight: 600;
}
.te-stage-hint {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--te-dim);
  min-height: 40px;
}

.te-write-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.te-saved { font-size: 13px; color: var(--te-dim); }

.te-write-link {
  padding: 18px;
  border: 1px dashed var(--te-line);
  border-radius: var(--te-r-l);
  background: var(--te-muted);
}

.te-rev-written { margin: 12px 0; }
.te-mark-result { margin-top: 14px; }

.te-pre {
  background: var(--te-muted);
  border: 1px solid var(--te-line);
  border-radius: var(--te-r);
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 13px;
}

@media (max-width: 860px) {
  .te-mark-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTIONED WRITING FORM
   ============================================================ */

/* The marking scheme, shown to the CHILD. Top mark first — you aim at
   a target, not away from a failure. */
.te-scheme summary { cursor: pointer; font-size: 15px; padding: 2px 0; }
.te-scheme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.te-scheme-crit h3 {
  font-size: 14px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.te-scheme-desc {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
}
.te-scheme-desc li {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid var(--te-line-2);
  color: var(--te-dim);
}
.te-scheme-desc li strong {
  flex: 0 0 20px;
  color: var(--te-ink);
  font-variant-numeric: tabular-nums;
}
.te-scheme-desc li:first-child { color: var(--te-ink); border-top: 0; }

/* A section */
.te-sec { border-left: 3px solid var(--te-line); }
.te-sec.is-done { border-left-color: var(--te-ok); }

.te-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.te-sec-head h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
}
.te-sec-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--te-muted);
  border: 1px solid var(--te-line);
  font-size: 13px;
  font-weight: 600;
}
.te-sec.is-done .te-sec-n {
  background: var(--te-ok);
  border-color: var(--te-ok);
  color: #fff;
}
.te-sec-wc {
  font-size: 13px;
  color: var(--te-dim);
  font-variant-numeric: tabular-nums;
}
.te-sec-prompt {
  margin: 8px 0 12px;
  font-size: 14px;
  color: var(--te-dim);
}
.te-sec-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.te-sec-saved { font-size: 12px; }

/* The coaching panel. Deliberately does NOT look like prose the child
   could paste in — it reads as advice, because that is what it is. */
.te-advice {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--te-line);
  border-left: 3px solid var(--te-accent);
  border-radius: var(--te-r);
  background: var(--te-muted);
  font-size: 14px;
  line-height: 1.65;
}
.te-advice.is-loading { color: var(--te-dim); font-style: italic; }
.te-advice strong { display: block; font-size: 12px; text-transform: uppercase;
                    letter-spacing: .04em; color: var(--te-dim); margin-bottom: 4px; }
.te-advice-good { margin-bottom: 14px; }
.te-advice-good p { margin: 0; }
.te-advice-list ol { margin: 0; padding-left: 20px; }
.te-advice-list li { margin-bottom: 12px; }
.te-advice blockquote {
  margin: 0 0 4px;
  padding: 4px 10px;
  border-left: 2px solid var(--te-line);
  color: var(--te-dim);
  font-style: italic;
}
.te-advice-why { margin: 0 0 4px; color: var(--te-dim); }
.te-advice-do  { margin: 0; font-weight: 500; }
.te-advice-eg  { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--te-line-2); }
.te-advice-eg p { margin: 0; font-style: italic; }
.te-advice-err { margin: 0; color: var(--te-bad); }

.te-write-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  bottom: 12px;
}
.te-write-summary > div:last-child {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Scheme descriptors on the marking screen. You cannot mark consistently
   against a scheme you cannot see. */
.te-crit-desc { margin: 8px 0 4px; }
.te-crit-desc summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--te-dim);
}
.te-crit-desc ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
}
.te-crit-desc li {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid var(--te-line-2);
  color: var(--te-dim);
}
.te-crit-desc li strong {
  flex: 0 0 18px;
  color: var(--te-ink);
  font-variant-numeric: tabular-nums;
}
.te-crit-desc li:first-child { border-top: 0; color: var(--te-ink); }

/* ============================================================
   WRITTEN COMPREHENSION, answered inline in the player
   ============================================================ */
.te-answer-write { margin-top: 6px; }

.te-scheme--inline { margin-bottom: 12px; }
.te-scheme--inline summary { font-size: 13px; color: var(--te-dim); cursor: pointer; }
.te-scheme-inline-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 13px;
}
.te-scheme-inline-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--te-line-2);
}
.te-scheme-inline-list li:first-child { border-top: 0; }
.te-scheme-inline-list .te-sub { margin: 0; }

.te-answer-box {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  line-height: 1.8;
  border: 1px solid var(--te-line);
  border-radius: var(--te-r);
  background: var(--te-surface);
  color: var(--te-ink);
  resize: vertical;
}
.te-answer-box:focus {
  border-color: var(--te-primary);
  outline: 2px solid var(--te-primary);
  outline-offset: 1px;
}

.te-answer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   ON PAPER
   ============================================================ */

/* A printed paper whose answers were never entered is a test the child
   sat for nothing. This is deliberately the loudest thing on the page. */
.te-paper-waiting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--te-accent);
  border-left: 4px solid var(--te-accent);
  border-radius: var(--te-r-l);
  background: color-mix(in srgb, var(--te-accent) 7%, var(--te-surface));
}
.te-paper-waiting code {
  font-family: ui-monospace, monospace;
  letter-spacing: .06em;
  font-weight: 600;
}
.te-paper-waiting-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* "Your paper is ready" */
.te-paper-ready { max-width: 560px; text-align: center; }
.te-ready-hero { margin-bottom: 22px; }
.te-ready-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--te-muted);
  color: var(--te-primary);
  margin-bottom: 12px;
}
.te-btn--big {
  display: block;
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
}
.te-code-card {
  margin: 18px 0;
  padding: 16px;
  border: 1px dashed var(--te-accent);
  border-radius: var(--te-r-l);
  background: color-mix(in srgb, var(--te-accent) 6%, var(--te-surface));
}
.te-code-card span {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--te-dim);
}
.te-code-card strong {
  display: block;
  margin: 4px 0 6px;
  font-family: ui-monospace, monospace;
  font-size: 30px;
  letter-spacing: .12em;
  color: var(--te-primary);
}
.te-code-card .te-sub { margin: 0; font-size: 13px; }

.te-steps {
  text-align: left;
  margin: 20px 0;
  padding-left: 20px;
  line-height: 1.7;
}
.te-steps li { margin-bottom: 12px; }
.te-steps strong { display: block; }

.te-ready-foot {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ============================================================
   SCAN THE ANSWER SHEET
   ============================================================ */
.te-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 20px;
  border: 2px dashed var(--te-line);
  border-radius: var(--te-r-l);
  background: var(--te-muted);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.te-drop:hover, .te-drop:focus-within {
  border-color: var(--te-primary);
  background: color-mix(in srgb, var(--te-primary) 5%, var(--te-surface));
}
.te-drop input[type=file] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.te-drop-icon { color: var(--te-primary); }
.te-drop .te-sub { margin: 0; }

.te-tips { margin: 16px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.7;
           color: var(--te-dim); }

.te-scan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.te-scan-q {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--te-line);
  border-radius: var(--te-r);
  background: var(--te-surface);
  position: relative;
}

/* Anything the reader was not sure about. Deliberately loud: these are the
   only ones a human actually needs to look at. */
.te-scan-q.is-flagged {
  border-color: var(--te-accent);
  border-left: 3px solid var(--te-accent);
  background: color-mix(in srgb, var(--te-accent) 7%, var(--te-surface));
}
.te-scan-n {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
  color: var(--te-dim);
  min-width: 20px;
}
.te-scan-opts { display: flex; gap: 3px; }
.te-scan-opt input { position: absolute; opacity: 0; }
.te-scan-opt span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px; height: 30px;
  border: 1px solid var(--te-line);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--te-dim);
  cursor: pointer;
}
.te-scan-opt input:checked + span {
  background: var(--te-primary);
  border-color: var(--te-primary);
  color: #fff;
}
.te-scan-opt input:focus-visible + span {
  outline: 2px solid var(--te-primary);
  outline-offset: 2px;
}
.te-scan-opt--none span { color: var(--te-dim); opacity: .7; }
.te-scan-why {
  position: absolute;
  bottom: -7px; left: 34px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--te-accent);
  color: #fff;
  white-space: nowrap;
}
.te-scan-foot {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* What the current selection will actually produce, by type. */
.te-mix-title {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--te-dim);
  margin: 14px 0 6px;
}
ul.te-mix {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--te-line);
  border-radius: var(--te-r);
  overflow: hidden;
}
ul.te-mix li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 14px;
  border-top: 1px solid var(--te-line-2);
  background: var(--te-surface);
}
ul.te-mix li:first-child { border-top: 0; }
ul.te-mix strong { font-variant-numeric: tabular-nums; }

/* Three-way test-kind selector. */
.te-toggle--3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }

/* ============================================================
   PER-SUBTOPIC ALLOCATION
   ============================================================ */
.te-sub-rows { display: flex; flex-direction: column; gap: 4px; }
.te-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 8px;
  border-radius: 8px;
}
.te-sub-row:hover { background: var(--te-muted); }
.te-sub-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  flex: 1;
}
.te-sub-pick input { width: auto; min-height: 0; }



/* ============================================================
   TOGGLE / SEGMENTED SELECTORS  (on-screen vs on-paper, etc.)
   Brand-styled: card-like options that light orange when chosen.
   ============================================================ */
.te-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.te-toggle-opt { flex: 1; min-width: 150px; cursor: pointer; }
.te-toggle-opt input { position: absolute; opacity: 0; }
.te-toggle-opt > span {
  display: block;
  padding: 14px 16px;
  border: 1.5px solid var(--te-line);
  border-radius: var(--te-r);
  background: var(--te-cream-3);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.te-toggle-opt > span strong { display: block; font-weight: 600; color: var(--te-ink); }
.te-toggle-opt > span em {
  display: block; font-style: normal; font-size: 13px;
  color: var(--te-dim); margin-top: 3px;
}
.te-toggle-opt input:checked + span {
  border-color: var(--te-primary);
  background: var(--te-orange-wash);
  box-shadow: 0 0 0 3px rgba(239, 108, 47, .12);
}
.te-toggle-opt input:checked + span strong { color: var(--te-primary-x); }
.te-toggle-opt input:focus-visible + span { outline: 2px solid var(--te-primary); outline-offset: 2px; }

/* ============================================================
   FRAMED MODE — engine rendered INSIDE the real site shell.
   The site header/footer partials wrap the page; these styles
   make the engine's own content sit correctly beneath them.
   ============================================================ */

/* The page ground behind cards, matching the app's warm tint
   (the screenshot's peachy #f7ede2, not white). Only applied in
   framed mode so standalone stays on its own ground. */
body:has(.te-main--framed) { background: #f7ede2; }

/* The engine's section sub-nav — a slim strip under the site nav,
   the way the app's own section navs sit. */
.te-subnav {
  background: #fff;
  border-bottom: 1px solid var(--te-line);
}
.te-subnav-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.te-subnav-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--te-navy);
  padding-right: 14px;
  border-right: 1px solid var(--te-line);
  white-space: nowrap;
}
.te-subnav .te-nav { flex-wrap: wrap; }

/* In framed mode the content column matches the site's 1180 width
   rhythm, with breathing room under the sub-nav. */
.te-main--framed {
  max-width: 1180px;
  padding-top: 28px;
}

/* ============================================================
   HERO BAND — the page-title banner that replaces the second menu.
   Orange gradient, rounded, icon + title left, teal pill actions
   right. Matches the "My Homework" band.
   ============================================================ */
.te-hero {
  max-width: 1180px;
  margin: 22px auto 0;
  padding: 0 20px;
}
.te-hero-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 26px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(100deg, #ef6c2f 0%, #f08a5a 46%, #f6d9c4 100%);
  box-shadow: 0 12px 30px rgba(239, 108, 47, .18);
}
.te-hero-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.te-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  color: #fff;
}
.te-hero-sub {
  display: block;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  opacity: .92;
  margin-top: 2px;
}
.te-hero-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Teal pill actions, exactly like the band's Workspace/Notes/Boost. */
.te-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--te-teal);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, transform .12s;
  white-space: nowrap;
}
.te-hero-btn:hover { background: var(--te-teal-d); color: #fff; transform: translateY(-1px); }
/* Primary hero actions: solid teal, white text — always readable, even on
   the pale end of the band's gradient. */
.te-hero-btn--teal { background: var(--te-teal); color: #fff; border: 1px solid var(--te-teal); }
.te-hero-btn--teal:hover { background: var(--te-teal-d); border-color: var(--te-teal-d); color: #fff; }
.te-hero-btn svg { width: 16px; height: 16px; }
/* A round home/back button variant. */
.te-hero-btn--round { width: 40px; height: 40px; padding: 0; justify-content: center; }

/* The framed main no longer needs top padding — the band provides the
   visual break. Tighten the gap. */
.te-main--framed { padding-top: 20px; }

@media (max-width: 640px) {
  .te-hero-in { padding: 16px 18px; }
  .te-hero-title { font-size: 21px; }
  .te-hero-btn { padding: 8px 14px; font-size: 13px; }
}

/* ============================================================
   ENGINE TOOLS MENU  (staff-only, inside the hero band)
   The links that used to be the second nav bar, now a single
   pill in the page banner that opens the full set.
   ============================================================ */
.te-tools { position: relative; }
.te-tools summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.te-tools summary::-webkit-details-marker { display: none; }
/* The "Engine tools" and "My tests" pills: solid teal, white text —
   readable on any background, unlike the old translucent-white version
   which vanished against the light part of the hero gradient. */
.te-hero-btn--menu {
  background: var(--te-teal);
  color: #fff;
  border: 1px solid var(--te-teal);
}
.te-hero-btn--menu:hover { background: var(--te-teal-d); border-color: var(--te-teal-d); color: #fff; }
.te-hero-btn--menu svg { color: #fff; }
.te-badge--onhero { background: #fff; color: var(--te-teal-d); }

.te-tools-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--te-line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 44, 77, .16);
  padding: 6px;
  z-index: 60;
}
.te-tools-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--te-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.te-tools-menu a:hover { background: var(--te-orange-wash); color: var(--te-primary-x); }
.te-tools[open] summary { background: var(--te-teal-d); }

/* ============================================================
   TEST BUILDER — redesigned te_new.php
   Two columns: the choices on the left, a sticky "Your test"
   summary + build button on the right. Calm, staged, not a wall.
   ============================================================ */
.te-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}
.te-builder-main { display: flex; flex-direction: column; gap: 18px; }

/* Numbered step cards */
.te-step-card {
  background: #fff;
  border: 1px solid var(--te-line);
  border-radius: var(--te-r-l);
  padding: 22px 24px;
  box-shadow: var(--te-shadow);
}
.te-step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.te-step-h h2 { margin: 0; }
.te-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: linear-gradient(100deg, #ef6c2f 0%, #f08a5a 46%, #f6d9c4 100%);
  color: #fff; font-weight: 700; font-size: 15px;
}

/* Topic picker — clean, dense, tappable chips */
.te-topics { display: flex; flex-direction: column; gap: 22px; }
.te-subject {
  background: #fff;
  border: 1px solid var(--te-line);
  border-radius: 14px;
  padding: 16px 18px;
}
.te-subject-name {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--te-primary);
  margin-bottom: 14px;
}
.te-topic-group { margin-bottom: 14px; }
.te-topic-group:last-child { margin-bottom: 0; }
.te-topic-name {
  font-size: 12px; font-weight: 600; color: var(--te-dim);
  margin-bottom: 9px; letter-spacing: .01em;
}
.te-topic-chip-wrap { display: flex; flex-wrap: wrap; gap: 9px; }

/* A chip = a tappable pill. Selected state via .is-on (JS), not :has(). */
.te-topic-chip {
  display: inline-flex; align-items: center;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--te-line);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.te-topic-chip:hover { border-color: var(--te-primary); box-shadow: 0 2px 8px rgba(239,108,47,.12); }
.te-topic-chip-label {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; cursor: pointer; margin: 0;
  font-size: 14px; font-weight: 500; color: var(--te-ink);
  white-space: nowrap; user-select: none;
}
.te-topic-chip-label input { position: absolute; opacity: 0; width: 0; height: 0; }

/* the tick circle */
.te-topic-chip-label span { display: inline-flex; align-items: center; gap: 9px; }
.te-topic-chip-label span::before {
  content: "";
  width: 16px; height: 16px; flex: none;
  border: 1.5px solid #cdd6e0; border-radius: 50%;
  transition: all .15s;
}

/* SELECTED */
.te-topic-chip.is-on {
  border-color: var(--te-primary);
  background: var(--te-orange-wash);
  box-shadow: 0 2px 10px rgba(239,108,47,.15);
}
.te-topic-chip.is-on .te-topic-chip-label { color: var(--te-primary-x); font-weight: 600; }
.te-topic-chip.is-on .te-topic-chip-label span::before {
  background: var(--te-primary); border-color: var(--te-primary);
  box-shadow: inset 0 0 0 3px #fff;
}

/* per-chip counter — shown only when selected (JS toggles [hidden]) */
.te-sub-alloc {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px 4px 8px;
  margin-left: 4px;
  border-left: 1.5px solid rgba(239,108,47,.28);
}
.te-sub-alloc[hidden] { display: none !important; }
.te-sub-alloc input[type="number"] {
  width: 38px; min-height: 0; padding: 4px; text-align: center;
  border-radius: 8px; font-size: 13px; font-weight: 600; background: #fff;
  border: 1.5px solid var(--te-line); color: var(--te-primary-x);
}
.te-step-btn {
  width: 26px; height: 26px; border: 1.5px solid var(--te-line);
  border-radius: 8px; background: #fff; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--te-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.te-step-btn:hover { border-color: var(--te-primary); background: var(--te-orange-wash); }
.te-sub-avail { font-size: 10.5px; color: var(--te-dim); font-style: normal; margin-left: 4px; white-space: nowrap; }

/* Essentials: two fields side by side */
.te-essentials {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.te-hint { font-size: 13px; color: var(--te-dim); margin: 8px 0 0; }

/* More options — folded */
.te-more { padding: 0; }
.te-more > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 10px;
  padding: 18px 24px;
}
.te-more > summary::-webkit-details-marker { display: none; }
.te-more > summary::before {
  content: "▸"; color: var(--te-primary); font-size: 13px;
  transition: transform .15s;
}
.te-more[open] > summary::before { transform: rotate(90deg); }
.te-more-title { font-weight: 600; font-size: 16px; color: var(--te-ink); }
.te-more-hint { font-size: 13px; color: var(--te-dim); }
.te-more-body { padding: 0 24px 24px; }

/* Sticky summary rail */
.te-builder-rail { position: sticky; top: 88px; }
.te-rail-card {
  background: #fff;
  border: 1px solid var(--te-line);
  border-radius: var(--te-r-l);
  padding: 20px;
  box-shadow: var(--te-shadow);
}
.te-rail-card h3 {
  margin: 0 0 14px; font-size: 15px; font-weight: 700;
  color: var(--te-navy); letter-spacing: -.01em;
}
.te-btn--block { display: flex; width: 100%; margin-top: 6px; }

@media (max-width: 860px) {
  .te-builder { grid-template-columns: 1fr; }
  .te-builder-rail { position: static; }
  .te-essentials { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   QUICK-START PRESETS  (te_build.php)
   Ready-made test tiles + a custom builder tile. A friendly
   front door to the same engine te_new.php drives.
   ============================================================ */
.te-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 4px;
}
.te-preset-form { margin: 0; display: block; }
.te-preset {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--te-line);
  border-radius: 13px;
  padding: 13px 14px;
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.te-preset:hover {
  border-color: var(--te-primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 44, 77, .10);
}
.te-preset-h3 { display: block; margin: 0 0 3px; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--te-navy); }
.te-preset-p  { display: -webkit-box; margin: 0; font-size: 12px; color: var(--te-dim); line-height: 1.4;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.te-preset-meta {
  display: block; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--te-primary-x);
}
.te-preset-tag {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  color: #fff; margin-bottom: 9px;
}
.te-preset-tag svg { width: 17px; height: 17px; }
/* Each preset a different, calm gradient tag — the SmartExamPrep accents. */
.te-preset--a .te-preset-tag { background: linear-gradient(135deg, #ef6c2f, #d2581c); }
.te-preset--b .te-preset-tag { background: linear-gradient(135deg, #17a2a2, #0c7d7d); }
.te-preset--c .te-preset-tag { background: linear-gradient(135deg, #5c6bc0, #3949ab); }
.te-preset--d .te-preset-tag { background: linear-gradient(135deg, #9b59b6, #6a3782); }
.te-preset--e .te-preset-tag { background: linear-gradient(135deg, #f5a623, #c8871a); }
.te-preset--f .te-preset-tag { background: linear-gradient(135deg, #1a76d1, #155fa8); }
.te-preset--g .te-preset-tag { background: linear-gradient(135deg, #0f9b9b, #0c7d7d); }

/* The little Start link at the foot of each tile. The whole tile submits,
   so this is an affordance, not a separate control. */
.te-preset-go { display: none; }
.te-preset:focus-visible { outline: 2px solid var(--te-primary); outline-offset: 2px; }

/* Disabled preset — shown, but clearly not available. */
.te-preset--off { opacity: .55; cursor: not-allowed; }
.te-preset--off:hover { border-color: var(--te-line); transform: none; box-shadow: none; }

/* The custom-builder tile: dashed, invites exploration. */
.te-preset--custom {
  border-style: dashed;
  display: flex; flex-direction: column; justify-content: center;
  background: transparent;
}
.te-preset-plus {
  font-size: 22px; font-weight: 300; color: var(--te-primary);
  line-height: 1; margin-bottom: 5px;
}

@media (max-width: 1080px) { .te-presets { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .te-presets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px)  { .te-presets { grid-template-columns: 1fr; } }

/* ============================================================
   WRITING REVIEW REPORT  (te_write.php)
   The AI proofreading report shown to the student. No scores.
   ============================================================ */
.te-write-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.te-review-report { border-color: var(--te-teal); }
.te-review-body { margin: 4px 0 18px; }
.te-review-sec { margin-bottom: 16px; }
.te-review-sec h3 {
  font-size: 14px; font-weight: 700; color: var(--te-navy);
  margin: 0 0 4px; letter-spacing: -.01em;
}
.te-review-sec p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--te-ink); }
.te-review-improve ul { margin: 6px 0 0; padding-left: 20px; }
.te-review-improve li { margin-bottom: 6px; font-size: 15px; line-height: 1.5; }
.te-review-cheer {
  margin: 16px 0 0; padding: 12px 14px;
  background: var(--te-orange-wash); border-radius: 10px;
  font-weight: 500; color: var(--te-primary-x);
}
.te-review-choices {
  border-top: 1px solid var(--te-line); padding-top: 16px; margin-top: 4px;
}
.te-review-choices .te-sub { margin: 0 0 10px; }
#te-review-left { font-weight: 400; margin-left: 6px; opacity: .8; }

/* Admin-only writing review panel (te_mark / tutor view) */
.te-admin-review {
  background: #fff; border: 1px solid var(--te-line);
  border-left: 4px solid var(--te-teal);
  border-radius: 12px; padding: 16px 18px; margin: 14px 0;
}
.te-admin-review h3 { margin: 0 0 8px; font-size: 14px; color: var(--te-navy); }
.te-admin-score {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--te-navy); color: #fff; font-weight: 700; font-size: 14px;
}
.te-admin-review .te-sub { margin: 8px 0 0; }

/* Single writing box (te_write.php — simplified) */
.te-write-single .te-sec-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.te-write-single .te-sec-head h2 { margin: 0; font-size: 17px; color: var(--te-navy); }
.te-write-single textarea.te-write-body {
  width: 100%; min-height: 360px; resize: vertical;
  padding: 16px; border: 1.5px solid var(--te-line); border-radius: 12px;
  font: inherit; font-size: 16px; line-height: 1.7; color: var(--te-ink);
}
.te-write-single textarea.te-write-body:focus {
  outline: none; border-color: var(--te-primary);
  box-shadow: 0 0 0 3px var(--te-orange-wash);
}

/* ============================================================
   MARKING QUEUE — collapsible submissions (te_admin_marking.php)
   ============================================================ */
.te-sub-item { padding: 0; overflow: hidden; }
.te-sub-item > .te-sub-summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
}
.te-sub-item > .te-sub-summary::-webkit-details-marker { display: none; }
/* A bold, clearly-visible expand chevron leading each row. */
.te-sub-item > .te-sub-summary::before {
  content: "\25B6";
  flex-shrink: 0;
  color: var(--te-primary);
  font-size: 16px; line-height: 1;
  transition: transform .15s;
}
.te-sub-item[open] > .te-sub-summary::before { transform: rotate(90deg); }
.te-sub-summary:hover::before { color: var(--te-primary-d); }
.te-sub-item[open] > .te-sub-summary { border-bottom: 1px solid var(--te-line); }
.te-sub-summary:hover { background: var(--te-line2); }

/* Name + meta stack takes the middle, stays LEFT-aligned. */
.te-sub-who {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1 1 auto; text-align: left;
}
.te-sub-who strong {
  font-size: 15px; color: var(--te-navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.te-sub-meta {
  font-size: 12.5px; color: var(--te-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.te-sub-body { padding: 20px; }

/* Status pills in the summary */
.te-pill {
  flex-shrink: 0; display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.te-pill--ok   { background: #e6f5ee; color: #1a7a4a; }
.te-pill--wait { background: #fff3e0; color: #b26a00; }
.te-pill--bad  { background: #fdecea; color: #c0392b; }

/* Filter / sort toolbar */
.te-mark-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 14px 18px;
}
.te-tool-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.te-mark-toolbar label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--te-dim);
}
.te-mark-toolbar select {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--te-ink);
  padding: 7px 10px; border: 1.5px solid var(--te-line); border-radius: 9px;
  background: #fff; cursor: pointer;
}
#te-f-count { font-size: 13px; color: var(--te-dim); }

.te-pill--done { background: #eef1f6; color: #33415c; }
.te-note--ok { background: #e6f5ee; border-left: 3px solid #1a7a4a; }

/* ============================================================
   WRITING OUTCOME PANEL (te_write.php — after final submit)
   ============================================================ */
.te-write-info {
  margin: 4px 0 18px; font-size: 14px; line-height: 1.55;
  padding: 12px 14px; background: var(--te-line2); border-radius: 10px;
}
.te-outcome { border: 1.5px solid var(--te-teal); text-align: left; }
.te-outcome-badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: #e6f5ee; color: #1a7a4a; font-weight: 700; font-size: 13px;
  margin-bottom: 12px;
}
.te-outcome h2 { margin: 0 0 6px; color: var(--te-navy); }
.te-outcome-detail { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--te-ink); }
.te-outcome-facts { margin: 0 0 20px; display: grid; gap: 10px; }
.te-outcome-facts > div {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--te-line2);
}
.te-outcome-facts dt {
  margin: 0; font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--te-dim); min-width: 110px;
}
.te-outcome-facts dd { margin: 0; font-size: 15px; color: var(--te-navy); font-weight: 500; }

.te-chip--review { background: #fff3e0; color: #b26a00; }

/* ============================================================
   RAG circle with the score INSIDE it (all report types)
   ============================================================ */
.te-score { position: relative; text-align: center; }
.te-rag {
  width: 128px; height: 128px; border-radius: 50%;
  margin: 4px auto 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; box-shadow: inset 0 0 0 8px rgba(255,255,255,.28);
}
.te-rag-score { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.te-rag-of    { font-size: 13px; font-weight: 600; opacity: .9; margin-top: 3px; }
.te-rag--green   { background: #2a9d5c; }
.te-rag--amber   { background: #e5a029; }
.te-rag--red     { background: #d0503f; }
.te-rag--pending { background: #b7c0cf; }

/* Section-by-section breakdown table */
.te-breakdown { width: 100%; border-collapse: collapse; margin-top: 6px; }
.te-breakdown th {
  text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--te-dim); padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--te-line);
}
.te-breakdown td {
  padding: 10px 10px 10px 0; font-size: 14.5px; color: var(--te-ink);
  border-bottom: 1px solid var(--te-line2); vertical-align: middle;
}
.te-breakdown tfoot td { border-bottom: none; border-top: 2px solid var(--te-line); }
.te-breakdown-mark { white-space: nowrap; font-weight: 600; color: var(--te-navy); }
.te-breakdown-bar-cell { width: 40%; }
.te-breakdown-bar {
  display: block; height: 8px; border-radius: 999px; background: var(--te-line2);
  overflow: hidden;
}
.te-breakdown-fill { display: block; height: 100%; border-radius: 999px; }
.te-fill--green { background: #2a9d5c; }
.te-fill--amber { background: #e5a029; }
.te-fill--red   { background: #d0503f; }

/* ============================================================
   SPEAK-TO-WRITE mic button (te_write.php)
   ============================================================ */
.te-write-head-right { display: flex; align-items: center; gap: 14px; }
.te-mic {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--te-teal); background: #fff;
  color: var(--te-teal); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.te-mic:hover { background: var(--te-teal); color: #fff; }
.te-mic-dot {
  width: 9px; height: 9px; border-radius: 50%; background: currentColor;
}
.te-mic.is-live {
  background: #d0503f; border-color: #d0503f; color: #fff;
}
.te-mic.is-live .te-mic-dot { background: #fff; animation: te-mic-pulse 1s infinite; }
@keyframes te-mic-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}
#te-mic-status { color: var(--te-teal); }

/* ============================================================
   Speak-to-write help modal (te_write.php) — brand-styled
   ============================================================ */
.te-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 44, 77, .55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.te-modal[hidden] { display: none; }

.te-modal-box {
  position: relative; background: #fff;
  border-radius: 20px; overflow: hidden;
  max-width: 430px; width: 100%;
  box-shadow: 0 30px 80px rgba(15, 44, 77, .4);
  animation: te-modal-in .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes te-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Gradient header — echoes the app's orange hero, with a floating icon. */
.te-modal-header {
  position: relative;
  background: linear-gradient(100deg, #ef6c2f 0%, #f08a5a 46%, #f6d9c4 100%);
  padding: 26px 28px 22px; color: #fff; text-align: center;
}
.te-modal-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; margin: 0 auto 12px;
}
.te-modal-brand {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8); margin-bottom: 4px;
}
.te-modal-title {
  margin: 0; color: #fff; font-size: 21px; font-weight: 800; letter-spacing: -.01em;
}
.te-modal-x {
  position: absolute; top: 12px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); border: none;
  font-size: 20px; line-height: 1; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.te-modal-x:hover { background: rgba(255, 255, 255, .34); }

/* Body */
.te-modal-body { padding: 22px 26px 24px; }
.te-modal-lead {
  margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--te-ink); text-align: center;
}

/* Steps as clean numbered rows, not a bare bullet list. */
.te-modal-steps { margin: 0 0 22px; padding: 0; list-style: none; counter-reset: te-step; }
.te-modal-steps li {
  counter-increment: te-step;
  position: relative; padding: 10px 0 10px 40px;
  font-size: 14px; line-height: 1.5; color: var(--te-ink);
  border-bottom: 1px solid var(--te-line-2);
}
.te-modal-steps li:last-child { border-bottom: none; }
.te-modal-steps li::before {
  content: counter(te-step);
  position: absolute; left: 0; top: 9px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--te-orange-wash); color: var(--te-primary-x);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Button row — the primary is a TEAL PILL, exactly like the hero's
   "Engine tools" action, so the modal feels part of the app. */
.te-modal-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.te-modal-actions .te-btn {
  width: 100%; justify-content: center; text-align: center;
  border-radius: 999px; padding: 12px 18px; font-size: 14.5px; font-weight: 600;
}
.te-modal-primary {
  background: var(--te-teal); color: #fff; border: 1px solid var(--te-teal);
}
.te-modal-primary:hover { background: var(--te-teal-d); border-color: var(--te-teal-d); color: #fff; }
.te-modal-actions .te-btn--ghost {
  background: #fff; color: var(--te-navy); border: 1.5px solid var(--te-line);
}
.te-modal-actions .te-btn--ghost:hover { background: var(--te-line-2); color: var(--te-navy); }

/* ============================================================
   Writing craft assessment — technique / grammar / punctuation
   / spelling, as red-amber-green cards (student + tutor)
   ============================================================ */
.te-craft { margin: 4px 0 18px; }
.te-craft h3 {
  margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--te-navy);
}
.te-craft-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
}
.te-craft-card {
  border: 1px solid var(--te-line); border-left-width: 4px;
  border-radius: 12px; padding: 12px 14px; background: #fff;
}
.te-craft-top { display: flex; align-items: center; gap: 8px; }
.te-craft-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.te-craft-label { font-weight: 700; font-size: 14px; color: var(--te-navy); flex: 1 1 auto; }
.te-craft-band {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px;
}
.te-craft-note {
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--te-ink);
}
.te-craft--green { border-left-color: #2a9d5c; }
.te-craft--green .te-craft-dot  { background: #2a9d5c; }
.te-craft--green .te-craft-band { background: #e6f5ec; color: #1e7444; }
.te-craft--amber { border-left-color: #e5a029; }
.te-craft--amber .te-craft-dot  { background: #e5a029; }
.te-craft--amber .te-craft-band { background: #fdf2e0; color: #a56d10; }
.te-craft--red   { border-left-color: #d0503f; }
.te-craft--red .te-craft-dot    { background: #d0503f; }
.te-craft--red .te-craft-band   { background: #fbeae7; color: #a63a2c; }

.te-review-summary {
  background: var(--te-orange-wash); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px;
}
.te-review-summary h3 { margin: 0 0 6px; font-size: 14px; color: var(--te-primary-x); }
.te-review-summary p  { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--te-ink); }

.te-craft--admin { background: var(--te-line-2); border-radius: 12px; padding: 14px; }
.te-craft-summary {
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--te-ink);
}

/* ============================================================
   Itemised writing corrections: task check, spelling, grammar,
   punctuation, before/after improvements
   ============================================================ */
.te-taskchk { list-style: none; margin: 8px 0 0; padding: 0; }
.te-taskchk li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid var(--te-line-2); font-size: 14px;
}
.te-taskchk li:last-child { border-bottom: none; }
.te-taskchk li em { display: block; font-style: normal; color: var(--te-dim); font-size: 13px; margin-top: 2px; }
.te-taskchk-mark {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.te-taskchk--yes    .te-taskchk-mark { background: #e6f5ec; color: #1e7444; }
.te-taskchk--partly .te-taskchk-mark { background: #fdf2e0; color: #a56d10; }
.te-taskchk--no     .te-taskchk-mark { background: #fbeae7; color: #a63a2c; }

.te-fixlist { list-style: none; margin: 8px 0 0; padding: 0; }
.te-fixlist--sp { display: flex; flex-wrap: wrap; gap: 8px; }
.te-fixlist--sp li {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--te-line-2); border-radius: 999px; padding: 5px 12px; font-size: 13.5px;
}
.te-was   { color: #a63a2c; text-decoration: line-through; }
.te-arrow { color: var(--te-dim); }
.te-now   { color: #1e7444; font-weight: 600; }

.te-fix {
  border-left: 3px solid var(--te-line); padding: 8px 0 8px 12px; margin-bottom: 10px;
}
.te-fix-quote { margin: 0; font-style: italic; color: var(--te-ink); font-size: 14px; }
.te-fix-prob  { margin: 4px 0 0; font-size: 13px; color: #a63a2c; }
.te-fix-fix   { margin: 4px 0 0; font-size: 13.5px; color: #1e7444; }

.te-improve { margin: 8px 0 0; padding-left: 20px; }
.te-improve li { margin-bottom: 14px; }
.te-improve-act { margin: 0 0 6px; font-size: 14.5px; }
.te-improve-why { color: var(--te-dim); font-weight: 400; }
.te-improve-ba {
  margin: 4px 0 0; font-size: 13.5px; line-height: 1.5;
  padding: 7px 10px; border-radius: 8px; background: var(--te-line-2);
}
.te-improve-after { background: #eef7f7; }
.te-ba-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--te-dim); margin-right: 6px;
}

/* Likely-mark chip inside the review summary */
.te-likely {
  display: flex; align-items: center; gap: 14px;
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: #fff; border: 1px solid var(--te-line); border-left-width: 4px;
}
.te-likely-num { font-size: 26px; font-weight: 800; line-height: 1; }
.te-likely-txt strong { display: block; font-size: 14px; color: var(--te-navy); }
.te-likely-txt em {
  display: block; font-style: normal; font-size: 12.5px; color: var(--te-dim); margin-top: 2px;
}
.te-likely--green { border-left-color: #2a9d5c; }
.te-likely--green .te-likely-num { color: #2a9d5c; }
.te-likely--amber { border-left-color: #e5a029; }
.te-likely--amber .te-likely-num { color: #a56d10; }
.te-likely--red   { border-left-color: #d0503f; }
.te-likely--red .te-likely-num   { color: #a63a2c; }

/* "We reviewed this text" transparency panel */
.te-reviewed {
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--te-line-2); border-radius: 10px; font-size: 13px;
}
.te-reviewed summary { cursor: pointer; color: var(--te-dim); font-weight: 600; }
.te-reviewed-text {
  margin: 8px 0 0; padding: 10px; background: #fff; border-radius: 8px;
  font-size: 13.5px; line-height: 1.5; color: var(--te-ink); white-space: pre-wrap;
}

/* ============================================================
   Tutor-only craft analysis (te_admin_marking.php)
   ============================================================ */
.te-ta {
  margin-top: 12px; padding: 14px; border-radius: 12px;
  background: #fbfcfe; border: 1px solid var(--te-line);
  border-left: 4px solid var(--te-navy);
}
.te-ta > summary {
  cursor: pointer; font-weight: 700; color: var(--te-navy); font-size: 14.5px;
}
.te-ta-lock {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; background: var(--te-navy); color: #fff;
  padding: 2px 8px; border-radius: 999px; margin-right: 8px;
}
.te-ta h4 {
  margin: 16px 0 6px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--te-dim);
}
.te-ta-overall {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--te-line-2); font-size: 14px; line-height: 1.55; color: var(--te-ink);
}
.te-ta-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.te-ta-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--te-dim); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--te-line);
}
.te-ta-table td {
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--te-line-2);
  vertical-align: top; line-height: 1.5;
}
.te-ta-gap {
  padding: 10px 0; border-bottom: 1px solid var(--te-line-2);
}
.te-ta-gap:last-child { border-bottom: none; }
.te-ta-crit { margin: 0 0 6px; font-size: 14px; color: var(--te-ink); }

/* ============================================================
   The hidden attribute must always win.
   Any rule that sets display (flex, grid, block) outranks the
   browser default for [hidden], so elements JS "hides" stay on
   screen — that is why the writing action bar survived final
   submission, and why the mic modal would not close.
   ============================================================ */
[hidden] { display: none !important; }

/* Action bar: keep the buttons hard right, and let the status line that
   follows sit under them rather than drifting to the far left. */
.te-write-summary > div:last-child,
.te-write-actions {
  margin-left: auto;
  justify-content: flex-end;
}
#te-review-status {
  display: block;
  text-align: right;
}

/* Small RAG circle for the score in list rows (dashboard) */
.te-rag-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: -.02em;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.28);
  vertical-align: middle;
}
.te-rag-mini--green   { background: #2a9d5c; }
.te-rag-mini--amber   { background: #e5a029; }
.te-rag-mini--red     { background: #d0503f; }
.te-rag-mini--pending { background: #b7c0cf; }
.te-rag-mini-of {
  margin-left: 8px; color: var(--te-dim); font-size: 13px; vertical-align: middle;
}

/* Test-name field in the builder (.te-field--wide already spans the grid) */
.te-field--wide input[type="text"] { width: 100%; }
.te-field-hint {
  display: block; margin-top: 4px; font-size: 12.5px; color: var(--te-dim);
}

/* Facts list inside the build confirmation */
.te-cb-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
  margin: 0 0 18px; padding: 12px 14px;
  background: var(--te-line-2); border-radius: 10px;
}
.te-cb-facts dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--te-dim); margin-bottom: 2px;
}
.te-cb-facts dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--te-navy); }

/* ============================================================
   Poetry passages
   A poem set in the same justified prose block as an article
   stops looking like a poem. Verse needs: a serif face, the
   line breaks the poet chose, stanza spacing, a ragged right
   edge, and wrapped lines indented so they read as runovers
   rather than new lines.
   ============================================================ */
.te-passage--poetry {
  font-family: Lora, Georgia, "Times New Roman", serif;
  font-size: 1.06em;
  line-height: 1.9;
  text-align: left;          /* never justify verse */
  hyphens: none;
  max-width: 34em;
  margin-inline: auto;
}
.te-passage--poetry p {
  margin: 0 0 1.6em;
  padding-left: 1.4em;
  text-indent: -1.4em;       /* wrapped lines hang inward */
}
.te-passage--poetry p:last-child { margin-bottom: 0; }
.te-passage--poetry br { line-height: inherit; }
.te-passage--poetry em  { font-style: italic; }
.te-passage--poetry .te-ln { display: none; }   /* no line numbers on verse */

@media print {
  .te-passage--poetry { font-size: 11.5pt; line-height: 1.75; }
  .te-passage--poetry p { page-break-inside: avoid; }
}

/* Tutor dashboard: action buttons sit together on the right of a row */
.te-tutor-acts { white-space: nowrap; text-align: right; }
.te-tutor-acts .te-btn { padding: 6px 12px; font-size: 13px; margin-left: 6px; }
.te-tutor-tests td { vertical-align: middle; }

/* How-they-sit-it picker */
.te-sitmode { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.te-sitmode .te-inline-check {
  align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1.5px solid var(--te-line); border-radius: 12px;
}
.te-sitmode .te-inline-check:has(input:checked) {
  border-color: var(--te-teal); background: #f2fbfb;
}
.te-sitmode strong { display: block; font-size: 14.5px; color: var(--te-navy); }
.te-sitmode em {
  display: block; font-style: normal; font-size: 12.5px; color: var(--te-dim); margin-top: 2px;
}

/* "Set for you" — assigned work a child has not started */
.te-setwork { border-left: 4px solid var(--te-teal); }
.te-setwork-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--te-line-2); flex-wrap: wrap;
}
.te-setwork-row:last-child { border-bottom: none; }
.te-setwork-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.te-setwork-acts .te-btn { padding: 8px 16px; font-size: 13.5px; }

/* Dashboard filter bars */
.te-filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 10px 0 14px; padding: 10px 12px;
  background: var(--te-line-2); border-radius: 12px;
}
.te-filters input[type="search"],
.te-filters select {
  padding: 8px 12px; border: 1.5px solid var(--te-line); border-radius: 999px;
  font: inherit; font-size: 13.5px; background: #fff; color: var(--te-ink);
}
.te-filters input[type="search"] { min-width: 200px; flex: 1 1 200px; }
.te-filters #tf-count, .te-filters #af-count { margin-left: auto; font-size: 12.5px; }

/* Group headings inside a filtered table */
tr.te-grouphead td {
  background: var(--te-line-2); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--te-navy);
  padding: 8px 10px; border-bottom: 1px solid var(--te-line);
}

/* Test-type chip beside a test name */
.te-typechip {
  display: inline-block; margin-left: 8px; padding: 2px 10px;
  border-radius: 999px; background: var(--te-orange-wash); color: var(--te-primary-x);
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  vertical-align: middle; white-space: nowrap;
}