/* ============================================================================
   Teaching Assistant — design system
   No web fonts, no frameworks: everything below is one file the browser
   already has what it needs to render, so the dashboard opens instantly on a
   phone with a poor connection.
   ========================================================================== */

:root {
  /* One hue, in eight shades, over a ground tinted toward it - nothing on the
     screen is neutral. Status is carried by saturated colour, not by hairlines. */
  --bg:        #f4f3f9;
  --surface:   #ffffff;
  --surface-2: #f2eef5;
  --line:      #d8cdde;
  --line-soft: #e6e0eb;

  --ink:       #1c0f22;
  --ink-2:     #5c3c65;
  --ink-3:     #857a8c;

  --brand:      #701589;
  --brand-deep: #320a3e;
  --brand-lift: #9049a3;

  --accent:      var(--brand);
  --accent-ink:  #ffffff;
  --accent-soft: #eee3f1;
  --accent-line: #d7bede;

  --ok:    #04c464;
  --info:  #0c8ce9;
  --amber: #fbbc04;
  --red:   #ff383c;
  --violet:#9910be;

  --warn:      var(--red);
  --warn-soft: #ffebec;
  --warn-line: #ffcbcc;

  --gold:      var(--amber);
  --gold-soft: #fef6dc;

  --focus: var(--brand);

  --r-sm: 9px;  --r-md: 13px;  --r-lg: 17px;  --r-full: 999px;

  --sp-1: 4px; --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  --shadow-1: 0 1px 2px rgba(28,15,34,.05), 0 4px 14px rgba(28,15,34,.05);
  --shadow-2: 0 2px 6px rgba(28,15,34,.06), 0 16px 40px rgba(28,15,34,.10);

  --ease: cubic-bezier(.2,.8,.2,1);
  --pnav-h: 64px;                 /* the student's section bar on a phone */
  color-scheme: light dark;

  /* The climb's own world: a night sky over the mountain, with the summit
     catching the first light. One palette in light and dark mode alike,
     so it is never redefined below. */
  --dream-top:     #0d0220;
  --dream-sky:     #2a0a4a;
  --dream-horizon: #6d1d7e;
  --dream-far:     #4d1b69;
  --dream-mid:     #36114f;
  --dream-near:    #22083a;
  --dream-deep:    #14041f;
  --dream-gold:    #ffd36e;
  --dream-dawn:    #ffc38a;
  --dream-rose:    #ff8fb8;
  --dream-snow:    #fdebff;
  --dream-star:    #fff8e6;
  /* the mountain in the first light: rock in shadow and in the light, the
     glow on the faces nearest the dawn, snow in shadow, the ranges in the
     haze behind, and the pines at the foot */
  --dream-rock-shade: #1a0730;
  --dream-rock-lit:   #5a2468;
  --dream-rock-glow:  #b8618f;
  --dream-snow-shade: #a995cf;
  --dream-haze:       #6e3f8f;
  --dream-pine:       #0c0216;
  --font-dream: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype",
                Palatino, Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14101a;
    --surface:   #1c1725;
    --surface-2: #241d2e;
    --line:      #33293f;
    --line-soft: #2a2235;

    --ink:       #f1eef5;
    --ink-2:     #b6adc2;
    --ink-3:     #8a809a;

    --brand:      #c77de0;
    --brand-deep: #4a1a5c;
    --brand-lift: #e0a8f0;

    --accent:      var(--brand);
    --accent-ink:  #1a0f20;
    --accent-soft: #2a1b34;
    --accent-line: #44304f;

    --ok:    #22d67f;
    --info:  #3aa6f0;
    --amber: #f5c542;
    --red:   #ff6e71;
    --violet:#c56ae0;

    --warn:      var(--red);
    --warn-soft: #2e1719;
    --warn-line: #4a272a;

    --gold:      var(--amber);
    --gold-soft: #2e2410;

    --focus: var(--brand);

    --shadow-1: none;
    --shadow-2: 0 8px 28px rgba(0,0,0,.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------- app bar */

/* The students' pages: a slim bar with the name and the music button. The
   teacher's pages have a shell of their own - see "The teacher's shell". */
header.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
header.top .bar {
  display: flex; align-items: stretch; gap: var(--sp-5);
  height: 56px; padding: 0 var(--sp-5);
  max-width: 1120px; margin: 0 auto; box-sizing: border-box;
}

header.top .brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 640; font-size: 14px; letter-spacing: -.015em;
  color: var(--ink); white-space: nowrap;
}

header.top .right {
  margin-left: auto; display: flex; align-items: center; gap: var(--sp-2);
  white-space: nowrap;
}
/* a phone: the name and the music button on one line */
@media (max-width: 720px) {
  header.top .bar { height: auto; gap: 0 var(--sp-3); padding: var(--sp-2) var(--sp-4); }
  header.top .brand { height: 40px; }
  header.top .right { height: 40px; }
}

/* ------------------------------------------------------------------ layout */

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
}
@media (max-width: 720px) { main { padding: var(--sp-5) var(--sp-4) var(--sp-6); } }

h1 {
  font-size: 26px; line-height: 1.2; font-weight: 640;
  letter-spacing: -.025em; margin: 0 0 var(--sp-2);
}
h2 {
  font-size: 14px; font-weight: 620; letter-spacing: -.01em;
  margin: var(--sp-6) 0 var(--sp-3); color: var(--ink);
}
h2:first-of-type { margin-top: var(--sp-5); }

p.sub, .sub {
  color: var(--ink-3); font-size: 14px; line-height: 1.55;
  margin: 0 0 var(--sp-5); max-width: 68ch;
}
h1 + p.sub { margin-top: calc(-1 * var(--sp-1)); }

code {
  font: 13px/1.4 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  background: var(--line-soft); padding: var(--sp-1) var(--sp-1); border-radius: 5px;
}

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

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-4);
}
/* A card supplies its own padding, so the text inside it should not add more at
   the edges. Without this every paragraph in the app carried style="margin:0". */
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* The few spacing decisions worth making from the markup, on the same scale as
   everything else - so they cannot drift into 10px here and 12px there. */
.flush { margin: 0 !important; }
.gap-0 { margin: 0 0 var(--sp-2); }
.gap-1 { margin-top: var(--sp-1); }
.gap-2 { margin-top: var(--sp-2); }
.gap-3 { margin-top: var(--sp-3); }
.gap-4 { margin-top: var(--sp-4); }
.gap-5 { margin-top: var(--sp-5); }
.wide { width: 100%; }
.right { text-align: right; }
.pushed { justify-content: flex-end; }

.grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  margin-bottom: var(--sp-4);
}

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
}
.stat .k {
  color: var(--ink-3); font-size: 12px; font-weight: 560;
  text-transform: uppercase; letter-spacing: .07em;
}
.stat .v {
  font-size: 30px; font-weight: 620; letter-spacing: -.03em;
  margin-top: var(--sp-1); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat .v small { font-size: 14px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }

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

.tablewrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow-x: auto;
  margin-bottom: var(--sp-4);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  position: sticky; top: 0;
  text-align: left; font-weight: 560; color: var(--ink-3);
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
tbody tr:last-child td, tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--surface-2); }
td a { font-weight: 500; color: var(--ink); }
td a:hover { color: var(--accent); }

/* ------------------------------------------------------------------- pills */

.pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-full);
  font-size: 13px; font-weight: 560; line-height: 1.5;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  font-variant-numeric: tabular-nums;
}
.pill.risk { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.pill.mute { background: var(--line-soft); color: var(--ink-3); border-color: var(--line); }
.pill.good { background: #e4f8ee; color: #06713f; border-color: #a8e6c6; }
.pill.watch { background: var(--gold-soft); color: #8a6400;
  border-color: #f2dfa4; }
.pill.gold { background: var(--gold-soft); color: #8a6400;
  border-color: #f2dfa4; font-variant-numeric: tabular-nums; }

.kbd {
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2); border: 1px solid var(--line);
  border-bottom-width: 2px;
  padding: var(--sp-1) var(--sp-1); border-radius: 6px; color: var(--ink-2);
}

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

/* A row of fields is a row whether or not a <form> is the thing holding
   them. Ten of these are plain divs, and every one of them had been
   stacking one field per line since the class was written. */
.inline { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
/* A flex item refuses to shrink below its content unless told it may,
   and a file picker's content is a whole filename. Without this the
   upload forms hung over the edge of their card on a phone. */
.inline > * { min-width: 0; max-width: 100%; }
.inline input[type=file] { width: 100%; }
label.f { display: flex; flex-direction: column; gap: var(--sp-1); font-size: 13px;
  font-weight: 540; color: var(--ink-3); }
/* a number and its unit on one line: "10 days", not "10" over "days" */
.with-unit { display: flex; align-items: center; gap: var(--sp-2); }
.with-unit input { width: 110px; }

input, select, textarea, button {
  font: inherit; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  /* A file picker is as wide as the name of the file in it, which on a phone
     is wider than the card it sits in. Nothing may outgrow its box. */
  max-width: 100%;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .75; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
textarea { line-height: 1.5; resize: vertical; }

button {
  cursor: pointer; font-weight: 560; letter-spacing: -.005em;
  background: var(--accent); color: var(--accent-ink);
  border-color: transparent; padding: var(--sp-2) var(--sp-4);
  transition: filter .14s var(--ease), transform .06s var(--ease);
}
button:hover { filter: brightness(1.07); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
button.ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--line); font-weight: 500;
}
button.ghost:hover { background: var(--surface-2); filter: none; }

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

.chart { width: 100%; height: auto; display: block; }
.chart .grid   { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis   { stroke: var(--line); stroke-width: 1; }
.chart .ax     { fill: var(--ink-3); font-size: 12px; }
.chart .line   { fill: none; stroke: var(--accent); stroke-width: 2.5;
                 stroke-linejoin: round; stroke-linecap: round; }
.chart .band   { fill: none; stroke: var(--ink-3); stroke-width: 1.75;
                 stroke-dasharray: 5 5; opacity: .55; }
.chart .dot    { fill: var(--accent); }
.chart .miss   { stroke: var(--warn); stroke-width: 2; fill: none; }
.chart .pending{ fill: var(--ink-3); }
.chart .bar    { fill: var(--accent); }
.chart .barval { fill: var(--ink-3); font-size: 12px; }
.chart .empty  { fill: var(--ink-3); font-size: 13px; }

.spark { width: 108px; height: 26px; display: block; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.75;
  stroke-linejoin: round; stroke-linecap: round; }
.spark.down polyline { stroke: var(--warn); }

.legend {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3); margin-top: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--line-soft);
}
.legend i { display: inline-block; width: 16px; height: 2px; border-radius: 2px;
  vertical-align: middle; margin-right: var(--sp-1); }

/* ----------------------------------------------------------- grading queue */

/* ------------------------------------------- the queue, sorted

   Above the piece being marked: what is waiting, as rows a teacher can
   choose from. A row is a label, a bar, one number and a button. */
.qtiles { margin-bottom: var(--sp-4); }
.qtiles .stat .v { font-size: 26px; }
.picker { margin-bottom: var(--sp-4); }
.picker h3 { font-size: 15px; }
.picker .tabs { margin-bottom: var(--sp-3); }
.pickrows { display: grid; gap: var(--sp-2); }
.pickrow { display: grid; grid-template-columns: minmax(150px, 230px) 1fr 44px auto;
  gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface); }
.pickrow.on { border-color: var(--accent); background: var(--accent-soft); }
.pickrow .pick-who a { font-weight: 600; color: var(--ink); font-size: 15px;
  white-space: nowrap; }
.pickrow .pick-who .sub { margin: 0; font-size: 12px; max-width: none; }
.picker .tabs .n { color: var(--ink-3); font-weight: 400; margin-left: var(--sp-1); }
.pickrow .track { height: 14px; background: var(--line-soft); border-radius: 999px;
  overflow: hidden; }
.pickrow .fill { height: 100%; background: var(--brand); border-radius: 999px; opacity: .8; }
.pickrow.on .fill { opacity: 1; }
.pickrow .n { font-weight: 700; font-size: 16px; text-align: right;
  font-variant-numeric: tabular-nums; }
.pickrow .btn { padding: var(--sp-1) var(--sp-3); font-size: 13px; }
@media (max-width: 720px) {
  .pickrow { grid-template-columns: 1fr 40px auto; }
  .pickrow .pick-who { grid-column: 1 / -1; }
}
/* a voice note for the student: one button, a clock, then the player */
.voice { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
.voice-row { display: flex; align-items: center; gap: var(--sp-3); }
.voice .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--warn); margin-right: var(--sp-2); vertical-align: middle; }
.voice #rec.live { border-color: var(--warn); color: var(--warn); }
.voice #rec.live .dot { animation: rec-blink 1s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
.voice-have { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.voice-have[hidden] { display: none; }
.voice-have audio { flex: 1; min-width: 0; height: 36px; }

/* what the teacher said, on the student's page */
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 var(--sp-1); border-radius: 999px; background: var(--warn); color: var(--accent-ink);
  font-size: 12px; font-weight: 700; font-style: normal; line-height: 1; }
.tabs .tab .badge { margin-left: var(--sp-1); vertical-align: 1px; }
.pnav a { position: relative; }
.pnav a .badge { position: absolute; top: 2px; left: calc(50% + 6px); }
.fbnudge { margin-bottom: var(--sp-4); }
.todo > .sub:last-child { margin-bottom: 0; }
.fb { padding: var(--sp-4); }
.fb.new { border-left: 4px solid var(--brand); }
.fb-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); }
.fb-head .sub { margin: var(--sp-1) 0 0; }
.fb-title { font-weight: 620; font-size: 16px; }
.fb-head .pill { font-size: 16px; padding: var(--sp-1) var(--sp-3); }
.fb-note { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4);
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 16px; line-height: 1.5; }
.fb-voice { margin-top: var(--sp-3); display: grid; gap: var(--sp-1); }
.fb-voice .sub { margin: 0; font-size: 12px; }
.fb-voice audio { width: 100%; height: 40px; }
.fb-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); }

/* rating a lesson: six rows of five stars, tapped, anonymous */
.rate-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3);
  align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); }
.rate-row:last-of-type { border-bottom: 0; }
.rate-row .what { font-weight: 600; }
.rate-row .sub { margin: 0; font-size: 12px; }
.stars { display: inline-flex; flex-direction: row-reverse; gap: var(--sp-1); }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--line); font-size: 26px; cursor: pointer;
  transition: color .1s var(--ease), transform .08s var(--ease); }
.stars label:active { transform: scale(.9); }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label {
  color: var(--gold); }
.stars input:focus-visible + label { outline: 2px solid var(--focus); }
@media (max-width: 720px) {
  .rate-row { grid-template-columns: 1fr; gap: var(--sp-1); }
}
.anon { display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 14px; }
.anon .lock { font-size: 20px; line-height: 1; }

/* what the students said, for the teacher */
.aspects { display: grid; gap: var(--sp-2); }
.aspect { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 52px;
  gap: var(--sp-3); align-items: center; }
.aspect .what { font-weight: 600; font-size: 14px; }
.aspect .what .sub { margin: 0; font-size: 12px; }
.aspect .track { height: 12px; background: var(--line-soft); border-radius: 999px;
  overflow: hidden; }
.aspect .fill { height: 100%; border-radius: 999px; background: var(--ok);
  transition: width .5s var(--ease); }
.aspect.watch .fill { background: var(--amber); }
.aspect.risk .fill { background: var(--warn); }
.aspect .n { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .aspect { grid-template-columns: 1fr 44px; }
  .aspect .what { grid-column: 1 / -1; } }
.said { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.said .card { margin: 0; }
.said h3 { margin: 0 0 var(--sp-2); font-size: 14px; }
.said ul { list-style: none; margin: 0; padding: 0; }
.said li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-soft); font-size: 15px;
  line-height: 1.45; }
.said li:last-child { border-bottom: 0; }
.said li .sub { margin: 0; font-size: 12px; }
@media (max-width: 720px) { .said { grid-template-columns: 1fr; } }

/* the strip above the work: which set, how far, and the way out */
.setbar { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  border-left: 4px solid var(--brand); }
.setbar .what strong { font-size: 15px; }
.setbar .what .sub { margin: 0; font-size: 13px; }
.setbar .prog { flex: 1 1 180px; max-width: 320px; }
.setbar .prog .track { height: 8px; background: var(--line-soft); border-radius: 999px;
  overflow: hidden; }
.setbar .prog .fill { height: 100%; background: var(--ok); border-radius: 999px; }
.setbar .prog .sub { margin: var(--sp-1) 0 0; font-size: 12px; }
.setbar .acts { margin-left: auto; font-size: 13px; }
.setbar .acts a { font-weight: 600; }
@media (max-width: 720px) { .setbar { gap: var(--sp-3); } .setbar .acts { margin-left: 0; } }

/* The papers on the left, the marking on the right, and a handle between
   them the teacher drags; the split is remembered on this device. The
   marking panel stays put while the papers scroll. */
.queue {
  --split: 62%;
  display: grid; gap: var(--sp-3); align-items: start;
  grid-template-columns: minmax(0, var(--split)) 10px minmax(280px, 1fr);
}
.queue .splitter {
  position: relative; align-self: stretch; cursor: col-resize; touch-action: none;
  border-radius: 999px;
}
.queue .splitter::after {
  content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 4px;
  border-radius: 999px; background: var(--line);
  transition: background .14s var(--ease);
}
.queue .splitter:hover::after, body.dragging .queue .splitter::after {
  background: var(--accent);
}
body.dragging { user-select: none; cursor: col-resize; }
.queue .panel {
  position: sticky; top: 108px;
  max-height: calc(100vh - 124px); overflow-y: auto;
  padding-right: var(--sp-1);
}
@media (max-width: 900px) {
  .queue { grid-template-columns: 1fr; }
  .queue .splitter { display: none; }
  .queue .panel { position: static; max-height: none; overflow: visible; }
}

/* A page arrives, it does not snap into place. Opacity only: a transform
   on <main>, even an animated one, makes it the box a fixed element sits
   in, and the student's bottom bar was pinned to the bottom of the content
   instead of the screen.
   Filled backwards, not both: an animation filled forwards never ends, and
   while it lasts Safari keeps the whole page as one layer of its own - on a
   long handout an iPhone painted it in patches, flashing blank as it was
   scrolled. Once the fade is over nothing of it is left. */
main { animation: page-in .24s var(--ease) backwards; }
@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
#toast {
  position: fixed; left: 50%; bottom: var(--sp-5); z-index: 60;
  transform: translate(-50%, var(--sp-2)); opacity: 0; pointer-events: none;
  padding: var(--sp-2) var(--sp-4); border-radius: 999px;
  background: var(--ink); color: var(--surface); font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-2);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.setbar .prog .fill { transition: width .5s var(--ease); }
.pickrow .fill { transition: width .5s var(--ease); }

.shots {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-2);
  box-shadow: var(--shadow-1);
}
.shots img {
  width: 100%; height: auto; border-radius: var(--r-sm); display: block;
  margin-bottom: var(--sp-2); cursor: zoom-in;
  background: var(--surface-2);
}
.shots img:last-child { margin-bottom: 0; }
.shots img.zoom { cursor: zoom-out; max-width: none; width: 200%; }
.shots audio { width: 100%; margin: var(--sp-2) 0; }

.scorepad { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2);
  margin: var(--sp-3) 0; }
.scorepad button {
  transition: background .12s var(--ease), border-color .12s var(--ease),
              transform .08s var(--ease);
  padding: var(--sp-4) 0; font-size: 16px; font-weight: 620;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.scorepad button:active { transform: scale(.95); }
.scorepad button:hover { background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent); filter: none; }
.scorepad button.sel {
  background: var(--accent); color: var(--accent-ink);
  border-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-3) 0; }
.tags label {
  font-size: 13px; padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-full);
  cursor: pointer; user-select: none; color: var(--ink-2);
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.tags label:hover { background: var(--surface-2); }
.tags input { position: absolute; opacity: 0; pointer-events: none; }
.tags label:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent); font-weight: 560;
}

/* -------------------------------------------------------------- tab strip */

.tabs {
  display: flex; gap: var(--sp-1); flex-wrap: wrap;
  padding: var(--sp-1); margin-bottom: var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); width: fit-content; max-width: 100%;
}
.tabs .tab {
  padding: var(--sp-1) var(--sp-3); border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  white-space: nowrap;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.tabs .tab:hover { background: var(--line-soft); text-decoration: none; color: var(--ink); }
.tabs .tab.on {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: var(--shadow-1);
}

/* --------------------------------------------------------------- dropzone */

.dropzone {
  display: block; position: relative; cursor: pointer;
  padding: var(--sp-5) var(--sp-4);
  border: 1.5px dashed var(--line); border-radius: var(--r-md);
  background: var(--surface-2); text-align: center;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.dropzone:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone .dz-label {
  display: block; font-weight: 600; font-size: 14px; color: var(--ink);
  margin-bottom: var(--sp-1);
}
.dropzone .dz-hint {
  display: block; font-size: 13px; color: var(--ink-3); line-height: 1.5;
  max-width: 34ch; margin: 0 auto;
}
.dropzone.has { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.dropzone.has .dz-label { color: var(--accent); }

/* --------------------------------------------------------- notices, login */

.flash {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  margin-bottom: var(--sp-4); font-size: 14px; font-weight: 500;
}
.flash.err { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.flash.warn { background: var(--gold-soft); color: var(--ink); border-color: var(--gold); }

/* A page's controls sit on one line: the state switch on the left, the
   search on the right. Stacked strips read as three different pages. */
.toolbar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.toolbar .tabs { margin-bottom: 0; }

/* Housekeeping on Today: a row a job - a drawing, what it does, its button */
.hk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--sp-4); margin: 0; padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft); }
.hk > .hk-row:first-of-type { border-top: 0; padding-top: 0; }
.hk-row:last-child { padding-bottom: 0; }
.hk-row b { display: block; margin-bottom: var(--sp-1); font-size: 15px; font-weight: 620; }
.hk-row .look-ico { position: static; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); align-self: start; }
/* the way into the demo: a drawing, what it is, the button */
.card.demo-invite { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--sp-4); border-color: var(--accent-line); }
.demo-invite b { display: block; margin-bottom: var(--sp-1); font-size: 15px; font-weight: 620; }
.demo-invite form { margin: 0; }
.demo-invite .look-ico { position: static; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-md); background: var(--accent-soft); color: var(--brand); align-self: start; }
@media (max-width: 560px) {
  .card.demo-invite { grid-template-columns: auto minmax(0, 1fr); }
  .demo-invite form { grid-column: 2; }
}

/* ------------------------------------------------- choices and switches
   A few numbers to pick from are buttons, not a list that drops down; an on
   or off is a switch, not a tick box. Both are the real inputs underneath. */
.seg-pick { display: inline-flex; padding: var(--sp-1); gap: var(--sp-1); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line-soft); }
.seg-pick label { position: relative; margin: 0; }
.seg-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg-pick span { display: grid; place-items: center; min-width: 44px; height: 34px; padding: 0 var(--sp-3);
  border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); }
.seg-pick input:checked + span { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-1); }
.seg-pick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.tg-switch { display: inline-flex; align-items: center; gap: var(--sp-3); margin: 0; cursor: pointer;
  font-size: 14px; font-weight: 560; color: var(--ink-2); }
.tg-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tg-track { position: relative; flex: none; width: 42px; height: 24px; border-radius: var(--r-full);
  background: var(--line); transition: background .18s var(--ease); }
.tg-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s var(--ease); }
.tg-switch input:checked + .tg-track { background: var(--brand); }
.tg-switch input:checked + .tg-track::after { transform: translateX(18px); }
.tg-switch input:focus-visible + .tg-track { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------- the teacher's Play page */
.pl-steps { list-style: none; margin: var(--sp-5) 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.pl-steps li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4);
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-soft); }
.pl-steps b { display: block; margin-bottom: var(--sp-1); font-size: 15px; font-weight: 620; }
.pl-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--brand); font-size: 14px; font-weight: 700; }
.pl-form { display: grid; gap: var(--sp-5); }
.pl-row { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: flex-end; }
.pl-row .f { gap: var(--sp-2); }
.pl-row div.f { display: flex; flex-direction: column; font-size: 13px; font-weight: 540; color: var(--ink-3); }
.pl-row select { min-width: 120px; }
.pl-wide { flex: 1 1 260px; }
.pl-wide select { width: 100%; }
.pl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); }
.pl-foot button { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); font-size: 15px; }
.card.pl-live { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4);
  border-color: var(--accent-line); }
.pl-live b { font-size: 15px; }
.pl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); animation: pl-pulse 1.6s var(--ease) infinite; }
@keyframes pl-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 0%, transparent); } }

/* ------------------------------------------------- Settings
   What is stored: one card, a row a kind of file, its size and its buttons.
   How the site behaves: a row a setting, what it does on the left and the
   box or the switch on the right, in four small groups. */
.st-row { padding: var(--sp-4) 0 0; margin-top: var(--sp-4); border-top: 1px solid var(--line-soft); }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-1); }
.st-head strong { font-size: 15px; font-weight: 620; }
.st-acts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-4); }
.st-acts:empty { display: none; }
.st-acts form { margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.st-acts .f { flex-direction: row; align-items: center; gap: var(--sp-2); }
.st-acts .f.pushed { display: contents; }
.st-acts input[type=number] { width: 84px; }
.st-acts > p { margin-top: var(--sp-3); }
.set-group { margin: var(--sp-5) 0 var(--sp-1); font-size: 13px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.set > .set-group:first-child { margin-top: 0; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-5);
  padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft); }
.set-group + .set-row { border-top: 0; }
.set-row b { display: block; margin-bottom: var(--sp-1); font-size: 15px; font-weight: 600; }
.set-row .sub { max-width: 60ch; }
.set-row .with-unit { justify-self: end; color: var(--ink-3); font-size: 14px; }
.set-row input[type=number] { width: 96px; text-align: right; }
.set-row .unit { display: inline-block; min-width: 48px; }
.set-save { display: flex; justify-content: flex-end; padding-top: var(--sp-4); margin-top: var(--sp-2);
  border-top: 1px solid var(--line-soft); }
.set-save button { padding: var(--sp-3) var(--sp-6); }
/* Claude's door: what it is and its switch, the addresses a row each, a new one shown once */
.cl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); }
.cl-head > .sub { max-width: 62ch; }
.cl-switch { flex: none; display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.cl-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft); }
.cl-head + .cl-row, .cl-head + .flash + .cl-row { margin-top: var(--sp-4); }
.cl-row b { margin-right: var(--sp-2); font-size: 15px; font-weight: 620; }
.cl-row form { margin: 0; }
.cl-none { margin: var(--sp-4) 0 0; }
.cl-new { margin: var(--sp-4) 0 0; }
.cl-addr { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.cl-addr code { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 13px; }
.cl-make { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); }
.cl-make label.f { flex: 1 1 220px; }
.cl-make div.f { display: flex; flex-direction: column; gap: var(--sp-1); font-size: 13px; font-weight: 540;
  color: var(--ink-3); }
.cl-foot { margin-top: var(--sp-3); }
@media (max-width: 560px) {
  .cl-head { flex-direction: column; gap: var(--sp-3); }
  .cl-addr { flex-direction: column; align-items: stretch; }
}
@media (max-width: 560px) {
  .set-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .set-row .with-unit, .set-row .tg-switch { justify-self: start; }
  .set-save button { width: 100%; }
}
@media (max-width: 720px) {
  .pl-steps { grid-template-columns: 1fr; }
  .pl-foot button { width: 100%; justify-content: center; }
  /* a link in the middle of a sentence keeps the sentence's line, not a button's height */
  p .linky, .sub .linky { min-height: 0; display: inline; }
}
@media (max-width: 560px) {
  .hk-row { grid-template-columns: auto minmax(0, 1fr); }
  .hk-row > button, .hk-row > .btn { grid-column: 2; justify-self: start; }
}
.toolbar form.inline { margin: 0 0 0 auto; gap: var(--sp-2); align-items: center; }
.toolbar form.inline input { width: 200px; max-width: 100%; }
@media (max-width: 720px) {
  .toolbar form.inline { margin-left: 0; width: 100%; }
  .toolbar form.inline input { flex: 1; width: auto; }
}

/* ---- the front door: the sign-in page
   What the site is, on the rail's plum, beside the one field it asks for.
   The plum half is the same in light and dark, like the rail. */

body.door-page { margin: 0; background: var(--bg); }
.door { min-height: 100vh; min-height: 100dvh; display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

.door-brand { position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6);
  padding: var(--sp-7) clamp(var(--sp-6), 6vw, 96px); color: rgba(255, 255, 255, .7);
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(255, 211, 110, .13), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(199, 125, 224, .16), transparent 62%),
    linear-gradient(160deg, #3a0f4a 0%, #2c0839 45%, #1d0526 100%); }
/* the initials once more, very large and very faint, in the corner */
.door-brand::after { content: "OA"; position: absolute; z-index: -1; right: -.06em; bottom: -.3em;
  font: 600 min(42vw, 520px)/1 var(--font-dream); letter-spacing: -.04em;
  color: rgba(255, 213, 138, .045); pointer-events: none; }
.door-brand > * { max-width: 470px; }

.door-mark { display: block; flex: none; width: 64px; height: 64px; border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 213, 138, .3), 0 14px 34px rgba(0, 0, 0, .38); }
.door-name { margin: var(--sp-5) 0 var(--sp-2); font: 600 34px/1.1 var(--font-dream);
  letter-spacing: -.01em; color: #fff; }
.door-line { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .74); }

.door-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.door-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-3);
  align-items: start; }
.door-points b { display: block; margin: var(--sp-1) 0 0; font-size: 15px; font-weight: 620; color: #fff; }
.door-points div span { display: block; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.door-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: #ffd58a; background: rgba(255, 213, 138, .1); box-shadow: inset 0 0 0 1px rgba(255, 213, 138, .2); }
.door-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.door-foot { margin: 0; font-size: 13px; letter-spacing: .03em; color: rgba(255, 255, 255, .42); }

.door-form { display: grid; place-items: center; padding: var(--sp-7) var(--sp-5); }
.door-card { width: 100%; max-width: 380px; animation: door-in .5s var(--ease) both; }
.door-card h1 { margin: 0 0 var(--sp-1); font-size: 26px; letter-spacing: -.02em; }
.door-card .sub { margin: 0 0 var(--sp-5); color: var(--ink-3); }
.door-card form { display: grid; gap: var(--sp-3); margin: 0; }
.door-card input { width: 100%; height: 48px; box-sizing: border-box; font-size: 16px; }
.door-card button { height: 48px; font-size: 16px; }
.door-student { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-3);
  margin-top: var(--sp-6); padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.door-student p { margin: 0; }
.door-student span[lang] { display: block; margin-top: var(--sp-2); color: var(--ink-3); }
.door-student .door-ico { color: var(--brand); background: var(--accent-soft); box-shadow: none; }
@keyframes door-in { from { opacity: 0; transform: translateY(6px); } }

/* a phone: the plum half becomes a band over the form - the name and the
   line, mark beside the name, the three points left for a wider screen */
@media (max-width: 820px) {
  .door { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .door-brand { justify-content: flex-start; gap: 0; padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .door-brand::after { font-size: 180px; bottom: -.32em; }
  .door-id { display: flex; align-items: center; gap: var(--sp-4); }
  .door-mark { width: 52px; height: 52px; border-radius: 13px; }
  .door-name { margin: 0 0 var(--sp-1); font-size: 26px; }
  .door-line { font-size: 15px; }
  .door-points, .door-foot { display: none; }
  .door-form { place-items: start center; padding: var(--sp-6) var(--sp-5) var(--sp-7); }
}

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

/* ==========================================================================
   Student portal — one page, four tabs
   ========================================================================== */

.whoami { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.whoami .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-size: 16px; font-weight: 650;
  flex: none;
}
.whoami .name { font-size: 20px; font-weight: 640; letter-spacing: -.02em; }

.tabs.stretch { width: 100%; display: flex; }
.tabs.stretch .tab { flex: 1; text-align: center; }

/* Five sections. On a laptop, a strip under the name; on a phone, a bar
   along the bottom of the screen where a thumb can reach it, the way the
   apps beside it do. */
.pnav {
  display: flex; gap: var(--sp-1); margin: 0 0 var(--sp-4); padding: var(--sp-1);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.pnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) 0; border-radius: var(--r-sm);
  color: var(--ink-3); font-size: 12px; font-weight: 500; line-height: 1;
  transition: background .14s var(--ease), color .14s var(--ease), transform .08s var(--ease);
}
.pnav a svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pnav a:hover { text-decoration: none; color: var(--ink); }
.pnav a:active { transform: scale(.95); }
.pnav a.on { color: var(--accent); background: var(--surface); box-shadow: var(--shadow-1);
  font-weight: 600; }
.psub { margin-bottom: var(--sp-4); }
@media (max-width: 720px) {
  .pnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
    border-radius: 0; border-width: 1px 0 0; background: var(--surface);
    padding: var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom));
  }
  .pnav a.on { box-shadow: none; background: var(--accent-soft); }
  main.portal { padding-bottom: calc(var(--sp-7) + var(--pnav-h) + env(safe-area-inset-bottom)); }
}

.rowline { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2); }

/* named so it cannot collide with SVG <rect class="bar">: CSS height applies
   to SVG geometry in modern browsers, which silently flattened the charts */
.pbar { background: var(--line); border-radius: 999px; height: 7px; overflow: hidden; }
.pbar i { display: block; height: 7px; background: var(--accent); border-radius: 999px; }

ul.checklist { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
ul.checklist li {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-1) 0; font-size: 14px; color: var(--ink);
  border-top: 1px solid var(--line-soft);
}
ul.checklist li:first-child { border-top: 0; }
ul.checklist .box {
  flex: none; width: 18px; height: 18px; margin-top: var(--sp-1);
  border: 1.5px solid var(--line); border-radius: 5px;
  display: grid; place-items: center; font-size: 12px; color: var(--accent-ink);
}
ul.checklist li.done .box { background: var(--accent); border-color: var(--accent); }
ul.checklist li.done { color: var(--ink-3); }

/* browsable tiles: collections, sections, units */
.tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tile {
  display: block; padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
  color: var(--ink); transition: border-color .14s var(--ease), transform .08s var(--ease);
}
.tile:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.tile .tile-title { font-weight: 600; margin-bottom: var(--sp-1); }
.tile.small { padding: var(--sp-3); text-align: center; }
.tile.empty { opacity: .5; }
.tile.empty:hover { border-color: var(--line); transform: none; }
/* a booklet that opens once an earlier one is finished */
.tile.shut { background: var(--surface-2); box-shadow: none; color: var(--ink-3); cursor: not-allowed; }
.tile.shut:hover { border-color: var(--line); transform: none; }
.tile.shut .tile-title svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: var(--sp-1); }
.hx-shut { text-align: center; }
.hx-shut-lock { margin: 0 0 var(--sp-2); color: var(--ink-3); }
.hx-shut-lock svg { width: 32px; height: 32px; }
.hx-shut h3 { text-wrap: balance; }

.crumb { color: var(--ink-3); }
.crumb:hover { color: var(--accent); }

.filelist {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden;
}
.filerow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); color: var(--ink);
  border-top: 1px solid var(--line-soft);
}
.filerow:first-child { border-top: 0; }
.filerow:hover { background: var(--surface-2); text-decoration: none; }
.filerow .ficon { color: var(--accent); font-size: 16px; width: 20px; flex: none; }
.filerow .fname { flex: 1; font-weight: 500; min-width: 0; }
.filerow .fname .sub { display: block; margin: var(--sp-1) 0 0; font-size: 13px; }
.filerow .fsize { color: var(--ink-3); font-size: 13px; flex: none;
  font-variant-numeric: tabular-nums; }

tr.me td { background: var(--accent-soft); font-weight: 600; }

.chart .bar2 { fill: var(--ink-3); }
.chart .track { fill: var(--line); }
.chart .bar.warn { fill: var(--warn); }
.chart .rowlabel { fill: var(--ink); font-size: 13px; }

/* ------------------------------------------------------------ class cards */

.groupgrid {
  display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.groupcard {
  display: block; padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); color: var(--ink);
  transition: border-color .14s var(--ease), transform .1s var(--ease),
              box-shadow .14s var(--ease);
}
.groupcard:hover {
  text-decoration: none; border-color: var(--accent);
  transform: translateY(-2px); box-shadow: var(--shadow-2);
}
.gc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.gc-name { font-size: 20px; font-weight: 660; letter-spacing: -.02em; }
.gc-figures {
  display: flex; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--line-soft);
}
.gc-figures div { display: flex; flex-direction: column; gap: var(--sp-1); }
.gc-figures .k { font-size: 12px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .06em; }
.gc-figures .v { font-size: 16px; font-weight: 620; font-variant-numeric: tabular-nums; }
.gc-figures .v.mono { font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.gc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.gc-open { color: var(--accent); font-weight: 560; font-size: 13px; margin-left: auto; }

.ring { flex: none; }
.ring .ringtext { fill: var(--ink); font-size: 14px; font-weight: 650;
  font-variant-numeric: tabular-nums; }

.quicklinks { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.quick {
  display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--ink); box-shadow: var(--shadow-1);
  transition: border-color .14s var(--ease), transform .08s var(--ease);
}
.quick:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.quick .sub { margin: 0; font-size: 13px; }
a.mini { font-size: 13px; white-space: nowrap; }

button.ghost.danger { color: var(--warn); border-color: var(--warn-line); }
button.ghost.danger:hover { background: var(--warn-soft); }

/* --------------------------------------------------------- certificate */

.cert {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, #fffdf1 0%, #fcf5e0 45%, #f3e8cb 100%);
  color: #2a2214;
  border-radius: 6px;
  padding: 0;
  margin-bottom: var(--sp-4);
  box-shadow: 0 2px 6px rgba(60,45,15,.10), 0 18px 46px rgba(60,45,15,.16);
  overflow: hidden;
  aspect-ratio: 800 / 600;
  container-type: inline-size;
}
.cert-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-bottom: var(--sp-4); }
@media (max-width: 660px) { .cert { min-width: 600px; margin-bottom: var(--sp-1); } }

.cert-guilloche { position: absolute; inset: 0; width: 100%; height: 100%;
  color: #b99b4f; opacity: .5; }
.cert-watermark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 40cqw/1 Georgia, "Times New Roman", serif;
  color: #a583401c; letter-spacing: -.04em; pointer-events: none; user-select: none;
}
.cert-inner {
  position: relative; height: 100%;
  padding: 4cqw 6cqw 3.2cqw; display: flex; flex-direction: column; align-items: center;
  text-align: center; font-family: Georgia, "Times New Roman", serif;
}

.cert-brand { display: flex; align-items: center; gap: var(--sp-1);
  font: 600 2.1cqw/1 -apple-system, system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: #7a6532; }
.cert-mark { width: 2.9cqw; height: 2.9cqw; border-radius: 4px; background: #701589;
  color: #fff; display: grid; place-items: center; font-size: 1.9cqw; font-weight: 700; }

.cert-kicker { margin-top: 1cqw; font-size: 4.4cqw; font-weight: 700;
  letter-spacing: .01em; color: #320a3e; }
.cert-rule { display: flex; align-items: center; gap: var(--sp-2); width: 46%;
  margin: .8cqw 0 1.2cqw; color: #b99b4f; font-size: 1.8cqw; }
.cert-rule span { flex: 1; height: 1px; background: linear-gradient(90deg,
  transparent, #b99b4f, transparent); }

.cert-lede { margin: 0; font-size: 1.9cqw; font-style: italic; color: #6a5a3c; }
.cert-holder { font-size: 5.6cqw; line-height: 1.1; margin: .4cqw 0 .6cqw;
  color: #1d1708; letter-spacing: -.01em; }

.cert-main { display: flex; align-items: center; justify-content: center;
  gap: 4cqw; margin: 1.6cqw 0 1cqw; width: 100%; }
.cert-photo { width: 12cqw; height: 15cqw; object-fit: cover; flex: none;
  border-radius: 3px; border: .4cqw solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); background: #eee; }
.cert-photo.empty { display: grid; place-items: center; font: 1.4cqw/1.3 sans-serif;
  color: #a2916d; border: .3cqw dashed #cbb98a;
  background: #fffdf6; text-align: center; }

.cert-skills { flex: 1; max-width: 40cqw; }
.sk { display: flex; align-items: baseline; gap: var(--sp-2); padding: .55cqw 0;
  font-size: 2.1cqw; }
.sk-name { color: #4a3f28; }
.sk-dots { flex: 1; border-bottom: 1px dotted #bfa970; transform: translateY(-.3em); }
.sk-band { font-weight: 700; font-size: 2.5cqw; color: #1d1708;
  font-variant-numeric: tabular-nums; }

.cert-seal { position: relative; width: 13cqw; height: 13cqw; flex: none; }
.cert-seal svg { width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 2px 4px rgba(90,66,10,.35)); }
.cert-sealtext { position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; color: #4a3405; }
.cert-sealtext .k { display: block; font: 600 1.3cqw/1 sans-serif;
  text-transform: uppercase; letter-spacing: .12em; }
.cert-sealtext .v { display: block; font-size: 4.4cqw; font-weight: 700; line-height: 1.05; }

.cert-descriptor { font-size: 2cqw; font-style: italic; color: #6a5a3c; }
.cert-sign { display: flex; gap: 8cqw; margin-top: auto; padding-top: 1.4cqw;
  width: 100%; justify-content: center; }
.cert-sign .sig { font: 2.6cqw/1 'Snell Roundhand', 'Apple Chancery', 'Segoe Script',
  cursive; color: #3c1149; height: 2.8cqw; margin-bottom: -.4cqw; }
.cert-sign .line { width: 20cqw; border-bottom: 1px solid #8d7a4e; margin-bottom: .5cqw; }
.cert-sign span { font: 1.5cqw/1 sans-serif; color: #7a6532; letter-spacing: .06em;
  text-transform: uppercase; }
.cert-serial { margin-top: 1cqw; font: 1.4cqw/1 ui-monospace, Menlo, monospace;
  color: #8d7a4e; letter-spacing: .08em; }
.cert-note { margin-top: .8cqw; font: 1.35cqw/1.35 sans-serif; color: #9b8a63;
  max-width: 70%; }

@media print {
  .cert-wrap { overflow: visible; }
  header.top, .tabs, .whoami, form, button, h2, p.sub { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .cert { box-shadow: none; aspect-ratio: 800 / 600; }
}

/* ------------------------------------------------------------ today list */

.todos { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.todo {
  display: block; padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md); color: var(--ink); box-shadow: var(--shadow-1);
  transition: transform .08s var(--ease), border-color .14s var(--ease);
}
.todo:hover { text-decoration: none; transform: translateY(-1px);
  border-color: var(--accent); border-left-color: var(--accent); }
.todo.urgent { border-left-color: var(--warn); }
.todo.urgent:hover { border-color: var(--warn); border-left-color: var(--warn); }
.todo-head { font-size: 16px; font-weight: 620; letter-spacing: -.01em; }

.adder { margin-top: var(--sp-5); }
.adder > summary {
  cursor: pointer; display: inline-block; padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-weight: 560; color: var(--ink);
  margin-bottom: var(--sp-3);
}
.adder > summary:hover { border-color: var(--accent); color: var(--accent); }
.adder[open] > summary { color: var(--accent); }

/* Fold-outs: one chevron for every <details>, turning down as it opens. The
   browser's own black triangle made a finished page look like a draft. The
   handout shelves (hs-unit, hb-level) draw their own. */
:root {
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --chev-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
details:not(.hs-unit):not(.hb-level) > summary::before {
  content: ""; display: inline-block; flex: none; width: 16px; height: 16px;
  margin-right: var(--sp-2); vertical-align: -3px;
  background: currentColor; opacity: .55;
  -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
details[open]:not(.hs-unit):not(.hb-level) > summary::before { transform: rotate(90deg); opacity: 1; }
details:not(.hs-unit):not(.hb-level) > summary:hover::before { opacity: 1; }
/* a fold-out that is a whole card: its title on the left, the chevron at the right edge */
details.card > summary { position: relative; padding-right: var(--sp-6); font-weight: 600; }
details.card > summary::before { position: absolute; right: 0; top: calc(50% - 8px); margin: 0; }

/* ============================================================================
   Colour system
   Status is the loudest thing on the page. The four overview figures each take
   their own colour, today's work sits in soft blocks tinted by urgency, and the
   brand runs through the mark, the buttons and whatever is currently selected.
   ========================================================================== */

header.top .brand .mark { display: block; width: 28px; height: 28px; border-radius: 8px; }

button {
  background: linear-gradient(100deg, var(--brand-deep) 0%, var(--brand) 62%,
              var(--brand-lift) 100%);
  border: 0; border-radius: 10px; font-weight: 600; padding: var(--sp-2) var(--sp-4);
}
button:hover { filter: brightness(1.08); }
button.ghost {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); font-weight: 500;
}
button.ghost:hover { background: var(--surface-2); filter: none;
  border-color: var(--accent-line); color: var(--brand); }
button.ghost.danger { color: var(--warn); border-color: var(--warn-line); }
button.ghost.danger:hover { background: var(--warn-soft); color: var(--warn); }



/* today: soft blocks, tinted by how much they matter */
.todo {
  background: var(--accent-soft); border: 0; border-left: 0;
  border-radius: 14px; padding: var(--sp-4) var(--sp-4); box-shadow: none;
}
.todo:hover { transform: translateY(-2px); border-color: transparent; }
.todo .todo-head { color: var(--brand-deep); font-weight: 700; font-size: 16px;
  letter-spacing: -.02em; }
.todo .sub { color: var(--ink-2); }
.todo.urgent { background: var(--warn-soft); }
.todo.urgent .todo-head { color: #cc2d30; }
.todo.urgent .sub { color: #a82528; }

.tabs .tab.on { background: var(--surface); color: var(--brand); font-weight: 600;
  box-shadow: 0 1px 2px rgba(28,15,34,.08); }
.pbar i { border-radius: 999px; }
.pbar { border-radius: 999px; }

@media (prefers-color-scheme: dark) {
  .todo .todo-head { color: var(--brand-lift); }
  .todo.urgent .todo-head, .todo.urgent .sub { color: var(--warn); }
}

.pill.watch, .pill.gold { font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .pill.watch, .pill.gold { background: var(--gold-soft); color: var(--gold);
    border-color: #4a3a12; }
  .pill.good { background: #12301f; color: var(--ok); border-color: #1e4c31; }
}

.standing {
  background: var(--accent-soft); border-radius: 12px;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  font-size: 14px; color: var(--ink);
}
.standing strong { color: var(--brand); }
@media (prefers-color-scheme: dark) { .standing strong { color: var(--brand-lift); } }

/* ------------------------------------------------------------- live game */

.gcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-5); text-align: center;
  box-shadow: var(--shadow-1); margin-bottom: var(--sp-3);
}
.gcard.right { background: #e4f8ee; border-color: #a8e6c6; }
.gcard.wrong { background: var(--warn-soft); border-color: var(--warn-line); }
.gword { font-size: clamp(30px, 7vw, 62px); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.1; margin: var(--sp-1) 0; }
.gbig { font-size: clamp(26px, 5vw, 44px); font-weight: 700; letter-spacing: -.03em; }
.gsmall { font-size: 13px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 600; }
.gnames { margin-top: var(--sp-2); color: var(--ink-2); font-size: 14px; line-height: 1.7; }

.gopts { display: grid; gap: var(--sp-2); grid-template-columns: 1fr 1fr; }
.gopt {
  padding: var(--sp-5) var(--sp-3); border-radius: 14px; border: 0; color: #fff;
  font-size: 16px; font-weight: 600; line-height: 1.3; min-height: 84px;
  background: var(--brand); cursor: pointer; word-break: break-word;
}
.gopt.c0 { background: #d8342f; }
.gopt.c1 { background: #1668c9; }
.gopt.c2 { background: #c78a00; color: #241b00; }
.gopt.c3 { background: #1a8a52; }
.gopt.off { opacity: .45; }
.gopt:active { transform: scale(.98); }
@media (max-width: 380px) { .gopts { grid-template-columns: 1fr; } }

/* --------------------------------------------------- solo play */

/* The two doors into Play. The game's own blue and green, so it reads as the
   same game the teacher hosts, only on your own. */
.playpick { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3); }
.playbtn {
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1);
  min-height: 120px; padding: var(--sp-5); border-radius: var(--r-lg);
  color: #fff; text-decoration: none; box-shadow: var(--shadow-1);
}
.playbtn.vocab { background: #1668c9; }
.playbtn.grammar { background: #1a8a52; }
.playbtn.exam { background: #8a4a1a; }
.playbtn:active { transform: scale(.98); }
.pbig { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.psmall { font-size: 14px; opacity: .9; }
@media (max-width: 380px) { .playpick { grid-template-columns: 1fr; } }

.playlive { display: block; text-decoration: none; color: var(--ink);
  background: var(--accent-soft); border-color: var(--brand); }

table.rank td.num, table.rank th.num { text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
table.rank tr.me td { background: var(--accent-soft); font-weight: 600; }
/* a phone is narrow: the face and the name stay on one line, and the table
   gives up its roomy padding before anything is pushed off the edge */
table.rank td.who { white-space: nowrap; }
table.rank th, table.rank td { padding-left: var(--sp-2); padding-right: var(--sp-2); }

button.big { width: 100%; min-height: 56px; font-size: 20px; }

.solotitle { margin-bottom: var(--sp-1); }
.solobar { display: flex; justify-content: space-between; gap: var(--sp-2);
  font-size: 14px; color: var(--ink-2); margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums; }
.gword.solo { font-size: 20px; letter-spacing: 0; font-weight: 600; line-height: 1.4; }
.soloans { font-size: 20px; font-weight: 700; margin: var(--sp-2) 0; }
.solorev p { margin: 0 0 var(--sp-3); }

/* ---------------------------------------------- solo play: the ladder */

input.tiny { width: 84px; }
.alsolevels { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.alsolevels label { display: flex; align-items: center; gap: var(--sp-1);
  font-size: 14px; font-weight: 400; }

.steps { display: flex; flex-direction: column; gap: var(--sp-2); }
.steprow {
  display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sp-3);
  align-items: baseline; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
}
.steprow .sub { grid-column: 2; }
.stepno { grid-row: span 2; font-weight: 700; font-size: 16px; white-space: nowrap; }
.steptitle { font-weight: 600; }
.steprow.open { border-color: var(--brand); box-shadow: var(--shadow-1); }
.steprow.passed .stepno { color: #1a8a52; }
/* a locked step is visible but plainly out of reach */
.steprow.locked { opacity: .55; background: transparent; }

/* --------------------------------------------------- game: who you are */

.gwho { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.gpick {
  width: 54px; height: 54px; font-size: 26px; line-height: 1; padding: 0;
  border-radius: 14px; background: var(--surface); border: 2px solid var(--line);
  cursor: pointer;
}
.gpick.on { border-color: var(--brand); background: var(--accent-soft); }
.gwhobig { font-size: 56px; line-height: 1.1; }
.groom { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: center;
  margin-top: var(--sp-3); }
.gface { display: flex; align-items: center; gap: var(--sp-1); font-size: 16px;
  color: var(--ink-2); }
.gface b { font-size: 26px; font-weight: 400; }
.gcell { font-size: 20px; width: 34px; }

.gclock { font-size: 34px; font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gshape { display: block; font-size: 20px; opacity: .85; margin-bottom: var(--sp-1); }
.grun { text-align: center; font-weight: 700; font-size: 20px; color: #8a6400;
  background: var(--gold-soft); border-radius: 12px; padding: var(--sp-2);
  margin-bottom: var(--sp-3); }
.grunmini { font-size: 12px; color: #8a6400; font-weight: 700; }
.gup { color: #06713f; font-weight: 700; font-size: 13px; }
.gdown { color: var(--warn); font-weight: 700; font-size: 13px; }

/* the podium: second, first, third - the way they stand on a real one */
.podium { display: flex; align-items: flex-end; justify-content: center;
  gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-5); }
.pstep { text-align: center; width: min(30%, 210px); }
.pface { font-size: clamp(34px, 6vw, 60px); line-height: 1.1; }
.pname { font-weight: 700; font-size: clamp(14px, 2vw, 19px); margin-top: var(--sp-1);
  overflow-wrap: anywhere; }
.pscore { font-size: 13px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; margin-bottom: var(--sp-1); }
.pblock { border-radius: 12px 12px 0 0; color: #fff; font-weight: 700;
  font-size: 26px; display: grid; place-items: center; }
.p1 .pblock { height: 130px; background: linear-gradient(180deg, #e3b341, #b9871d); }
.p2 .pblock { height: 96px;  background: linear-gradient(180deg, #b9bec7, #8d939c); }
.p3 .pblock { height: 72px;  background: linear-gradient(180deg, #cd8f52, #a06a34); }

label.check {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 14px; color: var(--ink-2); white-space: nowrap;
  padding: var(--sp-2) 0;
}
label.check input { width: 17px; height: 17px; accent-color: var(--brand); }


/* ------------------------------------------------------------- profile */

.pf-head { display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-4); }
.pf-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  flex: none; border: 2px solid var(--surface); box-shadow: var(--shadow-1); }
.pf-photo.empty { display: grid; place-items: center; font-size: 34px;
  background: var(--accent-soft); }

.quote {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-4); margin-bottom: var(--sp-4); box-shadow: var(--shadow-1);
}
.quote p { margin: 0; font-size: 16px; line-height: 1.5; font-style: italic;
  color: var(--ink); }
.quote span { display: block; margin-top: var(--sp-2); font-size: 13px; color: var(--ink-3);
  letter-spacing: .04em; }

.pf-card { padding: var(--sp-5); }
.pf-title { margin: 0 0 var(--sp-3); font-size: 13px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3); font-weight: 600; }
.pf-set { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft); }
.pf-set .f { margin: 0; }
.pf-set .sub { flex: 1; min-width: 150px; font-size: 13px; }

/* ------------------------------------------------------------ the climb

   A dream, drawn: a night sky with the summit catching the first light.
   One card, one world - the sky and its faint stars behind the headline,
   the mountain, and the night below it where the figures and the route
   float like glass. Everything moves slowly or not at all; the global
   reduced-motion rule stills it completely, and every animation starts
   from its finished state, so a still page is a complete page. */
.cl-card { padding: 0; overflow: hidden; border: 0; color: #fff;
  background: linear-gradient(180deg, var(--dream-near) 0%, var(--dream-deep) 100%);
  box-shadow: 0 20px 60px rgba(20, 4, 31, .35), 0 2px 6px rgba(20, 4, 31, .2); }
.cl-hero { position: relative; isolation: isolate;
  background:
    /* the ground's own colour along the very bottom, so no hairline of sky
       shows where the picture meets the card on any screen width */
    linear-gradient(0deg, var(--dream-pine) 0 4px, transparent 4px),
    radial-gradient(90% 60% at 18% 0%, rgba(120, 60, 200, .35), transparent 70%),
    linear-gradient(180deg, var(--dream-top) 0%, var(--dream-sky) 55%, var(--dream-horizon) 100%); }
/* two layers of faint stars, tiled at different sizes so no pattern shows */
.cl-hero::before, .cl-hero::after { content: ""; position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  /* quieter behind the headline, so no star sits on a full stop */
  -webkit-mask-image: radial-gradient(ellipse 85% 42% at 30% 22%, transparent 40%, #000 85%);
  mask-image: radial-gradient(ellipse 85% 42% at 30% 22%, transparent 40%, #000 85%); }
.cl-hero::before {
  background-image:
    radial-gradient(circle 1px at 8% 14%, rgba(255,255,255,.95), transparent),
    radial-gradient(circle 1px at 31% 42%, rgba(255,255,255,.8), transparent),
    radial-gradient(circle 1px at 57% 9%, rgba(255,255,255,.9), transparent),
    radial-gradient(circle 1px at 76% 33%, rgba(255,255,255,.75), transparent),
    radial-gradient(circle 2px at 92% 61%, rgba(255,248,230,.9), transparent),
    radial-gradient(circle 1px at 44% 71%, rgba(255,255,255,.7), transparent),
    radial-gradient(circle 1px at 18% 83%, rgba(255,255,255,.6), transparent);
  background-size: 240px 170px;
  animation: cl-twinkle 3.6s ease-in-out infinite alternate; }
.cl-hero::after {
  background-image:
    radial-gradient(circle 1px at 14% 36%, rgba(255,255,255,.85), transparent),
    radial-gradient(circle 2px at 49% 22%, rgba(255,248,230,.85), transparent),
    radial-gradient(circle 1px at 67% 58%, rgba(255,255,255,.7), transparent),
    radial-gradient(circle 1px at 86% 12%, rgba(255,255,255,.9), transparent),
    radial-gradient(circle 1px at 37% 88%, rgba(255,255,255,.6), transparent);
  background-size: 330px 220px;
  animation: cl-twinkle 5.4s ease-in-out -2s infinite alternate-reverse; }
@keyframes cl-twinkle { from { opacity: .45; } to { opacity: 1; } }

/* now and then, a shooting star */
.cl-shoot { position: absolute; z-index: -1; top: 12%; left: 6%; width: 120px; height: 2px;
  border-radius: 999px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,248,230,.95));
  transform: rotate(16deg);
  animation: cl-shoot 9s linear 2.5s infinite; }
.cl-shoot.two { top: 6%; left: 48%; width: 90px; animation-duration: 13s; animation-delay: 7s; }
@keyframes cl-shoot {
  0% { opacity: 0; transform: translate(0, 0) rotate(16deg); }
  1.5% { opacity: 1; }
  7% { opacity: 0; transform: translate(240px, 69px) rotate(16deg); }
  100% { opacity: 0; transform: translate(240px, 69px) rotate(16deg); }
}

.cl-top { position: relative; padding: var(--sp-6) var(--sp-6) 0; }
.cl-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.6); }
.cl-headline { margin: var(--sp-2) 0 0; max-width: 21ch;
  font-family: var(--font-dream); font-size: 30px; font-weight: 500; line-height: 1.2;
  letter-spacing: -.01em; color: #fff; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(255, 143, 184, .25); }
.cl-headline em { font-style: italic; color: var(--dream-gold); }
.cl-lead { margin: var(--sp-2) 0 0; max-width: 42ch; font-size: 15px; line-height: 1.5;
  color: rgba(255,255,255,.75); }
.cl-lead em { font-style: normal; font-weight: 600; color: var(--dream-gold); }
@media (max-width: 720px) {
  .cl-top { padding: var(--sp-5) var(--sp-4) 0; }
  .cl-headline { font-size: 26px; }
  .cl-lead { font-size: 14px; }
}

/* the picture itself */
.climb { position: relative; display: block; width: 100%; height: auto; }
.climb .walked { animation: cl-draw 1.8s var(--ease) .4s both; }
/* the grain of the rock sits in the light and shadow, not on top of them */
.climb .rock { mix-blend-mode: overlay; opacity: .5; }
@keyframes cl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.climb .me { transform-box: fill-box; transform-origin: center;
  animation: cl-pop .7s var(--ease) 1.7s both; }
@keyframes cl-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.climb .tag { animation: cl-bob 3.2s ease-in-out 2.4s infinite alternate; }
@keyframes cl-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.climb .pulse { transform-box: fill-box; transform-origin: center;
  animation: cl-pulse 2.6s var(--ease) 2.4s infinite; }
@keyframes cl-pulse {
  0% { transform: scale(.8); opacity: .8; }
  70% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
.climb .ring { animation: cl-twinkle 1.6s ease-in-out infinite alternate; }
.climb .breathe { animation: cl-breathe 5s ease-in-out infinite alternate; }
@keyframes cl-breathe { from { opacity: .6; } to { opacity: 1; } }
.climb .mist { animation: cl-drift 22s ease-in-out infinite alternate; }
.climb .mist.two { animation-duration: 29s; animation-direction: alternate-reverse; }
@keyframes cl-drift { from { transform: translateX(-20px); } to { transform: translateX(20px); } }
.climb .tw1 { animation: cl-twinkle 2.6s ease-in-out infinite alternate; }
.climb .tw2 { animation: cl-twinkle 3.8s ease-in-out -1s infinite alternate; }
.climb .tw3 { animation: cl-twinkle 4.7s ease-in-out -2s infinite alternate; }
.climb .spark { animation: cl-twinkle 1.9s ease-in-out infinite alternate; }
.climb .spark.s1 { animation-delay: -.6s; }
.climb .spark.s2 { animation-delay: -1.2s; }
@media (max-width: 480px) { .climb .lbl.mid { display: none; } }

/* the night below: three figures floating like glass */
.cl-body { padding: var(--sp-5) var(--sp-6) var(--sp-6);
  background: linear-gradient(180deg, var(--dream-near) 0%, var(--dream-deep) 70%); }
/* with no route yet, the choice comes first and the quote closes */
.cl-body > :first-child { margin-top: 0; }
.cl-body > .cl-set:first-child { padding-top: 0; border-top: 0; }
.cl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
  margin-bottom: var(--sp-6); }
.cl-stat { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.cl-stat.lead { background: linear-gradient(135deg, rgba(255,211,110,.18), rgba(255,143,184,.08));
  border-color: rgba(255,211,110,.38); box-shadow: 0 0 30px rgba(255,211,110,.12); }
.cl-stat .k { font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.6); }
.cl-stat .v { margin-top: var(--sp-1); font-family: var(--font-dream); font-size: 20px;
  font-weight: 600; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; }
.cl-stat.lead .v { color: var(--dream-gold); }
.cl-stat .sub { margin: var(--sp-1) 0 0; font-size: 12px; color: rgba(255,255,255,.6); }
@media (max-width: 720px) {
  .cl-body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  .cl-stats { grid-template-columns: 1fr 1fr; }
  .cl-stats .cl-stat.lead { grid-column: 1 / -1; }
}

/* the route, as a constellation: lit where walked, faint where not */
.cl-h { margin: 0 0 var(--sp-3); font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.55); }
.route { list-style: none; margin: 0; padding: 0; }
.route li { position: relative; display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-2) 0; }
.route li:not(:last-child)::after { content: ""; position: absolute; left: 11px;
  top: 32px; bottom: -8px; width: 2px; background: rgba(255,255,255,.14); }
.route li.done::after { background: var(--dream-gold); box-shadow: 0 0 8px rgba(255,211,110,.55); }
.route .dot { position: relative; z-index: 1; flex: none; width: 24px; height: 24px;
  border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  border: 2px dashed rgba(255,255,255,.35); color: var(--dream-deep); }
.route li.done .dot { background: var(--dream-gold); border: 2px solid var(--dream-gold);
  box-shadow: 0 0 12px rgba(255,211,110,.55); }
.route li.here .dot { background: var(--dream-gold); border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(255,211,110,.22), 0 0 18px rgba(255,211,110,.7);
  animation: cl-here 2.4s ease-in-out infinite alternate; }
@keyframes cl-here {
  from { box-shadow: 0 0 0 3px rgba(255,211,110,.2), 0 0 10px rgba(255,211,110,.45); }
  to { box-shadow: 0 0 0 7px rgba(255,211,110,.12), 0 0 24px rgba(255,211,110,.85); }
}
.route li.dream .dot { border: 2px solid var(--dream-rose); color: var(--dream-rose);
  background: rgba(255,143,184,.12); box-shadow: 0 0 14px rgba(255,143,184,.35); }
.route li.dream.done .dot { color: var(--dream-deep); background: var(--dream-gold);
  border-color: var(--dream-gold); }
.route .name { font-weight: 600; font-size: 15px; line-height: 24px; color: #fff; }
.route li.done .name { color: rgba(255,255,255,.6); }
.route li.ahead .name { font-weight: 500; color: rgba(255,255,255,.8); }
.route li.dream .name { font-family: var(--font-dream); font-style: italic; font-size: 16px;
  font-weight: 600; color: var(--dream-rose); }
.route li .sub { margin: 0; font-size: 12px; color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: var(--sp-2); }
.cl-mini { width: 120px; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.14); }
.cl-mini i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--dream-gold), var(--dream-rose)); }
.cl-earned { margin: var(--sp-4) 0 0; font-size: 13px; line-height: 1.55;
  color: rgba(255,255,255,.6); }
.cl-earned strong { color: #fff; }

/* a line for today, in the same night */
.cl-quote { margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-4); text-align: center;
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(90% 120% at 50% 0%, rgba(255,211,110,.12), transparent 70%); }
.cl-star { display: block; font-size: 16px; color: var(--dream-gold);
  text-shadow: 0 0 12px rgba(255,211,110,.8); }
.cl-quote p { margin: var(--sp-2) auto 0; max-width: 32ch; font-family: var(--font-dream);
  font-style: italic; font-size: 20px; line-height: 1.4; color: #fff; text-wrap: balance; }
.cl-quote .who { display: block; margin-top: var(--sp-3); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* choosing the route, folded away once there is one */
.cl-set { margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.1); }
.cl-set summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--dream-gold); }
.cl-set .pf-set { margin-top: var(--sp-3); padding-top: 0; border-top: 0; }
.cl-card label.f { color: rgba(255,255,255,.72); }
.cl-card .pf-set button { background: var(--dream-gold); color: var(--dream-deep); }
.cl-card .pf-set button:hover { filter: brightness(1.05); }

/* ------------------------------------------------------- championship */

.champ-hero {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  color: #fff; border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.champ-hero .sub { color: rgba(255,255,255,.78); margin: 0; }
.champ-name { font-size: 30px; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.15; margin: var(--sp-1) 0; }

.cbar { display: block; height: 5px; border-radius: 999px;
  background: var(--line); overflow: hidden; margin-bottom: var(--sp-1); min-width: 46px; }
.cbar i { display: block; height: 100%; border-radius: 999px;
  background: var(--brand); }
td.cpt { font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
td.cnone { text-align: center; }
tr.me { background: var(--accent-soft); }
tr.me td { font-weight: 600; }

.cparts { display: grid; gap: var(--sp-2); }
.cp { display: grid; grid-template-columns: 1fr 90px 34px; align-items: center;
  gap: var(--sp-2); font-size: 14px; }
.cp b { text-align: right; font-variant-numeric: tabular-nums; }
ul.rules { margin: 0; padding-left: var(--sp-4); }
ul.rules li { margin-bottom: var(--sp-1); }

/* jump straight to your own row: the league is long once the school is in it */
.findme {
  display: inline-block; margin-left: var(--sp-1); font-weight: 600;
  color: var(--brand); text-decoration: none; white-space: nowrap;
}
.findme:hover { text-decoration: underline; }
tr.me td { scroll-margin-top: 80px; }

/* the league switched off: amber, because it is a held state, not a failure */
.card.paused {
  border-left: 4px solid var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}
.seasonbtns { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.seasonbtns form { margin: 0; }


.card.good {
  border-left: 4px solid var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, var(--surface));
}

.gone { color: var(--red); font-weight: 600; font-size: 12px; }

/* a thread of colour while the next page is fetched, so a click feels answered */
#navbar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--brand); z-index: 99; opacity: 0;
  transition: width .5s ease-out, opacity .2s;
}
#navbar.on { width: 80%; opacity: 1; }
@media (prefers-reduced-motion: reduce) { #navbar { transition: none; } }

/* ---------------------------------------------------- grading */
audio.voice { width: 100%; margin: var(--sp-2) 0; }
.scorepad.halves { margin-top: var(--sp-1); }
.scorepad.halves button {
  font-size: 12px; padding: var(--sp-1) var(--sp-2); opacity: .85;
}
.scorepad.mini button { padding: var(--sp-1) var(--sp-2); font-size: 13px; }
.criteria { display: grid; gap: var(--sp-3); }
.crit {
  display: grid; gap: var(--sp-1); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.crit:last-child { border-bottom: 0; padding-bottom: 0; }
.crit .sub { margin: 0; }
#overall { margin: var(--sp-2) 0 0; font-size: 14px; }

.undo {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); border-radius: 8px;
  background: var(--surface-2); font-size: 13px;
}
.linky {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--brand); font-weight: 600; text-decoration: underline;
}
.queuelist ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.queuelist li {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-1) 0; border-bottom: 1px solid var(--line-soft);
}
.queuelist li.on { font-weight: 600; }
.queuelist li:last-child { border-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.chip {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: var(--sp-1) var(--sp-3); font-size: 12px;
  cursor: pointer; color: var(--ink-2); text-align: left;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.tmpl { list-style: none; margin: var(--sp-2) 0; padding: 0; }
.tmpl li {
  display: flex; justify-content: space-between; gap: var(--sp-2); align-items: center;
  padding: var(--sp-1) 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.tmpl form { margin: 0; }
.recur { margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }

.prev .prevhead { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0; }
.prevnote { font-style: italic; margin: 0 0 var(--sp-2); }
.prevshots { display: flex; gap: var(--sp-2); }
.prevshots img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.tinyaudio { font-size: 12px; color: var(--ink-3); }

/* who needs a word - the reason the Progress page exists */
.attn-card h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: 14px; }
.attn-card h3:first-child { margin-top: 0; }
ul.attn { list-style: none; margin: 0; padding: 0; }
ul.attn li {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
ul.attn li:last-child { border-bottom: 0; }
ul.attn a { font-weight: 600; }
/* a .sub inside a row is a label, not a paragraph: no paragraph margin */
ul.attn li .sub { margin: 0; font-size: 13px; }

/* ------------------------------------------ homework batches */
.card.batch { padding: var(--sp-3) var(--sp-4); }
.batchhead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-3); flex-wrap: wrap;
}
.batchhead .sub { margin: var(--sp-1) 0 0; }
.batchacts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.batchacts form { margin: 0; }
.card.batch details { margin-top: var(--sp-2); }
.card.batch summary { font-size: 13px; color: var(--brand); cursor: pointer; }
/* ------------------------------------------------- the homework list

   One line per piece of homework, and the three things done to it at the
   start of a lesson: see who has done it, change it, delete it. */
.hwlist { display: grid; gap: var(--sp-3); }
.hwlist .hwhead { margin: var(--sp-3) 0 0; display: flex; gap: var(--sp-2);
  align-items: baseline; }
.hwlist .hwhead:first-child { margin-top: 0; }
.hwlist .hwhead .sub { margin: 0; font-size: 13px; }
.hwlist .hwhead .hwclose { margin: 0 0 0 auto; }
.hwlist .hwhead .hwclose button { font-size: 13px; padding: var(--sp-1) var(--sp-3); }
.hw {
  display: grid; grid-template-columns: 1fr 230px auto; gap: var(--sp-5);
  align-items: center; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.hw-title { font-size: 15px; }
.hw-title .rel { color: var(--ink-3); }
.hw-main .sub { margin: var(--sp-1) 0 0; font-size: 13px; }
.hw-done .pbar { margin-bottom: var(--sp-1); }
.hw-done .n { font-size: 13px; color: var(--ink-2); }
.hw-done .bad { color: var(--warn); }
.hw-acts { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.hw-acts form { margin: 0; }
@media (max-width: 900px) {
  .hw { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* a link dressed as a button, for the actions that only open a page */
a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-2) var(--sp-4); border-radius: 10px;
  background: linear-gradient(100deg, var(--brand-deep) 0%, var(--brand) 62%,
              var(--brand-lift) 100%);
  color: var(--accent-ink); font-size: 14px; font-weight: 600; white-space: nowrap;
}
a.btn:hover { text-decoration: none; filter: brightness(1.06); }
a.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
a.btn.ghost:hover { background: var(--surface-2); filter: none; }

/* who has done it: three lists, worst first */
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
  margin-bottom: var(--sp-5); }
.who .card { padding: var(--sp-3) var(--sp-4); margin: 0; }
.who h3 { margin: 0 0 var(--sp-2); font-size: 14px; display: flex;
  justify-content: space-between; align-items: baseline; }
.who .count { font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.who ul { list-style: none; margin: 0; padding: 0; }
.who li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.who li:last-child { border-bottom: 0; }
.who li a { color: var(--ink); font-weight: 500; }
.who li .sub { margin: 0; font-size: 12px; }
.card.bad { border-left: 4px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.card.mid { border-left: 4px solid var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, var(--surface)); }
@media (max-width: 720px) { .who { grid-template-columns: 1fr; } }

td.tick { text-align: center; }
td.tick .mute { color: var(--ink-3); }
.crumb { margin: 0 0 var(--sp-2); font-size: 13px; }
.crumb a { color: var(--ink-3); }
form.rename input[name="title"] { min-width: 220px; }

.rowacts { display: flex; gap: var(--sp-3); justify-content: flex-end; }
.rowacts form { margin: 0; }
.linky.danger { color: var(--red); }
button.ghost.danger { color: var(--red); border-color: var(--red); }

/* ------------------------------------------------- the roster */
/* a name with its initials; the class a chip that opens the list of classes;
   pause a small button and delete a bin, both quiet until the pointer is on them */
.r-who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.r-who > a:not(.peek) { font-weight: 560; color: var(--ink); }
.r-who > a:not(.peek):hover { color: var(--brand); }
.r-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: 12px; font-weight: 650; letter-spacing: .02em; color: var(--brand); background: var(--accent-soft); }
.rb-ico { display: inline-grid; place-items: center; }
.rb-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.peek { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm);
  color: var(--ink-3); text-decoration: none; opacity: 0; transition: opacity .15s var(--ease); }
tr:hover .peek, .peek:focus-visible { opacity: 1; }
.peek:hover { color: var(--brand); background: var(--accent-soft); text-decoration: none; }
@media (hover: none) { .peek { opacity: 1; } }
button.rowbtn { display: inline-flex; align-items: center; gap: var(--sp-1); height: 32px;
  padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: none;
  background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 560; }
button.rowbtn:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--brand); filter: none; }
button.rowbtn.danger { width: 32px; padding: 0; justify-content: center; color: var(--ink-3); }
button.rowbtn.danger:hover { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.movef { position: relative; display: inline-block; margin: 0; color: var(--ink-3); }
.movef select { -webkit-appearance: none; appearance: none; cursor: pointer;
  padding: var(--sp-1) var(--sp-6) var(--sp-1) var(--sp-3); border: 1px solid transparent; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.movef select:hover { border-color: var(--accent-line); }
.movef::after { content: ""; position: absolute; right: 10px; top: calc(50% - 6px); width: 12px; height: 12px;
  background: currentColor; pointer-events: none;
  -webkit-mask: var(--chev-down) center / contain no-repeat; mask: var(--chev-down) center / contain no-repeat; }

/* ------------------------------------------------- a student's homework, one row a piece
   Name and date, the mark, a bar under both - green from 8, amber from 5,
   red below, as the score pills are. Two sentences above say what a line
   chart used to: where the marks are heading, and how they sit against the class. */
.sr-said { margin: 0 0 var(--sp-4); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.sr-said b { color: var(--ink); font-weight: 650; }
.sr-list { list-style: none; margin: 0; padding: 0; }
.sr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft); }
.sr > .sr-list > .sr-row:first-child { border-top: 0; padding-top: 0; }
.sr-name { min-width: 0; font-size: 15px; font-weight: 560; line-height: 1.35; color: var(--ink); }
.sr-name small { display: block; margin-top: var(--sp-1); font-size: 12px; font-weight: 500; color: var(--ink-3); }
.sr-val { font-size: 16px; font-weight: 680; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-val small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.sr-row.t-mute .sr-val { font-size: 13px; font-weight: 560; color: var(--ink-3); }
.sr-row.t-risk .sr-val { font-size: 13px; font-weight: 620; color: var(--warn); }
.sr-row { --sr-c: var(--brand); }
.sr-row.t-good { --sr-c: var(--ok); }
.sr-row.t-watch { --sr-c: var(--amber); }
.sr-row.t-risk { --sr-c: var(--warn); }
.sr-row progress { grid-column: 1 / -1; display: block; width: 100%; height: 8px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; border: 0; border-radius: var(--r-full);
  background: var(--surface-2); overflow: hidden; }
.sr-row progress::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--r-full); }
.sr-row progress::-webkit-progress-value { background: var(--sr-c); border-radius: var(--r-full); }
.sr-row progress::-moz-progress-bar { background: var(--sr-c); border-radius: var(--r-full); }
.sr-more { margin-top: var(--sp-2); }
.sr-more > summary { padding: var(--sp-2) 0; font-size: 14px; font-weight: 600; color: var(--brand); }

/* ------------------------------------------------- Today: who needs attention
   A row a student and the whole row a link: initials, name, class and how
   much they do, then why they are here - red for misses, amber for falling marks. */
.att-said { margin: 0 0 var(--sp-3); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.att-list { list-style: none; margin: 0 calc(-1 * var(--sp-3)); padding: 0; }
.att-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
  gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); color: var(--ink); text-decoration: none;
  transition: background .15s var(--ease); }
.att-row:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); text-decoration: none; }
.att-list li + li { border-top: 1px solid var(--line-soft); }
.att-who { min-width: 0; }
.att-who b { display: block; font-size: 15px; font-weight: 600; }
.att-who small { display: block; margin-top: var(--sp-1); font-size: 13px; color: var(--ink-3); }
.att-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-1); }
.att-why { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-full); font-size: 12px; font-weight: 620;
  white-space: nowrap; }
.att-why.t-risk { background: var(--warn-soft); color: var(--warn); }
.att-why.t-watch { background: var(--gold-soft); color: var(--ink-2); }
.att-go { color: var(--ink-3); }
.att-row:hover .att-go { color: var(--brand); }
.att-more { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3);
  font-size: 14px; font-weight: 600; }
@media (max-width: 560px) {
  .att-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .att-chips { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  .att-go { grid-column: 3; grid-row: 1 / span 2; }
}

/* ------------------------------------------------- the Students list on a phone
   The table becomes a card a student: tick, initials and name, Pause and the
   bin on the first line; class, average, marked, missed and last seen under
   it - nothing to scroll sideways for. */
@media (max-width: 720px) {
  #roster, #roster tbody { display: block; }
  #roster tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft); }
  #roster tr:last-child { border-bottom: 0; }
  #roster tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  #roster td, #roster th { display: block; padding: 0; border: 0; background: none; }
  #roster tr:hover td { background: none; }
  #roster td:first-child, #roster th:first-child { order: 0; flex: none; }
  #roster td:nth-child(2) { order: 1; flex: 1 1 0; min-width: 0; }
  #roster td.rowacts { order: 2; flex: none; }
  #roster td:nth-child(n+3):not(.rowacts) { order: 4; }
  #roster td.r-n { font-size: 13px; color: var(--ink-3); }
  #roster td.r-n::after { content: " " attr(data-k); }
  #roster td.r-n[data-k="graded"] { display: none; }   /* the average says it; room for the rest */
  #roster th:not(:first-child) { display: none; }
  #roster th:first-child { display: flex; align-items: center; }
  #roster th:first-child::after { content: "Select all"; margin-left: var(--sp-2); font-size: 13px;
    font-weight: 560; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
  #roster .r-who { gap: var(--sp-2); }
  #roster .r-who > a:not(.peek) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #roster td.rowacts > * { margin-left: var(--sp-1); }
  #roster .rb-word { display: none; }
  #roster button.rowbtn { width: 36px; height: 36px; padding: 0; justify-content: center; }
  #roster .movef select { padding: var(--sp-1) var(--sp-6) var(--sp-1) var(--sp-3); }
}
.bulkbar {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  font-size: 13px;
}
.bulkbar form { margin: 0; }
/* display:flex would otherwise beat the hidden attribute the script sets */
.bulkbar[hidden] { display: none; }
#roster td { vertical-align: middle; }

/* one practice test: paper, audio and answers together */
.testfile {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft);
}
.testfile:last-child { border-bottom: 0; }
.testfile a { font-weight: 600; }
.testfile .sub { margin: var(--sp-1) 0 0; }
.testfile audio { max-width: 320px; flex: 1 1 220px; }

/* ------------------------------------------- digital tests */
.dq { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); }
.dq:last-child { border-bottom: 0; }
.dqhead { font-size: 14px; margin-bottom: var(--sp-2); }
.dqhead b { margin-right: var(--sp-1); color: var(--brand); }
.keypick {
  display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-1) 0;
  font-size: 13px; cursor: pointer;
}
.keypick input { margin-top: var(--sp-1); }
.keypick b { color: var(--ink-2); margin-right: var(--sp-1); }
.opt { padding: var(--sp-1) var(--sp-2); font-size: 13px; border-radius: 6px; }
.opt b { color: var(--ink-3); margin-right: var(--sp-1); }
.opt.right { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); font-weight: 600; }
.opt.chosen { background: color-mix(in srgb, var(--red) 14%, var(--surface)); }
.passage { white-space: pre-wrap; font-size: 14px; line-height: 1.65; }

.passageimg {
  display: block; width: 100%; height: auto; border-radius: 8px;
  margin: var(--sp-1) 0 var(--sp-3); border: 1px solid var(--line);
}

/* opening a student's page should not take the teacher's page with it */
.btnlink {
  display: inline-flex; align-items: center; padding: 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink-2);
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.btnlink:hover { border-color: var(--brand); color: var(--brand); }

/* ------------------------------- grading a whole task at once */
.gradegrid {
  display: grid; gap: var(--sp-3); margin-top: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.gradecard {
  border: 1px solid var(--line); border-radius: 10px;
  padding: var(--sp-3); background: var(--surface);
}
.gchead { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.gcshots { display: flex; gap: var(--sp-1); overflow-x: auto; margin-bottom: var(--sp-2); }
.gcshots img {
  height: 150px; width: auto; border-radius: 6px; cursor: zoom-in;
  border: 1px solid var(--line-soft);
}
.gcshots img.zoom {
  position: fixed; inset: 3vh 3vw; height: 94vh; width: auto; max-width: 94vw;
  object-fit: contain; z-index: 90; background: var(--surface);
  box-shadow: 0 10px 60px rgba(0,0,0,.5); cursor: zoom-out;
}
.gcnote { width: 100%; font-size: 12px; margin-top: var(--sp-2); }
.gradecard .scorepad { gap: var(--sp-1); }
.gradecard .scorepad button { padding: var(--sp-1) var(--sp-2); font-size: 12px; min-width: 26px; }

/* ------------------------------------------------ on a phone
 *
 * Two things a stylesheet written on a laptop gets wrong.
 *
 * A finger is not a cursor: the marking pads, score pads, chips and tabs were
 * drawn at about 22px tall, which is fine to click and fiddly to tap. Anything
 * meant to be tapped gets a 44px target here - the size both Apple and Google
 * settled on - without changing how it looks on a desktop.
 *
 * And Safari on iOS zooms the page in whenever a field smaller than 16px is
 * focused, so typing a note on a phone meant pinching back out afterwards.
 */
@media (pointer: coarse) {
  .scorepad button,
  .scorepad.halves button,
  .scorepad.mini button,
  .gradecard .scorepad button,
  .chip,
  .tabs .tab,
  .linky,
  .peek {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .chip, .tabs .tab { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .scorepad, .chips { gap: var(--sp-2); }

  /* never below 16px, or the page jumps on focus */
  input, select, textarea,
  .gcnote, .movef select {
    font-size: 16px;
  }
  .movef select { padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3); }
}

/* ---------------------------------------------- the writing paper
 *
 * A real paper puts the question on one side and the sheet on the other, so
 * this does too. On a phone they stack and the question folds away once it has
 * been read, because two columns of text on a 360px screen is neither.
 */
.paper {
  display: grid; gap: var(--sp-4); align-items: start;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.paper .question, .paper .sheet {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-4);
  box-shadow: var(--shadow-1);
}
.paper h3 { margin: 0 0 var(--sp-2); font-size: 13px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.qtext { font-size: 16px; line-height: 1.65; white-space: pre-wrap; }
.qtoggle { display: none; }
#answer {
  width: 100%; min-height: 58vh; resize: vertical;
  border: 0; padding: 0; background: none; color: var(--ink);
  font: 16px/1.9 ui-serif, Georgia, "Times New Roman", serif;
}
#answer:focus { outline: none; }
.sheetbar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}
.counter {
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.counter.short { color: var(--red); }
.sheetbar button { margin-left: auto; }
.written {
  font: 16px/1.9 ui-serif, Georgia, "Times New Roman", serif;
  white-space: pre-wrap; word-break: break-word;
}
.written.short {
  max-height: 190px; overflow-y: auto; font-size: 14px; line-height: 1.7;
}
.paper.reading .sheet { background: var(--surface); }

@media (max-width: 860px) {
  .paper { grid-template-columns: 1fr; }
  .paper .question { padding: var(--sp-3); }
  .qtoggle {
    display: block; width: 100%; text-align: left; background: none;
    border: 0; padding: 0; font-size: 13px; font-weight: 700; color: var(--brand);
    text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
  }
  .qtoggle::after { content: " ▾"; }
  .qtoggle.shut::after { content: " ▸"; }
  .qbody { margin-top: var(--sp-2); }
  #answer { min-height: 46vh; }
}

/* a question the student types the answer to, rather than choosing one */
.typedin {
  width: 100%; max-width: 340px; font-size: 15px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.typedin:focus { outline: 2px solid var(--accent-line); outline-offset: 1px; }

/* ------------------------------------------------------------- the booklet
 * The handout as the student's own page: its own teal, its own boxes, its own
 * layout, with a box to type in where the paper has a dotted line. The rules
 * below are the booklet's, not the site's, and are scoped to .booklet so they
 * cannot leak into the rest of the dashboard.
 */
.booksheet {
  background: #fff; color: #1A1A1A;
  padding: var(--sp-6) var(--sp-5); border-radius: var(--r-sm);
  border: 1px solid var(--line); overflow-x: auto;
}
@media (max-width: 720px) { .booksheet { padding: var(--sp-4) var(--sp-3); } }

.booklet { --ink:#1A1A1A; --teal:#127D80; --deep:#0B5456; --soft:#F2F8F8;
  color:var(--ink); font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,
  'Helvetica Neue',Arial,sans-serif; line-height:1.5; }
.booklet p { margin:0 0 6px; }
.booklet p.sp { margin:0; height:8px; }
.booklet table.bk { border-collapse:collapse; width:100%; margin:10px 0;
  table-layout:fixed; }
.booklet table.bk td { padding:8px 10px; word-wrap:break-word; }
.booklet .tab { display:inline-block; width:22px; }
.booklet table.bk table.bk { margin:0; }
.booklet .bk-blank { font:inherit; color:#0B5456; background:#F2F8F8;
  border:0; border-bottom:1.5px solid #9CC; border-radius:3px 3px 0 0;
  padding:1px 6px; min-height:24px; }
.booklet .bk-blank:focus { outline:0; background:#E6F2F2;
  border-bottom-color:#127D80; }
.booklet .bk-blank.right { background:#E7F6EC; border-bottom-color:#2E9E5B; }
.booklet .bk-blank.wrong { background:#FDECEC; border-bottom-color:#D35; }
.booklet .bk-was { color:#2E9E5B; font-weight:600; white-space:nowrap; }

/* The student's page is a narrow column, which is right for a list of
   homework and wrong for a handout: the booklet's two-column exercises were
   being squeezed into half the width they were drawn for. It widens only for
   the pages that hold one. */
main.portal { max-width: 600px; }
main.portal:has(.booksheet) { max-width: 940px; }

/* ---------------------------------------------------- the booklet on a phone
 * The handout was drawn for A4 and most of these students read it on a
 * phone. Word's side-by-side cells became two 150px columns wrapping every
 * three words, so on a narrow screen the table rows stack into one column and
 * the printed widths are dropped. The boxes also have to be tappable: below
 * 16px iOS zooms the whole page in the moment a field is focused, and a 24px
 * target is a poor thing to hit with a thumb.
 */
@media (max-width: 720px) {
  .booklet table.bk,
  .booklet table.bk tbody,
  .booklet table.bk tr,
  .booklet table.bk td {
    display: block;
    width: auto !important;
  }
  .booklet table.bk td { padding: 6px 8px; }
  .booklet table.bk td:empty { display: none; }
  .booklet p { margin-bottom: 8px; }
}
@media (pointer: coarse) {
  .booksheet:not(.handout) .booklet .bk-blank {
    font-size: 16px;
    min-height: 44px;
    width: 100% !important;
    max-width: 320px;
    display: block;
    margin: 4px 0;
    border: 1px solid #9CC;
    border-radius: 6px;
    padding: 0 10px;
  }
  .booksheet:not(.handout) .booklet .bk-blank.right { border-color: #2E9E5B; }
  .booksheet:not(.handout) .booklet .bk-blank.wrong { border-color: #D35; }
}

/* The figures on Overview were four saturated colours assigned by position,
   which told the reader nothing: "active students" is not blue and "groups"
   is not magenta. They are quiet now, and the only one that takes a colour is
   the queue, when it has grown enough to be worth looking at. */
.grid .stat { background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.grid .stat .k { color: var(--ink-3); letter-spacing: .07em; }
.grid .stat .v { color: var(--ink); font-weight: 620; }
.grid .stat .note { color: var(--ink-3); font-size: 12.5px; margin-top: var(--sp-1); }
.grid .stat.busy { border-color: var(--warn-line); background: var(--warn-soft); }
.grid .stat.busy .v { color: var(--warn); }
.grid .stat.busy .note { color: var(--warn); }

/* the class recording, where the booklet asks for it: a Listen button in the
   listening section, and - once it is playing and the button has scrolled
   away - the same controls under the top bar, so the questions can be
   answered as it plays. The sheet stays white in dark mode, so the button in
   it keeps a light palette of its own; the bar in the header follows the
   theme like the header does. */
.lx { display: flex; align-items: center; gap: 10px;
  --lx-bg: #ffffff; --lx-line: #dccfe3; --lx-ink: #1c0f22; --lx-soft: #7a6784;
  --lx-brand: #701589; --lx-track: #ece3f0; }
.booklet .lx { margin: 10px 0 4px; padding: 8px 12px 8px 8px; max-width: 460px;
  background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(28, 15, 34, .06); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.lx button { flex: none; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: none; color: var(--lx-ink); font: inherit; }
.lx button:focus-visible, .lx .lx-bar:focus-visible { outline: 2px solid var(--lx-brand); outline-offset: 2px; }
.lx .lx-play { width: 44px; height: 44px; border-radius: 50%; background: var(--lx-brand); color: #fff;
  transition: transform .08s var(--ease); }
.lx .lx-play:active { transform: scale(.94); }
.lx .lx-play svg { width: 22px; height: 22px; fill: currentColor; }
.lx .lx-pa, .lx.on .lx-pl { display: none; }
.lx.on .lx-pa { display: inline; }
.lx .lx-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lx .lx-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lx .lx-label { flex: 1; min-width: 0; font-size: 15px; font-weight: 650; color: var(--lx-ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a thin line to look at, a tall strip to put a thumb on */
.lx .lx-bar { position: relative; display: block; height: 18px; cursor: pointer; touch-action: manipulation; }
.lx .lx-bar::before, .lx .lx-bar i { content: ""; position: absolute; left: 0; top: 7px; height: 4px;
  border-radius: 2px; }
.lx .lx-bar::before { right: 0; background: var(--lx-track); }
.lx .lx-bar i { width: 0; background: var(--lx-brand); }
.lx .lx-back { position: relative; width: 36px; height: 36px; border-radius: 50%; color: var(--lx-soft); }
.lx .lx-back svg { width: 26px; height: 26px; fill: currentColor; }
.lx .lx-back b { position: absolute; top: 13px; left: 0; right: 0; font-size: 8.5px; font-weight: 700;
  text-align: center; }
.lx .lx-back:active { color: var(--lx-brand); }
.lx .lx-time { flex: none; font-size: 12.5px; color: var(--lx-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.lx-dock { --lx-bg: var(--surface); --lx-line: var(--line); --lx-ink: var(--ink); --lx-soft: var(--ink-3);
  --lx-brand: var(--accent); --lx-track: var(--line-soft);
  max-width: 1120px; margin: 0 auto; padding: 6px var(--sp-4) 6px var(--sp-3); box-sizing: border-box;
  border-top: 1px solid var(--line); background: var(--surface); }
.lx-dock[hidden] { display: none; }
.lx-dock .lx-play { width: 38px; height: 38px; }
.lx-dock .lx-play svg { width: 19px; height: 19px; }
.lx-dock .lx-label { font-size: 13px; font-weight: 600; }
.lx-dock .lx-close { width: 32px; height: 32px; border-radius: 50%; color: var(--lx-soft); }
.lx-dock .lx-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; }
.lx-missing { margin: 8px 0; padding: 6px 10px; border-radius: 8px; font-size: 13px;
  background: #fff4de; color: #7a4d00; border: 1px solid #f0d9a8; }
@media (prefers-reduced-motion: reduce) { .lx .lx-play { transition: none; } }

/* ------------------------------------------------------------- exam conditions
 * The clock sits above the paper and stays there while it scrolls, because a
 * student who has to hunt for the time is not thinking about the questions.
 */
.exambar {
  position: sticky; top: 60px; z-index: 10;
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3); box-shadow: var(--shadow-1);
}
.exclock {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 20px;
  letter-spacing: -.02em; color: var(--ink);
}
.exclock.soon { color: var(--amber); }
.exclock.nearly { color: var(--warn); }
/* under the bar of the student's frame - on a phone that bar is two rows
   (the section, then its pages) and the clock was sliding under the second,
   out of sight for the whole sitting; shell.js measures the bar as --bar-h */
.shell .exambar { top: calc(var(--bar-h, var(--top-h)) + var(--sp-2)); }
/* On a phone the clock is one slim line: as a card it was a sixth of the
   screen, on top of the bar over it, for the whole sitting. */
@media (max-width: 720px) {
  .exambar { gap: var(--sp-2); padding: 6px var(--sp-3); }
  .exclock { font-size: 18px; }
  .exambar .sub { margin: 0; font-size: 12.5px; line-height: 1.3; }
}

/* the answer in its gap (book.js): a word to write is typed in the text,
   where the dots were, as wide as a word and no wider than the line */
.booksheet .booklet input.bk-blank.in-gap {
  display: inline-block !important; width: 8.5em !important; max-width: 62%;
  height: 32px; min-height: 0; margin: 1px 2px; padding: 0 var(--sp-2);
  vertical-align: baseline; font-size: 16px; line-height: 1.2;
  border: 1px solid #9CC; border-radius: 6px; }
.booksheet .booklet input.bk-blank.in-gap.right { border-color: #2E9E5B; }
.booksheet .booklet input.bk-blank.in-gap.wrong { border-color: #D35; }
.booksheet .booklet p.gap-moved { display: none; }
/* a gap answered by a choice: the word chosen, and a tap goes to the choices */
.booksheet .booklet button.gapchip {
  display: inline-block; min-width: 4.5em; height: auto; margin: 0 2px; padding: 1px 10px;
  border: 1px dashed #9CC; border-radius: 999px; background: #F2F8F8; box-shadow: none;
  color: #0B5456; font: inherit; font-weight: 600; line-height: 1.5; vertical-align: baseline;
  cursor: pointer; }
.booksheet .booklet button.gapchip.chosen { border-style: solid; background: #E6F2F2; }
.booksheet .booklet p.gap-lit { animation: gap-lit 1.4s var(--ease); border-radius: 8px; }
@keyframes gap-lit { from { background: #fff3c4; } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .booksheet .booklet p.gap-lit { animation: none; } }

/* Typing on a phone (shell.js marks the page while a box has the keyboard).
   The keyboard takes half the screen, and while it is up Safari moves the
   bars pinned to the screen's edges about as the page scrolls: they jumped,
   and sat over the very box being typed in. Until it goes, the bar over the
   work scrolls away with the page, the bars at the bottom step aside, and a
   test's clock keeps its time at the very top. */
@media (max-width: 860px) and (pointer: coarse) {
  html.typing .topbar { position: relative; }
  html.typing .savebar, html.typing .pnav { visibility: hidden; }
  html.typing .exambar, html.typing .shell .exambar { top: 0; }
}

/* A Cambridge answer is chosen, not typed. */
.booklet .exopts { display: block; margin: var(--sp-1) 0 var(--sp-2); }
.booklet .exopt {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  margin: 0 var(--sp-4) var(--sp-1) 0; cursor: pointer;
  font-size: 10.5pt;
}
.booklet .exopt b { color: #127D80; }
.booklet .exopt.right { background: #E7F6EC; border-radius: 4px;
  padding: 1px var(--sp-2); }
.booklet .exopt.wrong { background: #FDECEC; border-radius: 4px;
  padding: 1px var(--sp-2); }
.booklet .exwrite {
  width: 100%; font: inherit; line-height: 1.6; padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: #1A1A1A;
}
@media (pointer: coarse) {
  .booklet .exopt { min-height: 44px; align-items: center; }
}

/* A student's writing, read rather than skimmed: the paragraph is given its
   own measure so a long email does not run the full width of a laptop. */
.writ .passage { max-width: 62ch; }
.writ + .writ { margin-top: var(--sp-3); }

/* --------------------------------------------------- battles

   Four classmates racing the same questions. The track is the point: a lane
   each, a car that slides as answers land, so you can see a rival pulling
   away without reading a number. */

.playbtn.battle { background: #b32d4e; }

.codecard { text-align: center; padding: var(--sp-5); border-radius: var(--r-lg);
  background: var(--accent-soft); border: 1px solid var(--brand);
  margin-bottom: var(--sp-4); }
.bigcode { font-size: 46px; font-weight: 700; letter-spacing: .18em;
  line-height: 1.1; margin: var(--sp-1) 0; }

/* named for what it is. The first version of this called itself .grid and
   quietly redefined the site-wide stat grid, which turned every row of
   figures on Overview and Progress into a single stacked column. */
.seats { display: flex; flex-direction: column; gap: var(--sp-2); }
.seat { display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  background: var(--line-soft); }

.mates { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mate { display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); font-size: 15px; }
.mate .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mate.on .dot { background: #1a8a52; box-shadow: 0 0 0 3px rgba(26,138,82,.18); }
.mate.asked { opacity: .55; }
.mate[disabled] { cursor: default; }

.invite { display: flex; flex-direction: column; gap: var(--sp-3);
  border-color: var(--brand); background: var(--accent-soft); }
.inviterow { display: flex; gap: var(--sp-3); align-items: center; }
.inviterow form { flex: 1; margin: 0; }
.inviterow form:last-child { flex: 0 0 auto; }

.battlestart select, .battlecode input { width: 100%; }
.battlecode { display: flex; gap: var(--sp-2); }
.battlecode input { font-size: 30px; text-align: center; letter-spacing: .3em;
  text-transform: uppercase; font-weight: 700; }
.battlecode button { flex: 0 0 34%; }

.track { display: flex; flex-direction: column; gap: var(--sp-3);
  margin-top: var(--sp-4); }
.lane { font-size: 14px; }
.lane.me { font-weight: 600; }
.lanetop { display: flex; justify-content: space-between; gap: var(--sp-2);
  margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.lane .place { display: inline-block; min-width: 20px; font-weight: 700; }
.lane.home .rail { opacity: .75; }
.rail { position: relative; height: 12px; border-radius: 999px;
  background: var(--line-soft); }
.rail .fill { height: 100%; border-radius: 999px; transition: width .45s ease; }
/* the car rides its own lane, so it needs an outline to stay visible on
   both the filled part of the rail and the empty part ahead of it */
.rail .car { position: absolute; top: 50%; font-size: 15px; line-height: 1;
  color: var(--ink); transform: translate(-50%, -50%); transition: left .45s ease;
  text-shadow: 0 0 2px var(--surface), 0 0 3px var(--surface),
               0 0 4px var(--surface); }
.rail .fill.c0 { background: #1668c9; }
.rail .fill.c1 { background: #b32d4e; }
.rail .fill.c2 { background: #1a8a52; }
.rail .fill.c3 { background: #8a4a1a; }
.seat .car.c0 { color: #1668c9; } .seat .car.c1 { color: #b32d4e; }
.seat .car.c2 { color: #1a8a52; } .seat .car.c3 { color: #8a4a1a; }
.rail .car.bump { animation: bump .45s ease; }
@keyframes bump { 0% { transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -50%) scale(1.5); }
  100% { transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .rail .fill, .rail .car { transition: none; }
  .rail .car.bump { animation: none; }
}

/* ------------------------------------------------- what to reteach

   One number carries this page: the share of answers a class gets right.
   It is read down a column, so it is tabular and it is coloured, because
   the teacher is scanning for the bad ones rather than reading them all. */

.pct { display: inline-block; min-width: 46px; text-align: right;
  padding: 2px var(--sp-2); border-radius: var(--r-full);
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.pct-bad { background: var(--warn-soft); color: var(--warn); }
.pct-ok { background: #e4f8ee; color: #06713f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pct-ok { background: #123324; color: #7fd9ab; }
}
:root[data-theme="dark"] .pct-ok { background: #123324; color: #7fd9ab; }

/* ------------------------------------------------- handouts

   The same booklet on a laptop and on a phone. The paper design is kept;
   what changes is how each box is answered. A gap in a sentence stays in
   the sentence, sized to what goes in it. A sentence of the student's own
   is a box that grows as it is written. A choice is a row of chips, a tick
   is a tick. On a narrow screen the two-column exercises stack in reading
   order and the indents drawn for A4 give their width back. */

main.portal:has(.booksheet.handout), main.portal:has(.hx-hero) { max-width: 980px; }
.booksheet.handout { padding-bottom: var(--sp-7); }
.booksheet.handout .booklet { line-height: 1.9; }
.booksheet.handout [id^="ex-"], .booksheet.handout [id^="sec-"] { scroll-margin-top: 80px; }

/* a gap in a sentence: inline, sized by the paper, never wider than the line */
.booksheet.handout .booklet input.bk-blank {
  display: inline-block; max-width: 100%; min-width: 4ch; height: 34px;
  vertical-align: middle; margin: 2px 0; padding: 0 var(--sp-2);
  font-size: 16px; line-height: 1.2;           /* 16px stops iOS zooming on focus */
  border: 1px solid var(--hx-chip); border-radius: 6px; background: var(--hx-soft-2); color: var(--hx-deep); }
.booksheet.handout .booklet .bk-blank:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; background: #fff; }

/* a sentence of their own: a box that grows as they write */
.booksheet.handout .booklet textarea.bk-long {
  display: block; width: 100% !important; min-height: 44px; resize: none;
  overflow: hidden; margin: var(--sp-1) 0 var(--sp-2); padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: 16px; line-height: 1.45; color: var(--hx-deep);
  border: 1px solid var(--hx-chip); border-radius: 8px; background: var(--hx-soft-2); }

/* a choice: chips to tap, the chosen one filled with the booklet's teal */
.booksheet.handout .bk-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1);
  vertical-align: middle; margin: 2px 0; padding: 2px; border-radius: 999px; }
.booksheet.handout .bk-chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.booksheet.handout .bk-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.booksheet.handout .bk-chip span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 34px; padding: 0 var(--sp-3); border-radius: 999px;
  border: 1.5px solid var(--hx-chip); background: #fff; color: var(--hx-deep);
  font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background .12s var(--ease), border-color .12s var(--ease), transform .08s var(--ease); }
.booksheet.handout .bk-chip:active span { transform: scale(.95); }
.booksheet.handout .bk-chip input:checked + span {
  background: var(--hx-brand); border-color: var(--hx-brand); color: #fff; }
.booksheet.handout .bk-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.booksheet.handout .bk-chips.right { box-shadow: 0 0 0 2px #2E9E5B; }
.booksheet.handout .bk-chips.right input:checked + span { background: #2E9E5B; border-color: #2E9E5B; }
.booksheet.handout .bk-chips.wrong { box-shadow: 0 0 0 2px var(--warn); }
.booksheet.handout .bk-chips.wrong input:checked + span { background: var(--warn); border-color: var(--warn); }
.booksheet.handout .bk-chips.teacher { box-shadow: 0 0 0 2px #d8ae4a; }

/* a tick: a square to tap */
.booksheet.handout .bk-tick { display: inline-grid; place-items: center; width: 34px; height: 34px;
  padding: 0; margin: 2px 0; vertical-align: middle; border-radius: 8px;
  border: 1.5px solid var(--hx-chip); background: #fff; color: transparent;
  font-size: 18px; font-weight: 700; line-height: 1; filter: none; }
.booksheet.handout .bk-tick.on { background: var(--hx-brand); border-color: var(--hx-brand); color: #fff; }
.booksheet.handout .bk-tick.right { box-shadow: 0 0 0 2px #2E9E5B; }
.booksheet.handout .bk-tick.wrong { box-shadow: 0 0 0 2px var(--warn); }
/* a piece of writing: room for a paragraph, and how many words so far */
.booksheet.handout .booklet textarea.bk-essay { min-height: 9.5em; }
.booksheet.handout .bk-words { display: block; margin: calc(-1 * var(--sp-1)) 0 var(--sp-2);
  text-align: right; font-size: 12px; line-height: 1.4; color: var(--hx-deep);
  font-variant-numeric: tabular-nums; }
.booksheet.handout .bk-tickfill { margin: 0 0 var(--sp-2); padding: var(--sp-1) var(--sp-3);
  border-radius: 999px; border: 1px solid var(--hx-chip); background: #fff; color: var(--hx-deep);
  font-size: 13px; font-weight: 600; filter: none; }

.booksheet.handout .bk-blank.right, .booksheet.handout textarea.bk-long.right {
  background: #e4f8ee; border-color: #2E9E5B; color: #06713f; }
.booksheet.handout .bk-blank.wrong, .booksheet.handout textarea.bk-long.wrong {
  background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
/* not wrong - nobody can mark a sentence of your own */
.booksheet.handout .bk-blank.teacher, .booksheet.handout textarea.bk-long.teacher {
  background: var(--gold-soft); border-color: #d8ae4a; }

/* the answer is one tap away, not given for free */
.bk-answer {
  margin-left: var(--sp-1); padding: 1px var(--sp-2); border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 12px; line-height: 1.6; cursor: pointer; }
.bk-answer:disabled {
  background: #e4f8ee; border-color: #a8e6c6; color: #06713f;
  cursor: default; font-weight: 600; }

@media (max-width: 720px) {
  /* Word's side-by-side exercise columns stack, rather than squeezing two
     columns of questions into 180px each */
  .booksheet.handout .booklet table.bk,
  .booksheet.handout .booklet table.bk tbody,
  .booksheet.handout .booklet table.bk tr,
  .booksheet.handout .booklet table.bk td {
    display: block; width: auto !important;
  }
  .booksheet.handout .booklet table.bk td { padding: 2px 0; }
  /* ...but a coloured or ruled box keeps a margin inside it, or its words
     run into its edge */
  .booksheet.handout .booklet table.bk td[style*="background"],
  .booksheet.handout .booklet table.bk td[style*="solid"] { padding: var(--sp-2) var(--sp-3); }
  .booksheet.handout .booklet table.bk td:empty { display: none; }
  /* a section's number stays beside its name, as a bar, not a slab above it */
  .booksheet.handout .booklet table.bk-sec tr { display: flex; align-items: stretch; }
  .booksheet.handout .booklet table.bk-sec td:first-child { flex: none; min-width: 44px;
    display: flex; align-items: center; justify-content: center; }
  .booksheet.handout .booklet table.bk-sec td + td { flex: 1; min-width: 0; }
  /* ... and in the order they are numbered: down the first column, then the next */
  .booksheet.handout .booklet table.bk-colgrid tbody { display: flex; flex-direction: column; }
  .booksheet.handout .booklet table.bk-colgrid tr { display: contents; }
  .booksheet.handout .booklet table.bk-colgrid td:nth-child(2) { order: 2; }
  .booksheet.handout .booklet table.bk-colgrid td:nth-child(3) { order: 3; }
  /* a box of words to choose from wraps like a sentence */
  .booksheet.handout .booklet table.bk-wordbox tbody { display: flex; flex-wrap: wrap;
    padding: var(--sp-1) var(--sp-2); }
  .booksheet.handout .booklet table.bk-wordbox tr { display: contents; }
  .booksheet.handout .booklet table.bk-wordbox td { padding: var(--sp-1) var(--sp-2); }
  .booksheet.handout .booklet table.bk-wordbox td p { margin: 0; }
  /* indents drawn for A4 give their width back */
  .booksheet.handout .booklet p[style*="padding-left"] { padding-left: var(--sp-2) !important; }
  .booksheet.handout { overflow-x: hidden; padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .booksheet.handout .bk-chip span { height: 38px; min-width: 40px; }
  .booksheet.handout .bk-tick { width: 38px; height: 38px; }
  .booksheet.handout .booklet input.bk-blank { height: 38px; }
}

/* the bar that stays in reach: how much is done, where to go, and Check */
.savebar {
  position: sticky; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "prog prog prog" "jump next check" "notes notes notes";
  gap: var(--sp-2) var(--sp-2); align-items: center;
  margin: calc(-1 * var(--sp-6)) 0 0; padding: 0 var(--sp-3) var(--sp-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 -6px 20px rgba(28, 15, 34, .08);
  font-size: 13px; color: var(--ink-2); overflow: hidden; }
.sb-prog { grid-area: prog; height: 4px; margin: 0 calc(-1 * var(--sp-3));
  background: var(--line-soft); }
.sb-prog i { display: block; height: 100%; width: 0; background: var(--brand);
  transition: width .4s var(--ease); }
.bk-jump { grid-area: jump; min-width: 0; height: 38px; font-size: 14px; }
.sb-next { grid-area: next; height: 38px; padding: 0 var(--sp-3); font-size: 14px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkbtn { grid-area: check; height: 38px; padding: 0 var(--sp-4); font-size: 14px; }
.sb-notes { grid-area: notes; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  font-size: 12px; color: var(--ink-3); }
.marknote { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  /* above the section bar at the bottom of the screen, not under it */
  .savebar { bottom: calc(var(--pnav-h) + env(safe-area-inset-bottom)); border-radius: var(--r-md);
    margin-left: calc(-1 * var(--sp-1)); margin-right: calc(-1 * var(--sp-1)); }
  .bk-jump { font-size: 16px; }
}

/* ------------------------------------------------- a handout in five parts

   One part on the screen at a time, under a header that says where the
   student is: five steps and the results, the ones done ticked, the next
   ones locked. The exercises keep the booklet's teal; everything the paper
   explains - the reading text, the grammar and warning boxes, the tables -
   is drawn in the site's plum, with a book face for what is read. The sheet
   stays white in dark mode (the exercises are drawn for paper), so the cards
   inside it take a fixed light palette of their own. */

:root { --hx-plum: #2a0736; --hx-grape: #701589; --hx-gold: #ffd36e;
  --hx-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.hx-hero {
  position: relative; overflow: hidden; margin: var(--sp-3) 0 var(--sp-5);
  padding: var(--sp-5) var(--sp-5) var(--sp-4); border-radius: var(--r-lg); color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 211, 110, .22), transparent 55%),
    linear-gradient(140deg, var(--hx-plum) 0%, var(--hx-grape) 100%);
  box-shadow: var(--shadow-2); }
.hx-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.hx-title { margin: var(--sp-1) 0 0; font-family: var(--font-dream); font-size: 34px;
  line-height: 1.1; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.hx-sub { margin: var(--sp-2) 0 0; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .82);
  max-width: 60ch; }

/* the steps: a line through six dots */
.hx-steps { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid;
  grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; }
.hx-steps::before { content: ""; position: absolute; left: 8%; right: 8%; top: 15px;
  height: 2px; background: rgba(255, 255, 255, .22); }
.hx-step { position: relative; display: flex; justify-content: center; min-width: 0; }
.hx-step > a, .hx-step > span, .hx-step:not(:has(a)) { color: inherit; }
.hx-step a, .hx-step.locked { display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-1); text-decoration: none; color: #fff; min-width: 0; max-width: 100%; }
.hx-step a:hover { text-decoration: none; }
.hx-step-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9);
  border: 1.5px solid rgba(255, 255, 255, .35); position: relative; z-index: 1;
  transition: transform .2s var(--ease); }
.hx-step-dot svg { width: 14px; height: 14px; }
.hx-step.done .hx-step-dot { background: #fff; color: var(--hx-grape); border-color: #fff; }
.hx-step.now .hx-step-dot { background: var(--hx-gold); color: var(--hx-plum); border-color: var(--hx-gold); }
.hx-step.locked { opacity: .55; }
.hx-step.here .hx-step-dot { transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); }
.hx-step-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; color: rgba(255, 255, 255, .85); }
.hx-step.here .hx-step-name { color: #fff; }
.hx-step a:focus-visible { outline: 2px solid var(--hx-gold); outline-offset: 3px; border-radius: var(--r-sm); }

/* a handout set as homework says so, above everything else */
.hwstrip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 14px; }
.hwstrip .sub { margin: 0 0 0 auto; }     /* .sub's paragraph gap does not belong in a strip */
.hwstrip .hwpaper { flex-basis: 100%; margin: var(--sp-1) 0 0; font-size: 14px; color: var(--ink-2); }
.hwstrip .hwsend { font-size: 14px; }

.hx-parthead { margin: 0 0 var(--sp-3); }
.hx-partno { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); }
.hx-parthead h2 { margin: var(--sp-1) 0 0; font-size: 26px; line-height: 1.15; }
.hx-parthead p:not(.hx-partno) { margin: var(--sp-1) 0 0; color: var(--ink-2); font-size: 15px; }

.hx-goals { margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow-1); }
.hx-goals .hx-label { margin: 0 0 var(--sp-2); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand); }
.hx-goals ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hx-goals li { position: relative; padding-left: var(--sp-5); font-size: 15px; line-height: 1.45; }
.hx-goals li::before { content: ""; position: absolute; left: 0; top: .35em; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--brand); background: var(--accent-soft); }

/* ---- inside the sheet: the paper's explanations in the site's colours */
.booksheet.handout {
  --hx-chip: #d9c2e2;
  --hx-ink: #1c0f22; --hx-ink-2: #5c3c65; --hx-ink-3: #857a8c;
  --hx-brand: #701589; --hx-deep: #320a3e; --hx-soft: #f5edf8; --hx-soft-2: #fbf8fc;
  --hx-line: #e8def0; --hx-warn: #b8283a; --hx-warn-soft: #fff1f2; --hx-warn-line: #f8ccd2;
  --hx-ok: #0b8a4c; --hx-gold-soft: #fff8e3; --hx-gold-line: #f1dc9c; --hx-gold-ink: #6b4b00;
  --hx-info: #0b69ad; --hx-info-soft: #eef6fd; --hx-info-line: #cfe4f6; }

.booklet .hx-card { margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5) var(--sp-3);
  border-radius: 14px; background: #fff; border: 1px solid var(--hx-line);
  box-shadow: 0 1px 2px rgba(28, 15, 34, .04), 0 8px 24px rgba(50, 10, 62, .06);
  color: var(--hx-ink); font-size: 16px; line-height: 1.6; }
.booklet .hx-head { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.booklet .hx-ico { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%;
  background: var(--hx-soft); color: var(--hx-brand); }
.booklet .hx-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hx-brand); line-height: 1.3; }
/* a box's title and a rule's name keep their own letters: the booklet writes
   them in capitals already, and a capital IPA symbol is a different sound */
.booklet .hx-card .hx-label, .booklet .hx-card .hx-tag { text-transform: none; }
.booklet .hx-body p { margin: 0 0 var(--sp-2); }
.booklet .hx-body p:last-child { margin-bottom: 0; }
.booklet .hx-body .hx-sub { padding-left: var(--sp-4); border-left: 2px solid var(--hx-line); }

/* a rule and its name: DECIDE, OFFER, PROMISE... */
.booklet .hx-rule { display: grid; grid-template-columns: minmax(7.5em, max-content) 1fr; gap: var(--sp-3);
  align-items: baseline; padding: var(--sp-2) 0; border-top: 1px solid var(--hx-line); margin: 0; }
.booklet .hx-rule + p:not(.hx-rule) { margin-top: var(--sp-3); }
.booklet .hx-tag { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--hx-deep);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.5; white-space: nowrap; }
.booklet .hx-item { position: relative; padding-left: 34px; }
.booklet .hx-num { position: absolute; left: 0; top: .1em; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--hx-soft); color: var(--hx-brand);
  font-size: 13px; font-weight: 700; line-height: 1; }
.booklet .hx-no { color: var(--hx-warn); font-weight: 700; }
.booklet .hx-yes { color: var(--hx-ok); font-weight: 700; }

.booklet .hx-warn { background: var(--hx-warn-soft); border-color: var(--hx-warn-line); }
.booklet .hx-warn .hx-ico { background: #fff; color: var(--hx-warn); }
.booklet .hx-warn .hx-label { color: var(--hx-warn); }
.booklet .hx-warn .hx-num { background: #fff; color: var(--hx-warn); }
.booklet .hx-sound, .booklet .hx-listen { background: var(--hx-info-soft); border-color: var(--hx-info-line); }
.booklet .hx-sound .hx-ico, .booklet .hx-listen .hx-ico { background: #fff; color: var(--hx-info); }
.booklet .hx-sound .hx-label, .booklet .hx-listen .hx-label { color: var(--hx-info); }
.booklet .hx-check { background: var(--hx-gold-soft); border-color: var(--hx-gold-line); }
.booklet .hx-check .hx-ico { background: #fff; color: var(--hx-gold-ink); }
.booklet .hx-check .hx-label { color: var(--hx-gold-ink); }
.booklet .hx-words { background: var(--hx-soft-2); box-shadow: none; margin: 0; }
.booklet .hx-words .hx-body p { margin: 0; padding: var(--sp-1) 0; border-top: 1px dashed var(--hx-line); }
.booklet .hx-words .hx-body p:first-child { border-top: 0; }
/* a text to read and fill in: an email, a dialogue, a message */
.booklet .hx-text { background: var(--hx-soft-2); }
.booklet .hx-text .hx-body { font-family: var(--font-dream); font-size: 17px; line-height: 1.75; }

/* the reading text: a page from a magazine */
.booklet .hx-read { margin: var(--sp-5) 0; padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border-radius: 16px; background: var(--hx-soft-2); border: 1px solid var(--hx-line);
  color: var(--hx-ink); }
.booklet .hx-read-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.booklet .hx-read-len { margin-left: auto; font-size: 13px; color: var(--hx-ink-3);
  font-variant-numeric: tabular-nums; }
.booklet .hx-read-title { margin: var(--sp-4) 0 var(--sp-2); font-family: var(--font-dream);
  font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--hx-deep); letter-spacing: -.01em;
  text-wrap: balance; }
.booklet .hx-stand { margin: 0 0 var(--sp-4); font-family: var(--font-dream); font-style: italic;
  font-size: 18px; line-height: 1.5; color: var(--hx-ink-2); }
.booklet .hx-read-body { font-family: var(--font-dream); font-size: 18px; line-height: 1.75;
  max-width: 64ch; }
.booklet .hx-read-body p { margin: 0 0 var(--sp-4); }
.booklet .hx-read-body p:last-child { margin-bottom: 0; }
.booklet .hx-lead { font-family: var(--hx-sans);
  font-size: .82em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--hx-brand); margin-right: 4px; }

/* a table of examples */
.booklet .hx-scroll { overflow-x: auto; margin: var(--sp-4) 0; border-radius: 12px;
  border: 1px solid var(--hx-line); background: #fff; }
.booklet table.hx-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5;
  color: var(--hx-ink); }
.booklet table.hx-table th { text-align: left; padding: var(--sp-2) var(--sp-3); background: var(--hx-soft);
  color: var(--hx-deep); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.booklet table.hx-table td { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--hx-line);
  vertical-align: top; }
.booklet table.hx-table td:first-child { font-weight: 600; color: var(--hx-deep); }
.booklet table.hx-table p { margin: 0; }

/* the questions in the site's plum too: the booklet's teal, wherever its own
   styles put it - exercise numbers, headed tables, the key panels - is
   repainted, and the boxes and chips above already use the plum */
.booksheet.handout .booklet [style*="color:#127D80" i] { color: var(--hx-brand) !important; }
.booksheet.handout .booklet [style*="color:#0B5456" i] { color: var(--hx-deep) !important; }
.booksheet.handout .booklet [style*="background:#127D80" i] { background: var(--hx-brand) !important; }
.booksheet.handout .booklet [style*="background:#E8F1F1" i] { background: var(--hx-soft) !important; }
.booksheet.handout .booklet [style*="background:#F2F8F8" i] { background: var(--hx-soft-2) !important; }
.booksheet.handout .booklet [style*="solid #127D80" i] { border-color: var(--hx-brand) !important; }
.booksheet.handout .booklet [style*="solid #C9C9C9" i] { border-color: var(--hx-line) !important; }
.booksheet.handout .booklet .bk-blank { color: var(--hx-deep); }

/* an instruction told again in Uzbek, under the English, for a class that
   cannot yet read the English one */
.booksheet.handout .booklet p.hx-uz { margin-top: -2px !important; margin-bottom: var(--sp-3) !important;
  font-size: 15px; line-height: 1.45; color: var(--hx-ink-2); }
.booksheet.handout .booklet p.hx-uz::before { content: "UZ"; display: inline-block; margin-right: var(--sp-2);
  padding: 0 6px; border-radius: 999px; background: var(--hx-soft); color: var(--hx-brand);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1.7; vertical-align: 1px; }

/* the answers are always in the plain face, even inside a text set as a book */
.booksheet.handout .bk-chip span, .booksheet.handout .booklet input.bk-blank,
.booksheet.handout .booklet textarea.bk-long, .booksheet.handout .bk-key,
.booksheet.handout .bk-tickfill, .booksheet.handout .bk-tick { font-family: var(--hx-sans); }

/* after the first part the header shrinks to a strip: the work comes first */
.hx-hero.slim { padding: var(--sp-3) var(--sp-4) var(--sp-3); margin-bottom: var(--sp-4); }
.hx-hero.slim .hx-kicker { display: none; }
.hx-hero.slim .hx-title { font-size: 20px; }
.hx-hero.slim .hx-steps { margin-top: var(--sp-3); }
.hx-hero.slim .hx-step-dot { width: 28px; height: 28px; font-size: 13px; }
.hx-hero.slim .hx-steps::before { top: 13px; }

/* ---- a checked part: what was right, and what it should have been */
.booksheet.handout .bk-chip.is-key span { box-shadow: 0 0 0 2px #2E9E5B; border-color: #2E9E5B; }
.booksheet.handout .bk-key { display: inline-block; margin: 2px 0 2px var(--sp-1); padding: 0 var(--sp-2);
  border-radius: 999px; background: #e4f8ee; color: #06713f; font-size: 14px; font-weight: 600;
  line-height: 1.8; vertical-align: middle; }
.booksheet.handout p.bk-key { display: block; width: fit-content; margin: 0 0 var(--sp-2); }

.hx-result { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-1); }
.hx-result-text h3 { margin: 0; font-size: 18px; }
.hx-result-text p { margin: var(--sp-1) 0 var(--sp-3); color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.hx-dial { position: relative; flex: none; width: 88px; height: 88px; }
.hx-dial-big { width: 150px; height: 150px; margin: 0 auto; }
.hx-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.hx-ring circle { fill: none; stroke-width: 3.4; }
.hx-ring-bg { stroke: var(--line-soft); }
.hx-ring-fg { stroke: var(--brand); stroke-linecap: round; transition: stroke-dasharray .8s var(--ease); }
.hx-dial-fig { position: absolute; inset: 0; margin: 0; display: grid; place-items: center;
  font-variant-numeric: tabular-nums; }
.hx-dial-fig b { font-size: 26px; line-height: 1; }
.hx-dial-fig small { font-size: 14px; color: var(--ink-3); }
.hx-dial-fig:has(small) { display: flex; align-items: baseline; justify-content: center; padding-top: 30px; }
.hx-dial-big .hx-dial-fig b { font-size: 34px; }
.hx-go { white-space: nowrap; }
.hx-bottom { display: flex; justify-content: center; margin: var(--sp-5) 0 var(--sp-6); }

.hx-final { margin: 0 0 var(--sp-5); padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow-1); text-align: center; }
.hx-final h2 { margin: var(--sp-4) 0 var(--sp-1); font-size: 26px; font-family: var(--font-dream); }
.hx-final-sub { margin: 0 0 var(--sp-5); color: var(--ink-2); }
.hx-rows { display: grid; gap: var(--sp-2); max-width: 560px; margin: 0 auto; text-align: left; }
.hx-row { display: grid; grid-template-columns: minmax(0, 11em) 1fr 3.5em; align-items: center;
  gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--ink);
  text-decoration: none; }
.hx-row:hover { background: var(--surface-2); text-decoration: none; }
.hx-row-name { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-row-no { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--brand); font-size: 13px; }
.hx-bar { display: block; height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.hx-bar b { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-lift), var(--brand)); }
.hx-row-fig { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.hx-final-note { margin: var(--sp-5) 0 0; color: var(--ink-2); font-size: 14px; }

.checkbtn.armed { background: var(--hx-gold); color: var(--hx-plum); border-color: var(--hx-gold); }

@media (max-width: 720px) {
  .hx-hero { margin-left: calc(-1 * var(--sp-1)); margin-right: calc(-1 * var(--sp-1));
    padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .hx-title { font-size: 26px; }
  .hx-sub { font-size: 14px; }
  .hx-step-name { display: none; }
  .hx-step.here .hx-step-name { display: block; position: absolute; top: 38px; left: 50%;
    transform: translateX(-50%); max-width: none; }
  .hx-steps { padding-bottom: var(--sp-4); }
  .hx-result { flex-wrap: wrap; padding: var(--sp-4); }
  .hx-row { grid-template-columns: minmax(0, 8.5em) 1fr 3.2em; }
  .hx-hero.slim { padding: var(--sp-3); }
  .hx-hero.slim .hx-sub { display: none; }
  .hx-hero.slim .hx-steps { padding-bottom: var(--sp-4); }
  .booklet .hx-card { padding: var(--sp-3) var(--sp-4); }
  .booklet .hx-read { padding: var(--sp-4); margin-left: calc(-1 * var(--sp-2)); margin-right: calc(-1 * var(--sp-2)); }
  .booklet .hx-read-title { font-size: 26px; }
  .booklet .hx-read-body, .booklet .hx-stand { font-size: 17px; }
  .booklet .hx-rule { grid-template-columns: 1fr; gap: var(--sp-1); }
  /* a table of examples: each row a block, each cell named, nothing to scroll */
  .booklet table.hx-wide, .booklet table.hx-wide tbody, .booklet table.hx-wide tr,
  .booklet table.hx-wide td { display: block; }
  .booklet table.hx-wide tr:first-child { display: none; }
  .booklet table.hx-wide tr { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--hx-line); }
  .booklet table.hx-wide tr:nth-child(2) { border-top: 0; }
  .booklet table.hx-wide td { border: 0; padding: 2px 0; }
  /* a first column with no heading of its own names the row; one with a
     heading is data like the rest, and says what it is */
  .booklet table.hx-wide td:first-child:not([data-label]) { font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--hx-brand); font-weight: 700; }
  .booklet table.hx-wide td[data-label]:first-child { font-weight: 400; color: var(--hx-ink); }
  .booklet table.hx-wide td[data-label]::before { content: attr(data-label);
    display: block; font-size: 12px; color: var(--hx-ink-3); font-weight: 600; }
  .booklet .hx-read-len { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------- records

   The cycle: marks along the way, the exams, and who left. Entering a class
   of scores is the job that has to be fast, so the boxes are big enough to
   tab through without aiming. */

.grow { flex: 1; }
.setrow { margin-bottom: var(--sp-3); }
.scorebox { width: 76px; text-align: right;
  font-variant-numeric: tabular-nums; font-size: 16px; }
table.rank td .f { flex-direction: row; align-items: center; gap: var(--sp-1);
  font-size: 12px; color: var(--ink-3); justify-content: flex-end; }

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

   Drawn as inline SVG: the site loads no chart library, and a chart that
   needs a network to appear is no use on a phone in a classroom. Chart
   text takes its colour from the theme so it reads in both. */

.chart { width: 100%; height: auto; display: block; margin-bottom: var(--sp-3); }
.chart .gridline { stroke: var(--line-soft); stroke-width: 1; }
.chart .axisline { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--ink-3); font-size: 11px;
  font-variant-numeric: tabular-nums; }
.chart .dot { fill: var(--brand); fill-opacity: .55;
  stroke: var(--brand); stroke-width: 1; }
/* a student who has left is outlined, not recoloured: the position is the
   information, the outline is the footnote */
.chart .dot.left { fill: var(--warn-soft); stroke: var(--warn);
  stroke-width: 2; fill-opacity: 1; }
.chart .bar { fill: var(--brand); fill-opacity: .75; rx: 2; }

/* a donut: one ring of stroked arcs, a hairline gap between them, the
   figure that matters in the middle. Slices carry the class of what they
   are, so "left, and it was ours" is the same red on every chart. */
.donut { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.donut svg { width: 200px; height: 200px; flex: none; overflow: visible; }
.donut .slice { fill: none; stroke-linecap: butt;
  transition: stroke-width .14s var(--ease); }
.donut .slice:hover { stroke-width: 30 !important; }
.donut .slice.kept { stroke: var(--ok); }
.donut .slice.ours { stroke: var(--warn); }
.donut .slice.theirs { stroke: var(--amber); }
.donut .slice.a { stroke: var(--brand); }
.donut .slice.b { stroke: var(--info); }
.donut .slice.c { stroke: var(--amber); }
.donut .slice.d { stroke: var(--brand-lift); }
.donut .slice.e { stroke: var(--violet); }
.donut .slice.f { stroke: var(--ink-3); }
.donut .ring-empty { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 6; }
.donut .share { fill: var(--accent-ink); font-size: 12px; font-weight: 700;
  pointer-events: none; }
.donut .big { fill: var(--ink); font-size: 30px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.donut .small { fill: var(--ink-3); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; }
.donut.empty .small { text-transform: none; letter-spacing: 0; font-size: 13px; }
.donut .legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2);
  font-size: 14px; min-width: 220px; flex: 1; }
.donut .legend li { display: grid; grid-template-columns: 12px 1fr auto 44px;
  align-items: center; gap: var(--sp-2); }
.donut .legend i { width: 12px; height: 12px; border-radius: 3px; }
.donut .legend .n { font-variant-numeric: tabular-nums; color: var(--ink);
  font-weight: 600; }
.donut .legend .pc { font-variant-numeric: tabular-nums; color: var(--ink-3);
  text-align: right; font-size: 13px; }
.donut .legend .kept { background: var(--ok); }
.donut .legend .ours { background: var(--warn); }
.donut .legend .theirs { background: var(--amber); }
.donut .legend .a { background: var(--brand); }
.donut .legend .b { background: var(--info); }
.donut .legend .c { background: var(--amber); }
.donut .legend .d { background: var(--brand-lift); }
.donut .legend .e { background: var(--violet); }
.donut .legend .f { background: var(--ink-3); }
@media (max-width: 720px) {
  .donut { justify-content: center; }
  .donut .legend { min-width: 0; flex-basis: 100%; }
}

/* small pies in a row: one per habit, the share kept in each */
.pies { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .pies { grid-template-columns: 1fr; } }
/* display:grid would otherwise beat the hidden attribute on a pie's legend */
.donut .legend[hidden] { display: none; }
.pie { text-align: center; padding: var(--sp-3); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); background: var(--surface-2); }
.pie .pie-title { font-weight: 620; font-size: 15px; }
.pie > .sub { margin: 0 0 var(--sp-2); font-size: 12px; }
.pie .donut { justify-content: center; gap: 0; }
.pie .donut svg { width: 130px; height: 130px; }
.pie .donut .big { font-size: 22px; }
.pie .pie-note { margin-top: var(--sp-2); font-size: 13px; color: var(--ink-2); }

/* stayed against left: one measure per row, two bars on one scale */
.cmp { display: grid; gap: var(--sp-3); }
.cmp .row { display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-3);
  align-items: center; }
.cmp .label { font-size: 14px; font-weight: 500; }
.cmp .label .sub { margin: 0; font-size: 12px; }
.cmp .pair { display: grid; gap: var(--sp-1); }
.cmp .line { display: grid; grid-template-columns: 52px 1fr 56px; gap: var(--sp-2);
  align-items: center; font-size: 12px; color: var(--ink-3); }
.cmp .line .track { height: 10px; background: var(--line-soft); border-radius: 999px;
  overflow: hidden; }
.cmp .line .fill { height: 100%; border-radius: 999px; background: var(--ok); }
.cmp .line.left .fill { background: var(--warn); }
.cmp .line .v { text-align: right; color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .cmp .row { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* what moves with the exam: a signed bar of r per measure */
.drivers { display: grid; gap: var(--sp-2); }
.drivers .row { display: grid; grid-template-columns: 180px 1fr auto; gap: var(--sp-3);
  align-items: center; font-size: 14px; }
.drivers .axis { position: relative; height: 12px; background: var(--line-soft);
  border-radius: 999px; }
.drivers .axis::before { content: ""; position: absolute; left: 50%; top: -3px;
  width: 1px; height: 18px; background: var(--line); }
.drivers .r { position: absolute; top: 0; height: 12px; background: var(--brand);
  opacity: .8; border-radius: 999px; }
.drivers .r.neg { background: var(--warn); }
.drivers .r.faint { opacity: .3; }
.drivers .verdict { font-size: 12px; white-space: nowrap; }
@media (max-width: 720px) {
  .drivers .row { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* the page in sentences */
/* the dots and the r values, folded away: the page says what they say */
details.stats summary { cursor: pointer; font-weight: 600; color: var(--brand); font-size: 14px; }
details.stats h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: 14px; }

ol.findings { margin: 0; padding-left: 22px; display: grid; gap: var(--sp-2);
  font-size: 15px; line-height: 1.5; }
ol.findings li::marker { color: var(--brand); font-weight: 600; }
.insight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.insight-grid .card { margin: 0; }
@media (max-width: 900px) { .insight-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------- demo mode

   A band across the top of every page while the demo copy is showing. It
   is loud on purpose: the one thing worse than no demo is a manager who
   cannot tell which class is real. */

.demobar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  background: var(--gold-soft); color: #5c4400;
  border-bottom: 2px solid #d8ae4a; font-size: 14px;
}
.demobar form { margin: 0; }
.demobar form:first-of-type { margin-left: auto; }
.demobar .tab { min-height: 30px; }
@media (max-width: 720px) {
  .demobar { padding: var(--sp-2) var(--sp-4); }
  .demobar form:first-of-type { margin-left: 0; }
}

/* The teacher's practice strip, on the practice student's page only: what
   this copy is, and the buttons that do the task on screen. */
.trybar {
  display: grid; gap: var(--sp-2);
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--gold-soft); color: var(--ink);
  border: 1px solid var(--gold); border-radius: 12px; font-size: 14px;
}
.trybar .try-do { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.trybar form { margin: 0; }
.trybar button, .trybar a.btn { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.try-heard summary { cursor: pointer; font-weight: 600; }
.try-heard ol { margin: var(--sp-2) 0 0; padding-left: 20px; display: grid; gap: var(--sp-2); }
.try-heard li { background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: var(--sp-2) var(--sp-3); overflow-wrap: anywhere; }

/* the teacher's page for it: a class to join, and every screen at once */
.try-classes { display: grid; margin-top: var(--sp-3); }
.try-class { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft); }
.try-class form, .try-now form { margin: 0; }
.try-now .row-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.try-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
  margin-bottom: var(--sp-4); }
.try-strip .btn { margin-left: auto; }
.try-screens { display: grid; gap: var(--sp-5) var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.try-screen { margin: 0; }
.try-screen figcaption { display: flex; justify-content: space-between; gap: var(--sp-2);
  font-size: 13px; margin-bottom: var(--sp-2); }
/* a phone of 390 x 812, drawn at 250 wide */
.try-phone { width: 250px; height: 520px; overflow: hidden; background: var(--bg);
  border: 1px solid var(--line); border-radius: 18px; }
.try-phone iframe { width: 390px; height: 812px; border: 0;
  transform: scale(.641); transform-origin: 0 0; }

/* the parents' channel: the period and the send button stay at the top, each
   class's post below it as it will appear */
.par-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4); }
.par-bar .tabs { margin: 0; }
.par-bar button { margin-left: auto; }
.par-class { display: grid; gap: var(--sp-3); }
.par-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2); }
.par-pick { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.par-pick input { width: 20px; height: 20px; }
.par-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3); align-items: start; }
/* a picture's top - the name and the three figures - and the whole of it on a tap */
.par-shot { display: grid; gap: var(--sp-1); color: var(--ink); font-size: 13px; }
.par-shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
  display: block; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--surface-2); }
.par-wide img { object-fit: contain; object-position: top; }   /* the league: all of it */
.par-shot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.par-shot:hover { text-decoration: none; }
.par-shot:hover img { border-color: var(--accent-line); }
.par-text summary { cursor: pointer; font-weight: 600; }
.par-msg { white-space: pre-wrap; background: var(--surface-2); border-radius: 12px;
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-2); font-size: 14px;
  overflow-wrap: anywhere; }
.par-steps { margin: var(--sp-2) 0 0; padding-left: 20px; display: grid; gap: var(--sp-1); }
.par-typed { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-2);
  margin-top: var(--sp-3); }
.par-typed .f { flex: 1 1 220px; margin: 0; }
.pill.ok { background: transparent; color: var(--ok); border-color: currentColor; }

/* the paper copy of a handout: two big buttons, done or not complete */
.tickpad { display: grid; gap: var(--sp-2); }
.tickbtns { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-2); }
.tickbtns button { min-height: 56px; font-size: 17px; }

/* Set homework: one form. The unit's three boxes sit in a tinted band, since
   they fill the rest in; the send options and the button close it. */
.setform { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
/* a grid lets a child grow to its widest content - a long list of lessons -
   past a phone's edge unless it is told it may be narrower */
.setform > *, .unitfill > * { min-width: 0; }
.setform .inline { margin: 0; }
.unitfill { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.setgo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4);
  padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
.setgo label { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: 14px; }
.setgo button { margin-left: auto; }

/* Set homework: the Destination units that are on the site, a tap away */
.destsite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.destsite .chip .sub { margin: 0; font-size: 12px; }

/* Set homework: the course's handouts, ticked as many as the homework has */
.hwshelves { display: grid; gap: var(--sp-2); margin-top: var(--sp-1); max-height: 320px; overflow-y: auto;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); }
.hwshelf { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.hwshelf legend { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 0; margin-bottom: var(--sp-1); }
.hwbook { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; font-weight: 400;
  color: var(--ink); padding: 4px 0; cursor: pointer; }
.hwbook input { width: 18px; height: 18px; flex: none; }
.hwbook em { color: var(--ink-3); font-style: normal; font-size: 12px; }

/* a student's page: which of the class's handouts they have to do */
.owed { display: grid; gap: var(--sp-3); }
.owed-since { margin: 0; align-items: flex-end; gap: var(--sp-2); }
.owed-since .f { margin: 0; }
.owed-act { margin: 0; }
.owed-act button { min-height: 32px; padding: 4px 12px; font-size: 13px; }

/* the Grade screen: a piece that came without its task, put with it here */
.attach { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2);
  border-color: var(--gold); background: var(--gold-soft); }
.attach .f { flex: 1 1 220px; margin: 0; }

/* ============================================================================
   The teacher's shell
   The sections down the left on a deep plum rail, the pages of the one you are
   in across the top of the work, the work beneath. The rail narrows to its
   icons and back (remembered); on a phone it slides in over the page. Two
   markers glide rather than jump: the soft pill behind the current section and
   the line under the current page. Nothing here moves <main> - a transform on
   it breaks fixed elements - only the rail, the stage's margin and the markers.
   ========================================================================== */

:root { --side-w: 248px; --side-rail: 76px; --top-h: 60px; }

body.shell { min-height: 100vh; }

.side {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
  width: var(--side-w);
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  color: rgba(255, 255, 255, .68);
  background:
    radial-gradient(130% 55% at 0% 0%, rgba(255, 211, 110, .09), transparent 62%),
    linear-gradient(180deg, #2c0839 0%, #1d0526 100%);
  transition: width .32s var(--ease), transform .34s var(--ease), box-shadow .34s var(--ease);
}
.stage { margin-left: var(--side-w); min-width: 0; transition: margin-left .32s var(--ease); }
html.rail .side { width: var(--side-rail); }
html.rail .stage { margin-left: var(--side-rail); }
/* the first frame is drawn where the rail was left, with nothing sliding in */
html.still *, html.still *::before, html.still *::after { transition: none !important; }

.side svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

/* name and the button that narrows the rail */
.side-head { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.side-brand { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center;
  flex: 1; min-width: 0; color: #fff; }
.side-brand:hover { text-decoration: none; }
.side-brand .mark { justify-self: center; display: block; width: 36px; height: 36px; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 213, 138, .32), 0 6px 18px rgba(0, 0, 0, .32); }
.side-brand .side-label { font-size: 14.5px; font-weight: 650; letter-spacing: -.015em; line-height: 1.15; }
.side-brand small { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .02em;
  color: rgba(255, 255, 255, .5); }
.side-toggle { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border-radius: 10px; background: none; color: rgba(255, 255, 255, .55); box-shadow: none;
  transition: background .18s var(--ease), color .18s var(--ease); }
.side-toggle:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.side-toggle svg:first-child path:last-child { transition: transform .32s var(--ease); transform-origin: 14.5px 12px; }
.side-toggle .side-x { display: none; }
html.rail .side-head { flex-direction: column; gap: var(--sp-2); }
html.rail .side-brand { flex: none; width: 52px; }
html.rail .side-toggle svg:first-child path:last-child { transform: scaleX(-1); }

/* a link: its icon in a fixed column, so narrowing only hides the words */
.side-nav, .side-foot { position: relative; display: flex; flex-direction: column; gap: 2px; }
.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--sp-3)); padding: 0 var(--sp-3); }
.side-nav::-webkit-scrollbar { display: none; }
html.rail .side-nav { overflow: visible; }
.side-group > a, .side-row > a, .side-foot a {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center;
  height: 44px; border-radius: 12px; color: inherit; font-size: 14.5px; font-weight: 520;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.side-group > a:hover, .side-row > a:hover, .side-foot a:hover { color: #fff; background: rgba(255, 255, 255, .06);
  text-decoration: none; }
.side-ico { justify-self: center; transition: color .18s var(--ease), transform .18s var(--ease); }
.side-nav a:active .side-ico, .side-foot a:active .side-ico { transform: scale(.92); }
.side-row { position: relative; display: flex; }
.side-row > a { flex: 1; min-width: 0; padding-right: 36px; }
.side-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip;
  transition: opacity .2s var(--ease); }
html.rail .side-label { opacity: 0; }

/* the current section: white words, a gold icon, a soft pill behind it */
.side-group > a.on, .side-row > a.on, .side-foot a.on { color: #fff; font-weight: 620;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.side-nav a.on .side-ico, .side-foot a.on .side-ico { color: #ffd36e; }

/* a section's pages: the arrow opens them, and they slide down under it */
.side-more { position: absolute; right: 5px; top: 7px; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0; border-radius: 8px; background: none; box-shadow: none;
  color: rgba(255, 255, 255, .45); transition: background .18s var(--ease), color .18s var(--ease); }
.side-more:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.side-more svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.side-group.open .side-more svg { transform: rotate(90deg); }
.side-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.side-group.open .side-sub { grid-template-rows: 1fr; }
.side-sub-in { position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  padding-left: 40px; }
.side-sub-in::before { content: ""; position: absolute; left: 25.5px; top: 4px; bottom: 10px; width: 1px;
  background: rgba(255, 255, 255, .1); }
.side-sub-head { display: none; }
.side-sub a { position: relative; display: flex; align-items: center; height: 34px; margin: 1px 0;
  padding: 0 var(--sp-3); border-radius: 9px; color: rgba(255, 255, 255, .58); font-size: 13.5px;
  font-weight: 500; white-space: nowrap; transition: color .18s var(--ease), background .18s var(--ease); }
.side-sub a:last-child { margin-bottom: var(--sp-2); }
.side-sub a:hover { color: #fff; background: rgba(255, 255, 255, .06); text-decoration: none; }
.side-sub a::before { content: ""; position: absolute; left: -17px; top: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: #ffd36e; opacity: 0; transform: translateY(-50%) scale(.3);
  transition: opacity .2s var(--ease), transform .25s var(--ease); }
.side-sub a.on { color: #fff; font-weight: 620; }
.side-sub a.on::before { opacity: 1; transform: translateY(-50%) scale(1); }

/* narrowed: no arrows and no lists - the pages come out beside the icon */
html.rail .side-more { display: none; }
html.rail .side-sub { display: none; }
@media (hover: hover) and (min-width: 861px) {
  html.rail .side-group[data-sec] { position: relative; }
  html.rail .side-sub { display: block; position: absolute; left: calc(100% + 14px); top: -8px; z-index: 50;
    min-width: 210px; opacity: 0; visibility: hidden; transform: translateX(-6px);
    transition: opacity .18s var(--ease), transform .2s var(--ease), visibility 0s linear .2s; }
  html.rail .side-sub::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 16px; }
  html.rail .side-group:hover .side-sub, html.rail .side-group:focus-within .side-sub {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .18s var(--ease), transform .2s var(--ease); }
  html.rail .side-sub-in { padding: var(--sp-2); border-radius: 14px; overflow: visible;
    background: #2d0c3a; border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 44px rgba(20, 6, 28, .38); }
  html.rail .side-sub-in::before, html.rail .side-sub a::before { display: none; }
  html.rail .side-sub-head { display: block; margin: 0; padding: var(--sp-1) var(--sp-3) var(--sp-2);
    font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: rgba(255, 255, 255, .45); }
  html.rail .side-sub a:last-child { margin-bottom: 0; }
  html.rail .side-sub a.on { background: rgba(255, 255, 255, .1); }
  /* where the pages come out, the name needs no tooltip of its own */
  html.rail .side-group[data-sec] > .side-row > a[data-tip]:hover::after { display: none; }
}

.side-foot { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 14px; }

/* the site's buttons are plum gradients; the rail's are quiet icons */
.side button, .topbar .side-open { border: 0; margin: 0; filter: none; }
.side button:hover, .topbar .side-open:hover { filter: none; }

/* narrowed: the name of what is under the pointer, beside it */
@media (hover: hover) {
  html.rail .side [data-tip]:hover::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 14px); top: 50%; z-index: 50;
    transform: translateY(-50%); padding: 6px 10px; border-radius: 8px; white-space: nowrap;
    background: #1c0f22; color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: 0;
    box-shadow: 0 8px 24px rgba(20, 6, 28, .28); pointer-events: none;
  }
}

/* the bar over the work: where you are, and the pages beside it */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--bg);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line-soft); }
.topbar-in { display: flex; align-items: center; gap: var(--sp-5); height: var(--top-h);
  max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-5); box-sizing: border-box; }
.topbar-title { flex: none; font-size: 17px; font-weight: 650; letter-spacing: -.02em; color: var(--ink);
  white-space: nowrap; }
.side-open { display: none; flex: none; place-items: center; width: 38px; height: 38px; padding: 0;
  margin-left: calc(-1 * var(--sp-2)); border-radius: 10px; background: none; box-shadow: none; color: var(--ink); }
.side-open svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.side-open:hover { background: var(--line-soft); }

/* ---- the music's switch, in the corner of the bar over the work
   A plum disc whose bars dance while the song plays and stand still while it
   waits for a first tap; a crossed-out speaker on grey when it is off. On a
   phone it is a pill with the song's name, at the end of the title's line; on
   a laptop, where the section's pages need the room, the disc alone, with the
   name in a bubble under it. */
.musicbtn { position: relative; order: 9; flex: none; display: inline-flex; align-items: center; gap: 9px;
  height: 40px; margin: 0 0 0 auto; padding: 3px; border-radius: 999px; border: 1px solid var(--line-soft);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(28, 15, 34, .05), 0 6px 18px -12px rgba(50, 10, 62, .35);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.musicbtn:hover { filter: none; border-color: var(--accent-line);
  box-shadow: 0 1px 2px rgba(28, 15, 34, .05), 0 10px 24px -12px rgba(50, 10, 62, .45); }
.musicbtn:active { transform: scale(.94); }
.musicbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mb-disc { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-3); transition: background .3s var(--ease), color .3s var(--ease); }
.musicbtn.on .mb-disc { color: #fff;
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 60%, var(--brand-lift) 100%);
  box-shadow: 0 4px 12px -4px rgba(112, 21, 137, .65); }
.mb-mute { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.musicbtn.on .mb-mute { display: none; }
.mb-eq { display: none; align-items: flex-end; gap: 2.5px; height: 14px; }
.musicbtn.on .mb-eq { display: flex; }
.mb-eq i { width: 3px; height: 100%; border-radius: 2px; background: #ffd36e; transform-origin: 50% 100%;
  transform: scaleY(.4); transition: transform .3s var(--ease); }
.mb-eq i:nth-child(2) { transform: scaleY(.75); }
.mb-eq i:nth-child(3) { transform: scaleY(.55); }
.mb-eq i:nth-child(4) { transform: scaleY(.3); }
.musicbtn.sounding .mb-eq i { animation: mb-bounce .9s ease-in-out -.2s infinite; }
.musicbtn.sounding .mb-eq i:nth-child(2) { animation-duration: 1.15s; animation-delay: -.6s; }
.musicbtn.sounding .mb-eq i:nth-child(3) { animation-duration: .8s; animation-delay: -.35s; }
.musicbtn.sounding .mb-eq i:nth-child(4) { animation-duration: 1.05s; animation-delay: -.8s; }
@keyframes mb-bounce { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
.mb-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.mb-name { overflow: hidden; font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap;
  text-overflow: ellipsis; }
.musicbtn:not(.on) .mb-name { color: var(--ink-3); font-weight: 560; }
.mb-state { overflow: hidden; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }

/* a laptop: the disc, and the name when the pointer is on it */
@media (min-width: 861px) {
  .musicbtn { padding: 3px; }
  .musicbtn .mb-text { position: absolute; right: -4px; top: calc(100% + 10px); z-index: 40; width: max-content;
    max-width: 260px; padding: 8px 12px; border-radius: 10px; background: #1c0f22; color: #fff;
    box-shadow: 0 10px 28px rgba(20, 6, 28, .3); opacity: 0; visibility: hidden; transform: translateY(-4px);
    pointer-events: none; transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; }
  .musicbtn .mb-text::before { content: ""; position: absolute; right: 18px; top: -5px; width: 10px; height: 10px;
    background: inherit; transform: rotate(45deg); border-radius: 2px; }
  .musicbtn:hover .mb-text, .musicbtn:focus-visible .mb-text { opacity: 1; visibility: visible; transform: none; }
  .musicbtn .mb-name, .musicbtn:not(.on) .mb-name { color: #fff; font-weight: 650; }
  .musicbtn .mb-state { color: rgba(255, 255, 255, .62); }
}
/* a phone: a pill with the name, at the end of the title's line */
@media (max-width: 860px) {
  .musicbtn { order: 2; max-width: 52vw; padding-right: 14px; }
  .musicbtn .mb-state { display: none; }
}
@media (max-width: 340px) {
  .musicbtn { padding-right: 3px; }
  .musicbtn .mb-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .musicbtn.sounding .mb-eq i { animation: none; }
}
@media (prefers-color-scheme: dark) {
  .musicbtn { border-color: var(--line); box-shadow: none; }
}

.toptabs { position: relative; display: flex; align-self: stretch; gap: 2px; min-width: 0;
  overflow-x: auto; scrollbar-width: none; }
/* the section's name, a hairline, then its pages */
@media (min-width: 861px) {
  .topbar-title + .toptabs { padding-left: var(--sp-3); margin-left: calc(-1 * var(--sp-2)); }
  .topbar-title + .toptabs::before { content: ""; position: sticky; left: 0; flex: none; align-self: center;
    width: 1px; height: 20px; margin-right: var(--sp-3); background: var(--line); }
}
.toptabs::-webkit-scrollbar { display: none; }
.toptabs a { display: flex; align-items: center; padding: 0 var(--sp-3); color: var(--ink-3);
  font-size: 14px; font-weight: 520; white-space: nowrap; transition: color .18s var(--ease); }
.toptabs a:hover { color: var(--ink); text-decoration: none; }
.toptabs a.on { color: var(--ink); font-weight: 620; box-shadow: inset 0 -2.5px 0 var(--accent); }
.toptabs.glides a.on { box-shadow: none; }
.tab-glide { position: absolute; left: 0; bottom: 0; width: 0; height: 2.5px; border-radius: 2px 2px 0 0;
  background: var(--accent); pointer-events: none;
  transition: transform .36s var(--ease), width .36s var(--ease); }
/* another section's pages arrive, they do not blink in */
.topbar-in.fresh .toptabs, .topbar-in.fresh .topbar-title { animation: tabs-in .3s var(--ease) both; }
@keyframes tabs-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* the grading panel stays in reach under the bar, not under the old header */
.shell .queue .panel { top: calc(var(--top-h) + var(--sp-4)); max-height: calc(100vh - var(--top-h) - 32px); }

/* a phone: the rail is a drawer that slides over the page */
@media (max-width: 860px) {
  .side, html.rail .side { width: min(84vw, 300px); transform: translateX(-102%); }
  html.drawer .side { transform: none; box-shadow: 0 0 70px rgba(20, 6, 28, .45); }
  .stage, html.rail .stage { margin-left: 0; }
  html.rail .side-label { opacity: 1; }
  html.rail .side-head { flex-direction: row; }
  html.rail .side-brand { flex: 1; width: auto; }
  .side-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(20, 6, 28, .42);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
  html.drawer .side-scrim { opacity: 1; pointer-events: auto; }
  html.drawer { overflow: hidden; }
  .side-open { display: grid; }
  .side-toggle svg:first-child { display: none; }
  .side-toggle .side-x { display: block; }
  .topbar-in { flex-wrap: wrap; height: auto; gap: 0 var(--sp-2); padding: 0 var(--sp-4); }
  .topbar-title { display: flex; align-items: center; height: 52px; }
  .toptabs { order: 3; flex-basis: 100%; height: 44px; margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-2);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--sp-5)), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - var(--sp-5)), transparent); }
}
@media (min-width: 861px) { .side-scrim { display: none; } }

/* ---- the students' page in the same frame
   A laptop: the rail with the student's name at its foot, the section's pages
   across the top. A phone: the bar of five along the bottom, in the rail's
   plum, and the pages across the top - no drawer, a thumb finds the bar. */
.side .badge { box-shadow: 0 0 0 2px #25062f; }
.side-group > a .badge, .side-row > a .badge { position: absolute; right: 42px; top: 50%;
  transform: translateY(-50%); }
.side-group > a .badge { right: 12px; }
html.rail .side-group > a .badge, html.rail .side-row > a .badge { right: auto; left: 30px; top: 6px;
  transform: none; }
.side-sub a .badge { margin-left: var(--sp-2); }
.toptabs a .badge { margin-left: 6px; }
.side-who { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; min-height: 52px;
  margin-bottom: var(--sp-1); color: #fff; }
.side-who .avatar { justify-self: center; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #9049a3, #701589); box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); }
.side-who b { display: block; font-size: 14px; font-weight: 620; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.side-who small { display: block; font-size: 12px; color: rgba(255, 255, 255, .55); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
html.rail .side-who { position: relative; }

/* the column the students' pages are drawn in, and the bar over it, line up */
.student .topbar-in { max-width: 600px; }
.student:has(main.portal .booksheet) .topbar-in { max-width: 940px; }
.student:has(main.portal .booksheet.handout) .topbar-in,
.student:has(main.portal .hx-hero) .topbar-in { max-width: 980px; }

@media (min-width: 861px) {
  .student .pnav, .student main .whoami { display: none; }
}
@media (max-width: 860px) {
  .student .side-open { display: none; }
  .student .pnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; gap: var(--sp-1);
    border: 0; border-radius: 0;
    padding: 6px var(--sp-2) calc(6px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #2c0839 0%, #1d0526 100%);
    box-shadow: 0 -10px 30px rgba(20, 6, 28, .16);
  }
  .student .pnav a { color: rgba(255, 255, 255, .62); border-radius: 12px; }
  .student .pnav a:hover { color: #fff; }
  .student .pnav a.on { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: none; }
  .student .pnav a.on svg { color: #ffd36e; }
  .student .pnav a .badge { box-shadow: 0 0 0 2px #25062f; }
  .student main.portal { padding-bottom: calc(var(--sp-7) + var(--pnav-h) + env(safe-area-inset-bottom)); }
  .student .topbar-in { max-width: none; }
}

/* A phone. Who this is, in one slim line rather than a block above the work
   on every page - and on a handout or a test, not at all: the work comes
   first there, and the bar of five steps aside too (the pages across the top
   still lead out), which gives the paper the screen, keeps Check at the
   bottom edge, and keeps a thumb from leaving a timed test by accident. */
@media (max-width: 860px) {
  .student main .whoami { gap: var(--sp-2); margin-bottom: var(--sp-4); }
  .student main .whoami .avatar { width: 32px; height: 32px; font-size: 13px; }
  .student main .whoami .name { font-size: 15px; font-weight: 650; line-height: 1.25; }
  .student main .whoami .sub { margin: 0; font-size: 12.5px; line-height: 1.3; }
  .student:has(main.portal .booksheet) main .whoami { display: none; }
  .student:has(main.portal .booksheet) .pnav { display: none; }
  .student:has(main.portal .booksheet) main.portal { padding-bottom: calc(var(--sp-7) + env(safe-area-inset-bottom)); }
  .student:has(main.portal .booksheet) .savebar { bottom: env(safe-area-inset-bottom); }
}

@media (prefers-color-scheme: dark) {
  .side { background: radial-gradient(130% 55% at 0% 0%, rgba(255, 211, 110, .06), transparent 62%),
                      linear-gradient(180deg, #1f0a29 0%, #130618 100%);
    box-shadow: inset -1px 0 0 var(--line); }
  .side-brand .mark { color: #1f0a29; }
}
@media (prefers-reduced-motion: reduce) {
  .side, .stage, .side-sub, .side-more svg, .tab-glide, .side-label, .side-toggle svg path { transition: none !important; }
  .topbar-in.fresh .toptabs, .topbar-in.fresh .topbar-title { animation: none; }
}
@media print {
  .side, .side-scrim, .topbar { display: none !important; }
  .stage { margin: 0 !important; }
}

/* ============================================================================
   The work
   One language for every page beside the rail: a title with room around it,
   sections headed with a fine rule running after the name, white cards with
   soft depth instead of hard outlines, figures with a small drawing of what
   they count, tables with air, and buttons of one height. The rail is plum;
   the page stays light and calm, and the plum is kept for what is chosen.
   ========================================================================== */

:root {
  --card-line: #e9e2ef;
  --card-shadow: 0 1px 2px rgba(28, 15, 34, .04), 0 10px 28px -14px rgba(50, 10, 62, .16);
  --card-shadow-up: 0 2px 4px rgba(28, 15, 34, .05), 0 18px 40px -14px rgba(50, 10, 62, .26);
  --r-card: 16px;
}
@media (prefers-color-scheme: dark) {
  :root { --card-line: var(--line); --card-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
          --card-shadow-up: 0 12px 32px rgba(0, 0, 0, .45); }
}

.stage main { padding-top: 36px; }

/* a page's title, and the line that says what the page is for */
main > h1 { font-size: 30px; font-weight: 720; letter-spacing: -.032em; line-height: 1.15;
  margin: 0 0 6px; text-wrap: balance; }
main > h1 + p.sub { font-size: 15px; line-height: 1.55; margin: 0 0 28px; max-width: 72ch; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-5);
  flex-wrap: wrap; margin: 0 0 28px; }
.pagehead h1 { font-size: 30px; font-weight: 720; letter-spacing: -.032em; line-height: 1.15; margin: 0; }
.pagehead .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.eyebrow { margin: 0 0 6px; font-size: 12.5px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand); }

/* a section of the page: its name, then a hairline to the edge */
main > h2 { display: flex; align-items: center; gap: var(--sp-3); font-size: 16px; font-weight: 660;
  letter-spacing: -.015em; margin: 40px 0 14px; color: var(--ink); }
main > h2::after { content: ""; flex: 1; min-width: var(--sp-5); height: 1px; background: var(--line-soft); }
main > h2:first-of-type { margin-top: 32px; }
main > h1 + h2, main > .pagehead + h2, main > h1 + p.sub + h2 { margin-top: 8px; }

/* cards: white, soft depth, no hard outline */
.card, .tablewrap, .grid .stat, .todo-card {
  border-color: var(--card-line); box-shadow: var(--card-shadow); }
.card { border-radius: var(--r-card); padding: 20px 22px; margin-bottom: 18px; }
.card.calm { background: color-mix(in srgb, var(--ok) 7%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 22%, var(--card-line)); }
a.card { display: block; color: inherit; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
a.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--card-shadow-up); }

/* the figures: what they count, drawn small in a tinted square */
.grid { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 20px; }
.grid .stat { position: relative; border-radius: var(--r-card); padding: 18px 20px; background: var(--surface);
  --tone: #701589; }
.grid .stat .k { padding-right: 46px; font-size: 12px; font-weight: 640; letter-spacing: .06em; color: var(--ink-3); }
.grid .stat .v { margin-top: 12px; font-size: 34px; font-weight: 720; letter-spacing: -.035em; color: var(--ink); }
.grid .stat .note { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.look-ico { position: absolute; top: 15px; right: 15px; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 12px; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.look-ico svg, .t-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.stat.t-plum { --tone: #701589; } .stat.t-blue { --tone: #0b69ad; } .stat.t-green { --tone: #0b8a4c; }
.stat.t-amber { --tone: #b07400; } .stat.t-rose { --tone: #c02a3c; }
.grid .stat.busy { background: var(--surface); border-color: color-mix(in srgb, #c02a3c 30%, var(--card-line)); }
.grid .stat.busy .v { color: #c02a3c; }
@media (prefers-color-scheme: dark) {
  .stat.t-plum { --tone: #d9a2ec; } .stat.t-blue { --tone: #6fb6f0; } .stat.t-green { --tone: #4fd494; }
  .stat.t-amber { --tone: #f2c24e; } .stat.t-rose { --tone: #ff8a8f; }
  .grid .stat.busy .v { color: #ff8a8f; }
}

/* today's work: a card each, a drawing, the count, the way in */
.todos { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 8px; }
.todo-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) 18px; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--card-line);
  border-left-width: 1px; color: var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.todo-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-up); border-color: var(--card-line); }
.t-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--accent-soft); color: var(--brand); }
.t-text { display: block; min-width: 0; }
.todo-card .todo-head { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.todo-card .sub { display: block; margin: 2px 0 0; font-size: 13.5px; color: var(--ink-3); }
.t-go { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .2s var(--ease), stroke .2s var(--ease); }
.todo-card:hover .t-go { transform: translateX(3px); stroke: var(--brand); }
.todo-card.urgent { background: var(--surface); border-color: var(--card-line); }
.todo-card.urgent .t-ico { background: var(--warn-soft); color: #c02a3c; }
.todo-card.urgent .todo-head { color: #c02a3c; }
.todo-card.urgent .sub { color: var(--ink-3); }
@media (prefers-color-scheme: dark) {
  .todo-card.urgent .todo-head, .todo-card.urgent .t-ico { color: #ff8a8f; }
  .todo-card.urgent .sub { color: var(--ink-3); }
  .t-ico { color: var(--brand-lift); }
}

/* tables: air in the rows, a quiet head, the row under the pointer lit */
.tablewrap { border-radius: var(--r-card); }
.tablewrap th { padding: 12px 18px; font-size: 11.5px; font-weight: 650; letter-spacing: .07em;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); border-bottom-color: var(--card-line); }
.tablewrap td { padding: 14px 18px; }
.tablewrap tr:hover td { background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }

/* buttons of one height; a text action is a word, not an underlined link */
button, a.btn { padding: 9px 16px; line-height: 20px; border-radius: 10px; }
a.btn.ghost, button.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
a.btn.ghost:hover, button.ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--accent-line); }
.linky { padding: 2px 4px; margin: 0 -4px; border-radius: 6px; text-decoration: none; font-weight: 600; line-height: inherit; }
.linky:hover { background: var(--accent-soft); text-decoration: none; }
.linky.danger { color: var(--warn); }
.linky.danger:hover { background: var(--warn-soft); }

/* a row's actions stay a table cell - a flex box there broke the row's lines */
td.rowacts { display: table-cell; text-align: right; white-space: nowrap; }
td.rowacts > * { display: inline-block; vertical-align: middle; margin: 0 0 0 var(--sp-3); }
td.rowacts > :first-child { margin-left: 0; }

/* fields and switches */
input, select, textarea { border-radius: 10px; }
.tabs { border-radius: 12px; padding: 4px; border-color: var(--card-line);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.tabs .tab { border-radius: 9px; padding: 6px 12px; }
.flash { border-radius: 12px; }

@media (max-width: 720px) {
  .stage main { padding-top: var(--sp-5); }
  main > h1, .pagehead h1 { font-size: 25px; }
  .pagehead { margin-bottom: var(--sp-5); }
  /* two figures a row on a phone, not one tall column */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid .stat { padding: 14px 15px; }
  .grid .stat .k { padding-right: 36px; font-size: 11px; }
  .grid .stat .v { margin-top: 10px; font-size: 26px; }
  /* an odd one out at the end takes the whole row, not half of it */
  .grid > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid .stat .note { font-size: 12px; }
  .look-ico { top: 11px; right: 11px; width: 32px; height: 32px; border-radius: 10px; }
  .look-ico svg { width: 17px; height: 17px; }
}

/* ============================================================================
   The homework pages: Grade, Speaking, Homework, Set homework
   The class pages' language here too: a head that says what the page is for,
   cards with soft depth in a class's own colour, rows a phone reads without
   sliding, and a delete that asks twice in the button, never in a dialog.
   Names: gq- grading, gg- a whole task at once, spk- speaking, hl- the list
   of homework, hd- one homework, as- setting it.
   ========================================================================== */

/* ---- Grade: what to mark - a card a class, its lessons as rows inside */
.qtiles { margin-bottom: 4px; }
.gq-picker { margin: 0 0 30px; }
.gq-picker .crumbs { margin: 18px 0 0; }
.gq-h, .gg-h, .hd-h { display: flex; align-items: center; gap: 12px; margin: 28px 0 4px; font-size: 16px; font-weight: 660;
  letter-spacing: -.015em; color: var(--ink); }
.gq-h::after, .gg-h::after, .hd-h::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: var(--line-soft); }
.gq-lead { margin: 0 0 14px; font-size: 14px; }
.gq-classes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.gq-classes.one { grid-template-columns: minmax(0, 820px); }
.gq-class { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface);
  border: 1px solid var(--card-line); border-radius: 18px; box-shadow: var(--card-shadow); }
.gq-class::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 35%, transparent)); }
.gq-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 10px; }
.gq-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gq-id b { font-size: 20px; font-weight: 760; letter-spacing: -.025em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.gq-id small { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gq-count { display: flex; flex-direction: column; align-items: flex-end; }
.gq-count b { font-size: 27px; font-weight: 760; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tone); }
.gq-count small { margin-top: 4px; font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.gq-sets { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 10px; }
a.gq-set { display: grid; grid-template-columns: minmax(0, 1fr) 64px 26px auto; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 12px; color: var(--ink); transition: background .15s var(--ease); }
a.gq-set:hover { text-decoration: none; background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
a.gq-set.on { background: var(--accent-soft); }
.gq-when { display: flex; flex-direction: column; min-width: 0; }
.gq-when b { font-size: 14.5px; font-weight: 650; }
.gq-when small { margin-top: 1px; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gq-bar { display: block; height: 7px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.gq-bar i { display: block; height: 100%; border-radius: 99px; background: var(--tone); }
.gq-n { font-size: 16px; font-weight: 740; text-align: right; font-variant-numeric: tabular-nums; }
.gq-go { display: inline-flex; align-items: center; gap: 1px; padding: 6px 7px 6px 12px; border-radius: 9px; font-size: 13px;
  font-weight: 650; white-space: nowrap; color: var(--brand); background: var(--accent-soft);
  transition: background .15s var(--ease), color .15s var(--ease); }
a.gq-set:hover .gq-go, a.gq-set.on .gq-go { color: #fff; background: var(--brand); }
.go-ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .2s var(--ease); }
a.gq-set:hover .go-ico, a.gq-all:hover .go-ico, a.hl-open:hover .go-ico { transform: translateX(2px); }
a.gq-more { align-self: flex-start; margin: -4px 0 10px 18px; font-size: 13px; font-weight: 600; }
a.gq-all { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 12px 16px 12px 18px;
  border-top: 1px solid var(--line-soft); font-size: 13.5px; font-weight: 650; color: var(--ink-2);
  background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); transition: color .15s var(--ease); }
a.gq-all:hover { color: var(--brand); text-decoration: none; }
a.gq-all span { margin-left: auto; display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--line-soft); }

/* a set finished, or nothing at all to mark */
.gq-done { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 18px; padding: 15px 20px 15px 16px;
  border-radius: var(--r-card); border: 1px solid var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); }
.gq-done.calm { border-color: color-mix(in srgb, var(--ok) 30%, var(--card-line));
  background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.gq-done p { margin: 7px 0 0; font-size: 15px; line-height: 1.55; }
.gq-done-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 9px; border-radius: 12px;
  color: #0b8a4c; background: var(--surface); box-shadow: var(--card-shadow); }
.gq-done-ico svg, .gq-strip-ico svg, .undo-ico svg, .gq-ph-ico svg, .spk-ico svg, .hl-ico svg, .as-step-ico svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* the strip over the work: which set, how far, the ways out, the last mark */
.setbar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 16px;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow); }
.gq-strip-ico { display: grid; place-items: center; width: 34px; height: 34px; padding: 8px; border-radius: 11px; flex: none;
  color: var(--brand); background: var(--accent-soft); }
.setbar .what { min-width: 0; }
.setbar .what strong { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.setbar .what .sub { margin: 1px 0 0; font-size: 13px; }
.setbar .prog { flex: 1 1 150px; max-width: 260px; }
.setbar .prog .track { height: 7px; }
.setbar .acts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-left: auto; font-size: 13px; }
a.gq-out { padding: 7px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
a.gq-out:hover { color: var(--brand); background: var(--accent-soft); text-decoration: none; }
.setbar .undo { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin: 0; padding: 9px 2px 0;
  border-top: 1px dashed var(--line-soft); border-radius: 0; background: none; font-size: 13px; color: var(--ink-3); }
.setbar .undo strong { color: var(--ink); }
.undo-ico { display: inline-grid; width: 16px; height: 16px; color: var(--ink-3); }

/* who else is in the set: a button that drops the list open */
details.queuelist { position: relative; margin: 0; }
details.queuelist > summary { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 9px; font-size: 13px;
  font-weight: 650; color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
details.queuelist:not(.hs-unit):not(.hb-level) > summary::before { content: none; display: none; }
details.queuelist > summary::after { content: ""; width: 14px; height: 14px; margin-left: 6px; background: currentColor; opacity: .6;
  -webkit-mask: var(--chev-down) center / contain no-repeat; mask: var(--chev-down) center / contain no-repeat;
  transition: transform .2s var(--ease); }
details.queuelist[open] > summary::after { transform: rotate(180deg); }
details.queuelist > summary:hover, details.queuelist[open] > summary { border-color: var(--accent-line); color: var(--brand); }
.ql-hint { display: none; }
details.queuelist > ul { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: min(380px, 84vw);
  max-height: min(60vh, 520px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface);
  border: 1px solid var(--card-line); border-radius: 14px; box-shadow: var(--card-shadow-up); }
details.queuelist li { display: block; padding: 0; border: 0; }
details.queuelist li a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--ink); }
details.queuelist li a:hover { text-decoration: none; background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
details.queuelist li.on a { background: var(--accent-soft); }
details.queuelist .lg-ava { width: 30px; height: 30px; flex: none; font-size: 11.5px; }
details.queuelist .pill { padding: 1px 8px; font-size: 11px; }
.ql-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ql-who b { font-size: 14px; font-weight: 650; }
.ql-who small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the papers: what they are over them, on a soft desk */
.queue { gap: 14px; }
.shots { padding: 10px; border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow);
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.shots img { border-radius: 10px; box-shadow: 0 1px 3px rgba(28, 15, 34, .1); }
.gq-paperhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px;
  padding: 3px 6px 11px; font-size: 13px; color: var(--ink-3); }
.gq-paperhead > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.gq-paperhead b { color: var(--ink); font-weight: 650; }
.gq-ph-ico { display: inline-grid; width: 18px; height: 18px; color: var(--brand); }
.gq-zoom { font-size: 12px; }

/* the marking: who, then the mark, then what to say */
.queue .panel .card { margin-bottom: 14px; }
.gq-who { padding: 16px 18px; }
.gq-who-top { display: flex; align-items: center; gap: 12px; }
.gq-who .lg-ava { width: 44px; height: 44px; flex: none; font-size: 15px; }
.gq-who-id { display: flex; flex-direction: column; min-width: 0; }
a.gq-name { font-size: 17px; font-weight: 720; letter-spacing: -.015em; color: var(--ink); }
a.gq-name:hover { color: var(--brand); text-decoration: none; }
.gq-who-id small { margin-top: 1px; font-size: 13px; color: var(--ink-3); }
.gq-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gq-pills .pill { padding: 1px 9px; font-size: 12px; }
.gq-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft); }
.gq-figs > div { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 1px solid var(--line-soft); }
.gq-figs > div:first-child { padding-left: 0; border-left: 0; }
.gq-figs small { font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.gq-figs b { font-size: 18px; font-weight: 730; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gq-figs b.bad { color: #c02a3c; }
.gq-label { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.gq-label span { margin-left: 4px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.gq-form { padding: 18px; }
.gq-form .scorepad { margin: 8px 0 0; }
.gq-form .scorepad.halves { margin: 6px 0 18px; }
.gq-form .criteria { margin: 8px 0 14px; }
.gq-form .tags { margin: 8px 0 16px; }
.gq-form .tags label { font-size: 12.5px; }
.gq-note { margin: 0; font-size: 13.5px; font-weight: 600; }
.gq-note textarea { margin-top: 6px; }
/* Claude's draft on the marking page: a suggestion, set apart from the form */
.gq-draft { border-left: 3px solid var(--accent); }
.gq-draft-mark { margin: 6px 0 4px; font-size: 14px; }
.gq-draft-tags { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gq-draft-note { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft);
  white-space: pre-wrap; font-size: 13.5px; }
.gq-draft-more { margin: 6px 0; font-size: 13px; }
.gq-draft-more summary { cursor: pointer; color: var(--ink-2); }
.gq-draft-text { margin-top: 6px; white-space: pre-wrap; color: var(--ink-2); }
.gq-draft button { margin-top: 6px; }
.gq-opt { margin-left: 4px; font-weight: 500; color: var(--ink-3); }
.gq-form .chips .chip { font-size: 12px; }
.gq-save { display: flex; gap: 8px; margin-top: 16px; }
.gq-save #save { flex: 1; padding-top: 12px; padding-bottom: 12px; font-size: 15px; }
.gq-save button.ghost { padding-left: 18px; padding-right: 18px; }
.gq-keys { margin: 10px 0 0; font-size: 12px; line-height: 2; color: var(--ink-3); }
.gq-keys .kbd { padding: 0 5px; font-size: 11px; }
.prev .prevhead { margin: 6px 0; }
details.gq-notes > summary { font-size: 14px; }
@media (prefers-color-scheme: dark) {
  .gq-done-ico { color: #4fd494; } .gq-figs b.bad { color: #ff8a8f; }
}

/* ---- Grade a whole task: the tasks waiting, a line a class, then the cards */
.gg-sets { margin: 0 0 6px; padding: 4px 0; background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.gg-class { display: grid; grid-template-columns: 34px 52px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 16px; }
.gg-class + .gg-class { border-top: 1px solid var(--line-soft); }
.gg-class > b { font-size: 15px; font-weight: 720; font-variant-numeric: tabular-nums; }
.gg-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
a.gg-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 5px 5px 12px; border-radius: 99px;
  font-size: 13px; font-weight: 560; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease); }
a.gg-chip span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px;
  font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--line-soft); }
a.gg-chip:hover { color: var(--brand); border-color: var(--accent-line); text-decoration: none; }
a.gg-chip.on { color: #fff; background: var(--brand); border-color: var(--brand); }
a.gg-chip.on span { color: #fff; background: rgba(255, 255, 255, .22); }
.gg-h .h-n, .hd-h .h-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: -4px;
  border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--line-soft); }
.gradegrid { gap: 16px; margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gradecard { padding: 14px; border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.gchead { gap: 10px; margin-bottom: 10px; }
.gchead .lg-ava { width: 34px; height: 34px; flex: none; font-size: 12.5px; }
.gc-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gc-who strong { font-size: 14.5px; font-weight: 680; }
.gc-who small { font-size: 12px; color: var(--ink-3); }
.gcshots img { border-radius: 8px; border-color: var(--card-line); }
.gcshots:has(.written) { display: block; }
.gradecard .written.short { max-height: 180px; overflow: hidden; font-size: 14px; line-height: 1.6;
  -webkit-mask: linear-gradient(#000 75%, transparent); mask: linear-gradient(#000 75%, transparent); }
.markbar.gg-bar { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 18px; padding: 10px 10px 10px 18px; border: 1px solid var(--card-line); border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow-up); }
.markbar.gg-bar .sub { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }

@media (max-width: 720px) {
  .gq-classes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gq-classes.one { grid-template-columns: minmax(0, 1fr); }
  a.gq-set { grid-template-columns: minmax(0, 1fr) 26px auto; gap: 10px; }
  .gq-bar { display: none; }
  .setbar { gap: 10px 12px; padding: 12px; }
  .setbar .prog { flex-basis: 100%; max-width: none; order: 3; }
  .setbar .acts { order: 4; width: 100%; margin-left: 0; }
  .setbar .undo { order: 5; }
  details.queuelist > ul { left: 0; right: auto; }
  .gq-figs b { font-size: 16px; }
  .gg-class { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 12px; padding: 10px 12px; }
  .gg-chips { grid-column: 1 / -1; }
  .gradegrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Speaking: a card a recording, under the day it came */
.spk-say { margin: -16px 0 18px; font-size: 14px; max-width: 80ch; }
.toolbar.spk-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
.spk-bar .tabs { margin: 0; }
.sp-list { display: block; }
.spk-day { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font-size: 15px; font-weight: 660;
  letter-spacing: -.01em; color: var(--ink); }
.spk-day::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.spk-day .h-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px;
  font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--line-soft); }
.card.spk-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; gap: 12px 26px;
  margin: 0 0 12px; padding: 16px 18px; transition: border-color .2s var(--ease), background .2s var(--ease); }
.spk-left { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.spk-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.spk-who .lg-ava { width: 38px; height: 38px; flex: none; font-size: 13.5px; }
.spk-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.spk-id a { color: var(--ink); }
.spk-id a:hover { color: var(--brand); text-decoration: none; }
.spk-id b { font-size: 15px; font-weight: 700; }
.spk-id small { margin-top: 1px; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spk-when { flex: none; padding: 3px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 650; color: var(--ink-3);
  background: var(--surface-2); font-variant-numeric: tabular-nums; }
.spk-card .sp-play { padding: 4px 12px 4px 4px; border-radius: 99px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.spk-card .sp-play audio { height: 38px; }
.spk-card .sp-len { min-width: 34px; text-align: right; color: var(--brand); }
.spk-card .sp-form textarea { min-height: 62px; resize: vertical; }
.spk-card .sp-acts button { min-height: 38px; }
.spk-card .rec-say:empty { display: none; }
.spk-state { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: #0b8a4c; }
.spk-ico { display: inline-grid; width: 17px; height: 17px; flex: none; }
.spk-card.done { border-color: color-mix(in srgb, var(--ok) 30%, var(--card-line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 6%, var(--surface)), var(--surface) 55%); }
.spk-card.done .spk-state { display: inline-flex; }
.spk-card .sp-fbv { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line-soft); }
.spk-mine { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12.5px; font-weight: 650; color: var(--brand); }
.spk-card.cant { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; border-style: dashed; box-shadow: none; }
.spk-card.cant .spk-who { flex: 0 1 380px; }
.spk-card.cant .sp-cant { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 320px; margin: 0; font-size: 13.5px;
  color: var(--ink-2); }
.spk-card.cant .spk-ico { color: #b07400; margin-top: 1px; }
@media (prefers-color-scheme: dark) { .spk-state { color: #4fd494; } }
@media (max-width: 860px) {
  .card.spk-card { grid-template-columns: minmax(0, 1fr); padding: 14px; }
}
@media (max-width: 720px) {
  .spk-say { margin-top: -10px; font-size: 13.5px; }
  .spk-bar .tabs { display: flex; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .spk-bar .tabs::-webkit-scrollbar { display: none; }
  .spk-bar .tabs .tab { flex: 1 0 auto; justify-content: center; text-align: center; white-space: nowrap; }
  .spk-card .sp-acts button { flex: 1 1 auto; }
}

/* ---- Homework: a row a set (a class and a deadline), by where it stands */
.toolbar.hl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 4px; }
.hl-bar .tabs { margin: 0; }
.hl-bar .tab { display: inline-flex; align-items: center; gap: 7px; }
@media (min-width: 721px) {
  .hl-list summary.ch-row { grid-template-columns: 38px minmax(0, 1fr) minmax(190px, 240px) 150px 18px; }
}
.hl-list .lvl-badge.sm { width: 38px; height: 38px; border-radius: 12px; }
.hl-when { font-weight: 560; color: var(--ink-2); }
.hl-list .ch-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-in { display: grid; grid-template-columns: minmax(36px, 1fr) auto; align-items: center; gap: 3px 10px; font-size: 13px;
  color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hl-in b { color: var(--ink); font-weight: 700; }
.hl-in small { grid-column: 2; justify-self: end; font-size: 12px; font-weight: 600; }
.hl-in small.bad { color: #c02a3c; }
.hl-in small.good { color: #0b8a4c; }
.hl-in.draft { grid-template-columns: auto; justify-items: start; }
.hl-in.draft small { grid-column: 1; justify-self: start; font-weight: 500; color: var(--ink-3); }
.hl-in.draft > span { font-weight: 650; color: var(--ink-2); }
.hl-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.hl-pills .pill { white-space: nowrap; }
.hl-body { gap: 12px; }
.hl-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hl-items li { padding: 4px 10px; border-radius: 8px; font-size: 13px; color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line-soft); }
.hl-who { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.hl-who b { margin-right: 2px; font-weight: 650; color: #c02a3c; }
.hl-who.good b { color: #0b8a4c; }
.hl-who a { font-weight: 560; color: var(--ink); }
.hl-who a:hover { color: var(--brand); }
.hl-closeall { display: flex; align-items: center; gap: 12px; margin: -2px 0 12px; padding: 10px 12px 10px 14px;
  border-radius: 12px; border: 1px dashed color-mix(in srgb, #b07400 40%, var(--card-line));
  background: color-mix(in srgb, var(--gold-soft) 60%, transparent); font-size: 13.5px; color: var(--ink-2); }
.hl-closeall > span:not(.hl-ico) { flex: 1; min-width: 0; }
.hl-ico { display: inline-grid; width: 18px; height: 18px; flex: none; color: #b07400; }
.hl-closeall button { flex: none; }
.hl-closeall button.armed { color: #fff; background: #b07400; border-color: #b07400; }
@media (prefers-color-scheme: dark) {
  .hl-in small.bad, .hl-who b { color: #ff8a8f; } .hl-in small.good, .hl-who.good b { color: #4fd494; }
}

/* ---- One homework: who, then item by item, then everything to change it */
.hd-head { margin-bottom: 18px; }
.hd-head h1 { font-size: 27px; }
.hd-head h1 .pill { vertical-align: 4px; font-size: 12.5px; letter-spacing: 0; }
.hd-tiles .stat .v small { margin-left: 2px; font-size: 18px; font-weight: 600; color: var(--ink-3); }
.who.hd-cols { gap: 16px; margin-bottom: 8px; }
.who.hd-cols .card { position: relative; overflow: hidden; padding: 18px 16px 8px; border: 1px solid var(--card-line);
  border-left-width: 1px; background: var(--surface); --tone: #c02a3c; }
.who.hd-cols .card.mid { --tone: #b07400; }
.who.hd-cols .card.good { --tone: #0b8a4c; }
.who.hd-cols .card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 30%, transparent)); }
.who.hd-cols h3 { align-items: center; margin-bottom: 6px; font-size: 14.5px; font-weight: 680; }
.who.hd-cols .count { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: 99px;
  font-size: 13.5px; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.who.hd-cols ul { max-height: 440px; overflow-y: auto; }
.who.hd-cols li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.who.hd-cols li.sub { color: var(--ink-3); }
.who.hd-cols .lg-ava { width: 28px; height: 28px; flex: none; font-size: 11px; }
.hd-who { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
.hd-who a { font-weight: 600; }
.hd-who .sub { margin-top: 2px; line-height: 1.4; }
.hd-table th .hd-th { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 170px;
  white-space: normal; font-size: 11.5px; line-height: 1.35; letter-spacing: .02em; text-transform: none; }
.hd-table th { vertical-align: bottom; }
a.hd-name { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; white-space: nowrap; }
a.hd-name:hover { color: var(--brand); text-decoration: none; }
.hd-name .lg-ava { width: 28px; height: 28px; flex: none; font-size: 11px; }
.hd-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 800;
  color: #0b8a4c; background: color-mix(in srgb, var(--ok) 15%, transparent); }
.hd-table td.tick > span.mute:only-child { display: inline-block; width: 22px; height: 22px; border-radius: 50%; font-size: 0;
  vertical-align: middle; border: 1.5px dashed var(--line); }
.hd-manage { padding: 4px 20px; }
.hd-row { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); align-items: center; gap: 12px 26px; margin: 0;
  padding: 16px 0; border-top: 1px solid var(--line-soft); }
.hd-row:first-child { border-top: 0; }
.hd-row-h { display: flex; flex-direction: column; gap: 2px; }
.hd-row-h b { font-size: 14.5px; font-weight: 680; }
.hd-row-h .sub { margin: 0; font-size: 12.5px; line-height: 1.45; }
.hd-row .batchacts { justify-content: flex-start; }
.hd-move { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.hd-move .f { margin: 0; }
.hd-items-row { align-items: start; }
.hd-items { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.hd-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) 118px auto; align-items: center; gap: 12px; padding: 8px 10px; }
.hd-item + .hd-item { border-top: 1px solid var(--line-soft); }
.hd-item .ch-ico { width: 34px; height: 34px; padding: 8px; }
.hd-item form.rename { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.hd-item form.rename input[name="title"] { flex: 1; min-width: 0; }
.hd-meta { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.hd-meta b { color: var(--ink); }
.hd-acts { display: flex; align-items: center; gap: 4px; }
.hd-acts form { margin: 0; }
.hd-acts:has(.armed) form:first-child { display: none; }
.hd-danger form { justify-self: start; margin: 0; }
@media (max-width: 720px) {
  .hl-list summary.ch-row .lvl-badge { grid-area: ico; align-self: start; }
  .hl-in { grid-area: in; } .hl-pills { grid-area: pill; }
  .hl-body { padding-left: 14px; }
  .hl-closeall { flex-wrap: wrap; }
  .hl-closeall button { width: 100%; }
  .hd-head h1 { font-size: 22px; }
  .hd-head .actions { width: 100%; }
  .hd-head .actions .btn { flex: 1; justify-content: center; }
  .hd-manage { padding: 4px 14px; }
  .hd-row { grid-template-columns: minmax(0, 1fr); }
  .hd-item { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "ico form form" "meta meta acts"; }
  .hd-item .ch-ico { grid-area: ico; } .hd-item form.rename { grid-area: form; } .hd-meta { grid-area: meta; padding-left: 46px; }
  .hd-acts { grid-area: acts; }
}

/* ---- Set homework: three steps and a send bar, what the class has beside it */
.as-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 22px; }
.as-form.setform { display: block; }
.card.as-step { margin: 0 0 16px; padding: 18px 20px 20px; }
.as-step-h { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.as-num { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 14px;
  font-weight: 760; color: #fff; background: linear-gradient(135deg, var(--brand-deep), var(--brand) 70%, var(--brand-lift)); }
.as-step-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.as-step-t b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.as-step-t small { margin-top: 1px; font-size: 13px; font-weight: 450; color: var(--ink-3); }
.as-step-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 11px;
  color: var(--brand); background: var(--accent-soft); }
.as-step-ico svg, .as-tick svg, .as-tip-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
details.as-write > summary { padding-right: 34px; font-weight: inherit; }
details.as-write:not([open]) .as-step-h { margin-bottom: 0; }

/* step 1: the classes as cards to tap */
.as-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.as-class { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 12px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); font-weight: 400;
  transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease); }
.as-class:hover { border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); }
.as-class input { position: absolute; opacity: 0; pointer-events: none; }
.as-class:has(input:checked) { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 7%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 14%, transparent); }
.as-class:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.as-class-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.as-class-id b { font-size: 15.5px; font-weight: 720; color: var(--ink); font-variant-numeric: tabular-nums; }
.as-class-id small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-tick { display: grid; flex: none; width: 22px; height: 22px; color: var(--tone); opacity: 0; transform: scale(.7);
  transition: opacity .15s var(--ease), transform .15s var(--ease); }
.as-class:has(input:checked) .as-tick { opacity: 1; transform: none; }
.as-when { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line-soft); }
.as-when .f { margin: 0; }
.as-quick { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 3px; }
button.as-q { padding: 7px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
button.as-q:hover { color: var(--brand); border-color: var(--accent-line); filter: none; }
button.as-q.on { color: #fff; background: var(--brand); border-color: var(--brand); }
button.as-q[hidden] { display: none; }

/* step 2: from the book, the handouts as tiles to tick, the other lines */
.as-step .unitfill { padding: 14px 16px; border-radius: 14px; }
.as-f { margin: 18px 0 0; }
.as-note { margin: 6px 0 0; font-size: 12.5px; max-width: 80ch; }
.as-step .hwshelves { max-height: 300px; margin-top: 8px; padding: 10px; border-color: var(--line-soft); border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.as-step .hwshelf { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.as-step .hwshelf legend { margin-bottom: 6px; }
.as-step .hwbook { align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-soft);
  background: var(--surface); font-size: 13.5px; line-height: 1.35; transition: border-color .15s var(--ease), background .15s var(--ease); }
.as-step .hwbook:hover { border-color: var(--accent-line); }
.as-step .hwbook input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); }
.as-step .hwbook:has(input:checked) { border-color: var(--brand); background: var(--accent-soft); color: var(--brand); font-weight: 620; }
.as-step textarea.wide { width: 100%; }
.as-crit { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }

/* the send bar: two switches and the button, in reach at the foot of the screen */
.setgo.as-send { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  margin: 0; padding: 12px 12px 12px 18px; border: 1px solid var(--card-line); border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow-up); }
.as-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.as-switch input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 38px; height: 22px; margin: 0;
  padding: 0; border: 0; border-radius: 99px; background: var(--line); cursor: pointer; transition: background .18s var(--ease); }
.as-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s var(--ease); }
.as-switch input:checked { background: var(--brand); }
.as-switch input:checked::after { transform: translateX(16px); }
.as-switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.as-switch > span { display: flex; flex-direction: column; line-height: 1.3; }
.as-switch b { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.as-switch small { font-size: 11.5px; color: var(--ink-3); }
.setgo.as-send button { margin-left: auto; padding: 11px 20px; font-size: 15px; }

/* beside it: what the class already has */
.as-side { position: sticky; top: calc(var(--top-h, 64px) + 16px); display: grid; gap: 14px; }
.as-set { padding: 16px; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow); }
.as-set[hidden] { display: none; }
.as-set h3 { margin: 0 0 10px; font-size: 14px; font-weight: 680; }
.as-set .sub { margin: 0; font-size: 13px; }
a.as-had { display: grid; gap: 1px; margin: 0 0 6px; padding: 9px 11px; border-radius: 11px; color: var(--ink);
  border: 1px solid var(--line-soft); transition: background .15s var(--ease), border-color .15s var(--ease); }
a.as-had:last-child { margin-bottom: 0; }
a.as-had:hover { text-decoration: none; background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); border-color: var(--accent-line); }
a.as-had b { font-size: 13.5px; font-weight: 680; }
a.as-had small { font-size: 12px; color: var(--ink-3); }
a.as-had span { margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.as-tip { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: var(--r-card); border: 1px dashed var(--line);
  font-size: 13px; color: var(--ink-2); }
.as-tip p { margin: 0; line-height: 1.55; }
.as-tip-ico { display: grid; flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--brand); }
@media (max-width: 1100px) {
  .as-wrap { grid-template-columns: minmax(0, 1fr); }
  .as-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 720px) {
  .card.as-step { padding: 16px 14px; }
  .as-step-ico { display: none; }
  .as-classes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .as-class { padding: 10px; gap: 8px; }
  .as-tick { display: none; }
  .as-when .f { flex: 1 1 130px; }
  .as-quick { width: 100%; }
  .as-step .unitfill .inline { flex-wrap: wrap; }
  .as-step .unitfill input[style] { width: 100% !important; }
  .as-step .hwshelf { grid-template-columns: minmax(0, 1fr); }
  .setgo.as-send { position: static; padding: 12px; gap: 10px; box-shadow: var(--card-shadow); }
  .setgo.as-send button { width: 100%; margin: 0; justify-content: center; }
}

/* ============================================================================
   The shelves (Materials)
   The tree of files in the same language as the rail: every step a card with a
   drawing of what it holds and how much room it takes; the files themselves a
   list of rows that can be ticked and deleted in one go. A delete is always red
   and always asks a second time, in the button itself.
   ========================================================================== */

.t-plum { --tone: #701589; } .t-blue { --tone: #0b69ad; } .t-green { --tone: #0b8a4c; }
.t-amber { --tone: #b07400; } .t-rose { --tone: #c02a3c; }
@media (prefers-color-scheme: dark) {
  .t-plum { --tone: #d9a2ec; } .t-blue { --tone: #6fb6f0; } .t-green { --tone: #4fd494; }
  .t-amber { --tone: #f2c24e; } .t-rose { --tone: #ff8a8f; }
}

.pagehead > div > h1 + p.sub { margin: 6px 0 0; font-size: 15px; line-height: 1.55; max-width: 72ch; }
.btn-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: -2px 8px -2px -2px;
  vertical-align: middle; }
.btn-ico svg, .sum-ico svg, .search-ico svg, .empty-ico svg, .confirm-ico svg { width: 100%; height: 100%; fill: none;
  stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
a.btn .btn-ico, button .btn-ico { color: inherit; }

/* the level switch and the search share one line on a wide screen */
.tabs + .shelf-search, .tabs + .flash { margin-top: 14px; }
.shelf-search { position: relative; display: flex; align-items: center; gap: 10px; margin: 14px 0 22px;
  padding: 0 14px; background: var(--surface); border: 1px solid var(--card-line); border-radius: 14px;
  box-shadow: var(--card-shadow); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.shelf-search:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft), var(--card-shadow); }
.search-ico { flex: none; width: 19px; height: 19px; color: var(--ink-3); }
.shelf-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 13px 0; font-size: 15px;
  box-shadow: none; outline: none; }
/* 16px on a touch screen, or an iPhone zooms the page in when it is tapped */
@media (pointer: coarse) { .shelf-search input { font-size: 16px; } }
.search-clear { flex: none; font-size: 13.5px; font-weight: 600; color: var(--ink-3); padding: 4px 8px; border-radius: 8px; }
.search-clear:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }

.shelf-sum { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--ink-2); font-size: 14px; }
.shelf-sum strong { color: var(--ink); }
.sum-ico { flex: none; width: 18px; height: 18px; color: var(--brand); }
.shelf-flash { margin: 14px 0 0; }
.flash.ok { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); color: #0b6b3c;
  border-color: color-mix(in srgb, var(--ok) 35%, var(--card-line)); font-weight: 600; }
@media (prefers-color-scheme: dark) { .flash.ok { color: #6fe3a8; } }

/* where you are: each step a way back up */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; margin: 0 0 16px; font-size: 13.5px; }
.crumbs a { padding: 4px 9px; border-radius: 8px; color: var(--ink-2); font-weight: 560; }
.crumbs a:hover { background: var(--surface); color: var(--brand); text-decoration: none; box-shadow: var(--card-shadow); }
.crumbs .here { padding: 4px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--brand); font-weight: 650; }
.crumb-sep { color: var(--ink-3); opacity: .7; padding: 0 1px; }

/* the cards of a shelf */
.shelves { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 0 0 22px; }
.shelves.small { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
a.shelf { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px 16px 16px 18px;
  background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow);
  color: var(--ink); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
a.shelf:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--card-shadow-up);
  border-color: color-mix(in srgb, var(--tone) 28%, var(--card-line)); }
.shelf .look-ico { position: static; flex: none; width: 42px; height: 42px; border-radius: 13px; }
.shelf .look-ico svg { width: 21px; height: 21px; }
.lvl-badge { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  font-size: 14.5px; font-weight: 760; letter-spacing: .02em; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 13%, transparent); }
.shelf-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.shelf-name { font-size: 15.5px; font-weight: 680; letter-spacing: -.015em; line-height: 1.3; }
.shelf-meta { margin-top: 3px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.shelf-go { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: transform .2s var(--ease), stroke .2s, opacity .2s; }
a.shelf:hover .shelf-go { transform: translateX(3px); stroke: var(--tone); opacity: 1; }
a.shelf.small { min-height: 62px; padding: 12px 14px; }
a.shelf.small .shelf-name { font-size: 14.5px; }
a.shelf.empty { background: transparent; box-shadow: none; border-style: dashed; color: var(--ink-3); }
a.shelf.empty .look-ico, a.shelf.empty .lvl-badge { filter: grayscale(1); opacity: .55; }
a.shelf.empty:hover { transform: none; box-shadow: none; border-color: var(--line); }

/* the files: a list of rows, ticked or not */
.files { margin: 0 0 22px; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow); }
.files-head { position: sticky; top: var(--top-h, 64px); z-index: 5; display: flex; align-items: center; gap: 14px;
  padding: 10px 14px 10px 16px; border-bottom: 1px solid var(--card-line); border-radius: var(--r-card) var(--r-card) 0 0;
  background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.files-count { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pick { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.filelist { list-style: none; margin: 0; padding: 4px 0; }
.frow { display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) auto 38px; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-top: 1px solid var(--line-soft); transition: background .15s var(--ease); }
.frow:first-child { border-top: 0; }
.frow:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
.frow.ticked { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
.f-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 11%, transparent); }
.f-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.f-main { display: flex; flex-direction: column; min-width: 0; }
.f-name { font-size: 14.5px; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-name:hover { color: var(--brand); }
.f-meta { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-note { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.f-size { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
button.f-del { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px;
  background: transparent; border: 1px solid transparent; color: var(--ink-3); box-shadow: none; }
button.f-del svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
button.f-del:hover { background: var(--warn-soft); color: #c02a3c; border-color: var(--warn-line); }
button.f-del.armed { width: auto; padding: 0 12px; background: #c02a3c; border-color: #c02a3c; color: #fff; }
.arm-word { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* red, and it asks twice */
button.danger-btn { display: inline-flex; align-items: center; gap: 0; background: var(--surface); color: #c02a3c;
  border: 1px solid var(--warn-line); box-shadow: none; font-weight: 650; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
button.danger-btn:hover:not(:disabled) { background: var(--warn-soft); border-color: #e39aa1; }
button.danger-btn:disabled { color: var(--ink-3); border-color: var(--line-soft); background: transparent; cursor: default; opacity: .7; }
button.danger-btn.armed { background: #c02a3c; border-color: #c02a3c; color: #fff; animation: arm-pulse 1.2s var(--ease) infinite; }
button.danger-btn.going, button.f-del.going { opacity: .6; pointer-events: none; animation: none; }
@keyframes arm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 42, 60, .35); } 50% { box-shadow: 0 0 0 6px rgba(192, 42, 60, 0); } }
@media (prefers-reduced-motion: reduce) { button.danger-btn.armed { animation: none; } }

/* the one button that empties the place you are looking at */
.wipe { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap;
  margin: 8px 0 26px; padding: 14px 16px 14px 18px; border-radius: var(--r-card);
  border: 1px dashed color-mix(in srgb, #c02a3c 35%, var(--card-line));
  background: color-mix(in srgb, var(--warn-soft) 45%, transparent); }
.wipe-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--ink-3); }
.wipe-text strong { font-size: 14.5px; color: var(--ink); font-weight: 650; }

/* nothing on a shelf, and the question a delete asks without the script */
.empty-state { display: flex; align-items: center; gap: 16px; padding: 22px 22px; margin: 0 0 22px; border-radius: var(--r-card);
  border: 1px dashed var(--line); color: var(--ink-2); }
.empty-state p { margin: 0; line-height: 1.5; }
.empty-ico { flex: none; width: 34px; height: 34px; color: var(--ink-3); }
.confirm-card { max-width: 560px; margin: 24px auto; padding: 28px 28px 24px; background: var(--surface);
  border: 1px solid var(--card-line); border-radius: 20px; box-shadow: var(--card-shadow-up); }
.confirm-card h1 { margin: 14px 0 6px; font-size: 24px; font-weight: 720; letter-spacing: -.025em; }
.confirm-ico { display: grid; place-items: center; width: 46px; height: 46px; padding: 11px; border-radius: 14px;
  background: var(--warn-soft); color: #c02a3c; }
.confirm-list { margin: 14px 0 20px; padding-left: 18px; max-height: 260px; overflow: auto; font-size: 14px; line-height: 1.7; }
.confirm-card form { gap: 10px; }

/* the upload, opened from the head of the page */
details.adder[open] { scroll-margin-top: calc(var(--top-h, 64px) + 12px); }

@media (max-width: 720px) {
  .pagehead .actions .btn { padding: 9px 14px; }
  .shelves { grid-template-columns: 1fr; gap: 10px; }
  .shelves.small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  a.shelf { min-height: 66px; padding: 13px 14px; }
  a.shelf.small { padding: 11px 12px; }
  .shelf .look-ico, .lvl-badge { width: 38px; height: 38px; border-radius: 12px; }
  .frow { grid-template-columns: 22px 34px minmax(0, 1fr) 36px; gap: 10px; padding: 10px 8px 10px 12px; }
  .frow .f-size { display: none; }
  .f-ico { width: 34px; height: 34px; border-radius: 10px; }
  .files-head { gap: 10px; padding: 10px 10px 10px 12px; flex-wrap: wrap; }
  .files-head .pick span { display: none; }
  .files-head button.danger-btn { padding: 8px 12px; font-size: 13.5px; }
  .wipe { padding: 13px 14px; }
  .wipe button.danger-btn { width: 100%; justify-content: center; }
}
.f-msize { display: none; }
@media (max-width: 720px) { .f-msize { display: inline; } }
/* the upload opens from the button at the head of the page; closed, it is not in the way */
details#addfile:not([open]) { display: none; }
details.adder[open] > summary { list-style: none; display: flex; align-items: center; justify-content: flex-start;
  font-size: 16px; font-weight: 660; letter-spacing: -.015em; margin: 8px 0 12px; cursor: pointer; }
details.adder[open] > summary::-webkit-details-marker { display: none; }
details.adder[open] > summary::after { content: "Close"; margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
@media (max-width: 720px) {
  /* the levels: one line that slides, as on a phone app, not three rows */
  .tabs.levels { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; }
  .tabs.levels::-webkit-scrollbar { display: none; }
  .tabs.levels .tab { flex: none; white-space: nowrap; scroll-snap-align: start; }
}
/* a recording, played in its own row */
.frow { grid-template-columns: 22px 38px minmax(0, 1fr) auto auto; }
.f-acts { display: flex; align-items: center; gap: 4px; }
button.f-play { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, transparent); border: 0; color: var(--brand); box-shadow: none; }
button.f-play:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }
button.f-play svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
button.f-play .pa { display: none; fill: none; stroke-width: 2.6; stroke-linecap: round; }
button.f-play.playing { background: var(--brand); color: #fff; }
button.f-play.playing .pl { display: none; }
button.f-play.playing .pa { display: inline; }
.f-audio { display: none; }
@media (max-width: 720px) { .frow { grid-template-columns: 22px 34px minmax(0, 1fr) auto; } }

/* ============================================================================
   The classes (Students → Groups)
   Each class a card in its level's colour - the same badge as its shelf in
   Materials - with how much homework is in as a ring and three figures under
   it. Inside a class: a head that says which, four tabs, and the work as rows
   a phone reads without sliding - the standing, the students, the homework,
   each homework opening to be changed. A delete asks twice, in the button.
   ========================================================================== */

/* the two forms opened from a page's head stay out of the way when shut */
details#newclass:not([open]), details#level:not([open]) { display: none; }
/* a homework row draws its own chevron, at the right */
.ch-list details.ch-item > summary.ch-row::before { content: none; display: none; }

.lvl-badge svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.lvl-badge.sm { width: 34px; height: 34px; border-radius: 11px; font-size: 12.5px; }
.lvl-badge.sm svg { width: 18px; height: 18px; }
.lvl-badge.lg { width: 58px; height: 58px; border-radius: 18px; font-size: 19px; }
.lvl-badge.lg svg { width: 26px; height: 26px; }

/* the class cards */
.clsgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 0 0 8px; }
a.cls { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px 18px 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 18px; box-shadow: var(--card-shadow);
  color: var(--ink); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
a.cls::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 35%, transparent)); }
a.cls:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--card-shadow-up);
  border-color: color-mix(in srgb, var(--tone) 30%, var(--card-line)); }
.cls-top { display: flex; align-items: center; gap: 14px; }
.cls-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cls-name { font-size: 25px; font-weight: 760; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cls-name + .cls-meta { margin-top: 5px; }
.cls-meta { font-size: 13.5px; line-height: 1.4; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cls-ring { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cls-ring small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.cls-ring .ring .ringtext { font-size: 13px; }
.cls-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.cls-figs > div { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; border-left: 1px solid var(--line-soft); }
.cls-figs > div:first-child { padding-left: 0; border-left: 0; }
.cls-figs small { font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.cls-figs b { font-size: 21px; font-weight: 720; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cls-figs i { margin-left: 2px; font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.cls-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.cls-calm { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ok); }
.cls-calm-ico, .code-ico, .sd-act-ico { display: inline-grid; place-items: center; width: 17px; height: 17px; }
.cls-calm-ico svg, .code-ico svg, .sd-act-ico svg, .ch-ico svg, .finding-ico svg, .sd-acts .f-del svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cls-go { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-size: 13.5px; font-weight: 650; color: var(--brand); }
.cls-go-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .2s var(--ease); }
a.cls:hover .cls-go-ico { transform: translateX(3px); }

/* the invite links, a row a class */
.invites { list-style: none; margin: 0 0 18px; padding: 4px 0; background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.inv { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 11px 14px 11px 16px; border-top: 1px solid var(--line-soft); }
.inv:first-child { border-top: 0; }
.inv-main { display: flex; flex-direction: column; min-width: 0; }
.inv-main b { font-size: 14.5px; font-weight: 680; }
.inv-url { margin-top: 1px; font: 12.5px/1.4 ui-monospace, Menlo, monospace; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-code { padding: 3px 9px; border-radius: 8px; font: 650 12.5px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .06em;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-soft); }
button.ghost.copied { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
#invite { scroll-margin-top: calc(var(--top-h, 64px) + 16px); }

/* one class: which it is, then its tabs */
.crumbs + .cls-head { margin-top: 4px; }
.cls-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 18px; margin: 0 0 22px; }
.cls-head-id { flex: 1; min-width: 220px; }
.cls-head h1 { margin: 0; font-size: 30px; font-weight: 760; letter-spacing: -.035em; line-height: 1.1; }
.cls-head .sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 0; font-size: 14.5px; }
.cls-head .actions { display: flex; flex-wrap: wrap; gap: 10px; }
button.code-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 9px; border-radius: 8px;
  font: 650 12.5px/1.6 ui-monospace, Menlo, monospace; letter-spacing: .06em; color: var(--brand);
  background: var(--accent-soft); border: 1px solid var(--accent-line); box-shadow: none; }
button.code-chip:hover { filter: none; border-color: var(--brand); }
button.code-chip .code-ico { width: 14px; height: 14px; }
button.code-chip.copied { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.tabs.cls-tabs { margin: 0 0 24px; }
.tabs.cls-tabs .tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; font-size: 14px; font-weight: 560; }
.cls-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); background: var(--line-soft); }
.tabs .tab.on .cls-n { color: var(--brand); background: var(--accent-soft); }
.cls-say { margin: -6px 0 18px; font-size: 14px; max-width: 76ch; }
.tab-narrow { display: none; }

/* the class in a sentence */
.finding { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 18px; padding: 15px 20px 15px 16px;
  border-radius: var(--r-card); border: 1px solid var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.finding p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.finding a { font-weight: 650; }
.finding-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 9px; border-radius: 12px;
  color: var(--brand); background: var(--surface); box-shadow: var(--card-shadow); }

/* how the class is doing: a row a week (or day, or month), newest first */
.tabs.ct-switch { margin-bottom: 12px; }
.ct-list { list-style: none; margin: 0 0 8px; padding: 4px 0 6px; background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.ct-row, .ct-head { display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, 1fr) 70px 92px; align-items: center;
  gap: 18px; padding: 10px 20px; }
.ct-row + .ct-row { border-top: 1px solid var(--line-soft); }
.ct-head { padding-top: 10px; padding-bottom: 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); }
.ct-head span:last-child { text-align: right; }
.ct-when { display: flex; flex-direction: column; min-width: 0; }
.ct-when b { font-size: 14.5px; font-weight: 650; }
.ct-when small { margin-top: 1px; font-size: 12.5px; color: var(--ink-3); }
.ct-bar { display: block; height: 10px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.ct-bar i { display: block; height: 100%; border-radius: 99px; }
.ct-v, .ct-m { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-v b { font-size: 17px; font-weight: 740; }
.ct-m b { font-size: 15px; font-weight: 650; color: var(--ink-2); }
.ct-v small, .ct-m small { margin-left: 1px; font-size: 12px; color: var(--ink-3); }

/* people as rows: the standing, the students, the paused */
.sd-list { container-type: inline-size; list-style: none; margin: 0 0 14px; padding: 0; background: var(--surface);
  border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow); overflow: hidden; }
.sd-head, .sd-row { display: grid; align-items: center; gap: 14px; padding: 10px 16px 10px 14px; }
.sd-standing .sd-head, .sd-standing .sd-row {
  grid-template-columns: 28px 34px minmax(140px, 1.4fr) minmax(130px, 1.2fr) 84px 54px 54px 56px 34px; }
.sd-roster .sd-head, .sd-roster .sd-row {
  grid-template-columns: 34px minmax(140px, 1.5fr) 50px 50px 84px 62px 80px 88px 56px 74px 132px; }
.sd-paused .sd-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
.sd-head span, .ct-head span { white-space: nowrap; }
.sd-head { padding-top: 11px; padding-bottom: 11px; font-size: 11px; font-weight: 650; letter-spacing: .07em; line-height: 1.25;
  text-transform: uppercase; color: var(--ink-3); background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  border-bottom: 1px solid var(--card-line); }
.sd-row { border-top: 1px solid var(--line-soft); transition: background .15s var(--ease); }
.sd-head + .sd-row, .sd-row:first-child { border-top: 0; }
.sd-row:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
.sd-row.risk { box-shadow: inset 3px 0 0 #e0566a; }
.sd-who { display: flex; flex-direction: column; min-width: 0; }
.sd-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sd-name { min-width: 0; font-size: 14.5px; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sd-name:hover { color: var(--brand); text-decoration: none; }
.sd-line .pill { flex: none; padding: 1px 8px; font-size: 11px; }
.sd-meta { display: none; margin-top: 2px; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-paused .sd-meta { display: block; }
.sd-hw { display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: center; gap: 10px; }
.sd-hw b { font-size: 13.5px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.sd-n { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sd-c { min-width: 0; }
.sd-idx b { display: inline-grid; place-items: center; min-width: 40px; height: 30px; padding: 0 8px; border-radius: 9px;
  font-size: 15px; font-weight: 760; font-variant-numeric: tabular-nums; color: var(--brand); background: var(--accent-soft); }
a.sd-act { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ink-3); }
a.sd-act:hover { color: var(--brand); background: var(--accent-soft); }
.sd-act-ico { width: 19px; height: 19px; }
.sd-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.sd-acts form { margin: 0; }
.sd-acts:has(.armed) form:first-child { display: none; }
.sd-acts .f-del svg { width: 18px; height: 18px; }
.sd-empty { padding: 22px 20px; color: var(--ink-3); }
.tchip { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.tchip.up { color: #0b6b3c; background: color-mix(in srgb, var(--ok) 13%, transparent); }
.tchip.down { color: #c02a3c; background: var(--warn-soft); }
.tchip.mute { padding: 2px 0; font-weight: 500; color: var(--ink-3); }
@media (prefers-color-scheme: dark) { .tchip.up { color: #6fe3a8; } .tchip.down { color: #ff8a8f; } }

/* narrower: the three lesson marks go first, then everything but the index */
@container (max-width: 1000px) {
  .sd-roster .sd-head, .sd-roster .sd-row { grid-template-columns: 34px minmax(140px, 1.6fr) 50px 50px 84px 52px 74px 132px; }
  .sd-roster .mk3 { display: none; }
}
@container (max-width: 700px) {
  .sd-roster .sd-head, .sd-standing .sd-head { display: none; }
  .sd-roster .sd-row { grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 10px; padding: 10px 10px 10px 12px; }
  .sd-roster .sd-n, .sd-roster .sd-c { display: none; }
  .sd-standing .sd-row { grid-template-columns: 26px 32px minmax(0, 1fr) auto 32px; gap: 10px; padding: 10px 8px 10px 10px; }
  .sd-standing .sd-hw, .sd-standing .sd-c, .sd-standing .sd-n { display: none; }
  .sd-meta { display: block; }
  .sd-acts .ghost.small > span:not(.btn-ico) { display: none; }
  .sd-acts .ghost.small { padding: 0; width: 36px; height: 36px; display: grid; place-items: center; }
  .sd-acts .ghost.small .btn-ico { margin: 0; }
  .lg-ava { width: 32px; height: 32px; font-size: 13px; }
}

/* the homework: a row each, which opens to be changed */
.ch-list { margin: 0 0 14px; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow); overflow: hidden; }
.ch-item + .ch-item { border-top: 1px solid var(--line-soft); }
summary.ch-row { list-style: none; display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(120px, 190px) 128px 18px;
  align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; transition: background .15s var(--ease); }
summary.ch-row::-webkit-details-marker { display: none; }
summary.ch-row:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
.ch-ico { display: grid; place-items: center; width: 38px; height: 38px; padding: 9px; border-radius: 11px; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, transparent); }
.ch-main { display: flex; flex-direction: column; min-width: 0; }
.ch-title { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-meta { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.ch-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px;
  color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-in b { color: var(--ink); font-weight: 700; }
.ch-row .pill { justify-self: end; white-space: nowrap; }
.ch-chev { width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease), stroke .2s var(--ease); }
.ch-item[open] > summary { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.ch-item[open] .ch-chev { transform: rotate(90deg); stroke: var(--brand); }
.ch-body { display: grid; gap: 12px; padding: 14px 16px 16px 68px; border-top: 1px dashed var(--line);
  background: color-mix(in srgb, var(--surface-2) 35%, var(--surface)); }
.ch-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0; }
.ch-edit .f { margin: 0; }
.ch-edit .f.grow { flex: 1 1 240px; }
.ch-edit .f.grow input { width: 100%; }
.ch-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ch-acts form { margin: 0; }
.ch-body .sub { font-size: 12.5px; }
main > h2 .h-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: -4px;
  border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--line-soft); }
details.ch-fold, details.ch-more { margin: 0 0 14px; }
details.ch-fold { margin-top: 28px; }
details.ch-fold > summary, details.ch-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 650; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); }
details.ch-fold > summary::-webkit-details-marker, details.ch-more > summary::-webkit-details-marker { display: none; }
details.ch-fold > summary::before, details.ch-more > summary::before { margin-right: 0; }
details.ch-fold > summary .h-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--line-soft); }
details.ch-fold[open] > .ch-list, details.ch-more[open] > .ch-list { margin-top: 10px; }

/* set the same homework again */
form.repeat-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 14px 16px;
  margin: 0 0 22px; padding: 18px 20px; border-radius: var(--r-card); border: 1px solid var(--accent-line);
  background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--brand) 9%, var(--surface)) 0%, var(--surface) 62%);
  box-shadow: var(--card-shadow); }
.rp-text { display: flex; flex-direction: column; min-width: 0; }
.rp-text b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.rp-text .sub { margin: 2px 0 0; font-size: 13.5px; }
.rp-fields { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding-top: 14px;
  border-top: 1px solid var(--line-soft); }
.rp-fields .f { margin: 0; }
.rp-fields label.check { align-self: center; margin: 0; }
.rp-fields button { margin-left: auto; }
@media (min-width: 1200px) {
  form.repeat-card { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .rp-fields { grid-column: auto; padding-top: 0; border-top: 0; }
}

@media (max-width: 720px) {
  .clsgrid { grid-template-columns: 1fr; gap: 12px; }
  a.cls { padding: 18px 16px 12px; gap: 14px; }
  .cls-name { font-size: 23px; }
  .inv { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 11px 12px; }
  .inv-code { display: none; }
  .cls-head { gap: 14px; margin-bottom: 18px; }
  .cls-head h1 { font-size: 26px; }
  .lvl-badge.lg { width: 50px; height: 50px; border-radius: 15px; font-size: 17px; }
  .cls-head .actions { width: 100%; }
  .cls-head .actions .btn { flex: 1; justify-content: center; text-align: center; }
  .tabs.cls-tabs { display: flex; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs.cls-tabs::-webkit-scrollbar { display: none; }
  .tabs.cls-tabs .tab { flex: 1 0 auto; justify-content: center; padding: 7px 6px; font-size: 13.5px; }
  .tabs.cls-tabs .cls-n { display: none; }
  .tab-wide { display: none; }
  .tab-narrow { display: inline; }
  .finding { padding: 13px 14px 13px 12px; gap: 12px; }
  .finding p { margin-top: 3px; font-size: 14.5px; }
  .ct-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "when v m" "bar bar bar";
    gap: 6px 16px; padding: 11px 14px; }
  .ct-when { grid-area: when; } .ct-bar { grid-area: bar; height: 8px; } .ct-v { grid-area: v; } .ct-m { grid-area: m; }
  .ct-head { grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; padding: 8px 14px 4px; font-size: 10.5px; }
  .ct-head span:nth-child(3) { display: none; }
  summary.ch-row { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "ico main pill" "ico in in";
    gap: 6px 12px; padding: 12px 14px; }
  .ch-ico { grid-area: ico; align-self: start; width: 34px; height: 34px; padding: 8px; }
  .ch-main { grid-area: main; } .ch-in { grid-area: in; } .ch-row .pill { grid-area: pill; } .ch-chev { display: none; }
  .ch-body { padding: 14px; }
  .ch-edit .f:not(.grow) { flex: 1 1 130px; }
  .ch-edit button { flex: 1 0 100%; }
  form.repeat-card { padding: 16px; }
  .rp-fields .f { flex: 1 1 130px; }
  .rp-fields button { flex: 1 0 100%; margin: 0; }
}

/* one student: the same head as a class, their initial where the badge was */
.st-ava { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  font-size: 23px; font-weight: 760; color: #fff;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand) 70%, var(--brand-lift)); box-shadow: var(--card-shadow); }
.st-head .sub .pill { margin-left: 2px; }
.st-head .actions a.btnlink { height: auto; padding: 9px 16px; line-height: 20px; border-radius: 10px; font-size: 14px;
  color: #fff; border: 0; background: linear-gradient(100deg, var(--brand-deep) 0%, var(--brand) 62%, var(--brand-lift) 100%); }
.st-head .actions a.btnlink:hover { color: #fff; filter: brightness(1.06); text-decoration: none; }

/* the handouts they owe */
form.ow-since { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin: 0 0 14px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.ow-since-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 3px; }
.ow-since-text b { font-size: 15px; font-weight: 680; }
.ow-since-text .sub { margin: 0; font-size: 13px; line-height: 1.5; }
form.ow-since .f { margin: 0; }
.ow-list { list-style: none; margin: 0 0 12px; padding: 0; background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); overflow: hidden; }
.ow-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 150px; align-items: center; gap: 14px;
  padding: 11px 16px; border-top: 1px solid var(--line-soft); }
.ow-row:first-child { border-top: 0; }
.ow-main { display: flex; flex-direction: column; min-width: 0; }
.ow-title { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-meta { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.ow-row .pill { white-space: nowrap; justify-self: end; }
.ow-act { display: flex; justify-content: flex-end; }
.ow-act form { margin: 0; }

/* what the teacher wrote back */
.tf-list { list-style: none; margin: 0 0 12px; padding: 0; background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); overflow: hidden; }
.tf-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 14px; padding: 12px 16px;
  border-top: 1px solid var(--line-soft); }
.tf-row:first-child { border-top: 0; }
.tf-score { padding-top: 1px; }
.tf-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tf-title { font-size: 14.5px; font-weight: 650; }
.tf-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tf-tag { padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--brand);
  background: var(--accent-soft); }
.tf-note { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
details.ch-more > .tf-list, details.ch-more > .ow-list { margin-top: 10px; }

/* their links */
.invites.links .inv { grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; padding: 14px 14px 14px 16px; }
.lk-ico { display: grid; place-items: center; width: 38px; height: 38px; padding: 9px; border-radius: 11px;
  color: var(--brand); background: var(--accent-soft); }
.lk-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lk-what { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.lk-acts { display: flex; gap: 8px; align-items: center; align-self: center; }
form.relink-form { margin-top: 0; }

@media (max-width: 720px) {
  .st-ava { width: 50px; height: 50px; font-size: 20px; }
  .ow-row { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "ico main pill" "ico act act";
    gap: 6px 12px; padding: 11px 14px; }
  .ow-row > .ch-ico { grid-area: ico; align-self: start; width: 34px; height: 34px; padding: 8px; }
  .ow-main { grid-area: main; } .ow-row .pill { grid-area: pill; } .ow-act { grid-area: act; justify-content: flex-start; }
  .ow-act:empty { display: none; }
  .tf-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 14px; }
  .invites.links .inv { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "ico main" "acts acts";
    gap: 10px 12px; padding: 13px 12px; }
  .invites.links .lk-ico { grid-area: ico; width: 34px; height: 34px; padding: 8px; }
  .invites.links .inv-main { grid-area: main; } .invites.links .lk-acts { grid-area: acts; }
  .lk-acts > * { flex: 1; justify-content: center; text-align: center; }
}

/* the students' Homework page: a card a deadline, said in words - "Today at
   23:59, 21 hours left" - with each task a row and what to do about it */
.dl-card { margin: 0 0 14px; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow); overflow: hidden; }
.dl-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.dl-ico { display: grid; place-items: center; width: 40px; height: 40px; padding: 9px; border-radius: 12px;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.dl-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dl-when { display: flex; flex-direction: column; min-width: 0; }
.dl-when b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.dl-when span { margin-top: 1px; font-size: 13px; font-weight: 600; color: var(--tone); }
.dl-card.t-plum .dl-when span { color: var(--ink-3); font-weight: 500; }
.dl-count { font-size: 13px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-count b { font-size: 15px; color: var(--ink); }
.dl-bar { height: 6px; margin: 0 16px 6px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.dl-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-lift), var(--brand)); }
.dl-list { list-style: none; margin: 0; padding: 0 0 4px; }
.dl-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "tick title" ". act";
  align-items: center; gap: 4px 12px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.dl-tick { grid-area: tick; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--line); font-size: 13px; font-weight: 800; color: #fff; }
.dl-item.done .dl-tick { background: var(--accent); border-color: var(--accent); }
.dl-title { grid-area: title; font-size: 14.5px; font-weight: 600; min-width: 0; }
.dl-item.done .dl-title { color: var(--ink-3); font-weight: 500; }
.dl-act { grid-area: act; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.dl-act:empty { display: none; }
.dl-act .linky { font-weight: 650; }
@media (min-width: 721px) {
  .dl-item { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "tick title act"; }
  .dl-act { justify-content: flex-end; }
}

/* photos chosen but not sent */
.draft-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px 12px; align-items: center; margin: 0 0 12px;
  padding: 14px 16px; border-radius: var(--r-card); border: 1px solid color-mix(in srgb, #b07400 35%, var(--card-line));
  background: color-mix(in srgb, var(--gold-soft) 55%, var(--surface)); --tone: #b07400; }
.draft-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.draft-text b { font-size: 15px; font-weight: 680; }
.draft-text span { font-size: 13px; color: var(--ink-2); }
.draft-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.draft-acts form { margin: 0; }

/* my goal: four bands side by side, then the date and a photo */
.goal-empty { margin-bottom: 18px; }
form.goal-form { display: grid; gap: 16px; padding: 20px; }
.goal-step { margin: 0; font-size: 12px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.goal-bands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
label.goal-band { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 12px 8px 10px;
  border-radius: 14px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); border: 1px solid var(--accent-line);
  font-size: 13px; font-weight: 650; color: var(--brand); }
label.goal-band select { width: 100%; max-width: 92px; padding: 8px 6px; text-align: center; text-align-last: center;
  font-size: 20px; font-weight: 760; color: var(--ink); background: var(--surface); border-radius: 10px; }
.goal-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.goal-more .f { margin: 0; }
.goal-more .f small { font-weight: 500; color: var(--ink-3); }
label.photo-pick { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px;
  border-radius: 12px; border: 1.5px dashed var(--accent-line); background: var(--surface); cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease); }
label.photo-pick:hover { border-color: var(--brand); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
label.photo-pick.has { border-style: solid; border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
label.photo-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pp-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; border-radius: 11px;
  color: var(--brand); background: var(--accent-soft); }
.pp-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pp-text { display: flex; flex-direction: column; min-width: 0; }
.pp-text b { font-size: 14px; font-weight: 650; }
.pp-text small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
form.goal-form > button { justify-self: start; }
@media (max-width: 720px) {
  .goal-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goal-more { grid-template-columns: minmax(0, 1fr); }
  form.goal-form > button { justify-self: stretch; }
}

/* Today: what is waiting to be graded, on the rail's plum, a bar a class;
   beside it the homework due today, a row a class */
.tday { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; margin: 0 0 16px; align-items: stretch; }
section.tg { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 20px 22px 18px;
  border-radius: 20px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, #9049a3 0%, #701589 38%, #320a3e 100%);
  box-shadow: 0 18px 40px -18px rgba(50, 10, 62, .6); }
section.tg::after { content: ""; position: absolute; right: -50px; top: -50px; width: 190px; height: 190px; border-radius: 50%;
  border: 28px solid rgba(255, 255, 255, .05); pointer-events: none; }
section.tg.calm { background: radial-gradient(120% 140% at 100% 0%, #2f9e6a 0%, #0b6b3c 55%, #06452a 100%);
  box-shadow: 0 18px 40px -18px rgba(6, 69, 42, .55); }
.tg-k { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #ffd36e; }
.tg.calm .tg-k { color: #c8f5dd; }
.tg-big { display: flex; align-items: center; gap: 14px; margin: 0; }
.tg-big b { font-size: 56px; font-weight: 800; line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tg-big span { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.tg-rows { display: grid; gap: 4px; margin-top: 4px; }
a.tg-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 6px 8px;
  margin: 0 -8px; border-radius: 10px; color: #fff; font-size: 14px; transition: background .15s var(--ease); }
a.tg-row:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
a.tg-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.tg-bar { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.tg-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffd166, #ffb347); }
.tg-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
a.tg-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 16px;
  border-radius: 12px; font-size: 14.5px; font-weight: 700; color: #2a0736; background: #ffd36e;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5); transition: transform .18s var(--ease), filter .18s var(--ease); }
a.tg-go:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.04); }
.tg-go-ico { display: inline-grid; width: 18px; height: 18px; }
.tg-go-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

section.td { display: flex; flex-direction: column; margin: 0; padding: 18px 18px 10px; }
.td-h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.td-ico { display: grid; place-items: center; width: 34px; height: 34px; padding: 8px; border-radius: 11px;
  color: #c02a3c; background: var(--warn-soft); }
.td-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.td-rows { display: grid; }
a.td-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(110px, 170px) 16px; align-items: center; gap: 12px;
  padding: 10px 6px; margin: 0 -6px; border-top: 1px solid var(--line-soft); border-radius: 10px; color: var(--ink);
  transition: background .15s var(--ease); }
a.td-row:first-child { border-top: 0; }
a.td-row:hover { text-decoration: none; background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
.td-main { display: flex; flex-direction: column; min-width: 0; }
.td-main b { font-size: 15px; font-weight: 700; }
.td-main small { font-size: 12.5px; color: var(--ink-3); }
.td-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px;
  color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.td-in b { color: var(--ink); }
.td-go { width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.td-none { margin: 6px 0 10px; color: var(--ink-3); }
.tday + .todos { margin-top: 0; }
@media (max-width: 1100px) { .tday { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  section.tg { padding: 18px 16px 16px; border-radius: 18px; }
  .tg-big b { font-size: 46px; }
  a.tg-go { align-self: stretch; justify-content: center; }
  a.td-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .td-in { grid-template-columns: auto; }
  .td-in .pbar { display: none; }
  .td-go { display: none; }
}

/* ============================================================================
   The students' booklets (Handouts shelf)
   The one to carry on with on top, as the rail's plum; then a card per booklet
   with a bar of its parts, the homework deadline and the score when done.
   ========================================================================== */
a.hs-next { position: relative; display: grid; gap: 4px; margin: 0 0 18px; padding: 20px 22px 18px;
  border-radius: 20px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, #9049a3 0%, #701589 38%, #320a3e 100%);
  box-shadow: 0 18px 40px -18px rgba(50, 10, 62, .55); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
a.hs-next:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 24px 48px -18px rgba(50, 10, 62, .65); }
.hs-next-k { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #ffd36e; }
.hs-next-t { font-size: 20px; font-weight: 720; letter-spacing: -.02em; line-height: 1.25; }
.hs-next-p { font-size: 14px; color: rgba(255, 255, 255, .78); }
.hs-next .hs-bar { margin: 10px 0 4px; }
.hs-next-go { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 8px; padding: 8px 14px;
  border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 14px; font-weight: 650; }
.hs-next-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .2s var(--ease); }
a.hs-next:hover .hs-next-go svg { transform: translateX(3px); }

.hs-sum { margin: 0 0 14px; font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.hs-sum strong { color: var(--ink); }
.hs-shelf { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin: 0 0 18px; }
.hs-shelf-head { margin-top: 26px; }   /* the workbook's own shelf, under the booklets */
.hs-card { display: flex; align-items: flex-start; gap: 14px; padding: 15px 16px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); color: var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
a.hs-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--card-shadow-up); border-color: var(--accent-line); }
.hs-badge { flex: none; display: grid; place-items: center; min-width: 52px; height: 44px; padding: 0 8px; border-radius: 13px;
  font-size: 13.5px; font-weight: 760; letter-spacing: .01em; color: var(--brand); background: var(--accent-soft);
  font-variant-numeric: tabular-nums; }
.hs-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.hs-name { font-size: 15.5px; font-weight: 680; letter-spacing: -.015em; line-height: 1.3; }
.hs-state { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.hs-state svg { flex: none; width: 14px; height: 14px; }
.hs-bar { position: relative; display: block; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.hs-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #9049a3, #701589); }
.hs-bar.light { background: rgba(255, 255, 255, .18); }
.hs-bar.light i { background: linear-gradient(90deg, #ffd36e, #ffc38a); }
.hs-pill { align-self: flex-start; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 650;
  color: #8a5a00; background: var(--gold-soft); }
.hs-pill.late { color: #c02a3c; background: var(--warn-soft); }
.hs-card.done .hs-badge { color: #0b8a4c; background: color-mix(in srgb, var(--ok) 13%, transparent); }
.hs-card.done .hs-bar i { background: linear-gradient(90deg, #22c378, #0b8a4c); }
.hs-card.done .hs-state { color: #0b6b3c; font-weight: 600; }
.hs-done { display: inline-grid; width: 15px; height: 15px; }
.hs-done svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hs-card.shut { background: transparent; border-style: dashed; box-shadow: none; color: var(--ink-3); cursor: not-allowed; }
.hs-card.shut .hs-badge { color: var(--ink-3); background: var(--surface-2); }
.hs-how { margin: 4px 0 18px; font-size: 13.5px; color: var(--ink-3); }
.hs-how summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.hs-how p { margin: 8px 0 0; line-height: 1.55; }
@media (prefers-color-scheme: dark) {
  .hs-card.done .hs-badge, .hs-card.done .hs-state { color: #4fd494; }
  .hs-pill { color: #f2c24e; } .hs-pill.late { color: #ff8a8f; }
}
@media (max-width: 720px) {
  .hs-shelf { grid-template-columns: 1fr; gap: 10px; }
  a.hs-next { padding: 18px 18px 16px; border-radius: 18px; }
  .hs-next-t { font-size: 18px; }
}
.hs-badge { min-width: 44px; font-size: 17px; }

/* The two shelves - course booklets, workbook - a row per unit (his request,
   4 October 2026). A unit opens to its booklets; the ones being worked on are
   open, the rest shut, so twelve units fit on a phone's screen. */
.hs-units { display: grid; gap: 10px; margin: 0 0 18px; }
.hs-unit { border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.hs-unit[open] { border-color: var(--accent-line); box-shadow: var(--card-shadow-up); }
.hs-unit > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.hs-unit > summary::-webkit-details-marker { display: none; }
.hs-unit > summary:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.hs-unum { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  font-size: 17px; font-weight: 760; color: var(--brand); background: var(--accent-soft); font-variant-numeric: tabular-nums; }
.hs-uhead { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; flex: 1; }
.hs-uname { font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.hs-umeta { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.hs-umeta svg, .hs-umeta .hs-done { width: 14px; height: 14px; margin-right: 3px; vertical-align: -2px; }
.hs-umeta .hs-done svg { width: 14px; height: 14px; }
.hs-locknote { display: flex; align-items: center; gap: 8px; margin: 8px 2px 0; font-size: 13.5px; color: var(--ink-2); }
.hs-locknote svg { flex: none; width: 15px; height: 15px; color: var(--ink-3); }
.hs-locknote a { font-weight: 650; }
.hs-uhead .hs-pill { margin-top: 3px; }
.hs-dots { flex: none; display: flex; gap: 5px; }
.hs-dots i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--accent-line); }
.hs-dots i.going { border-color: var(--brand); background: linear-gradient(90deg, var(--brand) 50%, transparent 50%); }
.hs-dots i.done { border-color: #0b8a4c; background: #0b8a4c; }
.hs-dots i.shut { border-style: dashed; border-color: var(--line); }
.hs-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.hs-unit[open] > summary .hs-chev { transform: rotate(90deg); stroke: var(--brand); }
.hs-unit > .hs-shelf { margin: 0; padding: 4px 16px 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.hs-unit[open] > .hs-shelf { animation: hs-open .3s var(--ease); }
@keyframes hs-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.hs-unit .hs-card { box-shadow: none; background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
.hs-unit .hs-card.shut { background: transparent; }
.hs-unit .hs-name { font-size: 16.5px; font-weight: 720; }
.hs-sub { margin-top: -3px; font-size: 13px; color: var(--ink-2); line-height: 1.3; }
.hs-unit.done .hs-unum { color: #0b8a4c; background: color-mix(in srgb, var(--ok) 13%, transparent); }
.hs-unit.done .hs-umeta { color: #0b6b3c; font-weight: 600; }
.hs-unit.shut { background: transparent; box-shadow: none; border-style: dashed; }
.hs-unit.shut .hs-unum { color: var(--ink-3); background: var(--surface-2); }
.hs-unit.shut .hs-uname { color: var(--ink-2); }
/* homework on the other shelf, so it is not missed from this one */
a.hs-also { display: flex; align-items: center; gap: 10px; margin: -4px 0 16px; padding: 10px 14px; border-radius: 14px;
  background: var(--gold-soft); color: #6b4700; font-size: 14px; line-height: 1.35; }
a.hs-also:hover { text-decoration: none; filter: brightness(.98); }
a.hs-also > span:not(.hs-also-ico) { flex: 1; }
.hs-also-ico svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
a.hs-also .hs-chev { stroke: currentColor; }
/* the first page's way in: a door to each shelf */
.hs-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 22px; }
.hs-doors.one { grid-template-columns: 1fr; }
a.hs-door { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 16px 16px 15px;
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--card-line); box-shadow: var(--card-shadow);
  color: var(--ink); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
a.hs-door:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--card-shadow-up); border-color: var(--accent-line); }
.hs-door-ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 13px;
  color: var(--brand); background: var(--accent-soft); }
.hs-door + .hs-door .hs-door-ico { color: #8a5a00; background: var(--gold-soft); }
.hs-door-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.hs-door-t { font-size: 17px; font-weight: 720; letter-spacing: -.015em; }
.hs-door-s { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.hs-door .hs-bar { align-self: stretch; margin-top: 10px; }
.hs-door + .hs-door .hs-bar i { background: linear-gradient(90deg, #f2c24e, #d99a00); }
a.hs-next.slim { padding: 16px 18px 14px; }
a.hs-next.slim .hs-next-t { font-size: 17px; }
@media (prefers-color-scheme: dark) {
  .hs-unit.done .hs-unum, .hs-unit.done .hs-umeta { color: #4fd494; }
  .hs-dots i.done { border-color: #4fd494; background: #4fd494; }
  a.hs-also, .hs-door + .hs-door .hs-door-ico { color: #f2c24e; }
}
@media (max-width: 720px) {
  .hs-unit > summary { gap: 12px; padding: 11px 13px; }
  .hs-unit > .hs-shelf { grid-template-columns: 1fr; gap: 8px; padding: 2px 12px 12px; }
  .hs-unum { width: 40px; height: 40px; font-size: 16px; }
  .hs-doors { gap: 10px; }
  a.hs-door { padding: 14px 14px 13px; }
}

/* ============================================================================
   Nothing here yet
   An empty place says so calmly: a dashed outline, a small drawing, grey words -
   not a white card that looks as if something failed to load.
   ========================================================================== */
.card.empty-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px 18px 62px;
  background: transparent; border: 1px dashed var(--line); box-shadow: none; color: var(--ink-2); }
.card.empty-card::before { content: ""; position: absolute; left: 20px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  background: var(--ink-3); opacity: .75;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 13l2.4-7.2A1.5 1.5 0 0 1 7.8 4.8h8.4a1.5 1.5 0 0 1 1.4 1L20 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/><path d='M4 13h4.5a3.5 3.5 0 0 0 7 0H20'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 13l2.4-7.2A1.5 1.5 0 0 1 7.8 4.8h8.4a1.5 1.5 0 0 1 1.4 1L20 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/><path d='M4 13h4.5a3.5 3.5 0 0 0 7 0H20'/></svg>") center / contain no-repeat; }
.card.empty-card p { margin: 0; line-height: 1.55; }
.card.empty-card p.sub, .card.empty-card p.flush { color: var(--ink-2); }

/* the students' pages: a wider column on a laptop, so a page of cards is not a strip */
@media (min-width: 900px) {
  main.portal { max-width: 760px; }
  .student .topbar-in { max-width: 760px; }
}
/* the upload box: a drawing of what it takes, in the rail's plum */
.dropzone { padding: 26px 18px 22px; border-radius: var(--r-card); border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.dropzone::before { content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 14px;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23701589' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8.5A2 2 0 0 1 6 6.5h2l1.5-2h5l1.5 2h2a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/><circle cx='12' cy='13' r='3.6'/></svg>") center / 24px no-repeat;
  box-shadow: var(--card-shadow); }
.dropzone:hover::before { transform: translateY(-1px); }
.dropzone .dz-label { font-size: 15px; }

/* ============================================================================
   The teacher's list of handouts: one fold per level, a row per booklet
   ========================================================================== */
.h2-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 99px;
  font-size: 12px; font-weight: 700; color: var(--brand); background: var(--accent-soft); }
.hb-levels { display: grid; gap: 12px; margin: 0 0 8px; }
/* four doors at the head of the long Tests page, each with its count */
.jump { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-2); }
.jump a { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface);
  color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.jump a:hover { border-color: var(--accent-line); color: var(--brand); text-decoration: none; }
.jump span { min-width: 22px; padding: 0 var(--sp-1); border-radius: var(--r-full); text-align: center;
  background: var(--accent-soft); color: var(--brand); font-size: 12px; }
h2[id], h1[id] { scroll-margin-top: calc(var(--top-h, 60px) + var(--sp-4)); }
details.hb-level { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow); overflow: hidden; }
details.hb-level > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 18px;
  cursor: pointer; transition: background .15s var(--ease); }
details.hb-level > summary::-webkit-details-marker { display: none; }
details.hb-level > summary:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
details.hb-level .shelf-go { transition: transform .2s var(--ease); }
details.hb-level[open] .shelf-go { transform: rotate(90deg); stroke: var(--tone); opacity: 1; }
details.hb-level[open] > summary { border-bottom: 1px solid var(--card-line); }
.hb-list { list-style: none; margin: 0; padding: 4px 0; }
.hb-list.boxed { background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); margin: 0 0 18px; }
.hb-none { margin: 0 0 18px; padding: 10px 16px; border: 1px dashed var(--line); border-radius: 12px;
  color: var(--ink-3); font-size: 13.5px; }
h1.h1-next { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-soft); }
a.hb-title { color: var(--ink); text-decoration: none; }
a.hb-title:hover { color: var(--brand); }
.hb-badge.ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.hb-chip.risk { color: #9a4b00; background: color-mix(in srgb, #f59e0b 16%, transparent); }
.hb-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 11px 16px 11px 18px; border-top: 1px solid var(--line-soft); }
.hb-row:first-child { border-top: 0; }
.hb-row:hover { background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface)); }
.hb-badge { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-weight: 750; font-size: 14px;
  color: var(--brand); background: var(--accent-soft); font-variant-numeric: tabular-nums; }
.hb-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hb-title { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--ink-3); }
.hb-chip { padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 650; color: var(--ink-3); background: var(--surface-2); }
.hb-chip.set { color: var(--brand); background: var(--accent-soft); }
.hb-chip.open { color: #0b6b3c; background: color-mix(in srgb, var(--ok) 12%, transparent); }
.hb-acts { display: flex; gap: 6px; }
a.btn.small, button.small { padding: 6px 11px; font-size: 13px; line-height: 18px; border-radius: 9px; }
@media (prefers-color-scheme: dark) { .hb-chip.open { color: #4fd494; } }
@media (max-width: 720px) {
  .hb-row { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 11px 12px; align-items: start; }
  .hb-acts { grid-column: 2; }
  .hb-title { white-space: normal; }
}
@media (prefers-color-scheme: dark) { .hb-chip.risk { color: #fbbf24; } }

/* ============================================================================
   The students' shelves: the same cards as the teacher's, and files to open
   or play - nothing to tick, nothing to delete
   ========================================================================== */
.files.view .frow { grid-template-columns: 38px minmax(0, 1fr) 30px; }
.files.view .frow.listen { display: block; padding: 8px 12px 8px 10px; }
.files.view .lx { --lx-bg: var(--surface); --lx-line: var(--line); --lx-ink: var(--ink); --lx-soft: var(--ink-3);
  --lx-brand: var(--accent); --lx-track: var(--line-soft); gap: 12px; }
.files.view .lx .lx-play { width: 40px; height: 40px; }
.files.view .lx .lx-play svg { width: 19px; height: 19px; }
.files.view .lx .lx-label { font-size: 14.5px; }
.files.view .lx .lx-bar { height: 14px; }
.files.view .lx .lx-bar::before, .files.view .lx .lx-bar i { top: 5px; height: 4px; }
.files.view .lx.on { --lx-track: color-mix(in srgb, var(--accent) 18%, transparent); }
.files.view .frow.listen:has(.lx.on) { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
a.f-open { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--ink-3); }
a.f-open svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a.f-open:hover { background: var(--accent-soft); color: var(--brand); }
@media (max-width: 720px) {
  .files.view .frow { grid-template-columns: 34px minmax(0, 1fr) 28px; }
  .files.view .frow.listen { padding: 8px 8px 8px 8px; }
}
/* the student's results, newest first */
.rs-list { list-style: none; margin: 0 0 18px; padding: 4px 0; background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.rs-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "s n" "s m"; column-gap: 12px;
  align-items: center; padding: 10px 14px; border-top: 1px solid var(--line-soft); }
.rs-row:first-child { border-top: 0; }
.rs-score { grid-area: s; display: grid; place-items: center; height: 36px; border-radius: 11px; font-size: 13.5px;
  font-weight: 750; color: var(--brand); background: var(--accent-soft); font-variant-numeric: tabular-nums; }
.rs-name { grid-area: n; font-size: 14.5px; font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-meta { grid-area: m; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hs-badge.ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================================
   The answer key: one card per exercise, its instruction said once,
   a row per box - what it asks on the left, the answer on the right
   ========================================================================== */
.key-how { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-3); }
.kx { margin: 0 0 14px; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow); overflow: hidden; }
.kx-head { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--card-line);
  background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.kx-label { flex: none; padding: 2px 9px; border-radius: 8px; font-size: 13px; font-weight: 760; color: var(--brand);
  background: var(--accent-soft); font-variant-numeric: tabular-nums; }
.kx-text { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.kx-n { flex: none; font-size: 12.5px; color: var(--ink-3); }
.kq { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(220px, 42%); align-items: center; gap: 12px;
  padding: 9px 16px; border-top: 1px solid var(--line-soft); }
.kx-head + .kq, .kx.plain .kq:first-child { border-top: 0; }
.kq.unset { background: color-mix(in srgb, #f59e0b 6%, var(--surface)); }
.kq-n { font-size: 12.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kq-q { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.kq-q .hb-chip { margin-left: 6px; white-space: nowrap; }
.kq-a input.typedin { width: 100%; max-width: none; margin: 0; padding: 8px 11px; font-size: 14px; border-radius: 10px; }
.kq-picks { display: flex; flex-direction: column; gap: 4px; }
.kq-picks .keypick { margin: 0; }
.key-save { position: sticky; bottom: 12px; z-index: 6; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 18px 0 10px; padding: 10px 12px 10px 18px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--card-line); box-shadow: var(--card-shadow-up); }
.key-left { font-size: 13.5px; color: var(--ink-2); }
form.key-delete { margin: 0 0 24px; text-align: right; }
@media (max-width: 720px) {
  .kx-head { flex-wrap: wrap; gap: 6px 10px; padding: 11px 12px; }
  .kx-text { flex-basis: 100%; order: 3; }
  .kq { grid-template-columns: 28px minmax(0, 1fr); gap: 6px 8px; padding: 9px 12px; }
  .kq-a { grid-column: 2; }
  .key-save { bottom: calc(10px + env(safe-area-inset-bottom)); padding: 9px 10px 9px 14px; }
}
.key-save button { white-space: nowrap; }
@media (max-width: 720px) {
  .kq.bare { grid-template-columns: 28px 48px minmax(0, 1fr); }
  .kq.bare .kq-a { grid-column: auto; }
  .kq.bare .kq-q .hb-chip { display: none; }
  .key-left { font-size: 12.5px; }
}
/* the letters of a multiple choice, side by side: tap the right one */
.kq-picks { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.kq-picks .keypick { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 11px 5px 8px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface); cursor: pointer; font-size: 13.5px; }
.kq-picks .keypick input { margin: 0; accent-color: var(--brand); }
.kq-picks .keypick:has(input:checked) { border-color: var(--brand); background: var(--accent-soft); color: var(--brand); }
.key-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.key-chips .hb-chip { font-size: 12.5px; padding: 2px 10px; }
.pagehead .actions form { margin: 0; }
.key-note { margin: -6px 0 18px; font-size: 13.5px; max-width: 80ch; }
form.key-delete { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap;
  margin: 28px 0 24px; padding: 14px 16px 14px 18px; border-radius: var(--r-card); text-align: left;
  border: 1px dashed color-mix(in srgb, #c02a3c 35%, var(--card-line)); background: color-mix(in srgb, var(--warn-soft) 40%, transparent);
  font-size: 13.5px; color: var(--ink-3); }
.rs-row.with-act { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "s n a" "s m a"; }
.rs-act { grid-area: a; margin: 0; }

/* ============================================================================
   The league, as a student sees it: where I am in big type, the top three on
   their steps, and everyone else as a list a phone can read without sliding
   ========================================================================== */
.lg-hero { position: relative; overflow: hidden; margin: 0 0 18px; padding: 20px 20px 18px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #9b3fc0 0%, rgba(155, 63, 192, 0) 55%),
              linear-gradient(150deg, #5b1475 0%, #3a0b4c 60%, #2a0838 100%);
  box-shadow: 0 14px 34px -16px rgba(58, 11, 76, .7); }
.lg-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%;
  border: 26px solid rgba(255, 255, 255, .05); pointer-events: none; }
.lg-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.lg-rank { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.lg-big { font-size: 64px; font-weight: 800; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lg-big sup { font-size: 24px; font-weight: 750; vertical-align: top; position: relative; top: 6px; margin-left: 2px; }
.lg-big small { font-size: 26px; font-weight: 700; opacity: .7; }
.lg-of { display: flex; flex-direction: column; padding-bottom: 4px; font-size: 15px; font-weight: 650; line-height: 1.25; opacity: .92; }
.lg-of small { font-size: 12.5px; font-weight: 500; opacity: .75; }
.lg-total { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.lg-total b { font-size: 30px; font-weight: 780; line-height: 1; font-variant-numeric: tabular-nums; color: #ffd166; }
.lg-total small { font-size: 12px; opacity: .75; margin-top: 3px; }
.lg-say { margin: 14px 0 12px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.lg-say strong { color: #fff; }
.lg-hero a.findme { color: #ffd166; font-weight: 650; white-space: nowrap; }
.lg-parts { display: grid; gap: 8px; }
.lg-part { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 13.5px; }
.lg-plabel { color: rgba(255, 255, 255, .8); }
.lg-part b { text-align: right; font-variant-numeric: tabular-nums; }
.lg-pbar, .lg-sbar { display: block; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.lg-pbar i, .lg-sbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffd166, #ffb347); }
.lg-season { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12.5px; color: rgba(255, 255, 255, .75); }
.lg-sbar { height: 5px; }
.lg-sbar i { background: rgba(255, 255, 255, .7); }
.tabs.lg-tabs { margin-bottom: 14px; }

/* the top three on their steps */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin: 6px 0 14px; }
.pd-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.pd-ava { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 19px; font-weight: 760;
  color: #fff; background: var(--accent); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--pd, #c9b6d3); }
.pd1 .pd-ava { width: 58px; height: 58px; font-size: 23px; }
.pd-name { max-width: 100%; font-size: 13.5px; font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-pts { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pd-step { display: grid; place-items: start center; width: 100%; padding-top: 8px; border-radius: 14px 14px 6px 6px;
  font-size: 22px; font-weight: 800; color: rgba(255, 255, 255, .95); background: var(--pd); }
.pd1 { --pd: linear-gradient(180deg, #f4c542, #d99a1e); }
.pd2 { --pd: linear-gradient(180deg, #c9ced8, #9aa2b1); }
.pd3 { --pd: linear-gradient(180deg, #e0a174, #b8703f); }
.pd1 .pd-ava { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #f4c542; }
.pd2 .pd-ava { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #b4bac6; }
.pd3 .pd-ava { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #cf8a59; }
.pd1 .pd-step { height: 74px; } .pd2 .pd-step { height: 54px; } .pd3 .pd-step { height: 40px; font-size: 19px; }
.pd-col.me .pd-name { color: var(--brand); }

/* everyone, as rows */
.lg-list { list-style: none; margin: 0 0 14px; padding: 4px 0; background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.lg-row { display: grid; grid-template-columns: 30px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 14px 10px 12px; border-top: 1px solid var(--line-soft); scroll-margin-top: calc(var(--top-h, 64px) + 20px); }
.lg-row:first-child { border-top: 0; }
.lg-row.me { background: color-mix(in srgb, var(--accent-soft) 75%, var(--surface)); box-shadow: inset 3px 0 0 var(--brand); }
.lg-place { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 750;
  color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lg-place.p1 { color: #6b4a00; background: linear-gradient(180deg, #ffe08a, #f2b632); }
.lg-place.p2 { color: #3d4452; background: linear-gradient(180deg, #e8ebf0, #b9c0cc); }
.lg-place.p3 { color: #5a2e10; background: linear-gradient(180deg, #f0bf98, #cf8a59); }
.lg-ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 14px; font-weight: 720;
  color: var(--brand); background: var(--accent-soft); }
.lg-row.me .lg-ava { color: #fff; background: var(--accent); }
.lg-who { display: flex; flex-direction: column; min-width: 0; }
.lg-name { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-you { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 99px; font-size: 11px; font-weight: 700;
  color: #fff; background: var(--brand); vertical-align: 1px; }
.lg-meta { margin-top: 2px; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-cls { color: var(--ink-2); font-weight: 600; }
.lg-val { display: flex; flex-direction: column; align-items: flex-end; }
.lg-val b { font-size: 16px; font-weight: 760; font-variant-numeric: tabular-nums; }
.lg-val small { font-size: 11px; color: var(--ink-3); }
.lg-line { padding: 8px 14px; border-top: 1px dashed var(--line); font-size: 12px; font-weight: 600; color: var(--ink-3);
  background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
.lg-line + .lg-row { border-top: 0; }
details.lg-how { margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--card-line); background: var(--surface); }
details.lg-how summary { cursor: pointer; font-size: 14px; font-weight: 650; color: var(--ink-2); }
details.lg-how p { margin: 10px 0 2px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 720px) {
  .lg-hero { padding: 18px 16px 16px; border-radius: 20px; }
  .lg-big { font-size: 56px; }
  .lg-part { grid-template-columns: 88px minmax(0, 1fr) 40px; }
  .lg-row { grid-template-columns: 28px 32px minmax(0, 1fr) auto; gap: 9px; padding: 9px 12px 9px 10px; }
  .lg-ava { width: 32px; height: 32px; font-size: 13px; }
}

/* ============================================================================
   Play: four doors, books as cards, and each book's steps as a path you
   climb - passed steps green, the one to play now glowing, the rest locked
   ========================================================================== */
.pl-back { margin: 0 0 10px; font-size: 14px; }
.pl-back a { color: var(--ink-3); font-weight: 600; }
.pl-bar { display: block; height: 6px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.pl-bar.light { background: rgba(255, 255, 255, .22); }
.pl-bar.light i { background: #fff; }

.pl-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 8px; }
a.pl-door { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; min-height: 150px;
  padding: 16px 16px 16px; border-radius: 20px; color: #fff; text-decoration: none;
  box-shadow: 0 12px 26px -14px var(--door-shadow, rgba(0, 0, 0, .5)); transition: transform .15s var(--ease); }
a.pl-door:active { transform: scale(.97); }
a.pl-door::after { content: ""; position: absolute; right: -26px; bottom: -26px; width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); }
a.pl-door.vocab { background: linear-gradient(150deg, #2f86e8, #1452a8); --door-shadow: rgba(20, 82, 168, .7); }
a.pl-door.grammar { background: linear-gradient(150deg, #27a866, #126b3f); --door-shadow: rgba(18, 107, 63, .7); }
a.pl-door.exam { background: linear-gradient(150deg, #c07a35, #7d4512); --door-shadow: rgba(125, 69, 18, .7); }
a.pl-door.battle { background: linear-gradient(150deg, #e0476e, #8f1c3c); --door-shadow: rgba(143, 28, 60, .7); }
.pl-door-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: auto; border-radius: 12px;
  background: rgba(255, 255, 255, .18); }
.pl-door-ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pl-door-t { margin-top: 14px; font-size: 21px; font-weight: 780; letter-spacing: -.02em; }
.pl-door-m { font-size: 13px; color: rgba(255, 255, 255, .85); }
a.pl-door .pl-bar { margin-top: 6px; }
.pl-ping { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 99px; font-size: 13px; font-weight: 800; color: #8f1c3c; background: #fff; animation: pl-ping 1.6s var(--ease) infinite; }
@keyframes pl-ping { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } }

/* the books */
.pl-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0 0 18px; }
a.pl-book { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "i t" "i m" "b b"; column-gap: 12px; row-gap: 2px;
  align-items: center; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); color: var(--ink);
  border: 1px solid var(--card-line); box-shadow: var(--card-shadow); text-decoration: none; }
a.pl-book:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--card-line)); }
.pl-book-ico { grid-area: i; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #1452a8;
  background: color-mix(in srgb, #2f86e8 13%, transparent); }
a.pl-book.exam .pl-book-ico { color: #7d4512; background: color-mix(in srgb, #c07a35 14%, transparent); }
.pl-book-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pl-book-t { grid-area: t; font-size: 15px; font-weight: 680; line-height: 1.3; }
.pl-book-m { grid-area: m; font-size: 12.5px; color: var(--ink-3); }
a.pl-book .pl-bar { grid-area: b; margin-top: 10px; }

/* a book's steps, as a path */
.lad-sum { display: grid; gap: 8px; margin: -4px 0 18px; font-size: 13.5px; color: var(--ink-2); }
ol.lad { list-style: none; margin: 0 0 18px; padding: 0; position: relative; }
ol.lad::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 3px; border-radius: 3px;
  background: var(--line); }
.lad-step { position: relative; margin: 0 0 10px; }
.lad-step > a, .lad-step > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none; }
.lad-node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--line); color: var(--ink-3); }
.lad-node svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lad-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 12px 11px 14px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--card-line); box-shadow: var(--card-shadow); }
.lad-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lad-no { font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.lad-t { font-size: 15px; font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lad-n { font-size: 12.5px; color: var(--ink-3); }
.lad-step.passed .lad-node { background: #1a9a5a; border-color: #1a9a5a; color: #fff; }
.lad-step.passed .lad-no { color: #1a8a52; }
.lad-step.open .lad-node { background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); animation: lad-glow 2s var(--ease) infinite; }
.lad-step.open .lad-node svg { fill: currentColor; stroke-width: 1; }
.lad-step.open .lad-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--card-line));
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.lad-step.open .lad-no { color: var(--brand); }
.lad-go { padding: 8px 16px; border-radius: 99px; font-size: 14px; font-weight: 750; color: #fff; background: var(--accent); }
.lad-step.locked .lad-card { background: transparent; box-shadow: none; border-style: dashed; }
.lad-step.locked .lad-t { color: var(--ink-3); }
@keyframes lad-glow { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 6%, transparent); } }
@media (prefers-reduced-motion: reduce) { .lad-step.open .lad-node, .pl-ping { animation: none; } }

/* one step: what it is, and the button */
.pl-hero { position: relative; overflow: hidden; margin: 0 0 6px; padding: 20px; border-radius: 22px; color: #fff;
  background: linear-gradient(150deg, #2f86e8, #1452a8); }
.pl-hero.grammar { background: linear-gradient(150deg, #27a866, #126b3f); }
.pl-hero.exam { background: linear-gradient(150deg, #c07a35, #7d4512); }
.pl-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); }
.pl-hero-k { font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
h2.pl-hero-t { margin: 4px 0 6px; padding: 0; border: 0; font-size: 26px; font-weight: 780; letter-spacing: -.02em; color: #fff; }
h2.pl-hero-t::after { display: none; }
.pl-hero-p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.pl-hero-s { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 4px 11px; border-radius: 99px;
  font-size: 13.5px; background: rgba(255, 255, 255, .16); }
.pl-ok svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.pl-hero form { margin: 0; }
button.pl-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 18px;
  border: 0; border-radius: 16px; font-size: 18px; font-weight: 800; color: #1c0f22; background: #fff;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45); }
button.pl-go:active { transform: scale(.98); }
.pl-go-ico svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.pl-hero-me { margin: 12px 0 0; font-size: 13px; color: rgba(255, 255, 255, .85); }
.pl-hero-me strong { color: #fff; }
.pl-locked { margin: 0 0 18px; padding: 26px 20px; text-align: center; border-radius: 20px; background: var(--surface);
  border: 1px dashed var(--line); }
.pl-locked h2 { margin: 10px 0 6px; padding: 0; border: 0; }
.pl-locked h2::after { display: none; }
.pl-locked p { margin: 0 0 16px; color: var(--ink-2); }
.pl-lock { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--ink-3);
  background: var(--surface-2); }
.pl-lock svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (max-width: 720px) {
  a.pl-door { min-height: 138px; padding: 14px; border-radius: 18px; }
  .pl-door-t { font-size: 19px; }
  .pl-books { grid-template-columns: 1fr; }
}
.pl-hero.battle { background: linear-gradient(150deg, #e0476e, #8f1c3c); margin-bottom: 14px; }
.pl-hero-k .pl-ok svg { width: 14px; height: 14px; vertical-align: -2px; stroke-width: 2.2; }
.bt-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.bt-pair .card { margin: 0; }

/* ============================================================================
   A round of Play: a stage of its own, the twenty questions as a bar along
   the top, and the time left as a bar that runs out under the word
   ========================================================================== */
.solo-stage { margin: -6px -4px 0; padding: 16px 14px 18px; border-radius: 24px; min-height: calc(100dvh - 104px);
  background: radial-gradient(120% 80% at 100% 0%, rgba(155, 63, 192, .55) 0%, rgba(155, 63, 192, 0) 60%),
              linear-gradient(170deg, #4a1160 0%, #2a0838 70%, #1f062a 100%);
  box-shadow: 0 18px 40px -22px rgba(42, 8, 56, .9); }
.solo-stage .solotitle { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .7); }
.solo-stage .solobar { flex-wrap: wrap; align-items: baseline; row-gap: 8px; color: rgba(255, 255, 255, .85); margin-bottom: 12px; }
.solo-stage .solobar strong { color: #ffd166; font-size: 17px; }
.sprog { flex-basis: 100%; order: 3; display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.sprog i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffd166, #ff9f43);
  transition: width .4s var(--ease); }
.solo-stage .gcard { border: 0; border-radius: 20px; padding: 18px 16px 16px; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55); }
.solo-stage .gclock { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 20px;
  font-weight: 800; color: var(--brand); background: var(--accent-soft); font-variant-numeric: tabular-nums; }
.gtime { height: 6px; margin: 12px 4px 0; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.gtime i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width 1s linear, background .3s; }
.gtime i.low { background: #e5484d; }
.solo-stage .gopts { gap: 10px; }
.solo-stage .gopt { min-height: 96px; border-radius: 18px; font-size: 16.5px; font-weight: 700;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .25); transition: transform .08s var(--ease), box-shadow .08s var(--ease); }
.solo-stage .gopt:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.solo-stage .gshape { display: block; margin-bottom: 6px; font-size: 18px; opacity: .9; }
.solo-stage .gcard.right { background: linear-gradient(160deg, #e8fbf1, #c9f2dc); }
.solo-stage .gcard.wrong { background: linear-gradient(160deg, #fff1f1, #ffd9da); }
.solo-stage h3 { color: #fff; }
.solo-stage .solorev { border: 0; }
.solo-stage p.gap-3 a.tab { color: #fff; }
.solo-stage > #play > p { color: rgba(255, 255, 255, .9); }
.solo-stage form button.big { background: #fff; color: #2a0838; font-weight: 800; border-radius: 16px; }
@media (min-width: 900px) { .solo-stage { max-width: 640px; margin: 0 auto; padding: 22px 22px 24px; } }
@media (min-width: 721px) { .podium { max-width: 520px; margin-left: auto; margin-right: auto; } }

/* the certificate: IELTS Zone's eagle at the head, faint behind the scores,
   and on the stamp where a centre would put its own */
.cert-logo { width: 3.6cqw; height: 3.6cqw; object-fit: contain; }
.cert-brand { gap: 1cqw; color: #33003f; font-weight: 700; letter-spacing: .2em; }
.cert-watermark img { width: 42cqw; height: 42cqw; object-fit: contain; opacity: .045; }
.cert-stamp { position: absolute; right: 5.2cqw; bottom: 6.2cqw; width: 13cqw; height: 13cqw; color: #5b1475;
  opacity: .78; transform: rotate(-12deg); pointer-events: none; }
.cert-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cert-stamp img { position: absolute; left: 31%; top: 31%; width: 38%; height: 38%; object-fit: contain; }

/* ============================================================================
   My goal, as a score report: IELTS Zone's own paper - lilac waves, a line of
   tiny "TARGET · NOT A TEST RESULT" print all over it, and a ribbon - with
   the student's details, a box per part, and the stamp of the school
   ========================================================================== */
.cert.tr { background: linear-gradient(160deg, #fdfbff 0%, #f6f0fa 55%, #efe6f5 100%); color: #1f0d27;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; border-radius: 8px; }
.tr-paper { position: absolute; inset: 0; width: 100%; height: 100%; color: #5b1475; }
.tr-waves { opacity: .07; }
.tr-microprint { opacity: .06; }
.tr-ribbon { position: absolute; top: 3.2cqw; right: -6.4cqw; width: 26cqw; padding: .7cqw 0; transform: rotate(35deg);
  text-align: center; font-size: 1.7cqw; font-weight: 800; letter-spacing: .4em; color: #fff;
  background: linear-gradient(90deg, #c8961e, #f2c94c, #c8961e); box-shadow: 0 .3cqw .8cqw rgba(60, 30, 0, .25); }
.tr-inner { position: relative; height: 100%; display: flex; flex-direction: column; gap: 1.4cqw; padding: 3.4cqw 4.4cqw 2.4cqw; }
.tr-head { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding-bottom: 1.4cqw;
  border-bottom: .25cqw solid #33003f; }
.tr-brand { display: flex; align-items: center; gap: 1.4cqw; }
.tr-brand img { width: 6.4cqw; height: 6.4cqw; object-fit: contain; }
.tr-brand b { display: block; font-size: 2.9cqw; font-weight: 800; letter-spacing: .16em; color: #33003f; }
.tr-brand span { display: block; margin-top: .3cqw; font-size: 2.2cqw; font-weight: 600; color: #5b1475; }
.tr-kind { display: flex; flex-direction: column; align-items: flex-end; margin-right: 7cqw; font-size: 1.4cqw;
  text-transform: uppercase; letter-spacing: .12em; color: #7a6784; }
.tr-kind b { margin-top: .3cqw; font-size: 1.9cqw; letter-spacing: .04em; color: #1f0d27; font-variant-numeric: tabular-nums; }
.tr-sec h4, .tr-comment h4 { margin: 0 0 .8cqw; font-size: 1.35cqw; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #5b1475; }
.tr-who { display: flex; gap: 2.4cqw; align-items: stretch; }
.tr-fields { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: .9cqw 1.2cqw; }
.tr-f { display: flex; flex-direction: column; gap: .2cqw; padding: .6cqw 1cqw; border-radius: .6cqw;
  background: rgba(255, 255, 255, .72); border: .12cqw solid #dccfe3; }
.tr-f.wide { grid-column: 1 / -1; }
.tr-f span { font-size: 1.15cqw; text-transform: uppercase; letter-spacing: .1em; color: #7a6784; }
.tr-f b { font-size: 2cqw; font-weight: 700; color: #1f0d27; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-photo .cert-photo { width: 9.6cqw; height: 12cqw; border-radius: .5cqw; }
.tr-scores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1cqw; }
.tr-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4cqw; padding: 1.1cqw .5cqw 1.2cqw;
  border-radius: .8cqw; background: #fff; border: .15cqw solid #cdb7da; text-align: center; }
.tr-k { font-size: 1.2cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #7a6784; }
.tr-v { font-size: 4.2cqw; font-weight: 800; line-height: 1; color: #33003f; font-variant-numeric: tabular-nums; }
.tr-box.overall { background: linear-gradient(160deg, #4a1160, #2a0838); border-color: #2a0838; }
.tr-box.overall .tr-k { color: rgba(255, 255, 255, .8); }
.tr-box.overall .tr-v { color: #ffd166; }
.tr-box.cefr { background: #fbf6e6; border-color: #e3cf96; }
.tr-box.cefr .tr-v { color: #8a6413; }
.tr-foot { position: relative; display: flex; align-items: flex-end; gap: 2cqw; margin-top: auto; }
.tr-comment { flex: 1; padding: 1.2cqw 1.4cqw; border-radius: .8cqw; background: rgba(255, 255, 255, .72); border: .12cqw solid #dccfe3; }
.tr-comment p { margin: 0 0 .6cqw; font-size: 1.75cqw; line-height: 1.45; color: #3c2a45; }
.tr-sign { display: flex; align-items: baseline; gap: 1.2cqw; }
.tr-sign .sig { font: 2.6cqw/1 'Snell Roundhand', 'Apple Chancery', 'Segoe Script', cursive; color: #3c1149; }
.tr-sign .line { flex: 0 0 14cqw; border-bottom: .12cqw solid #8d7a9a; }
.tr-sign .who { white-space: nowrap; font-size: 1.25cqw; text-transform: uppercase; letter-spacing: .1em; color: #7a6784; }
.cert-stamp.tr-stamp { position: relative; right: auto; bottom: auto; flex: none; width: 12.5cqw; height: 12.5cqw; margin: 0 1.5cqw 0 0; }
.tr-note { margin: 0; font-size: 1.2cqw; line-height: 1.35; text-align: center; color: #7a6784; }
@media print { .cert.tr { background: #fdfbff; } }
.tr-head { padding-right: 9cqw; }
.lg-count { display: grid; grid-template-columns: 108px minmax(0, 1fr) 44px; align-items: center; gap: 10px; }
.lg-count b { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.lg-count .lg-sbar { height: 6px; }
.lg-count:first-of-type .lg-sbar i { background: linear-gradient(90deg, #ffd166, #ffb347); }

/* ============================================================================
   The microphone: a meter that moves when it hears you, the time, and a line
   that says what is happening - in red, with what to do, when it cannot
   ========================================================================== */
.voice-row { flex-wrap: wrap; }
.rec-vu { display: inline-block; width: 90px; height: 8px; border-radius: 99px; background: var(--line-soft);
  overflow: hidden; vertical-align: middle; }
.rec-vu[hidden] { display: none; }
.rec-vu i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #27a866, #f2c94c);
  transition: width .1s linear; }
.rec-clock { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 2.6em; }
.rec-say { flex-basis: 100%; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.rec-say:empty { display: none; }
.rec-say.live { color: #1a8a52; font-weight: 600; }
.rec-say.ask { color: var(--brand); font-weight: 600; }
.rec-say.warn { color: #9a5b00; font-weight: 600; }
.rec-say.ok { color: #1a8a52; }
.rec-say.error { padding: 8px 10px; border-radius: 10px; color: #a8202f; background: var(--warn-soft);
  border: 1px solid var(--warn-line); font-weight: 600; }

/* ============================================================================
   A speaking task's recorder, in the handout: three steps (Record · Listen ·
   Send), the student's own notes above a big round button whose ring fills
   up to the least the task needs, their take to hear before it goes, the
   task's "check yourself" ticks beside Send - and, once sent, the recording
   and the teacher's answer when it comes. speak.js moves the notes and the
   ticks in; without it the card is the button, the clock and the take.
   ========================================================================== */
.bk-recp { margin: 14px 0 8px; }
.bk-rec { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px;
  background: linear-gradient(165deg, #fdfaff, #f4ecf9); border: 1.5px solid #e2d3ea;
  box-shadow: 0 1px 2px rgba(28, 15, 34, .04), 0 10px 28px -16px rgba(91, 20, 117, .35);
  font-family: var(--hx-sans); }
.bk-rec.has:not(.has-take) { border-color: #b5e5cb; background: linear-gradient(165deg, #f6fdf9, #e9f8f0); }
.bk-rec-head { display: flex; align-items: center; gap: 12px; }
.bk-rec-mic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff;
  background: linear-gradient(150deg, #9b3fc0, #5b1475); }
.bk-rec.has:not(.has-take) .bk-rec-mic { background: linear-gradient(150deg, #27a866, #126b3f); }
.bk-rec-mic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bk-rec-head b { display: block; font-size: 16px; line-height: 1.3; color: var(--hx-ink); }
.bk-rec-head small { display: block; margin-top: 1px; font-size: 13px; color: var(--hx-ink-3); }

/* Record · Listen · Send */
.bk-rec-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: rec-step; }
.bk-rec-steps li { counter-increment: rec-step; flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  gap: 6px; min-width: 0; padding: 6px 4px; border-radius: 99px; font-size: 13px; font-weight: 700;
  color: var(--hx-ink-3); background: rgba(255, 255, 255, .75); border: 1px solid var(--hx-line);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.bk-rec-steps li::before { content: counter(rec-step); flex: none; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 11px; background: var(--hx-line); color: var(--hx-ink-2); }
.bk-rec-steps li.on { color: #fff; background: var(--hx-brand); border-color: var(--hx-brand); }
.bk-rec-steps li.on::before { background: #fff; color: var(--hx-brand); }
.bk-rec-steps li.done { color: var(--hx-ok); background: #f1fbf5; border-color: #bfe8d2; }
.bk-rec-steps li.done::before { content: "\2713"; background: var(--hx-ok); color: #fff; }

/* the small headings inside the card */
.bk-rec-h { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hx-brand); }
.bk-rec-h em { display: block; margin-top: 2px; font-size: 13px; font-style: normal; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--hx-ink-3); }
/* the recording sent and the teacher's answer sit by the button; the ticks, Send and "I can't record" under them */
.bk-rec-check { order: 2; }
.bk-rec-acts { order: 3; }
.bk-rec-cantmsg, button.bk-rec-cant { order: 4; }

/* the student's notes, to look at while talking */
.bk-rec-notes { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--hx-line);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.bk-rec-notes[hidden] { display: none; }
.bk-rec-topic { margin: 6px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--hx-deep); }
.bk-rec-notes ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.bk-rec-notes li { display: grid; gap: 1px; padding-left: 11px; border-left: 3px solid var(--hx-chip); }
.bk-rec-notes li small { font-size: 12px; line-height: 1.3; color: var(--hx-ink-3); }
.bk-rec-notes li span { font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--hx-ink); overflow-wrap: anywhere; }
.bk-rec-notes li span.empty { font-weight: 500; font-style: italic; color: var(--hx-ink-3); }
.bk-rec.is-live .bk-rec-notes { border-color: var(--hx-brand); box-shadow: 0 0 0 3px rgba(112, 21, 137, .12); }
.bk-rec.is-live .bk-rec-notes li { border-left-color: var(--hx-brand); }

/* the button, its ring, the clock - the same round button records in Get ready (.gr-rec) */
.bk-rec-stage { display: flex; align-items: center; gap: 16px; }
button.rec-go { position: relative; flex: none; display: grid; place-items: center; width: 88px; height: 88px;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
button.rec-go:hover { filter: none; }
button.rec-go::before { content: ""; position: absolute; inset: 11px; border-radius: 50%;
  background: linear-gradient(150deg, #8a2aa8, #4a0f60); box-shadow: 0 6px 16px -6px rgba(91, 20, 117, .75);
  transition: transform .15s var(--ease); }
button.rec-go:active::before { transform: scale(.93); }
button.rec-go:focus-visible { outline: 3px solid var(--hx-brand, var(--brand)); outline-offset: 2px; }
button.rec-go .dot { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #ff5a6a;
  box-shadow: none; transition: border-radius .2s var(--ease), width .2s var(--ease), height .2s var(--ease); }
.rec-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.rec-ring circle { fill: none; stroke-width: 6; }
.rec-ring-track { stroke: var(--rec-track, var(--line-soft)); }
.rec-ring-fill { stroke: var(--hx-brand, var(--brand)); stroke-linecap: round; stroke-dasharray: 251.33; stroke-dashoffset: 251.33;   /* 2 x pi x 40 */
  transition: stroke-dashoffset .25s linear, stroke .3s; }
.enough .rec-ring-fill, .bk-rec.has:not(.is-live):not(.has-take) .rec-ring-fill { stroke: var(--hx-ok, #0b8a4c); }
.bk-rec.has:not(.is-live):not(.has-take) .rec-ring-fill { stroke-dashoffset: 0; }
.bk-rec { --rec-track: #eadff0; }
.is-live button.rec-go::before { background: linear-gradient(150deg, #e0485a, #a51d30);
  animation: rec-pulse 1.4s ease-in-out infinite; }
.is-live button.rec-go .dot { width: 20px; height: 20px; border-radius: 4px; background: #fff; animation: none; }
@keyframes rec-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 42, 60, .45); } 50% { box-shadow: 0 0 0 9px rgba(192, 42, 60, 0); } }
@media (prefers-reduced-motion: reduce) { .is-live button.rec-go::before { animation: none; } }
.bk-rec-side { display: grid; gap: 5px; min-width: 0; }
.bk-rec-time { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.bk-rec-clock { font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--hx-deep); }
.bk-rec.enough .bk-rec-clock { color: var(--hx-ok); }
.bk-rec-need { font-size: 13px; font-weight: 600; color: var(--hx-ink-3); white-space: nowrap; }
.bk-rec-state { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--hx-ink-2); }
.bk-rec .rec-vu { width: 100%; max-width: 160px; }
.bk-rec .rec-say { margin: 0; }
.bk-rec select.mic-pick { flex-basis: 100%; }

/* their take: hear it, tick what they did, then send */
.bk-rec-take { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #fff;
  border: 1.5px solid var(--hx-brand); }
.bk-rec-take[hidden] { display: none; }
.bk-rec-take audio, .bk-rec-have audio { width: 100%; height: 44px; }
.bk-rec-check { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--hx-line); }
.bk-rec-check[hidden] { display: none; }
.bk-rec-check ul { display: grid; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; }
.bk-rec-check li { display: flex; align-items: center; gap: 12px; padding: 4px 0; font-size: 15px; line-height: 1.35;
  color: var(--hx-ink); cursor: pointer; }
.bk-rec-check li .bk-tick { flex: none; margin: 0; }
.bk-rec-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bk-rec:not(.has-take) .bk-rec-acts { display: none; }
button.bk-rec-send { flex: 1 1 180px; min-height: 48px; padding: 10px 18px; border: 0; border-radius: 99px;
  font-size: 16px; font-weight: 700; color: #fff; background: linear-gradient(150deg, #8a2aa8, #4a0f60);
  box-shadow: 0 6px 16px -8px rgba(91, 20, 117, .8); }
button.bk-rec-send[hidden] { display: none; }
button.bk-rec-send:disabled { opacity: .7; }
button.bk-rec-again { flex: 0 1 auto; min-height: 48px; border-radius: 99px; }
button.bk-rec-keep { font-size: 13px; }

/* sent */
.bk-rec-have { display: grid; gap: 4px; }
.bk-rec-have[hidden], .bk-rec.has-take .bk-rec-have, .bk-rec.is-live .bk-rec-have { display: none; }
.bk-rec-len { font-size: 13px; font-weight: 700; color: var(--hx-ok); }
.bk-rec-cantmsg { margin: 0; font-size: 13px; color: #9a5b00; }
.bk-rec-cantmsg[hidden], .bk-rec-cant[hidden] { display: none; }
button.bk-rec-cant { align-self: flex-start; font-size: 12.5px; color: var(--hx-ink-3); }
button.bk-rec-cant.armed { color: #a8202f; font-weight: 700; }
.bk-rec-fb { padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #dccfe3; }
.bk-rec-fb audio { width: 100%; height: 40px; margin-top: 6px; }
.bk-rec-fb .fb-note { margin: 6px 0 0; }

/* the teacher's Speaking page */
.tab-n { display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-left: 4px; padding: 0 6px;
  border-radius: 99px; font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--brand); }
.sp-list { display: grid; gap: 12px; }
.sp-card { display: grid; gap: 10px; margin: 0; }
.sp-who { display: flex; align-items: center; gap: 10px; }
.sp-who small { display: block; font-size: 12.5px; color: var(--ink-3); }
.sp-play { display: flex; align-items: center; gap: 10px; }
.sp-play audio, .sp-fbv audio { flex: 1; min-width: 0; height: 40px; }
.sp-len { font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sp-form { display: grid; gap: 8px; }
.sp-form textarea { width: 100%; }
.sp-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-rec .dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: #e5484d; }
.sp-rec.live { color: #fff; background: #c02a3c; border-color: #c02a3c; }
.sp-fbv { display: flex; align-items: center; gap: 10px; }
.sp-card.cant { border-style: dashed; }
.sp-cant { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.fb-mic { width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: var(--brand); stroke-width: 2; }
/* which microphone: shown once the browser names them, when there is more than one */
select.mic-pick { max-width: 100%; padding: 6px 10px; border-radius: 10px; font-size: 13px; }
select.mic-pick[hidden] { display: none; }

/* ---------------------------------------------- the home-screen app card (Me page) */
.app-add {
  position: relative; display: flex; gap: var(--sp-4); align-items: flex-start;
  border-color: var(--accent-line);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%);
}
.app-add[hidden] { display: none; }
.app-add-ico { flex: none; width: 56px; height: 56px; border-radius: 14px; box-shadow: var(--shadow-1); }
.app-add-txt { min-width: 0; flex: 1; padding-right: var(--sp-5); }
.app-add h3 { margin: 0 0 var(--sp-1); font-size: 16px; }
.app-add .sub { margin: 0 0 var(--sp-3); }
.app-add .uz { display: block; margin-top: var(--sp-1); font-size: 13px; color: var(--ink-3); }
.app-add-way[hidden] { display: none; }
.app-add-way p { margin: 0 0 var(--sp-3); }
.app-add-steps { margin: 0; padding-left: var(--sp-5); }
.app-add-steps li { margin-bottom: var(--sp-2); }
.app-add-share { width: 17px; height: 17px; vertical-align: -3px; fill: none; stroke: var(--brand);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-add-x {
  position: absolute; top: var(--sp-2); right: var(--sp-2); width: 30px; height: 30px; padding: 0;
  border-radius: var(--r-full); background: transparent; color: var(--ink-3);
  font-size: 20px; line-height: 30px; font-weight: 400;
}
.app-add-x:hover { background: var(--line-soft); filter: none; }
.app-tell { display: flex; gap: var(--sp-4); align-items: flex-start; border-color: var(--accent-line); }
.app-tell .app-add-ico { width: 48px; height: 48px; border-radius: 12px; }
.app-tell-lang { margin: 0 0 var(--sp-2); }
.app-tell-lang summary { cursor: pointer; font-weight: 560; }
.app-tell-text { white-space: pre-wrap; font: inherit; font-size: 14px; margin: var(--sp-2) 0 0;
  padding: var(--sp-3); border-radius: var(--r-sm); background: var(--line-soft); }
@media (max-width: 560px) {
  .app-add, .app-tell { gap: var(--sp-3); }
  .app-add .app-add-ico { width: 44px; height: 44px; border-radius: 11px; }
  .app-tell .app-add-ico { display: none; }
}

/* ---------------------------------------------------- marking a lesson (/mark)
 * One page, one tap a student. The five numbers carry their own colour, red
 * to green, so a class can be read at a glance: each card takes the colour of
 * its mark down its left edge, an absent student goes grey, and the bar at
 * the bottom fills as the class is done. */
:root {
  --mk-1: #e5484d; --mk-2: #ef7a32; --mk-3: #d99a00; --mk-4: #3fa45b; --mk-5: #0b8a4c;
  --mk-ok-soft: #e6f6ec;
}
@media (prefers-color-scheme: dark) {
  :root { --mk-1: #ff6e71; --mk-2: #ff9a5c; --mk-3: #f5c542; --mk-4: #6fd08a; --mk-5: #22d67f;
          --mk-ok-soft: #12291c; }
}
.mk-n[data-v="1"], .mk-card[data-mark="1"] { --c: var(--mk-1); }
.mk-n[data-v="2"], .mk-card[data-mark="2"] { --c: var(--mk-2); }
.mk-n[data-v="3"], .mk-card[data-mark="3"] { --c: var(--mk-3); }
.mk-n[data-v="4"], .mk-card[data-mark="4"] { --c: var(--mk-4); }
.mk-n[data-v="5"], .mk-card[data-mark="5"] { --c: var(--mk-5); }

.mk-today-ico svg, .mk-chip-ico svg, .mk-st-ico svg, .mk-go-ico svg, .mk-step-ico svg, .mk-sw-ico svg,
.mk-tool svg {
  display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Today: the classes, one tap each */
.mk-today {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
}
.mk-today-h { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink);
  font-size: 15px; font-weight: 650; text-decoration: none; }
.mk-today-h:hover { color: var(--brand); text-decoration: none; }
.mk-today-ico { color: var(--brand); }
.mk-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mk-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: transform .14s var(--ease), border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.mk-chip:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--brand); box-shadow: var(--card-shadow); }
.mk-chip b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.mk-chip small { font-size: 12px; color: var(--ink-3); }
.mk-chip.due { background: var(--accent-soft); border-color: var(--accent-line); }
.mk-chip.due small { color: var(--brand); font-weight: 600; }
.mk-chip.done { background: var(--mk-ok-soft); border-color: color-mix(in srgb, var(--mk-5) 30%, var(--line)); }
.mk-chip.done small, .mk-chip-ico { color: var(--mk-5); }

/* the classes */
.mk-classes { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mk-class {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2); overflow: hidden;
  padding: var(--sp-5); background: var(--surface); color: var(--ink); text-decoration: none;
  border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.mk-class:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--card-shadow-up); }
.mk-class::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: transparent; }
.mk-class.due::before { background: linear-gradient(90deg, var(--brand-deep), var(--brand), var(--brand-lift)); }
.mk-class.done::before { background: var(--mk-5); }
.mk-class-name { font-size: 34px; font-weight: 720; letter-spacing: -.035em; line-height: 1.1; }
.mk-class-meta { font-size: 13px; color: var(--ink-3); }
.mk-class-state {
  display: inline-flex; align-items: center; gap: var(--sp-1); width: fit-content;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
  background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-weight: 600;
}
.mk-class.due .mk-class-state { background: var(--accent-soft); color: var(--brand); }
.mk-class.done .mk-class-state { background: var(--mk-ok-soft); color: var(--mk-5); }
.mk-class-go {
  display: flex; align-items: center; justify-content: space-between; margin-top: auto;
  padding: var(--sp-2) var(--sp-4); border-radius: 12px; font-size: 15px; font-weight: 650;
  background: linear-gradient(100deg, var(--brand-deep) 0%, var(--brand) 62%, var(--brand-lift) 100%);
  color: var(--accent-ink);
}
.mk-class.done .mk-class-go { background: var(--surface-2); color: var(--ink-2); }
.mk-classes .mk-class-state + .mk-class-go { margin-top: var(--sp-3); }

/* the strip over the work: which class, which day */
.mk-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.mk-switch {
  display: flex; gap: var(--sp-1); max-width: 100%; overflow-x: auto; scrollbar-width: none;
  padding: var(--sp-1); background: var(--surface); border: 1px solid var(--card-line);
  border-radius: 14px; box-shadow: var(--card-shadow);
}
.mk-switch::-webkit-scrollbar { display: none; }
.mk-sw {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 44px; min-height: 40px; padding: 0 var(--sp-4); border-radius: 10px;
  color: var(--ink-2); font-size: 15px; font-weight: 650; text-decoration: none;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.mk-sw:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.mk-sw.on { background: linear-gradient(100deg, var(--brand-deep) 0%, var(--brand) 62%, var(--brand-lift) 100%);
  color: var(--accent-ink); }
.mk-sw.done::after { content: ""; position: absolute; top: var(--sp-1); right: var(--sp-1); width: 7px; height: 7px;
  border-radius: 50%; background: var(--mk-5); box-shadow: 0 0 0 2px var(--surface); }
.mk-sw.all { padding: 0 var(--sp-3); color: var(--ink-3); }
.mk-sw.today { min-height: 40px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.mk-date { display: flex; align-items: center; gap: var(--sp-1); margin: 0; }
.mk-step { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--ink-2); text-decoration: none; }
.mk-step:hover { background: var(--surface); color: var(--brand); }
.mk-step.back .mk-step-ico { transform: rotate(180deg); }
.mk-step.off { opacity: .3; }
.mk-day {
  position: relative; display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--sp-4); border: 1px solid var(--card-line); border-radius: 12px;
  background: var(--surface); box-shadow: var(--card-shadow); font-size: 15px; font-weight: 650;
  cursor: pointer; white-space: nowrap;
}
.mk-day input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  padding: 0; border: 0; }

/* start everyone somewhere */
.mk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.mk-tools-h { font-size: 13px; font-weight: 600; color: var(--ink-3); }
button.mk-fill {
  min-height: 38px; padding: 0 var(--sp-4); border: 1px solid var(--accent-line); border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--brand); font-size: 14px; font-weight: 620;
}
button.mk-fill:hover { filter: none; border-color: var(--brand); }
button.mk-fill.quiet { background: transparent; border-color: var(--line); color: var(--ink-3); }
.mk-hint { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.mk-keys { display: none; }
@media (pointer: fine) { .mk-keys { display: inline; } }

/* the students */
.mk-list { display: grid; gap: var(--sp-3); align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.mk-card, .mk-who, .mk-scale { min-width: 0; }
.mk-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow); scroll-margin: var(--sp-7);
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.mk-card::before {
  content: ""; position: absolute; left: var(--sp-2); top: var(--sp-4); bottom: var(--sp-4); width: 4px;
  border-radius: var(--r-full); background: var(--line-soft); transition: background .2s var(--ease);
}
.mk-card.is-set::before { background: var(--c, var(--brand)); }
.mk-card.is-set { background: color-mix(in srgb, var(--c, var(--brand)) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--c, var(--brand)) 28%, var(--card-line)); }
.mk-card.is-absent { background: var(--surface-2); box-shadow: none; }
.mk-card.is-absent::before { background: var(--ink-3); opacity: .5; }
.mk-card.is-absent .mk-id b { color: var(--ink-3); }
.mk-card.is-absent .mk-scale .mk-n { opacity: .45; }
@media (pointer: fine) {
  .mk-card.is-cur { box-shadow: 0 0 0 2px var(--brand), var(--card-shadow-up); }
}

.mk-who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.mk-av {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  color: var(--av); background: color-mix(in srgb, var(--av) 13%, var(--surface));
}
.av0 { --av: var(--brand); } .av1 { --av: var(--info); } .av2 { --av: var(--mk-2); }
.av3 { --av: var(--violet); } .av4 { --av: var(--mk-5); } .av5 { --av: var(--mk-1); }
.mk-card.is-absent .mk-av { --av: var(--ink-3); }
.mk-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mk-id b { font-size: 15px; font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-id small { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card.is-set .mk-id small { color: color-mix(in srgb, var(--c, var(--brand)) 80%, var(--ink)); font-weight: 600; }
button.mk-tool {
  position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 10px; background: transparent; color: var(--ink-3); border: 1px solid transparent;
}
button.mk-tool:hover { filter: none; background: var(--surface-2); color: var(--ink); }
button.mk-tool.open { background: var(--accent-soft); color: var(--brand); }
button.mk-tool.has::after { content: ""; position: absolute; top: var(--sp-1); right: var(--sp-1); width: 7px; height: 7px;
  border-radius: 50%; background: var(--brand); }

.mk-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: var(--sp-2); }
.mk-scale.sm { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-1); }
button.mk-n {
  min-height: 44px; padding: 0; border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--surface); color: color-mix(in srgb, var(--c) 82%, var(--ink));
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease), transform .08s var(--ease);
}
button.mk-n:hover { filter: none; border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
button.mk-n[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--surface);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--c) 70%, transparent); }
button.mk-n:active { transform: scale(.94); }
.mk-scale.sm button.mk-n { min-height: 36px; border-radius: 9px; font-size: 14px; }
button.mk-abs {
  min-height: 44px; padding: 0 var(--sp-3); border: 1px dashed var(--line); border-radius: 12px;
  background: transparent; color: var(--ink-3); font-size: 14px; font-weight: 600;
}
button.mk-abs:hover { filter: none; border-style: solid; color: var(--ink); }
button.mk-abs[aria-pressed="true"] { background: var(--ink-3); border: 1px solid var(--ink-3); color: var(--surface); }

.mk-split { display: grid; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px dashed var(--line-soft); }
.mk-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: var(--ink-2); }
.mk-note input { width: 100%; }
.mk-split[hidden], .mk-note[hidden] { display: none; }

/* the bar along the bottom: how far, whether it is kept, and done */
.mk-bar {
  position: sticky; bottom: var(--sp-3); z-index: 20; display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-4) 0 0; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--card-line); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.mk-prog { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; }
.mk-meter { flex: none; width: 140px; height: 8px; overflow: hidden; border-radius: var(--r-full); background: var(--line-soft); }
.mk-meter i { display: block; width: 0; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-lift)); transition: width .4s var(--ease); }
.mk-bar.complete .mk-meter i { background: var(--mk-5); }
.mk-count { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.mk-state { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.mk-state.ok::before { content: "\2713  "; color: var(--mk-5); font-weight: 700; }
.mk-state.bad { color: var(--warn); white-space: normal; }
button.mk-undo { min-height: 38px; padding: 0 var(--sp-3); font-size: 13px; }
button.mk-done { min-height: 44px; padding: 0 var(--sp-5); border-radius: 12px; font-size: 15px; font-weight: 650;
  background: linear-gradient(100deg, var(--brand-deep) 0%, var(--brand) 62%, var(--brand-lift) 100%); }

/* lessons already marked */
.mk-history { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mk-past {
  display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-3); border-radius: 12px;
  background: var(--surface); border: 1px solid var(--card-line); color: var(--ink); text-decoration: none;
}
.mk-past:hover { text-decoration: none; border-color: var(--brand); }
.mk-past.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.mk-past b { font-size: 14px; }
.mk-past span { font-size: 12px; color: var(--ink-3); }

@media (max-width: 720px) {
  .mk-strip { flex-direction: column; align-items: stretch; }
  .mk-date { justify-content: space-between; }
  .mk-day { flex: 1; justify-content: center; }
  .mk-hint { flex-basis: 100%; margin-left: 0; }
  .mk-list { grid-template-columns: minmax(0, 1fr); }
  .mk-card { padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); }
  .mk-scale { gap: var(--sp-1); }
  button.mk-abs { padding: 0 var(--sp-2); font-size: 13px; }
  .mk-bar { bottom: var(--sp-2); padding: var(--sp-3) var(--sp-2) var(--sp-2) var(--sp-3); }
  .mk-meter { position: absolute; top: 0; left: var(--sp-4); right: var(--sp-4); width: auto; height: 3px; }
  .mk-prog { flex-direction: column; align-items: flex-start; gap: 0; }
  .mk-bar .mk-state { position: absolute; left: var(--sp-3); bottom: var(--sp-1); font-size: 12px; }
  .mk-bar { min-height: 64px; align-items: flex-start; }
  .mk-bar .mk-prog { padding-top: var(--sp-1); }
  .mk-classes { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .mk-class { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    column-gap: var(--sp-3); row-gap: var(--sp-1); padding: var(--sp-4); }
  .mk-class-name { grid-column: 1; grid-row: 1; font-size: 30px; }
  .mk-class-meta, .mk-class-state { grid-column: 1 / -1; }
  .mk-class-go, .mk-classes .mk-class-state + .mk-class-go { grid-column: 2; grid-row: 1; margin: 0;
    padding: var(--sp-2) var(--sp-4); }
  button.mk-undo { position: absolute; right: var(--sp-2); bottom: calc(100% + var(--sp-2));
    background: var(--ink); color: var(--surface); border-color: var(--ink); border-radius: var(--r-full);
    box-shadow: var(--shadow-2); }
  .mk-today { padding: var(--sp-3); }
}

/* ------------------------------------------------------- Progress (/ratings)
 * Who needs a word, how each class stands, who leads, who is climbing. Green,
 * amber and red are the marking page's (--mk-5, --mk-3, --mk-1), so a good
 * figure looks the same wherever it is. The class switch is the marking
 * page's too. */
.pg-switch { width: fit-content; margin: 0 0 var(--sp-5); }
.pg-tiles { margin-bottom: var(--sp-2); }

.pg-meter { --p: 0%; display: block; height: 6px; overflow: hidden; border-radius: var(--r-full); background: var(--line-soft); }
.pg-meter i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--mk-5);
  transition: width .5s var(--ease); }
.pg-meter.watch i { background: var(--mk-3); }
.pg-meter.risk i { background: var(--mk-1); }
.pg-meter.mute i { background: var(--ink-3); }
.pg-meter.brand i { background: linear-gradient(90deg, var(--brand-deep), var(--brand), var(--brand-lift)); }

.pg-av {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--av); background: color-mix(in srgb, var(--av) 13%, var(--surface));
}
.pg-av.big { width: 56px; height: 56px; font-size: 20px; }
.pg-who { display: flex; flex-direction: column; min-width: 0; }
.pg-who b { font-size: 15px; font-weight: 620; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-who small { display: flex; align-items: center; gap: var(--sp-1); font-size: 13px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-flame svg { display: block; width: 14px; height: 14px; fill: none; stroke: var(--mk-2); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.pg-go svg, .pg-top-ico svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pg-go { color: var(--ink-3); }

.pg-chip { flex: none; display: inline-flex; align-items: center; width: fit-content; padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full); font-size: 13px; font-weight: 650; white-space: nowrap; }
.pg-chip.stopped { background: color-mix(in srgb, var(--mk-1) 12%, var(--surface)); color: var(--mk-1); }
.pg-chip.falling { background: color-mix(in srgb, var(--mk-2) 14%, var(--surface)); color: color-mix(in srgb, var(--mk-2) 80%, var(--ink)); }
.pg-chip.ok { background: var(--mk-ok-soft); color: var(--mk-5); }
.pg-gain { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-gain.up { color: var(--mk-5); }
.pg-gain.down { color: var(--mk-1); }
.pg-gain.flat { color: var(--ink-3); font-weight: 500; }
.pg-band { display: inline-block; min-width: 40px; padding: 2px var(--sp-2); border-radius: 8px; text-align: center;
  font-variant-numeric: tabular-nums; }
.pg-band.good { background: var(--mk-ok-soft); color: var(--mk-5); }
.pg-band.watch { background: color-mix(in srgb, var(--mk-3) 15%, var(--surface)); color: color-mix(in srgb, var(--mk-3) 70%, var(--ink)); }
.pg-band.risk { background: color-mix(in srgb, var(--mk-1) 12%, var(--surface)); color: var(--mk-1); }
.pg-band.mute { color: var(--ink-3); }

/* needs a word */
.pg-needs { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.pg-needs-col { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.pg-needs-col.stopped { border-top: 3px solid var(--mk-1); }
.pg-needs-col.falling { border-top: 3px solid var(--mk-2); }
.pg-needs-col h3 { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: 16px; }
.pg-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 var(--sp-2);
  border-radius: var(--r-full); background: var(--surface-2); color: var(--ink-2); font-size: 13px; }
.pg-hint { margin: var(--sp-1) 0 var(--sp-2); font-size: 13px; color: var(--ink-3); }
.pg-need, .pg-climb {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3);
  margin: 0 calc(-1 * var(--sp-2)); padding: var(--sp-2); border-radius: 12px; color: var(--ink); text-decoration: none;
}
.pg-need:hover, .pg-climb:hover { background: var(--surface-2); text-decoration: none; }
.pg-need + .pg-need { border-top: 1px solid var(--line-soft); }
.pg-more summary { margin-top: var(--sp-2); font-size: 14px; font-weight: 600; color: var(--brand); cursor: pointer; }
.pg-calm { font-size: 15px; }

/* the classes */
.pg-classes { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pg-class {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.pg-class:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--card-shadow-up); }
.pg-class-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.pg-class-name { font-size: 30px; font-weight: 720; letter-spacing: -.03em; line-height: 1.1; }
.pg-class-meta { margin-top: calc(-1 * var(--sp-2)); font-size: 13px; color: var(--ink-3); }
.pg-fig { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: var(--sp-1); }
.pg-fig small { font-size: 13px; color: var(--ink-2); }
.pg-fig b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-fig b em, .pg-step-score em, .pg-h em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.pg-fig .pg-meter { grid-column: 1 / -1; }
.pg-class-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
.pg-top { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; font-size: 13px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-top-ico { color: var(--mk-3); }

/* the top three */
.pg-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: end;
  max-width: 760px; margin: 0 auto var(--sp-5); }
.pg-step {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center;
  padding: var(--sp-5) var(--sp-3) var(--sp-4); background: var(--surface); color: var(--ink); text-decoration: none;
  border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
  --medal: #a7b0bd;
}
.pg-step:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--card-shadow-up); }
.pg-step.s1 { --medal: #f2b01e; padding-top: var(--sp-6); padding-bottom: var(--sp-5);
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 14%, var(--surface)), var(--surface) 60%);
  border-color: color-mix(in srgb, var(--medal) 40%, var(--card-line)); }
.pg-step.s3 { --medal: #c8794a; }
.pg-medal { position: absolute; top: calc(-1 * var(--sp-3)); display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--medal); color: #fff; font-size: 14px; font-weight: 800;
  box-shadow: 0 0 0 3px var(--bg); }
.pg-step-name { max-width: 100%; margin-top: var(--sp-1); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-step-score { font-size: 26px; font-weight: 760; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pg-step.s1 .pg-step-score { font-size: 34px; }
.pg-step small { font-size: 12px; color: var(--ink-3); }
.pg-first { display: none; }

/* everyone, a row each */
.pg-list { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow); overflow: hidden; }
.pg-head, .pg-row {
  display: grid; align-items: center; column-gap: var(--sp-3);
  grid-template-columns: 30px 36px minmax(0, 1fr) 128px 96px 80px 80px 80px;
  padding: var(--sp-2) var(--sp-4);
}
.pg-head { padding-top: var(--sp-3); padding-bottom: var(--sp-3); background: var(--surface-2);
  border-bottom: 1px solid var(--card-line); font-size: 12px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); }
.pg-h-rank { grid-column: 1; text-align: center; }
.pg-h-who { grid-column: 2 / 4; }
.pg-h { color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.pg-h:hover { color: var(--brand); text-decoration: none; }
.pg-h.on { color: var(--brand); }
.pg-h-overall, .pg-c-overall { grid-column: 4; }
.pg-h-homework, .pg-c-homework { grid-column: 5; }
.pg-h-average, .pg-c-average { grid-column: 6; }
.pg-h-lesson, .pg-c-lesson { grid-column: 7; }
.pg-h-change, .pg-c-change { grid-column: 8; }
.pg-row { color: var(--ink); text-decoration: none; border-top: 1px solid var(--line-soft); min-height: 60px;
  transition: background .14s var(--ease); }
.pg-head + .pg-row { border-top: 0; }
.pg-row:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); text-decoration: none; }
.pg-rank { grid-column: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 14px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pg-rank.p1 { background: #f2b01e; color: #fff; }
.pg-rank.p2 { background: #a7b0bd; color: #fff; }
.pg-rank.p3 { background: #c8794a; color: #fff; }
.pg-row > .pg-av { grid-column: 2; }
.pg-row > .pg-who { grid-column: 3; }
.pg-cells { display: contents; }
.pg-c { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.pg-c small { display: none; }
.pg-c b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-c-overall b { font-size: 17px; }
.pg-c .miss { font-style: normal; font-size: 12px; color: var(--mk-1); white-space: nowrap; }

/* climbing */
.pg-climbs { display: grid; gap: 0 var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.pg-climb { grid-template-columns: auto minmax(0, 1fr) auto; margin: 0; }

/* how it is worked out */
.pg-how { margin: var(--sp-6) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--surface);
  border: 1px solid var(--card-line); border-radius: var(--r-card); }
.pg-how summary { font-weight: 620; cursor: pointer; }
.pg-how dl { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0; }
.pg-how dt { font-weight: 650; }
.pg-how dd { margin: 0; color: var(--ink-2); }

@media (max-width: 900px) {
  .pg-head, .pg-row { grid-template-columns: 30px 36px minmax(0, 1fr) 100px 84px 64px 64px 64px; column-gap: var(--sp-2); }
}
@media (max-width: 720px) {
  .pg-switch { width: auto; flex-wrap: wrap; overflow: visible; }
  .pg-needs { grid-template-columns: minmax(0, 1fr); }
  .pg-classes { grid-template-columns: minmax(0, 1fr); }
  .pg-podium { gap: var(--sp-2); }
  .pg-step { padding: var(--sp-4) var(--sp-2) var(--sp-3); }
  .pg-step.s1 { padding-top: var(--sp-5); }
  .pg-step small { display: none; }
  .pg-full { display: none; }
  .pg-first { display: inline; }
  .pg-av.big { width: 44px; height: 44px; font-size: 16px; }
  .pg-step-score { font-size: 22px; }
  .pg-step.s1 .pg-step-score { font-size: 28px; }
  .pg-step-name { font-size: 13px; }
  /* the header becomes "order by" chips; a row is the student, then their figures */
  .pg-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3); text-transform: none;
    letter-spacing: 0; font-size: 13px; }
  .pg-h-rank { display: none; }
  .pg-h-who { flex-basis: 100%; font-weight: 600; }
  .pg-h-who::after { content: " - order by"; font-weight: 400; }
  .pg-h { padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-full);
    background: var(--surface); color: var(--ink-2); font-weight: 600; }
  .pg-h.on { border-color: var(--brand); background: var(--accent-soft); }
  .pg-row { grid-template-columns: 28px 36px minmax(0, 1fr) auto; row-gap: var(--sp-2); padding: var(--sp-3); }
  .pg-c-overall { grid-column: 4; grid-row: 1; align-items: flex-end; }
  .pg-c-overall .pg-meter { width: 56px; }
  .pg-cells { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); grid-column: 2 / -1; }
  .pg-c { flex-direction: row; align-items: baseline; gap: var(--sp-1); }
  .pg-c small { display: inline; font-size: 12px; color: var(--ink-3); }
  .pg-c b { font-size: 14px; }
  .pg-band { min-width: 0; padding: 0 var(--sp-1); }
  .pg-climbs { grid-template-columns: minmax(0, 1fr); }
  .pg-how dl { grid-template-columns: 1fr; gap: var(--sp-1); }
  .pg-how dd { margin-bottom: var(--sp-2); }
}

/* ---------------------------------------------- the rest of Students (2026-10-05)
 * Questions, Reteach, Records, League, Parents, As a student - in the same
 * look as Progress: the pg- rows, chips and bars, the marking page's switch. */
.pg-chip.quiet { background: var(--surface-2); color: var(--ink-3); }

/* Questions: a message each, the reply under it */
.qn-list { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
.qn-card, .qn-pair { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.qn-card { border-top: 3px solid var(--brand); }
.qn-who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; color: var(--ink); text-decoration: none; }
.qn-who:hover { text-decoration: none; }
.qn-who:hover b { color: var(--brand); }
.qn-q { position: relative; margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: 4px 16px 16px 16px;
  background: var(--surface-2); font-size: 15px; line-height: 1.5; }
.qn-a { align-self: flex-end; max-width: 88%; margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: 16px 4px 16px 16px;
  background: var(--accent-soft); color: var(--ink); font-size: 15px; line-height: 1.5; }
.qn-a small { display: block; margin-top: var(--sp-1); font-size: 12px; color: var(--ink-3); }
.qn-reply { display: flex; gap: var(--sp-2); align-items: flex-end; margin: 0; }
.qn-reply textarea { flex: 1; min-width: 0; min-height: 44px; resize: vertical; }
.qn-reply button { min-height: 44px; }
.qn-done { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
.qn-pair { box-shadow: none; }

/* Reteach: the words as cards, the steps and the people as rows */
.rt-words { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rt-word { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.rt-word b { padding-right: var(--sp-7); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.rt-tr { color: var(--ink-2); font-size: 15px; }
.rt-word > small { margin-top: var(--sp-2); font-size: 12px; color: var(--ink-3); }
.rt-pct { position: absolute; top: var(--sp-3); right: var(--sp-3); display: grid; justify-items: center;
  padding: var(--sp-1) var(--sp-2); border-radius: 10px; font-size: 16px; font-weight: 800; line-height: 1.1; }
.rt-pct small { font-size: 12px; font-weight: 500; }
.rt-pct.risk { background: color-mix(in srgb, var(--mk-1) 12%, var(--surface)); color: var(--mk-1); }
.rt-pct.watch { background: color-mix(in srgb, var(--mk-3) 15%, var(--surface)); color: color-mix(in srgb, var(--mk-3) 70%, var(--ink)); }
.rt-pct.good { background: var(--mk-ok-soft); color: var(--mk-5); }
.rt-steps, .rt-people, .rc-list { padding: var(--sp-2) var(--sp-4); background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.rt-step { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 0; color: var(--ink); text-decoration: none; }
.rt-step + .rt-step, .rt-people .pg-need + .pg-need { border-top: 1px solid var(--line-soft); }
.rt-step:hover { text-decoration: none; }
.rt-step:hover b { color: var(--brand); }
.rt-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-2); }
.rt-bar b { font-variant-numeric: tabular-nums; }
.rt-people .pg-need { margin: 0; padding-left: 0; padding-right: 0; }

@media (max-width: 720px) {
  .qn-list, .qn-done { grid-template-columns: minmax(0, 1fr); }
  .rt-words { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rt-word b { font-size: 17px; padding-right: 0; margin-top: var(--sp-6); }
  .rt-step { grid-template-columns: minmax(0, 1fr) auto; }
  .rt-step .rt-bar { grid-column: 1 / -1; grid-row: 2; }
  .rt-step .pg-go { grid-column: 2; grid-row: 1; }
}

/* Records: class tests as calendar rows, the marks typed in a row a student,
   the exams as their spread, the leavers as rows */
.rc-switches { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.rc-switches .mk-switch { max-width: 100%; }
.rc-add { margin: 0 0 var(--sp-4); padding: 0; background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.rc-add > summary { padding: var(--sp-3) var(--sp-4); font-weight: 650; color: var(--brand); cursor: pointer; }
.rc-add[open] > summary { border-bottom: 1px solid var(--line-soft); }
.rc-add > form, .rc-add > .pg-hint { margin: 0; padding: var(--sp-4); }
.rc-add > .pg-hint { padding-top: 0; }
.rc-add-ico svg, .rc-back-ico svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rc-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.rc-form .grow { flex: 1; min-width: 200px; }
.rc-form .grow input, .rc-form .grow select { width: 100%; }
.rc-examform .rc-list { margin: var(--sp-4) 0 0; }
.rc-test { display: grid; grid-template-columns: auto minmax(0, 1fr) 200px auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 0; color: var(--ink); text-decoration: none; }
.rc-test + .rc-test, .rc-score + .rc-score { border-top: 1px solid var(--line-soft); }
.rc-test:hover { text-decoration: none; }
.rc-test:hover b { color: var(--brand); }
.rc-date { display: grid; justify-items: center; width: 48px; padding: var(--sp-1) 0; border-radius: 12px;
  background: var(--accent-soft); color: var(--brand); line-height: 1.1; }
.rc-date b { font-size: 20px; font-weight: 800; }
.rc-date small { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.rc-back { display: inline-flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-3); font-weight: 600; }
.rc-back-ico { transform: rotate(180deg); }
.rc-testhead { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-4); }
.rc-testhead h2 { margin: 0; font-size: 20px; }
.rc-testhead h2::after { display: none; }
.rc-score { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0; }
.rc-box { display: inline-flex; align-items: baseline; gap: var(--sp-1); margin: 0; }
.rc-box input { width: 84px; min-height: 44px; text-align: center; font-size: 18px; font-weight: 700; }
.rc-box small { color: var(--ink-3); font-size: 13px; }
.rc-absent { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--line); border-radius: 12px; font-size: 14px; color: var(--ink-3); cursor: pointer; }
.rc-absent:has(input:checked) { border-style: solid; background: var(--surface-2); color: var(--ink); }
.rc-bar { justify-content: space-between; }
.rc-exams { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rc-exam { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--surface);
  border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow); border-top: 3px solid var(--brand); }
.rc-exam.empty { border-top-color: var(--line); box-shadow: none; }
.rc-exam h3 { margin: 0; font-size: 16px; }
.rc-mean { display: flex; align-items: center; gap: var(--sp-4); }
.rc-mean b { font-size: 34px; font-weight: 760; letter-spacing: -.02em; }
.rc-mean span { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.rc-bands { display: grid; gap: var(--sp-2); }
.rc-band { display: grid; grid-template-columns: 64px 1fr 32px; align-items: center; gap: var(--sp-3); font-size: 13px; color: var(--ink-2); }
.rc-band .pg-meter { height: 10px; }
.rc-band b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

@media (max-width: 720px) {
  .rc-switches .mk-switch { flex-wrap: wrap; overflow: visible; }
  .rc-test { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rc-test .rt-bar, .rc-test > .pg-chip { grid-column: 2 / -1; grid-row: 2; justify-self: stretch; }
  .rc-test > .pg-chip { justify-self: start; }
  .rc-test .pg-go { grid-column: 3; grid-row: 1; }
  .rc-score { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rc-score .rc-absent { grid-column: 2 / -1; justify-self: start; }
  .rc-box input { width: 72px; }
}

/* League: the season's progress, the podium, then a row a student */
.lgt-progress { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: var(--sp-5);
  margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.lgt-progress small { display: block; margin-top: var(--sp-1); font-size: 13px; color: var(--ink-3); }
.lgt-progress .pg-meter { height: 10px; }
.lgt-champs { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lgt-champ { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface);
  border: 1px solid var(--card-line); border-radius: var(--r-card); color: var(--ink); text-decoration: none; }
.lgt-champ:hover { text-decoration: none; border-color: var(--accent-line); }
.lgt-champ .pg-top-ico svg { width: 22px; height: 22px; }
.lgt-table { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow); overflow: hidden; }
.lgt-row { display: grid; grid-template-columns: 30px 36px minmax(0, 1fr) 84px 260px 170px; align-items: center;
  column-gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); color: var(--ink); text-decoration: none;
  border-top: 1px solid var(--line-soft); }
.lgt-table > .lgt-row:first-child { border-top: 0; }
.lgt-row:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); text-decoration: none; }
.lgt-total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.lgt-total b { font-size: 20px; font-weight: 760; font-variant-numeric: tabular-nums; }
.lgt-total small { font-size: 12px; color: var(--ink-3); }
.lgt-parts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.lgt-part { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: var(--sp-1); }
.lgt-part small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.lgt-part b { font-size: 14px; font-variant-numeric: tabular-nums; }
.lgt-part .pg-meter { grid-column: 1 / -1; }
.lgt-season { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); font-size: 14px;
  font-weight: 650; font-variant-numeric: tabular-nums; }
.lgt-season small { margin-right: var(--sp-1); font-size: 12px; font-weight: 500; color: var(--ink-3); }
.lgt-line { padding: var(--sp-2) var(--sp-4); background: var(--surface-2); border-top: 1px solid var(--line-soft);
  font-size: 13px; font-weight: 600; color: var(--ink-3); }
.lgt-start { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow); border-top: 3px solid var(--brand); }
.lgt-rules { margin: var(--sp-3) 0; padding-left: var(--sp-5); }
.lgt-past { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
.lgt-past + .lgt-past { border-top: 1px solid var(--line-soft); }
.lgt-past .pg-top-ico { color: var(--mk-3); }
.pagehead .actions form { display: inline-flex; }

/* Parents: a card a class - its league picture, the students folded */
.par-bar { position: sticky; top: calc(var(--top-h) + var(--sp-2)); z-index: 10; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--card-line); border-radius: var(--r-lg); box-shadow: var(--card-shadow); }
.par-bar .mk-switch { box-shadow: none; border: 0; padding: 0; background: transparent; }
.par-days { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.par-cards { display: grid; gap: var(--sp-4); }
.par-card { padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); border-left: 4px solid var(--brand); }
.par-card.sent { border-left-color: var(--mk-5); }
.par-card .par-head { margin-bottom: var(--sp-3); }
.par-pick { flex-wrap: wrap; align-items: center; column-gap: var(--sp-3); }
.par-pick .sub { margin: 0; }
.par-name { font-size: 22px; font-weight: 720; letter-spacing: -.02em; }
.par-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.par-lead img { aspect-ratio: auto; object-fit: contain; max-height: 300px; }
.par-side { display: grid; gap: var(--sp-3); }
.par-side textarea { width: 100%; }
.par-more summary { font-weight: 650; color: var(--brand); cursor: pointer; }
.par-more .par-pics { margin-top: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* As a student */
.asx-now { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-5);
  margin: 0 0 var(--sp-5); padding: var(--sp-5); border-radius: var(--r-card); color: var(--ink);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); border: 1px solid var(--accent-line); }
.asx-phone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--brand); color: var(--accent-ink); }
.asx-phone-ico svg { display: block; width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.asx-now .eyebrow { margin-bottom: var(--sp-1); }
.asx-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
.asx-acts form { margin: 0; }
.asx-classes { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.asx-class { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: var(--sp-5); background: var(--surface);
  border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.asx-class.here { border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-soft), var(--card-shadow); }
.asx-class button { margin-top: var(--sp-3); }

@media (max-width: 900px) {
  .lgt-row { grid-template-columns: 28px 36px minmax(0, 1fr) auto; row-gap: var(--sp-2); }
  .lgt-parts, .lgt-season { grid-column: 2 / -1; }
}
@media (max-width: 720px) {
  .lgt-progress { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .lgt-row { padding: var(--sp-3); column-gap: var(--sp-3); }
  .par-bar { position: static; }
  .par-bar .mk-switch { flex-wrap: wrap; overflow: visible; }
  .par-bar button { margin-left: 0; flex: 1; }
  .par-body { grid-template-columns: minmax(0, 1fr); }
  .par-lead { max-width: 240px; }
  .asx-now { grid-template-columns: auto minmax(0, 1fr); }
  .asx-acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ------------------------------------------------- the students' Me page (2026-10-05)
 * who they are first - the face, the class, four figures - then the app card
 * and the climb, then doors to the pages about them, and their details folded */
.me-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-4);
  margin: 0 0 var(--sp-4); padding: var(--sp-5); border-radius: var(--r-card); color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, var(--brand-lift) 0%, var(--brand) 40%, var(--brand-deep) 100%);
  box-shadow: var(--card-shadow-up); }
.me-face { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.me-initial { display: grid; place-items: center; background: var(--gold); color: var(--brand-deep);
  font-size: 30px; font-weight: 800; }
.me-who { min-width: 0; }
.me-name { margin: 0; color: #fff; font-size: 22px; font-weight: 760; letter-spacing: -.02em; line-height: 1.2; }
.me-name::after { display: none; }
.me-class { margin: var(--sp-1) 0 0; color: rgba(255, 255, 255, .82); font-size: 14px; }
.me-about { margin: var(--sp-2) 0 0; color: rgba(255, 255, 255, .92); font-size: 14px; font-style: italic; }
.me-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.me-fact { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-3) var(--sp-1);
  border-radius: 14px; background: rgba(255, 255, 255, .12); text-align: center; }
.me-fact b { font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.me-fact small { font-size: 12px; color: rgba(255, 255, 255, .78); line-height: 1.25; }
.me-fact-ico svg { display: block; width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.me-doors { display: grid; gap: 0; margin: var(--sp-4) 0; padding: var(--sp-1) var(--sp-4); background: var(--surface);
  border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.me-door, .me-edit > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--sp-3); padding: var(--sp-3) 0; color: var(--ink); text-decoration: none; cursor: pointer; }
.me-door + .me-door { border-top: 1px solid var(--line-soft); }
.me-door:hover { text-decoration: none; }
.me-door:hover b { color: var(--brand); }
.me-door-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent-soft); color: var(--brand); }
.me-door-ico svg, .me-go svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.me-go { color: var(--ink-3); }
.me-door-txt { display: flex; flex-direction: column; min-width: 0; }
.me-door-txt b { font-size: 15px; font-weight: 650; }
.me-door-txt small { font-size: 13px; color: var(--ink-3); }
.me-edit { margin: 0 0 var(--sp-4); padding: 0 var(--sp-4); background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); }
.me-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: 0; padding: var(--sp-2) 0 var(--sp-4);
  border-top: 1px solid var(--line-soft); }
.me-form input { width: 100%; }
.me-wide { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .me-head { padding: var(--sp-4); }
  .me-face { width: 60px; height: 60px; }
  .me-initial { font-size: 24px; }
  .me-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-form { grid-template-columns: 1fr; }
}
/* the Me page names the student itself, so the line above it would say it twice */
main.portal:has(.me-head) .whoami { display: none; }
/* its fold-out: the chevron goes to the right, like the doors above it */
details.me-edit > summary { position: relative; grid-template-columns: auto minmax(0, 1fr) 20px; }
details.me-edit > summary::before { position: absolute; right: 0; top: calc(50% - 8px); margin: 0; }

/* ------------------------------------- rating the lesson and the league, brought forward
 * The first page asks about the last lesson with five faces on the card; the
 * rating is one question at a time (rate.js); the league card shows the rung
 * above and what it takes to pass. */
.rq-card { margin: 0 0 var(--sp-4); padding: var(--sp-4); border-radius: var(--r-card); color: #fff;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand) 60%, var(--brand-lift));
  box-shadow: var(--card-shadow-up); }
.rq-head b { display: block; font-size: 18px; font-weight: 760; letter-spacing: -.01em; }
.rq-head small { display: block; margin-top: var(--sp-1); font-size: 13px; color: rgba(255, 255, 255, .8); }
.rq-faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.rq-face { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-2) 0;
  border-radius: 14px; background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none;
  transition: transform .12s var(--ease), background .12s var(--ease); }
.rq-face:hover, .rq-face:focus-visible { text-decoration: none; background: rgba(255, 255, 255, .26); transform: translateY(-2px); }
.rq-face:active { transform: scale(.95); }
.rq-face span { font-size: 30px; line-height: 1.1; }
.rq-face small { font-size: 12px; color: rgba(255, 255, 255, .85); }
.rq-count { margin: var(--sp-3) 0 0; font-size: 13px; color: inherit; opacity: .85; }

/* the rating itself */
.rq-intro { margin: 0 0 var(--sp-3); }
.rq-intro b { display: block; font-size: 22px; font-weight: 760; letter-spacing: -.02em; }
.rq-intro small { display: block; margin-top: var(--sp-1); font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.rq-days { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.rq-day { padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.rq-day.on { border-color: var(--brand); background: var(--accent-soft); color: var(--brand); }
.rq-day.done { border-style: dashed; color: var(--ink-3); font-weight: 500; }
.rq-form { position: relative; margin: 0 0 var(--sp-5); padding: var(--sp-4); background: var(--surface);
  border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.rq-dots { display: none; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.rq-dots i { flex: 1; height: 5px; border-radius: var(--r-full); background: var(--line-soft); transition: background .2s var(--ease); }
.rq-dots i.done { background: var(--brand-lift); }
.rq-dots i.on { background: var(--brand); }
.rq-step { margin: 0; padding: var(--sp-3) 0; border: 0; min-width: 0; }
.rq-step + .rq-step { border-top: 1px solid var(--line-soft); }
.rq-q { display: block; padding: 0; margin-bottom: var(--sp-3); font-size: 19px; font-weight: 720; letter-spacing: -.01em; }
.rq-q small { display: block; margin-bottom: var(--sp-1); font-size: 12px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand); }
.rq-q span { display: block; margin-top: var(--sp-1); font-size: 14px; font-weight: 400; color: var(--ink-3); }
.rq-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.rq-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0;
  padding: var(--sp-3) 0 var(--sp-2); border: 2px solid var(--line-soft); border-radius: 16px; cursor: pointer;
  background: var(--surface); transition: transform .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease); }
.rq-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rq-emo { font-size: 32px; line-height: 1.1; filter: grayscale(.35); transition: filter .12s var(--ease), transform .12s var(--ease); }
.rq-opt small { font-size: 12px; color: var(--ink-3); text-align: center; }
.rq-opt:hover { border-color: var(--accent-line); }
.rq-opt:has(input:checked) { border-color: var(--brand); background: var(--accent-soft); transform: translateY(-2px); }
.rq-opt:has(input:checked) .rq-emo { filter: none; transform: scale(1.15); }
.rq-opt:has(input:checked) small { color: var(--brand); font-weight: 650; }
.rq-opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.rq-last textarea { width: 100%; }
.rq-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-3); }
button.rq-chip { padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 500; }
button.rq-chip:hover { filter: none; border-color: var(--brand); color: var(--brand); }
button.rq-chip.on { border-color: var(--brand); background: var(--accent-soft); color: var(--brand); }
.rq-send { width: 100%; min-height: 48px; font-size: 16px; }
.rq-nav { display: none; }
/* with the script: one question at a time */
.rq-form.js .rq-dots { display: flex; }
.rq-form.js .rq-step { display: none; border-top: 0; animation: rq-in .22s var(--ease) both; }
.rq-form.js .rq-step.on { display: block; }
.rq-form.js .rq-nav { display: flex; margin-top: var(--sp-2); }
.rq-form.js .rq-back[hidden] { display: none; }
@keyframes rq-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.rq-thanks { margin: 0 0 var(--sp-5); padding: var(--sp-6) var(--sp-5); text-align: center; background: var(--surface);
  border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.rq-big { display: block; font-size: 56px; line-height: 1; }
.rq-thanks h2 { margin: var(--sp-3) 0 var(--sp-2); font-size: 24px; }
.rq-thanks h2::after { display: none; }
.rq-thanks .rq-count { color: var(--ink-3); }
.rq-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); }

/* the league card on the first page, and its ladder */
.lq-card { display: block; margin: 0 0 var(--sp-4); padding: var(--sp-4); border-radius: var(--r-card); color: var(--ink);
  text-decoration: none; background: var(--surface); border: 1px solid var(--card-line); box-shadow: var(--card-shadow);
  border-top: 4px solid var(--gold); transition: transform .14s var(--ease), box-shadow .14s var(--ease); }
.lq-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--card-shadow-up); }
.lq-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); }
.lq-rank { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
  background: linear-gradient(135deg, var(--gold), #f59e0b); color: var(--brand-deep); font-size: 26px; font-weight: 850;
  line-height: 1; }
.lq-rank sup { font-size: 13px; font-weight: 700; }
.lq-rank.wait { background: var(--surface-2); color: var(--ink-2); }
.lq-txt { display: flex; flex-direction: column; min-width: 0; }
.lq-txt small { font-size: 13px; color: var(--ink-3); }
.lq-txt b { font-size: 20px; font-weight: 760; letter-spacing: -.01em; }
.lq-txt em { font-style: normal; font-size: 13px; font-weight: 650; color: var(--mk-5); }
.lq-go { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 650; color: var(--brand); }
.lq-go-ico svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.lq-ladder { display: grid; gap: var(--sp-1); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.lq-ladder li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--surface-2); font-size: 15px; }
.lq-ladder li.me { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--brand); font-weight: 700; }
.lq-ladder li.up { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); }
.lq-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface);
  font-size: 13px; font-weight: 750; color: var(--ink-2); }
.lq-ladder b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; }
.lq-ladder i { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.lq-next { display: block; margin: var(--sp-3) 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lq-target { margin: var(--sp-4) 0; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); border-top: 4px solid var(--gold); }
.lq-target h3 { margin: 0; font-size: 16px; }

/* ------------------------------------------------- get ready to speak (2026-10-07)
 * The classbook's speaking questions before the lesson: a card on the first
 * page, the lesson one card at a time (ready.js), the teacher's page that
 * sends it, and a "Ready" chip on the lesson-marking cards. Prefix gr-. */
.gr-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-4); padding: var(--sp-4); border-radius: var(--r-card); color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--card-line); border-top: 4px solid var(--info);
  box-shadow: var(--card-shadow); transition: transform .14s var(--ease), box-shadow .14s var(--ease); }
.gr-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--card-shadow-up); }
.gr-card.done { border-top-color: var(--mk-5); }
.gr-card-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand) 60%, var(--brand-lift)); }
.gr-card-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.gr-card-txt { display: flex; flex-direction: column; min-width: 0; }
.gr-card-txt small { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-card-txt b { font-size: 19px; font-weight: 760; letter-spacing: -.01em; }
.gr-card-txt em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--info); }
.gr-card.done .gr-card-txt em { color: var(--mk-5); }
.gr-card-go { font-size: 14px; font-weight: 650; color: var(--brand); white-space: nowrap; }

/* the lesson: what it is and how far */
.gr-intro { margin: 0 0 var(--sp-3); }
.gr-eyebrow { display: flex; align-items: center; gap: var(--sp-1); margin: 0; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.gr-eye-ico svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
h2.gr-title { margin: var(--sp-1) 0 0; font-size: 24px; font-weight: 780; letter-spacing: -.02em; }
h2.gr-title::after { display: none; }
.gr-sub { margin: var(--sp-1) 0 0; font-size: 14px; color: var(--ink-2); }
.gr-uz { display: block; margin: 2px 0 0; font-size: 14px; font-style: italic; color: var(--ink-3); }
.gr-prog { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.gr-meter { flex: 1; height: 8px; border-radius: var(--r-full); background: var(--line-soft); overflow: hidden; }
.gr-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-lift));
  transition: width .3s var(--ease); }
.gr-count { font-size: 14px; white-space: nowrap; }
.gr-days { margin-top: 0; }

/* the cards */
.gr-form { position: relative; margin: 0 0 var(--sp-5); padding: var(--sp-4); background: var(--surface);
  border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.gr-dots { display: none; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.gr-dots i { flex: 1; height: 5px; border-radius: var(--r-full); background: var(--line-soft); transition: background .2s var(--ease); }
.gr-dots i.done { background: var(--mk-4); }
.gr-dots i.on { background: var(--brand); }
.gr-step { margin: 0; padding: var(--sp-3) 0; border: 0; min-width: 0; }
.gr-step + .gr-step { border-top: 1px solid var(--line-soft); }
.gr-q { display: block; width: 100%; padding: 0; margin-bottom: var(--sp-3); }
.gr-q > small { display: block; margin-bottom: var(--sp-2); font-size: 12px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); }
.gr-step.is-done .gr-q > small::after { content: " \2713"; color: var(--mk-5); }
.gr-qline { display: flex; align-items: flex-start; gap: var(--sp-2); }
.gr-q .gr-qline b { font-size: 20px; font-weight: 740; line-height: 1.3; letter-spacing: -.01em; }
.gr-q .gr-uz { margin-top: var(--sp-1); }
button.gr-say { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; background: var(--accent-soft); color: var(--brand); border: 0; }
button.gr-say[hidden] { display: none; }
button.gr-say svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
button.gr-say.on { background: var(--brand); color: #fff; animation: gr-pulse 1s var(--ease) infinite; }
@keyframes gr-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 22%, transparent); } }
.gr-body > * + * { margin-top: var(--sp-3); }
.gr-h { display: block; margin-bottom: var(--sp-1); font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); }
.gr-h em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; }
.gr-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
button.gr-chip, .gr-tag { padding: 5px var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 500; }
button.gr-chip:hover { filter: none; border-color: var(--brand); color: var(--brand); }
button.gr-chip.on { border-color: var(--brand); background: var(--accent-soft); color: var(--brand); }
.gr-starter { margin-bottom: 0; padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--gold-soft);
  border-left: 4px solid var(--gold); font-size: 15px; }
.gr-model { border: 1px solid var(--line-soft); border-radius: 12px; }
.gr-model summary { padding: var(--sp-2) var(--sp-3); font-size: 15px; font-weight: 650; color: var(--brand); cursor: pointer; }
.gr-model[open] summary { border-bottom: 1px solid var(--line-soft); }
.gr-parts { display: grid; gap: var(--sp-2); margin: 0; padding: var(--sp-3); list-style: none; }
.gr-parts li { padding: var(--sp-2) var(--sp-3); border-radius: 10px; font-size: 15px; line-height: 1.45; }
.gr-parts li small { display: block; font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.gr-p0 { background: var(--accent-soft); } .gr-p0 small { color: var(--brand); }
.gr-p1 { background: color-mix(in srgb, var(--info) 12%, var(--surface)); } .gr-p1 small { color: var(--info); }
.gr-p2 { background: color-mix(in srgb, var(--mk-4) 14%, var(--surface)); } .gr-p2 small { color: var(--mk-5); }
.gr-model-say { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0 var(--sp-3) var(--sp-3);
  font-size: 13px; color: var(--ink-3); }
.gr-note { display: block; margin-bottom: 0; }
.gr-note input, .gr-asks input { width: 100%; min-height: 46px; font-size: 16px; }
.gr-rec { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3);
  border-radius: 16px; background: var(--surface-2); }
.gr-rec-stage { display: flex; align-items: center; gap: var(--sp-4); }
.gr-rec-stage[hidden] { display: none; }
.gr-rec button.rec-go { width: 76px; height: 76px; }
.gr-rec button.rec-go::before { inset: 10px; }
.gr-rec button.rec-go .dot { width: 18px; height: 18px; }
.gr-rec.is-live button.rec-go .dot { width: 17px; height: 17px; }
.gr-rec.said:not(.is-live) .rec-ring-fill { stroke: var(--mk-5); stroke-dashoffset: 0; }
.gr-rec.enough .rec-ring-fill { stroke: var(--mk-5); }
.gr-rec-side { display: grid; gap: 4px; min-width: 0; }
.gr-rec-time { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--sp-2); }
.gr-rec-clock { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.gr-rec.enough .gr-rec-clock { color: var(--mk-5); }
.gr-rec-need { font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.gr-rec-state { font-size: 14px; font-weight: 650; line-height: 1.35; color: var(--ink-2); }
.gr-rec-back { width: 100%; height: 40px; }
.gr-rec-say { font-size: 13px; color: var(--ink-3); }
.gr-rec { display: none; }
.gr-form.js .gr-rec { display: flex; }
.gr-model.compare { border-color: var(--brand); box-shadow: 0 0 0 3px var(--accent-soft); }
.gr-quick { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; counter-reset: q; }
.gr-quick li { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-soft); border-radius: 12px; }
.gr-quick .gr-qline { align-items: center; }
.gr-quick .gr-qline b { font-size: 16px; font-weight: 650; }
.gr-eg { margin-top: var(--sp-1); }
.gr-eg summary { font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer; }
.gr-eg p { margin: var(--sp-1) 0 0; font-size: 15px; color: var(--ink-2); }
.gr-tick { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border: 2px solid var(--line-soft);
  border-radius: 12px; font-weight: 650; cursor: pointer; }
.gr-tick input { width: 22px; height: 22px; accent-color: var(--mk-5); }
.gr-tick:has(input:checked) { border-color: var(--mk-4); background: color-mix(in srgb, var(--mk-4) 10%, var(--surface)); }
.gr-egs ul { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.gr-egs li { display: flex; align-items: center; gap: var(--sp-2); font-size: 15px; }
.gr-egs .gr-say { width: 30px; height: 30px; }
.gr-tip { display: flex; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: 12px;
  background: var(--gold-soft); font-size: 14px; line-height: 1.5; }
.gr-tip-ico svg { display: block; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: #b07800; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.gr-asks { display: grid; gap: var(--sp-2); margin: 0; padding-left: 1.4em; }
.gr-asks li::marker { font-weight: 700; color: var(--ink-3); }
.gr-bubs { display: flex; flex-direction: column; gap: var(--sp-1); }
.gr-bub { align-self: flex-start; max-width: 80%; padding: var(--sp-2) var(--sp-3); border-radius: 16px 16px 16px 4px;
  background: color-mix(in srgb, var(--info) 14%, var(--surface)); font-size: 15px; }
.gr-bub.r { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--surface-2); }

/* the end, and going between the cards */
.gr-end { display: none; text-align: center; padding: var(--sp-5) var(--sp-3); }
.gr-big { display: block; font-size: 52px; line-height: 1; }
.gr-end h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: 22px; }
.gr-end p { margin: var(--sp-2) auto 0; max-width: 34em; color: var(--ink-2); }
.gr-end .gr-ready-yes, .gr-end.all .gr-ready-no, .gr-end.all .gr-missing { display: none; }
.gr-end.all .gr-ready-yes { display: block; }
.gr-nav { display: none; }
.gr-save { width: 100%; min-height: 48px; margin-top: var(--sp-3); font-size: 16px; }
.gr-form.js .gr-save { display: none; }
.gr-form.js .gr-dots { display: flex; }
.gr-form.js .gr-step { display: none; border-top: 0; animation: rq-in .22s var(--ease) both; }
.gr-form.js .gr-step.on { display: block; }
.gr-form.js .gr-nav { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.gr-form.js .gr-nav [hidden] { display: none; }
.gr-state { flex: 1; font-size: 13px; color: var(--ink-3); text-align: center; }
.gr-next { min-width: 110px; min-height: 44px; margin-left: auto; }
.gr-back { min-height: 44px; }

/* the teacher's page */
.gr-send-h { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: 17px; }
.gr-send-h::after { display: none; }
.gr-send-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: end; gap: var(--sp-3); }
.gr-send-row .f { margin: 0; }
.gr-send-row select, .gr-send-row input { width: 100%; }
.gr-send-row button { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 42px; }
.gr-send-say { margin: var(--sp-3) 0 0; }
@media (max-width: 720px) { .gr-send-row { grid-template-columns: 1fr; } }
.gr-rows { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.gr-row { background: var(--surface); border: 1px solid var(--card-line); border-radius: 14px; box-shadow: var(--card-shadow); }
.gr-row.past { opacity: .8; }
.gr-row summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; }
.gr-row summary::-webkit-details-marker { display: none; }
.gr-row-cls { flex: none; padding: 3px var(--sp-2); border-radius: 8px; background: var(--accent-soft); color: var(--brand);
  font-weight: 750; font-size: 14px; }
.gr-row-t { display: flex; flex: 1 1 200px; flex-direction: column; min-width: 0; }
.gr-row-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-row-t small { color: var(--ink-3); font-size: 13px; }
.gr-row-n { display: flex; flex: 0 1 240px; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--ink-3);
  white-space: nowrap; }
.gr-row-n b { color: var(--ink); font-size: 15px; }
.gr-row-n .gr-meter i { background: var(--mk-4); }
@media (max-width: 600px) { .gr-row-n { flex-basis: 100%; } }
.gr-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-1);
  margin: 0; padding: 0 var(--sp-4) var(--sp-3); list-style: none; }
.gr-names li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--sp-2); padding: var(--sp-1) var(--sp-2);
  border-radius: 8px; font-size: 14px; background: var(--surface-2); }
.gr-names li span { color: var(--ink-3); white-space: nowrap; }
.gr-names li.ok { background: color-mix(in srgb, var(--mk-4) 14%, var(--surface)); }
.gr-names li.ok span { color: var(--mk-5); font-weight: 650; }
.gr-row-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; padding: 0 var(--sp-4) var(--sp-3); }
.gr-shelf-h { margin: var(--sp-3) 0 var(--sp-2); font-size: 14px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.gr-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.gr-book { display: flex; flex-direction: column; padding: var(--sp-3); border-radius: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); text-decoration: none;
  border-left: 4px solid var(--info); }
.gr-book:hover { text-decoration: none; box-shadow: var(--card-shadow-up); }
.gr-book b { font-size: 20px; color: var(--brand); }
.gr-book small { color: var(--ink-3); }
.gr-preview { max-width: 760px; }

/* who came ready, on the lesson-marking cards */
.mk-ready { display: inline-block; margin-left: var(--sp-2); padding: 1px 7px; border-radius: var(--r-full);
  vertical-align: 2px; font-size: 11px; font-weight: 750; letter-spacing: .03em;
  background: color-mix(in srgb, var(--mk-4) 18%, var(--surface)); color: var(--mk-5); }
.mk-ready::before { content: "\1F3A4 "; }
.mk-ready.part { background: var(--surface-2); color: var(--ink-3); }

/* ==========================================================================
   Class bots (Students → Class bots)
   A card a class: its badge and name, a pill that says where it stands, then
   the one step it is on - make the bot, put it in the group - or, once it
   posts, what the class has done, its two buttons and what it said last.
   ========================================================================== */
.cb-times { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.cb-times > div { flex: 1 1 240px; }
.cb-times .f { margin: 0; }
.cb-times input[type=time] { width: 120px; }
.cb-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
.cb-card { padding: var(--sp-5) var(--sp-5) var(--sp-4); background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); scroll-margin-top: calc(var(--top-h, 64px) + 16px); }
.cb-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cb-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cb-id .sub { margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-head .pill { flex: none; }
.cb-name { font-size: 20px; font-weight: 760; letter-spacing: -.02em; line-height: 1.15; }
.cb-body { display: flex; flex-direction: column; gap: var(--sp-3); font-size: 14px; }
.cb-body form, .cb-body .flash, .cb-body p { margin: 0; }
.cb-steps { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding-left: var(--sp-5); line-height: 1.5; }
.cb-steps code { padding: 1px 6px; border-radius: 6px; font: 600 12px/1.6 ui-monospace, Menlo, monospace;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-soft); word-break: break-all; }
.cb-how > summary, .cb-more > summary, .cb-pic > summary { cursor: pointer; font-weight: 650; color: var(--brand); }
.cb-how[open] > summary, .cb-more[open] > summary { margin-bottom: var(--sp-3); }
.cb-token { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.cb-token .f { flex: 1 1 220px; margin: 0; }
.cb-token input { font-family: ui-monospace, Menlo, monospace; }
.cb-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--sp-3) 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.cb-figs > div { display: flex; flex-direction: column; gap: var(--sp-1); padding: 0 var(--sp-3); border-left: 1px solid var(--line-soft); }
.cb-figs > div:first-child { padding-left: 0; border-left: 0; }
.cb-figs small { font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.cb-figs b { font-size: 21px; font-weight: 720; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cb-figs > div:nth-child(1) b { color: var(--mk-5, var(--ok)); }
.cb-figs > div:nth-child(3) b { color: var(--warn); }
.cb-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cb-pic img { display: block; width: 100%; max-width: 420px; margin-top: var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--line-soft); }
.cb-body .row-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cb-body .row-actions:empty { display: none; }
.cb-remove { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
@media (max-width: 560px) {
  .cb-grid { grid-template-columns: minmax(0, 1fr); }
  .cb-card { padding: var(--sp-4); }
  .cb-times input[type=time] { width: 100%; }
  .cb-times .f { flex: 1 1 30%; }
}

/* ------------------------------------------------- the Speak room (Play -> Speak)
   The classbook's speaking questions, any time: units as lists of lessons, a
   lesson as its questions, and one question at a time to answer aloud, with
   what the try came to beneath the button (speakroom.js). Built from the same
   pieces as Get ready (gr-), in the site's plum; prefix tk-. */
.tk-head { margin: 0 0 var(--sp-4); }
.tk-eyebrow { display: flex; align-items: center; gap: var(--sp-1); margin: 0; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.tk-eye-ico svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
h2.tk-title { margin: var(--sp-1) 0 0; font-size: 24px; font-weight: 780; letter-spacing: -.02em; text-wrap: balance; }
h2.tk-title::after { display: none; }
.tk-sub { margin: var(--sp-1) 0 0; font-size: 14.5px; color: var(--ink-2); max-width: 60ch; }
.tk-uz { display: block; margin: 2px 0 0; font-size: 14px; font-style: italic; color: var(--ink-3); }
.tk-week { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--accent-soft); font-size: 14px; color: var(--ink-2); }
.tk-week span { margin-right: var(--sp-1); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand); }
.tk-week b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-week i { font-style: normal; color: var(--ink-3); }
.tk-week.none { display: block; }

.tk-unit { margin: 0 0 var(--sp-5); }
.tk-unit h3 { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-size: 17px; }
.tk-unit h3 span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.tk-lessons, .tk-qlist { display: grid; gap: var(--sp-2); }
a.tk-lesson, a.tk-qrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: 14px; background: var(--surface); border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; }
a.tk-lesson:hover, a.tk-qrow:hover { border-color: var(--accent-line); text-decoration: none; }
.tk-code { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--sp-2); border-radius: 12px;
  background: var(--accent-soft); color: var(--brand); font-size: 15px; font-weight: 780; }
a.tk-lesson.all .tk-code { background: color-mix(in srgb, var(--mk-5) 16%, transparent); color: var(--mk-5); }
.tk-ltxt, .tk-qtxt { display: grid; gap: 2px; min-width: 0; }
.tk-ltxt > span { font-weight: 650; }
.tk-ltxt small, .tk-qtxt small { font-size: 13px; color: var(--ink-3); }
.tk-tried { color: var(--brand) !important; font-weight: 600; }
.tk-tried.all { color: var(--mk-5) !important; }
a.tk-lesson > i { font-style: normal; font-size: 22px; color: var(--ink-3); }
.tk-n { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--brand); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.tk-qtxt b { font-weight: 650; line-height: 1.35; }
.tk-qstate { font-size: 12.5px; font-weight: 650; color: var(--ink-3); white-space: nowrap; }
a.tk-qrow.tried .tk-n { background: var(--brand); color: #fff; }
a.tk-qrow.tried .tk-qstate { color: var(--brand); }
.tk-back { margin: 0 0 var(--sp-3); font-size: 14px; }

/* one question */
.tk-room { margin: 0 0 var(--sp-5); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.tk-room > * + * { margin-top: var(--sp-3); }
.tk-q > small { display: block; margin-bottom: var(--sp-2); font-size: 12px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); }
.tk-q h2 { margin: 0; font-size: 21px; font-weight: 740; line-height: 1.3; letter-spacing: -.01em; text-wrap: pretty; }
.tk-q h2::after { display: none; }
button.tk-hear { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); padding: 6px 14px 6px 8px;
  border-radius: 999px; border: 0; background: var(--accent-soft); color: var(--brand); font-size: 14px; font-weight: 650; }
button.tk-hear svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
button.tk-hear.on { background: var(--brand); color: #fff; }
.tk-help { display: grid; gap: var(--sp-3); }
.tk-h { display: block; margin-bottom: var(--sp-1); font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-chip { padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--brand); font-size: 14px;
  font-weight: 600; }
.tk-starter { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--gold-soft);
  border-left: 4px solid var(--gold); font-size: 15px; }
.tk-plan { margin: 0; font-size: 14px; color: var(--ink-2); }
.tk-tip { display: flex; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: 12px;
  background: var(--gold-soft); border-left: 4px solid var(--gold); font-size: 14.5px; }
.tk-tip-ico svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.tk-say { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: 16px; background: var(--bg);
  border: 1px solid var(--line-soft); }
.tk-stage { display: flex; align-items: center; gap: var(--sp-4); }
.tk-side { display: grid; gap: 2px; min-width: 0; }
.tk-time { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.tk-clock { font-size: 26px; font-weight: 780; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tk-aim { font-size: 13px; color: var(--ink-3); }
.tk-state { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.tk-state.warn { color: #a8670a; }
.tk-state.error { color: var(--warn); }
.tk-say.is-live button.rec-go::before { background: linear-gradient(150deg, #e0485a, #a51d30); }
.tk-say.is-live button.rec-go .dot { width: 20px; height: 20px; border-radius: 4px; background: #fff; animation: none; }
.tk-mini button.rec-go { width: 64px; height: 64px; }
.tk-mini button.rec-go::before { inset: 8px; }
.tk-mini button.rec-go .dot { width: 16px; height: 16px; }
.tk-mini .tk-clock { font-size: 20px; }
.tk-live { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--surface);
  border: 1px dashed var(--accent-line); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); min-height: 2.6em; }
.tk-room [hidden], .tk-rlist [hidden] { display: none !important; }

.tk-result { display: grid; gap: var(--sp-2); }
.tk-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tk-facts span { display: grid; padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-3); line-height: 1.25; }
.tk-facts b { font-size: 19px; font-weight: 760; color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-said { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line-soft); font-size: 15.5px; line-height: 1.55; }
.tk-said mark { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--mk-5) 18%, transparent); color: inherit; }
.tk-back-take audio { width: 100%; }
.tk-over { margin: 0; font-size: 14px; color: var(--ink-2); }
.tk-cmp { padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--surface); border: 1px solid var(--line-soft); }
.tk-cmp ul { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; padding: 0; list-style: none; }
.tk-cmp li { display: flex; gap: var(--sp-2); font-size: 14px; color: var(--ink-2); }
.tk-cmp li b { font-variant-numeric: tabular-nums; color: var(--ink); }
.tk-cmp li.up b { color: var(--mk-5); }
.tk-cmp li.up b::after { content: " \2191"; }
.tk-cmp li.down b { color: var(--warn); }
.tk-nudge, .tk-round, .tk-three-done { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.tk-round { color: var(--ink); }
.tk-three-done { padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: color-mix(in srgb, var(--mk-5) 12%, transparent);
  color: var(--ink); font-weight: 600; }

.tk-model, .tk-eg { border: 1px solid var(--line-soft); border-radius: 12px; }
.tk-model summary, .tk-eg summary { padding: var(--sp-2) var(--sp-3); font-size: 15px; font-weight: 650; color: var(--brand);
  cursor: pointer; }
.tk-model[open] summary { border-bottom: 1px solid var(--line-soft); }
.tk-parts { margin: 0; padding: var(--sp-3) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 18px); display: grid; gap: var(--sp-2); }
.tk-parts li { font-size: 15.5px; line-height: 1.5; }
.tk-parts small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); }
.tk-model-say { margin: 0; padding: 0 var(--sp-3) var(--sp-3); font-size: 14px; color: var(--ink-2); }
.tk-eg p { margin: 0; padding: 0 var(--sp-3) var(--sp-3); font-size: 15px; }
.tk-again { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tk-items { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.tk-items > li { display: grid; gap: var(--sp-2); }
.tk-iq { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; }
.tk-iq b { flex: 1 1 200px; font-size: 16.5px; font-weight: 650; line-height: 1.35; }
.tk-iq button.tk-hear { margin: 0; padding: 4px 10px 4px 6px; font-size: 13px; }
.tk-how { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: 13px;
  color: var(--ink-3); }
.tk-switch { font-size: 13px; }
.tk-nav { display: flex; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft); }
.tk-nav .tk-nextq { margin-left: auto; }

/* the teacher's page */
.tk-tabs { width: fit-content; margin: 0 0 var(--sp-4); }
.tk-class { margin: 0 0 var(--sp-3); }
.tk-chead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.tk-chead h3 { margin: 0; font-size: 18px; }
.tk-chead small { color: var(--ink-3); }
.tk-cline { margin: var(--sp-2) 0 0; color: var(--ink-2); }
.tk-cline b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-cmore { margin-top: var(--sp-2); }
.tk-cmore summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 14px; }
.tk-slist { display: grid; gap: 2px; margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.tk-srow { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: var(--sp-2);
  align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.tk-srow.none { color: var(--ink-3); }
.tk-srow small { color: var(--ink-3); text-align: right; }
@media (max-width: 560px) {
  .tk-srow { grid-template-columns: minmax(0, 1fr) auto auto; }
  .tk-srow span:nth-of-type(3), .tk-srow small { display: none; }
}
.tk-rhead p { margin: 0 0 var(--sp-2); }
.tk-rlesson { margin: 0 0 var(--sp-2); border: 1px solid var(--card-line); border-radius: 14px; background: var(--surface); }
.tk-rlesson summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  cursor: pointer; }
.tk-rlesson summary small { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.tk-rtry { margin: 0; padding: 0 var(--sp-4) var(--sp-2); font-size: 14px; }
.tk-rlist { display: grid; gap: 0; margin: 0; padding: 0 var(--sp-4) var(--sp-3); list-style: none; counter-reset: q; }
.tk-qrec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-3) 0;
  border-top: 1px solid var(--line-soft); }
.tk-qrec-txt b { font-weight: 600; line-height: 1.4; }
.tk-qrec-txt small { display: block; color: var(--ink-3); font-size: 12.5px; }
.tk-qrec-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tk-qrec-acts audio { height: 36px; max-width: 100%; }
button.tk-rec-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 14px; }
button.tk-rec-btn .dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5a6a; }
.tk-qrec.is-live button.tk-rec-btn { background: #c02a3c; border-color: #c02a3c; color: #fff; }
.tk-qrec.is-live button.tk-rec-btn .dot { border-radius: 2px; background: #fff; }
.tk-qrec.has .tk-qrec-txt b::after { content: " \2713"; color: var(--mk-5); }
.tk-rec-note { font-size: 13px; color: var(--ink-3); }
@media (max-width: 560px) {
  .tk-room { padding: var(--sp-3); }
  .tk-q h2 { font-size: 19px; }
  .tk-stage { gap: var(--sp-3); }
}

/* On a phone the bars that stay put are solid. A see-through bar blurs what
   passes under it afresh at every step of a scroll, and on an iPhone a long
   page under a blurred bar flickered as it went. (Last in the file, so it
   comes after each bar's own rule.) */
@media (max-width: 860px) and (pointer: coarse) {
  .topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .markbar.gg-bar, .setgo.as-send, .mk-bar, .par-bar {
    background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}