/* Layout: one narrow reading column on graph-paper ground; the day sections are the print pages. */
:root {
  --bg: #f3f6f9; --surface: #ffffff; --fg: #17202b; --muted: #55626f;
  --rule: #d3dbe4; --grid: #e4eaf0;
  --accent: #1d4ed8; --accent-fg: #ffffff; --accent-soft: #e3ebfd;
  --mark: #b4390c; --mark-soft: #fbe9e0;
  --ok: #17703b; --ok-soft: #dcf3e4; --warn: #8a5a00; --warn-soft: #fdf0cf;
  --bad: #b3261e; --bad-soft: #fbe3e0; --idle: #55626f; --idle-soft: #e8edf2;
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11171e; --surface: #19212a; --fg: #e6ecf2; --muted: #9aa8b6;
    --rule: #2c3743; --grid: #1c2530;
    --accent: #7ba2ff; --accent-fg: #0b1220; --accent-soft: #1f2d4d;
    --mark: #ff9a6b; --mark-soft: #3a2218;
    --ok: #6fd69a; --ok-soft: #173a27; --warn: #f0c35a; --warn-soft: #3b2f10;
    --bad: #ff8f86; --bad-soft: #451d1a; --idle: #9aa8b6; --idle-soft: #232d38;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11171e; --surface: #19212a; --fg: #e6ecf2; --muted: #9aa8b6;
  --rule: #2c3743; --grid: #1c2530;
  --accent: #7ba2ff; --accent-fg: #0b1220; --accent-soft: #1f2d4d;
  --mark: #ff9a6b; --mark-soft: #3a2218;
  --ok: #6fd69a; --ok-soft: #173a27; --warn: #f0c35a; --warn-soft: #3b2f10;
  --bad: #ff8f86; --bad-soft: #451d1a; --idle: #9aa8b6; --idle-soft: #232d38;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.55 var(--font-body);
  margin: 0; padding-inline: 1rem; padding-block: 0 3rem; overflow-wrap: anywhere;
  --view: var(--accent); --view-soft: var(--accent-soft); }
body[data-view="tutor"] { --view: var(--mark); --view-soft: var(--mark-soft); }
.wrap { max-width: 46rem; margin-inline: auto; min-width: 0; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; text-wrap: balance; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.topbar { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 1.25rem 1.25rem; margin-inline: -1rem; padding: 1rem; border-bottom: 1px solid var(--rule); }
.nav { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; font-size: .9375rem; }
.nav a { text-decoration: none; padding: .25rem .625rem; border: 1px solid var(--rule); border-radius: .375rem;
  background: var(--surface); color: var(--fg); font-variant-numeric: tabular-nums; }
.nav a[aria-current="page"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.nav .label { color: var(--muted); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; margin-left: .5rem; }
.pagehead h1 { font-size: 1.875rem; margin: 1.5rem 0 .25rem; }
.pagehead p { margin: 0; color: var(--muted); }

.tabs { display: flex; gap: .5rem; margin: 1.25rem 0 .5rem; }
.tabs button { flex: 1 1 0; font: 700 1rem var(--font-body); padding: .75rem .5rem; cursor: pointer;
  border: 2px solid var(--rule); background: var(--surface); color: var(--fg); border-radius: .5rem; min-height: 2.75rem; }
.tabs button[aria-selected="true"] { border-color: var(--view); background: var(--view-soft); box-shadow: inset 0 -4px 0 var(--view); }
.hint { color: var(--muted); font-size: .875rem; margin: 0 0 1rem; }

.view { display: none; }
body[data-view="pupil"] #view-pupil, body[data-view="tutor"] #view-tutor { display: block; }
.view h1 { font-size: 1.375rem; color: var(--view); margin: 1rem 0 .5rem; }
.view h2 { font-size: 1.375rem; margin: 2.5rem 0 .75rem; padding-top: 1rem; border-top: 3px solid var(--view); }
.view h3 { font-size: 1.125rem; margin: 1.5rem 0 .25rem; color: var(--view); }
.view h4 { font-size: 1rem; margin: 1rem 0 .25rem; }
.view p { margin: .5rem 0; max-width: 65ch; }
.view ul, .view ol { padding-left: 1.5rem; margin: .5rem 0; max-width: 65ch; }
.view li { margin: .25rem 0; }
.view hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }
.view blockquote { margin: .75rem 0; padding: .25rem 1rem; border-left: 4px solid var(--view); background: var(--view-soft); }
.view code, .view pre { font-family: var(--font-mono); font-size: .9em; background: var(--idle-soft); border-radius: .25rem; }
.view code { padding: .05rem .3rem; }
.view pre { padding: .75rem; overflow-x: auto; }
.view figure.diagram { margin: .75rem 0; }
.view ol.cols, .view ul.cols { columns: 2; column-gap: 2rem; }
.view ol.cols li, .view ul.cols li { break-inside: avoid; }
.view figure.diagram svg { display: block; width: 100%; max-width: 22rem; height: auto; color: var(--fg); }
.view pre code { background: none; padding: 0; }
.view .log { font-family: var(--font-mono); font-size: .875rem; background: var(--view-soft); border-left: 4px solid var(--view); padding: .5rem .75rem; border-radius: .25rem; max-width: none; }
.codes { font-family: var(--font-mono); font-size: .8125rem; font-weight: 600; background: var(--view-soft); color: var(--fg);
  padding: .1rem .45rem; border-radius: .25rem; white-space: nowrap; margin-left: .5rem; vertical-align: .1em; }
.tablewrap { overflow-x: auto; max-width: 100%; margin: .75rem 0; }
table { border-collapse: collapse; font-size: .9375rem; }
th, td { border: 1px solid var(--rule); padding: .375rem .625rem; text-align: left; vertical-align: top; }
th { background: var(--idle-soft); font-weight: 700; }
.space { height: 5.7rem; margin: .5rem 0 1rem; border-radius: .25rem; border: 1px dashed var(--rule);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.9rem - 1px), var(--rule) calc(1.9rem - 1px), var(--rule) 1.9rem);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.space.big { height: 11.4rem; }

.section { margin-top: 2.25rem; }
.section > h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
.weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; padding: 0; margin: 0; list-style: none; }
.weeks li { min-width: 0; }
.weeks a, .weeks .soon { display: block; padding: .625rem .75rem; border: 1px solid var(--rule); border-radius: .5rem; background: var(--surface); text-decoration: none; color: var(--fg); height: 100%; }
.weeks .soon { color: var(--muted); background: transparent; border-style: dashed; }
.weeks strong { display: block; font-family: var(--font-display); }
.weeks small { color: var(--muted); font-size: .8125rem; }
.weeks .is-now { border: 2px solid var(--accent); background: var(--accent-soft); }
.steps { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem; padding: .5rem .75rem; background: var(--surface); border: 1px solid var(--rule); border-radius: .5rem; min-width: 0; }
.steps b { font-family: var(--font-mono); font-size: .875rem; font-weight: 600; color: var(--accent); }
.chip { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .5rem; border-radius: 99rem; white-space: nowrap; }
.chip.secure { background: var(--ok-soft); color: var(--ok); }
.chip.shaky { background: var(--warn-soft); color: var(--warn); }
.chip.notyet, .chip.stuck { background: var(--bad-soft); color: var(--bad); }
.chip.untested { background: var(--idle-soft); color: var(--idle); }
.counts { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.counts li { display: flex; gap: .5rem; align-items: center; }
details.week { border: 1px solid var(--rule); border-radius: .5rem; background: var(--surface); margin: .5rem 0; min-width: 0; }
details.week > summary { cursor: pointer; padding: .625rem .75rem; font-weight: 700; }
details.week.is-now { border: 2px solid var(--accent); }
details.week .tablewrap { margin: 0 .5rem .5rem; }
.phase { font-size: 1rem; margin: 1.5rem 0 .25rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.pager { display: flex; justify-content: space-between; gap: .5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.pager a { padding: .5rem .875rem; border: 1px solid var(--rule); border-radius: .5rem; background: var(--surface); text-decoration: none; }
.muted { color: var(--muted); }

@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --bg: #fff; --surface: #fff; --fg: #000; --muted: #000; --rule: #999; --grid: #fff;
    --accent: #000; --accent-fg: #fff; --accent-soft: #fff; --mark: #000; --mark-soft: #fff;
    --idle-soft: #fff; color-scheme: light;
  }
  body, body[data-view="tutor"] { --view: #000; --view-soft: #fff; background: #fff; color: #000; font-size: 11.5pt; padding: 0; }
  .topbar, .tabs, .hint, .pager { display: none !important; }
  .wrap { max-width: none; }
  .view h2 { break-before: page; page-break-before: always; border-top: 2px solid #000; margin-top: 0; }
  .view h2:first-of-type { break-before: auto; page-break-before: auto; }
  .view h1 { color: #000; }
  .view .log, .view blockquote, .codes { background: #fff; border-color: #000; }
  .view .log { border: 1px solid #000; }
  .codes { border: 1px solid #000; }
  .space { border-color: #999; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.9rem - 1px), #bbb calc(1.9rem - 1px), #bbb 1.9rem); }
  .view h3, .view p, .view li, .tablewrap { break-inside: avoid; }
  .tablewrap { overflow: visible; }
  .space { height: 3.8rem; }
  .qgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
  .qgrid .q { break-inside: avoid; }
  .space.big { height: 7.6rem; }
  .view ol.cols, .view ul.cols { columns: 3; }
  .view figure.diagram svg { max-width: 9cm; }
  a { color: #000; text-decoration: none; }
}

main#view-pupil { display: block; }
.app-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem;
  padding-block: 1.25rem .5rem; }
.app-head h1 { margin: 0; }
.app-head p { margin: 0; color: var(--muted); }
.picker { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .5rem; }
.picker button { font: 600 .9rem/1.2 var(--font-body); border: 1px solid var(--rule); background: var(--surface);
  color: var(--fg); border-radius: .5rem; padding: .45rem .7rem; cursor: pointer; min-width: 3.2rem; }
.picker button small { display: block; font-weight: 400; color: var(--muted); font-size: .72rem; }
.picker button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.picker button[aria-pressed="true"] small { color: var(--accent-fg); }
.picker button.is-today { box-shadow: inset 0 -3px 0 var(--mark); }
.picker button .done { display: inline-block; margin-left: .25rem; }
.day[hidden] { display: none; }
.day h2 { font: 700 1.35rem/1.25 var(--font-display); text-wrap: balance; margin: 1rem 0 .5rem; }
.day h3 { font: 700 1.05rem/1.3 var(--font-display); margin: 1.6rem 0 .4rem; padding-top: .6rem; border-top: 1px solid var(--rule); }
.day .space { display: none; }
.ans { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .4rem 0 1.1rem;
  padding: .6rem .75rem; border: 1px solid var(--rule); border-radius: .6rem; background: var(--surface); }
.ans .row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.ans .part { font-size: .85rem; color: var(--muted); }
.ans input, .ans textarea { font: 400 1.05rem/1.3 var(--font-mono); color: var(--fg); background: var(--bg);
  border: 1.5px solid var(--rule); border-radius: .45rem; padding: .4rem .55rem; width: 9.5rem; max-width: 100%; }
.ans textarea { width: 100%; font-family: var(--font-body); }
.ans.open { display: block; }
.ans.open .lbl { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.ans input:focus-visible, .ans textarea:focus-visible, .picker button:focus-visible, .check:focus-visible,
.bar button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ans.inline { display: inline-flex; margin: 0 .2rem; padding: 0; border: 0; background: none; gap: .25rem; vertical-align: middle; }
.ans.inline input { width: 4.6rem; padding: .2rem .4rem; }
li .ans.inline { margin-block: .15rem; }
.check { font: 600 .95rem/1 var(--font-body); background: var(--accent); color: var(--accent-fg); border: 0;
  border-radius: .45rem; padding: .55rem .9rem; cursor: pointer; }
.mark { font-weight: 700; min-width: 1.2rem; }
.is-right input { border-color: var(--ok); background: var(--ok-soft); }
.is-wrong input { border-color: var(--bad); background: var(--bad-soft); }
.is-right .mark { color: var(--ok); }
.is-wrong .mark { color: var(--bad); }
.view ol.cols { columns: 2; column-gap: 1.5rem; }
@media (min-width: 40rem) { .view ol.cols { columns: 3; } }
.bar { position: sticky; bottom: 0; z-index: 2; margin-inline: -1rem; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem; }
.bar .score { font: 700 1rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.bar .score small { display: block; font: 400 .8rem/1.3 var(--font-body); color: var(--muted); }
.bar .btns { display: flex; gap: .4rem; flex-wrap: wrap; }
.bar button { font: 600 .9rem/1 var(--font-body); border-radius: .45rem; padding: .55rem .8rem; cursor: pointer;
  border: 1px solid var(--rule); background: var(--bg); color: var(--fg); }
.bar button.primary { background: var(--mark); border-color: var(--mark); color: var(--accent-fg); }
.results { border: 1px solid var(--mark); background: var(--mark-soft); border-radius: .6rem; padding: .75rem; margin: 1rem 0; }
.results[hidden] { display: none; }
.results pre { white-space: pre-wrap; font: 400 .9rem/1.45 var(--font-mono); margin: .4rem 0; user-select: all; }
.results p { margin: .2rem 0; font-size: .9rem; }
.note { color: var(--muted); font-size: .9rem; }

/* ---- app additions ---- */
.wrap.narrow { max-width: 32rem; padding-block: 2rem; }
.session h2 { font: 700 1.35rem/1.25 var(--font-display); text-wrap: balance; margin: 1rem 0 .5rem; }
.session h3 { font: 700 1.05rem/1.3 var(--font-display); margin: 1.6rem 0 .4rem; padding-top: .6rem; border-top: 1px solid var(--rule); }
.session .space { display: none; }
.session ol.cols { columns: 2; column-gap: 1.5rem; }
@media (min-width: 40rem) { .session ol.cols { columns: 3; } }
.picker button .n { font-variant-numeric: tabular-nums; }
.is-teacher .mark { text-decoration: underline dotted; }
.saving input { opacity: .7; }
.bar .note { margin: 0; }
.err { color: var(--bad); }

/* teacher dashboard */
.dash { max-width: 72rem; margin-inline: auto; padding-block: 1rem 3rem; }
.dash h1 { font: 700 1.6rem/1.2 var(--font-display); margin: .5rem 0; }
.dash h2 { font: 700 1.15rem/1.25 var(--font-display); margin: 1.25rem 0 .5rem; }
.dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }
.cardrow { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.card { border: 1px solid var(--rule); background: var(--surface); border-radius: .6rem; padding: .75rem; min-width: 0; }
.card h3 { margin: 0 0 .4rem; font: 700 1.05rem/1.2 var(--font-display); }
.linkbox { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.linkbox code { font: 400 .8rem/1.3 var(--font-mono); background: var(--bg); border: 1px solid var(--rule); border-radius: .35rem;
  padding: .3rem .45rem; overflow-wrap: anywhere; flex: 1 1 12rem; min-width: 0; user-select: all; }
.btn { font: 600 .9rem/1 var(--font-body); border-radius: .45rem; padding: .5rem .75rem; cursor: pointer;
  border: 1px solid var(--rule); background: var(--bg); color: var(--fg); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.small { padding: .3rem .5rem; font-size: .8rem; }
.btn:focus-visible, .chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { font: 600 .8rem/1.2 var(--font-body); border: 1px solid var(--rule); background: var(--bg); color: var(--fg);
  border-radius: .4rem; padding: .3rem .45rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.chip small { display: block; font-weight: 400; color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.chip[aria-pressed="true"] small { color: var(--accent-fg); }
.weekrow { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: .3rem 0; }
.weekrow > span { font-size: .8rem; color: var(--muted); min-width: 3.5rem; }
.sesslist { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }
.sesslist button { font: 600 .85rem/1.2 var(--font-body); border: 1px solid var(--rule); background: var(--bg); color: var(--fg);
  border-radius: .4rem; padding: .35rem .55rem; cursor: pointer; }
.sesslist button[aria-pressed="true"] { border-color: var(--mark); box-shadow: inset 0 -3px 0 var(--mark); }
.live { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .live { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: .6rem; background: var(--surface); }
table.ans-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.ans-table th, .ans-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ans-table th { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ans-table td.v { font-family: var(--font-mono); overflow-wrap: anywhere; }
.ans-table td.v small { display: block; color: var(--muted); font-size: .75rem; }
.ans-table tr.sec td { background: var(--bg); font-weight: 700; font-size: .8rem; color: var(--muted); }
.ok { color: var(--ok); font-weight: 700; }
.no { color: var(--bad); font-weight: 700; }
.wait { color: var(--muted); }
.summary { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; margin: .25rem 0 .6rem; }
.summary strong { font: 700 1.3rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.guide { border: 1px solid var(--rule); background: var(--surface); border-radius: .6rem; padding: 0 .9rem .9rem; min-width: 0; }
.guide > summary { cursor: pointer; padding: .7rem 0; font-weight: 700; }
.guide .space { display: none; }
.guide h2 { font-size: 1.1rem; }
.guide h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.guide table { border-collapse: collapse; font-size: .85rem; display: block; overflow-x: auto; }
.guide td, .guide th { border: 1px solid var(--rule); padding: .25rem .4rem; }
.guide .ans { display: none; }
form.inline { display: flex; gap: .4rem; flex-wrap: wrap; }
form.inline input { font: 400 1rem var(--font-body); padding: .45rem .6rem; border: 1px solid var(--rule); border-radius: .45rem;
  background: var(--bg); color: var(--fg); min-width: 0; }
.muted { color: var(--muted); }