/* Theme: follows the device unless the student picks Light or Dark (header control, saved in this browser).
   The choice sets data-theme on <html> (see base.html); no attribute means "Auto". */
:root { color-scheme: light dark; --bg:#fff; --fg:#1d2330; --muted:#5b6475; --card:#f3f5f9; --accent:#2b5fd9; --ok:#1a7f45; --bad:#b3261e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#12151c; --fg:#e8ebf2; --muted:#9aa3b5; --card:#1c212c; --accent:#7aa2ff; --ok:#5fd08d; --bad:#ff8a80; }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; --bg:#12151c; --fg:#e8ebf2; --muted:#9aa3b5; --card:#1c212c; --accent:#7aa2ff; --ok:#5fd08d; --bad:#ff8a80; }
/* Preference: hide the seen-so-far counters (header checkbox, saved in this browser). */
.theme, .textsize { font-size:.85rem; color:var(--muted); display:inline-flex; align-items:center; gap:.4rem; }
.theme select, .textsize select { font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--muted); border-radius:.3rem; padding:.1rem .3rem; }
/* Text size: the header control sets data-textsize on <html>; everything is sized in rem, so it all scales. */
html { font-size:100%; }
html[data-textsize="large"] { font-size:118%; }
html[data-textsize="xlarge"] { font-size:137%; }
body { margin:0; background:var(--bg); color:var(--fg); font:1rem/1.6 system-ui,sans-serif; }
header { padding:1rem 1.25rem; border-bottom:1px solid var(--card); }
header { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between; }
header a { color:var(--fg); font-weight:700; text-decoration:none; }
nav { display:flex; flex-wrap:wrap; gap:.25rem 1rem; align-items:center; font-size:.9rem; }
nav a { font-weight:400; color:var(--accent); }
button.link { background:none; color:var(--accent); padding:0; text-decoration:underline; font-size:.9rem; }
code { word-break:break-all; }
main { max-width:46rem; margin:0 auto; padding:1.25rem; }
a { color:var(--accent); }
.cards { display:grid; gap:1rem; }
.cards h2.group { margin:1rem 0 0; padding-bottom:.25rem; border-bottom:1px solid currentColor; opacity:.8; }
.card { background:var(--card); padding:1rem 1.25rem; border-radius:.6rem; }
/* Home page: every subject card has the same shape: name, size line, then the main topics as pill labels. */
.subject-card { text-decoration:none; border:1px solid transparent; }
.subject-card:hover, .subject-card:focus-visible { border-color:var(--accent); }
.subject-card h2 { margin:0 0 .15rem; }
.subject-card p { margin:0; }
ul.chips { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem .5rem; padding:0; margin:.75rem 0 0; }
ul.chips li { background:var(--bg); color:var(--fg); border:1px solid var(--muted); border-radius:999px; padding:.1rem .75rem; font-size:.85rem; line-height:1.5; }
/* A subject page lists its main topics as collapsed sections; opening one shows its topics. */
details.group-block { margin:.75rem 0 0; border-bottom:1px solid var(--muted); }
details.group-block > summary { cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem 1rem; padding:.6rem .25rem; }
details.group-block > summary::-webkit-details-marker { display:none; }
details.group-block > summary::before { content:"\25B8"; display:inline-block; width:1.1rem; }
details.group-block[open] > summary::before { content:"\25BE"; }
details.group-block > summary h2.group { margin:0; font-size:1.2rem; }
details.group-block > .cards { padding:.25rem 0 1.25rem; }
.muted { color:var(--muted); }
table { border-collapse:collapse; } td,th { border:1px solid var(--muted); padding:.3rem .6rem; }
fieldset { border:0; background:var(--card); border-radius:.6rem; margin:0 0 1rem; padding:1rem 1.25rem; min-width:0; }
/* A <legend> normally sits on the top border of its fieldset, so long question text straddled the
   edge of the box. Floating it to full width makes it ordinary content inside the padding. */
legend { float:left; width:100%; padding:0; margin:0 0 .75rem; font-weight:600; }
legend + * { clear:both; }
/* Question sketches: black on white (or white on dark) line drawings, always labelled "not to scale". */
figure.figure { margin:0 0 .75rem; }
figure.figure svg { display:block; width:100%; max-width:20rem; height:auto; background:var(--bg); border:1px solid var(--muted); border-radius:.4rem; color:var(--fg); }
pre.code { margin:.4rem 0 .75rem; padding:.6rem .8rem; overflow-x:auto; font-size:.9rem; line-height:1.4; background:var(--bg); color:var(--fg); border:1px solid var(--muted); border-left-width:4px; border-radius:.3rem; }
figure.figure svg.figure-svg-scatter { max-width:28rem; }
figure.figure svg text.halo { paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; }
figure.figure figcaption { font-size:.8rem; color:var(--muted); }
/* "Which row" questions: the options as an exam-style table with a radio button on each row. */
table.rowgrid { width:100%; margin:.25rem 0 .5rem; }
table.rowgrid th { background:var(--bg); font-weight:600; text-align:left; }
table.rowgrid td:first-child, table.rowgrid th:first-child { width:2.5rem; text-align:center; }
table.rowgrid.answer td:first-child, table.rowgrid.answer th:first-child { width:auto; text-align:left; }
table.rowgrid label { cursor:pointer; padding:.1rem 0; }
.rowgrid-wrap { overflow-x:auto; }
@media (max-width:480px) {
  table.rowgrid { font-size:.92rem; }
  table.rowgrid td, table.rowgrid th { padding:.3rem .35rem; }
  table.rowgrid td:first-child, table.rowgrid th:first-child { width:1.8rem; padding-left:.15rem; padding-right:.15rem; }
  table.rowgrid.answer td:first-child, table.rowgrid.answer th:first-child { width:auto; padding-left:.35rem; padding-right:.35rem; }
}
table.rowgrid tbody tr:has(input:checked) { background:var(--bg); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
label { display:block; } input[type=number] { padding:.3rem; width:9rem; }
button { background:var(--accent); color:#fff; border:0; padding:.6rem 1.2rem; border-radius:.4rem; font-size:1rem; cursor:pointer; }
.seen { margin:.4rem 0 0; font-size:.9rem; }
label.skip { margin-top:.6rem; color:var(--muted); font-size:.9rem; }
fieldset:has(.skip input:checked) { opacity:.5; }
.ok { color:var(--ok); } .bad { color:var(--bad); }
/* Maths formulae list: a bar that stays at the top of the screen and opens to the exam's formulae. */
details.formulae { position:sticky; top:0; z-index:5; margin:0 0 1rem; background:var(--card); border:1px solid var(--muted); border-radius:.6rem; }
details.formulae > summary { cursor:pointer; padding:.7rem 1rem; font-weight:600; }
details.formulae[open] > summary { border-bottom:1px solid var(--muted); }
details.formulae dl { margin:0; padding:.25rem 1rem .75rem; max-height:60vh; overflow-y:auto; }
details.formulae dl > div { padding:.5rem 0; border-bottom:1px solid var(--bg); }
details.formulae dl > div:last-child { border-bottom:0; }
details.formulae dt { font-size:.85rem; color:var(--muted); }
details.formulae dd { margin:.15rem 0 0; font-size:1.1rem; line-height:2.2; overflow-x:auto; white-space:nowrap; }
details.formulae .frac { display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; line-height:1.3; margin:0 .15rem; }
details.formulae .frac > span { padding:0 .25rem; }
details.formulae .frac > span:first-child { border-bottom:1px solid currentColor; }
details.formulae .rad { display:inline-block; vertical-align:middle; border-top:1px solid currentColor; padding:.1rem .15rem 0; margin-left:1rem; line-height:1.3; }
details.formulae .rad::before { content:"\221A"; display:inline-block; margin-left:-1rem; width:1rem; }
details.formulae .or { color:var(--muted); font-size:.9rem; margin:0 .4rem; }
@media (min-width:48rem) { details.formulae dl { display:grid; grid-template-columns:1fr 1fr; column-gap:2rem; max-height:70vh; } }
details.formulae .rad.tall::before { font-size:2.2em; line-height:.8; vertical-align:middle; margin-left:-1.4rem; width:1.4rem; }
details.formulae .rad.tall { margin-left:1.4rem; }
/* Physics relationships sheet: each group lists its relationships side by side, wrapping on a narrow screen. */
details.formulae dd .eq { display:inline-block; margin:0 1.4rem 0 0; white-space:nowrap; }
details.formulae dd:has(.eq) { white-space:normal; overflow-x:visible; }
details.formulae .bar i { text-decoration:overline; font-style:italic; }
/* Physics sheets: the relationships sheet and data sheet laid out as printed (two columns). */
details.formulae .scroll { padding:.25rem 1rem .75rem; max-height:65vh; overflow-y:auto; }
details.formulae .sheet h3 { margin:.8rem 0 .3rem; font-size:1.05rem; }
details.formulae .sheet h4 { margin:1rem 0 .2rem; font-size:1rem; }
details.formulae .sheet h5 { margin:.6rem 0 0; font-size:1.05rem; font-style:normal; font-weight:700; }
details.formulae .sheet .cols > div > p { margin:0; line-height:2.3; font-size:1.1rem; }
@media (min-width:40rem) { details.formulae .sheet .cols { display:grid; grid-template-columns:1fr 1fr; column-gap:2rem; align-items:start; } }
details.formulae table.ds { width:100%; border-collapse:collapse; margin:0 0 1rem; font-size:.9rem; }
details.formulae table.ds caption { text-align:left; font-style:italic; padding:.3rem 0; }
details.formulae table.ds th, details.formulae table.ds td { border:1px solid var(--muted); padding:.15rem .5rem; }
details.formulae table.ds th { font-weight:600; text-align:center; }
details.formulae table.ds td.num { text-align:right; white-space:nowrap; }
/* Electron arrangements of elements: the periodic table as printed (turned landscape), scrolls sideways on a phone. */
details.formulae .pt-wrap { overflow-x:auto; padding-bottom:.4rem; }
details.formulae table.pt { border-collapse:collapse; table-layout:fixed; min-width:62rem; width:100%; margin:0 0 .8rem; font-size:.7rem; }
details.formulae table.pt caption { text-align:left; font-weight:700; font-size:.95rem; padding:.3rem 0; }
details.formulae table.pt caption.sr { position:absolute; left:-9999px; }
details.formulae table.pt th { font-weight:600; font-size:.7rem; padding:.1rem 0; text-align:center; }
details.formulae table.pt th.gn { font-weight:400; color:var(--muted); }
details.formulae table.pt td { border:1px solid var(--muted); padding:.15rem .1rem; text-align:center; vertical-align:middle; line-height:1.25; }
details.formulae table.pt td:empty { border:0; }
details.formulae table.pt td > span, details.formulae table.pt td > b { display:block; }
details.formulae table.pt .pn { font-size:.7rem; }
details.formulae table.pt .ps { font-size:1rem; }
details.formulae table.pt .pa { font-size:.65rem; }
details.formulae table.pt .pe { font-size:.6rem; color:var(--muted); }
details.formulae table.pt td.key { text-align:center; font-size:.7rem; }
details.formulae table.pt td.key > b:first-child { font-size:.85rem; }
details.formulae table.pt td.trlabel { border:0; font-weight:700; font-size:.8rem; vertical-align:bottom; }
details.formulae table.pt-f { table-layout:fixed; }
/* Question text may contain line breaks (statements I, II and III each on their own line). */
legend, strong.qtext { white-space:pre-line; }
/* "Marking your answer" message with a spinner, shown while the AI marks a written answer (written.html). */
.marking-note { display:flex; align-items:center; gap:.75rem; margin-top:1rem; }
.marking-note[hidden] { display:none; }
.spinner { flex:none; width:1.4rem; height:1.4rem; border:3px solid var(--muted); border-top-color:var(--accent); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration:3s; } }

/* My progress page */
.subjecttabs { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
.subjecttabs a { padding:.3rem .9rem; border:1px solid var(--muted); border-radius:999px; text-decoration:none; color:var(--fg); }
.subjecttabs a[aria-current="page"] { background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:600; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(8.5rem, 1fr)); gap:.75rem; margin:1rem 0 .5rem; }
.stats .card { display:flex; flex-direction:column; gap:.1rem; }
.stats strong { font-size:1.8rem; line-height:1.1; }
ol.daychart { list-style:none; display:flex; gap:2px; padding:0; margin:.5rem 0 1rem; height:7.5rem; align-items:stretch; }
ol.daychart li { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; }
ol.daychart .col { flex:1; width:100%; display:flex; align-items:flex-end; }
ol.daychart .col span { display:block; width:100%; background:var(--accent); border-radius:2px 2px 0 0; min-height:0; }
ol.daychart .col span.none { height:2px !important; background:var(--muted); opacity:.4; }
ol.daychart small { height:1.1rem; font-size:.65rem; color:var(--muted); white-space:nowrap; overflow:visible; }
.focus { display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:.75rem; }
.focus ul { margin:.25rem 0 0; padding-left:1.1rem; }
table.topicprogress { width:100%; margin-bottom:1rem; }
table.topicprogress th { text-align:left; }
.pbar { display:inline-block; width:7rem; max-width:100%; height:.6rem; border:1px solid var(--muted); border-radius:999px; overflow:hidden; vertical-align:middle; }
.pbar span { display:block; height:100%; background:var(--accent); }
@media (max-width: 480px) { ol.daychart small { display:none; } }

/* Daily goal and badges */
.card.goal { display:flex; gap:1rem; align-items:center; margin:1rem 0; }
.ring { flex:none; width:5.5rem; height:5.5rem; transform:rotate(-90deg); }
.ring circle { fill:none; stroke-width:3.4; }
.ring .track { stroke:var(--muted); opacity:.3; }
.ring .fill { stroke:var(--accent); stroke-linecap:round; }
.ring .fill.met { stroke:var(--ok); }
.goalform button { margin-right:.3rem; padding:.15rem .7rem; background:var(--bg); color:var(--fg); border:1px solid var(--muted); }
.goalform button.on { background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:600; }
ul.badges { list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(11rem, 1fr)); gap:.6rem; padding:0; margin:.5rem 0; }
.badge { display:flex; flex-direction:column; gap:.15rem; padding:.6rem .8rem; border:1px dashed var(--muted); border-radius:.6rem; opacity:.65; font-size:.9rem; }
.badge.earned { opacity:1; border:2px solid var(--ok); background:var(--card); }

/* Retry mistakes */
.card.retry { display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center; justify-content:space-between; margin:1rem 0; }
.card.retry div { display:flex; flex-direction:column; gap:.15rem; }
a.button { background:var(--accent); color:var(--bg); padding:.5rem 1.1rem; border-radius:.4rem; text-decoration:none; font-weight:600; }
a.button.locked { background:transparent; color:var(--accent); border:2px dashed var(--accent); display:inline-block; }
.locked-note { margin:.5rem 0 1rem; }

/* Mastery levels */
ul.mastery-summary { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem .6rem; padding:0; margin:.25rem 0 .5rem; }
ul.mastery-summary li { padding:.15rem .75rem; }
.lvl { display:inline-block; border:1px solid var(--muted); border-radius:999px; padding:.05rem .65rem; font-size:.85rem; white-space:nowrap; }
.lvl-none { color:var(--muted); border-style:dashed; }
.lvl-learning { border-color:var(--muted); }
.lvl-confident { border-color:var(--accent); color:var(--accent); font-weight:600; }
.lvl-mastered { border-color:var(--ok); background:var(--ok); color:var(--bg); font-weight:600; }