/* © 2026 Caitlin Benjamin. MarkTrack. All rights reserved. Copying or reuse without written permission is prohibited. */
/* Layout: a school administration desk. A top bar carries the school and the sections; each section is a
   white sheet on a faint green-grey page, read in the order a teacher works. */
:root{
  --paper:#f4f7f5; --sheet:#ffffff; --ink:#1b2a33; --muted:#5b6b73; --line:#d5dfdb; --soft:#e9f0ed;
  --accent:#1f5f7a; --accent-ink:#ffffff; --accent-soft:#dcebf1;
  --redpen:#b8322a; --redpen-soft:#f8e1de; --amber:#a86a12; --amber-soft:#f8ecd6; --good:#2c7a4b; --good-soft:#dff1e6;
  --l1:#b8322a; --l2:#c98a1c; --l3:#7fa9b9; --l4:#5b93a9; --l5:#3f7d97; --l6:#2a6782; --l7:#1b4f66;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Atkinson Hyperlegible",Verdana,"Segoe UI",sans-serif;
  --radius:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#121a1e; --sheet:#182227; --ink:#e4ecef; --muted:#9fb0b7; --line:#2c3a41; --soft:#1e2b31;
  --accent:#6fb3d0; --accent-ink:#0d1a20; --accent-soft:#1c3946;
  --redpen:#ef7d72; --redpen-soft:#3d1f1c; --amber:#e3ae55; --amber-soft:#3a2d17; --good:#6cc492; --good-soft:#18332a;
  --l1:#ef7d72; --l2:#e3ae55; --l3:#3d6576; --l4:#4b7f95; --l5:#5d98b1; --l6:#78b3cc; --l7:#9cd0e6;
  color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
h1,h2,h3{font-family:var(--display);font-stretch:85%;letter-spacing:.005em;text-wrap:balance;margin:0}
h1{font-size:1.55rem;font-weight:800} h2{font-size:1.15rem;font-weight:750} h3{font-size:.98rem;font-weight:700}
p{margin:0}
.eyebrow{font-family:var(--display);font-stretch:80%;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;font-weight:700;color:var(--muted)}
.muted{color:var(--muted)}
button,select,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* top bar */
.topbar{background:var(--sheet);border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:5}
.topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-stretch:85%;font-weight:800;font-size:1.15rem}
.brand svg{flex:none}
.school{color:var(--muted);font-size:.88rem}
.nav{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}
.nav button{border:0;background:none;padding:7px 11px;border-radius:7px;cursor:pointer;font-weight:700;color:var(--muted)}
.nav button:hover{background:var(--soft);color:var(--ink)}
.nav button[aria-current="page"]{background:var(--ink);color:var(--sheet)}
.who{display:flex;align-items:center;gap:10px;font-size:.85rem}
.role{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}

/* pages */
.page{padding-block:22px 56px;display:grid;gap:20px}
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px}
.pagehead p{color:var(--muted);max-width:64ch;margin-top:4px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:grid;gap:14px;min-width:0}
.sheet>header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
label.f{display:grid;gap:3px;font-size:.8rem;color:var(--muted);min-width:0}
label.f input,label.f select,label.f textarea{background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:7px 9px;color:var(--ink);width:100%;min-width:0}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:10px}
.btn{border:1px solid var(--line);background:var(--sheet);border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--redpen)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.small{padding:5px 10px;font-size:.82rem}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.msg{font-size:.88rem;min-height:1.2em}
.msg.ok{color:var(--good)} .msg.bad{color:var(--redpen)}
.notice{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;background:var(--amber-soft);border:1px solid var(--amber);border-radius:var(--radius);padding:10px 14px;font-size:.9rem}
.notice b{color:var(--amber)}
.privacy{display:inline-flex;gap:8px;align-items:center;font-size:.85rem;color:var(--good);background:var(--good-soft);padding:6px 12px;border-radius:999px}

/* auth */
.authpage{min-height:100%;display:grid;place-items:center;padding-block:40px}
.authcard{width:min(100%,440px);background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:26px;display:grid;gap:16px;align-content:start}
/* sign-in page: a colourful hero with the pixel animation beside the sign-in card */
#view-auth{grid-template-columns:minmax(0,1.25fr) minmax(0,440px);gap:28px;align-items:start;place-items:start stretch;max-width:1180px}
#view-auth .authcard{width:100%;position:sticky;top:24px;box-shadow:0 18px 50px -24px rgba(139,61,255,.45);border-top:4px solid #ff1f8f}
.authhero{position:relative;overflow:hidden;border-radius:18px;padding:26px 26px 22px;color:#f3efff;display:grid;gap:14px;
  background:radial-gradient(120% 80% at 100% 0%,#3a1a8a 0%,transparent 60%),radial-gradient(90% 70% at 0% 100%,#5a0f4a 0%,transparent 55%),#140a33;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 24px 60px -28px rgba(255,31,143,.55)}
.authhero h1{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.08;color:#fff;font-stretch:80%}
.herobrand{font-size:1.5rem;color:#fff}
.herocanvas,.loadbox canvas{width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:10px;display:block;border:2px solid rgba(255,255,255,.12)}
.pixel{font-family:"Press Start 2P",ui-monospace,monospace;font-size:.68rem;letter-spacing:.02em;line-height:1.7}
.heroeyebrow{color:#ffd400;text-transform:uppercase}
.herolead{font-size:1.04rem;color:#ddd5ff;max-width:60ch}
.herofeats{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.herofeats li{display:grid;gap:2px;padding:11px 12px 11px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);position:relative}
.herofeats li::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--c);box-shadow:0 0 12px var(--c)}
.herofeats b{color:var(--c);font-family:var(--display);font-stretch:85%;font-size:1rem;filter:brightness(1.25)}
.herofeats span{font-size:.86rem;color:#cfc6f2;line-height:1.4}
.heronote{font-size:.84rem;color:#b7aee0}
.loadbox{width:min(92vw,420px);display:grid;gap:12px;justify-items:center;text-align:center;padding:18px;border-radius:16px;background:#140a33;color:#ffd400;box-shadow:0 20px 50px -25px rgba(255,31,143,.6)}
@media (max-width:900px){
  #view-auth{grid-template-columns:1fr;gap:18px;padding-block:16px 32px}
  #view-auth .authcard{position:static;order:2}
  .authhero{order:1;padding:18px}
  .herofeats{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.herofeats{grid-template-columns:1fr 1fr;gap:8px}.herofeats span{display:none}.herofeats li{padding:8px 8px 8px 13px}.herofeats b{font-size:.88rem}.herolead{font-size:.95rem}}
#view-auth .btn.primary{background:linear-gradient(90deg,#ff1f8f,#8b3dff);border-color:transparent;color:#fff}
#view-auth .btn.primary:hover{filter:brightness(1.08)}
#view-auth .tab[aria-selected="true"]{background:#140a33;border-color:#140a33;color:#fff}
.authcard form{display:grid;gap:12px}
.authcard .brand{font-size:1.4rem}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tab{border:1px solid var(--line);background:var(--sheet);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:.85rem;font-weight:700}
.tab[aria-selected="true"]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem}
.divider::before,.divider::after{content:"";flex:1;border-top:1px solid var(--line)}

/* upload */
.drop{border:2px dashed var(--line);border-radius:var(--radius);padding:22px 14px;text-align:center;display:grid;gap:6px;cursor:pointer;background:var(--paper);position:relative}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop strong{font-family:var(--display);font-stretch:85%;font-size:1.05rem}
.drop small{color:var(--muted)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.review{border:1px solid var(--line);border-radius:8px;padding:12px;display:grid;gap:10px}
.review .meta{color:var(--muted);font-size:.85rem}
.review .err{color:var(--redpen);font-size:.88rem}

/* results */
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.8rem;padding:3px 10px;border-radius:999px;white-space:nowrap}
.chip.risk{background:var(--redpen-soft);color:var(--redpen)}
.chip.ok{background:var(--good-soft);color:var(--good)}
.chip.neutral{background:var(--soft);color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:0}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:2px;margin:0 -1px -1px 0}
.tile dt{font-size:.75rem;color:var(--muted)}
.tile dd{margin:0;font-family:var(--display);font-stretch:85%;font-weight:800;font-size:1.6rem;line-height:1.1;font-variant-numeric:tabular-nums}
.tile dd small{font-family:var(--body);font-weight:400;font-size:.78rem;color:var(--muted)}
.tile.bad dd{color:var(--redpen)} .tile.warn dd{color:var(--amber)}
.delta{font-size:.78rem;font-variant-numeric:tabular-nums}
.delta.up{color:var(--good)} .delta.down{color:var(--redpen)}
.charts{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
@media (max-width:760px){.charts{grid-template-columns:minmax(0,1fr)}}
.chart{border:1px solid var(--line);border-radius:8px;padding:12px;display:grid;gap:8px;min-width:0}
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-family:var(--body);font-size:11px}
.chart .val{fill:var(--ink);font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.78rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
th{font-family:var(--display);font-stretch:85%;font-weight:700;font-size:.8rem;color:var(--muted);background:var(--soft)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.wrap{white-space:normal;min-width:200px}
tbody tr:last-child td{border-bottom:0}
tr.total td{font-weight:700;background:var(--soft)}
td input,td select{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:4px 6px;width:100%;min-width:60px}
.bar{display:inline-block;height:8px;border-radius:4px;background:var(--accent);vertical-align:middle}
.mark{font-variant-numeric:tabular-nums;font-weight:700}
.mark.l1{color:var(--redpen)} .mark.l2{color:var(--amber)}
.xtag{display:inline-block;font-weight:700;color:var(--redpen);background:var(--redpen-soft);border-radius:4px;padding:0 6px;margin-right:4px;font-size:.78rem}
.annex{display:grid;gap:12px}
.annex label.f{font-size:.85rem;color:var(--ink);font-weight:700}
.annex textarea{min-height:88px;resize:vertical;line-height:1.45;font-weight:400}
.hint{font-weight:400;color:var(--muted);font-size:.78rem}
.exports{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.export{border:1px solid var(--line);border-radius:8px;padding:14px;display:grid;gap:8px;align-content:start}
.export p{color:var(--muted);font-size:.86rem}
.empty{color:var(--muted);font-size:.92rem;padding:10px 2px}
.loading{display:grid;place-items:center;min-height:60vh;color:var(--muted)}
@media (max-width:700px){.nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap}.nav button{white-space:nowrap}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* subscription, legal and owner console */
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; margin: 4px 0; }
.check input { margin-top: 3px; flex: none; width: 16px; height: 16px; }
footer.legal, .legal-links { text-align: center; font-size: 13px; color: var(--muted); padding: 24px 0 32px; }
.legal-links { padding: 8px 0 0; }
footer.legal a, .legal-links a { color: inherit; }
.notice.warn { background: var(--amber-soft); border-color: var(--amber); }
.notice.bad { background: var(--redpen-soft); border-color: var(--redpen); }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* interventions */
.chip.warn{background:var(--amber-soft);color:var(--amber)}
.muted{color:var(--muted)}
.below{color:var(--redpen);font-weight:700}
.up{color:var(--good);font-weight:700}
.hint.up{font-weight:700}
.tchip{display:inline-block;margin:2px 4px 2px 0;padding:2px 8px;border-radius:8px;font-size:.78rem;line-height:1.5;border:1px solid var(--line);background:var(--soft);white-space:normal}
.tchip.miss{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.tchip.low{background:var(--redpen-soft);border-color:var(--redpen);color:var(--redpen)}
.tchip.done{background:var(--good-soft);border-color:var(--good);color:var(--good);text-decoration:line-through}
table.ivt td{vertical-align:top}
table.ivt tr.open>td{background:var(--accent-soft)}
tr.planrow>td{background:var(--soft);padding:14px 16px}
tr.donerow>td{background:var(--good-soft)}
.plan{display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1.4fr);gap:16px 24px}
.plan .facts{grid-column:1/-1;font-size:.88rem}
.plan .facts p{margin:4px 0}
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 12px}
ul.method{margin:0;padding-left:20px;line-height:1.55}
ul.method li{margin:4px 0}
@media (max-width:720px){.plan{grid-template-columns:1fr}}
table.ivt td.wrap{min-width:150px;max-width:230px}
table.ivt th{white-space:normal}

/* diagnostics, moderation, improvement plan */
.bar.bad{background:var(--redpen)} .bar.mid{background:var(--amber)}
.tablewrap.grid{max-height:70vh;overflow:auto}
table.dgm th,table.dgm td{padding:4px 6px}
table.dgm input.mk{width:52px;padding:4px;text-align:right}
table.dgm .stick{position:sticky;left:0;background:var(--sheet);z-index:1;white-space:nowrap}
table.dgm thead th{position:sticky;top:0;background:var(--soft);z-index:2}
table.dgm thead th.stick{z-index:3}
table.sip textarea{width:100%;font:inherit;font-size:.88rem}
table.sip td{vertical-align:top}
details summary{cursor:pointer;font-weight:700}

/* home screen */
.homegrid{display:grid;grid-template-columns:minmax(320px,1fr) minmax(0,1.35fr);gap:18px;align-items:start}
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.app{display:grid;grid-template-rows:auto auto 1fr auto;gap:4px;text-align:left;background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius);padding:14px;cursor:pointer;color:var(--ink);font:inherit;min-height:150px;transition:border-color .15s,transform .15s}
.app:hover,.app:focus-visible{border-color:var(--accent);transform:translateY(-1px)}
.app .aicon{display:inline-flex;width:42px;height:42px;border-radius:10px;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);margin-bottom:6px}
.app .atitle{font-weight:800}
.app .adesc{font-size:.84rem;color:var(--muted)}
.app .astat{font-size:.8rem;font-weight:700;color:var(--accent);margin-top:6px}
.remlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.remlist li{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--sheet)}
.remlist li.lv0{border-color:var(--redpen);background:var(--redpen-soft)}
.remlist li.lv1{border-color:var(--amber)}
.remlist .rtext{font-size:.9rem}
.remlist .ract{grid-column:2;display:flex;gap:10px;align-items:center}
.remform{display:grid;grid-template-columns:1fr auto auto;gap:6px;margin:6px 0 10px}
.mylist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mylist li{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.mylist li .check{flex:1}
.mylist li.done span{text-decoration:line-through;color:var(--muted)}
@media (max-width:900px){.homegrid{grid-template-columns:1fr}}
@media (max-width:480px){.remform{grid-template-columns:1fr 1fr}.remform input:first-child{grid-column:1/-1}.apps{grid-template-columns:1fr 1fr}.app{min-height:130px;padding:12px}}

/* ---------------------------------------------------------------- section colours
   Each tab has its own bright (neon) colour, used the same way on the top menu, the Home grid and inside the page:
   --sec is the fill, --on the text that sits on the fill. Coloured text on a light page uses a darker mix for legibility. */
[data-view="home"],[data-go="home"],[data-sec="home"]{--sec:#0ea5e9;--on:#06121a}
[data-view="marksheets"],[data-go="marksheets"],[data-sec="marksheets"]{--sec:#2f6bff;--on:#fff}
[data-view="results"],[data-go="results"],[data-sec="results"]{--sec:#8b3dff;--on:#fff}
[data-view="risk"],[data-go="risk"],[data-sec="risk"]{--sec:#ff2e4d;--on:#fff}
[data-view="interventions"],[data-go="interventions"],[data-sec="interventions"]{--sec:#ff1f8f;--on:#fff}
[data-view="diagnostics"],[data-go="diagnostics"],[data-sec="diagnostics"]{--sec:#00d9e0;--on:#04191b}
[data-view="moderation"],[data-go="moderation"],[data-sec="moderation"]{--sec:#16e07a;--on:#04190d}
[data-view="plan"],[data-go="plan"],[data-sec="plan"]{--sec:#ff9500;--on:#1d1100}
[data-view="grade"],[data-go="grade"],[data-sec="grade"]{--sec:#5b5bff;--on:#fff}
[data-view="staff"],[data-go="staff"],[data-sec="staff"]{--sec:#b6f000;--on:#141b00}
[data-view="profile"],[data-go="profile"],[data-sec="profile"]{--sec:#ffd400;--on:#1d1800}
[data-view="platform"],[data-go="platform"],[data-sec="platform"]{--sec:#e83cff;--on:#fff}
:root{--mixk:#000;--mixp:52%}
@media (prefers-color-scheme: dark){:root{--mixk:#fff;--mixp:82%}}
/* top menu: every tab in its colour, the open tab filled */
.nav button[data-view]{background:color-mix(in srgb,var(--sec) 16%,transparent);color:color-mix(in srgb,var(--sec) var(--mixp),var(--mixk));box-shadow:inset 0 -3px 0 var(--sec)}
.nav button[data-view]:hover{background:color-mix(in srgb,var(--sec) 30%,transparent);color:color-mix(in srgb,var(--sec) var(--mixp),var(--mixk))}
.nav button[data-view][aria-current="page"]{background:var(--sec);color:var(--on);box-shadow:0 2px 10px color-mix(in srgb,var(--sec) 45%,transparent)}
/* home grid tiles */
.app{border-top:5px solid var(--sec);background:color-mix(in srgb,var(--sec) 7%,var(--sheet))}
.app:hover,.app:focus-visible{border-color:var(--sec);box-shadow:0 6px 20px color-mix(in srgb,var(--sec) 28%,transparent)}
.app .aicon{background:var(--sec);color:var(--on)}
.app .astat{color:color-mix(in srgb,var(--sec) var(--mixp),var(--mixk))}
/* inside a page: a bar on the page title, a short colour line under each subheading, the open sub-tab filled */
main[data-sec] .pagehead h1{border-left:7px solid var(--sec);padding-left:12px}
main[data-sec] .sheet > header h2,main[data-sec] .sheet h3{position:relative;padding-bottom:7px}
main[data-sec] .sheet > header h2::after,main[data-sec] .sheet h3::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;border-radius:2px;background:var(--sec)}
main[data-sec] .sheet h3::after{width:26px}
main[data-sec] .tab[aria-selected="true"]{background:var(--sec);border-color:var(--sec);color:var(--on)}
main[data-sec] .tab:hover{border-color:var(--sec)}
/* term comparison */
.chg{font-weight:700;white-space:nowrap} .chg.up{color:var(--good)} .chg.down{color:var(--redpen)}
th.hl{background:color-mix(in srgb,var(--sec,var(--accent)) 18%,var(--soft))}
svg.spark{vertical-align:middle}

/* ---------------------------------------------------------------- mobile */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.menubtn{display:none}
.fold{display:none}
@media (max-width:820px){
  body{font-size:15px}
  input,select,textarea{font-size:16px} /* stops phones zooming in on every tap */
  .topbar .wrap{display:grid;grid-template-columns:1fr auto;gap:8px;padding-block:8px}
  .topbar .school{grid-column:1/-1;grid-row:2;font-size:.8rem;margin-top:-6px}
  .topbar.open .school{display:block}
  .menubtn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:8px 10px 8px 14px;font:inherit;font-weight:800;cursor:pointer;background:var(--sec);color:var(--on);box-shadow:0 2px 10px color-mix(in srgb,var(--sec) 40%,transparent);max-width:62vw}
  .menubtn #menuLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav,.who{display:none!important}
  .topbar.open .nav{display:grid!important;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin:6px 0 0;overflow:visible;max-height:calc(100vh - 150px);overflow-y:auto;padding-bottom:4px}
  .topbar.open .nav button[data-view]{min-height:48px;justify-content:flex-start;text-align:left;white-space:normal;border-radius:10px;padding:10px 12px;font-size:.95rem}
  .topbar.open .who{display:flex!important;grid-column:1/-1;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
  .topbar.open{box-shadow:0 12px 30px rgba(0,0,0,.18)}
  /* page header and filters */
  .pagehead{flex-direction:column;align-items:stretch;gap:10px}
  .pagehead p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem}
  .pagehead h1{font-size:1.45rem}
  .filters{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .filters .f, .filters select, .filters input{width:100%!important;min-width:0}
  .filters > button{grid-column:1/-1}
  /* foldable sections: tap the heading (or the arrow) to hide or show a section */
  .sheet.foldable > header{flex-wrap:wrap;gap:8px}
  .sheet.foldable > header h2{cursor:pointer;user-select:none}
  .fold{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--ink);cursor:pointer;flex:none;order:-1;transition:transform .15s}
  .sheet.folded .fold{transform:rotate(-90deg)}
  .sheet.folded > :not(header){display:none!important}
  .sheet.folded > header{margin-bottom:0}
  .sheet.folded{padding-bottom:12px}
  /* tables: learner column stays in view while you scroll sideways */
  .tablewrap{-webkit-overflow-scrolling:touch}
  .tablewrap table td:first-child,.tablewrap table th:first-child{position:sticky;left:0;background:var(--sheet);z-index:1;box-shadow:1px 0 0 var(--line)}
  .tablewrap table thead th:first-child{background:var(--soft);z-index:2}
  tr.donerow>td:first-child{background:var(--good-soft)}
  tr.planrow>td:first-child{position:static;box-shadow:none;background:var(--soft)}
  /* touch-friendly controls */
  .btn{min-height:40px}
  .btn.small{min-height:34px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .tabs .tab{white-space:nowrap;flex:none;padding:8px 12px}
  .notice{font-size:.85rem;padding:8px 12px}
  .grid2{grid-template-columns:1fr!important}
  .exports{grid-template-columns:1fr!important}
}
@media (max-width:820px){
  main, .sheet, .sheet > *, .homegrid > *, .grid2 > *, .plan > *{min-width:0;max-width:100%}
  .tablewrap{max-width:100%;overflow-x:auto}
  .sheet > header > *{min-width:0;max-width:100%}
  .tabs{max-width:100%;min-width:0}
}
@media (max-width:820px){ #demoNote{display:block} #demoNote:not([hidden]){font-size:.8rem;padding:6px 10px} #subBanner{font-size:.82rem} }
/* dashboard */
[data-view="dash"],[data-go="dash"],[data-sec="dash"]{--sec:#00f0c8;--on:#002a22}
[data-view="profile"],[data-go="profile"],[data-sec="profile"]{--sec:#9aa8b8;--on:#10161c}
table.heat td{padding:4px}
table.heat .cell{display:grid;width:100%;min-width:74px;border:0;border-radius:8px;padding:6px 8px;font:inherit;cursor:pointer;text-align:center;line-height:1.15}
table.heat .cell small{font-size:.72rem;opacity:.8}
table.heat .cell.ok{background:var(--good-soft);color:var(--good)}
table.heat .cell.warn{background:var(--amber-soft);color:var(--amber)}
table.heat .cell.risk{background:var(--redpen-soft);color:var(--redpen)}
table.heat .cell:hover{outline:2px solid var(--sec)}
.yes{color:var(--good);font-weight:800} .no{color:var(--redpen);font-weight:800}
.gradepick{display:flex;flex-wrap:wrap;gap:2px 12px}
.dept{display:grid;grid-template-columns:200px 1fr auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.demoas{display:inline-flex;gap:8px;align-items:center;margin-left:auto;font-weight:700}
@media (max-width:820px){.dept{grid-template-columns:1fr}.demoas{margin-left:0}}
.gradepick .check{gap:4px;margin:2px 0}

/* ---------------------------------------------------------------- grouped menu */
.navgroup{position:relative;display:inline-flex}
.nav .ghead{display:inline-flex;align-items:center;gap:6px}
.nav .ghead .gchev{transition:transform .15s}
.navgroup.open > .ghead .gchev{transform:rotate(180deg)}
.navgroup.current > .ghead{background:var(--sec);color:var(--on);box-shadow:0 2px 10px color-mix(in srgb,var(--sec) 45%,transparent)}
.gmenu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:230px;background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 14px 34px rgba(0,0,0,.18);gap:6px}
.navgroup.open > .gmenu{display:grid}
.gmenu button[data-view]{justify-content:flex-start;text-align:left;padding:9px 12px;border-radius:9px;width:100%}
@media (max-width:820px){
  .topbar.open .navgroup{grid-column:1/-1;display:grid;gap:6px}
  .topbar.open .navgroup > .ghead{min-height:46px;border-radius:10px;padding:10px 12px;justify-content:space-between;font-size:.95rem;width:100%}
  .gmenu{position:static;box-shadow:none;border:0;padding:0 0 4px 12px;min-width:0;background:none;grid-template-columns:1fr 1fr}
  .topbar.open .gmenu button[data-view]{min-height:44px}
}
/* page sections can be folded on every screen, not only phones */
.fold{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--ink);cursor:pointer;flex:none;order:-1;transition:transform .15s}
.sheet.folded .fold{transform:rotate(-90deg)}
.sheet.folded > :not(header){display:none!important}
.sheet.folded{padding-bottom:14px}
.sheet.foldable > header{flex-wrap:wrap;gap:10px}
.sheet.foldable > header h2{cursor:pointer;user-select:none}
.sheet > header{align-items:center}
/* home: sections grouped under headings */
.appgroups{display:grid;gap:14px}
.appgroup{padding:14px 16px}
.appgroup > header h2{font-size:1rem}
.appgroup .apps{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.appgroup[data-sec] > header h2::after{background:var(--sec)}
.sheet.foldable > header > .fold + *{margin-right:auto;text-align:left}
/* curriculum coverage */
[data-view="coverage"],[data-go="coverage"],[data-sec="coverage"]{--sec:#ff7a59;--on:#1f0a03}
table.cc td{vertical-align:top}
table.cc textarea{width:100%;min-width:300px;font:inherit;font-size:.88rem}
.atpchips{margin-top:6px}
@media (min-width:821px){ .sheet.foldable > header{flex-wrap:nowrap} .sheet.foldable > header > .fold + *{flex:1 1 auto;min-width:0} }
.atpchips .tchip.done{text-decoration:none}
.atpchips .tchip.done::before{content:"✓ "}
.atpchips .tchip.miss::before{content:"○ "}

/* teacher file and report comments */
[data-view="tfile"],[data-go="tfile"],[data-sec="tfile"]{--sec:#ff4fd8;--on:#2a0024}
[data-view="comments"],[data-go="comments"],[data-sec="comments"]{--sec:#7cf03a;--on:#0f2200}
.tflist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tflist li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--sheet)}
.tfmark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800}
.tf-ok .tfmark{background:var(--good-soft);color:var(--good)}.tf-part .tfmark{background:var(--amber-soft);color:var(--amber)}.tf-no .tfmark{background:var(--redpen-soft);color:var(--redpen)}.tf-na .tfmark{background:var(--soft);color:var(--muted)}
.tf-na{opacity:.75}
.tfgrid td.tf-ok{color:var(--good);font-weight:800}.tfgrid td.tf-part{color:var(--amber);font-weight:800}.tfgrid td.tf-no{color:var(--redpen);font-weight:800}.tfgrid td.tf-na{color:var(--muted)}
.tfgrid tr.sel td{background:var(--accent-soft)}
.cmtable textarea{font-size:.9rem;line-height:1.4}
@media (max-width:640px){.tflist li{grid-template-columns:30px 1fr}.tflist .tfact{grid-column:2}}

/* school picker on registration */
.segtabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.segtabs button{border:1.5px solid var(--line);background:var(--sheet);border-radius:999px;padding:7px 14px;cursor:pointer;font-weight:700}
.segtabs button[aria-checked="true"]{background:linear-gradient(90deg,#ff1f8f,#8b3dff);border-color:transparent;color:#fff}
.schoolpick{display:grid;gap:6px}
.schoolresults{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--sheet)}
.schoolresults:empty{display:none}
.schoolresults li{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line);display:grid;gap:1px}
.schoolresults li:last-child{border-bottom:0}
.schoolresults li:hover,.schoolresults li[aria-selected="true"]{background:var(--accent-soft)}
.schoolresults li small{color:var(--muted)}
.picked{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--good-soft);color:var(--ink)}

[data-view="verify"],[data-go="verify"],[data-sec="verify"]{--sec:#ffb703;--on:#1d1300}

/* ---------- simpler home screen (Oct 2026): one attention card, then roomy tiles without boxes ---------- */
.homeattn{max-width:none;margin-bottom:26px}
.attn{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.attn li{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)}
.attn li:last-child{border-bottom:0}
.attn .dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}
.attn li.lv0 .dot{background:var(--redpen)} .attn li.lv1 .dot{background:var(--amber)} .attn li.lv2 .dot{background:var(--accent)}
.attn .rtext{font-size:.95rem}
.attn .ract{display:flex;gap:8px;align-items:center}
.iconbtn{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.95rem;padding:4px 6px;border-radius:6px}
.iconbtn:hover{background:var(--soft);color:var(--ink)}
.attnfoot{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px}
.minebox{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.homeapps{display:grid;gap:30px}
.setlabel{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;margin:0 0 12px}
.homeapps .apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.homeapps .app{min-height:0;padding:20px 18px;gap:8px;grid-template-rows:auto auto auto;border-radius:14px}
.homeapps .app .atitle{font-size:1.02rem}
.homeapps .app .astat{margin-top:0}
.homeapps .app:hover{transform:translateY(-2px)}
@media (max-width:480px){.homeapps .apps{grid-template-columns:1fr 1fr;gap:12px}.homeapps .app{padding:14px 12px}.attn li{grid-template-columns:10px 1fr}.attn .ract{grid-column:2}}

/* ---------- one colour per section, none repeated ---------- */
[data-view="home"],[data-go="home"],[data-sec="home"]{--sec:#334155;--on:#fff}
[data-view="dash"],[data-go="dash"],[data-sec="dash"]{--sec:#0f766e;--on:#fff}
[data-view="marksheets"],[data-go="marksheets"],[data-sec="marksheets"]{--sec:#1d4ed8;--on:#fff}
[data-view="results"],[data-go="results"],[data-sec="results"]{--sec:#7c3aed;--on:#fff}
[data-view="risk"],[data-go="risk"],[data-sec="risk"]{--sec:#dc2626;--on:#fff}
[data-view="grade"],[data-go="grade"],[data-sec="grade"]{--sec:#0284c7;--on:#fff}
[data-view="interventions"],[data-go="interventions"],[data-sec="interventions"]{--sec:#db2777;--on:#fff}
[data-view="comments"],[data-go="comments"],[data-sec="comments"]{--sec:#4338ca;--on:#fff}
[data-view="coverage"],[data-go="coverage"],[data-sec="coverage"]{--sec:#ea580c;--on:#fff}
[data-view="diagnostics"],[data-go="diagnostics"],[data-sec="diagnostics"]{--sec:#65a30d;--on:#fff}
[data-view="moderation"],[data-go="moderation"],[data-sec="moderation"]{--sec:#15803d;--on:#fff}
[data-view="plan"],[data-go="plan"],[data-sec="plan"]{--sec:#ca8a04;--on:#fff}
[data-view="tfile"],[data-go="tfile"],[data-sec="tfile"]{--sec:#c026d3;--on:#fff}
[data-view="verify"],[data-go="verify"],[data-sec="verify"]{--sec:#92400e;--on:#fff}
[data-view="profile"],[data-go="profile"],[data-sec="profile"]{--sec:#78716c;--on:#fff}
[data-view="staff"],[data-go="staff"],[data-sec="staff"]{--sec:#9f1239;--on:#fff}
[data-view="platform"],[data-go="platform"],[data-sec="platform"]{--sec:#0e7490;--on:#fff}