/* Tutor console.
 *
 * A different job from the pupil app, so a different treatment: this is scanned and operated, not
 * read. Denser, quieter, information first. It shares the product's colour tokens so it is
 * recognisably the same thing, and every one of them is a custom property because white-labelling
 * a tutor's own brand over this is Phase 5 and should be a variable change, not a rewrite.
 *
 * Semantic colour (focus / steady / strong) is kept deliberately separate from the brand accent,
 * so a tenant swapping their colours can never accidentally make "needs attention" look fine.
 */

:root{
  --navy:#14213d; --ink:#182136; --ink-soft:#414b5e;
  --paper:#fffdfa; --surface:#f7f3ea; --surface-2:#efe9dc;
  --line:#dedbd3; --muted:#636974;
  --accent:#f27f62;--accent-text:#a95945; --accent-ink:#8f3a22;
  --cyan:#4bbac5;
  --focus:#b3472a; --focus-bg:#fbeae4;
  --steady:#806526; --steady-bg:#faf1d8;
  --strong:#0d7568; --strong-bg:#e4f4f0;
  --radius:14px;
  --shadow:0 10px 30px rgba(20,33,61,.07);
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
/* The browser's own [hidden] rule is display:none at the lowest possible specificity, so any
   class here that sets display — .field, .add-row, .banner — silently defeats it and shows a
   field that was meant to be hidden. Stated once, loudly, rather than remembered at every rule. */
[hidden]{display:none!important}
body{margin:0;background:var(--surface);color:var(--ink);font:15px/1.6 var(--font);
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.2}
h1{font-size:30px;font-weight:800}
h2{font-size:17px;font-weight:800}
p{margin:0}
button{font:inherit}

.wrap{max-width:1040px;margin:0 auto;padding:28px 20px 80px}
.lede{color:var(--muted);font-size:14px;margin-top:4px}

/* ---- top bar ------------------------------------------------------------------------------ */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;background:var(--navy);color:#fff}
.brand{display:flex;align-items:center;gap:9px;font-size:15px;letter-spacing:-.01em}
.brand-mark{color:var(--accent-text);font-size:17px}
.topbar-right{display:flex;align-items:center;gap:14px}
/* Was opacity:.75, which on the dark navy bar left the signed-in name greyed to the point of
   looking disabled. It is the one thing on that bar telling you WHOSE account you are in — worth
   reading at a glance, especially for a tutor who also has a parent account. */
.who{font-size:13px;color:rgba(255,255,255,.88)}
@media(max-width:560px){ .who{display:none} }

/* ---- buttons ------------------------------------------------------------------------------ */
.btn{border:1px solid var(--line);background:var(--paper);color:var(--ink);
  padding:9px 15px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .12s,border-color .12s}
.btn:hover{background:var(--surface-2)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:#1d2e52}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-quiet{background:transparent;border-color:transparent;color:inherit;opacity:.85}
.btn-quiet:hover{background:rgba(255,255,255,.12)}
.wrap .btn-quiet{color:var(--ink);border-color:var(--line)}
.wrap .btn-quiet:hover{background:var(--surface-2)}
.btn-block{width:100%;justify-content:center}
.btn-danger{color:var(--focus);border-color:var(--focus)}
.btn-danger:hover{background:var(--focus-bg)}
.btn-link{border:0;background:none;color:var(--accent-ink);font-weight:700;font-size:14px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.btn-link.subtle{color:var(--muted);font-weight:600}
.back{border:0;background:none;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;
  padding:0;margin-bottom:22px}
.back:hover{color:var(--ink)}

/* ---- sign in ------------------------------------------------------------------------------ */
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:410px;background:var(--paper);border:1px solid var(--line);
  border-radius:20px;padding:34px 30px;box-shadow:var(--shadow)}
.auth-card .brand{color:var(--ink);margin-bottom:22px}
.auth-card h1{font-size:26px;margin-bottom:6px}
.auth-lede{color:var(--muted);font-size:14px;margin-bottom:24px}
.field{display:block;margin-bottom:15px}
.field>span{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px}
.field em{font-style:normal;font-weight:500;color:var(--muted)}
.field input,.field select{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:10px;font:15px var(--font);background:var(--paper);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--cyan)}
.hint{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.auth-switch{text-align:center;font-size:14px;color:var(--muted);margin-top:16px}
.form-message{min-height:20px;font-size:13.5px;font-weight:600;color:var(--focus);margin:6px 0 10px}
.form-message.good{color:var(--strong)}

/* ---- page furniture ----------------------------------------------------------------------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:22px;flex-wrap:wrap}
.head-actions{display:flex;gap:9px}
.banner{border-radius:var(--radius);padding:14px 17px;margin-bottom:22px;font-size:14px}
.banner-warn{background:var(--steady-bg);border:1px solid #e6d5a4}
.banner-warn strong{display:block;margin-bottom:3px}
.banner-warn p{color:var(--ink-soft)}
.add-row{display:flex;gap:9px;margin-bottom:18px;flex-wrap:wrap}
.add-row input,.add-row select{padding:10px 13px;border:1px solid var(--line);border-radius:10px;
  font:15px var(--font);background:var(--paper);color:var(--ink)}
.add-row #add-name{flex:1;min-width:160px}
.add-row #add-initial{width:80px}
.add-row input:focus,.add-row select:focus{outline:none;border-color:var(--cyan)}
.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty h2{color:var(--ink);margin-bottom:8px}
.empty p{max-width:420px;margin:0 auto;font-size:14px}
.empty-note{color:var(--muted);font-size:13.5px;padding:8px 0}

/* ---- student list ------------------------------------------------------------------------- */
.student-list{display:grid;gap:10px}
/* color:inherit is load-bearing: this is a <button>, and a button does NOT inherit colour from
   its parent — it falls back to the UA's buttontext (near-black), which disappeared against the
   dark card while every non-button element on the same row was fine. */
.student-row{display:flex;align-items:center;gap:15px;width:100%;text-align:left;color:inherit;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 17px;cursor:pointer;transition:border-color .12s,transform .12s}
.student-row:hover{border-color:var(--cyan);transform:translateY(-1px)}
.student-row:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.avatar{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);font-weight:800;font-size:16px;color:var(--ink)}
.student-main{flex:1;min-width:0}
.student-main strong{display:block;font-size:15.5px}
.student-meta{color:var(--muted);font-size:12.5px;margin-top:2px}
/* Numbers line up column-wise down the list, so tabular figures stop them dancing. */
.student-figure{text-align:right;font-variant-numeric:tabular-nums}
.student-figure b{display:block;font-size:19px;font-weight:800}
.student-figure span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* ---- the join code: read aloud, so sized to be read aloud --------------------------------- */
.code-panel{background:var(--navy);color:#fff;border-radius:18px;padding:26px 24px;
  margin-bottom:26px;text-align:center}
.code-label{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;opacity:.75}
.code{font:800 44px/1.1 var(--mono);letter-spacing:11px;margin:14px 0 10px;
  /* The trailing letter-space would otherwise push the string visibly off-centre. */
  text-indent:11px;word-break:break-all}
.code-note{font-size:13px;opacity:.8;margin-bottom:16px}
.code-panel .btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.code-panel .btn:hover{background:rgba(255,255,255,.24)}
@media(max-width:520px){ .code{font-size:31px;letter-spacing:6px;text-indent:6px} }

/* ---- stats -------------------------------------------------------------------------------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin-bottom:22px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.stat b{display:block;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* ---- panels ------------------------------------------------------------------------------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:18px}
.panel h2{margin-bottom:5px}
.panel-note{color:var(--muted);font-size:13px;margin-bottom:15px}

/* ---- topics ------------------------------------------------------------------------------- */
.topic-list{display:grid;gap:9px}
.topic{display:grid;grid-template-columns:1fr 96px 58px;align-items:center;gap:13px}
.topic-name{font-size:14px;min-width:0}
.topic-name small{display:block;color:var(--muted);font-size:11.5px}
.bar{height:7px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.bar span{display:block;height:100%;border-radius:99px}
.topic-pct{text-align:right;font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums}
/* State is carried by the chip's shape and word as well as its colour, so it survives being
   printed, screenshotted in greyscale, or read by someone who cannot distinguish the hues. */
.chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;
  margin-left:7px;vertical-align:1px}
.chip-focus{background:var(--focus-bg);color:var(--focus)}
.chip-strong{background:var(--strong-bg);color:var(--strong)}
.fill-focus{background:var(--focus)}
.fill-steady{background:var(--steady)}
.fill-strong{background:var(--strong)}
@media(max-width:520px){ .topic{grid-template-columns:1fr 60px 46px;gap:9px} }

/* ---- activity ----------------------------------------------------------------------------- */
.activity{display:flex;flex-wrap:wrap;gap:5px}
.day{width:15px;height:15px;border-radius:4px;background:var(--surface-2)}
.day-1{background:#cfe8e4} .day-2{background:#8fd0c6} .day-3{background:#3ea695} .day-4{background:var(--strong)}

/* ---- cohort chips (student-list filter row, student-detail membership row) ----------------- */
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:6px 13px;border-radius:99px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink-soft);cursor:pointer;transition:border-color .12s,background .12s}
.chip-btn:hover{border-color:var(--cyan)}
.chip-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
.chip-btn .remove{opacity:.6;font-weight:800}
.chip-btn .remove:hover{opacity:1}

/* ---- panel header row (title + a quiet status indicator) ----------------------------------- */
.panel-head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.panel-head-row h2{margin-bottom:0}
.recently-changed{font-size:11.5px;font-weight:700;color:var(--strong)}

/* ---- tutor notes --------------------------------------------------------------------------- */
.notes-list{display:grid;gap:11px;margin-top:14px}
.note-card{border:1px solid var(--line);border-radius:11px;padding:13px 15px;background:var(--paper)}
.note-card.pinned{border-color:var(--accent)}
.note-meta{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted);margin-bottom:7px}
.note-body{font-size:14px;white-space:pre-wrap;color:var(--ink)}
.note-edited{font-size:11px;color:var(--muted);margin-top:7px;font-style:italic}
.note-actions{display:flex;gap:10px;margin-top:9px}
.note-actions button{border:0;background:none;padding:0;font-size:12px;font-weight:700;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.note-actions button:hover{color:var(--focus)}

/* ---- bulk guardian invite table ------------------------------------------------------------- */
.bulk-invite-rows{display:grid;gap:10px}
.bulk-invite-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.bulk-invite-row select{flex:1;min-width:180px;padding:10px 13px;border:1px solid var(--line);
  border-radius:10px;font:15px var(--font);background:var(--paper);color:var(--ink)}
.bulk-invite-row input{flex:1;min-width:200px;padding:10px 13px;border:1px solid var(--line);
  border-radius:10px;font:15px var(--font);background:var(--paper);color:var(--ink)}
.bulk-invite-row .remove-row{border:0;background:none;color:var(--muted);font-size:20px;
  line-height:1;cursor:pointer;padding:4px 8px}
.bulk-invite-row .remove-row:hover{color:var(--focus)}
.bulk-result{display:flex;justify-content:space-between;gap:10px;padding:9px 13px;
  border-radius:10px;font-size:13.5px;margin-top:8px}
.bulk-result.ok{background:var(--strong-bg);color:var(--strong)}
.bulk-result.error{background:var(--focus-bg);color:var(--focus)}

/* ---- custom domain -------------------------------------------------------------------------- */
.dns-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13.5px}
.dns-table th,.dns-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.dns-table th{width:70px;color:var(--muted);font-weight:700}
.dns-table td{font-family:var(--mono);word-break:break-all}
.good-status{color:var(--strong);font-size:14px}

/* ---- devices ------------------------------------------------------------------------------ */
.device-list{display:grid;gap:9px}
.device{display:flex;align-items:center;justify-content:space-between;gap:13px;
  border:1px solid var(--line);border-radius:11px;padding:11px 14px}
.device-main strong{font-size:14px}
.device-main span{display:block;color:var(--muted);font-size:12px}
.device.revoked{opacity:.5}

/* ---- question library: coverage ------------------------------------------------------------ */
/* Read by an adult who is planning, so density is the point — but every row still carries a
   sentence, because a table of numbers nobody reads changes nothing. Uses the semantic
   focus/steady/strong tokens rather than the brand accent, so a white-labelled tenant can never
   make "one shape only" look fine. */
.cov-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:11px;margin-bottom:22px}
.cov-stat{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--paper)}
.cov-stat b{display:block;font:800 21px Nunito;color:var(--ink);font-variant-numeric:tabular-nums}
.cov-stat span{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.35}

.cov-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:13px;margin-bottom:28px}
.cov-list{border:1px solid var(--line);border-radius:12px;padding:15px 17px;background:var(--paper)}
.cov-list h3{font:800 13.5px Nunito;margin-bottom:3px}
.cov-list p.why{color:var(--muted);font-size:11.5px;margin-bottom:10px;line-height:1.45}
.cov-list ol{margin:0;padding-left:17px;display:grid;gap:6px}
.cov-list li{font-size:12.5px;line-height:1.45}
.cov-list li b{font-weight:700}
.cov-list li span{color:var(--muted)}
.cov-list .none{color:var(--muted);font-size:12.5px;margin:0}
.cov-list.is-focus{border-left:3px solid var(--focus)}
.cov-list.is-steady{border-left:3px solid var(--steady)}

.cov-heading{font:800 16px Nunito;margin:0 0 4px}
.cov-note{color:var(--muted);font-size:12.5px;margin:0 0 14px;line-height:1.5;max-width:62ch}

.cov-table{display:grid;gap:8px}
.cov-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--paper)}
.cov-row-main{min-width:0}
.cov-row-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cov-row-top strong{font-size:14px}
.cov-row-top .subject{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.cov-sentence{color:var(--ink-soft);font-size:12.5px;line-height:1.5;margin:4px 0 0}
.cov-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.cov-tag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px;
  background:var(--surface-2);color:var(--ink-soft);white-space:nowrap}
.cov-tag.one-shape{background:var(--steady-bg);color:var(--steady)}
.cov-tag.no-method{background:var(--focus-bg);color:var(--focus)}
.cov-tag.pressure{background:var(--focus-bg);color:var(--focus)}
.cov-tag.hidden-some{background:var(--surface-2)}
.cov-tag.drafts{background:var(--strong-bg);color:var(--strong)}
.cov-figures{display:flex;gap:14px;text-align:right;flex:none}
.cov-figure b{display:block;font:800 15px Nunito;font-variant-numeric:tabular-nums;color:var(--ink)}
.cov-figure span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:640px){
  .cov-row{grid-template-columns:1fr}
  .cov-figures{text-align:left;margin-top:4px}
}

/* ---- question library: one topic's questions ------------------------------------------------ */
.cov-row.is-clickable{cursor:pointer;text-align:left;width:100%;background:var(--paper);font:inherit;color:inherit}
.cov-row.is-clickable:hover{border-color:var(--accent)}
.q-row{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--paper)}
.q-row.is-hidden{opacity:.62;border-style:dashed}
.q-text{font-size:13.5px;line-height:1.55;margin:0 0 8px}
.q-opts{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 9px}
.q-opt{font-size:11.5px;padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--ink-soft)}
.q-opt.is-answer{background:var(--strong-bg);color:var(--strong);font-weight:700}
.q-method{background:var(--surface);border-left:3px solid var(--cyan);border-radius:8px;
  padding:9px 12px;margin:0 0 9px;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.q-method b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:3px}
.q-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.q-actions .btn{font-size:12px;padding:6px 11px}
.q-hidden-note{font-size:11.5px;color:var(--focus);font-weight:700}
.q-method-form{display:grid;gap:7px;margin-top:9px}
.q-method-form textarea{width:100%;min-height:74px;border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;font:13px "DM Sans",sans-serif;resize:vertical;background:var(--paper);color:var(--ink)}
.q-method-form .q-count{font-size:11px;color:var(--muted)}

/* ---- authoring ---------------------------------------------------------------------------- */
.wrap-narrow{max-width:660px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row-2{grid-template-columns:1fr}}
.optional{font-weight:500;color:var(--muted)}

/* The editor's labels wrap their own control, so they lay out as blocks rather than inline text.
   NOTE the :not() — these are id-scoped selectors, so a plain `.qe-opt input[type=radio]` further
   down could never win against them on specificity. Radios and checkboxes are excluded HERE rather
   than overridden later, which is the only way that stays true as this block grows. */
#qe-form .field-label{display:block;font-size:12.5px;font-weight:700;margin-bottom:16px}
#qe-form textarea,
#qe-form input:not([type=radio]):not([type=checkbox]),
#qe-form select{display:block;width:100%;margin-top:6px;
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font:15px var(--font);background:var(--paper);color:var(--ink)}
#qe-form textarea{font-size:14px;resize:vertical;line-height:1.5}
#qe-form textarea:focus,#qe-form input:focus,#qe-form select:focus{outline:none;border-color:var(--cyan)}
#qe-form .q-count{display:block;font-size:11px;color:var(--muted);margin-top:4px;font-weight:500}
#qe-form .hint{font-weight:500}
#qe-form .qe-type{border:0;padding:0;margin:0 0 18px}
#qe-form .qe-type legend{padding:0;margin-bottom:8px}
#qe-form .qe-type label{display:inline-flex;align-items:center;gap:8px;margin-right:22px;
  font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}

/* One option row: a radio for "this is the right one" plus the text of the option itself. */
#qe-form .qe-opt{display:flex;align-items:center;gap:11px;margin-bottom:9px}
#qe-form .qe-opt input[type=text]{margin-top:0;flex:1}

/* Flags read as advice, not as errors — a tutor writing their first question is not failing. */
.qe-flags{display:grid;gap:8px;margin:6px 0 16px}
.qe-flag{border-radius:10px;padding:10px 13px;font-size:13px;line-height:1.5;border:1px solid}
.qe-flag.is-blocking{background:var(--focus-bg);border-color:var(--focus);color:var(--ink)}
.qe-flag.is-check{background:var(--steady-bg);border-color:var(--steady);color:var(--ink)}
.qe-flag.is-note{background:var(--surface-2);border-color:var(--line);color:var(--ink-soft)}
.qe-flag b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:3px}

/* The Answer Check deliberately looks like the pupil's own question card, not like a form. */
.ac-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin:18px 0}
.ac-question{font-size:19px;font-weight:700;line-height:1.4;margin-bottom:18px}
.ac-option{display:block;width:100%;text-align:left;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);border-radius:12px;padding:13px 16px;margin-bottom:9px;
  font:15px var(--font);cursor:pointer}
.ac-option:hover{border-color:var(--cyan)}
.ac-option.is-picked{border-color:var(--navy);background:var(--surface-2);font-weight:700}

/* A question row in "Your own questions". */
.mq-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 18px;margin-bottom:10px}
.mq-row.is-archived{opacity:.62}
.mq-main{min-width:0;flex:1}
.mq-text{font-size:14.5px;font-weight:600;line-height:1.45;margin-bottom:6px}
.mq-meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:5px 12px}
.mq-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.mq-status{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:3px 9px;border-radius:99px}
.mq-status.is-draft{background:var(--surface-2);color:var(--muted)}
.mq-status.is-pilot{background:var(--steady-bg);color:var(--steady)}
.mq-status.is-live{background:var(--strong-bg);color:var(--strong)}
.mq-status.is-archived{background:var(--surface-2);color:var(--muted)}
.mq-needs-check{font-size:11.5px;font-weight:700;color:var(--focus)}

/* ---- diagrams ------------------------------------------------------------------------------- */
/* Diagrams draw with currentColor, so they simply take the ink of whatever they sit in and work in
   both themes without a second stylesheet. */
.qe-diagram-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start;
  margin-bottom:16px}
@media(max-width:640px){.qe-diagram-body{grid-template-columns:minmax(0,1fr)}}
.qe-diagram-preview{min-width:150px;display:flex;align-items:center;justify-content:center;
  padding:12px;border:1px dashed var(--line);border-radius:12px;background:var(--paper);
  color:var(--ink)}
.qe-diagram-preview svg{max-width:190px;height:auto}
.qe-diagram-preview:empty{display:none}
#qe-form .qe-prop{margin-bottom:11px}
#qe-form .qe-prop .hint{margin-top:3px}
.ac-diagram{display:flex;justify-content:center;margin-bottom:18px;color:var(--ink)}
.ac-diagram svg{max-width:min(100%,300px);height:auto}
.q-diagram,.mq-diagram{margin:8px 0;color:var(--ink)}
.q-diagram svg,.mq-diagram svg{max-width:min(100%,190px);height:auto}

/* The attention card. Warm rather than alarming — a paused question is ordinary, and the tutor is
   being told early precisely so it stays ordinary. */
.attn-card{background:var(--steady-bg);border:1px solid var(--steady);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:22px}
.attn-title{font-size:16px;margin:0 0 4px}
.attn-lede{font-size:13.5px;color:var(--ink-soft);margin:0 0 14px}
.attn-item{background:var(--paper);border-radius:11px;padding:11px 14px;margin-bottom:8px}
.attn-q{font-size:14px;font-weight:600;line-height:1.45;margin:0 0 4px}
.attn-why{font-size:12.5px;color:var(--ink-soft);margin:0 0 3px}
.attn-where{font-size:11.5px;color:var(--muted);margin:0}
.attn-foot{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:12px 0 0}

/* ---- the in-app dialog ---------------------------------------------------------------------- */
#app-dialog{border:1px solid var(--line);border-radius:18px;padding:0;max-width:440px;width:calc(100% - 32px);
  background:var(--paper);color:var(--ink);box-shadow:0 24px 60px -20px rgba(20,33,61,.5)}
#app-dialog::backdrop{background:rgba(20,33,61,.55)}
#dlg-form{padding:26px 26px 22px}
#app-dialog h2{font-size:19px;margin-bottom:8px}
#dlg-body{color:var(--ink-soft);font-size:14.5px;line-height:1.55;margin-bottom:16px}
#dlg-body:empty{display:none;margin:0}
#app-dialog .field{margin-bottom:6px}
.dlg-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}
@media(max-width:420px){.dlg-actions{flex-direction:column-reverse}.dlg-actions .btn{width:100%}}

/* ---- dark mode ---------------------------------------------------------------------------- */
@media(prefers-color-scheme:dark){
  :root{
    --ink:#eef1f6; --ink-soft:#c2c9d6; --paper:#1a2032; --surface:#131826; --surface-2:#252d43;
    --line:#333c55; --muted:#98a2b8; --navy:#0e1424;
    --accent:#f79a7d;--accent-text:#f79a7d; --accent-ink:#f8a184;
    --focus:#f08a6b; --focus-bg:#3a2018;
    --steady:#dcb75c; --steady-bg:#332a12;
    --strong:#4fd0b6; --strong-bg:#12332e;
  }
  .banner-warn{border-color:#5a4a1e}

  /* --navy is the BRAND dark: a strong ground for white text on a light page, and almost the page
     colour itself on a dark one. Measured, the primary button sat 0.02 of luminance from its own
     background in dark mode against 0.83 in light — present but reading as disabled, which is the
     worst thing a primary action can look like. The accent carries it here instead. */
  .btn-primary{background:var(--accent);border-color:var(--accent);color:#23140d}
  .btn-primary:hover{background:#ffb094}
  .chip-btn.active{background:var(--accent);border-color:var(--accent);color:#23140d}
  .ac-option.is-picked{border-color:var(--accent)}
  /* The join code panel is the same story: navy on navy. A border rather than a stronger fill —
     it is a container to be read FROM, not an action to be drawn to. */
  .code-panel{background:var(--surface-2);border:1px solid var(--line)}
}

/* ---- Offering questions to the common library ---- */
/* .cov-row is a 2-column grid; an offer row carries more fields than that, so it gets its own
   flow-wrapping layout rather than forcing extra cells into a grid built for something else. */
.offers .cov-row,#of-eligible .cov-row,#of-mine .cov-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cov-topic{flex:1 1 260px;min-width:0;font:600 15px/1.4 'Nunito',sans-serif}
.cov-num{color:var(--muted);font:500 13px/1.4 'DM Sans',sans-serif;white-space:nowrap}
.section-title{margin:26px 0 10px;font:800 17px/1.2 'Nunito',sans-serif}
.check-row{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.check-row input{margin-top:3px;flex:0 0 auto}
.hint-inline{color:var(--muted);font-weight:400;font-size:13px}
.stack{display:grid;gap:10px;max-width:640px;margin-top:14px}
.stack input[type=text],.stack input:not([type]),.stack textarea{width:100%;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;font:400 15px/1.4 'DM Sans',sans-serif}

/* WCAG 2.2 2.5.8: these sit on their own line as the only control, so the inline exception
   does not apply and they need a real 24px target. */
.btn-link{min-height:24px;display:inline-flex;align-items:center}

/* A release request waiting on this tutor — calm, but not skippable. Mirrors the parent side. */
.banner-ask{background:#e8f1f6;border:1px solid #b6d2e2;border-radius:10px;padding:14px 16px;margin:0 0 12px}
.banner-ask strong{display:block;margin-bottom:4px;font-size:15px}
.banner-ask p{margin:0 0 8px}
.transfer-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.transfer-note{font-size:12px;color:var(--muted);margin:0}
@media(prefers-color-scheme:dark){.banner-ask{background:#12242e;border-color:#2b4a5c}}

/* --- Claiming a web address at signup ---------------------------------------------------------
   Explained rather than presented as a bare field. A tutor is choosing something they will print
   on a card and give to families; a placeholder and a tick is not enough for them to know what
   they are agreeing to, and the cost of picking badly lands months later. */
.check-inline{display:flex;align-items:center;gap:8px;margin:2px 0 7px;
  font-size:13px;color:var(--ink-soft);cursor:pointer}
.check-inline input{width:auto;margin:0;flex:0 0 auto}
.field input[type=color]:disabled{opacity:.45;cursor:not-allowed}

.subdomain-input{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);overflow:hidden}
.subdomain-input input{border:0;border-radius:0;flex:1;min-width:0;background:transparent}
.subdomain-input input:focus{outline:none}
.subdomain-input:focus-within{border-color:var(--accent)}
.subdomain-suffix{display:flex;align-items:center;padding:0 11px;background:var(--surface-2);
  color:var(--muted);font-size:13px;white-space:nowrap;border-left:1px solid var(--line)}
.subdomain-help{margin-top:9px;padding:11px 13px;background:var(--surface-2);border-radius:8px;
  font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.subdomain-help p{margin:0 0 7px}
.subdomain-help p:last-child{margin-bottom:0}
.subdomain-help b{color:var(--ink)}
.subdomain-help-note{color:var(--muted)}
#subdomain-status{display:block;margin-top:6px;min-height:1.2em}
#subdomain-status.is-good{color:var(--strong,#0d7b6d)}
#subdomain-status.is-bad{color:var(--focus)}

/* ---- parents and guardians ------------------------------------------------------------------ */
/* Two kinds of row that must never be mistaken for one another: somebody who HAS access, and an
   invitation that may still be sitting unread in a spam folder. The pending rows are dashed and
   muted so the difference reads before any of the text does. */
.guardian-list{display:grid;gap:9px}
.guardian{display:flex;align-items:flex-start;justify-content:space-between;gap:13px;
  border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.guardian-main{min-width:0}
.guardian-main strong{font-size:14px;display:block}
.guardian-main .email{display:block;color:var(--muted);font-size:12px;word-break:break-word}
.guardian-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.gtag{font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:99px;
  background:var(--surface-2);color:var(--ink-soft)}
.gtag.is-consenting{background:var(--strong-bg);color:var(--strong)}
.gtag.is-unverified{background:var(--steady-bg,var(--surface-2));color:var(--steady,var(--ink-soft))}
.guardian-actions{display:flex;flex-wrap:wrap;gap:7px;flex:none}
.guardian.is-pending{border-style:dashed;background:var(--surface-2)}
.guardian .why{display:block;font-size:11.5px;color:var(--muted);margin-top:6px;max-width:34ch}
.sub-head{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:18px 0 9px}
.invite-link{display:block;margin-top:9px;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;
  word-break:break-all;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;color:var(--ink-soft)}
@media (max-width:560px){
  .guardian{flex-direction:column;align-items:stretch}
  .guardian-actions{justify-content:flex-start}
}

/* ---- sessions, and reviewing them ------------------------------------------------------------ */
/* color:inherit is load-bearing on .session-row for the same reason it is on .student-row: this is
   a <button>, and a button does not inherit colour — it falls back to the UA's near-black, which
   vanishes on the dark card. */
.session-list{display:grid;gap:9px}
.session-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;color:inherit;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  cursor:pointer;transition:border-color .12s,transform .12s}
.session-row:hover{border-color:var(--cyan);transform:translateY(-1px)}
.session-row:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.session-row[disabled]{cursor:default;opacity:.62}
.session-row[disabled]:hover{border-color:var(--line);transform:none}
.session-main{flex:1;min-width:0}
.session-main strong{display:block;font-size:14.5px}
.session-meta{color:var(--muted);font-size:12.5px;margin-top:2px}
.session-figure{text-align:right;font-variant-numeric:tabular-nums;flex:none}
.session-figure b{display:block;font-size:17px;font-weight:800}
.session-figure span{display:block;color:var(--muted);font-size:11.5px}
.session-wrong{flex:none;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;
  background:var(--focus-bg);color:var(--focus)}
.session-wrong.none{background:var(--strong-bg);color:var(--strong)}

.review-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:20px;flex-wrap:wrap}
.review-score{text-align:right;font-variant-numeric:tabular-nums}
.review-score b{display:block;font-size:30px;font-weight:800;line-height:1}
.review-score span{color:var(--muted);font-size:13px}
.review-tools{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.review-body{display:flex;flex-direction:column;gap:22px}

/* Numbered pills, one per question, coloured by outcome. The fastest way from "24/40" to the
   eight that went wrong. */
.jump-strip{display:flex;flex-wrap:wrap;gap:5px}
.jump{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);font:700 12px var(--font);cursor:pointer;font-variant-numeric:tabular-nums;
  display:grid;place-items:center;transition:transform .1s}
.jump:hover{transform:translateY(-1px)}
.jump:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.jump.is-correct{background:var(--strong-bg);border-color:var(--strong-bg);color:var(--strong)}
.jump.is-wrong{background:var(--focus-bg);border-color:var(--focus);color:var(--focus)}
.review-card-date{font-size:11.5px;color:var(--muted);font-weight:700}
/* A brief ring when the jump strip lands you somewhere, so the eye knows where it went. */
@keyframes review-land{from{box-shadow:0 0 0 3px var(--cyan)}to{box-shadow:0 0 0 0 transparent}}
.question-card.landed{animation:review-land 1.1s ease-out}
@media (prefers-reduced-motion:reduce){ .question-card.landed{animation:none;outline:2px solid var(--cyan)} }

/* A topic row became a <button> when it became openable. Buttons bring their own UA styling and,
   critically, do NOT inherit colour — the reason this needs stating rather than relying on .topic. */
.topic.is-openable{width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer;
  background:var(--paper);border:1px solid transparent;transition:border-color .12s,background .12s}
.topic.is-openable:hover{border-color:var(--cyan);background:var(--surface-2)}
.topic.is-openable:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---- what to teach next ---------------------------------------------------------------------- */
/* The steady token, never focus: a topic a group finds hard is the next lesson, not an alert. Red
   on the first screen a tutor sees every morning would make the product feel like a problem list. */
.insight-panel{border-left:3px solid var(--steady)}
.insight-scope{font-size:12.5px;color:var(--muted);font-weight:600}
.quiet-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.quiet-label{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted)}
.quiet-chips{display:flex;flex-wrap:wrap;gap:7px}
.quiet-chip{border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;
  font-size:12.5px;padding:4px 11px;border-radius:99px;cursor:pointer;transition:border-color .12s}
.quiet-chip:hover{border-color:var(--cyan)}
.quiet-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.quiet-flag{display:inline-block;margin-left:7px;font-size:11px;font-weight:700;padding:1px 7px;
  border-radius:99px;background:var(--steady-bg);color:var(--steady)}