/* Parent dashboard (CedarLearn): calm, professional, no external assets. Brand tokens (--cl-*) come from brand.css. */
:root {
  color-scheme: light;
  --bg: var(--cl-cream);
  --surface: var(--cl-white);
  --surface-2: var(--cl-stone);
  --border: var(--cl-line);
  --border-strong: var(--cl-line-strong);  /* inputs, selects, checkboxes, secondary buttons */
  --text: var(--cl-text);
  --text-2: #3D4C5B;
  --muted: var(--cl-muted);
  --accent: var(--cl-navy);
  --accent-ink: var(--cl-white);
  --primary: var(--cl-green);  /* SPED #19: main buttons are cedar green */
  --primary-ink: var(--cl-white);
  --focus: var(--cl-navy);
  --danger: #b42318;
  --danger-bg: #fdf0ee;
  --ok: var(--cl-green);

  /* status pills: background / ink */
  --st-new-bg: var(--cl-stone);      --st-new: #4B5563;
  --st-learning-bg: var(--cl-sky);   --st-learning: var(--cl-navy);
  --st-review-bg: var(--cl-amber-wash); --st-review: #7A4D00;
  --st-known-bg: var(--cl-sage);     --st-known: var(--cl-text);
  --st-mastered-bg: var(--cl-green); --st-mastered: var(--cl-white);  /* green is for completed work only */

  /* knowledge bar */
  --bar-track: var(--cl-line);
  --bar-fill: var(--cl-navy);

  /* strategy series (categorical slots 1–3): navy, mid-blue, green */
  --s-quest: var(--cl-navy);
  --s-calm: #4A7FAE;
  --s-sprint: var(--cl-green);

  --radius: var(--cl-radius-lg);
  --shadow: var(--cl-shadow);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121413;
    --surface: #1b1e1c;
    --surface-2: #232724;
    --border: #343935;
    --text: #eceeec;
    --text-2: #c4c9c5;
    --muted: #a3aaa5;
    --accent: #7db7e3;
    --accent-ink: #0d1a24;
    --primary: #74d39a;
    --primary-ink: #0d1a24;
    --focus: #8cc4ff;
    --danger: #ff8a7a;
    --danger-bg: #2c1714;
    --ok: #74d39a;
    --st-new-bg: #2c302d;      --st-new: #c9cfcb;
    --st-learning-bg: #1b2d45; --st-learning: #a9cdf5;
    --st-review-bg: #3a2c10;   --st-review: #f3c96d;
    --st-known-bg: #11332f;    --st-known: #7fded1;
    --st-mastered-bg: #15331f; --st-mastered: #86dca3;
    --bar-track: #2c312e;
    --bar-fill: #5cc0a8;
    --s-quest: #3987e5;
    --s-calm: #d95926;
    --s-sprint: #199e70;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121413;
  --surface: #1b1e1c;
  --surface-2: #232724;
  --border: #343935;
  --text: #eceeec;
  --text-2: #c4c9c5;
  --muted: #a3aaa5;
  --accent: #7db7e3;
  --accent-ink: #0d1a24;
  --primary: #74d39a;
  --primary-ink: #0d1a24;
  --focus: #8cc4ff;
  --danger: #ff8a7a;
  --danger-bg: #2c1714;
  --ok: #74d39a;
  --st-new-bg: #2c302d;      --st-new: #c9cfcb;
  --st-learning-bg: #1b2d45; --st-learning: #a9cdf5;
  --st-review-bg: #3a2c10;   --st-review: #f3c96d;
  --st-known-bg: #11332f;    --st-known: #7fded1;
  --st-mastered-bg: #15331f; --st-mastered: #86dca3;
  --bar-track: #2c312e;
  --bar-fill: #5cc0a8;
  --s-quest: #3987e5;
  --s-calm: #d95926;
  --s-sprint: #199e70;
  --shadow: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--cl-font-body);
  overflow-wrap: anywhere;
}
h1, h2, h3 { line-height: 1.25; margin: 0; font-family: var(--cl-font-head); }
h1 { font-size: 28px; font-weight: 800; }
h2 { font-size: 20px; font-weight: 700; margin-bottom: .5rem; }
h3 { font-weight: 700; }
@media (min-width: 1000px) { h1 { font-size: 32px; } }
h3 { font-size: 1rem; }
p { margin: .25rem 0; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---------- Buttons & inputs ---------- */
.btn {
  min-height: 44px; min-width: 44px;
  padding: .55rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--cl-radius-md);
  background: var(--surface);
  color: var(--accent);
  font: 700 16px/1.25 var(--cl-font-head);
  cursor: pointer;
}
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn:hover:not(:disabled) { background: var(--cl-sky-light); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* SPED #19: the brand brief's primary button is cedar green (white text, 5:1), the sign-in button too */
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-primary:hover:not(:disabled) { background: var(--primary); filter: brightness(1.08); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
:root:not([data-theme="light"]) .btn-danger { color: var(--bg); }
.btn-danger:hover:not(:disabled) { background: var(--danger); filter: brightness(1.08); }
.btn-danger-outline { color: var(--danger); border-color: var(--danger); }
input[type="password"], input[type="text"], input[type="email"], input[type="date"], select {
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--cl-radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  max-width: 100%;
}
label { font-weight: 600; }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: start center; padding: 24px 16px; }
@media (min-width: 700px) { .login { padding-top: 8vh; } }  /* the card starts near the top, never floating mid-screen on a phone */
.login-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: .6rem; }
.login-card input { width: 100%; min-width: 0; }
.login-card h1 { display: grid; gap: .75rem; }
/* the logo sits on a cream band across the top of the white card (the PNG has a cream ground) */
.logo-band { display: block; margin: -1rem -1.1rem 0; padding: 16px 1.1rem 12px; background: var(--cl-cream);
  border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.cl-logo { display: block; height: 32px; width: auto; }
.form-error { color: var(--danger); min-height: 1.5em; font-size: .9rem; }

/* ---------- Header ---------- */
.topbar {
  background: var(--cl-cream);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
.topbar-inner {
  max-width: 1040px; margin: 0 auto; padding: .6rem 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
}
.brand { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 18px; font-weight: 700; }
.brand .cl-logo { margin: 8px 0; }  /* 8 px clear space; the logo is never filtered, shadowed or rounded */
.brand-sub { color: var(--accent); }
.topbar-actions .btn svg { flex: none; margin-right: 6px; }
.topbar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.student-picker select { font-weight: 600; }

/* ---------- Layout ---------- */
.container {
  max-width: 1040px; margin: 0 auto; padding: 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem 1.1rem;
  min-width: 0;
}
.banner {
  margin: 0; padding: .75rem 1rem; border-radius: 10px;
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger);
}
/* R3-C02: the page-wide line is calm (never a red box) and holds its own "Try again" */
#global-msg.banner { background: var(--st-review-bg); color: var(--text); border-color: var(--st-review); }
#global-msg .banner-retry { margin-left: .5rem; vertical-align: middle; }
.callout {
  margin: .5rem 0 1rem; padding: .75rem 1rem;
  border-left: 4px solid var(--st-review); border-radius: 8px;
  background: var(--st-review-bg); color: var(--text);
}
.callout strong { color: var(--st-review); }
.empty { color: var(--muted); font-style: italic; }

/* ---------- Tonight (hero) ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 1rem 2rem;
  border-left: 6px solid var(--accent); padding: 1.1rem 1.3rem 1.2rem;
}
.eyebrow { margin: 0 0 .2rem; font-size: .875rem; font-weight: 600; color: var(--muted); }
.headline { font-size: 1.55rem; font-weight: 750; line-height: 1.25; margin: 0 0 .75rem; }
.steps { margin: 0; padding-left: 1.4rem; display: grid; gap: .6rem; }
.steps li::marker { font-weight: 700; color: var(--text-2); }
.step-main { margin: 0; font-size: 1.05rem; }
.step-sub { margin: .2rem 0 0; color: var(--text-2); font-size: .92rem; }
.steps .btn { margin-top: .4rem; }
.btn-small { min-height: 44px; padding: .35rem .9rem; font-size: 1rem; }
.hero .ctrl-msg:empty { display: none; }
.glance { background: var(--surface-2); border-radius: 10px; padding: .75rem .9rem; align-self: start; }
.glance dl { margin: 0; display: grid; gap: .1rem; }
.glance dt { color: var(--muted); font-size: .875rem; font-weight: 600; }
.glance dd { margin: 0 0 .45rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.glance dd:last-child { margin-bottom: 0; }

.sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; }
.sec-head h2 { margin-bottom: 0; }
.counts { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; list-style: none; }
.counts li { display: inline-flex; align-items: center; gap: .35rem; }
.pass { color: var(--ok); font-weight: 700; }
.fail { color: var(--danger); font-weight: 700; }

/* "Details" toggles */
details.more { margin-top: .9rem; border-top: 1px solid var(--border); padding-top: .25rem; }
details.more > summary {
  cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
  color: var(--accent); font-weight: 600; font-size: .95rem;
}
.explain { margin: .25rem 0 0; display: grid; gap: .1rem; }
.explain dt { font-weight: 600; }
.explain dd { margin: 0 0 .5rem; color: var(--text-2); font-size: .9rem; }

/* ---------- Pills ---------- */
.pill {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: .875rem; font-weight: 650; white-space: nowrap;
}
.pill.st-new { background: var(--st-new-bg); color: var(--st-new); }
.pill.st-learning { background: var(--st-learning-bg); color: var(--st-learning); }
.pill.st-review { background: var(--st-review-bg); color: var(--st-review); }
.pill.st-known { background: var(--st-known-bg); color: var(--st-known); }
.pill.st-mastered { background: var(--st-mastered-bg); color: var(--st-mastered); }

/* ---------- Mastery map ---------- */
.mastery-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.concept {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: .4rem 1rem; align-items: center;
  padding: .7rem 0; border-top: 1px solid var(--border);
}
.concept:first-child { border-top: 0; }
.concept-head { margin-top: .75rem; padding: 0 0 .35rem; border-top: 0; border-bottom: 1px solid var(--border); font-size: .875rem; font-weight: 650; color: var(--text-2); }
.concept-title { font-weight: 650; }
.concept-guide { color: var(--muted); font-size: .875rem; }
.concept .lab { display: none; color: var(--muted); font-size: .875rem; }
.kbar { display: flex; align-items: center; gap: .5rem; }
.kbar-track { flex: 1; height: 10px; border-radius: 5px; background: var(--bar-track); overflow: hidden; min-width: 60px; }
.kbar-fill { height: 100%; border-radius: 5px; background: var(--bar-fill); }
.kbar-fill.st-review, .kbar-fill.st-learning { background: var(--cl-amber); }
.kbar-fill.st-new { background: var(--border-strong); }
.kbar-num { font-variant-numeric: tabular-nums; font-size: .875rem; width: 3.2em; text-align: right; }
.concept-stats { font-size: .88rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.test-miss { display: block; color: var(--st-review); font-weight: 600; font-size: .875rem; }
.qc-note { display: block; color: var(--text-2); font-size: .875rem; margin-top: 2px; }
.qc-tag { color: var(--text-2); font-weight: 600; }
.concept details { grid-column: 1 / -1; }
.concept summary {
  cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
  color: var(--accent); font-weight: 600; font-size: .92rem;
}
.mistakes { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .5rem; }
.mistake { background: var(--surface-2); border-radius: 8px; padding: .6rem .8rem; font-size: .92rem; }
.mistake dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .2rem .75rem; }
.mistake dt { color: var(--muted); font-weight: 600; }
.mistake dd { margin: 0; min-width: 0; }
.mistake ol, .mistake ul { margin: 0; padding-left: 1.25rem; }
.mistake .wrong { color: var(--danger); }
.mistake .right { color: var(--ok); }

/* ---------- Mix-ups ---------- */
.mix-list { list-style: none; padding: 0; margin: 0; }
.mix-list li {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .55rem 0; border-top: 1px solid var(--border);
}
.mix-list li:first-child { border-top: 0; }
.mix-meta { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; font-size: .9rem; }
.mix-count { font-variant-numeric: tabular-nums; color: var(--text-2); }
.fixed { color: var(--ok); font-weight: 650; }
.active { color: var(--st-review); font-weight: 650; }
.mix-totals { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.mix-totals strong { font-variant-numeric: tabular-nums; }

/* ---------- Strategy ---------- */
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .9rem; }
.legend li { display: inline-flex; align-items: center; gap: .4rem; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-quest { background: var(--s-quest); }
.sw-calm { background: var(--s-calm); }
.sw-sprint { background: var(--s-sprint); }

.table-wrap { width: 100%; }
table.strat { width: 100%; border-collapse: collapse; font-size: .92rem; }
.strat th, .strat td { padding: .5rem .6rem; text-align: right; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.strat th:first-child, .strat td:first-child { text-align: left; }
.strat thead th { font-weight: 650; color: var(--text-2); vertical-align: bottom; }
.strat tbody th { font-weight: 600; }
.strat .hint { display: block; font-weight: 400; color: var(--muted); font-size: .875rem; max-width: 26rem; }
.strat td.best { font-weight: 750; background: var(--st-mastered-bg); color: var(--st-mastered); }
.best-tag { font-size: .875rem; margin-left: .25rem; }

.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; margin-top: 1rem; }
.chart { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .7rem .4rem; margin: 0; }
.chart figcaption { font-size: .88rem; font-weight: 650; margin-bottom: .25rem; }
.chart figcaption .hint { font-weight: 400; color: var(--muted); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .lbl { fill: var(--text-2); }
.chart .val { fill: var(--text); font-weight: 600; }
.chart .track { fill: var(--bar-track); }
.chart .b-quest { fill: var(--s-quest); }
.chart .b-calm { fill: var(--s-calm); }
.chart .b-sprint { fill: var(--s-sprint); }
.chart .bar:hover { opacity: .85; }

.lock-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* ---------- Sessions ---------- */
.sess-list { list-style: none; padding: 0; margin: 0; }
.sess {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) repeat(3, minmax(0, .8fr)) 3.5rem;
  gap: .25rem .75rem; align-items: center;
  padding: .6rem 0; border-top: 1px solid var(--border); font-size: .92rem;
}
.sess:first-child { border-top: 0; }
.sess-strat { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; }
.sess .num { font-variant-numeric: tabular-nums; }
.sess .stats { display: contents; }
.sess .lab { display: none; color: var(--muted); }
.sess-rating { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: 1.3rem; text-align: center; }
.sess-mood { font-size: .875rem; font-weight: 600; color: var(--text-2); }
.sess-long { grid-column: 1 / -1; margin-top: -.1rem; font-size: .875rem; font-weight: 600; color: var(--text-2); }
.sess-head { font-weight: 650; color: var(--text-2); font-size: .875rem; }

/* ---------- Controls ---------- */
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; }
.control .btn { width: 100%; }
.control p { margin-top: .35rem; }
.danger-panel {
  margin-top: 1rem; padding: 1rem; border-radius: 10px;
  border: 1px solid var(--danger); background: var(--danger-bg);
  display: flex; flex-direction: column; gap: .5rem;
}
.danger-panel strong { color: var(--danger); }
.danger-panel input { max-width: 320px; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.ctrl-msg { min-height: 1.5em; margin-top: .75rem; font-weight: 600; }
.ctrl-msg.ok { color: var(--ok); }
.ctrl-msg.err { color: var(--danger); }

/* ---------- Known gaps ---------- */
.note { color: var(--muted); font-size: .9rem; padding: 0 .25rem 2rem; }
.note h2 { font-size: .95rem; color: var(--text-2); }
.note ul { margin: .25rem 0 0; padding-left: 1.2rem; }

.num, .kbar-num, .mix-count, .strat td span, .pill { overflow-wrap: normal; }
.mix-list .is-fixed > span:first-child { color: var(--muted); }
.num, .kbar-num, .mix-count { white-space: nowrap; }

/* ---------- Narrow screens ---------- */
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .headline { font-size: 1.3rem; }
  .concept { grid-template-columns: 1fr auto; }
  .concept-head { display: none; }
  .concept .lab { display: inline; }
  .concept .kbar-cell { grid-column: 1 / -1; }
  .concept .kbar-cell .lab { display: block; }
  .concept-stats { grid-column: 1 / -1; }
  .concept .pill-cell { justify-self: end; text-align: right; }

  /* strategy table → stacked metric cards */
  table.strat, .strat thead, .strat tbody, .strat tr, .strat th, .strat td { display: block; }
  .strat thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .strat tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: .6rem; padding: .25rem .75rem .4rem; }
  .strat th, .strat td { border: 0; padding: .35rem 0; }
  .strat tbody th { border-bottom: 1px solid var(--border); margin-bottom: .2rem; }
  .strat td { display: flex; justify-content: space-between; gap: 1rem; padding-left: .5rem; padding-right: .5rem; border-radius: 6px; }
  .strat td::before { content: attr(data-label); color: var(--text-2); font-weight: 500; text-align: left; }

  .mix-list li { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .sess { grid-template-columns: 1fr auto; padding: .75rem 0; }
  .sess-head { display: none; }
  .sess .when { grid-column: 1 / -1; color: var(--text-2); }
  .sess .stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
  .sess .lab { display: inline; }
  .sess-rating { grid-row: 1; grid-column: 2; }
}
@media (max-width: 420px) {
  .hero { padding: .9rem .9rem 1rem 1rem; border-left-width: 5px; }
  .topbar { position: static; }
  .topbar-controls .btn { padding: .5rem .7rem; }
  .container { padding-top: 12px; }
  .card { padding: .9rem .9rem 1rem; }
}

@media (forced-colors: active) {
  .kbar-fill, .chart .bar { forced-color-adjust: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .kbar-fill { transition: width .4s ease; }
}

/* "Ask the tutor" questions */
.ask-alert { border-left: 6px solid var(--st-review); }
.ask-alert h2 { margin-top: 0; }
.asked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.asked-list li { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.asked-list li.flagged { border-color: var(--st-review); }
.asked-q, .asked-meta { margin: 0; }

/* ---------- Navigation: child -> classes -> topics -> topic ---------- */
.brand { margin: 0; }
.kid-tabs { max-width: 1040px; margin: 0 auto; padding: 0 16px .6rem; display: flex; gap: .5rem; overflow-x: auto; }
.kid-tab {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem 1rem .35rem .45rem;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); font: 700 16px/1.25 var(--cl-font-head);
  color: var(--accent); cursor: pointer; white-space: nowrap;
}
.kid-tab[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.kid-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--cl-sky-light); font-size: 1.1rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .95rem; color: var(--muted); }
.crumbs:empty { display: none; }
.crumbs a { color: var(--accent); font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
a { color: var(--accent); }
.crumbs .sep { color: var(--muted); }
.view { display: flex; flex-direction: column; gap: 16px; }
.view[hidden] { display: none; }
.page-title { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.2; }
@media (min-width: 1000px) { .page-title { font-size: 32px; } }
.view > .muted { margin: -8px 0 0; }
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.class-card, .topic-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .4rem .9rem;
  color: var(--text); text-decoration: none; min-height: 88px;
}
a.class-card:hover, a.topic-row:hover { border-color: var(--accent); }
.class-card .kbar-track { grid-column: 1 / -1; }
.class-card.empty { opacity: .75; grid-template-columns: auto 1fr; }
.class-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem; }
.class-text, .topic-text { display: grid; gap: .1rem; min-width: 0; }
.chev { font-size: 1.4rem; color: var(--muted); }
.topic-list { display: grid; gap: 10px; }
.topic-row { grid-template-columns: 1fr auto auto; }
.topic-score { display: grid; justify-items: end; }
/* a topic card: the link to the topic, then its test date */
.topic-card { padding: 0; display: grid; overflow: hidden; }
.topic-card:has(a.topic-row:hover) { border-color: var(--accent); }
.topic-card .topic-row { padding: 1rem 1.1rem; }
.test-date {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem;
  padding: .6rem 1.1rem; border-top: 1px solid var(--border); background: var(--surface-2);
}
.test-date label { font-size: .92rem; }
.test-date input { min-height: 44px; padding: .3rem .6rem; }
.test-date .save-msg { font-size: .9rem; }
@media (max-width: 560px) { .test-date .save-msg { flex-basis: 100%; } }
.big-num { font-family: var(--cl-font-head); font-size: 2.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.big-num.small-num { font-size: 1.6rem; }
.topic-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.topic-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.summary h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.summary-grid { display: grid; gap: 1rem; }
#summary-grade { display: grid; gap: .8rem; }
.summary-big { display: grid; justify-items: center; padding: .75rem 1.25rem; border-radius: 12px; background: var(--surface-2); }
.summary-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem 1rem; }
.summary-facts dt { color: var(--muted); font-size: .875rem; font-weight: 600; }
.summary-facts dd { margin: .1rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.details-label { margin: 8px 0 -6px; font-size: .9rem; font-weight: 700; color: var(--muted); }
@media (max-width: 560px) {
  .summary-grid { grid-template-columns: 1fr; }
  .page-title { font-size: 1.5rem; }
}
.hero { grid-template-columns: minmax(0, 1fr); }

/* class grade */
.class-card { display: flex; flex-direction: column; align-items: stretch; gap: .7rem; }
.class-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; }
.class-meta { margin: 0; }
.grade-block { display: flex; align-items: center; gap: .8rem; }
.grade { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font: 800 1.7rem/1 var(--cl-font-head); flex: none; }
.grade-block.big .grade { width: 68px; height: 68px; font-size: 2.3rem; }
.grade-text { display: grid; gap: .1rem; }
.g-A, .g-B, .g-C, .g-D, .g-F { background: var(--cl-sage-light); color: var(--cl-green-deep); }
.g-none { background: var(--surface-2); color: var(--muted); }
.class-summary { display: grid; gap: .8rem; }
.list-title { margin: 4px 0 -6px; font-size: 1.05rem; }
.tutor-note { border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; padding: .6rem .8rem; display: grid; gap: .35rem; }
.tutor-note p { margin: 0; line-height: 1.5; }
.tutor-label { font-size: .875rem; font-weight: 700; color: var(--accent); }
.tutor-next { font-weight: 700; }

/* manage a child */
.page-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.manage-card { display: grid; gap: .9rem; }
.manage-card h2 { margin: 0; font-size: 1.15rem; }
.field { display: grid; gap: .3rem; }
.field label, .field-label { font-weight: 650; margin: 0; }
.field .muted { margin: 0; }
.manage-card input, .manage-card select {
  font: inherit; min-height: 44px; padding: .45rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--cl-radius-sm);
  background: var(--surface); color: var(--text); width: 100%; min-width: 0;
}
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: .9rem; }
.avatar-grid { display: flex; flex-wrap: wrap; gap: .45rem; }
.avatar-grid button { width: 48px; height: 48px; font-size: 1.5rem; border-radius: 12px; border: 2px solid var(--border-strong); background: var(--surface); cursor: pointer; }
.avatar-grid button[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); box-shadow: 0 0 0 2px var(--accent); }
.course-edit { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.course-row { display: grid; grid-template-columns: 180px 1fr 1fr auto; gap: .5rem; align-items: center; }
.course-row input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.save-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.save-msg.ok { color: var(--ok); font-weight: 650; }
.save-msg.err { color: var(--danger); font-weight: 650; }
/* narrower screens: each class is a small box, so the "Class name" and "Teacher (optional)" hints are never cut off */
@media (max-width: 900px) {
  .course-row { grid-template-columns: 1fr 1fr; padding: .6rem; border: 1px solid var(--border); border-radius: 12px; }
  .course-row button { justify-self: start; }
}
@media (max-width: 640px) {
  .two-col { grid-template-columns: 1fr; }
  .course-row { grid-template-columns: 1fr; }
}

.badges-card { margin-top: 1rem; }
.badges-card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.badge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.badge-list li { padding: .25rem .65rem; border-radius: 999px; background: var(--st-review-bg); font-size: .88rem; font-weight: 600; }

/* family page */
.topbar-actions { display: flex; gap: .5rem; align-items: center; }
.family-list { list-style: none; padding: 0; margin: .25rem 0 .75rem; display: grid; gap: .4rem; }
.family-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding: .5rem .75rem; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; }
.family-list .kid-av { margin-right: .5rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.setup-out { margin: .5rem 0; }
.code-big { font-family: var(--cl-font-head); font-size: 2rem; font-weight: 800; letter-spacing: .15em; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.link-box { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.link-text { word-break: break-all; font-size: .875rem; background: var(--soft, #f3f4f6); padding: .35rem .5rem; border-radius: 6px; max-width: 100%; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.linkish { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 650; cursor: pointer; padding: .25rem 0; text-align: left; min-height: 44px; }
details.add-child > summary, .manage-card details > summary { cursor: pointer; font-weight: 650; margin: .5rem 0; padding: .6rem 0; min-height: 44px; }

/* ---------- The overview card (B1): one child, on one phone screen down to "This week" ---------- */
:root {
  --good: var(--cl-green); --good-soft: var(--cl-sage-light);
  --warn: var(--cl-amber); --warn-soft: var(--cl-amber-wash);
  --accent-soft: var(--cl-sky-light);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --good: #74d39a; --good-soft: #15331f; --warn: #f3c96d; --warn-soft: #3a2c10; --accent-soft: #1b2d3d; }
}
:root[data-theme="dark"] { --good: #74d39a; --good-soft: #15331f; --warn: #f3c96d; --warn-soft: #3a2c10; --accent-soft: #1b2d3d; }

.overview { border: 2px solid var(--accent); display: grid; gap: .5rem; max-width: 640px; }
.ov-name { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.25rem; }
.ov-name .kid-av { width: 28px; height: 28px; font-size: 1rem; }
.ov-status { display: flex; align-items: baseline; gap: .5rem; margin: 0; font-weight: 700; line-height: 1.35; }
.ov-sections { margin: -.3rem 0 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; background: var(--muted); }
.dot-good { background: var(--good); }
.dot-warn { background: var(--warn); }
.dot-none { background: var(--border-strong); }
.ov-box { border-radius: 10px; padding: .45rem .65rem; font-size: .875rem; min-width: 0; }
.ov-box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; line-height: 1.35; }
.ov-box p { margin: 0; }
.ov-strong { background: var(--good-soft); }
.ov-help { background: var(--warn-soft); }
.ov-box-h { font-weight: 600; font-size: .875rem; }
.tonight { background: var(--accent-soft); border-radius: 10px; padding: .6rem .75rem; display: grid; gap: .3rem; font-size: .95rem; }
.tonight p { margin: 0; }
.tonight-h { margin: 0; font-size: 1rem; }
.dinner { display: grid; gap: .3rem; justify-items: start; }
.dinner-options { margin: 0; padding: 0; list-style: none; counter-reset: opt; display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
.dinner-options li { counter-increment: opt; }
.dinner-options li::before { content: counter(opt, upper-alpha) ". "; font-weight: 600; }
.dinner .btn-small { min-height: 44px; }
.ov-week { margin: 0; color: var(--text-2); font-size: .92rem; font-weight: 600; }
.ov-notes { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.checkin { display: grid; gap: .4rem; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 10px; }
.checkin-q { margin: 0; font-weight: 700; }
.checkin-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.checkin-btn { flex: 1 1 0; min-width: 0; padding: .4rem .5rem; white-space: nowrap; }
.checkin input { width: 100%; }
.ov-more { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 700; text-decoration: none; }
.overview details.more { margin-top: 0; }
.story { display: grid; gap: .7rem; padding-bottom: .25rem; }
.story h3 { font-size: 1rem; }
.story h4 { margin: 0 0 .2rem; font-size: .875rem; font-weight: 600; color: var(--text-2); }
.story-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: .93rem; }
.story-list p { margin: .1rem 0 0; }
.story-q { color: var(--text-2); }
.story-wrong { color: var(--text); font-weight: 600; }  /* the child's answer: neutral, never red */
.story-right { color: var(--ok); font-weight: 600; }
.moods { font-size: 1.4rem; margin: 0; }
#kid-classes:focus { outline: none; }

/* ---------- Topic page: status headline, Details and More (B2) ---------- */
.hero .tonight { font-size: 1rem; }
.tonight-steps { display: grid; gap: .35rem; margin-top: .6rem; }
.tonight-steps:empty { display: none; }
.tonight-steps .btn { margin-left: .25rem; }
.status-card .headline { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; margin: 0 0 .2rem; }
.status-card .dot { width: 14px; height: 14px; }
.status-card details.more .summary-grid { padding-top: .5rem; }
details.more-block > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 1.1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--accent); font-weight: 650;
}
details.more-block[open] > summary { margin-bottom: 16px; }
details.more-block > section + section { margin-top: 16px; }
.rough-start { display: block; margin-top: .2rem; font-size: .875rem; color: var(--text-2); }

/* ---------- About <Name> on Manage (C) ---------- */
.switches { border: 0; margin: 0; padding: 0; display: grid; gap: .4rem; min-width: 0; }
.switches legend { padding: 0; margin-bottom: .3rem; }
.switch { display: flex; align-items: flex-start; gap: .7rem; min-height: 44px; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 400; }
.switch > span { display: grid; gap: .05rem; }
.manage-card .switch input { width: 22px; height: 22px; min-height: 0; margin: .1rem 0 0; flex: none; accent-color: var(--accent); }
.manage-card textarea, .guide-form textarea {
  font: inherit; padding: .45rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--cl-radius-sm);
  background: var(--surface); color: var(--text); width: 100%; min-width: 0; min-height: 44px; resize: vertical;
}
.kid-says { margin: .2rem 0; padding: .5rem .8rem; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; }
.kid-words { display: grid; gap: .3rem; }
.privacy { margin: 0; }
.checkin .save-msg:empty { display: none; }
@media (min-width: 421px) { #kid-classes { scroll-margin-top: 130px; } }  /* clear of the sticky top bar */

/* ---------- K3: loading, plain-number notes, the AI notice ---------- */
/* a view drawn for another child or topic is hidden while the new one loads */
.view.is-loading > :not(.loading-msg) { display: none !important; }
.view:not(.is-loading) > .loading-msg { display: none; }
.loading-msg { margin: 0; padding: 1.5rem 0; font-weight: 600; }
.early-tries { display: block; color: var(--text-2); font-size: .875rem; }
.grade-why { margin: 0; }
.about-card .privacy {
  margin: 0; padding: .6rem .8rem; border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0;
  background: var(--surface-2); font-size: .9rem;
}

/* ---------- P1: one number per class, the next step, the rest under "Details ›" ---------- */
.class-link { display: flex; flex-direction: column; gap: .6rem; color: var(--text); text-decoration: none; min-height: 44px; }
.class-card:has(.class-link:hover) { border-color: var(--accent); }
.class-card details.more { margin-top: 0; }
.class-card .tutor-next, .class-summary .tutor-next, #summary-grade .tutor-next { margin: 0; }
.grade-facts { margin: .4rem 0 .2rem; display: grid; gap: .35rem; }
.grade-facts div { display: grid; gap: .05rem; }
.grade-facts dt { color: var(--muted); font-size: .875rem; font-weight: 600; }
.grade-facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.grade-more { display: grid; gap: .5rem; }
.grade-text .small { color: var(--text-2); }

/* P7: each badge says what it means */
.badge-list li { display: grid; gap: .05rem; border-radius: 12px; }
.badge-meaning { font-size: .875rem; font-weight: 500; color: var(--text-2); }
.lock-why { flex-basis: 100%; margin: 0; font-weight: 600; }

/* ---------- P11: one verdict line; finished rows say how learning went ---------- */
.verdict { display: flex; align-items: baseline; gap: .5rem; margin: 0; font-weight: 700; line-height: 1.35; }
.verdict .dot { transform: translateY(-1px); }
#headline.headline { font-size: 1.1rem; }
.learned-line { font-size: .88rem; color: var(--text-2); }
.kbar-num { width: auto; white-space: nowrap; }
.class-details { margin-top: -.3rem; }
.story-fixed { color: var(--ok); font-weight: 600; }
.story-status { color: var(--st-review); font-weight: 600; }

/* P6: one labeled date row; the others folded */
.test-date-after { flex-basis: 100%; margin: 0; }
.other-dates { display: grid; gap: .5rem; }
.other-dates .test-date { border: 1px solid var(--border); border-radius: 10px; }
.ov-add { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 650; text-decoration: none; }

/* P8: one class label per box, dated faces, the two-switch note */
.ov-box-class { margin: .2rem 0 .1rem; font-size: .875rem; font-weight: 700; color: var(--text-2); }
.moods { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin: 0; }
.mood { display: grid; justify-items: center; }
.mood-face { font-size: 1.4rem; line-height: 1.2; }
.mood-day { font-size: .875rem; color: var(--text-2); }
.switch-both { margin: .2rem 0 0; font-weight: 600; }
.switch-both.is-off { visibility: hidden; }  /* SPED #1: the space stays, so the boxes below never shift */
/* UX fix P-C09: the top bar stays put on Family and Manage too (the tab bar steps aside only while the keyboard is up) */
.ov-name-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.overview .dinner { font-size: .92rem; }
.overview .verdict.ov-status { font-size: .95rem; }

/* R6 P1: why Tonight is elsewhere */
.tonight-why { font-weight: 650; color: var(--text-2); }
.concept-more { padding: .4rem 0; border-top: 1px solid var(--border); list-style: none; }
.concept-more > details > summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); font-weight: 650; }
.what-to-do { margin: 0; }
.tonight-h .tonight-why { font-weight: 600; font-size: .9rem; color: var(--text-2); }
.overview .dinner-options { font-size: .88rem; }
.overview .verdict.ov-status { font-size: .92rem; }
/* the inline "Add one ›" keeps a 44px tap area without making its line taller */
.ov-sections .ov-add { display: inline; min-height: 0; padding: 12px 6px; margin: -12px -6px; }
.overview .tonight { font-size: .9rem; gap: .25rem; }
.overview .tonight-h { font-size: .98rem; }
/* CedarLearn fit (Task 5): the card still reads top to "This week" on one 400 x 860 phone screen with 14 px labels,
   Inter and the logo bar, so its leading and gaps are a little tighter than the page's 1.55 */
.overview { line-height: 1.4; gap: .45rem; }
/* r2 (EL #3): encouragement ("one round tonight is a good restart") in the calm brand green, never the warning amber */
.tonight-advice { font-weight: 650; color: var(--good); margin: 0; }
.ov-none-yet { margin: 0; }

.mistake .theirs { color: var(--text); }  /* the child's answer in the normal color */

/* ---------- CedarLearn icons (icons.js) in place of emoji in the parent chrome ---------- */
.ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
.btn .ico { margin-right: .35rem; }
.checkin-btn .ico { margin-right: 0; color: var(--accent); }
.mood-face .ico { width: 28px; height: 28px; color: var(--accent); vertical-align: 0; }
.sess-rating .ico { width: 26px; height: 26px; color: var(--accent); vertical-align: middle; }
.strat td .ico, .save-msg .ico, #status-sub .ico { color: var(--accent); }
/* badge medals: earned = green disc, cream glyph, sage rim; not yet earned = outlined, muted (as in the kid app) */
.medal { display: inline-block; flex: none; vertical-align: middle; }
.medal .medal-disc { fill: var(--cl-green); stroke: var(--cl-sage); stroke-width: 2; }
.medal .medal-glyph { color: var(--cl-cream); }
.medal.locked .medal-disc { fill: var(--surface); stroke: var(--border-strong); stroke-dasharray: 3 2.4; }
.medal.locked .medal-glyph { color: var(--muted); }
.badge-name .medal { margin: -2px .15rem 0 0; }
.pace { margin: -.3rem 0 0; padding-left: calc(10px + .5rem); color: var(--text-2); font-weight: 600; font-size: .875rem; }
.setup-choices { display: grid; gap: .75rem; margin: .5rem 0; }
.setup-choice { display: grid; gap: .25rem; justify-items: start; align-content: start; }
.setup-choice p { margin: 0; }
@media (min-width: 900px) { .setup-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } .setup-choice .btn { width: 100%; } }
.mistake-when { margin: 0 0 .3rem; font-size: .875rem; font-weight: 600; color: var(--text-2); }
.got-later-tag { color: var(--ok); }

/* ---------- r1 parent lane (grandparent, involved, EL, busy) ---------- */
/* ruling 8: a class that needs practice has its own colour (amber) and its own word; grey is only "not started" */
.dot-attention { background: var(--warn); box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 60%, var(--text)); }
/* ruling 7: a summary says what a tap does next ("Details ›" / "Hide ›") */
summary .when-open { display: none; }
details[open] > summary .when-open { display: inline; }
details[open] > summary .when-closed { display: none; }
/* grandparent #1, #2: a calm hello and "what happened, what's next" — never a red box */
.welcome {
  margin: 0; padding: .8rem 1rem; border-radius: var(--cl-radius-sm, 10px); border-left: 4px solid var(--ok);
  background: var(--good-soft, var(--surface-2)); color: var(--text); font-weight: 650; font-size: 1.05rem;
}
.welcome:focus { outline: none; }
.family-name-line { margin: -.4rem 0 0; }
.family-name-line .linkish, .linkish { font: inherit; color: var(--accent); text-decoration: underline; background: none; border: 0; padding: 12px 4px; margin: -12px -4px; cursor: pointer; }
.name-edit { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .25rem 0; }
.name-edit[hidden] { display: none; }
.name-edit input { min-height: 44px; flex: 1 1 14rem; max-width: 22rem; }
.next-step { border: 2px solid var(--ok); }
/* grandparent #3, #4: the grade as big buttons */
/* 2026-11-08: K and 1 … 12 as one compact grid of 44 px buttons: as many to a row as fit (two rows on a wide card),
   wrapping inside the card on a phone, never wider than it */
.grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; width: 100%;
  min-width: 0; box-sizing: border-box; margin: 0 0 .5rem; }
.grade-grid button {
  min-height: 44px; min-width: 44px; padding: 0; border-radius: 10px; border: 2px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: 650 1rem/1.2 var(--cl-font-head, inherit); cursor: pointer;
}
/* COPPA (2026-11-08): the short notice and the required "I agree" box on "Make your account", just above Create */
.consent { margin: .75rem 0 .25rem; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.consent-notice { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.5; color: var(--text); }
.consent-notice a { overflow-wrap: anywhere; }
.consent-row { display: flex; align-items: flex-start; gap: .6rem; min-height: 44px; padding: .35rem 0; cursor: pointer; font-weight: 600; }
.consent-row input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; }
.grade-grid button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.grade-grid button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* ruling 10: named computers, "this computer", Rename beside Remove */
.computer-row { flex-wrap: wrap; }
.computer-row .row-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.computer-row .name-edit { flex-basis: 100%; }
.this-tag { color: var(--ok); font-weight: 650; }
.language-line { margin: .5rem 0 0; }
/* ruling 9: the whole class card is one link */
a.class-card { cursor: pointer; }
a.class-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.class-card .verdict { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.link-look { color: var(--accent); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.class-card.empty { opacity: 1; }
.class-card.empty p { margin: 0; }
/* ruling 2: the study-guide door on the class page */
.guide-door { display: grid; gap: .6rem; justify-items: start; }
.guide-door p { margin: 0; }
.guide-door.is-quiet { background: var(--surface-2); box-shadow: none; }
.btn-big { min-height: 52px; padding: .7rem 1.4rem; font-size: 1.05rem; }
/* PARENT-B #2: the study-guide form on the class page */
.guide-form { display: grid; gap: .6rem; width: 100%; max-width: 560px; }
.guide-form input[type="date"] { font-size: 1.05rem; min-height: 44px; max-width: 16rem; }
.guide-step { margin: .4rem 0 0; font-weight: 650; }
.guide-choose { position: relative; justify-self: start; cursor: pointer; }
.guide-choose.is-busy { opacity: .6; pointer-events: none; }
/* the real file box sits inside its button, so a tap never scrolls the page to a box off to the side */
.guide-picker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.guide-files { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.guide-files li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 10px; }
.guide-file-name { font-weight: 600; overflow-wrap: anywhere; }
.guide-total.hint { color: var(--warn, #9A5B00); font-weight: 600; }
.guide-sent { font-weight: 600; }
.guide-sent.is-ready, .guide-thanks { color: var(--ok); font-weight: 650; }
.guide-thanks { font-size: 1.05rem; }
/* grandparent #15, busy #7: the date editor; the box, when open, is easy to see */
.test-date-wrap { display: grid; gap: .35rem; justify-items: start; padding: .8rem 1rem; }
.test-date-wrap p { margin: 0; }
.test-date.is-focus { outline: 3px solid var(--warn); outline-offset: -3px; border-radius: 10px; background: var(--warn-soft); }
.test-date input[type="date"] { font-size: 1.05rem; min-width: 11rem; }
.save-msg.hint { color: var(--text-2); font-weight: 600; }
/* involved #11: the date line stays together, on its own line on a phone */
.ov-date { white-space: nowrap; }
@media (max-width: 560px) { .ov-date { display: block; } }
/* grandparent #16: bigger type on the card, and the card uses the width on a laptop or tablet */
.overview { max-width: none; font-size: 1.0625rem; }
.overview .ov-sections, .overview .ov-box, .overview .tonight, .overview .dinner { font-size: 1rem; }
.overview .verdict.ov-status { font-size: 1.05rem; }
.overview .tonight-h { font-size: 1.08rem; }
.overview .pace { padding-left: 0; margin: 0; font-size: .95rem; }
@media (min-width: 900px) { .overview .ov-two { gap: .75rem; } }
/* grandparent #17, involved #10: bigger faces, each with its word */
.mood-face .ico { width: 36px; height: 36px; }
.mood-day { font-size: .9rem; }
/* involved #17: bigger badges */
.badge-name .medal { width: 36px; height: 36px; }
/* mix-ups: the plain words first, the full wording and the note small under them */
.mix-label, .story-label { display: block; margin: .15rem 0 0; }
.mix-note { display: block; font-weight: 500; font-size: .875rem; color: var(--text-2); }
.asked-waiting { color: var(--text-2); font-size: .9rem; }
.tonight .pace { padding-left: 0; margin: 0; font-size: .95rem; }

/* ---------- r2 batch C, parent lane ---------- */
/* grandparent #1, #2: the calm line under the picker when Send is tapped first, and "Nothing was sent" after Cancel */
.guide-need { margin: 0; }
.guide-need:empty { display: none; }
.guide-cancelled { color: var(--text-2); font-weight: 600; }
#reset-hint { margin: .35rem 0 0; }
#reset-hint:empty { display: none; }
/* grandparent #7: the empty Strong-at / Practice-next line is the box's own size, not small grey */
.ov-box-empty { color: var(--text-2); }
/* EL #2: the translate line near the top, short, with its "Got it" */
.translate-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: 0 0 .75rem; padding: .5rem .75rem;
  border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: .95rem; line-height: 1.4; }
.translate-line span { flex: 1 1 16rem; }
.translate-line .btn-small { min-height: 44px; }
.login-card .translate-line { margin: .25rem 0 .75rem; }
/* involved #10: on a phone the date line is its own line, so it never starts with a lone dot */
@media (max-width: 560px) { .ov-date-dot { display: none; } }
/* busy #1: the date link is quiet, not the page's loudest button */
.test-date-open { padding: .5rem 0; }
/* SPED #7: how many more sections pass the Strong-at rule than the box names */
.ov-box-more { color: var(--text-2); font-size: .9em; margin-top: .2rem !important; }
/* grandparent #6: the "No study guide yet" class card reads upright and ready, not greyed or slanted */
.class-card.empty, .class-card.empty p { font-style: normal; color: var(--text); }
/* SPED #8: the study-style menu looks off while Calm Focus is forced from Manage */
#strategy-lock:disabled { opacity: .55; cursor: not-allowed; background: var(--surface-2, #f3f4f6); }

/* ---------- r3 batch D ---------- */
/* EL #2: a toggle's one arrow points down while closed and up while open */
.tog-chev { display: inline-block; margin-left: .4em; transform: rotate(90deg); transition: transform .15s; }
details[open] > summary .tog-chev { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .tog-chev { transition: none; } }
/* grandparent #3: the letter leads, on a short line of its own; "(not a school grade)" once per page, small */
.verdict { flex-wrap: wrap; }
.verdict > .dot + span { flex: 1 1 0; min-width: 0; }  /* the words stay beside the dot; only the letter wraps */
.verdict .est, .ov-sections .est { flex-basis: 100%; display: block; font-weight: 500; font-size: .92rem; color: var(--text-2); }
.verdict .est { padding-left: calc(10px + .5rem); }
.status-card .verdict .est, .headline .est { padding-left: calc(14px + .6rem); }
.headline .est { font-size: 1rem; flex-basis: 100%; }
.status-card .headline { flex-wrap: wrap; }
.status-card .headline > .dot + span { flex: 1 1 0; min-width: 0; }
.est-grade { font-size: 1.05em; font-weight: 750; color: var(--text); }
.est-hint { font-size: .875rem; color: var(--muted); }
/* grandparent #2: a big, clear date box; the Calendar button opens the browser's own calendar */
.date-box { display: grid; gap: .3rem; }
.date-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; position: relative; }
.date-box input[type="text"] { font-size: 1.2rem; min-height: 52px; padding: .4rem .8rem; width: min(100%, 15rem); }
.date-pick { min-height: 52px; display: inline-flex; align-items: center; gap: .35rem; }
.date-pick svg { width: 22px; height: 22px; }
.date-cal { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.date-cal.is-shown { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; min-height: 52px; font-size: 1.1rem; padding: .3rem .6rem; border: 1px solid var(--border); }
.date-back { margin: 0; min-height: 1.3em; color: var(--text-2); }
.date-back.ok { color: var(--ok); font-weight: 650; }
.date-back.hint { color: var(--warn, #9A5B00); font-weight: 600; }
.test-date .date-box { flex: 1 1 100%; }
/* grandparent #4: the dinner choices one per line, as big as the question */
.dinner-options { flex-direction: column; flex-wrap: nowrap; gap: .25rem; }
.overview .dinner-options { font-size: inherit; }
/* involved #6: a long status chip wraps inside its own cell, never against the count */
.concept .pill-cell { padding-right: .75rem; }
.concept .pill { white-space: normal; text-align: center; }
.guide-thanks p { margin: 0 0 .35rem; }
.guide-thanks p + p { font-size: .95rem; font-weight: 600; }
/* r4 (gen-ed #1): a right answer that fixed a mix-up, in Recent answers: a green edge, the tag in green */
.mistake.fix-row { border-left: 4px solid var(--ok); }
/* r4 (grandparent #2): "Remove this date" at the far end of the row, away from Save; it asks once before it removes */
.test-date-remove { margin-left: auto; font-size: .92rem; }
.test-date-ask { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.test-date-ask[hidden] { display: none; }
.test-date-ask .btn-small { min-height: 44px; }

/* ---------- The app shell (Ricky, 2026-11-08): a slim top bar, one account menu, a compact child switcher ---------- */
.topbar-inner { flex-wrap: nowrap; min-height: 56px; padding: 6px 16px; gap: .75rem; }
.brand { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; font-size: 1rem; }
.brand .cl-logo { margin: 0; height: 32px; }  /* 124 px wide: the brand minimum is 120 */
.brand-home { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.brand-sub { color: var(--muted); font: 600 .875rem/1.2 var(--cl-font-body); white-space: nowrap; padding-left: 10px; border-left: 1px solid var(--border); }
@media (max-width: 340px) { .brand-sub { display: none; } }  /* the page title says it; the logo and menu keep their room */
.acct { position: relative; flex: none; }
.acct-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--accent); display: grid; place-items: center; cursor: pointer; padding: 0;
}
.acct-btn:hover { background: var(--cl-sky-light); }
.acct-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--cl-sky); }
.acct-initial { display: grid; place-items: center; }
.acct-initial.has-initial { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 800 1.05rem/1 var(--cl-font-head); }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(18rem, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--cl-radius-md);
  box-shadow: 0 10px 30px rgba(18, 48, 76, .16); padding: 6px; display: grid; gap: 2px;
}
.acct-who { display: grid; gap: 2px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.acct-who strong { font-family: var(--cl-font-head); }
.acct-who span:empty { display: none; }
.acct-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: 600 1rem/1.2 var(--cl-font-body); text-decoration: none; text-align: left; cursor: pointer;
}
.acct-item svg { flex: none; color: var(--accent); }
.acct-item:hover, .acct-item:focus-visible { background: var(--cl-sky-light); }
.acct-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.acct-item[aria-current] { color: var(--accent); }
#logout-btn { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; }
:root:not([data-theme="light"]) .acct-item:hover, :root:not([data-theme="light"]) .acct-item:focus-visible { background: var(--surface-2); }

/* the child switcher: a compact segmented control under the bar, left-aligned with the page; it scrolls sideways
   inside itself when there are many children (the page never does) */
.kid-tabs { max-width: 1040px; margin: 0 auto; padding: 0 16px 10px; display: flex; overflow-x: auto; scrollbar-width: none; }
.kid-tabs::-webkit-scrollbar { display: none; }
.kid-tabs:not([hidden]) { display: flex; }
.kid-tabs { gap: 4px; }
.kid-tabs > .kid-tab:first-child { margin-left: 0; }
.kid-tab {
  min-height: 44px; padding: 4px 14px 4px 5px; gap: 8px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-2); font: 700 1rem/1.2 var(--cl-font-head); flex: none;
}
.kid-tab:hover { border-color: var(--border-strong); }
.kid-tab .kid-av { width: 32px; height: 32px; font-size: 1rem; }
.kid-tab[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 3px rgba(11, 74, 120, .25); }
.kid-tab[aria-pressed="true"] .kid-av { background: var(--surface); }

/* ---------- The whole child (Ricky, 2026-11-08): week line, every class as one row, picks across classes, Tonight ---------- */
.overview { max-width: none; border: 1px solid var(--border); gap: .35rem; }
.ov-name { font-size: 1.35rem; }
.ov-name .kid-av { width: 36px; height: 36px; font-size: 1.15rem; }
.ov-week { font-size: .95rem; }
.ov-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.ov-grid > .card { margin: 0; min-width: 0; }
@media (min-width: 900px) {
  .ov-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "classes tonight" "classes picks"; align-items: start; }
  .ov-grid > .ov-classes { grid-area: classes; }
  .ov-grid > .ov-picks { grid-area: picks; }
  .ov-grid > .ov-tonight { grid-area: tonight; }
}
.ov-classes .sec-head { margin-bottom: .25rem; }
.class-rows { list-style: none; margin: 0 -.5rem; padding: 0; display: grid; }
.class-rows li + li { border-top: 1px solid var(--border); }
.class-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px .5rem; border-radius: 10px; color: var(--text); text-decoration: none;
}
.class-row:hover { background: var(--cl-sky-light); }
:root:not([data-theme="light"]) .class-row:hover { background: var(--surface-2); }
.class-row .class-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 1.25rem; }
.cr-text { display: grid; gap: 1px; min-width: 0; }
.cr-name { font: 700 1rem/1.3 var(--cl-font-head); }
.cr-status { display: flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; color: var(--text-2); line-height: 1.3; }
.cr-status { flex-wrap: wrap; column-gap: 6px; }
.cr-status .cr-grade { font-weight: 500; color: var(--muted); }
/* the lead topic: its count first, so a long topic name is the part that is cut short */
.cr-lead { font-size: .875rem; color: var(--muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-date, .cr-add { font-size: .875rem; line-height: 1.4; }
.cr-grade strong { color: var(--text); }
.cr-date { color: var(--text-2); font-weight: 600; }
.cr-add { color: var(--accent); font-weight: 600; }
.cr-note { margin: .5rem 0 0; }
.ov-picks { display: grid; gap: 10px; }
@media (min-width: 560px) and (max-width: 899px) { .ov-picks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ov-picks .ov-box { padding: .6rem .75rem; font-size: .92rem; }
.ov-picks .ov-box-h { margin: 0 0 .3rem; font: 700 .95rem/1.3 var(--cl-font-head); }
.ov-picks .ov-box ul { gap: .4rem; }
.ov-tag { color: var(--muted); font-size: .875rem; }
.ov-box-more, .ov-box-empty { margin-top: .3rem; color: var(--text-2); font-size: .875rem; }
.ov-tonight { padding: 0; overflow: hidden; }
.ov-tonight .tonight { border-radius: 0; padding: .9rem 1rem 1rem; gap: .35rem; }
.tonight-compact .pace { padding-left: 0; margin: 0; }
.tonight-compact details.more { margin: .15rem 0 0; }
.tonight-compact details.more > summary { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); font-weight: 650; cursor: pointer; }
.tonight-compact .dinner { padding-top: .25rem; }

/* placeholders while a page loads: grey blocks shaped like the page, so nothing jumps when the data arrives */
.sk { display: flex; flex-direction: column; gap: 16px; padding: 0; }
.sk-card { display: grid; gap: 12px; }
.sk { --sk: var(--border); }
.sk-bar { display: block; height: 14px; border-radius: 7px; background: var(--sk); }
.sk-bar.sk-title { height: 20px; }
.sk-bar.sk-thin { height: 10px; }
.sk-bar.sk-page { height: 28px; }
.sk-name { display: flex; align-items: center; gap: 10px; }
.sk-dot { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--sk); }
.sk-dot.sk-av { width: 36px; height: 36px; border-radius: 50%; }
.sk-row { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.sk-lines { flex: 1; display: grid; gap: 8px; }
.sk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk-box { height: 96px; border-radius: 10px; background: var(--sk); opacity: .7; }
.sk .ov-tonight { padding: 1rem 1.1rem; }
.badges-card { --sk: var(--border); }
.badges-card .sk-bar { margin-top: .5rem; }
@media (prefers-reduced-motion: no-preference) {
  .sk-bar, .sk-dot, .sk-box { animation: sk-pulse 1.4s ease-in-out infinite; }
  @keyframes sk-pulse { 50% { opacity: .55; } }
}

/* Family: each child is a row with "Change PIN" and "Manage ›" (Ricky, 2026-11-08); the PIN box opens in the row */
.family-kids li.family-kid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem .75rem; padding: .4rem .5rem .4rem .6rem; }
.fk-name { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--text); font-weight: 650; text-decoration: none; border-radius: 8px; min-width: 0; }
.fk-name:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.fk-name .kid-av { margin-right: 0; flex: none; }
.fk-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.fk-pin, .fk-msg { grid-column: 1 / -1; }
.fk-pin { display: grid; gap: .4rem; padding: .6rem 0 .2rem; border-top: 1px solid var(--border); }
.fk-pin p, .fk-pin .btn-row { margin: 0; }
.fk-pin-row { display: flex; gap: .5rem; align-items: center; }
.fk-pin input { width: 8.5rem; font-size: 1.25rem; letter-spacing: .3em; }
.fk-msg { margin: 0; }
.fk-msg:empty { display: none; }
@media (max-width: 520px) {
  .family-kids li.family-kid { grid-template-columns: minmax(0, 1fr); }
  .fk-actions { justify-content: flex-start; }
}

/* ---------- Manage profile: State, then the school search shared with cedarlearn.com (js/school-search.js) ---------- */
.school-pick { display: grid; gap: .9rem; }
.school-pick select, .school-pick input.school { width: 100%; }
.school-pick .combo { display: grid; gap: .35rem; }
.school-pick .combo[hidden] { display: none; }
.school-pick .combo-list {  /* in the flow, under the box: it never covers what is below */
  margin: 0; padding: .3rem; list-style: none; background: var(--surface); border: 2px solid var(--accent);
  border-radius: var(--cl-radius-sm); max-height: 22rem; overflow-y: auto;
}
.school-pick .combo-list[hidden] { display: none; }
.school-pick [role="option"] { display: grid; gap: .1rem; min-height: 44px; padding: .45rem .65rem; border-radius: 8px; cursor: pointer; }
.school-pick [role="option"]:hover, .school-pick [role="option"][aria-selected="true"] { background: var(--cl-sky-light); }
.school-pick [role="option"][aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
.school-pick .opt-name { font-weight: 650; color: var(--text); }
.school-pick .opt-meta { font-size: .875rem; color: var(--muted); }
.school-pick .school-help { margin: 0; }
.school-pick .school-help:empty { display: none; }
/* the line under a picked school: "School district: San Marino Unified", then "San Marino, CA", Change at the right */
.school-pick .picked { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem;
  margin: .1rem 0 0; padding: .3rem 0 .3rem .7rem; border-left: 3px solid var(--ok); color: var(--text); font-weight: 400; }
.school-pick .picked:empty { display: none; }
.school-pick .pick-line { grid-column: 1; line-height: 1.35; }
.school-pick .pick-label { font-size: .875rem; font-weight: 600; color: var(--muted); }
.school-pick .pick-main { font-weight: 400; }
.school-pick .pick-place { grid-column: 1; font-size: .875rem; color: var(--muted); }
.school-pick .pick-change { grid-column: 2; grid-row: 1 / span 2; }
.school-pick .school-home { margin: 0; padding: .6rem .8rem; font-weight: 600; color: var(--ok); background: var(--surface-2); border-radius: 10px; }
.school-pick .school-home[hidden] { display: none; }
.school-pick .school-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; }
.school-pick .home-choice { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 500; cursor: pointer; }
.school-pick .home-choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.school-pick .link-btn {
  min-height: 44px; margin: 0; padding: .4rem 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
.school-pick .link-btn[hidden] { display: none; }

/* ======================================================================================================================
   Design pass (founder, 2026-11-08: "a more professional layout"): one type scale, an 8 px spacing system, one card
   style, a centred column, status words as small chips, and long explanations behind ⓘ. Later rules here win over the
   older layers above on purpose; colours stay the brand tokens.
   Type: page title 28 px (32 on a laptop) Nunito 800 · card title 18 px Nunito 700 · sub-title 16 px Nunito 700 ·
   body 16 px Inter 1.55 · small 14 px Inter 1.45. Spacing: 8 · 16 · 24 · 32.
   ====================================================================================================================== */
:root {
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --page-max: 880px;
  --card-pad: 16px;
  --gap: 16px;
  --chip-good-bg: var(--cl-sage-light); --chip-good: var(--cl-green-deep);
  --chip-attention-bg: var(--cl-amber-wash); --chip-attention: #7A4D00;
  --chip-none-bg: var(--cl-stone); --chip-none: #3D4C5B;
  --track: #E3E8EE;
  --pop-shadow: 0 12px 32px rgba(18, 48, 76, .16);
}
@media (min-width: 700px) { :root { --card-pad: 24px; --gap: 24px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chip-good-bg: #15331f; --chip-good: #86dca3; --chip-attention-bg: #3a2c10; --chip-attention: #f3c96d;
    --chip-none-bg: #2c302d; --chip-none: #c9cfcb; --track: #2c312e; --pop-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
}
:root[data-theme="dark"] { --chip-good-bg: #15331f; --chip-good: #86dca3; --chip-attention-bg: #3a2c10; --chip-attention: #f3c96d;
  --chip-none-bg: #2c302d; --chip-none: #c9cfcb; --track: #2c312e; --pop-shadow: 0 12px 32px rgba(0, 0, 0, .5); }

/* ---------- type ---------- */
body { line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -.005em; }
h2 { font-size: 18px; line-height: 1.3; font-weight: 700; margin: 0 0 var(--sp-1); }
h3 { font-size: 16px; line-height: 1.35; font-weight: 700; }
.page-title { font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
@media (min-width: 1000px) { .page-title { font-size: 32px; } }
@media (max-width: 560px) { .page-title { font-size: 26px; } }
.small { font-size: .875rem; line-height: 1.45; }
p { margin: 0; }
p + p { margin-top: var(--sp-1); }

/* ---------- the column: the bar, the child switcher and every page share one centred width ---------- */
.topbar-inner, .kid-tabs { max-width: calc(var(--page-max) + 2 * var(--sp-2)); }
.container { max-width: calc(var(--page-max) + 2 * var(--sp-2)); padding: var(--sp-2) var(--sp-2) var(--sp-4); gap: var(--gap); }
.view { gap: var(--gap); }
@media (min-width: 700px) { .container { padding-top: var(--sp-3); } }
.crumbs { font-size: .875rem; gap: 2px 6px; margin-bottom: -8px; }
.crumbs a { font-weight: 600; }

/* ---------- one card style ---------- */
.card { padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--cl-radius-lg); box-shadow: var(--shadow); }
.card > h2:first-child, .card > .sec-head:first-child { margin-bottom: var(--sp-2); }
.sec-head { gap: var(--sp-1) var(--sp-2); }
.sec-head h2 { margin: 0; }
.overview, .next-step { border: 1px solid var(--border); }
.hero { border-left: 1px solid var(--border); padding: var(--card-pad); }

/* ---------- buttons ---------- */
.btn { border-radius: var(--cl-radius-md); padding: 10px 18px; transition: background-color .15s, border-color .15s; }
.btn-small { padding: 8px 14px; font-size: 15px; }
.btn:not(.btn-primary):not(.btn-danger):not(.btn-danger-outline) { border-color: #C7D0DA; }
.btn:not(.btn-primary):not(.btn-danger):not(.btn-danger-outline):hover:not(:disabled) { border-color: var(--accent); background: var(--cl-sky-light); }
.btn-quiet { gap: 6px; }
.btn .ico { margin-right: 0; }
a.btn { gap: 6px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:not(.btn-primary):not(.btn-danger):not(.btn-danger-outline) { border-color: var(--border-strong); } }
:root[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-danger-outline) { border-color: var(--border-strong); }

/* ---------- status chips: the only place status colour shows ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px;
  font: 600 .875rem/1.45 var(--cl-font-body); white-space: normal; overflow-wrap: normal; }
.chip .dot { width: 8px; height: 8px; box-shadow: none; }
.chip-good { background: var(--chip-good-bg); color: var(--chip-good); }
.chip-attention { background: var(--chip-attention-bg); color: var(--chip-attention); }
.chip-none { background: var(--chip-none-bg); color: var(--chip-none); }
.chip-none .dot { background: var(--muted); }

/* ---------- ⓘ: a small button and its popover ---------- */
.has-info { display: flex; align-items: center; flex-wrap: wrap; column-gap: 2px; }
.info { position: relative; display: inline-flex; vertical-align: middle; line-height: 1; }
.info-btn {
  width: 44px; height: 44px; margin: -12px -10px -12px -8px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer;
}
.info-dot {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center;
  font: 700 .875rem/1 var(--cl-font-head);
}
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--accent); }
.info-btn[aria-expanded="true"] .info-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.info-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -6px; }
.info-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; display: grid; gap: 4px;
  width: max-content; max-width: min(300px, calc(100vw - 24px)); padding: 12px 44px 14px 16px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--cl-radius-md);
  box-shadow: var(--pop-shadow); text-align: left; white-space: normal; letter-spacing: normal;
  font: 400 15px/1.45 var(--cl-font-body);
}
.info-pop[hidden] { display: none; }
.info-title { font: 700 15px/1.3 var(--cl-font-head); }
.info-close {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--cl-radius-md);
  background: none; color: var(--muted); font: 400 22px/1 var(--cl-font-body); cursor: pointer;
}
.info-close:hover { color: var(--accent); }
.info-close:focus-visible { outline: 3px solid var(--focus); outline-offset: -6px; }
.step-sub .info, .cr-note .info { margin-left: 4px; }

/* ---------- Home: the child, at a glance ---------- */
.overview { display: grid; gap: var(--sp-2); font-size: 1rem; line-height: 1.55; }
.ov-head { display: grid; gap: 4px; }
.ov-name { font: 800 24px/1.2 var(--cl-font-head); gap: 12px; letter-spacing: -.01em; }
.ov-name .kid-av { width: 44px; height: 44px; font-size: 1.4rem; background: var(--cl-sage-light); }
.ov-week { margin: 0; color: var(--muted); font-size: .9375rem; font-weight: 500; }
@media (min-width: 560px) { .ov-week { padding-left: 56px; } }
.overview > details.more { border-top: 1px solid var(--border); padding-top: 4px; margin: 0; }
.ov-notes { margin: 0; padding-left: 1.2rem; color: var(--text-2); }

.ov-glance { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.gl-col { display: grid; align-content: start; gap: var(--sp-1); min-width: 0; }
.gl-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 1rem/1.3 var(--cl-font-head); }
.gl-ico { width: 22px; height: 22px; flex: none; }
.gl-strong .gl-ico { color: var(--cl-green); }
.gl-grow .gl-ico, .gl-plan .gl-ico { color: var(--accent); }
.gl-list { list-style: none; margin: 0; padding: 0 0 0 30px; display: grid; gap: 10px; }
.gl-list li { display: grid; gap: 1px; line-height: 1.45; }
.gl-subject { font-weight: 650; }
.gl-what { color: var(--text-2); }
.gl-secs { color: var(--muted); font-size: .875rem; }
.gl-plan .gl-list li { padding-left: 14px; position: relative; }
.gl-plan .gl-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.gl-plan .gl-what { color: var(--text); }
.gl-empty { margin: 0; padding-left: 30px; color: var(--text-2); }
/* the overall picture (insight.py): one short reason after each line; tonight's help under the plan; the trend under
   the week line; the per-class table under "More about this week" (fits a 390px phone, scrolls inside if it must) */
.gl-why { color: var(--text-2); font-size: .9375rem; }
.gl-line { display: block; }
.gl-help { display: grid; gap: var(--sp-1); margin-top: var(--sp-1); padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); }
.gl-sub { margin: 0; font: 650 .95rem/1.3 var(--cl-font-head); }
.gl-help .gl-list { padding-left: 0; }
.gl-help .gl-list li { padding-left: 14px; position: relative; }
.gl-help .gl-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.gl-help .gl-what { color: var(--text); }
.ov-trend { margin: 0; color: var(--text-2); font-size: .9375rem; }
@media (min-width: 560px) { .ov-trend { padding-left: 56px; } }
.gl-table-wrap { overflow-x: auto; max-width: 100%; }
.gl-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.gl-table th, .gl-table td { padding: 6px 6px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: top; }
.gl-table th, .gl-table td { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.gl-table th:first-child, .gl-table td:first-child { text-align: left; }
.gl-table thead th { color: var(--text-2); font-weight: 600; line-height: 1.25; }
.gl-table tbody th { font-weight: 650; }
.gl-table tbody th .gl-secs { display: block; font-weight: 400; }
.gl-table .has-info { display: inline-flex; align-items: center; gap: 2px; }
.ov-glance.is-early { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); }
.ov-glance.is-early .gl-ico { color: var(--accent); }
@media (min-width: 760px) {
  .ov-glance:not(.is-early) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .ov-glance:not(.is-early) .gl-col + .gl-col { border-left: 1px solid var(--border); padding-left: var(--sp-3); }
  .ov-glance:not(.is-early) .gl-col { padding-right: var(--sp-3); }
  .ov-glance:not(.is-early) .gl-col:last-child { padding-right: 0; }
  .gl-list, .gl-empty { padding-left: 0; }
}
@media (max-width: 759px) {
  .gl-col + .gl-col { padding-top: var(--sp-2); border-top: 1px solid var(--border); }
}

/* Home: one column (the whole child, top to bottom) */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 900px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .ov-grid > .ov-classes, .ov-grid > .ov-picks, .ov-grid > .ov-tonight { grid-area: auto; }
}

/* the classes: one row each */
.ov-classes .sec-head { margin-bottom: var(--sp-1); }
.class-rows { margin: 0 -8px; }
.class-row {
  grid-template-columns: 40px minmax(0, 1fr) 36px 16px; gap: 14px; align-items: center;
  min-height: 64px; padding: 14px 8px; border-radius: var(--cl-radius-md);
}
.class-row .class-icon { width: 40px; height: 40px; align-self: start; margin-top: 2px; }
.cr-text { gap: 6px; }
.cr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cr-name { font: 700 1.0625rem/1.3 var(--cl-font-head); }
.cr-status.chip { color: var(--chip-none); }
.cr-status.chip-good { color: var(--chip-good); }
.cr-status.chip-attention { color: var(--chip-attention); }
.cr-progress { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cr-bar { flex: none; width: 72px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.cr-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); min-width: 0; }
.cr-lead { color: var(--text-2); font-size: .875rem; min-width: 0; white-space: normal; overflow: visible; line-height: 1.4; }
.cr-progress { align-items: flex-start; }
.cr-bar { margin-top: 7px; }
.cr-date, .cr-add { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; line-height: 1.45; justify-self: start; }
.cr-date { color: var(--text-2); font-weight: 600; }
.cr-date .ico { width: 16px; height: 16px; color: var(--muted); }
.cr-add { color: var(--accent); font-weight: 600; }
.cr-grade {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent); font: 800 1.125rem/1 var(--cl-font-head);
}
.cr-grade.is-empty { background: none; }
.class-row .chev { font-size: 1.4rem; color: var(--border-strong); justify-self: end; }
.class-row:hover .chev { color: var(--accent); }
.cr-note { margin: var(--sp-1) 0 0; padding-top: var(--sp-1); }
@media (max-width: 420px) {
  .class-row { grid-template-columns: 36px minmax(0, 1fr) 32px 12px; gap: 10px; padding: 12px 8px; }
  .class-row .class-icon { width: 36px; height: 36px; font-size: 1.1rem; }
  .cr-bar { width: 48px; }
  .cr-grade { width: 32px; height: 32px; font-size: 1rem; }
}

/* Strong at / Practice next: two plain lists side by side on a laptop, stacked on a phone */
.ov-picks { display: grid; gap: var(--sp-2); }
@media (min-width: 640px) {
  .ov-picks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .ov-picks .ov-box + .ov-box { border-left: 1px solid var(--border); padding-left: var(--sp-3); }
  .ov-picks .ov-box:first-child { padding-right: var(--sp-3); }
}
@media (max-width: 639px) { .ov-picks .ov-box + .ov-box { border-top: 1px solid var(--border); padding-top: var(--sp-2); } }
.ov-picks .ov-box { background: none; border-radius: 0; padding: 0; font-size: 1rem; }
.ov-picks .ov-box-h { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-1); font: 700 1rem/1.3 var(--cl-font-head); }
.ov-box-ico { width: 22px; height: 22px; flex: none; }
.ov-strong .ov-box-ico { color: var(--cl-green); }
.ov-help .ov-box-ico { color: var(--cl-amber); }
.ov-picks .ov-box ul { gap: 0; line-height: 1.45; }
.ov-picks .ov-box li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--border); }
.ov-picks .ov-box li:first-child { border-top: 0; padding-top: 2px; }
.ov-item { color: var(--text); }
.ov-tag { color: var(--muted); font-size: .875rem; }
.ov-box-more, .ov-box-empty { margin-top: 4px; color: var(--text-2); font-size: .9375rem; }

/* Tonight: one compact card; the dinner question folded */
.ov-tonight { overflow: visible; padding: var(--card-pad); }
.tonight, .ov-tonight .tonight, .hero .tonight { background: none; padding: 0; border-radius: 0; gap: 6px; font-size: 1rem; }
.tonight-h, .overview .tonight-h { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 2px; font: 700 18px/1.3 var(--cl-font-head); }
.tonight-ico { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 1px; }
.tonight-h .info { margin-left: 2px; }
.tonight-compact > p { color: var(--text-2); }
.tonight-compact > p strong { color: var(--text); }
.tonight-compact details.more { border-top: 1px solid var(--border); margin: var(--sp-1) 0 0; padding-top: 2px; }
.tonight-compact .dinner { padding: 4px 0 var(--sp-1); }
.dinner .btn-small { margin-top: 4px; }

/* ---------- toggles ("Details ›", "More about this week ›") ---------- */
details.more > summary, .concept-more > details > summary, .tonight-compact details.more > summary {
  font-size: .9375rem; font-weight: 600; color: var(--accent); list-style: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more { border-top: 1px solid var(--border); margin-top: var(--sp-2); }

/* ---------- class page: the topics as one list in one card ---------- */
.class-summary { gap: var(--sp-1); }
.class-summary .tutor-next { margin-top: var(--sp-1); }
.list-title { margin: var(--sp-1) 0 -8px; font: 700 18px/1.3 var(--cl-font-head); }
.topic-list { gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--cl-radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.topic-list > .topic-card { border: 0; border-radius: 0; box-shadow: none; }
.topic-list > .topic-card + .topic-card { border-top: 1px solid var(--border); }
.topic-card .topic-row { padding: 14px var(--card-pad); min-height: 64px; }
.topic-card .topic-row:hover { background: var(--cl-sky-light); }
.topic-card:has(a.topic-row:hover) { border-color: var(--border); }
.topic-text strong { font: 700 1.0625rem/1.3 var(--cl-font-head); }
.topic-row .chev { color: var(--border-strong); }
.test-date, .test-date-wrap { padding: 12px var(--card-pad) 16px; }
.test-date-wrap { padding-top: 0; }
.guide-door { gap: var(--sp-1); }
.guide-door.is-quiet { background: var(--surface); box-shadow: var(--shadow); }
.badges-card { margin-top: 0; }
.badges-card h3 { font: 700 18px/1.3 var(--cl-font-head); margin: 0 0 var(--sp-1); }
.badge-list li { padding: 6px 12px; }

/* ---------- topic page ---------- */
.topic-head { gap: var(--sp-1) var(--sp-2); }
.step-sub { color: var(--text-2); }
.tonight-steps { gap: var(--sp-1); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.status-card .headline { font: 700 18px/1.35 var(--cl-font-head); }
.counts li { font-size: .9375rem; color: var(--text-2); font-weight: 600; }
.mix-list li { padding: 12px 0; }
.note { padding: 0 4px var(--sp-3); }
.control-row { display: flex; align-items: center; gap: 4px; }
.control-row .btn { flex: 1 1 auto; }
.control-row .info { margin-left: 4px; }
details.more-block > summary { padding: 0 var(--card-pad); min-height: 52px; font-size: 1rem; }

/* ---------- Family and Manage ---------- */
.manage-card { gap: var(--sp-2); }
.manage-card h2 { margin: 0; font-size: 18px; }
.manage-card h3 { font-size: 1rem; margin: var(--sp-1) 0 0; }
.family-list { gap: 0; margin: 0; }
.family-list li { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 12px 0; }
.family-list li:first-child { border-top: 0; }
.family-kids li.family-kid { padding: 12px 0; }
.fk-pin-label { gap: 2px; }
.fk-pin-label label { font-weight: 650; }
.setup-choices { gap: var(--sp-1); margin: 0; }
.setup-choice { display: flex; align-items: center; gap: 4px; }
.setup-choice .btn { flex: 1 1 auto; }
.setup-choice .info { margin-left: 4px; }
@media (min-width: 900px) { .setup-choices { grid-template-columns: minmax(0, 1fr); } .setup-choice .btn { width: auto; flex: 0 1 auto; min-width: 20rem; } }
.family-name-line { margin: -8px 0 0; }
.switches { gap: 0; }
.switch { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 12px 0; }
.switches legend + .switch, .switches > .switch:first-of-type { border-top: 0; }
.switch strong, .switch > span > :first-child { font-weight: 650; }
.course-row { background: var(--surface-2); border: 0; border-radius: var(--cl-radius-md); padding: 12px; }
@media (min-width: 901px) { .course-row { background: none; padding: 0; } }

/* ---------- sign-in ---------- */
.login { padding: var(--sp-3) var(--sp-2); }
@media (min-width: 700px) { .login { padding-top: 10vh; } }
.login-card { max-width: 400px; gap: var(--sp-2); }
#auth-card { padding: var(--sp-3); }
#auth-card .logo-band { margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) 0; padding: 20px var(--sp-3) 16px; }
#auth-card h1 { gap: var(--sp-2); font-size: 24px; }
#auth-card form.login-card { gap: 12px; }
#auth-card .btn-primary { width: 100%; min-height: 48px; }
#auth-card .field { gap: 6px; }

/* design pass, second look: one gap between a card's title and its body; the verdict as a chip with its reason */
.card.manage-card > h2:first-child { margin-bottom: 0; }
.concept-more details.more { border-top: 0; margin-top: 0; }
.verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 400; }
.verdict .verdict-reason { flex: 1 1 100%; min-width: 0; color: var(--text); font-weight: 600; line-height: 1.45; }
.verdict .est, .status-card .verdict .est, .headline .est { padding-left: 0; }
.headline .verdict-reason { font: 600 1rem/1.45 var(--cl-font-body); }
.chip-warn { background: var(--chip-attention-bg); color: var(--chip-attention); }
.topic-list > .topic-card { padding: 0; }
/* a card that ends with a toggle ends where the toggle's words end */
.card > details.more:last-child, .overview > details.more:last-child, .tonight-compact > details.more:last-child { margin-bottom: -10px; }
details.add-child > summary, .manage-card details > summary { color: var(--accent); }
details.add-child > summary::marker, .manage-card details > summary::marker { color: var(--accent); }
/* a phone: each section's status chip sits under its title, so the title and study-guide lines keep the full width */
@media (max-width: 560px) {
  .concept { grid-template-columns: minmax(0, 1fr); }
  .concept .pill-cell { justify-self: start; text-align: left; padding-right: 0; }
}

/* Kids' devices (founder, 2026-11-08): the family code, big and easy to read aloud, then the live device list */
.code-head { display: flex; align-items: center; gap: 4px; margin-bottom: 0; }
.family-code { margin: .25rem 0 1rem; }
.family-code .code-big { margin: .25rem 0 .5rem; white-space: nowrap; }
.code-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.code-actions .btn { min-width: 88px; text-align: center; text-decoration: none; }
.code-link summary { cursor: pointer; color: var(--accent); font-weight: 650; padding: 10px 0; }
.code-link .link-box { margin-top: .25rem; }
.just-added { color: var(--ok); font-weight: 650; }
.computer-row.is-new { animation: just-added 1.2s ease-out; }
@keyframes just-added { from { background: color-mix(in srgb, var(--ok) 18%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .computer-row.is-new { animation: none; } }
.devices-more { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: .5rem; color: var(--muted, inherit); }
.devices-more p { margin: .25rem 0; }
.change-code .row-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 420px) { .family-code .code-big { font-size: 1.75rem; letter-spacing: .1em; } }
.change-code-devices { list-style: none; padding: 0; margin: .25rem 0 .5rem; }
.change-code-devices li { padding: 2px 0; }
.change-code .check-row { display: flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.change-code .check-row input { width: 22px; height: 22px; flex: 0 0 auto; }

/* Family → Devices (founder, 2026-11-08): one compact row per device. An icon, the name, Rename / Remove as small links
   (each still 44 px to tap) on the first line; a muted "iOS 26 · Safari" and the children who used it under the name. */
.family-list li.device-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center;
  column-gap: .75rem; row-gap: .1rem; padding: 10px 0; }
.device-icon { grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 24px; height: 24px; margin-top: 10px;
  color: var(--muted); }
.device-title { grid-column: 2; grid-row: 1; margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.device-actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; margin: -10px -6px -10px 0; }
.device-sys, .device-kids { grid-column: 2 / -1; margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.device-kids { color: var(--text-2, var(--text)); }
.device-kids.muted { color: var(--muted); }
.kid-used { white-space: nowrap; }
.device-row .device-link, .device-link { min-height: 44px; min-width: 44px; padding: 0 6px; margin: 0; font-size: .875rem;
  font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.device-row .device-link:hover, .device-row .device-link:focus-visible { text-decoration: underline; }
.device-actions .btn-danger { min-height: 44px; font-size: .875rem; padding: .25rem .7rem; }
.device-row .name-edit { grid-column: 2 / -1; }
.devices-head { display: flex; align-items: center; gap: .25rem; }
.ov-learns { margin: 0; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: .35rem; }

/* the request queue (Ricky, 2026-11-08): the Requests card on Home, Received → Being prepared → Ready, and the notice
   once a request is ready */
.requests-card { display: grid; gap: .75rem; margin-top: 1rem; }
.requests-card > p, .req-more p { margin: 0; }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.req-row { padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 12px; display: grid; gap: .45rem; }
.req-title { margin: 0; overflow-wrap: anywhere; }
.req-note { margin: 0; color: var(--text-2); }
.req-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.req-steps li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .1rem .4rem; color: var(--muted); min-width: 0; }
.req-steps .req-dot { grid-row: span 2; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; line-height: 1; }
.req-steps .req-word { font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.req-steps .req-day { font-size: .875rem; }
.req-steps li.is-done, .req-steps li.is-now { color: var(--text); }
.req-steps li.is-done .req-dot { background: var(--ok); border-color: var(--ok); color: var(--primary-ink); }
.req-steps li.is-now:not(.is-done) .req-dot { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 8px var(--accent); }
.req-more { display: grid; gap: .45rem; justify-items: start; padding-top: .2rem; border-top: 1px solid var(--border); }
.req-more p { padding-top: .5rem; }
.req-file { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.req-file p { margin: 0; }
.req-confirm { padding: .7rem .85rem; border-radius: 12px; background: var(--surface-2); }
.ready-notice { border-left: 6px solid var(--ok); display: grid; gap: .45rem; margin: 0 0 1rem; }
.ready-notice h2 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: .35rem; }
.ready-notice p { margin: 0; }

/* ---------- Never lost (founder, 2026-11-08): "‹ <the page above>" on every page below a tab, and Home · Classes ·
   Family always in reach — a tab bar at the bottom on a phone, links in the top bar on a wide screen ---------- */
.page-back { margin-bottom: calc(4px - var(--gap)); }  /* close over the page's title */
.back-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; box-sizing: border-box;
  padding: 4px 14px 4px 8px; margin-left: -8px; border-radius: 999px;
  color: var(--accent); font: 700 1.0625rem/1.25 var(--cl-font-head); text-decoration: none;
}
.back-link:hover { background: var(--cl-sky-light); }
.back-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
/* the ‹ drawn as a crisp chevron (the font's own is thin); the character stays for screen readers and copy */
.back-chev { flex: none; width: 10px; height: 10px; margin: 0 4px 0 8px; font-size: 0; border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor; border-radius: 1px; transform: rotate(45deg); }
.back-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* whose page and which class, over the title: "Aidan · Biology 1-2 (P)" */
.page-kicker { display: block; margin-bottom: 2px; color: var(--muted); font: 700 .9375rem/1.3 var(--cl-font-body); letter-spacing: 0; }
.page-title:focus:not(:focus-visible), .ov-name:focus:not(:focus-visible) { outline: none; }

.main-tabs { display: flex; align-items: center; gap: 4px; }
.main-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 999px;
  color: var(--text-2); font: 700 1rem/1.2 var(--cl-font-head); text-decoration: none; white-space: nowrap;
}
.main-tab svg { flex: none; }
.main-tab:hover { background: var(--cl-sky-light); color: var(--accent); }
.main-tab[aria-current] { background: var(--cl-sky-light); color: var(--accent); box-shadow: inset 0 0 0 1px var(--cl-sky); }
.main-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (min-width: 760px) {
  .topbar-inner .main-tabs { margin-left: auto; }
}
@media (max-width: 759px) {
  .topbar { position: static; }
  .main-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-around; gap: 4px;
    padding: 6px 8px max(8px, env(safe-area-inset-bottom)); background: var(--surface);
    border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(18, 48, 76, .08);
  }
  .main-tab {
    flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px;
    max-width: 9rem; padding: 4px; border-radius: 14px; font-size: .875rem;
  }
  .main-tab[aria-current] { background: var(--cl-sky-light); box-shadow: none; }
  #dashboard { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  #dashboard.is-typing .main-tabs { display: none; }
  /* Back stays at the top while the page scrolls, so the way up is always one tap away */
  .page-back {
    position: sticky; top: 0; z-index: 4; background: var(--bg);
    margin: -8px calc(-1 * var(--sp-2)) calc(4px - var(--gap)); padding: 4px var(--sp-2) 2px;
  }
}

/* ---------- Each topic and section at a glance (founder, 2026-11-08): which topic now, how each is going ---------- */
/* chips: an icon and a word every time (never colour alone), calm tints */
.tchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px;
  font: 650 .875rem/1.45 var(--cl-font-body); white-space: nowrap; overflow-wrap: normal;
  background: var(--surface-2); color: var(--text-2); }
.tchip-ico { font-size: .875rem; line-height: 1; }
.tchip-now { background: var(--accent); color: var(--accent-ink); }
.tchip-ready { background: var(--chip-good-bg); color: var(--chip-good); }
.tchip-done { background: var(--chip-good-bg); color: var(--chip-good); }
.tchip-started { background: var(--accent-soft); color: var(--text); }
.tchip-not_started { background: var(--surface-2); color: var(--muted); }
/* the topic studied now: an accent edge, first in the list */
.topic-card.is-now { border: 2px solid var(--accent); box-shadow: inset 5px 0 0 var(--accent); }
.trow-head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.trow-title { font-size: 1.05rem; line-height: 1.3; }
.topic-text { gap: .3rem; }
/* the bar: mastered (green) then learned (navy) of the total; the numbers beside it say the same */
.tbar { flex: 1; display: flex; height: 10px; min-width: 80px; border-radius: 5px; overflow: hidden; background: var(--bar-track); }
.tbar-mastered { background: var(--good); }
.tbar-learned { background: var(--bar-fill); }
.tbar span + span { border-left: 2px solid var(--surface); }
@media (forced-colors: active) { .tbar { border: 1px solid CanvasText; } .tbar span { forced-color-adjust: none; background: Highlight; } }
.tprog { display: grid; gap: 2px; }
.tprog-row { display: flex; align-items: center; gap: .6rem; }
.tprog-pct { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .95rem; }
.tprog-count { font-size: .875rem; color: var(--text-2); }
.tline { font-size: .95rem; font-weight: 600; color: var(--text); }
.tline.is-early { font-weight: 500; color: var(--text-2); }
.tgrade { font-size: .95rem; font-weight: 650; color: var(--text); margin: 0; }
/* the topics not started yet: one compact list, folded when there are many */
.tns-list { margin: 0; padding: 0; list-style: none; display: grid; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.tns-list li + li { border-top: 1px solid var(--border); }
.tns-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; min-height: 52px;
  padding: .45rem 1rem; color: var(--text); text-decoration: none; }
.tns-row:hover .tns-title { color: var(--accent); text-decoration: underline; }
.tns-title { min-width: 0; font-weight: 600; }
.topic-list > details.more > summary { padding: .5rem 0; }
.topic-list > details.more[open] > .tns-list { margin-top: .4rem; }
.tns-ico { color: var(--muted); font-size: .9rem; }
.tns-head { margin: 0 0 .3rem; font-size: .92rem; font-weight: 650; color: var(--text-2); }
/* the class total, under the class name */
.ctotal { display: grid; gap: 4px; max-width: 640px; }
.ctotal-line { margin: 0; font-size: 1rem; }
.ctotal .tbar { flex: none; width: 100%; }
/* the date link: small, the same on every card */
.test-date-wrap.is-compact { padding: 0 var(--card-pad) 6px; }
.test-date-wrap.is-compact .test-date-open { min-height: 44px; padding: 0; font-size: .92rem; }
/* the real test grade (after the test): tiny */
.real-grade { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: 0 var(--card-pad) 6px; }
.real-grade.is-page { padding: 0; }
.real-grade label { flex-basis: 100%; font-size: .92rem; font-weight: 600; }
.real-grade input { min-height: 44px; width: 7.5rem; padding: .3rem .6rem; font-size: 1.05rem; }
.real-grade p { flex-basis: 100%; margin: 0; }
.real-grade .real-grade-open { min-height: 44px; padding: 0; font-size: .92rem; }
/* the top of the topic page */
.topic-assess { display: grid; gap: .5rem; }
.topic-assess p { margin: 0; }
.ta-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ta-prog { align-items: flex-start; flex-wrap: nowrap; gap: .25rem; }
.ta-prog .tprog { flex: 1; }
.ta-grade { display: grid; gap: .2rem; padding: .5rem .7rem; border-radius: 10px; background: var(--surface-2); }
.ta-grade .tgrade { font-size: 1.05rem; }
.ta-step { font-size: .95rem; }
.ta-recent h3 { margin: .4rem 0 .3rem; font-size: 1rem; }
.recent-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.recent { padding: .45rem .7rem; border-left: 3px solid var(--border-strong); }
.recent-top { font-size: .93rem; }
.recent-secs { margin-top: .1rem !important; }
/* each section: a 3-step scale and its word; "Studying now" marked on its row */
.sstate { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 650; color: var(--text-2); }
.sdots { display: inline-flex; gap: 3px; }
.sdot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: transparent; }
.sdot.on { background: var(--bar-fill); border-color: var(--bar-fill); }
.sstate-mastered .sdot.on { background: var(--good); border-color: var(--good); }
.sstate-not_started { color: var(--muted); font-weight: 500; }
.concept.is-now { padding-left: .6rem; padding-right: .4rem; box-shadow: inset 4px 0 0 var(--accent); background: var(--accent-soft); border-radius: 8px; }
.sec-now { margin-left: .5rem; font-size: .875rem; vertical-align: middle; }
.sec-mixup { display: block; font-size: .9rem; color: var(--text-2); }

/* ---------- UX fix round 1 (2026-11-08, Lane C): parent navigation and pages ---------- */
/* P-C18: small notes one size up and darker (≥ 4.5:1 everywhere); the ⓘ a bigger circle; toggles look like buttons */
.muted.small, .small.muted { font-size: .9375rem; color: var(--text-2); }
:root:not([data-theme="light"]) .muted.small { color: var(--text-2); }
.info-dot { width: 32px; height: 32px; font-size: 1rem; border-width: 2px; }  /* P-C18: 32 px, inside the 44 px button */
.info-btn { width: 44px; height: 44px; margin: -8px -6px -8px -4px; }
details.more > summary, .concept-more > details > summary, .tonight-compact details.more > summary,
.topic-list > details.more > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; margin: 6px 0;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  color: var(--accent); font-weight: 650; cursor: pointer;
}
details.more > summary:hover, .concept-more > details > summary:hover { background: var(--cl-sky-light); }
details.more > summary:focus-visible, .concept-more > details > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.concept-more > details > summary::-webkit-details-marker { display: none; }
.concept-more > details > summary { list-style: none; }
/* P-C15: chevrons dark enough to read (≥ 4.5:1) */
.chev, .class-row .chev, .topic-row .chev, .tns-row .chev { color: var(--text-2); }

/* P-C05: sign-in — the kids' screen is a real 44 px button; the language line sits under the form */
.kids-link-row { margin: .75rem 0 0; }
.kids-link { min-height: 44px; display: inline-flex; align-items: center; gap: 2px; text-decoration: none; }
#auth-card .language-line { margin-top: .9rem; }
/* the account menu's "Another language" note */
.acct-lang { margin: 0 4px 6px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); color: var(--text); line-height: 1.45; }

/* P-C01 / P-C12: the note form is a small window with a title and ✕ Close; who gets it is said under the heading */
.req-who { margin: .1rem 0 .6rem; color: var(--text-2); }
.req-sub { margin: .6rem 0 .3rem; font-size: 1rem; }
.req-form { border: 1px solid var(--border-strong); border-radius: 14px; padding: 12px 14px; background: var(--surface); }
.req-form-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.req-form-h { margin: 0; font-size: 1.05rem; }
.req-form-h:focus { outline: none; }
.req-close { flex: none; min-height: 44px; }
.req-line { margin: 0 0 1rem; }
.req-line-btn { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 14px; margin: 0;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--accent); }
.req-line-btn strong { color: var(--text); }
#req-h:focus { outline: none; }
.guide-cancelled:focus { outline: none; }

/* P-C11: the one line after switching child to a page that child doesn't have */
.switch-note { margin: 0 0 1rem; padding: .6rem .85rem; border-radius: 12px; background: var(--cl-sky-light); color: var(--text); font-weight: 600; }

/* P-C10: the sticky Back strip names the page on screen, on a phone only */
.back-here { display: none; }
@media (max-width: 759px) {
  .page-back { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .page-back[hidden] { display: none; }
  .page-back .back-link { flex: 0 1 auto; }
  .back-here { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); font-size: .95rem; }
  .back-here strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .back-dot { color: var(--muted); }
}
/* P-C22: on a phone the Home tab names the child ("Home · Leo") */
.tab-kid { display: none; }
@media (max-width: 759px) { .tab-kid { display: inline; } .main-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } }

/* P-C02: a date link under a class row (none since 2026-11-08) (never inside the row's link) */
.class-rows li.has-add { padding-bottom: 6px; }
.cr-add-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -8px 0 0 calc(.5rem + 44px + 12px);
  padding: 0 4px; color: var(--accent); font-size: .9375rem; font-weight: 650; text-decoration: none; }
.cr-add-link:hover { text-decoration: underline; }
.cr-add-link .ico { width: 16px; height: 16px; }
@media (max-width: 420px) { .cr-add-link { margin-left: calc(8px + 36px + 10px); } }
/* P-C02 / P-C03: a topic's date as one line, the editor only when asked for */
.test-date-wrap { padding: 0 var(--card-pad) 6px; }
.tns-item .test-date-wrap { padding: 0 1rem 4px 2.6rem; }
.test-date-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; min-height: 44px; font-size: .9375rem; color: var(--text-2); }
.test-date-line .ico { width: 16px; height: 16px; color: var(--muted); }
.test-date-line .linkish { min-height: 44px; padding: 0 4px; margin: 0; font-size: .9375rem; }
.test-date-wrap.is-open { padding: 0; }
.test-date-wrap.is-open .test-date { border-top: 1px solid var(--border); }
.test-date label { flex-basis: 100%; font-weight: 650; }
.test-date .date-box { flex: 1 1 16rem; }
.test-date-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex-basis: 100%; }
.test-date-buttons .btn-small { min-height: 44px; }
.test-date-buttons .test-date-remove { margin-left: auto; color: var(--danger); }
.test-date .save-msg, .test-date-after { flex-basis: 100%; margin: 0; }
.test-date-wrap.is-focus .test-date { box-shadow: inset 4px 0 0 var(--accent); }
.tns-list .tns-item + .tns-item { border-top: 1px solid var(--border); }
.class-teacher { margin: -4px 0 0; color: var(--text-2); }

/* P-C04: the topic page's Topic check inside the status card */
.test-day { display: grid; gap: .4rem; margin-top: .5rem; }
.test-day:empty { display: none; }
.test-day .step-sub { margin: 0; }
.test-day .btn-small { justify-self: start; min-height: 44px; }
.headline[hidden] { display: none; }

/* P-C06: the Classes tab, every class with its topics */
.classes-lead { margin: -8px 0 0; }
.class-topics { display: grid; gap: .4rem; }
.ct-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px;
  color: var(--text); text-decoration: none; border-radius: 10px; padding: 4px; margin: -4px; }
.ct-head:hover { background: var(--cl-sky-light); }
.ct-head-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.ct-name { font: 700 1.15rem/1.3 var(--cl-font-head); }
.ct-list { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--border); border-radius: 12px; }
.ct-list li + li { border-top: 1px solid var(--border); }
.ct-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 56px;
  padding: .55rem 1rem; color: var(--text); text-decoration: none; }
.ct-topic:hover .ct-title { color: var(--accent); text-decoration: underline; }
.ct-text { display: grid; gap: 4px; min-width: 0; }
.ct-title { font-size: 1rem; line-height: 1.3; }
.ct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .9rem; color: var(--text-2); }

/* P-C19: one row on a laptop — the child chips sit in the top bar, between the logo and the tabs */
@media (min-width: 1100px) {
  .topbar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
    padding: 6px max(16px, calc((100vw - 1072px) / 2)); }
  .topbar-inner { display: contents; }
  .topbar .brand { grid-column: 1; grid-row: 1; }
  .topbar .kid-tabs { grid-column: 2; grid-row: 1; padding: 0; margin: 0; max-width: none; min-width: 0; }
  .topbar .main-tabs { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
  .topbar .acct { grid-column: 4; grid-row: 1; }
}

/* P-C20: each study switch is one big row to tap (its words are the label); the box itself is bigger */
.switch { min-height: 52px; align-items: center; }
.manage-card .switch input { width: 24px; height: 24px; }
.avatar-grid button > span { pointer-events: none; }

/* P-C21: Remove looks different from Rename (muted red, a bin icon) and sits apart from it */
.device-actions { gap: 12px; }
.device-link.device-remove { color: var(--danger); gap: 4px; }
.device-link.device-remove .ico { width: 16px; height: 16px; }
/* P-C08: "You're signed out." is a calm note, never the warning box */
.auth-note { margin: 0 0 .75rem; padding: .6rem .85rem; border-radius: 12px; background: var(--chip-good-bg, #e8f4ec); color: var(--text); font-weight: 600; }
.ov-head .req-line { margin: .4rem 0 0; }
@media (min-width: 560px) { .ov-head .req-line { padding-left: 56px; } }

/* ---------- UX round 2 (2026-11-09), Lane C: parent pages and navigation ---------- */
/* R2-C01: on a phone the children's chips are their own sticky row (48 px, 44 px chips) under the safe area; the logo
   and account row scroll away; the trail strip sticks under the chips. Together they stay under 100 px. */
@media (max-width: 759px) {
  .topbar-inner { height: 56px; min-height: 56px; box-sizing: border-box; }
  #dashboard.has-chips .topbar { position: sticky; top: -56px; z-index: 6; }
  #dashboard.has-chips .kid-tabs { box-sizing: border-box; height: calc(48px + env(safe-area-inset-top, 0px)); align-items: center;
    padding: env(safe-area-inset-top, 0px) 16px 0; }
  #dashboard.has-chips .kid-tab { min-height: 44px; height: 44px; }
  #dashboard.has-chips .page-back { top: calc(49px + env(safe-area-inset-top, 0px)); }
  #requests, #read-help { scroll-margin-top: 110px; }
}

/* R2-C08: the account button reads as a menu: the person icon, the first name and ▾ ("Alex ▾"); "Account ▾" on a small phone */
.acct-btn { width: auto; min-width: 44px; height: 44px; padding: 0 12px 0 8px; border-radius: 999px; display: inline-flex;
  align-items: center; gap: 6px; font: 700 1rem/1 var(--cl-font-head); color: var(--accent); }
.acct-ico { display: grid; place-items: center; }
.acct-first { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-first:empty, .acct-btn.has-name .acct-word { display: none; }
.acct-caret { font-size: .875rem; }
/* R4-C11 (X): the same label at every width: the first name ("Alex ▾"), never "Account ▾" on a phone */
@media (max-width: 420px) {
  .acct-first { max-width: 6.5rem; }
}

/* R2-C14, R2-V02: the trail "‹ Sam's classes › Math II › Order of operations"; every crumb a 44 px link; the same
   chevron as the kid app (the ‹ itself, big) */
.back-chev { width: auto; height: auto; margin: -3px 0 0; border: 0; transform: none; font-size: 30px; line-height: 1; font-weight: 400; }
.trail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.trail .crumb { display: inline-flex; align-items: center; min-width: 0; }
.trail .crumb + .crumb::before { content: "›"; padding: 0 6px; color: var(--muted); font-weight: 700; }
.crumb-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 0 6px; border-radius: 10px;
  color: var(--accent); font: 700 1rem/1.25 var(--cl-font-head); text-decoration: none; }
.crumb-link.crumb-first { padding: 0 6px 0 2px; }
.trail ol { margin-left: -2px; }
.crumb-link:hover { background: var(--cl-sky-light); text-decoration: underline; }
.crumb-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.crumb-here { color: var(--text); font-weight: 650; min-height: 44px; }
.crumb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-back .back-here { display: none; }
@media (max-width: 759px) {
  .page-back { display: flex; align-items: center; gap: 8px; min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
  .trail { min-width: 0; flex: 1 1 auto; }
  .trail ol { flex-wrap: nowrap; }
  .trail .crumb { flex: 0 1 auto; }
  .trail .crumb.crumb-here { flex: 1 1 0; }  /* the page on screen gives way first; its title says it in full */
  .trail .crumb:not(.crumb-here) { flex-shrink: 0; max-width: 60%; }
  .crumb-link { font-size: .9375rem; padding: 0 4px; }
  .trail .crumb + .crumb::before { padding: 0 3px; }
  .crumb-here { font-size: .9375rem; }
  /* the answer key on a phone: the way up and the section menu in one sticky row */
  .page-back.is-key .crumb:not(.is-up) { display: none; }
  .page-back.is-key .crumb.is-up::before { content: none; }
  .page-back.is-key .crumb.is-up .crumb-link::before { content: "‹"; font-size: 30px; line-height: 1; margin-top: -3px; font-weight: 400; }
  .page-back.is-key .trail { flex: 0 1 auto; max-width: 55%; }
}
.page-back .ak-jump { display: none; }
@media (max-width: 759px) {
  .page-back .ak-jump { display: block; flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 6px 10px; border-radius: 12px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 600 .9375rem/1.2 var(--cl-font-body); }
  .answer-key .ak-toc { display: none; }
}

/* R2-C07: the ⓘ is a visible 32 px circle with its 44 px button; its note reads at the page's own size */
.info-pop { font-size: 17px; max-width: min(340px, calc(100vw - 24px)); }
.info-title { font-size: 17px; }
.grade-rule { margin: 0; gap: 6px; }
.grade-rule .info { margin-left: 6px; }
.read-help-btn { min-height: 44px; padding: 0 4px; margin: 0; font-size: .9375rem; font-weight: 650; }
.ov-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.read-help { display: grid; gap: .4rem; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface-2); }
.read-help:focus { outline: none; }
.read-help h3 { margin: 0; font-size: 1.05rem; }
.read-help dl { margin: 0; display: grid; gap: .5rem; }
.read-help dt { font-weight: 700; }
.read-help dd { margin: 0; color: var(--text); }

/* R2-C06, R2-C15: the class's own status line; the class header says it opens the class */
.cr-status.chip { white-space: normal; text-align: left; line-height: 1.35; }
.cr-status-line { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 600; color: var(--text-2); }
.ct-head { grid-template-columns: auto minmax(0, 1fr) auto; }
.ct-open { pointer-events: none; white-space: nowrap; }
.ct-head:hover .ct-open, .ct-head:focus-visible .ct-open { background: var(--cl-sky-light); border-color: var(--accent); }
.ct-head:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 520px) { .ct-head { grid-template-columns: auto minmax(0, 1fr); } .ct-open { grid-column: 1 / -1; justify-self: start; } }
.ct-item { display: grid; }
.ct-topic { grid-template-columns: minmax(0, 1fr) auto; }
.ct-grade { font-size: .9375rem; color: var(--text); }
.ct-basis { color: var(--text-2); font-weight: 400; }
.ct-reason, .treason, .ta-reason { color: var(--text-2); }
.ct-item > .test-date-wrap { padding: 0 1rem 8px; }
.class-icon .ico { width: 24px; height: 24px; }
.class-row .class-icon .ico { width: 22px; height: 22px; }
/* the class letter on Home is the class's, labelled "overall" (rule 2.4.4) */
.class-row { grid-template-columns: 40px minmax(0, 1fr) 56px 16px; }
.cr-grade.is-class { width: 56px; height: auto; min-height: 40px; padding: 4px 2px; display: grid; justify-items: center; align-content: center; gap: 1px; }
.cr-overall { font: 600 .75rem/1.1 var(--cl-font-body); color: var(--text-2); }
@media (max-width: 420px) { .class-row { grid-template-columns: 36px minmax(0, 1fr) 56px 12px; } .cr-grade.is-class { width: 56px; } }

/* R2-C02: the test date and the study guide as buttons on the topic page */
.ta-adds { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.ta-adds .test-date-wrap { padding: 0; }
.ta-adds .test-date-wrap.is-open { flex-basis: 100%; }
.test-date-open.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.test-date-open .ico, .ta-guide .ico { width: 18px; height: 18px; }
.ta-guide .btn { display: inline-flex; align-items: center; gap: 6px; }

/* R2-C16: At a glance in two balanced columns on a laptop: Strongest and Still growing on the left, The plan right */
.gl-left { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
@media (min-width: 760px) {
  .ov-glance:not(.is-early) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ov-glance:not(.is-early) .gl-left { padding-right: var(--sp-3); }
  .ov-glance:not(.is-early) .gl-left .gl-col { padding: 0; border: 0; }
  .ov-glance:not(.is-early) .gl-left .gl-col + .gl-col { padding: var(--sp-2) 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .ov-glance:not(.is-early) .gl-plan { border-left: 1px solid var(--border); padding-left: var(--sp-3); }
}
.ov-tonight .gl-help { margin-top: .25rem; }
.gl-sub { margin: 0 0 .25rem; font-size: 1rem; }

/* R2-C17: the bar's key, in words with swatches */
.tkey { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: .875rem; color: var(--text-2); }
.tkey-item { display: inline-flex; align-items: center; gap: 6px; }
.tkey-sw { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }

/* R2-C10: Remove asks first, in a small box under its row */
.confirm-box { grid-column: 1 / -1; display: grid; gap: .4rem; margin: .5rem 0 .25rem; padding: 12px 14px; border: 1px solid var(--border-strong);
  border-radius: 12px; background: var(--surface-2); }
.confirm-box p { margin: 0; }
.confirm-box .btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.confirm-box .btn-small { min-height: 44px; }
.device-link.device-remove, .remove-btn.linkish { color: var(--text-2); }

/* R2-C11: starting over has its own block at the end of More */
.start-over { display: grid; gap: .5rem; justify-items: start; }
.start-over h2 { margin: 0; }
.start-over p { margin: 0; }

/* R2-C22: the week story's contents row */
.story-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0 0 .5rem; }
.story-toc .sep { color: var(--muted); }
.story-toc-btn { min-height: 44px; padding: 0 4px; margin: 0; font-weight: 650; }
.story-part:focus { outline: none; }
.mix-what { margin: -.5rem 0 .75rem; }

/* R2-C03: the answer key inside the parent shell */
.answer-key { display: grid; gap: .25rem; }
.answer-key .ak-title { margin: 0; }
.answer-key .ak-title:focus { outline: none; }
.answer-key .meta { color: var(--text-2); font-size: .9375rem; margin: 0; }
.answer-key .ak-tools { margin: .5rem 0; }
.answer-key .ak-toc { margin: .75rem 0; padding: 16px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.answer-key .ak-toc-h { margin: 0 0 4px; font: 700 1.05rem/1.3 var(--cl-font-head); }
.answer-key .ak-toc ol { margin: 0; padding-left: 22px; columns: 2 260px; column-gap: 28px; }
.answer-key .ak-toc li { break-inside: avoid; }
.answer-key .ak-toc-mix { list-style: none; margin-left: -22px; }
.ak-toc-link { display: inline-flex; align-items: center; min-height: 44px; padding: 4px; border: 0; background: none; text-align: left;
  color: var(--accent); font: 600 1rem/1.3 var(--cl-font-body); text-decoration: underline; cursor: pointer; }
.answer-key .ak-sec { margin: 1.5rem 0 .25rem; padding-top: .75rem; border-top: 2px solid var(--good); font-size: 1.3rem; scroll-margin-top: 120px; }
.answer-key .ak-sec:focus { outline: none; }
.answer-key .ak-sub { margin: .75rem 0 .25rem; font-size: 1rem; color: var(--text-2); }
.answer-key .ak-card { border-left: 3px solid var(--border); padding: 4px 0 4px 12px; margin: 6px 0; }
.answer-key ol.ak-q { padding-left: 22px; margin: 0; }
.answer-key ol.ak-q > li { margin: 10px 0; break-inside: avoid; }
.answer-key .ak-ans { font-weight: 700; color: var(--good); white-space: pre-line; }
.answer-key .ak-why { color: var(--text-2); }
.answer-key .ak-opts { margin: 4px 0; padding-left: 18px; color: var(--text-2); }
.answer-key .ak-square { margin: 8px 0; max-width: 300px; }
.answer-key .ak-square svg { width: 100%; height: auto; display: block; }
@media print {
  #dashboard[data-view="answerkey"] .topbar, #dashboard[data-view="answerkey"] .main-tabs, #dashboard[data-view="answerkey"] .page-back,
  .answer-key .ak-tools, .answer-key .ak-toc { display: none !important; }
  .answer-key .ak-sec { break-before: page; }
  .answer-key .ak-sec:first-of-type { break-before: auto; }
}
/* R2-C06: the class's status is a line of words under its name, not a pill (it is longer now: "1 of 7 topics done · …") */
.class-row .cr-top { display: grid; gap: 2px; }
.class-row .cr-status.chip { background: none; padding: 0; border: 0; box-shadow: none; display: flex; align-items: flex-start; gap: 6px; font-size: .9375rem; }
.class-row .cr-status.chip .dot { margin-top: .45em; flex: none; }
/* R2-D06 (the page's half): a class with no lessons for this grade, said kindly, with one button (no warning colour) */
.grade-fit { grid-column: 1 / -1; display: grid; gap: .4rem; margin: .25rem 0 .5rem; padding: 10px 14px; border-radius: 12px;
  background: var(--cl-sky-light); color: var(--text); }
.grade-fit p { margin: 0; }
.class-rows > li > .grade-fit { margin: 0 8px 8px calc(8px + 40px + 14px); }
@media (max-width: 420px) { .class-rows > li > .grade-fit { margin-left: 8px; } }
.course-row .grade-fit { flex-basis: 100%; }

/* ---------- UX round 3 (2026-11-09), Lane C: parent pages and navigation ---------- */
/* R3-C03, R3-C28 (rule 3.1): one "‹ <the page you came from>"; the name wraps, never "‹ Phot…" */
.page-back .back-link { margin-left: -8px; }
.back-text { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.page-back .ak-jump { display: none !important; }
@media (max-width: 759px) {
  .answer-key .ak-toc { display: block; padding: 12px 14px; }
  .answer-key .ak-toc ol { columns: 1; }
}

/* R3-C09, R3-C18 (rule 3.6): ONE disclosure. A full-width row, the words on the left and a chevron on the right
   (› closed, turned down when open), at least 44 px tall; it opens in place; "Show fewer" sits at the bottom of what
   opened. The same in both apps. */
details.disc { border-top: 1px solid var(--border); margin: var(--sp-2, 12px) 0 0; padding: 0; }
details.disc > summary.disc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box;
  min-height: 48px; padding: 6px 4px; list-style: none; cursor: pointer; border-radius: 10px;
  color: var(--accent); font: 700 1rem/1.3 var(--cl-font-head);
}
details.disc > summary.disc-row::-webkit-details-marker { display: none; }
details.disc > summary.disc-row::marker { content: ""; }
details.disc > summary.disc-row:hover { background: var(--cl-sky-light); }
details.disc > summary.disc-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.disc-words { min-width: 0; overflow-wrap: anywhere; }
.disc-chev { flex: none; display: inline-block; font-size: 1.5rem; line-height: 1; transition: transform .15s; }
details.disc[open] > summary .disc-chev { transform: rotate(90deg); }
.disc-close .disc-chev.is-up { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .disc-chev { transition: none; } }
.disc-body { padding: 4px 0 0; }
.disc-close {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px;
  margin: 8px 0 0; padding: 6px 4px; border: 0; border-top: 1px dashed var(--border); border-radius: 0; background: none;
  color: var(--accent); font: 700 1rem/1.3 var(--cl-font-head); text-align: left; cursor: pointer;
}
.disc-close:hover { background: var(--cl-sky-light); }
.disc-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* the topic page's "Settings and history": a row on its own under the cards */
details.disc.more-block { border-top: 0; margin-top: var(--gap, 16px); background: var(--surface); border-radius: var(--radius, 16px);
  box-shadow: var(--shadow); padding: 0 var(--card-pad, 16px); }
details.disc.more-block > .disc-body > section + section { margin-top: 16px; }
details.disc.more-block > .disc-body > .card { box-shadow: none; border: 1px solid var(--border); }
/* the requests row on This week, and the plan's "more steps" row: rows like every other */
.req-disc .requests-card { padding: 0; }
.ov-glance details.disc { margin-top: 4px; }

/* R3-C04: "How to read this page" is a plain secondary button; the Letters entry reads as three short lines */
.read-help-btn.btn { min-height: 44px; padding: .35rem .9rem; font-size: .9375rem; font-weight: 650; }
.read-help .rh-line { display: block; }
.read-help .rh-line + .rh-line { margin-top: 2px; }

/* R3-C10: a Practice again row says what it is and when, and opens its topic */
.pa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* R5 follow-up: the line that says the list's two kinds (the kid's "Practice again" is the questions) */
.pa-counts { margin: 0 0 8px; color: var(--text); font-size: .9375rem; }
.pa-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 10px;
  border-radius: 12px; background: var(--surface-2, var(--cl-sky-light)); color: var(--text); text-decoration: none; }
a.pa-row:hover { background: var(--cl-sky-light); }
a.pa-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pa-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; min-width: 0; }
.pa-kind { font-weight: 700; }
.pa-when { color: var(--accent); font-weight: 650; }
.pa-where { flex-basis: 100%; color: var(--muted); font-size: .9375rem; }
.pa-row > .chev { flex: none; color: var(--accent); font-size: 1.4rem; }
.story-badges { margin: 6px 0 0; }

/* R3-C11: the class's name is a plain heading link; each topic row one full-width link, 8 px apart */
.class-topics .ct-head { text-decoration: none; }
.class-topics .ct-name-h { margin: 0; font-size: 1.1rem; }
.class-topics .ct-name { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: none; }
.class-topics .ct-name:hover { text-decoration: underline; }
.class-topics .ct-list { display: grid; gap: 8px; }
.class-topics .ct-topic { display: flex; width: 100%; box-sizing: border-box; }

/* R3-C08: the topic page's header lines */
.ta-check, .ta-tonight { margin: 6px 0 0; }
.unlock-row { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.unlock-row h3 { margin: 0 0 4px; font-size: 1.05rem; }

/* R3-C05: the class row is the icon, the name with its status and test date, and ›: no letter column */
.class-row { grid-template-columns: 40px minmax(0, 1fr) 16px; }
@media (max-width: 420px) { .class-row { grid-template-columns: 36px minmax(0, 1fr) 12px; } }
.class-row .cr-status.chip { flex-wrap: nowrap; }
.class-row .cr-status-text { min-width: 0; }
.pa-words { display: block; }
.pa-words > span { display: inline; }
.pa-words > .pa-where { display: block; }

/* R3-C25: the skip link shows when a keyboard reaches it */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px;
  background: var(--surface); color: var(--accent); font-weight: 700; box-shadow: var(--shadow); }
.skip-link:focus { top: 8px; outline: 3px solid var(--focus); }

/* R3-C14: one "Change ›" per device; its small panel holds the name, Save, and Remove at the bottom */
.device-row .device-used { color: var(--text-2, var(--muted)); font-weight: 400; }
.device-change-btn { white-space: nowrap; }
.device-change { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 12px;
  background: var(--surface-2); }
.device-change[hidden] { display: none; }
.device-change input { min-height: 44px; }
.device-remove-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.device-remove { color: var(--text-2, var(--muted)); min-height: 44px; }
.device-reported { color: var(--muted); }

/* R3-C26: on Family the children's row keeps its height, unseen, so nothing jumps between the tabs */
.kid-tabs.is-idle { visibility: hidden; }
/* R3-C16: the bottom tabs: 56 px tall, 8 px apart, clear of the phone's home bar. R3-C27: every page ends above them */
:root { --tabs-h: 72px; }
@media (max-width: 759px) {
  .main-tabs { gap: 8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .main-tab { min-height: 56px; }
  #dashboard { padding-bottom: 0; }
  #dashboard .view { padding-bottom: calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom, 0px)); }
}
#mix-h, #again-h { scroll-margin-top: 120px; }
#mix-h:focus:not(:focus-visible), #again-h:focus:not(:focus-visible) { outline: none; }
/* rule 3.6: the older pill and row styles never reach the one disclosure */
#dashboard details.disc > summary.disc-row { display: flex; margin: 0; padding: 6px 4px; border: 0; border-radius: 10px;
  background: none; width: 100%; box-sizing: border-box; }
.concept-more > details.disc, .concept details.disc { border-top: 1px solid var(--border); }
.class-topics .ct-name .chev { margin-left: 6px; }
.class-topics .ct-topic { align-items: center; gap: 12px; }
.class-topics .ct-topic > .ct-text { flex: 1 1 auto; min-width: 0; }
.class-topics .ct-topic > .chev { flex: none; margin-left: auto; }
.class-topics .cr-status-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; }
.class-topics .cr-status-line .dot { flex: none; }
.class-topics .cr-status-text { min-width: 0; }

/* ---------- UX round 4, Lane C ---------- */
/* R4-C01: Home's week card fits one phone screen: the one strongest and the one still growing, side by side on a
   laptop; "See all" opens the rest in place; the Classes card ends with one row to the Classes tab */
@media (min-width: 760px) {
  .ov-glance.gl-two:not(.is-early) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.overview > details.disc.see-all-disc, .overview > details.disc.see-all-disc + details.disc { margin-top: 0; }
.see-all { display: grid; gap: var(--sp-2, 12px); }
.see-all > .gl-col + .gl-col, .see-all > .gl-col + * { padding-top: var(--sp-2, 12px); border-top: 1px solid var(--border); }
.see-all .gl-plan .gl-list { padding-left: 0; }
/* R5-C03 (G): the row to every topic is drawn like a class row, the last row of the class list */
.class-row.all-topics-row { grid-template-columns: 40px minmax(0, 1fr) 16px; color: var(--accent); }
.class-row.all-topics-row .cr-name { color: var(--accent); }
.all-topics-ico { display: grid; place-items: center; background: var(--cl-sky-light); color: var(--accent); }
.all-topics-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.all-topics-row > .chev { color: var(--accent); font-size: 1.5rem; line-height: 1; }
@media (max-width: 420px) { .class-row.all-topics-row { grid-template-columns: 36px minmax(0, 1fr) 12px; } }
/* R5-C16: Requests, the last card on Home: one row for what was sent, one button straight to the form */
#home-view > .requests-card { margin-top: var(--gap, 16px); gap: .6rem; justify-items: start; }
#home-view > .requests-card > * { justify-self: stretch; }
#home-view > .requests-card > .req-open { justify-self: start; display: inline-flex; align-items: center; gap: 8px; }
#home-view > .requests-card h2 { margin: 0; }
.req-lead { margin: 0; }
/* R5-C17 (G): on a phone the parent pages read one size larger (17 px body text), and the explaining lines are ink,
   not grey */
@media (max-width: 759px) {
  html { font-size: 106.25%; }
  #dashboard { --text-2: var(--text); --muted: var(--text); }
}

/* R4-C02: the topic page's three closed rows; the heading inside a row reads like the row's own words */
details.disc.topic-fold { margin-top: var(--gap, 16px); }
details.disc.topic-fold > summary.disc-row > h2.disc-words { margin: 0; font: inherit; color: inherit; }
details.disc.topic-fold > .disc-body > .sec-head { margin: 0 0 8px; }
details.disc.topic-fold > .disc-body { padding-bottom: 4px; }
details.disc.topic-fold[hidden] { display: none; }
.again-what { margin: 0 0 10px; color: var(--text-2); }
/* R4-C05 (G): "What Sam will practice again" is a plain list to read: no button look, no chevron; a tap opens the
   answers in place */
.pa-plain .pa-item { padding: 10px 0; border-top: 1px solid var(--border); }
.pa-plain .pa-item:first-child { border-top: 0; }
.pa-plain .pa-words { color: var(--text); }
.pa-plain details.pa-open > summary.pa-sum { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.pa-plain details.pa-open > summary.pa-sum::-webkit-details-marker { display: none; }
.pa-plain details.pa-open > summary.pa-sum::marker { content: ""; }
.pa-plain details.pa-open > summary.pa-sum:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.pa-plain .pa-body { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--border); }
.pa-plain .pa-body dl { margin: 0; }
.pa-plain .pa-body p { margin: 0 0 4px; }
/* the section rows' own "What Sam will practice again (1)": the quiet text colour, not a blue button */
.concept details.disc.sec-again > summary.disc-row { color: var(--text); font-weight: 600; font-family: var(--cl-font-body); }
/* R4-C20 (P): one closer for the dinner question, at the bottom: the open row reads as its heading */
details.disc.disc-one-closer[open] > summary .disc-chev { visibility: hidden; }
/* R4-C09: the study guide form opens in place on the topic page */
.ta-adds .ta-guide-box { flex: 1 1 100%; min-width: 0; }
.ta-guide-box .guide-form { margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
/* R4-C03: the one-colour bar's sentence */
.tprog.is-one .bar-line { color: var(--text-2); font-size: .9375rem; line-height: 1.45; }
.ctotal.is-one .ctotal-line { margin: 0 0 6px; }
.dinner-listen { margin: 6px 0; }
.habits-why { margin: 4px 0 8px; color: var(--text-2); }

/* R4-C14 (X): an ⓘ is a full 44 x 44 target that never overlaps the words beside it */
.info-btn { width: 44px; height: 44px; min-width: 44px; margin: -10px 0; }
/* R4-C17 (G): the family code's note opens under the code, in the flow */
.code-tip-under .info-pop.is-under { position: static; display: grid; width: auto; max-width: none; margin: 8px 0 0; }
.code-tip-under .info-pop.is-under[hidden] { display: none; }

/* R4-C19 (G): small grey lines are at least 15 px, in the darker grey (4.5:1 or more on the page and on a card) */
#dashboard .small, #dashboard .muted.small { font-size: .9375rem; }
#dashboard .muted { font-size: max(.9375rem, 1em); color: var(--text-2); }
#dashboard .gl-why, #dashboard .gl-secs, #dashboard .ct-basis, #dashboard .cr-lead, #dashboard .ov-tag,
#dashboard .concept-guide, #dashboard .ov-week, #dashboard .tkey { font-size: .9375rem; color: var(--text-2); }

/* R5-C01 (G, X): on a phone the top bar never changes shape. The logo row (48 px) and the children's row under it
   (46 px: 36 px chips, each a 46 px target) stay pinned at the top while the page scrolls, in the same place on every
   page; the Back link has its own row under them. No folded "Sam ▾" pill. */
@media (max-width: 759px) {
  #dashboard.has-chips .topbar { position: sticky; top: 0; z-index: 6; padding-top: env(safe-area-inset-top, 0px); }
  #dashboard.has-chips .topbar-inner { height: 48px; min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
  #dashboard.has-chips .kid-tabs { height: 46px; padding: 0 16px; align-items: center; }
  #dashboard.has-chips .kid-tab { position: relative; height: 36px; min-height: 36px; padding: 2px 12px 2px 3px; font-size: .9375rem; }
  #dashboard.has-chips .kid-tab::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
  #dashboard.has-chips .kid-tab .kid-av { width: 30px; height: 30px; }
  #dashboard.has-chips .page-back { top: var(--topbar-h, 92px); }
  #requests, #read-help { scroll-margin-top: 150px; }
}

/* R4-C22 (P): on the answer key the Back row stays on screen on a wide screen too; "Back to top" after each section */
@media (min-width: 760px) {
  .page-back.is-key { position: sticky; top: var(--topbar-h, 58px); z-index: 4; background: var(--bg); padding: 4px 0; }
}
.ak-to-top-row { margin: 8px 0 0; }
.ak-to-top { min-height: 44px; }
@media print { .ak-to-top-row { display: none !important; } }

/* ---------- UX round 5 (2026-11-09), Lane C: parent pages and navigation ---------- */
/* R5-C19 (X): on Classes the class header is one row (a link) and each topic is a plain row under it (a link): no card
   inside the card, one chevron per row */
.class-topics .ct-name-h { margin: 0; font-size: inherit; }
.class-topics a.ct-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 6px 8px; margin: 0 -8px; border-radius: 12px; color: var(--text); text-decoration: none; }
.class-topics a.ct-head:hover { background: var(--cl-sky-light); }
.class-topics a.ct-head:hover .ct-name { text-decoration: underline; }
.class-topics a.ct-head .ct-name { display: inline; min-height: 0; color: var(--accent); font: 700 1.15rem/1.3 var(--cl-font-head); }
.class-topics a.ct-head > .chev { color: var(--accent); font-size: 1.5rem; line-height: 1; }
.class-topics .ct-list { display: block; border: 0; border-radius: 0; gap: 0; }
.class-topics .ct-list > li { border-top: 1px solid var(--border); }
.class-topics .ct-topic { padding: .6rem 8px; margin: 0 -8px; border-radius: 10px; }
.class-topics .ct-topic:hover { background: var(--cl-sky-light); }
.class-topics .ct-grade { font-size: .9375rem; color: var(--text); }
.classes-head, .class-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.attention-line { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 var(--gap, 16px); padding: 10px 14px;
  border-radius: 12px; background: var(--cl-sky-light); color: var(--text); font-weight: 650; }
.attention-line a { color: var(--accent); }
.attention-tag { justify-self: start; padding: 1px 10px; border-radius: 999px; background: var(--cl-sky-light); color: var(--accent);
  font: 700 .875rem/1.5 var(--cl-font-body); }
.ct-item.is-attention .ct-title { color: var(--accent); }
/* R5-C14 (P): an empty "To practice" column is not drawn; a label's reason sits under it; Recent answers is its own row */
#sections-fold.no-practice-col .concept { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.4fr); }
#sections-fold.no-practice-col .concept-head > span:last-child, #sections-fold.no-practice-col .concept-stats { display: none; }
.pill-cell .sec-why { display: block; margin-top: 2px; color: var(--text-2); }
.recent-group + .recent-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.recent-sec { margin: 0 0 4px; font-size: 1rem; }
/* R5-C05 (X): the estimated grade is one quiet line after the sections, not a highlighted box */
.topic-grade { margin: var(--gap, 16px) 4px 0; display: grid; gap: 4px; }
.topic-grade .tgrade-quiet { margin: 0; color: var(--text-2); font-size: .9375rem; }
.topic-grade .real-grade { margin: 0; }
.ta-next { margin: 0; font-weight: 600; }
/* R5-C18 (G): the answer key is a row at the page's foot */
.ak-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  margin-top: var(--gap, 16px); padding: 0 var(--card-pad, 16px); border-radius: var(--radius, 16px); background: var(--surface);
  box-shadow: var(--shadow); color: var(--accent); font: 700 1rem/1.3 var(--cl-font-head); text-decoration: none; }
.ak-foot-row:hover { background: var(--cl-sky-light); }
.ak-foot-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ak-foot-row > .chev { font-size: 1.5rem; line-height: 1; }
/* R5-C03 (G): on a phone the classes come right after the week card (Tonight after them), so the row to every topic
   and grade is on the first or second screen for every child */
@media (max-width: 759px) {
  .ov-grid > .ov-classes { order: -1; }
}