/* The IQ League: brand colours and type follow the website (maroon, bone, charcoal, orange; Source Serif 4 for headings, Open Sans for text) */
:root {
  --maroon:#6E0B10; --maroon-deep:#4A060A; --bone:#F1F0EA; --bone-warm:#F7F5EF; --char:#46413D; --ink:#201B1A; --orange:#DD4E14;
  --accent:#6E0B10; --bg:#F1F0EA; --card:#fff; --line:#E2DED3; --err:#A4262C; --ok:#1B6E3C; --muted:#6A635D; --soft:#F7F5EF; --tint:#F6EAE7;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(32,27,26,.06), 0 8px 24px rgba(32,27,26,.07);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.6 var(--sans); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
body > main { flex:1 0 auto; }
h1, h2, h3, h4 { font-family:var(--serif); font-weight:600; color:var(--maroon); line-height:1.25; }
h1 { font-size:1.9rem; margin:.4rem 0 1.1rem; letter-spacing:.01em; }
h1::before { content:""; display:block; width:44px; height:3px; background:var(--orange); margin-bottom:.6rem; border-radius:2px; }
h2 { font-size:1.3rem; margin:1.4rem 0 .6rem; }
h3 { font-size:1.1rem; margin:1.1rem 0 .4rem; }
a { color:var(--maroon); }
a:hover { color:var(--orange); }
.eyebrow { font-family:var(--serif); font-weight:600; text-transform:uppercase; font-size:.78rem; letter-spacing:.3em; color:var(--char); margin:0 0 .4rem; }
main { max-width:1180px; width:100%; margin:0 auto; padding:24px 20px 40px; }

/* ---------- header ---------- */
.top { background:var(--maroon); color:#fff; position:sticky; top:0; z-index:50; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.top__in { max-width:1180px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.brand:hover { color:#fff; }
.brand__chip { background:var(--bone-warm); border-radius:8px; padding:3px 6px; line-height:0; box-shadow:0 2px 10px rgba(0,0,0,.2); }
.brand__chip img { height:40px; width:auto; }
.brand__text { display:flex; flex-direction:column; line-height:1.15; }
.brand__name { font-family:var(--serif); font-weight:700; font-size:1.08rem; letter-spacing:.04em; }
.brand__sub { font-family:var(--serif); text-transform:uppercase; letter-spacing:.32em; font-size:.66rem; opacity:.8; }
.nav { display:flex; align-items:center; gap:4px 6px; flex:1; flex-wrap:wrap; }
.nav__link, .dd > summary { color:#fff; text-decoration:none; padding:9px 14px; border-radius:6px; font-weight:600; font-size:.92rem; letter-spacing:.02em; cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; border-bottom:2px solid transparent; transition:background .25s var(--ease); }
.nav__link:hover, .dd > summary:hover { background:rgba(255,255,255,.12); color:#fff; }
.nav__link.on, .dd.on > summary { border-bottom-color:var(--orange); }
.dd { position:relative; }
.dd > summary::-webkit-details-marker { display:none; }
.dd:not(.dd--me) > summary::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.85; }
.dd[open] > summary { background:rgba(255,255,255,.14); }
.dd__menu { position:absolute; left:0; top:calc(100% + 6px); min-width:210px; background:#fff; border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.25); padding:6px; z-index:60; border-top:3px solid var(--orange); }
.dd__menu--right { left:auto; right:0; }
.dd__menu a, .dd__menu .dd__out { display:block; width:100%; text-align:left; padding:10px 14px; border-radius:6px; color:var(--ink); text-decoration:none; font-size:.94rem; background:none; border:0; font-weight:500; cursor:pointer; }
.dd__menu a:hover, .dd__menu .dd__out:hover { background:var(--tint); color:var(--maroon); }
.dd__menu a.on { color:var(--maroon); font-weight:700; background:var(--soft); }
.dd--me { margin-left:auto; }
.dd--me > summary { padding:5px 12px 5px 6px; }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--orange); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; }
.who { margin:0; color:#fff; font-weight:600; }
.menu-toggle { display:none; margin-left:auto; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:6px; padding:8px 14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }
.foot { text-align:center; padding:18px 16px 26px; color:var(--muted); font-size:.82rem; letter-spacing:.06em; }
.foot span { font-family:var(--serif); font-weight:600; color:var(--maroon); }
@media (max-width:820px) {
  .menu-toggle { display:inline-block; }
  .js .nav { display:none; flex-basis:100%; flex-direction:column; align-items:stretch; padding:6px 0 10px; }
  .js .nav.open { display:flex; }
  .nav { flex-basis:100%; }
  .dd__menu, .dd__menu--right { position:static; box-shadow:none; background:rgba(255,255,255,.08); border-top:0; margin:2px 0 4px 12px; }
  .dd__menu a, .dd__menu .dd__out { color:#fff; }
  .dd__menu a:hover, .dd__menu .dd__out:hover, .dd__menu a.on { background:rgba(255,255,255,.14); color:#fff; }
  .dd--me { margin-left:0; border-top:1px solid rgba(255,255,255,.18); margin-top:6px; padding-top:6px; }
  .nav__link, .dd > summary { padding:12px 14px; }
}

/* ---------- sign-in and other pages seen before logging in ---------- */
body.guest { background:radial-gradient(1200px 600px at 50% -10%, #8a1219 0%, var(--maroon) 45%, var(--maroon-deep) 100%) fixed; }
.authmain { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:28px 16px; max-width:none; }
.auth__panel { width:100%; max-width:440px; background:var(--bone-warm); border-radius:16px; padding:28px 30px 26px; box-shadow:0 30px 80px rgba(0,0,0,.4); text-align:center; }
.auth__logo { width:170px; height:auto; margin:0 auto 6px; display:block; }
.auth__panel .eyebrow { text-align:center; }
.auth__panel h1 { text-align:center; margin-top:.2rem; }
.auth__panel h1::before { margin:0 auto .6rem; }
.auth__panel form.card, .auth__panel .card { border:0; box-shadow:none; background:none; padding:0; max-width:none; text-align:left; }
.auth__panel p { text-align:center; }
.auth__panel .flash { text-align:left; }
.auth__panel button { width:100%; }

/* ---------- cards, forms, buttons ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; max-width:440px; margin-bottom:18px; box-shadow:var(--shadow); }
.card.row { max-width:none; display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.card.wide { max-width:none; }
.card h2 { font-size:1.1rem; margin:0 0 .35rem; }
.grid .card h2 { color:var(--char); font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:.76rem; }
label { display:block; margin-bottom:12px; font-size:.9rem; font-weight:600; color:var(--char); }
.row label { margin-bottom:0; }
input, select, textarea { display:block; width:100%; padding:10px 12px; font:inherit; font-weight:400; color:var(--ink); border:1px solid #cfc9bd; border-radius:8px; margin-top:4px; background:#fff; transition:border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline:none; border-color:var(--maroon); box-shadow:0 0 0 3px rgba(110,11,16,.18); }
button { padding:10px 18px; font:inherit; font-weight:600; letter-spacing:.03em; color:#fff; background:var(--maroon); border:0; border-radius:8px; cursor:pointer; transition:background .25s var(--ease), transform .1s; }
button:hover { background:var(--maroon-deep); }
button:active { transform:translateY(1px); }
button.small { padding:5px 12px; font-size:.85rem; }
button.secondary { background:var(--char); }
button.secondary:hover { background:var(--ink); }
button.link { background:none; color:var(--maroon); padding:0; font-weight:600; }
button.link:hover { background:none; color:var(--orange); }
form.inline { display:inline; }
form.inline select { display:inline-block; width:auto; }
a.button { display:inline-block; padding:10px 20px; color:#fff; background:var(--maroon); border-radius:8px; text-decoration:none; font-weight:600; letter-spacing:.03em; transition:background .25s var(--ease); }
a.button:hover { background:var(--maroon-deep); color:#fff; }
a.button.secondary { background:var(--char); }
button.danger { background:var(--err); }
button.verify { background:var(--ok); }
.muted { color:var(--muted); }
label.tick { display:block; margin-bottom:4px; font-size:1rem; font-weight:400; color:var(--ink); }
label.tick input { display:inline-block; width:auto; margin:0 6px 0 0; }
table { width:100%; border-collapse:collapse; background:var(--card); }
/* on a phone a wide table scrolls inside its own box instead of pushing the whole page sideways */
main table { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px; }
main table.checktable { display:table; }
th, td { text-align:left; padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--char); background:var(--soft); white-space:nowrap; }
.flash { padding:10px 14px; border-radius:8px; border-left:4px solid; }
.flash.ok { background:#E6F3EA; color:var(--ok); border-color:var(--ok); }
.flash.error { background:#FBE7E8; color:var(--err); border-color:var(--err); }
.code-box { background:#FFF3DC; border:1px solid #E6C77A; padding:12px 16px; border-radius:10px; margin-bottom:16px; }
.code { display:inline-block; margin:0 8px; padding:2px 10px; font:700 1.4rem monospace; letter-spacing:.15em; background:#fff; border-radius:6px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; margin-bottom:12px; }
.filters { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; align-items:end; }
.qform textarea { display:block; width:100%; padding:10px; font:inherit; border:1px solid #cfc9bd; border-radius:8px; margin-top:4px; }
fieldset.card { border:1px solid var(--line); }
.optrow { display:flex; gap:8px; align-items:center; margin-bottom:4px; }
.optrow input[type=text], .optrow input:not([type]) { flex:1; margin:0; }
.optletter { font-weight:700; width:1.2em; }
.preview { min-height:1.5em; padding:6px 10px; margin:4px 0 12px; background:var(--soft); border-radius:8px; white-space:pre-wrap; }
.preview.small { margin:0 0 6px 2em; min-height:0; padding:2px 10px; }
.qimg { max-width:100%; max-height:260px; border:1px solid var(--line); border-radius:6px; }
.badge { display:inline-block; padding:2px 10px; font-size:.75rem; border-radius:10px; background:#ECE8DE; color:var(--char); font-weight:600; letter-spacing:.03em; }
.badge.verified { background:#E6F3EA; color:var(--ok); }
.qtable td.math { white-space:pre-wrap; }
.errs { margin:0; padding-left:1.1em; color:var(--err); }
.wide-scroll { overflow-x:auto; margin-bottom:12px; }
.checktable { min-width:1250px; font-size:.9rem; }
.checktable .qcell { min-width:320px; }
.thumb { max-width:90px; max-height:60px; border:1px solid var(--line); background:#fff; }
.thumbbox { margin-bottom:6px; }
.filled { margin-top:4px; font-size:.8rem; color:#8a5a00; background:#FFF3DC; border-radius:4px; padding:2px 6px; }
fieldset.defaults legend { font-weight:600; padding:0 6px; }
.opts { margin:6px 0; padding-left:1.6em; }
.opts li.right { font-weight:600; color:var(--ok); }
.opts li.right::after { content:"  ✓ correct"; font-weight:400; font-size:.8rem; }
.accepted { margin:6px 0; color:var(--ok); font-size:.9rem; }
details.soln { margin-top:6px; }
details.soln summary { cursor:pointer; color:var(--maroon); font-weight:600; }
.solntext { white-space:pre-wrap; background:var(--soft); border-radius:8px; padding:8px 12px; margin-top:4px; }
.reviewcard { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--maroon); border-radius:12px; padding:14px 18px; margin-bottom:14px; box-shadow:var(--shadow); }
.reviewcard header { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:6px; font-family:var(--serif); font-size:1.08rem; color:var(--maroon); }
.reviewcard .meta { color:var(--muted); font-size:.88rem; }
.reviewcard .figs { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0; }
.reviewcard .figs img { max-width:260px; max-height:200px; border:1px solid var(--line); background:#fff; }
.choice { display:flex; gap:10px; align-items:baseline; padding:10px 12px; margin:6px 0; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:1rem; font-weight:400; color:var(--ink); cursor:pointer; transition:border-color .2s, background .2s; }
.choice:hover { border-color:#c9b9b4; }
.choice input { width:auto; margin:0; transform:scale(1.25); accent-color:var(--maroon); }
.choice:has(input:checked) { border-color:var(--maroon); background:var(--tint); }
.scanbox { border:1.5px dashed #c9b9b4; border-radius:12px; padding:12px 14px; background:#fff; }
.filebtn { display:inline-block; cursor:pointer; }
.scan-preview img, .scanthumb { max-width:100%; max-height:260px; border:1px solid var(--line); margin-top:6px; background:#fff; }
.studentbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
#timer { font-size:1.3rem; font-variant-numeric:tabular-nums; font-family:var(--serif); }
#timer.low { color:var(--err); }
#save-status.saved { color:var(--ok); }
#save-status.bad { color:var(--err); font-weight:600; }
.resultopts { list-style:none; padding:0; margin:6px 0; }
.resultopts li { padding:6px 10px; margin:3px 0; border-radius:8px; background:#F3F0E8; }
.resultopts li.right { background:#E6F3EA; }
.resultopts li.wrong { background:#FBE7E8; }
.teachercomment { background:#FFF3DC; border-radius:8px; padding:8px 12px; }
.sitting h2 { margin-top:0; }
.checklist { padding-left:1.2em; }
.checklist li { margin:6px 0; }
.sitting-note { position:sticky; top:62px; z-index:2; margin-top:0; }
.autonote { color:var(--err); font-weight:600; }
tr.yellow td { background:#FFF4B8; }
.yellowtag { background:#FFE45C; color:#5c4800; border-radius:10px; padding:1px 8px; font-size:.8rem; font-weight:600; }
.markcard.yellow { background:#FFFBE0; border-color:#E6CF6A; }
.marking { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:800px) { .marking { grid-template-columns:1fr; } }
.scanview { overflow:auto; max-height:75vh; border:1px solid var(--line); background:#fff; text-align:center; border-radius:8px; }
.scanview img { max-width:100%; transition:transform .15s; transform-origin:center center; cursor:zoom-in; }
.scanview img.zoom { max-width:none; width:200%; cursor:zoom-out; }
.steps { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 16px; counter-reset:s; }
.steps li { counter-increment:s; padding:5px 14px; border-radius:16px; background:#ECE8DE; color:var(--char); font-size:.88rem; font-weight:600; }
.steps li::before { content:counter(s) ". "; }
.steps li.now { background:var(--maroon); color:#fff; }
.steps li.done { background:#E6F3EA; color:var(--ok); }
.approvebar { position:sticky; bottom:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; box-shadow:0 -2px 12px rgba(0,0,0,.1); }
.picrow { display:flex; flex-wrap:wrap; gap:12px; }
.picitem { border:1px solid var(--line); border-radius:8px; padding:6px; background:#fff; font-size:.85rem; }
.picitem .qimg { max-width:160px; max-height:120px; display:block; margin-bottom:4px; }
.picitem input[type=number] { display:inline-block; width:3.5em; margin:0 6px 0 0; padding:2px 4px; }
.pager { display:flex; gap:16px; align-items:center; }
.inline-input { display:inline-block; width:12em; margin:0 4px 0 0; }
.mk-toggle { margin:4px 0 8px; }
.mathkeys { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px; margin-bottom:12px; }
.mk-row { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:4px; }
.mk-name { width:5.5em; font-size:.8rem; color:var(--muted); }
.mk-key { background:#fff; color:var(--ink); border:1px solid var(--line); min-width:2.4em; padding:4px 8px; }
.mk-key:hover { background:var(--tint); color:var(--maroon); }
[hidden] { display:none !important; }
.stats { list-style:none; padding:0; }
.stats li { padding:6px 0; }
details { margin-top:6px; }
details.dd { margin-top:0; }
@media (max-width:600px) { th:nth-child(2), td:nth-child(2) { display:none; } }
/* Student's corner: pages are pictures under a see-through cover so they cannot be dragged or long-pressed to save */
.viewonly { max-width:1100px; }
.vpage { position:relative; margin-bottom:12px; background:#fff; border:1px solid var(--line); line-height:0; border-radius:6px; overflow:hidden; }
.vpage img { width:100%; height:auto; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; pointer-events:none; }
.vshield { position:absolute; inset:0; }
/* marking screen: each sheet of a written answer, with a pen layer on top */
.scanpage { margin-bottom:14px; }
.stage { position:relative; display:inline-block; line-height:0; transition:transform .15s; transform-origin:center center; max-width:100%; }
.stage img { max-width:100%; cursor:zoom-in; }
.stage.zoom { width:200%; max-width:none; }
.stage.zoom img { max-width:none; width:100%; cursor:zoom-out; }
.penlayer { position:absolute; left:0; top:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.scanview img.zoom { max-width:100%; width:auto; }
/* student: the sheets of one written answer */
.sheets { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0; }
.sheet { border:1px solid var(--line); border-radius:8px; padding:6px; background:#fff; font-size:.85rem; text-align:center; }
.sheet img { display:block; max-width:140px; max-height:110px; margin:0 auto 4px; }
/* evaluation reports: charts are drawn as SVG */
.chartbox { max-width:720px; margin:6px 0 12px; }
svg.chart { width:100%; height:auto; display:block; background:#fff; border:1px solid var(--line); border-radius:12px; }
.chart-label { font:12px var(--sans); fill:#201B1A; }
.chart-value { font:11px var(--sans); fill:#6A635D; }
.chart-track { fill:#EFEBE1; }
.chart-grid { stroke:#E2DED3; stroke-width:1; }
.chart-line { stroke:#6E0B10; stroke-width:2.5; }
.bar-weak { fill:#C0392B; } .bar-developing { fill:#DD9A14; } .bar-strong { fill:#2E8B57; } .bar-none { fill:#B5AEA2; }
.chart-dot { stroke:#fff; stroke-width:2; fill:#6E0B10; }
.dot-weak { fill:#C0392B; } .dot-developing { fill:#DD9A14; } .dot-strong { fill:#2E8B57; }
.lvl { display:inline-block; padding:1px 10px; border-radius:10px; font-size:.78rem; font-weight:700; letter-spacing:.03em; }
.lvl-weak { background:#FBE7E8; color:#A4262C; } .lvl-developing { background:#FFF1CC; color:#7A5A00; } .lvl-strong { background:#E6F3EA; color:#1B6E3C; } .lvl-none { background:#ECE8DE; color:#6A635D; }
.bignum { font-size:2.4rem; font-weight:700; margin:0; font-family:var(--serif); color:var(--maroon); line-height:1.1; }
.qticks { display:flex; flex-wrap:wrap; gap:8px; }
.qtick { display:inline-flex; flex-direction:column; align-items:center; min-width:46px; padding:4px 8px; border-radius:10px; text-decoration:none; font-weight:700; border:1px solid var(--line); background:#fff; }
.qtick span { font-size:.75rem; font-weight:400; color:var(--muted); }
.tick-ok { color:#1B6E3C; background:#E6F3EA; } .tick-bad { color:#A4262C; background:#FBE7E8; } .tick-half { color:#7A5A00; background:#FFF1CC; }
.chapterbox { margin:8px 0 12px; padding:8px 12px; border-left:3px solid var(--maroon); background:var(--soft); border-radius:0 8px 8px 0; }
.chaptername { margin:2px 0 4px; }
.chaptertopics { margin-left:26px; }
details details { margin-left:18px; } details.tgroup > summary, details > summary { cursor:pointer; }
details > summary { font-weight:600; color:var(--char); }
.treeleaf { margin:4px 0 4px 18px; }

/* ---------- student pages ---------- */
.tiles .tile { display:block; text-decoration:none; color:var(--ink); max-width:none; margin:0; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.tiles .tile:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(32,27,26,.14); color:var(--ink); }
.tiles .tile.alert { border-top:4px solid var(--orange); }
.empty { text-align:center; padding:44px 20px; border-top:4px solid var(--orange); }
.empty__title { font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--maroon); margin:0 0 6px; }
.hwlist { display:grid; gap:14px; }
.hwlist .reviewcard { margin:0; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.hwlist .reviewcard:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(32,27,26,.12); }

/* phone comfort: buttons and boxes big enough for a thumb */
@media (max-width: 700px) {
  main { padding:18px 14px 32px; }
  button, a.button, select, input[type=text], input[type=password], input[type=number], input[type=date], input:not([type]) { min-height:46px; font-size:1rem; }
  button.small, a.button.small { min-height:40px; padding:6px 12px; }
  button.link { min-height:44px; padding:0 8px; }
  fieldset.card { min-width:0; }
  .choice { padding:12px; }
  .approvebar { padding:10px; }
  textarea { font-size:1rem; }
  h1 { font-size:1.5rem; }
  .auth__panel { padding:22px 20px; }
}
@media print { .top, .foot { display:none; } body { background:#fff; } }