:root {
  --bg: #f4f6f9; --card: #ffffff; --ink: #1c2330; --muted: #5d6b82; --line: #d9dfe8;
  --brand: #1f5fa8; --brand-ink: #ffffff; --accent: #2e8b57; --bad: #c0392b; --flag: #d98e04;
  --sel: #e8f0fb;
}
@media not all {
  :root { --bg: #11151c; --card: #1a202a; --ink: #e6ebf2; --muted: #9aa7bb; --line: #2c3544;
          --brand: #2d6fbd; --sel: #22324a; }
  .qimg { filter: invert(0.92) hue-rotate(180deg); }
  .qwrap { background: #141414; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }

.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 10px 18px;
       background: var(--brand); color: var(--brand-ink); }
.brand { font-weight: 700; letter-spacing: .2px; cursor: pointer; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
.navbtn { background: transparent; border: 0; color: var(--brand-ink); padding: 6px 10px; border-radius: 6px; opacity: .85; }
.navbtn.active, .navbtn:hover { background: rgba(255,255,255,.16); opacity: 1; }
.exam-bar { margin-left: auto; display: flex; gap: 18px; align-items: center; font-variant-numeric: tabular-nums; }
.timer { font-weight: 700; }
.timer.low { color: #ffd166; }

main { max-width: 1060px; margin: 0 auto; padding: 20px 16px 110px; }
h1 { font-size: 22px; margin: 6px 0 14px; }
h2 { font-size: 17px; margin: 22px 0 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mod { text-align: left; background: var(--card); border: 2px solid var(--line); border-radius: 10px; padding: 14px; color: var(--ink); }
.mod.on { border-color: var(--brand); background: var(--sel); }
.mod b { display: block; font-size: 16px; margin-bottom: 4px; }
.mod small { color: var(--muted); }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
label.opt { display: flex; gap: 8px; align-items: center; }
select, input[type=number] { font: inherit; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.go { background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font-weight: 600; }
.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px 14px; }
.muted { color: var(--muted); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--sel); color: var(--ink); font-size: 12px; }

.qwrap { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.qimg { width: 100%; height: auto; display: block; }
.answers { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.ans { min-width: 54px; padding: 10px 0; border-radius: 8px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font-weight: 700; font-size: 16px; }
.ans.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.ans.right { border-color: var(--accent); background: var(--accent); color: #fff; }
.ans.wrong { border-color: var(--bad); background: var(--bad); color: #fff; }
.qmeta { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-bottom: 8px; }

.examfoot { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 6px; padding: 8px 12px;
            background: var(--brand); z-index: 5; }
.footbtn { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 6px; padding: 9px 14px; }
.footbtn.primary { background: #fff; color: var(--brand); font-weight: 700; }
.footbtn.flagged { background: var(--flag); }
.spacer { flex: 1; }

.navgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.navcell { padding: 8px 0; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); position: relative; }
.navcell.done { background: var(--sel); border-color: var(--brand); }
.navcell.cur { outline: 2px solid var(--brand); }
.navcell.fl::after { content: "⚑"; position: absolute; top: -6px; right: -2px; color: var(--flag); font-size: 13px; }
.navcell.right { background: #e3f4ea; border-color: var(--accent); color: #1c5b38; }
.navcell.wrong { background: #fbe7e5; border-color: var(--bad); color: #7d1f16; }
.navcell.skip { background: transparent; border-style: dashed; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
.bigscore { font-size: 40px; font-weight: 800; }
.ok { color: var(--accent); } .bad { color: var(--bad); }
.bars { display: flex; gap: 3px; align-items: flex-end; height: 70px; }
.bars div { flex: 1; background: var(--brand); border-radius: 2px 2px 0 0; min-height: 2px; }
.bars div.slow { background: var(--flag); }
.imgbox { position: relative; }
.hot { position: absolute; border: 2px solid transparent; border-radius: 6px; background: transparent; padding: 0; }
.hot.pick { cursor: pointer; }
.hot.pick:hover { border-color: rgba(31, 95, 168, .5); background: rgba(31, 95, 168, .07); }
.hot.on { border: 3px solid var(--brand); background: rgba(31, 95, 168, .16); }
.hot.right { border: 3px solid var(--accent); background: rgba(46, 139, 87, .18); }
.hot.wrong { border: 3px solid var(--bad); background: rgba(192, 57, 43, .16); }
.picked { margin: 10px 0 4px; }
.why { margin: 2px 0 6px; font-size: 12.5px; }
main.examview { max-width: 1320px; }
.qlayout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.qlayout.noside { grid-template-columns: minmax(0, 1fr) auto; }

.sideopen { margin-top: 26px; }
.sidehead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.linkbtn { background: none; border: 0; color: var(--brand); padding: 0; font-size: 13px; }
.qclock { display: flex; align-items: baseline; gap: 8px; }
.qclock span { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qclock span.over { color: var(--flag); } .qclock span.late { color: var(--bad); }
.qclock small { color: var(--muted); }
.tbar { position: relative; height: 8px; background: var(--line); border-radius: 4px; margin: 8px 0 4px; }
.tbar #tfill { height: 100%; width: 0; background: var(--brand); border-radius: 4px; transition: width .9s linear; }
.tbar i { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--accent); }
.tbar i.src { background: var(--muted); }
.tlegend { display: flex; gap: 12px; color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.tlegend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); margin-right: 4px; }
.tlegend i.src { background: var(--muted); }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.kv span { color: var(--muted); } .kv b { text-align: right; font-weight: 600; }
.dots { color: var(--brand); letter-spacing: 1px; margin-left: 4px; }
 
.sidesec { margin: 12px 0 4px; font-weight: 700; }
.small { font-size: 12px; margin-top: 8px; }
@media (max-width: 900px) { .qlayout, .qlayout.noside { grid-template-columns: 1fr; }  }
@media (max-width: 640px) { .exam-bar #examTitle { display: none; } .footbtn { padding: 8px 9px; font-size: 13px; } }

/* ---------- exam player: the Pearson VUE layout of the real ESAT (colours and sizes measured from UAT-UK's
   sample test). Always light, as in the test centre. ---------- */
body.pvmode > header, body.pvmode > main { display: none; }

/* official ESAT questions, kept as HTML */
.pvhtml { font: 16px/1.35 Arial, Helvetica, sans-serif; color: #000; }
.pvhtml p { margin: 0 0 14px; } .pvhtml img { max-width: 100%; height: auto; vertical-align: middle; }
.pvhtml table { border-collapse: collapse; } .pvhtml td, .pvhtml th { border: 1px solid #888; padding: 3px 8px; }

 

.htmlq { background: #fff; color: #000; padding: 16px; }
.hopt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; margin: 6px 0 0 16px; border-radius: 6px; border: 2px solid transparent; font: 16px Arial, sans-serif; }
.hopt p { margin: 0; } .hopt b { width: 16px; }
.hopt.right { border-color: #2e8b57; background: #e6f4ec; } .hopt.wrong { border-color: #c0392b; background: #fbe9e7; }
.solution { margin-top: 12px; background: #fff; color: #000; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.solution summary { cursor: pointer; font-weight: 700; color: #1f5fa8; margin-bottom: 8px; }

tr.total td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }

/* topic filter */
.topicgroup { margin: 12px 0 4px; }
.topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tchip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; cursor: pointer; font-size: 13.5px; }
.tchip input { margin: 0; } .tchip small { color: var(--muted); }
.tchip.on { border-color: var(--brand); background: var(--sel); }
.tchip.weak b { color: var(--bad); }
/* check as you go */

.pvfeedback { font: 700 16px Arial, sans-serif; padding: 8px 12px; border-radius: 6px; margin-bottom: 14px; }
.pvfeedback.ok { background: #e3f4ea; color: #1c6b3a; } .pvfeedback.bad { background: #fbe7e5; color: #a02a1e; }

/* accounts */
.userbox { margin-left: auto; display: flex; gap: 10px; align-items: center; font-weight: 600; }
.linkbtn.light { color: #fff; opacity: .85; text-decoration: underline; }
.login { max-width: 420px; margin: 40px auto; }
.login .opt { display: grid; gap: 4px; margin: 12px 0; } .login input { font: inherit; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }

/* ---------- front page (tabs) ---------- */
main > h1 { font-size: 26px; margin: 10px 0 18px; }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 0; }
.tabs button { background: none; border: 0; padding: 10px 18px; font-size: 16px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }
.tabbody { border-top-left-radius: 0; border-top-right-radius: 0; padding: 22px; }
.modrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.modrow .mod { padding: 16px; } .modrow .mod b { font-size: 18px; }
.startrow { display: flex; align-items: center; gap: 16px; margin: 18px 0 6px; flex-wrap: wrap; }
.go.big { padding: 12px 34px; font-size: 17px; }
details.more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
details.more summary { cursor: pointer; color: var(--brand); font-weight: 600; }
details.more .row { margin: 8px 0; }
.tip { font-size: 13.5px; margin: 14px 4px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.seg button { background: var(--card); color: var(--ink); border: 0; padding: 9px 18px; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; } .seg button.on { background: var(--brand); color: #fff; }
.tlist { border: 1px solid var(--line); border-radius: 8px; margin: 8px 0 14px; }
.trow, .srow { display: grid; grid-template-columns: 1fr 60px 110px 100px; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.srow { grid-template-columns: 22px 1fr 60px 110px 100px; padding-left: 36px; background: var(--sel); cursor: pointer; }
.trow.on { background: var(--sel); }
.tmain { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.srow input { margin: 0; } .srow .tname { font-size: 14.5px; }
.tcount { color: var(--muted); font-size: 13px; text-align: right; } .trec { font-size: 13px; text-align: right; }
.tlist > :last-child { border-bottom: 0; }
@media (max-width: 640px) { .modrow { grid-template-columns: 1fr; } .trow { grid-template-columns: 1fr 50px 90px; } .trow .dOpen { grid-column: 1 / -1; justify-self: start; } }

.nowrap { white-space: nowrap; } .delbox { margin-left: 8px; font-size: 13px; } .linkbtn.bad { color: var(--bad); font-weight: 700; }

.notice { border-color: var(--flag); } h3 { font-size: 15px; margin: 18px 0 8px; }

/* topic drill list: whole row opens, chevron on the left */
.trow { grid-template-columns: 18px 22px 1fr 60px 110px; }
.trow.can { cursor: pointer; } .trow.can:hover { background: var(--sel); }
.trow .chev { color: var(--brand); font-size: 20px; line-height: 1; text-align: center; }
.trow { grid-template-columns: 22px 22px 1fr 60px 110px; }
.trow input, .srow input { margin: 0; cursor: pointer; }
.srow { grid-template-columns: 22px 1fr 60px 110px; padding-left: 52px; background: transparent; border-left: 3px solid var(--sel); }
.srow:hover, .srow.on { background: var(--sel); }
.subs { background: rgba(127,127,127,.04); }
@media (max-width: 640px) { .trow { grid-template-columns: 16px 22px 1fr 50px; } .trow .trec { display: none; } .srow { grid-template-columns: 22px 1fr 50px; } .srow .trec { display: none; } }

.spec { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; margin-right: 4px; }

/* Clavis questions: inline SVG diagrams (drawn in currentColor) and answer tables */
.cfig { margin: 12px 0; }
.cfig .csvg svg { max-width: 100%; height: auto; }
.cfig figcaption { font-size: 13px; color: #555; margin-top: 4px; }
.ctable { border-collapse: collapse; font-size: 15px; }
.ctable th, .ctable td { border: 1px solid #bbb; padding: 4px 10px; text-align: left; }
.ctable th { background: #f2f4f7; font-weight: 600; }
.pvhtml p{ margin: 0 0 8px; }

.katex { font-size: 1.05em; }

/* ---------- home page: clearer hierarchy and colour (2026-09-29) ---------- */
:root { --bg: #eef2f8; --line: #d5dce8; --brand: #1d4ed8; --sel: #e6eeff;
        --m1: #2563eb; --m1-soft: #e7efff; --m2: #7c3aed; --m2-soft: #f1eaff; --ph: #ea580c; --ph-soft: #fff0e6;
        --tip: #fff7e0; --tip-line: #f0b429; }
@media not all {
  :root { --bg: #0d1424; --card: #151f33; --line: #26324a; --muted: #9fb0cc; --brand: #3b6fe0; --sel: #1d2c4d;
          --m1: #5b8cff; --m1-soft: #1a2a4f; --m2: #a78bfa; --m2-soft: #2a2250; --ph: #fb923c; --ph-soft: #3a2616;
          --tip: #2a2413; --tip-line: #c99a2e; }
}
.bar { background: linear-gradient(90deg, #1e3a8a, #1d4ed8); box-shadow: 0 2px 10px rgba(15, 30, 80, .25); }
.brand { font-size: 17px; letter-spacing: .6px; }

.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin: 8px 0 18px; }
.hero h1 { margin: 0 0 4px; font-size: 28px; }
.hero .sub { margin: 0; font-size: 15px; }
.stats { display: flex; gap: 10px; }
.stats > div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; min-width: 110px; }
.stats b { display: block; font-size: 22px; line-height: 1.1; color: var(--brand); }
.stats small { color: var(--muted); font-size: 12px; }

.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border: 0; margin-bottom: 12px; }
.tabs button { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px;
               color: var(--ink); margin: 0; border-bottom: 1px solid var(--line); }
.tabs button b { display: block; font-size: 16px; }
.tabs button small { color: var(--muted); font-size: 12.5px; }
.tabs button:hover { border-color: var(--brand); }
.tabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 400; }
.tabs button.on small { color: rgba(255, 255, 255, .85); }
.tabbody { border-radius: 14px; padding: 22px 24px; box-shadow: 0 1px 3px rgba(15, 30, 80, .06); }

.step { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin: 4px 0 10px; }
.step .muted { font-weight: 400; font-size: 13px; }
.stepno { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; }
.row + .step, .modrow + .step { margin-top: 20px; }

.modrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mod { --c: var(--brand); --soft: var(--sel); display: flex; align-items: center; gap: 12px; position: relative;
       border: 2px solid var(--line); border-left: 6px solid var(--c); border-radius: 12px; transition: background .12s, border-color .12s; }
.mod:hover { border-color: var(--c); }
.mod.on { background: var(--soft); border-color: var(--c); }
.m-m1 { --c: var(--m1); --soft: var(--m1-soft); }
.m-m2 { --c: var(--m2); --soft: var(--m2-soft); }
.m-ph { --c: var(--ph); --soft: var(--ph-soft); }
.modbadge { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--c); color: #fff;
            font-weight: 800; font-size: 15px; flex: none; }
.modbadge.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; margin-right: 6px; vertical-align: middle; }
.modtick { position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
           font-size: 13px; color: #fff; background: var(--c); opacity: 0; }
.mod.on .modtick { opacity: 1; }
.seg button.m-m1.on, .seg button.m-m2.on, .seg button.m-ph.on { background: var(--c); border-color: var(--c); color: #fff; }
.seg button.on .modbadge.sm { background: rgba(255, 255, 255, .25); }

.go { background: var(--brand); box-shadow: 0 2px 6px rgba(29, 78, 216, .3); }
.go:hover { filter: brightness(1.08); }
.go.big { padding: 13px 38px; font-size: 17px; border-radius: 10px; }
.tip { display: flex; gap: 10px; align-items: flex-start; background: var(--tip); border-left: 4px solid var(--tip-line); border-radius: 8px;
       padding: 10px 14px; color: var(--ink); font-size: 14px; }

@media (max-width: 700px) {
  .tabs, .modrow { grid-template-columns: 1fr; }
  .stats { width: 100%; } .stats > div { flex: 1; min-width: 0; }
  .tabbody { padding: 16px; }
}
.go.m-m1, .go.m-m2, .go.m-ph { background: var(--c); box-shadow: 0 2px 8px color-mix(in srgb, var(--c) 40%, transparent); }

/* ---------- readability pass (2026-09-30): WCAG AA contrast for all text, larger small print ----------
   Text colours get their own tokens (--link, --ok-ink, --bad-ink, --warn-ink), separate from the fill colours
   (--brand, --accent, --bad), because a colour that works as a button fill behind white text is too dark to
   read as text on the dark background. */
:root { --ink: #0f172a; --muted: #475569; --line: #cbd5e1; --link: #1d4ed8;
        --ok-ink: #15803d; --bad-ink: #b91c1c; --warn-ink: #b45309; }
@media not all {
  :root { --bg: #0b1220; --card: #131c2e; --ink: #f1f5f9; --muted: #b8c4d6; --line: #334155;
          --brand: #2f5fd0; --sel: #1e2d4f; --link: #93b4ff;
          --ok-ink: #4ade80; --bad-ink: #f87171; --warn-ink: #fbbf24; --tip: #2b2410; }
  .qimg { filter: none; }                          /* scanned papers read best as paper: white card, no inversion */
  .qwrap { background: #fff; }
  .navcell.right { background: #14532d; color: #dcfce7; } .navcell.wrong { background: #7f1d1d; color: #fee2e2; }
}
body { font-size: 16px; line-height: 1.5; }
a, .linkbtn, details.more summary, .trow .chev, .dots, .stats b { color: var(--link); }
.linkbtn { font-size: 14px; }
.ok { color: var(--ok-ink); } .bad, .linkbtn.bad, .tchip.weak b { color: var(--bad-ink); }
.qclock span.over { color: var(--warn-ink); } .qclock span.late { color: var(--bad-ink); }
.tabs button small, .stats small, .mod small { font-size: 13.5px; }
.spec, .tcount, .trec, .tchip, .qmeta, .tlegend, .small, .why, .delbox { font-size: 14px; }
th { font-size: 14px; color: var(--muted); } .pill { font-size: 13px; padding: 2px 9px; }

.step .muted { font-size: 14px; }
select, input[type=number], .login input { padding: 6px 9px; }
.tabs button.on small { color: #fff; opacity: .9; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* module colours: white text on the light dark-mode shades is too faint, so dark text there; deeper orange in light mode */
@media all { :root { --ph: #c2410c; } }
@media not all {
  .modbadge, .modtick, .go.m-m1, .go.m-m2, .go.m-ph, .seg button.m-m1.on, .seg button.m-m2.on, .seg button.m-ph.on { color: #0b1220; }
  .seg button.on .modbadge.sm { background: rgba(11, 18, 32, .18); }
}

/* flashcards */

.fcard .qwrap { margin-top: 6px; }
.fcrate { margin-top: 4px; }
.go.fcok { background: #15803d; } .go.fcno { background: #b91c1c; }

/* per-module progress bars (Practice module cards, Flashcards) */
.modtext { flex: 1; min-width: 0; }
.modtext small { display: block; }
.modtext .pct { color: var(--ink); }
.pbar { display: block; height: 7px; margin-top: 6px; background: var(--line); border-radius: 4px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--c, var(--brand)); border-radius: 4px; }
.fcprog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 14px; }
.fcmod { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line);
         border-left: 6px solid var(--c); border-radius: 12px; padding: 10px 14px; }
.fcmod .modbadge.sm { width: 32px; height: 32px; font-size: 13px; margin: 0; }
@media (max-width: 700px) { .fcprog { grid-template-columns: 1fr; } }
.prow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.prow .pct { font-size: 15px; }

/* sources grouped by tier (More options) */
.sources { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.srchead { font-weight: 700; margin-bottom: 6px; }
.tier { padding: 6px 0; border-top: 1px solid var(--line); }
.tier:first-of-type { border-top: 0; }
.tierhead { font-size: 15px; }
.tiersrc { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 0 28px; }
#fcSection { margin-top: 28px; }
.fchead { font-size: 22px; margin: 0 0 12px; }

/* Mock page matrix: rows = modules, columns = Mock | Flashcards */
.matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.mhead { font-weight: 800; font-size: 19px; padding: 0 2px; }
.mhead small { display: block; font-weight: 400; font-size: 13.5px; color: var(--muted); }
.mcell { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--card); border: 2px solid var(--line);
         border-left: 6px solid var(--c, var(--brand)); border-radius: 12px; }
.mtop { display: flex; gap: 12px; align-items: center; }
.mact { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mact .go { padding: 9px 18px; }
.go:disabled, .ghost:disabled { opacity: .45; cursor: default; box-shadow: none; }
#fcSection { margin-top: 0; }
.fcbar { display: flex; gap: 10px; align-items: center; margin: 20px 0 8px; font-size: 16px; }
.fcbar .spacer { flex: 1; }

@media (max-width: 760px) { .matrix { grid-template-columns: 1fr; } .mhead:nth-child(2) { display: none; } }
/* Mock settings live under the Mock heading (left column); the rows below stay aligned */
.mheads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: start; margin-bottom: 12px; }

.mockhead details.more { margin-top: 8px; border-top: 0; padding-top: 0; font-size: 15px; font-weight: 400; }
.mockhead .sources { font-size: 14.5px; }

@media (max-width: 760px) { .mheads { grid-template-columns: 1fr; } .mheads .mhead:nth-child(2) { display: none; } }
.pill.kind { margin-left: 8px; font-weight: 700; } .pill.kwrong { background: #7f1d1d; color: #fee2e2; } .pill.kguess { background: #713f12; color: #fef3c7; }
/* flashcard answering */
.fcopt { cursor: pointer; } .fcopt input { margin-top: 4px; }
.fclet { display: inline-flex; gap: 6px; align-items: center; justify-content: center; padding: 8px 14px; cursor: pointer; }
.fcres { margin: 0 0 10px; }
.card.hist table td, .card.hist table th { padding: 6px 8px; }
.quickrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; font-weight: 400; font-size: 14.5px; }
.quickrow .go { padding: 8px 16px; }
/* flashcards cell: one line per pile (Wrong, Slow) */
.pilecell { gap: 10px; }
.pileline { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; }
.pileline .go { width: 100%; }
.pileline .pname { font-size: 15px; }
.pileline .go { padding: 7px 14px; }
.pill.kslow { background: #1e3a8a; color: #dbeafe; }
/* slow cards: live clock, previous times, time chart */
.fctimes { display: flex; gap: 16px; align-items: baseline; margin: 2px 0 10px; font-size: 15px; color: var(--muted); }
.fctimes b { font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; } .fctimes b.late { color: var(--bad-ink); }
.tbars { position: relative; display: flex; gap: 10px; align-items: flex-end; height: 150px; padding: 0 4px 34px; }
.tb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 60px; position: relative; }
.tb span { display: block; width: 28px; background: var(--muted); border-radius: 4px 4px 0 0; opacity: .7; }
.tb.now span { background: var(--link); opacity: 1; } .tb.wrong span { background: var(--bad-ink); }
.tb small { position: absolute; font-size: 12px; white-space: nowrap; } .tb small:nth-of-type(1) { bottom: -18px; } .tb small:nth-of-type(2) { bottom: -34px; }
.tline { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--ok-ink); }
/* three columns: Mock | Wrong | Slow */
.matrix, .mheads { grid-template-columns: 1.3fr 1fr 1fr; }
@media (max-width: 900px) { .matrix, .mheads { grid-template-columns: 1fr; } .mheads .mhead:not(:first-child) { display: none; } }
/* Multi row (Maths 1, Physics, Maths 2 mixed) */
:root { --mx: #0f766e; --mx-soft: #e0f2f1; }
@media not all { :root { --mx: #2dd4bf; --mx-soft: #123a36; } }
.m-mx { --c: var(--mx); --soft: var(--mx-soft); }
.go.m-mx { background: var(--c); box-shadow: 0 2px 8px color-mix(in srgb, var(--c) 40%, transparent); }
@media not all { .go.m-mx { color: #0b1220; } }
#multiPer { padding: 7px 8px; }

/* 2026-09-30: one light theme, sage green background (a London front-door green); the dark-mode blocks above are
   switched off with '@media not all'. */
:root { color-scheme: light; --bg: #dce8dc; --card: #fbfdfb; --line: #bfd0c1; --sel: #e6f0e7; --muted: #46574b; --ink: #13201a; }
body { background: var(--bg); }
.bar { background: linear-gradient(90deg, #2f5d4e, #3f7a66); }

/* 2026-09-30 module colours: Maths 1 pink, Physics yellow, Maths 2 light blue, Multi fluo yellow; light fills get dark text */
:root { --m1: #f472b6; --m1-soft: #fce7f3; --ph: #facc15; --ph-soft: #fef9c3; --m2: #7dd3fc; --m2-soft: #e0f2fe; --mx: #d4ff00; --mx-soft: #f7ffd6; }
.go.m-m1, .go.m-m2, .go.m-ph, .go.m-mx, .modbadge, .modtick { color: #13201a; }
.go.m-mx { box-shadow: 0 2px 8px rgba(160, 200, 0, .45); }
/* all twelve boxes the same size: equal columns, equal rows */
.matrix, .mheads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.matrix { grid-auto-rows: 1fr; }
.mcell { min-height: 118px; }

/* Mock page: options panel on the left, outside the matrix */
main.wide { max-width: 1400px; }
.mockpage { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start; }
.optside { position: sticky; top: 70px; font-size: 14.5px; }
.optside h3 { margin: 2px 0 10px; font-size: 17px; }
.optside .row { flex-direction: column; align-items: flex-start; gap: 6px; margin: 8px 0; }
.optside .sources { padding: 8px 10px; }
.optside .tiersrc { margin-left: 22px; flex-direction: column; gap: 4px; }
.optside select { max-width: 100%; }
@media (max-width: 1000px) { .mockpage { grid-template-columns: 1fr; } .optside { position: static; } }
/* options and matrix on separate white panels */
.tabbody:has(.mockpage) { background: transparent; border: 0; box-shadow: none; padding: 0; }
.optside, .mockmain { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(20, 50, 30, .06); }
.tierhead b { white-space: nowrap; }
.optside .tierhead { align-items: flex-start; }
.optside label.opt { flex-wrap: wrap; } .optside #cPace { width: 100%; }
/* compact matrix: columns just wide enough for the mixed row (button + size), boxes no taller than their content */
.mockmain { width: fit-content; }
.matrix, .mheads { grid-template-columns: repeat(3, 292px); gap: 10px; }
.matrix { grid-auto-rows: auto; }
.mcell { min-height: 0; height: 100%; padding: 10px 14px; gap: 8px; }
.mcell .mact .go { padding: 7px 14px; }
.mheads { margin-bottom: 8px; }
.mockpage { grid-template-columns: 260px auto; justify-content: start; }
main.wide { max-width: 1260px; }
@media (max-width: 1250px) { .matrix, .mheads { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mockmain { width: auto; } }
#multiPer { padding: 6px 4px; font-size: 13.5px; max-width: 118px; }
.mcell .mact { flex-wrap: nowrap; }
.mcell .mact .go { white-space: nowrap; }
#multiPer { max-width: 112px; }
/* every matrix button the same size, at the top left of its box */
.mcell .mact .go { width: 152px; padding: 7px 0; text-align: center; justify-content: center; }
.mcell { justify-content: flex-start; }
.mcell .mtop { margin-top: 0; }
/* options panel at the far left of the page, matrix centred on the page (an empty right column balances the left one) */
main.wide { max-width: none; }
.mockpage { grid-template-columns: 260px minmax(0, 1fr) 260px; justify-content: stretch; }
.mockmain { justify-self: center; }
@media (max-width: 1560px) { .mockpage { grid-template-columns: 260px minmax(0, 1fr); } }
/* options panel: wider, one line per item; matrix centred in the space to its right */
.mockpage, .mockpage { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 1560px) { .mockpage { grid-template-columns: 300px minmax(0, 1fr); } }
.optside .tier { padding: 6px 0; }
.optside .tierhead { flex-wrap: nowrap; white-space: nowrap; }
.optside .tiersrc { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0 24px; }
.optside .tiersrc label { white-space: nowrap; }
.optside .row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.optside h3 { margin-bottom: 6px; }
.optside .tierhead .muted { font-size: 13.5px; }
/* matrix: module names written vertically down the left, column headers centred */
.matrix, .mheads { grid-template-columns: 38px repeat(3, 292px); }
@media (max-width: 1250px) { .matrix, .mheads { grid-template-columns: 38px repeat(3, minmax(0, 1fr)); } }
.mhead { text-align: center; }
.mrow { display: flex; align-items: center; justify-content: center; background: var(--c); color: #1f2937; border-radius: 10px; }
.mrow span { writing-mode: vertical-rl; text-orientation: upright; font-weight: 800; font-size: 13px; letter-spacing: -.5px; line-height: 1; text-transform: uppercase; white-space: nowrap; padding: 8px 0; }
/* the code of a mock, shown before it starts */
.sheet { position: fixed; inset: 0; background: rgba(15, 30, 20, .35); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.sheetbox { background: var(--card); border-radius: 14px; padding: 22px 24px; width: min(440px, 100%); box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
            border-top: 8px solid var(--c, var(--brand)); }
.sheetbox h2 { margin: 0 0 14px; }
.codebox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.codebox small { width: 100%; color: var(--muted); }
.codebox input { font: 700 28px ui-monospace, Menlo, monospace; letter-spacing: .18em; width: 11ch; padding: 6px 10px; border: 2px solid var(--line); border-radius: 10px; background: #f8faf8; }
#userBox select { font-size: 14px; padding: 4px 6px; border-radius: 8px; max-width: 200px; }
/* two buttons in the pile boxes (Flash, Retake): every matrix button one size */
.mcell .mact .go { width: 118px; }
.mcell .msize { padding: 6px 4px; font-size: 13.5px; width: 112px; }
.mcell .pct { white-space: nowrap; }
/* options box as tall as the matrix box; the flashcard viewer spans both, below them */
.mockpage { align-items: stretch; }
.mockpage > .optside { position: static; }
.mockpage > #fcSection { grid-column: 1 / -1; }
.mockpage > #fcSection:empty { display: none; }
.mcell .msize { width: 124px; }
.sectionhold { max-width: 640px; margin: 40px auto; border-top: 8px solid var(--c, var(--brand)); }
.sectionhold h1 { margin-top: 0; }
/* flashcards: their own window over the page */
.fcsheet { align-items: flex-start; padding: 3vh 16px; overflow-y: auto; }
.fcbox { background: var(--bg); border-radius: 16px; width: min(1040px, 100%); padding: 16px 22px 22px; box-shadow: 0 12px 48px rgba(0, 0, 0, .3);
         border-top: 8px solid var(--c, var(--brand)); }
.fcbox .fcbar { margin-top: 4px; }
.fcbox #fcClose { font-size: 16px; font-weight: 700; }
body.noscroll { overflow: hidden; }
/* results review: did you guess? */
.guessrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; padding: 10px 12px; background: #f3f7f3; border-radius: 10px; }
.guessrow .ghost.on { background: var(--brand); color: #fff; border-color: var(--brand); }
/* flashcard window: fixed size; the card scrolls inside, the buttons stay in a bar at the bottom */
.fcsheet { align-items: center; padding: 3vh 16px; overflow: hidden; }
.fcbox { height: 94vh; display: flex; flex-direction: column; padding: 14px 22px 0; }
#fcHost { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#fcHost > .fcbar { flex: none; margin: 4px 0 10px; }
#fcHost > #fc { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.fcfoot { flex: none; min-height: 64px; display: flex; align-items: center; border-top: 1px solid var(--line); background: var(--bg); padding: 10px 0 12px; }
.fcfoot:empty { visibility: hidden; }
.fcfoot .startrow { margin: 0; width: 100%; }
.fcfoot { height: 76px; min-height: 0; }
.fcfoot .startrow { flex-wrap: nowrap; }
#fc > .fcnote { display: block; margin: 0 2px 10px; }
.fcask { display: inline-flex; align-items: center; gap: 10px; margin-right: 8px; }
/* size menus a little wider (the longest, "3×27 · 2:00:00", fits); columns widened to keep button + menu on one line */
.mcell .msize { width: 136px; }
.matrix, .mheads { grid-template-columns: 38px repeat(3, 304px); }
@media (max-width: 1250px) { .matrix, .mheads { grid-template-columns: 38px repeat(3, minmax(0, 1fr)); } }
/* results: confirm the answers that look like guesses */
.guesscheck { border-left: 6px solid #f59e0b; }
.guesscheck table { margin-top: 8px; }
.guesscheck td { padding: 5px 8px; vertical-align: middle; }
.guesscheck .gbtns { white-space: nowrap; }
.guesscheck .gbtns .ghost { padding: 4px 10px; }
.guesscheck .gbtns .ghost.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.guesscheck tr.done td:not(.gbtns) { opacity: .6; }
.solimg { display: block; margin-top: 8px; background: #fff; border-radius: 6px; }
.aisol div { margin: 3px 0; }
.solution .aisol { font-size: 16px; line-height: 1.7; margin-top: 6px; }
.guesscheck .gcdone { margin-top: 12px; }
@keyframes gcnudge { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 4px #f59e0b; } }
.guesscheck.nudge { animation: gcnudge .9s ease 2; }
/* after a mock, until Done: the top bar is locked */
body.guesslock #nav, body.guesslock #userBox, body.guesslock #brand { opacity: .35; pointer-events: none; }
/* results: one table (amber rows = answers to confirm), each answer opens in a window */
.guesscheck tr.done td:not(.gbtns) { opacity: 1; }
.guesscheck tr.gsus td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }
.guesscheck tr.gsus:not(.done) { background: #fff7e6; }
.gcnote { margin: 0 0 10px; }
.revsheet { align-items: flex-start; padding: 3vh 16px; overflow-y: auto; }
.revbox { background: var(--bg); border-radius: 16px; width: min(1040px, 100%); padding: 8px 18px 18px; box-shadow: 0 12px 48px rgba(0, 0, 0, .3); }
.revbar { display: flex; align-items: center; padding: 4px 0 6px; }
.revbar #revClose { font-size: 16px; font-weight: 700; }
/* AI worked solutions: full-size fractions, a little larger maths, room between the lines */
.solution .aisol { font-size: 17px; line-height: 1.5; }
.solution .aisol > div { margin: 10px 0; }
.solution .aisol .katex { font-size: 1.12em; }
/* results table: each row coloured by where the answer goes */
tr.res-wrong td { background: #fdecec; }
tr.res-guess td { background: #fff0e0; }
tr.res-slow td { background: #fff8d6; }
tr.res-ok td { background: #eefaf1; }
tr.res-skip td { color: #6b7280; }
.rtag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.rt-wrong { background: #dc2626; color: #fff; }
.rt-guess { background: #ea580c; color: #fff; }
.rt-slow { background: #facc15; color: #3b2f00; }
.rt-ok { background: #16a34a; color: #fff; }
.rt-skip { background: #e5e7eb; color: #374151; }
td.rescell { white-space: nowrap; }
.updbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px;
          background: #1f2937; color: #fff; padding: 10px 16px; border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); font-weight: 600; }
/* aims */
.aimrow { align-items: center; gap: 12px; margin: 6px 0; }
.aimrow .aimmod { width: 76px; }
.aimline { display: block; margin-top: 4px; }
/* sandbox: a switch in the top bar; while on, the bar is striped so it is never forgotten */
.sbswitch { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: 14px; cursor: pointer; margin-left: 6px; }
.uname { color: #fff; font-weight: 600; }
body.sandbox header.bar { background: repeating-linear-gradient(-45deg, #92400e 0 16px, #b45309 16px 32px); }
body.sandbox .sbswitch b { background: #fde047; color: #3b2f00; padding: 1px 7px; border-radius: 6px; }
/* a bigger sandbox switch: the whole label is the target, with a large tick box */
.sbswitch { padding: 5px 12px 5px 8px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 10px; font-size: 15px; font-weight: 600; gap: 8px; }
.sbswitch:hover { background: rgba(255, 255, 255, .12); }
.sbswitch input { width: 22px; height: 22px; margin: 0; cursor: pointer; accent-color: #fde047; }
.aimrow { flex-wrap: wrap; }
.aimrow .aimplan { flex-basis: 100%; margin-left: 88px; margin-top: -4px; }
.numin input { width: 64px; padding: 5px 6px; font-size: 15px; text-align: right; border: 1px solid var(--line); border-radius: 8px; }
/* plan: a spreadsheet-style grid (white = type here, grey = worked out) */
.xtab { border-collapse: collapse; margin: 8px 0 6px; font-size: 15px; }
.xtab th, .xtab td { border: 1px solid #c9d2cb; padding: 0; text-align: center; }
.xtab th { background: #e8eee9; font-weight: 700; font-size: 13px; padding: 6px 8px; line-height: 1.2; }
.xtab th small { display: block; font-weight: 400; color: var(--muted); }
.xtab td { padding: 6px 10px; }
.xtab td.xm { text-align: left; font-weight: 700; border-left: 5px solid var(--c); }
.xtab td.xin { padding: 0; background: #fff; }
.xtab td.xin input { width: 72px; border: 0; padding: 7px 8px; font-size: 15px; text-align: right; background: transparent; outline: none; }
.xtab td.xin:focus-within { box-shadow: inset 0 0 0 2px #1a73e8; }
.xtab td.xc { background: #f3f5f3; color: #374151; text-align: right; font-variant-numeric: tabular-nums; }
.xtab td.xs { font-weight: 700; color: #111827; }
.xtab tr.xtot td { font-weight: 700; background: #e8eee9; }
.xtab td.xm { white-space: nowrap; padding-right: 14px; }
/* flashcard window: as big as the screen; once the answer is shown, on a wide screen the question sits on the left and the
   answer, working and notes on the right, so there is little to scroll */
.fcsheet { padding: 8px; }
.fcbox { width: 100%; max-width: none; height: calc(100vh - 16px); }
@media (min-width: 1100px) {
  .fcbox #fc > .revcard { display: grid; grid-template-columns: minmax(0, auto) minmax(340px, 1fr); column-gap: 24px; align-items: start; }
  .fcbox #fc > .revcard > * { grid-column: 2; }
  .fcbox #fc > .revcard > .qmeta { grid-column: 1 / -1; }
  .fcbox #fc > .revcard > .qwrap { grid-column: 1; grid-row: 2 / span 20; }
  .fcbox #fc > .revcard > .solution { margin-top: 0; }
}
/* the results pop-up: as big as the screen, question and answer side by side, earlier attempts below both */
.revsheet { padding: 8px; }
.revbox { width: 100%; max-width: none; min-height: calc(100vh - 16px); }
@media (min-width: 1100px) {
  .revbox #revBody > .revcard { display: grid; grid-template-columns: minmax(0, auto) minmax(340px, 1fr); column-gap: 24px; align-items: start; }
  .revbox #revBody > .revcard > * { grid-column: 2; }
  .revbox #revBody > .revcard > .qmeta { grid-column: 1 / -1; }
  .revbox #revBody > .revcard > .qwrap { grid-column: 1; grid-row: 2 / span 20; }
  .revbox #revBody > .revcard > .solution { margin-top: 0; }
}
@media (min-width: 1100px) {
  .revbox #revBody > .revcard, .fcbox #fc > .revcard { grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); }
  .revbox #revBody > .revcard > .qwrap img, .fcbox #fc > .revcard > .qwrap img { max-width: 100%; height: auto; }
}
/* question card: question on the left, answer + working on the right and pinned in view while a tall question scrolls */
@media (min-width: 1100px) {
  .fcbox #fc > .revcard > .revq, .revbox #revBody > .revcard > .revq { grid-column: 1; grid-row: 2; }
  .fcbox #fc > .revcard > .reva, .revbox #revBody > .revcard > .reva { grid-column: 2; grid-row: 2; position: sticky; top: 0; align-self: start;
    max-height: calc(100vh - 150px); overflow-y: auto; }
}
.reva .estnote { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
/* the estimates: a small table at the bottom of the answer column */
.reva .estnote { border-top: 0; padding-top: 0; }
.esttab { border-collapse: collapse; font-size: 13px; margin-bottom: 4px; }
.esttab th { text-align: left; font-weight: 600; color: var(--muted); padding: 3px 12px 3px 0; white-space: nowrap; vertical-align: top; }
.esttab td { padding: 3px 0; }
.esttab tr + tr th, .esttab tr + tr td { border-top: 1px solid var(--line); }
@media (min-width: 1100px) {
  .fcbox #fc > .revcard > .reva, .revbox #revBody > .revcard > .reva { display: flex; flex-direction: column; min-height: calc(100vh - 230px); }
  .revcard > .reva > .estnote { margin-top: auto; padding-top: 16px; }
}
.esttab { width: auto; }
/* the estimates sit just below the worked solution */
@media (min-width: 1100px) {
  .fcbox #fc > .revcard > .reva, .revbox #revBody > .revcard > .reva { min-height: 0; }
  .revcard > .reva > .estnote { margin-top: 12px; padding-top: 0; }
}
.reva .estnote { margin: 12px 0 10px; }
/* a checked retake answer: laid out like a flashcard */

/* no header line on the question card: question and answer start on the first row */
@media (min-width: 1100px) {
  .revcard > .revq, .revcard > .reva { grid-row: 1 !important; }
}
.flagmark { color: #2563eb; font-size: 13px; }
.gwarn { color: #b45309; font-size: 13px; font-weight: 700; white-space: nowrap; margin-left: 6px; }
.modpill { background: var(--c); color: #1f2937; font-weight: 700; font-size: 13px; padding: 2px 10px; border-radius: 999px; }
/* logo */
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand .logo { width: 44px; height: 44px; margin: -5px 0; display: block; }   /* the logo alone, no name beside it; the bar keeps its height */
/* options: the three ranges (Years, Difficulty, Silly-mistake risk) on one grid, so labels and boxes line up */
.optside label.opt:has(#cFrom), .optside label.opt:has(#cDmin), .optside label.opt:has(#cSmin) {
  display: grid; grid-template-columns: 104px 72px 14px 72px; align-items: center; column-gap: 0; width: 100%; margin: 3px 0; line-height: 1.2; }
.optside label.opt:has(#cFrom) select, .optside label.opt:has(#cDmin) select, .optside label.opt:has(#cSmin) select { width: 72px; }
.optside .row:has(#cFrom), .optside .row:has(#cDmin) { flex-direction: column; align-items: stretch; gap: 4px; }
.mockpage { grid-template-columns: 320px minmax(0, 1fr); }
@media (max-width: 1560px) { .mockpage { grid-template-columns: 320px minmax(0, 1fr); } }
@media (max-width: 1000px) { .mockpage { grid-template-columns: 1fr; } }
.optside label.opt:has(#cFrom), .optside label.opt:has(#cDmin), .optside label.opt:has(#cSmin) { grid-template-columns: 100px 82px 16px 82px; justify-items: center; }
.optside label.opt:has(#cFrom) select, .optside label.opt:has(#cDmin) select, .optside label.opt:has(#cSmin) select { width: 82px; }
.optside label.opt:has(#cFrom), .optside label.opt:has(#cDmin), .optside label.opt:has(#cSmin) { justify-items: start; }
/* answer areas on a question picture: hover is a light dashed outline; the chosen one is solid blue with a tick */
.hot.pick:hover { border: 2px dashed rgba(71, 85, 105, .55); background: rgba(71, 85, 105, .05); }
.hot.pick.on, .hot.pick.on:hover { border: 3px solid #2563eb; background: rgba(37, 99, 235, .18); box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
.hot.pick.on::after { content: '✓'; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%;
  background: #2563eb; color: #fff; font: 700 13px/22px -apple-system, system-ui, sans-serif; text-align: center; }
/* radio-button answers (text questions and pictures without answer areas): the chosen row stands out the same way */
.fcopt:has(input:checked), .fclet:has(input:checked) { background: rgba(37, 99, 235, .14); border-radius: 8px; box-shadow: inset 0 0 0 2px #2563eb; }
.fcopt:hover:not(:has(input:checked)), .fclet:hover:not(:has(input:checked)) { box-shadow: inset 0 0 0 1px rgba(71, 85, 105, .4); border-radius: 8px; }
/* all attempts: each time as a horizontal bar; the thin line is the question's slow limit */
.hist td.tcell { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.tbar { position: relative; flex: 1; height: 12px; background: #eef1ef; border-radius: 6px; }
.tbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.tbar i.tok { background: #16a34a; } .tbar i.tbad { background: #dc2626; } .tbar i.tv { background: #9ca3af; }
.tbar b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #1f2937; }
.tsec { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
/* results table: the time bar takes the row's result colour; the line is that question's slow limit */
tr.res-ok .tbar i { background: #16a34a; } tr.res-wrong .tbar i { background: #dc2626; } tr.res-guess .tbar i { background: #ea580c; }
tr.res-slow .tbar i { background: #eab308; } tr.res-skip .tbar i { background: #9ca3af; }
td.tcell { min-width: 200px; }
td.tcell { min-width: 0; white-space: nowrap; }
td.tcell > .tbar { display: inline-block; vertical-align: middle; width: 110px; }
.hist td.tcell > .tbar { width: auto; }
td.tcell > .tsec { display: inline-block; margin-left: 8px; min-width: 40px; }
/* results page: full width, one line per question */
main.resultspage { max-width: 1600px; }
main.resultspage table td:nth-child(2), main.resultspage table td:nth-child(3) { white-space: nowrap; }
/* results page: every row on one line; a narrow window scrolls the table sideways instead */
main.resultspage .card:has(> table) { overflow-x: auto; }
main.resultspage table th, main.resultspage table td { white-space: nowrap; }
/* the Total row's result summary may wrap: unwrapped it widened the Result column past the card, pushing the
   Guessed? buttons off screen */
main.resultspage table tr.total td { white-space: normal; }