/* Shell styles. Every value derives from tokens.css — no raw colors here. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.l1 { font-family: var(--font-ja); }
[data-lang="en"] .l1 { display: none !important; }
[data-lang="l1"] .en { display: none !important; }
button { font-family: var(--font-sans); cursor: pointer; }
:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }

.app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--brand-deep); color: var(--on-brand);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
}
.brand { font-weight: 700; font-size: calc(15px * var(--scale)); letter-spacing: .3px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-dot); box-shadow: 0 0 0 3px rgba(91,141,239,.25); flex-shrink: 0; }
.tb-spacer { margin-left: auto; }
.tb-btn {
  background: rgba(255,255,255,.12); border: none; color: var(--on-brand);
  font-weight: 600; font-size: calc(11px * var(--scale));
  padding: 7px 12px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 6px;
}
.tb-btn:hover { background: rgba(255,255,255,.22); }
.seg { display: flex; background: rgba(255,255,255,.10); border-radius: var(--r-pill); padding: 3px; }
.seg button {
  background: none; border: none; color: var(--on-brand-soft);
  font-size: calc(11px * var(--scale)); font-weight: 600;
  padding: 5px 10px; border-radius: var(--r-pill);
}
.seg button.on { background: var(--card); color: var(--brand); }

/* Main column */
.main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 20px 16px 90px; }
.main.wide { max-width: none; padding: 0; display: flex; flex-direction: column; }

.kicker { font-size: calc(11px * var(--scale)); font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); }
h1.page-title { color: var(--brand); font-weight: 700; font-size: calc(26px * var(--scale)); line-height: 1.15; margin: 6px 0 2px; }
.page-sub { font-family: var(--font-serif); font-style: italic; color: var(--brand-light); font-size: calc(17px * var(--scale)); margin-bottom: 18px; }

/* Cards & list items */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  padding: 16px 18px; margin-bottom: 12px;
}
.item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 10px;
  transition: .14s; color: var(--text);
}
.item:hover { border-color: var(--brand-mist-2); box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.item .ph {
  flex-shrink: 0; width: calc(40px * var(--scale)); height: calc(40px * var(--scale));
  border-radius: var(--r-md); background: var(--brand-mist); color: var(--brand);
  font-weight: 700; display: flex; align-items: center; justify-content: center;
  font-size: calc(15px * var(--scale));
}
.item.done .ph { background: var(--success-bg); color: var(--success); }
.item .body { flex: 1; min-width: 0; }
.item .title { font-weight: 700; font-size: calc(15px * var(--scale)); }
.item .desc { font-size: calc(12px * var(--scale)); color: var(--text-muted); margin-top: 2px; }
.item .meta { flex-shrink: 0; font-size: calc(11px * var(--scale)); font-weight: 700; color: var(--brand-light); background: var(--brand-mist); border-radius: var(--r-pill); padding: 5px 11px; white-space: nowrap; }
.item .meta.done { color: var(--success); background: var(--success-bg); }
.item .arrow { flex-shrink: 0; color: var(--text-faint); font-size: calc(17px * var(--scale)); }

.group-lab { font-size: calc(11px * var(--scale)); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin: 22px 0 11px; display: flex; align-items: center; gap: 10px; }
.group-lab .line { flex: 1; height: 1px; background: var(--border); }

/* Progress bar */
.pbar { height: 8px; background: var(--surface-100); border-radius: var(--r-pill); overflow: hidden; margin-top: 8px; }
.pbar > div { height: 100%; background: var(--brand-accent); border-radius: var(--r-pill); transition: width .3s; }

/* Unit viewer */
.viewerbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 8px 14px;
}
.viewerbar .vtitle { font-weight: 700; font-size: calc(13px * var(--scale)); color: var(--brand); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewerbar .pageinfo { font-size: calc(11px * var(--scale)); color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.vbtn {
  border: 1px solid var(--border); background: var(--surface-50); color: var(--brand);
  font-weight: 700; font-size: calc(12px * var(--scale));
  padding: 7px 12px; border-radius: var(--r-pill);
}
.vbtn:disabled { opacity: .4; cursor: default; }
.vbtn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.vbtn.primary.is-done { background: var(--success); border-color: var(--success); }

/* The one control on this screen that throws a student's work away.

   It sat directly under Start, same grey pill, same width, one line apart, so
   the only thing telling the two apart was reading the label. Now it is red,
   it is not full width, and it sits on its own line at the bottom right, away
   from the buttons that move the student forward. */
.danger-row {
  display: flex; justify-content: flex-end;
  margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border);
}
.vbtn.danger { background: none; border-color: var(--danger); color: var(--danger); }
.vbtn.danger:hover { background: var(--danger-bg); }
.frame-wrap { flex: 1; display: flex; }
.frame-wrap iframe { flex: 1; width: 100%; border: 0; background: var(--card); }

/* Toast + status */
.toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: var(--brand-deep); color: var(--on-brand);
  border-radius: var(--r-pill); padding: 10px 18px;
  font-size: calc(12px * var(--scale)); font-weight: 600;
  box-shadow: var(--shadow-pop); z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.toast.show { opacity: 1; }
.sync-chip { font-size: calc(10px * var(--scale)); font-weight: 700; border-radius: var(--r-pill); padding: 3px 9px; }
.sync-chip.offline { background: var(--warn-bg); color: var(--warn); }
.sync-chip.online { background: var(--success-bg); color: var(--success); }
.sync-chip.warn { background: var(--danger-bg); color: var(--danger); }

/* Teaching view. Stated once, permanently, under the topbar rather than as a
   toast: a teacher needs to know their clicks are not being recorded for as
   long as they are clicking, not for three seconds after the first one. Amber
   rather than red — this is the mode working as intended, not a fault. Chrome,
   so it takes the .en1/.ja1 twins that show ONE language, not the .en/.l1 pair
   study material uses. */
.teachbar {
  position: sticky; top: 0; z-index: 49;
  background: var(--warn-bg); color: var(--text-2);
  border-bottom: 1px solid var(--warn);
  padding: 7px 16px; text-align: center;
  font-size: calc(12px * var(--scale)); font-weight: 600;
}

.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-size: calc(13px * var(--scale)); }

@media (max-width: 640px) {
  .main { padding: 16px 12px 90px; }
  .item .desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Sign-in */
.login-card { max-width: 420px; }
.fld { display: block; font-size: calc(12px * var(--scale)); font-weight: 700; color: var(--text-2); margin-bottom: 14px; }
.fld input {
  display: block; width: 100%; margin-top: 6px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-50); color: var(--text);
  font-family: var(--font-sans); font-size: calc(15px * var(--scale));
  padding: 11px 12px;
}
.fld input:focus { border-color: var(--brand-accent); outline: none; box-shadow: 0 0 0 3px var(--brand-mist-2); }
.login-btn { display: block; width: 100%; margin-top: 10px; padding: 12px; }
.login-err { color: var(--danger); font-size: calc(12px * var(--scale)); font-weight: 600; min-height: 1em; margin-bottom: 4px; }

/* Effort + score strip (unit viewer) */
.syncrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 10px 0 12px; }
.syncrow .slab { font-size: calc(12px * var(--scale)); font-weight: 700; color: var(--text-2); margin-right: 2px; }
.syncrow .effort, .syncrow .scorebox { display: flex; align-items: center; gap: 6px; }
.syncrow .ebtn {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-50); color: var(--text-2);
  font-family: var(--font-sans); font-size: calc(13px * var(--scale)); font-weight: 700; cursor: pointer;
}
.syncrow .ebtn.on { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.syncrow .ebtn.on { filter: none; }
.syncrow .effort .ebtn { filter: grayscale(1); font-size: calc(16px * var(--scale)); }
.syncrow .effort .ebtn.on { filter: grayscale(0); }
.syncrow .ecap { font-size: calc(11px * var(--scale)); font-weight: 700; color: var(--brand); margin-left: 2px; }
.syncrow .ebtn.save { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.syncrow .scorebox input {
  width: 52px; height: 34px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-50); color: var(--text);
  font-family: var(--font-sans); font-size: calc(14px * var(--scale));
}
.syncrow .scorebox input:focus { border-color: var(--brand-accent); outline: none; }
.syncrow .slash { color: var(--text-muted); font-weight: 700; }

/* Effort pop-up */
.modal-ov {
  position: fixed; inset: 0; z-index: 60;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  padding: 18px 16px; max-width: 440px; width: 100%;
}
.modal-card .mtitle {
  font-family: var(--font-sans); font-size: calc(14px * var(--scale)); font-weight: 700;
  color: var(--text); text-align: center; margin-bottom: 14px;
}
.modal-card .mrow { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.modal-card .mbtn {
  flex: 1; min-width: 68px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface-50); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 4px; cursor: pointer; font-family: var(--font-sans);
}
.modal-card .mbtn:hover { border-color: var(--brand-accent); background: var(--brand-mist); }
.modal-card .memoji { font-size: calc(24px * var(--scale)); }
.modal-card .mcap { font-size: calc(10px * var(--scale)); font-weight: 700; color: var(--text-2); text-align: center; }
.modal-card .mskip {
  display: block; margin: 14px auto 0; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-family: var(--font-sans); font-size: calc(12px * var(--scale)); font-weight: 600;
  text-decoration: underline;
}

/* Account screen */
.acct-row {
  display: flex; align-items: center; gap: 6px; padding: 6px 0;
  font-size: calc(12px * var(--scale)); font-weight: 600; color: var(--text-2);
}
.acct-row strong { margin-left: auto; color: var(--text); font-size: calc(13px * var(--scale)); text-align: right; }
.acct-err { color: var(--danger); font-size: calc(11px * var(--scale)); font-weight: 600; padding-top: 6px; word-break: break-word; }

/* separator between Study Hub sign-in and student-code entry */
.code-sep { text-align: center; font-size: calc(11px * var(--scale)); font-weight: 700;
  color: var(--text-muted); margin: 18px 0 12px; }

/* One control row: back, title, effort, score, complete. Three stacked bars
   plus the course page's own header pushed real content below the fold on a
   phone — the student scrolled past the lesson to find the controls. */
.viewerbar .vbtn.primary { margin-left: auto; }
/* The score box now lives in the stage foot; these were scoped to the bar
   it used to sit in, which left it unstyled and stretching to fill. */
.scorebox { display: flex; align-items: center; gap: 5px; flex: none; }
.slab { font-size: calc(11px * var(--scale)); font-weight: 700; color: var(--text-muted); }
.ebtn {
  border: 1px solid var(--border); background: var(--surface-50);
  border-radius: 50%; width: calc(26px * var(--scale)); height: calc(26px * var(--scale));
  font-size: calc(13px * var(--scale)); line-height: 1; cursor: pointer;
}
.ebtn.save { background: var(--success-bg); color: var(--success); border-color: var(--success); border-radius: var(--r-md); width: auto; padding: 0 9px; }
.slash { color: var(--text-muted); font-weight: 700; }
/* Editable fields need to look editable: a filled box with a visible border
   and a caret, not a number sitting on the page. */
.scorebox input {
  width: calc(46px * var(--scale)); padding: 4px 6px; text-align: center;
  font-family: inherit; font-size: calc(12px * var(--scale)); font-weight: 700;
  color: var(--brand); background: var(--card);
  border: 1px solid var(--brand-accent); border-radius: var(--r-md);
}
.scorebox input:focus { outline: none; box-shadow: 0 0 0 3px var(--brand-mist-2, rgba(45,93,186,.18)); }
.scorebox input::placeholder { color: var(--text-faint); font-weight: 400; }

/* Sign-in choices. Testing showed students scrolling past the code field
   and taking "Skip for now" without realising it made their work invisible
   to their teacher. Both paths are now numbered cards of equal weight, and
   the skip is a quiet link behind a confirmation. */
.login-card.choice { max-width: 460px; margin: 0 auto 4px; }
.choice-h {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: calc(15px * var(--scale)); color: var(--brand);
  margin-bottom: 2px;
}
.choice-h .n {
  flex: none; width: calc(22px * var(--scale)); height: calc(22px * var(--scale));
  border-radius: 50%; background: var(--brand); color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(12px * var(--scale)); font-weight: 700;
}
.choice-sub {
  font-size: calc(12px * var(--scale)); color: var(--text-muted);
  margin: 0 0 12px calc(30px * var(--scale));
}
.choice-or {
  text-align: center; max-width: 460px; margin: 10px auto;
  font-size: calc(12px * var(--scale)); font-weight: 700; color: var(--text-muted);
}
.linkish {
  display: block; margin: 20px auto 0; background: none; border: 0;
  color: var(--text-muted); font-family: inherit;
  font-size: calc(12px * var(--scale)); text-decoration: underline; cursor: pointer;
}
.linkish:hover { color: var(--text-2); }


/* ============================================================
   CLASSROOM — sidebar navigator beside the lesson stage.
   The screen a student sees from the moment a course is opened.
   ============================================================ */
.main.classroom { max-width: none; padding: 0; display: flex; flex-direction: row; min-height: 0; }

/* Tree rows carry ONE language, the other in the row's tooltip. Two
   lines per row is what makes a 50-lesson tree unreadable. The lesson
   itself keeps the .en / .l1 twins — navigation is not study material. */
.ja1 { display: none; font-family: var(--font-ja); }
[data-lang="l1"] .en1 { display: none; }
[data-lang="l1"] .ja1 { display: inline; }

.nav {
  width: 322px; flex: none; background: var(--card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.nav-head { padding: 13px 15px; border-bottom: 1px solid var(--border-soft); }
.nav-back {
  display: flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0 0 3px;
  font-family: inherit; font-size: calc(9.5px * var(--scale)); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); cursor: pointer;
}
.nav-back:hover { color: var(--brand); }
.nav-title { font-size: calc(14.5px * var(--scale)); margin: 2px 0 9px; line-height: 1.3; }
.nav-prog { display: block; font-size: calc(10.5px * var(--scale)); color: var(--text-muted); font-weight: 600; margin: 6px 0 10px; }
.nav-resume {
  width: 100%; background: var(--brand); color: var(--on-brand); border: 0;
  border-radius: var(--r-md); font-family: inherit; font-weight: 700;
  font-size: calc(12px * var(--scale)); padding: 9px 12px; cursor: pointer; text-align: left;
}
.nav-resume:hover { background: var(--brand-light); }
.nav-resume:disabled { background: var(--success); cursor: default; }
.nav-resume .rl { display: block; font-size: calc(10px * var(--scale)); font-weight: 600; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* COUR-164: going through the course again. Quieter than Continue on purpose
   — it sits under a finished course, where nobody should press it by mistake
   on the way to something else. */
.nav-restart {
  width: 100%; margin-top: 7px; background: none; color: var(--brand);
  border: 1px solid var(--brand-mist-2); border-radius: var(--r-md);
  font-family: inherit; font-weight: 700; font-size: calc(12px * var(--scale));
  padding: 8px 12px; cursor: pointer; text-align: left;
}
.nav-restart:hover { background: var(--brand-mist); border-color: var(--brand-accent); }
.nav-restart .rc { display: block; font-size: calc(10px * var(--scale)); font-weight: 600; color: var(--text-muted); }

.nav-tree { flex: 1; overflow-y: auto; padding: 10px 9px 18px; }
.nav-empty { padding: 26px 14px; text-align: center; color: var(--text-muted); font-size: calc(12px * var(--scale)); }

.unit { margin-bottom: 4px; }
.unit-head {
  width: 100%; background: none; border: 0; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 7px; padding: 7px 6px;
  text-align: left; color: var(--text); border-radius: var(--r-sm);
}
.unit-head:hover { background: var(--surface-50); }
.unit-head .tw { flex: none; width: 10px; color: var(--text-faint); font-size: calc(9px * var(--scale)); transition: transform .15s; }
.unit.open .unit-head .tw { transform: rotate(90deg); }
.unit-head .ut { flex: 1; min-width: 0; font-weight: 700; font-size: calc(12px * var(--scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-head .uc { flex: none; font-size: calc(9.5px * var(--scale)); font-weight: 700; color: var(--text-muted); }
.unit-body { display: none; padding: 1px 0 6px 6px; }
.unit.open .unit-body { display: block; }

.node { margin: 2px 0; }
.node-head {
  width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 7px;
  padding: 7px 8px; text-align: left; color: var(--text);
}
.node-head:hover { border-color: var(--brand-mist-2); }
.node.open .node-head { border-color: var(--brand-mist-2); background: var(--brand-mist); }
.node-head .tw { flex: none; width: 9px; color: var(--text-faint); font-size: calc(8.5px * var(--scale)); transition: transform .15s; }
.node.open .node-head .tw { transform: rotate(90deg); }
.node-head .ph {
  flex: none; min-width: 30px; height: 21px; padding: 0 4px; border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  background: var(--brand-mist); color: var(--brand-light);
  font-size: calc(9.5px * var(--scale)); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.node.assessment .node-head .ph { background: var(--warn-bg); color: var(--warn); }
.node.alldone .node-head .ph { background: var(--success-bg); color: var(--success); }
.node-head .nt { flex: 1; min-width: 0; font-weight: 600; font-size: calc(12px * var(--scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-head .nm { flex: none; font-size: calc(9.5px * var(--scale)); font-weight: 700; color: var(--text-muted); }
.node.alldone .node-head .nm { color: var(--success); }
.node-body { display: none; padding: 3px 0 5px 24px; }
.node.open .node-body { display: block; }

.page-row {
  width: 100%; background: none; border: 0; border-left: 2px solid var(--border);
  font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; text-align: left; color: var(--text-2); font-size: calc(11.5px * var(--scale));
}
.page-row:hover { background: var(--surface-50); }
.page-row .pn { flex: none; font-size: calc(9px * var(--scale)); font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.page-row .pt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-row .pd { flex: none; font-size: calc(9.5px * var(--scale)); color: var(--text-faint); font-weight: 700; }
.page-row.done { color: var(--text-muted); }
.page-row.done .pd { color: var(--success); }
.page-row.current { background: var(--brand-mist); border-left-color: var(--brand-accent); color: var(--brand); font-weight: 700; }
.page-row.current .pn { color: var(--brand-accent); }

/* Where finished lessons go, so the tree above stays about what is left.
   COUR-121: it used to sit in the same grey as the rest of the sidebar and
   read as a footer, so students never looked at it. It now takes the success
   colour, states the count in a badge, and is flown into when a lesson is
   finished. */
.nav-done { flex: none; border-top: 2px solid var(--success); background: var(--success-bg); }
.nav-done-toggle {
  width: 100%; background: none; border: 0; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 13px 15px; text-align: left;
  font-weight: 700; font-size: calc(12px * var(--scale)); color: var(--success);
}
.nav-done-toggle .tw { color: var(--success); font-size: calc(9px * var(--scale)); transition: transform .15s; }
.nav-done.open .nav-done-toggle .tw { transform: rotate(90deg); }
.nav-done-toggle .bx { flex: none; font-size: calc(12px * var(--scale)); }
.nav-done-toggle .sp { flex: 1; }
.nav-done-toggle .ct {
  flex: none; min-width: 20px; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--success); color: #fff; text-align: center;
  font-size: calc(10.5px * var(--scale)); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Nothing finished yet: back to the quiet grey. A green bar announcing "0" is
   worse than the footer this replaced — it draws the eye to an empty box. */
.nav-done.empty { border-top: 1px solid var(--border); background: var(--surface-50); }
.nav-done.empty .nav-done-toggle { color: var(--text-2); font-size: calc(11px * var(--scale)); }
.nav-done.empty .nav-done-toggle .tw,
.nav-done.empty .nav-done-toggle .bx { color: var(--text-faint); }
.nav-done.empty .nav-done-toggle .ct { background: none; color: var(--text-faint); padding: 0; }
.done-none { padding: 4px 6px 2px; font-size: calc(11px * var(--scale)); color: var(--text-muted); }

.nav-done-body { display: none; max-height: 34vh; overflow-y: auto; padding: 0 11px 11px; }
.nav-done.open .nav-done-body { display: block; }
.done-unit { font-size: calc(9.5px * var(--scale)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--success); opacity: .75; padding: 8px 6px 3px; }
.done-row {
  width: 100%; background: none; border: 0; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 7px; padding: 5px 6px; text-align: left;
  font-size: calc(11.5px * var(--scale)); color: var(--text-2); border-radius: var(--r-sm);
}
.done-row:hover { background: #fff; color: var(--brand); }
.done-row .ck { flex: none; color: var(--success); font-weight: 700; }
.done-row .dt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The lesson already open on the stage, listed here so the one a student has
   just finished is not the one missing from the list of finished lessons. */
.done-row.current { background: #fff; font-weight: 700; color: var(--brand); }

/* A lesson landing in the drawer — COUR-121. */
.nav-done.landed { animation: doneLand 1.1s ease; }
@keyframes doneLand {
  0%   { background: var(--success-bg); }
  18%  { background: #86EFAC; }
  100% { background: var(--success-bg); }
}
.nav-done.landed .nav-done-toggle .ct { animation: doneBadge 1.1s ease; }
@keyframes doneBadge {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.45); }
}
/* The tick that flies from "Mark complete" into the drawer header. */
.fly-done {
  position: fixed; z-index: 200; pointer-events: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--success); color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: var(--shadow-pop);
  transition: transform .7s cubic-bezier(.5, -0.25, .4, 1), opacity .7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .fly-done { display: none; }
  .nav-done.landed, .nav-done.landed .nav-done-toggle .ct { animation: none; }
}

.stage { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.stage .stage-scroll { flex: 1; overflow-y: auto; padding: 20px 16px 40px; max-width: 860px; }
.nav-toggle { display: none; }
.nav-scrim { display: none; }

/* ── MOBILE: the sidebar becomes a drawer ── */
@media (max-width: 900px) {
  .nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: min(88vw, 322px);
    transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow-pop);
  }
  body.nav-drawer-open .nav { transform: translateX(0); }
  body.nav-drawer-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--overlay); }
  .nav-toggle { display: inline-flex; }
}


/* ── Mobile chrome ───────────────────────────────────────────
   A phone was showing four stacked bars before a word of the lesson: the
   player's topbar (with "Global Edge" broken across two lines), the
   viewerbar on three rows, and the lesson's own toolbar inside the iframe.
   The lesson's toolbar is folded away in js/app.js — every control on it is
   a second copy of one above it. The rest is here.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .topbar { gap: 7px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
  .brand { font-size: calc(13px * var(--scale)); }
  .brand .dot { width: 8px; height: 8px; box-shadow: none; }
  .tb-btn { padding: 6px 10px; font-size: calc(10.5px * var(--scale)); }

  /* One row: contents, title, page arrows. Completing moved to the foot. */
  .viewerbar { flex-wrap: nowrap; gap: 7px; padding: 7px 10px; }
  .viewerbar .vbtn { padding: 6px 10px; font-size: calc(11px * var(--scale)); }
  .viewerbar .vtitle { font-size: calc(12px * var(--scale)); }
  .viewerbar .pageinfo { display: none; }
  /* The score box is a teacher-facing override, and the lesson fills it in
     by itself when it can score the page. On a phone it wrapped into four
     stacked rows and cost more height than the lesson it was reporting on. */
  .stagefoot { padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .stagefoot .scorebox { display: none; }
  .stagefoot .foot-spacer { display: none; }
  .stagefoot .btn-done, .stagefoot .btn-next { flex: 1; }
}


/* The completion control, under the lesson rather than above it. */
.stagefoot {
  flex: none; display: flex; align-items: center; gap: 10px;
  background: var(--card); border-top: 1px solid var(--border);
  padding: 9px 14px;
}
.stagefoot .foot-spacer { margin-left: auto; }
.stagefoot .btn-done {
  border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand);
  font-weight: 700; font-size: calc(12.5px * var(--scale));
  padding: 10px 18px; border-radius: var(--r-pill);
}
.stagefoot .btn-done.is-done { background: var(--success); border-color: var(--success); }
.stagefoot .btn-next {
  border: 1px solid var(--brand); background: var(--card); color: var(--brand);
  font-weight: 700; font-size: calc(12.5px * var(--scale));
  padding: 10px 18px; border-radius: var(--r-pill);
}
.stagefoot .btn-next:hover { background: var(--brand-mist); }
.stagefoot .btn-done:hover { filter: brightness(1.06); }

/* Display settings, behind one button in the top bar. */
.settings-card { text-align: left; min-width: min(94vw, 340px); }
.settings-card .set-lab {
  font-size: calc(10.5px * var(--scale)); font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 6px;
}
.settings-card .set-row { display: flex; gap: 6px; }
.settings-card .set-btn {
  flex: 1; border: 1px solid var(--border); background: var(--card); color: var(--text-2);
  border-radius: var(--r-md); padding: 10px 6px; font-weight: 700;
  font-size: calc(12px * var(--scale)); line-height: 1.2;
}
.settings-card .set-btn:hover { border-color: var(--brand-accent); background: var(--brand-mist); }
.settings-card .set-btn.on { border-color: var(--brand); background: var(--brand-mist); color: var(--brand); }
.settings-card .set-account {
  display: flex; align-items: center; width: 100%; margin-top: 16px;
  border: 1px solid var(--border); background: var(--surface-50); color: var(--text-2);
  border-radius: var(--r-md); padding: 11px 13px; font-weight: 700;
  font-size: calc(12px * var(--scale));
}
.settings-card .set-account:hover { border-color: var(--brand-mist-2); background: var(--brand-mist); }
.settings-card .set-account .chev { margin-left: auto; color: var(--text-faint); }