@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:75% 125%;font-display:swap;src:url(/fonts/archivo.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/figtree.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plexmono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plexmono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plexmono-600.woff2) format('woff2')}

/* Layout: one worksheet at a time. Numbered tabs on top, questions laid out like spreadsheet rows with a row-header gutter. */
:root{
  --bg:#F1F5F2; --surface:#FFFFFF; --ink:#12201A; --muted:#55675D;
  --grid:#CBD6CF; --head:#E2EAE4; --info-soft:#EDF2EE;
  --accent:#1A6B40; --accent-ink:#FFFFFF; --accent-soft:#DCEFE3;
  --good:#17703A; --good-soft:#DDF1E4; --bad:#B3261E; --bad-soft:#FBE7E4;
  --f-display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --f-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1511; --surface:#141E19; --ink:#E7EFEA; --muted:#9AAEA3;
    --grid:#2B3B33; --head:#1B2923; --info-soft:#1A2620;
    --accent:#4CC38A; --accent-ink:#06130C; --accent-soft:#183A2A;
    --good:#5AD18F; --good-soft:#153324; --bad:#FF9C92; --bad-soft:#3B201D;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1511; --surface:#141E19; --ink:#E7EFEA; --muted:#9AAEA3;
  --grid:#2B3B33; --head:#1B2923; --info-soft:#1A2620;
  --accent:#4CC38A; --accent-ink:#06130C; --accent-soft:#183A2A;
  --good:#5AD18F; --good-soft:#153324; --bad:#FF9C92; --bad-soft:#3B201D;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;
  background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.5;
  padding-block:28px 56px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.wrap{max-width:900px; margin:0 auto}

/* header */
h1{
  font-family:var(--f-display); font-weight:850; font-stretch:80%; text-transform:uppercase;
  font-size:clamp(2.1rem,7.5vw,3.4rem); line-height:1; letter-spacing:.005em;
  margin:0 0 10px; text-wrap:balance;
}
.lede{margin:0 0 18px; color:var(--muted); max-width:58ch}
.who{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,1.3fr); gap:10px; margin:0 0 18px}
.who label{display:grid; gap:4px; font:600 .78rem var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.who input{
  font:400 1rem var(--f-body); letter-spacing:0; text-transform:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--grid); border-radius:8px; padding:9px 12px; min-height:44px; width:100%;
}
@media (max-width:560px){ .who{grid-template-columns:1fr 1fr} .who label:first-child{grid-column:1 / -1} }
.overall{margin:0 0 10px; font:500 .85rem var(--f-mono); color:var(--muted)}

/* tabs */
.tabs{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; margin:0 0 14px}
@media (max-width:620px){ .tabs{grid-template-columns:repeat(5,minmax(0,1fr))} }
.tab{
  display:grid; gap:2px; justify-items:center; padding:8px 4px 7px; min-height:52px;
  border:1px solid var(--grid); border-radius:10px; background:var(--surface); color:var(--ink);
  cursor:pointer; font:inherit;
}
.tab:hover{border-color:var(--accent)}
.tn{font:800 1.3rem/1 var(--f-display); font-stretch:80%}
.ts{font:500 .72rem/1.2 var(--f-mono); color:var(--muted)}
.tab.perfect .ts{color:var(--good); font-weight:700}
.tab[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.tab[aria-selected="true"] .ts{color:inherit; opacity:.88}

/* panel */
.panel{background:var(--surface); border:1px solid var(--grid); border-radius:14px; overflow:hidden}
.ph{padding:22px 22px 18px; display:grid; gap:12px}
.kick{margin:0; font:600 .78rem var(--f-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.ph h2{
  margin:0; font-family:var(--f-display); font-weight:850; font-stretch:80%; text-transform:uppercase;
  font-size:clamp(1.55rem,5vw,2.2rem); line-height:1.05; text-wrap:balance;
}
.intro{margin:0; color:var(--muted); max-width:64ch}
.note{margin:0; padding:12px 14px; border:1px solid var(--grid); border-radius:10px; background:var(--info-soft); max-width:64ch}

/* spreadsheet tables */
.tblwrap{overflow-x:auto; max-width:100%}
.sheet{border-collapse:collapse; background:var(--surface); font-size:.95rem; min-width:min(100%,340px)}
.sheet th,.sheet td{border:1px solid var(--grid); padding:7px 14px; text-align:left}
.sheet th{background:var(--head); font-weight:700}
.sheet th.ch,.sheet th.rh,.sheet th.corner{font:500 .82rem var(--f-mono); color:var(--muted); text-align:center; padding:5px 12px}
.sheet th.fc{text-align:center; font-family:var(--f-mono); font-weight:500; color:var(--muted)}
.sheet td.num{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* small figures used by some questions */
.mini{display:inline-block; max-width:100%; overflow-x:auto; margin:0 0 12px}
.mini table{border-collapse:collapse; background:var(--surface)}
.mini th,.mini td{border:1px solid var(--grid); width:54px; height:28px; padding:0; text-align:center}
.mini th{background:var(--head); font:500 .82rem var(--f-mono); color:var(--muted)}
.mini td.sel{outline:2px solid var(--accent); outline-offset:-2px; background:var(--accent-soft)}
.fxbar{display:flex; align-items:stretch; max-width:420px; border:1px solid var(--grid); border-radius:8px; overflow:hidden; margin:0 0 12px; background:var(--surface)}
.fxl{display:flex; align-items:center; padding:4px 14px; background:var(--head); font:italic 600 1.05rem Georgia,'Times New Roman',serif; color:var(--muted); border-right:1px solid var(--grid)}
.fxv{flex:1; min-height:34px; display:flex; align-items:center; padding:0 10px}
.cur{display:inline-block; width:2px; height:1.2em; background:var(--ink)}
.chart{margin:4px 0 0; max-width:520px}
.plot{position:relative; height:190px; margin:20px 0 0 36px; border-left:1px solid var(--muted); border-bottom:1px solid var(--muted)}
.gl{position:absolute; left:0; right:0; border-top:1px solid var(--grid)}
.gl span{position:absolute; right:calc(100% + 6px); top:-.7em; font:400 .72rem/1 var(--f-mono); color:var(--muted)}
.bars,.cats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:0 14px}
.bars{position:absolute; inset:0; align-items:end}
.bar{position:relative; background:var(--accent); border-radius:3px 3px 0 0}
.bar b{position:absolute; bottom:100%; left:0; right:0; text-align:center; font:600 .8rem/1.6 var(--f-mono); color:var(--ink)}
.cats{margin:6px 0 0 36px; font-size:.82rem; color:var(--muted); text-align:center}
.chart figcaption{margin:8px 0 0 36px; font-size:.82rem; color:var(--muted)}

/* questions */
.qs{margin:0; padding:0; list-style:none; border-top:1px solid var(--grid)}
.q{display:grid; grid-template-columns:48px minmax(0,1fr); border-bottom:1px solid var(--grid)}
@media (max-width:480px){ .q{grid-template-columns:36px minmax(0,1fr)} }
.qn{background:var(--head); border-right:1px solid var(--grid); text-align:center; padding-top:18px; font:600 .95rem var(--f-mono); color:var(--muted)}
.qb{padding:16px 18px 18px; min-width:0}
@media (max-width:480px){ .qb{padding:14px 12px 16px} }
.qt{margin:0 0 12px; font-weight:600; font-size:1.02rem; max-width:64ch}

.opts{display:grid; gap:8px; max-width:620px}
.opt{
  position:relative; display:flex; align-items:center; gap:12px; min-height:44px; padding:9px 14px;
  border:1px solid var(--grid); border-radius:10px; background:var(--surface); cursor:pointer;
}
.opt:hover{border-color:var(--accent)}
.opt input{position:absolute; opacity:0; pointer-events:none}
.opt:has(input:focus-visible){outline:3px solid var(--accent); outline-offset:2px}
.ol{font:600 .95rem var(--f-mono); color:var(--muted); min-width:1.6em}
.opt.sel{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.opt.is-ok{border-color:var(--good); background:var(--good-soft); box-shadow:inset 0 0 0 1px var(--good)}
.opt.is-bad{border-color:var(--bad); background:var(--bad-soft); box-shadow:inset 0 0 0 1px var(--bad)}
.opt.is-answer{border-color:var(--good); box-shadow:inset 0 0 0 2px var(--good)}

.rows{display:grid; gap:8px; max-width:620px}
.cellin,.fxrow{display:flex; align-items:stretch; border:1px solid var(--grid); border-radius:8px; overflow:hidden; background:var(--surface)}
.cellin:focus-within,.fxrow:focus-within{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
.fxrow .fxl{padding:4px 14px}
.cellin input,.fxrow input{
  flex:1; min-width:0; border:0; background:transparent; color:var(--ink); outline:0;
  font:400 1rem var(--f-body); padding:10px 12px; min-height:44px;
}
.fxrow input,.mono input{font-family:var(--f-mono)}
.sublab{font:600 .78rem var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 4px}
.short{max-width:240px}
textarea{
  width:100%; max-width:620px; display:block; resize:vertical; min-height:84px;
  font:400 1rem/1.5 var(--f-body); color:var(--ink); background:var(--surface);
  border:1px solid var(--grid); border-radius:8px; padding:10px 12px;
}
textarea:focus{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); outline:0}

.fb{margin-top:12px; padding:10px 14px; border-radius:10px; background:var(--info-soft); display:grid; gap:4px; max-width:620px}
.fb p{margin:0}
.fb-s{display:flex; align-items:center; gap:8px; font-weight:700}
.is-ok .fb{background:var(--good-soft)} .is-ok .fb-s{color:var(--good)}
.is-bad .fb{background:var(--bad-soft)} .is-bad .fb-s{color:var(--bad)}
.fb-a{font-weight:600}
.fb-l{font:600 .78rem var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}

/* actions */
.pf{padding:18px 22px 22px; display:grid; gap:14px}
@media (max-width:480px){ .pf{padding:16px 12px 20px} .ph{padding:18px 12px 14px} }
.sum{padding:12px 14px; border-radius:10px; background:var(--info-soft); max-width:620px}
.sum p{margin:0}
.sum .big{font:800 1.4rem/1.2 var(--f-display); font-stretch:80%}
.sum.perfect{background:var(--good-soft); color:var(--good)}
.sum.perfect p+p{color:var(--ink)}
.actions,.nav{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.nav{justify-content:space-between; padding-top:6px; border-top:1px solid var(--grid)}
.btn{
  min-height:44px; padding:0 18px; border-radius:10px; border:1px solid var(--grid);
  background:var(--surface); color:var(--ink); font:600 1rem var(--f-body); cursor:pointer;
}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* send to teacher */
.send{margin-top:18px; padding:20px 22px; background:var(--surface); border:1px solid var(--grid); border-radius:14px; display:grid; gap:12px}
@media (max-width:480px){ .send{padding:16px 12px} }
.send h2{margin:0; font-family:var(--f-display); font-weight:850; font-stretch:80%; text-transform:uppercase; font-size:1.4rem; line-height:1.1}
.send p{margin:0; color:var(--muted); max-width:64ch}
.send-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.send-row label{font:600 .78rem var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.send select{font:inherit; min-height:44px; padding:0 12px; max-width:100%; border:1px solid var(--grid); border-radius:8px; background:var(--surface); color:var(--ink)}
.send p.send-msg{min-height:1.5em}
.send p.send-msg.ok{color:var(--good); font-weight:600}
.send p.send-msg.warn{color:var(--bad); font-weight:600}
.send textarea{max-width:none; min-height:200px; font:400 .85rem/1.5 var(--f-mono)}
footer{margin-top:20px; font-size:.85rem; color:var(--muted); display:grid; gap:4px}
footer p{margin:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* standalone page (no host skeleton) */
html{padding-block:env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px)}

/* consent */
.send .notice{padding:12px 14px; border:1px solid var(--grid); border-radius:10px; background:var(--info-soft); display:grid; gap:6px; max-width:64ch}
.send .notice h3{margin:0; font:700 .95rem var(--f-body); color:var(--ink)}
.send .notice p{color:var(--ink); font-size:.92rem}
.check{display:flex; gap:12px; align-items:flex-start; max-width:64ch; cursor:pointer}
.check input{width:22px; height:22px; margin:2px 0 0; flex:none; accent-color:var(--accent)}

/* teacher panel */
.adm-lab{font:600 .78rem var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.adm-in{font:400 1rem var(--f-body); min-height:44px; padding:9px 12px; max-width:100%; border:1px solid var(--grid); border-radius:8px; background:var(--surface); color:var(--ink)}
.adm-form{display:grid; gap:8px}
.adm-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 12px}
.adm-bar input[type=search]{flex:1 1 200px; min-width:0}
.adm-h{margin:0; font:700 1rem var(--f-body)}
.adm-sub{margin:0 0 6px; color:var(--muted); font-size:.9rem}
.adm-avg{padding:16px 18px; margin:0 0 14px; display:grid; gap:10px}
.adm-list{display:grid; gap:8px; margin:0 0 14px}
.adm-empty{margin:0; padding:18px; text-align:center; color:var(--muted); background:var(--surface); border:1px solid var(--grid); border-radius:10px}
.stu{background:var(--surface); border:1px solid var(--grid); border-radius:10px}
.stu summary{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:10px 14px; cursor:pointer; min-height:44px}
.stu summary:hover{background:var(--info-soft)}
.stu-name{font-weight:700; overflow-wrap:anywhere}
.stu-meta{font:500 .85rem var(--f-mono); color:var(--muted); justify-self:end}
.chips{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px}
.chip{display:inline-flex; gap:6px; align-items:baseline; padding:2px 8px; border:1px solid var(--grid); border-radius:6px; font:500 .78rem var(--f-mono); color:var(--muted); background:var(--head)}
.chip b{font-weight:600; color:var(--ink)}
.chip.done{background:var(--surface); color:var(--ink)}
.chip.full{background:var(--good-soft); border-color:var(--good); color:var(--good)}
.adm-detail{padding:4px 14px 16px; display:grid; gap:8px; border-top:1px solid var(--grid)}
.adm-detail h3{margin:10px 0 0; font:700 .95rem var(--f-body)}
.adm-ans{margin:0; padding:0; list-style:none; display:grid; gap:6px}
.adm-ans li{display:grid; gap:2px; padding:8px 10px; border-radius:8px; background:var(--info-soft)}
.adm-ans li.st-ok{background:var(--good-soft)}
.adm-ans li.st-bad{background:var(--bad-soft)}
.adm-q{color:var(--muted); font-size:.88rem}
.adm-a{font-weight:600; overflow-wrap:anywhere; white-space:pre-wrap}
.adm-audit{margin:8px 0 0; padding-left:18px; font:400 .82rem/1.6 var(--f-mono); color:var(--muted)}
.send summary{cursor:pointer; font-weight:600}