/* Screen layouts. Tokens only: no raw colours, sizes off the scale, or zoom.
   Part 1: overview, To mark, student page, lesson page, practice.
   Part 2: small shared bits for the other screens. Marking, the diagnostic
   and the projector are in screens-marking.css; the builder, teaching,
   content, all skills and the email in screens-book.css. */

/* ======================================================= 1. redesigned == */

/* ---- overview ----------------------------------------------------------- */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(540px, 1fr)); gap: var(--s-5); }
.ov-card { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-5) var(--s-6) var(--s-6); }
.ov-head { display: flex; align-items: center; gap: var(--s-4); }
.ov-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ov-who b { font: var(--t-h3); }
.ov-who span { font: var(--t-caption); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-status { font: var(--t-label); color: var(--muted); white-space: nowrap; }
.ov-waiting { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--t-label); color: var(--amber-text);
  padding: 0 var(--s-3) 0 var(--s-1); height: 30px; border-radius: var(--r-full); background: var(--amber-bg); }
.ov-none { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  background: var(--surface-quiet); color: var(--primary); font-weight: var(--w-medium); }
.ov-none svg { color: var(--primary); }

/* ---- To mark ------------------------------------------------------------- */
.inbox-group .ig-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-6); color: var(--ink); text-decoration: none; }
.inbox-group .ig-head b { font: var(--t-h3); }
.inbox-group .ig-head:hover { background: var(--surface-quiet); }
.inbox-group .ig-head > svg { color: var(--muted); }
/* a row with no print button keeps its room, so every "Mark" lines up */
.inbox-group .task-list > li:not(:has(> .icon-btn))::after { content: ''; flex: none; width: 40px; }

/* ---- student page ---------------------------------------------------------- */
.tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.task { position: relative; display: flex; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--e1); transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.task:hover { box-shadow: var(--e3); transform: translateY(-2px); border-color: var(--green-300); }
.task-main { flex: 1; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); color: var(--ink); text-decoration: none; border-radius: var(--r-lg); min-height: 176px; }
.task-art { display: flex; height: 48px; align-items: center; }
.task-icon { position: relative; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-mint); color: var(--primary); display: grid; place-items: center; }
.task-icon .badge { position: absolute; top: -6px; right: -8px; box-shadow: 0 0 0 2px var(--surface); }
.task-text { display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.task-text b { font: var(--t-h3); }
.task-text > span { color: var(--muted); }
.task-go { display: inline-flex; align-items: center; gap: var(--s-1); font: var(--t-label); color: var(--primary); transition: gap var(--dur-1) var(--ease); }
.task:hover .task-go { gap: var(--s-2); }
.task-extra { position: absolute; top: var(--s-4); right: var(--s-4); }
.task.primary { background: var(--band); border-color: var(--band); }
.task.primary .task-main { color: var(--green-50); }
.task.primary .task-text > span { color: var(--on-band-muted); }
.task.primary .task-go { color: var(--green-400); }
.task.primary .task-icon { background: rgba(211, 255, 233, .12); color: var(--green-100); }
.task.primary .ed-tile.tone-band { --fill: var(--green-400); --ink-c: var(--green-950); --edge: rgba(91, 210, 154, .35); }
.task.primary { --focus-shadow: var(--focus-ring-band); }
.start-card { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-8); }
.start-card h2 { font: var(--t-h2); margin-bottom: var(--s-2); }
.start-card p { color: var(--muted); max-width: 64ch; }
.start-art .ed-tile { transform: rotate(-4deg); }

.term-card .card-head { margin-bottom: var(--s-5); }
.term-card .card-head .muted { font: var(--t-caption); color: var(--muted); }
.sp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-6); align-items: start; }
.sp-main, .sp-side { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }

/* the quiz panel */
.quiz-panel .card-head { flex-wrap: wrap; }
.quiz-panel h2 { flex-grow: 0 !important; }
.qp-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-5); }
.qp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.qp-row { display: flex; align-items: center; gap: var(--s-1); border-radius: var(--r-md); transition: background var(--dur-1) var(--ease); }
.qp-row.on { background: var(--surface-quiet); }
.qp-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 0; background: none; text-align: left; border-radius: var(--r-md); }
.qp-pick[aria-pressed="true"] .qn { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--green-400); }
.qn { width: 26px; height: 26px; border-radius: var(--r-full); background: var(--primary); color: var(--white); font: var(--t-caption); font-weight: var(--w-semibold);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qp-text { display: flex; flex-direction: column; min-width: 0; }
.qp-text b { font-weight: var(--w-medium); }
.qp-text span { font: var(--t-caption); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-regen { opacity: .6; flex-shrink: 0; }
.qp-row:hover .qp-regen, .qp-regen:focus-visible { opacity: 1; }
.qp-regen.busy svg { animation: spin 1s linear infinite; }
.qp-preview { background: var(--surface-quiet); border-radius: var(--r-lg); padding: var(--s-4); min-height: 240px; display: flex; flex-direction: column; justify-content: flex-start;
  align-self: start; position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }
.qp-preview > .caption { margin: auto; }
.qp-sheet { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--e1); padding: var(--s-4) var(--s-5) var(--s-5); animation: fade var(--dur-2) var(--ease); }
.qp-sheet-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.qp-q { display: flex; flex-direction: column; gap: var(--s-2); --math-k: .9; }
.qp-foot { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.quiz-panel .form-error { margin-top: var(--s-4); }

/* skills */
.sk-lesson { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.sk-lesson:first-of-type { border-top: 0; padding-top: 0; }
.sk-l { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.sk-rows { display: flex; flex-direction: column; gap: var(--s-3); padding-top: 4px; }
.sk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; }
.sk-name { font-weight: var(--w-medium); }
.sk-lesson.upcoming .sk-name { color: var(--muted); }

/* book */
.book-card { display: flex; flex-direction: column; gap: var(--s-5); }
.bk-top { display: flex; align-items: center; gap: var(--s-5); }
.mini-book { position: relative; width: 78px; height: 102px; flex-shrink: 0; border-radius: 3px var(--r-sm) var(--r-sm) 3px; background: var(--band); color: var(--green-100);
  padding: var(--s-2) var(--s-2) var(--s-2) 12px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: inset 4px 0 0 rgba(211, 255, 233, .12), 3px 3px 0 var(--green-200), var(--e2); }
.mini-book img { width: 50px; }
.mini-book b { margin-top: auto; font: var(--t-label); }
.mini-book span { font-size: 12px; line-height: 14px; color: var(--on-band-muted); }
.bk-what { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.bk-what h2 { font: var(--t-h3); }
.bk-what p { color: var(--muted); }
.bk-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.bk-actions .bk-files { align-self: stretch; }
.docs-sub { margin-top: var(--s-4); margin-bottom: var(--s-1); }
.docs-earlier { margin-top: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-2); }
.docs-earlier summary { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-2); margin: 0 calc(-1 * var(--s-2));
  border-radius: var(--r-md); cursor: pointer; list-style: none; font-weight: var(--w-medium); }
.docs-earlier summary::-webkit-details-marker { display: none; }
.docs-earlier summary:hover { background: var(--surface-quiet); }
.docs-earlier[open] summary > svg { transform: rotate(180deg); }

/* ---- lesson page --------------------------------------------------------- */
.lesson-page .hero-row { align-items: flex-end; }
.lesson-page .hero-lead .ed-tile { transform: rotate(-3deg); }
.lesson-strip { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-8); }
.ls-item { position: relative; display: inline-flex; padding: var(--s-1); border-radius: var(--r-md); text-decoration: none; transition: background var(--dur-1) var(--ease); }
.ls-item:hover { background: rgba(211, 255, 233, .08); }
.ls-item.viewing::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -8px; height: 3px; border-radius: 2px; background: var(--green-400); }
.lp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-6); align-items: start; flex-direction: row; }
.lp-main { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.lp-skills .card-head, .lp-earlier .card-head { margin-bottom: var(--s-3); }
.skill-row { padding: var(--s-5) var(--s-6); border-top: 1px solid var(--line); }
.skill-row.is-mastered { background: linear-gradient(90deg, var(--green-50), var(--surface) 60%); }
.sr-head { display: flex; align-items: center; gap: var(--s-4); }
.sr-head h3 { flex: 1; min-width: 0; font: var(--t-h3); }
.sr-head h3 a { color: var(--ink); text-decoration: none; }
.sr-head h3 a:hover { color: var(--primary); text-decoration: underline; }
.sr-body { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-8); margin-top: var(--s-3); }
.sr-cards { display: inline-flex; align-items: center; gap: var(--s-2); }
.sr-cards .caption { margin-right: var(--s-1); }
.card-dot { width: 30px; height: 30px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--control-line); background: var(--surface); color: var(--muted); font: var(--t-caption); font-weight: var(--w-semibold); text-decoration: none;
  transition: transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-1) var(--ease); }
.card-dot.done { background: var(--primary); border-color: var(--primary); color: var(--white); }
.card-dot:hover, .card-dot.on { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--green-400); }
.sr-peek { margin-left: var(--s-1); }
.earlier-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-6); border-top: 1px solid var(--line); }
.er-name { color: var(--ink); text-decoration: none; font-weight: var(--w-medium); }
.er-name:hover { color: var(--primary); text-decoration: underline; }
.lp-side { display: flex; flex-direction: column; gap: var(--s-5); position: sticky; top: calc(var(--topbar-h) + var(--s-6)); }
.quiz-mini .card-head { margin-bottom: var(--s-3); }
.qm-score { font: var(--t-h3); color: var(--muted); }
.qm-score b { font: var(--t-h1); color: var(--ink); }
.qdots { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }
.qdot { position: relative; width: 38px; height: 38px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center;
  font: var(--t-label); border: 0; padding: 0; transition: transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-1) var(--ease); }
.qdot.right { background: var(--surface-mint); color: var(--green-800); }
.qdot.wrong { background: var(--error-bg); color: var(--error-text); box-shadow: inset 0 0 0 1.5px var(--error); }
.qdot:hover, .qdot.on { transform: translateY(-2px); }
.qdot.on, .qdot[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--green-400); }
.qdot.wrong.on, .qdot.wrong[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--error), 0 0 0 3px var(--surface), 0 0 0 5px var(--green-400); }
.qdot.mini { width: 26px; height: 26px; font: var(--t-caption); font-weight: var(--w-semibold); }
.previewer { display: flex; flex-direction: column; gap: var(--s-4); box-shadow: var(--e2); animation: fade var(--dur-2) var(--ease); }
.pv-head { display: flex; align-items: center; gap: var(--s-2); font: var(--t-label); }
.pv-q { display: flex; flex-direction: column; gap: var(--s-2); --math-k: .9; }
.pv-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; --math-k: .9; }
.pv-lines li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 26px; gap: var(--s-2); align-items: center; padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.pv-lines li.step-heading { display: block; border-top: 0; padding: var(--s-3) 0 0 30px; }
.pv-lines .frag { overflow-x: auto; }
.pv-n { font: var(--t-caption); font-weight: var(--w-semibold); color: var(--muted); align-self: start; padding-top: 3px; }
.mk { width: 24px; height: 24px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; color: var(--white); }
.mk.right { background: var(--primary); }
.mk.wrong { background: var(--error); }

/* ---- practice ------------------------------------------------------------- */
.hero-progress { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); }
.hp-label { font: var(--t-caption); color: var(--on-band-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--w-semibold); }
.hp-none { font: var(--t-body-lg); color: var(--green-50); }
.pr-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.pr-question { padding: var(--s-8); box-shadow: var(--e2); position: sticky; top: calc(var(--topbar-h) + var(--s-6)); }
.pr-q-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }
.pr-q { display: flex; flex-direction: column; gap: var(--s-5); --math-k: 1.375; font: var(--t-body-lg); }
.pr-q .q-part > b { font: var(--t-body-lg); font-weight: var(--w-semibold); }
.pr-work { padding: var(--s-8); }
.pr-photo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-6) 0; }
.pr-photo h2 { font: var(--t-h2); }
.pr-photo p { max-width: 36ch; }
.pr-art .ed-tile { transform: rotate(-4deg); margin-bottom: var(--s-2); }
.pr-actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; justify-content: center; }
.pr-sent { display: flex; align-items: center; gap: var(--s-5); }
.pr-sent h2 { font: var(--t-h3); display: flex; align-items: center; gap: var(--s-2); }
/* "Is this what you wrote?": the AI's typing of the photo, one box per line */
.pr-check { display: flex; flex-direction: column; gap: var(--s-3); }
.pr-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.pr-lines li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); }
.pr-lines .num { font: var(--t-caption); font-weight: var(--w-semibold); color: var(--muted); text-align: right; }
.pr-lines input { width: 100%; min-width: 0; height: 44px; padding: 0 var(--s-3); border-radius: var(--r-md); border: 1px solid var(--control-line);
  background: var(--surface); color: var(--ink); font-family: var(--font-math); font-size: 17px; }
.pr-lines input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring, rgba(28, 150, 99, .2)); }
.pr-lines li.bad input { border-color: var(--error); background: var(--error-bg); }
.pr-addline { align-self: flex-start; }
.pr-bad { color: var(--error-text); font: var(--t-body); }
.pr-recheck { margin-top: var(--s-2); white-space: normal; height: auto; min-height: var(--btn-h); text-align: left; }
.pr-check .pr-foot { flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.pr-thumb { position: relative; display: block; width: 88px; height: 112px; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--green-950); flex-shrink: 0; box-shadow: var(--e2); cursor: zoom-in; }
.pr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-thumb-zoom { position: absolute; right: var(--s-1); bottom: var(--s-1); width: 24px; height: 24px; border-radius: var(--r-full);
  display: grid; place-items: center; background: var(--band); color: var(--on-band); }
/* the photo full screen (PhotoViewer): pinch, drag, double tap, wheel */
.overlay:has(> .photo-view) { padding: 0; }
.dialog.photo-view { position: relative; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; padding: 0;
  border-radius: 0; background: var(--green-950); overflow: hidden; }
.ph-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: grab; }
.ph-stage:active { cursor: grabbing; }
.ph-stage img { max-width: 100%; max-height: 100%; display: block; user-select: none; -webkit-user-select: none; transform-origin: center; will-change: transform; }
.icon-btn.ph-close { position: absolute; top: var(--s-4); right: var(--s-4); width: 48px; height: 48px; background: var(--surface); color: var(--ink); box-shadow: var(--e3); }
.pr-sol-h { margin: var(--s-6) 0 var(--s-3); }
.pr-foot { display: flex; justify-content: flex-end; margin-top: var(--s-6); }
.pr-work .error-card { margin-top: var(--s-4); }
/* mixed practice: "Which method?" before the working (book-quality REPORT 4.7) */
.pr-method { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-6) 0; }
.pr-method h2 { font: var(--t-h2); }
.pr-method p { max-width: 36ch; }
.pr-method-choices { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; max-width: 360px; margin-top: var(--s-2); }
.pr-method-choices .btn { justify-content: flex-start; text-align: left; white-space: normal; height: auto; min-height: var(--btn-h); }
.pr-method-answer { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-quiet); color: var(--ink); }
.pr-method-answer > svg { flex-shrink: 0; margin-top: 2px; color: var(--primary); }
.pr-method-answer.right { background: var(--surface-mint); }
.pr-method-answer b { font-weight: var(--w-semibold); }
.pr-cue { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-2); }
.lp-skills .card-head { flex-wrap: wrap; }

/* camera dialog */
.camera { width: min(1040px, calc(100vw - 64px)); padding: var(--s-5) var(--s-6) var(--s-6); gap: var(--s-4); }
.cam-head { display: flex; align-items: baseline; gap: var(--s-3); }
.cam-head h2 { font: var(--t-h3); }
.cam-view { position: relative; background: var(--green-950); border-radius: var(--r-lg); overflow: hidden; height: min(640px, calc(100vh - 260px));
  display: flex; align-items: center; justify-content: center; }
.cam-view video, .cam-view img { max-width: 100%; max-height: 100%; display: block; }
.cam-upload { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding: var(--s-10); border-radius: var(--r-lg);
  border: 2px dashed rgba(211, 255, 233, .35); background: none; color: var(--green-100); font: var(--t-body); }
.cam-upload:hover { border-color: var(--green-100); }
.cam-foot { display: flex; align-items: center; gap: var(--s-3); }

/* ---- student view on phones and tablets --------------------------------------
   Students use the app on their own phones, tablets and laptops (hosting
   SPEC, "Student pages work on phones"). base.css lifts body's 1200px
   minimum for the student view; these rules fit it from 360px up. They are
   scoped to the student view (`.student-mode` is its top bar, and every
   student page is a sibling after it) or to classes only it uses, so the
   teacher's laptop screens never change. Maths stays its true size where a
   line may be long (it scrolls inside its own row) and scales to the column
   where it is prose (a question). tests/test_student_mobile.py checks that
   no student page scrolls sideways at 360px. */
.q-part > .frag { min-width: 0; }
/* a marked line keeps its size and scrolls inside its row, never shrinks */
.student-mode ~ .page-main .mk-row .mk-line .frag { max-width: none; }
/* a previewer line's own scroll row on a phone; elsewhere it is not there */
.pv-line { display: contents; }

@media (max-width: 1023px) {
  .topbar.student-mode .view-chip { white-space: nowrap; flex-shrink: 0; }
  .lp-cols, .pr-cols { grid-template-columns: minmax(0, 1fr); }
  .lp-side, .pr-question { position: static; }
  .lp-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  /* one card in the side (no quiz yet, or nothing chosen to preview): full width */
  .lp-side:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  /* the top bar: the words that matter, no icons; the nav scrolls if it must */
  .topbar.student-mode { gap: var(--s-2); padding-inline: var(--s-4); }
  .topbar.student-mode .brand img { height: 22px; }
  .topbar.student-mode .mainnav { margin-left: 0; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
  .topbar.student-mode > .grow { display: none; }
  .topbar.student-mode .mainnav > a { padding: 0 var(--s-2); }
  .topbar.student-mode .mainnav > a svg,
  .topbar.student-mode .who,
  .topbar.student-mode .view-chip > span:not(.vc-exit),
  .topbar.student-mode .view-chip > svg { display: none; }
  .topbar.student-mode .view-chip { padding: 0 var(--s-1); flex-shrink: 0; }
}
/* a narrow phone: "My lessons" is the way home, so the wordmark gives way
   and both nav words show in full */
@media (max-width: 420px) {
  .topbar.student-mode .brand { display: none; }
}
@media (max-width: 720px) {

  .student-mode ~ .page-main .hero-in { padding-inline: var(--s-4); }
  .student-mode ~ .page-main .hero::after { right: -120px; }
  .student-mode ~ .page-main .page-body { padding: var(--s-5) var(--s-4) var(--s-12); gap: var(--s-5); }
  .student-mode ~ .page-main .card { padding: var(--s-5) var(--s-4); }
  .student-mode ~ .page-main .card.flush { padding: 0; }
  .student-mode ~ .page-main .hero.size-lg .hero-in { padding-bottom: var(--s-8); }
  .student-mode ~ .page-main .hero.size-lg h1 { font: var(--t-h1); font-weight: var(--w-light); }
  .student-mode ~ .page-main .hero-row { flex-wrap: wrap; align-items: flex-start; }
  .student-mode ~ .page-main .hero-actions { flex-basis: 100%; }
  .student-mode ~ .page-main .hero-sub { font: var(--t-body); }
  .student-mode ~ .toasts { left: var(--s-4); right: var(--s-4); transform: none; }
  .student-mode ~ .toasts .toast { min-width: 0; max-width: 100%; width: 100%; }
  .student-mode ~ .page-main .empty-state { padding: var(--s-8) var(--s-2); }
  .student-mode ~ .page-main .error-card { flex-wrap: wrap; }

  /* the lesson page */
  .lesson-page .hero-row { align-items: flex-start; }
  .lesson-strip { flex-wrap: wrap; gap: var(--s-3) var(--s-2); margin-top: var(--s-6); }
  .lp-side { grid-template-columns: minmax(0, 1fr); }
  .lp-skills .card-head.pad, .lp-earlier .card-head.pad { padding-inline: var(--s-4); }
  .skill-row { padding: var(--s-4); }
  .sr-head { flex-wrap: wrap; gap: var(--s-3); }
  .sr-head h3 { flex-basis: 100%; }
  .sr-body { gap: var(--s-3); }
  /* a mastered skill: bar, % and badge share the row (the badge ran off at 360) */
  .sr-body > .skill-progress { flex: 1 1 100%; }
  .sr-body .sp-bar { flex: 1 1 auto; width: auto; min-width: 72px; }
  .sr-cards { flex-wrap: wrap; }
  .earlier-row { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: 'tile name go' '. bar bar';
    gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); }
  .earlier-row > .lesson-tile { grid-area: tile; }
  .earlier-row > .er-name { grid-area: name; }
  .earlier-row > .skill-progress { grid-area: bar; }
  .earlier-row > .btn { grid-area: go; }

  /* practice */
  .hero-progress { align-items: flex-start; }
  .pr-question, .pr-work { padding: var(--s-5) var(--s-4); }
  .pr-q-head { margin-bottom: var(--s-4); gap: var(--s-3); flex-wrap: wrap; }
  .pr-photo { padding: var(--s-2) 0; }
  .pr-actions { flex-direction: column; align-self: stretch; }
  .pr-actions .btn { width: 100%; }
  .pr-sent { align-items: flex-start; gap: var(--s-4); }
  .pr-thumb { width: 64px; height: 84px; }
  .pr-foot .btn { width: 100%; }
  /* a lesson drawing on two topics: each topic a size down, so the hero
     still leaves room for the lesson strip on the first screen */
  .student-mode ~ .page-main .hero h1 .lp-topics { font: var(--t-h2); font-weight: var(--w-light); }

  /* the worked solution: a line keeps its size and scrolls inside its row;
     what was wrong with it sits under it */
  .student-mode ~ .page-main .mk-rows.view .mk-row { grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--s-2); padding-inline: var(--s-2); }
  .student-mode ~ .page-main .mk-row .mk-end { grid-column: 2; justify-self: start; flex-wrap: wrap; padding-bottom: var(--s-1); }
  .student-mode ~ .page-main .mk-row .mk-end:empty { display: none; }
  .student-mode ~ .page-main .mk-reason { white-space: normal; height: auto; min-height: 26px; }
  .student-mode ~ .page-main .mk-compare { grid-template-columns: minmax(0, 1fr); grid-column: 1 / -1; }
  .student-mode ~ .page-main .mk-heading { padding-left: calc(20px + var(--s-2) + var(--s-2)); }

  /* maths: a text fragment comes narrow on a phone (Frag, ?w=phone): set at
     the phone column's width, so it shows at full size and its words wrap.
     It is never shrunk to fit; a piece too wide to wrap (a long sum, a big
     integral) scrolls inside its own row or question box. */
  .student-mode ~ .page-main .frag-narrow { max-width: none; flex-shrink: 0; }
  .student-mode ~ .page-main :is(.pv-q, .pv-lines) { --math-k: 1; }
  .student-mode ~ .page-main .pr-q { --math-k: 1.125; }
  .student-mode ~ .page-main :is(.pv-q, .pr-q, .pr-cue, .mk-sol) { min-width: 0; overflow-x: auto; }
  .student-mode ~ .page-main .pv-line { display: block; min-width: 0; overflow-x: auto; }
  .student-mode ~ .page-main .pr-method-answer > div { min-width: 0; }

  /* the camera: the whole screen */
  .overlay:has(> .camera) { padding: 0; }
  .camera { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding: var(--s-4); gap: var(--s-3); }
  .cam-head { flex-wrap: wrap; align-items: center; }
  .cam-head .caption { order: 3; flex-basis: 100%; }
  .cam-view { flex: 1; height: auto; min-height: 0; }
  .cam-foot { flex-wrap: wrap; }
  .cam-foot .btn { flex: 1 1 auto; }
  .cam-foot .grow { display: none; }
}

/* Touch: every control a fingertip can hit, 44px (the look on a laptop's
   mouse is unchanged). */
@media (pointer: coarse) {
  .topbar.student-mode .brand, .topbar.student-mode .mainnav > a, .topbar.student-mode .view-chip { min-height: 44px; }
  .topbar.student-mode .view-chip .vc-exit { height: 36px; }
  .student-mode ~ .page-main .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .student-mode ~ .page-main .crumbs ol { margin-bottom: var(--s-2); margin-top: calc(-1 * var(--s-2)); }
  .student-mode ~ .page-main .btn-small { --btn-h: 44px; }
  .student-mode ~ .page-main .icon-btn, .camera .icon-btn { width: 44px; height: 44px; }
  .card-dot { width: 44px; height: 44px; font: var(--t-label); }
  .qdot { width: 44px; height: 44px; }
  .sr-head h3 a, .er-name { display: inline-flex; align-items: center; min-height: 44px; }
  .student-mode ~ .toasts .toast-x { width: 44px; height: 44px; }
  .student-mode ~ .toasts .toast-action { height: 44px; }
}

/* ======================================================= 2. other screens */

/* marking, the diagnostic and the projector are in screens-marking.css (W2a) */


/* book card lessons: the name gives way, the "+1" always shows (QA nit) */
.bk-lessons .bkl-name { display: flex; align-items: baseline; gap: var(--s-1); min-width: 0; }
.bk-lessons .bkl-first { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-lessons .bkl-more { flex-shrink: 0; }

/* a lesson that draws on more than one topic names them all, one per line, a size
   down (H1's 32/40) but in the display's Light weight, so the title keeps one family */
.hero h1 .lp-topics { display: flex; flex-direction: column; gap: var(--s-1); font: var(--t-h1); font-weight: var(--w-light); letter-spacing: -.01em; }