/* ===== UX refinement pass (30 Sep 2026). Loaded last. See UX-AUDIT.md.
   Shared patterns: learner chip, status pills (one vocabulary), "Why today?", parent insight cards,
   curriculum view, starting-check results. Uses the theme tokens only. ===== */

/* touch targets: 48px for learners (design system), never below 44 */
.topnav button{min-height:44px}
.back,.linkish{min-height:44px;display:inline-flex;align-items:center}
.chip-btn{min-height:44px}
@media (pointer:coarse){.topnav button,.chip-btn,.back,.linkish{min-height:48px}}

.controls .btn{min-height:48px}

/* page headings that used to be h2 */
h1.page-h{font-size:clamp(24px,1.2vw + 15px,32px);margin:0;line-height:var(--lh-h2)}
.gate h1.page-h{font-size:var(--fs-3xl)}
.lesson-obj{margin:6px 0 0;font-size:var(--fs-body);color:var(--ink-2);max-width:60ch}
.lesson-obj b{color:var(--ink)}

/* whose plan is this? */
.learner{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:4px 6px 4px 4px;min-height:44px}
.learner[hidden]{display:none}
.learner .av{width:34px;height:34px;border-radius:10px;background:var(--sunny);color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:var(--fw-semibold);font-size:var(--fs-body)}
.learner .nm{display:flex;flex-direction:column;line-height:1.1;padding-right:4px}
.learner .nm b{font-size:var(--fs-sm)}
.learner .nm span{font-size:var(--fs-xs);color:var(--ink-2);font-weight:var(--fw-semibold)}
.learner button{border:0;background:var(--panel);border-radius:10px;font-weight:var(--fw-button);font-size:var(--fs-label);padding:0 12px;min-height:36px;cursor:pointer;color:var(--ink)}
.learner button:hover{background:var(--line)}
@media (max-width:760px){.learner .nm span{display:none}}

/* one status vocabulary, always icon + word */
.st{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:3px 10px;font-size:var(--fs-label);font-weight:var(--fw-semibold);white-space:nowrap;line-height:1.35}
.st svg{flex:none}
.st.mastered{background:var(--good-ink);color:#fff}
.st.secure{background:var(--good-fill);color:var(--good-ink)}
.st.learning{background:var(--maths-soft,#E3ECFD);color:var(--maths-soft-ink,#123E9E)}
.st.attention{background:var(--attention-fill);color:var(--ink);box-shadow:inset 0 0 0 1.5px #E0A100}
.st.revisiting{background:var(--sunny);color:var(--ink)}
.st.notstarted{background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.st.extension{background:var(--ink);color:#fff}
.st.soon{background:var(--panel);color:var(--ink-2)}

/* Why today? */
.why-l{display:block;font-weight:var(--fw-semibold);font-size:var(--fs-meta);letter-spacing:0;margin-bottom:2px;opacity:.85}
.hero-task .why-box{background:rgba(255,255,255,.16);border-radius:12px;padding:8px 12px;margin-top:6px;max-width:34em}
.hero-task .why-box p{margin:0}
.task .why-box p{margin:0}

/* starting-check results */
.res-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
@media (max-width:860px){.res-groups{grid-template-columns:minmax(0,1fr)}}
.res-g{border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;background:var(--panel)}
.res-g h2{font-size:var(--fs-lg);margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.res-g p{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.res-g ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-weight:var(--fw-semibold)}
.res-g.secure{background:var(--good-fill)} .res-g.start{background:var(--attention-fill)}
.plan-preview{margin-top:18px;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.plan-preview h2{font-size:var(--fs-xl);margin:0}
.plan-preview ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.plan-preview li b{display:block}
.plan-preview li span{color:var(--ink-2);font-size:var(--fs-sm)}
details.more-detail{margin-top:16px}
details.more-detail > summary{cursor:pointer;font-weight:var(--fw-semibold);min-height:44px;display:flex;align-items:center}

/* parent insight pattern */
.todo{border-radius:20px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.todo.none{background:var(--good-fill)} .todo.some{background:var(--attention-fill)}
.todo .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--surface)}
.todo h2{font-size:var(--fs-xl);margin:0 0 4px}
.todo p{margin:0}
.todo ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.insight{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.insight h3{margin:0;font-family:var(--display);font-size:var(--fs-h4);font-weight:var(--fw-h3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.insight .rows{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;font-size:var(--fs-sm)}
.insight .rows dt{font-weight:var(--fw-semibold);color:var(--ink)} .insight .rows dd{margin:0;color:var(--ink-2)}
@media (max-width:520px){.insight .rows{grid-template-columns:minmax(0,1fr)} .insight .rows dd{margin-bottom:6px}}
.doing{background:var(--panel);border-radius:18px;padding:14px 18px;margin-top:4px}
.doing h3{margin:0 0 6px;font-size:var(--fs-h4)}
.doing ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)}

/* child switcher in the parent area */
.kidswitch{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.kidswitch button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px 4px 4px;border-radius:14px;border:1.5px solid var(--line-strong);background:var(--surface);font-weight:var(--fw-button);cursor:pointer}
.kidswitch button .av{width:34px;height:34px;border-radius:10px;background:var(--panel);display:grid;place-items:center;font-family:var(--display)}
.kidswitch button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.kidswitch button[aria-pressed="true"] .av{background:var(--sunny);color:var(--ink)}

/* curriculum view */
.cur-intro{max-width:66ch;margin:0 0 14px}
.cur-legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.cur-strand{margin-top:18px}
.cur-strand > h3{font-size:var(--fs-lg);margin:0 0 8px}
.cur-topic{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;margin-bottom:10px}
.cur-topic > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 16px;min-height:52px}
.cur-topic > summary::-webkit-details-marker{display:none}
.cur-topic > summary b{font-size:var(--fs-body)}
.cur-topic > summary .code{display:block;font-size:var(--fs-meta);color:var(--ink-2);font-weight:var(--fw-semibold)}
.cur-topic .inner{padding:0 16px 14px;display:flex;flex-direction:column;gap:6px}
.cur-skill{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.cur-skill .sub{display:block;font-size:var(--fs-meta);color:var(--ink-2)}
.cur-note{background:var(--panel);border-radius:14px;padding:12px 14px;font-size:var(--fs-sm);max-width:66ch}

/* keep the header on one row once the learner chip is there: the save status keeps its dot, the words stay for screen readers */
@media (max-width:1320px){
  .learner:not([hidden]) ~ .save-dot #saveTxt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:1180px){ .topnav{order:5;width:100%} }

/* ===== Typography: dashboards and student cards (type system, 30 Sep 2026) =====
   Hierarchy by size, weight and colour: context (small, muted) > the thing itself (larger, semibold) > status (pill) > detail (regular). */
.st{font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:0}
.ins-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ins-topic{font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-2)}
.ins-when{font-size:var(--fs-meta);font-weight:var(--fw-medium);color:var(--ink-2)}
.insight h3{font-size:var(--fs-h4);font-weight:var(--fw-semibold);letter-spacing:var(--ls-h4);line-height:var(--lh-tight)}
.insight .rows{font-size:var(--fs-sm);line-height:var(--lh-ui)}
.insight .rows dt{font-size:var(--fs-label);font-weight:var(--fw-semibold)}
.cur-topic > summary b{font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.cur-topic > summary .code,.code{font-weight:var(--fw-regular);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.cur-skill{font-size:var(--fs-sm)} .cur-skill .sub{font-size:var(--fs-meta);font-weight:var(--fw-regular)}
.cur-strand > h3{font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-2)}
.att h4{font-size:var(--fs-h4);font-weight:var(--fw-semibold);letter-spacing:var(--ls-h4)}
.todo h2{font-size:var(--fs-h4);font-weight:var(--fw-semibold);letter-spacing:var(--ls-h4)}
/* student cards: title above body, body stays generous */
.task h3{font-size:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-h4);line-height:var(--lh-tight)}
.task .body p{font-size:var(--fs-md);line-height:var(--lh-body)}
.why-l{font-weight:var(--fw-semibold);letter-spacing:0}
/* numbers that should line up */
/* digits of equal width where numbers are compared or tick over. Applied to numeric components only:
   Inter's tabular setting also widens the hyphen, so it isn't set on running text. */
.t-timer,#tclock,.tt-qn,.tt-map,.tt-cell,.tt-qhead,.tt-legend,.t-pill,.ov-week,.days,.bar-prog,.tile b,.num,.progress,
.qtop,.review-item b,.work-row b,.tc-head,.st,.code,.learner .nm span{font-variant-numeric:tabular-nums}
.insight details summary{font-size:var(--fs-sm);font-weight:var(--fw-semibold);min-height:36px;display:flex;align-items:center}

/* six tabs fit on a phone: tighter padding, and the row still scrolls on the very smallest screens */
@media (max-width:520px){ .topnav{gap:0;padding:3px} .topnav button{padding:9px 6px;font-size:13.5px} }
@media (max-width:420px){ .topnav button{padding:9px 5px;font-size:13px} }
@media (max-width:350px){ .topnav button{padding:9px 4px;font-size:12.5px} }

/* locked: coming soon (not clickable, clearly different from open tiles) */
.card.subject.soon.locked,.task.locked{background:var(--panel);color:var(--ink-2);box-shadow:none;border:2px dashed var(--line-strong);cursor:not-allowed}
.card.subject.soon.locked h3,.task.locked h3{color:var(--ink)}
.task.locked .ico{background:var(--line-strong);color:#fff}
.card.subject.soon.locked .foot{margin-top:auto}
.topic-head + .stack{margin-top:18px}

/* account menu (learner chip + Sign out) */
.learner{position:relative;border:0;background:none;padding:0;gap:0}
.learner-btn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:4px 10px 4px 4px;min-height:44px;font:inherit;color:inherit;cursor:pointer;text-align:left}
.learner-btn.static{cursor:default;padding-right:10px}
.learner-btn:hover:not(.static){background:var(--panel)}
.learner-btn .caret{flex:none;color:var(--ink-2)}
.learner-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:230px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 16px 40px -12px rgba(17,24,39,.28);display:flex;flex-direction:column;gap:2px}
.acct-menu[hidden]{display:none}
.acct-menu .who{margin:0;padding:8px 10px 10px;font-size:var(--fs-label);color:var(--ink-2);border-bottom:1px solid var(--line);margin-bottom:4px;line-height:1.35;overflow-wrap:anywhere}
.acct-menu .who b{color:var(--ink)}
.acct-menu button{border:0;background:none;text-align:left;min-height:46px;padding:0 12px;border-radius:10px;font-weight:var(--fw-semibold);font-size:var(--fs-body);color:var(--ink);cursor:pointer}
.acct-menu button:hover,.acct-menu button:focus-visible{background:var(--panel)}
.acct-menu button.out{color:var(--bad)}