/* Mathly's narrow practice path: progress, the next skill, and each unit's winding trail. */
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&family=Secular+One&family=STIX+Two+Text:wght@400;600&display=swap");
#mathView{
color-scheme:dark;
/* the night sky: a deep blue ground, starlight, gold for mastery, aurora for the next step, ember for the streak */
--bg:#060A19; --night-2:#0E1532; --surface:#121B3B; --surface-2:#18234A; --ink:#F2EFFF; --muted:#9BA5CD; --dim:#5B6694; --line:#27335F;
--ok:#6CC08A; --ok-bg:#12291B; --sumac:#F08A96; --sumac-bg:#33161B; --amber:#E0B45A; --amber-bg:#2E2512;
--olive:#A6C77A; --olive-soft:#1E2618;
--gold:#F7C948; --gold-deep:#B5841A; --starlight:#EAF0FF; --aurora:#7EE3C8; --on-aurora:#05231B; --ember:#FF8B5C; --ember-bg:#3A1D18;
--owl:#8C6A4A; --owl-belly:#E1C496; --owl-eye:#FFF8E6; --owl-pupil:#1B1530; --beak:#F29A4A;
--mx-accent:#7EE3C8; --mx-accent-soft:#163A36; --mx-on-accent:#05231B;
--u-t:#93B85F; --u-k:#B89BEB; --u-q:#6FB3D2; --u-e:#7C9BE6; --u-a:#C99BD8; --u-z:#9C8FD6; --u-r:#C8C26A;
--u-h:#E0915A; --u-s:#5CA8C2; --u-m:#D6A3E0; --u-n:#5CC2B2; --u-p:#E0B45A; --u-w:#D98AAE; --u-d:#A9B7F2;
--mx-scrim:rgb(3 5 14 / .74); --glass:rgb(9 14 34 / .86);
--f-math:"STIX Two Text","Cambria Math","Times New Roman",serif;
--f-display:"Secular One","Rubik",system-ui,sans-serif;
--f-body:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
font-family:var(--f-body);
}
html.math-on, html.math-on body{overflow:hidden}
#mathView{position:fixed;inset:0;z-index:60;overflow:auto;overscroll-behavior:contain;background:radial-gradient(120% 60% at 85% -10%,rgb(52 70 170 / .32),transparent 60%),radial-gradient(90% 50% at 0% 40%,rgb(120 60 160 / .16),transparent 70%),var(--bg);background-attachment:fixed;color:var(--ink);
padding-block:max(12px, env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-bottom, 0px));
padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
#mathView[hidden]{display:none}
#mathView .u-t{--uc:var(--u-t)} #mathView .u-k{--uc:var(--u-k)} #mathView .u-q{--uc:var(--u-q)} #mathView .u-e{--uc:var(--u-e)}
#mathView .u-a{--uc:var(--u-a)} #mathView .u-z{--uc:var(--u-z)} #mathView .u-r{--uc:var(--u-r)} #mathView .u-h{--uc:var(--u-h)}
#mathView .u-s{--uc:var(--u-s)} #mathView .u-m{--uc:var(--u-m)} #mathView .u-n{--uc:var(--u-n)} #mathView .u-p{--uc:var(--u-p)}
#mathView .u-w{--uc:var(--u-w)} #mathView .u-d{--uc:var(--u-d)}
/* units split off an older unit keep its colour */
#mathView .u-i{--uc:var(--u-k)} #mathView .u-l,#mathView .u-o{--uc:var(--u-a)} #mathView .u-v{--uc:var(--u-e)}
#mathView .u-g,#mathView .u-z2{--uc:var(--u-z)} #mathView .u-t2{--uc:var(--u-t)} #mathView .u-q2{--uc:var(--u-q)} #mathView .u-b,#mathView .u-c{--uc:var(--u-m)}
#mathView h1,#mathView h2,#mathView h3{font-family:var(--f-display);font-weight:400;margin:0;text-wrap:balance}
#mathView button{font-family:var(--f-body)}
#mathView button:focus-visible{outline:3px solid var(--mx-accent);outline-offset:2px}
#mathView .m{font-family:var(--f-math);direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-size:1.05em}
/* an equation drawn as a picture by math-tex.js */
#mathView .m.m-img{font-size:1.12em}
#mathView .m-img svg{display:inline-block;overflow:visible;max-width:none}
.mx-wrap{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.mx-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mx-top h1{font-size:28px;line-height:1.15;color:var(--mx-accent)}
.mx-sub{margin:2px 0 0;color:var(--muted);font-size:15px}
.mx-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mx-btn{border:1px solid var(--mx-accent);background:transparent;color:var(--mx-accent);font:700 14px/1 var(--f-body);padding:9px 14px;border-radius:999px;cursor:pointer}
.mx-btn.solid{background:var(--mx-accent);color:var(--mx-on-accent)}
.mx-note{margin:0;color:var(--muted);font-size:14px}
.mx-subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mx-subject-card{--exam:var(--mx-accent);display:flex;align-items:center;gap:12px;min-width:0;padding:14px;border:1px solid color-mix(in srgb,var(--exam) 48%,var(--line));border-radius:16px;background:linear-gradient(130deg,color-mix(in srgb,var(--exam) 14%,var(--surface)),var(--surface));color:var(--ink);text-align:start;cursor:pointer}
.mx-subject-card:hover{border-color:var(--exam);transform:translateY(-1px)}
.mx-subject-icon{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--exam) 22%,var(--bg));color:var(--exam);font:700 24px/1 var(--f-body)}
.mx-subject-card>span:nth-child(2){display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.mx-subject-card b{font-size:18px}.mx-subject-card small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx-subject-card i{color:var(--exam);font-size:26px;font-style:normal}
.mx-subject-empty{--exam:var(--mx-accent);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;border:1px solid color-mix(in srgb,var(--exam) 45%,var(--line));border-radius:18px;background:var(--surface);padding:32px 20px}.mx-subject-empty>span{font-size:42px}.mx-subject-empty h2{color:var(--exam)}.mx-subject-empty p{max-width:480px;margin:0;color:var(--muted);line-height:1.5}
.mx-subject-left{display:flex;align-items:center;gap:6px}
.mx-subject-dots{display:inline-flex;gap:3px;flex:none}.mx-subject-dots>span{width:8px;height:8px;border-radius:50%;background:var(--exam)}.mx-subject-dots>span.past{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--exam) 55%,var(--line))}
.mx-subject-bar{display:block;height:6px;border-radius:99px;background:color-mix(in srgb,var(--exam) 28%,var(--line));overflow:hidden;margin-top:2px}.mx-subject-bar>span{display:block;height:100%;border-radius:inherit;background:var(--exam)}
.mx-subject-count{flex:none;display:flex;flex-direction:column;align-items:center;min-width:48px;padding:6px 8px;border-radius:12px;background:color-mix(in srgb,var(--exam) 14%,var(--bg));line-height:1.1}
.mx-subject-card .mx-subject-count b{font:700 22px/1.1 var(--f-display)}.mx-subject-card .mx-subject-count small{font-size:11px}
.mx-subject-count.soon{background:var(--amber-bg);color:var(--amber)}.mx-subject-count.urgent{background:var(--sumac-bg);color:var(--sumac)}
.mx-subject-count.soon small,.mx-subject-count.urgent small{color:inherit}
.mx-subject-card.is-over{opacity:.55;filter:saturate(.4)}.mx-subject-card.is-over:hover{opacity:.8}
@media (max-width:520px){.mx-subject-grid{grid-template-columns:1fr}}
/* a skill's sheet */
.mx-layer[hidden]{display:none}
.mx-scrim{position:fixed;inset:0;z-index:61;background:var(--mx-scrim)}
.mx-sheet{position:fixed;inset:auto 0 0 0;z-index:62;max-height:88vh;overflow:auto;background:var(--surface);border-radius:20px 20px 0 0;
box-shadow:0 -6px 30px rgb(0 0 0/.2);display:flex;flex-direction:column;gap:14px;
padding-block:16px calc(24px + env(safe-area-inset-bottom, 0px));
padding-left:max(18px, env(safe-area-inset-left, 0px));padding-right:max(18px, env(safe-area-inset-right, 0px))}
@media (min-width:720px){.mx-sheet{inset:auto calc(50% - 330px) 0 calc(50% - 330px)}}
.mx-sheet>p{margin:0}
.mx-shtop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.mx-shtop h3{font-size:24px;line-height:1.2;margin-top:8px}
.mx-uchip{display:inline-block;font:700 13px/1 var(--f-body);color:var(--uc);border:1px solid var(--uc);padding:5px 10px;border-radius:999px}
.mx-src{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.mx-x{border:0;background:none;color:var(--muted);font-size:22px;line-height:1;padding:6px 10px;border-radius:8px;cursor:pointer}
.mx-hint{background:var(--amber-bg);color:var(--ink);border-radius:12px;padding:10px 12px;font-size:15px;display:flex;flex-direction:column;gap:6px}
.mx-q{background:var(--bg);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.mx-q>p{margin:0;font-size:19px}
.mx-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:420px){.mx-choices{grid-template-columns:1fr}}
.mx-choices button{padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 17px/1.3 var(--f-body);cursor:pointer}
.mx-choices button:hover{border-color:var(--mx-accent)}
.mx-choices button.right{background:var(--ok-bg);border-color:var(--ok)}
.mx-choices button.wrong{background:var(--amber-bg);border-color:var(--amber)} /* a mistake is amber, not alarm red */
.mx-ok,.mx-bad{border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mx-ok{background:var(--ok-bg);color:var(--ok)}
.mx-bad{background:var(--amber-bg)}
.mx-bad b{color:var(--amber)}
.mx-small{font-size:13px;color:var(--muted)}
.mx-sec h4{margin:0 0 6px;font:700 12px/1 var(--f-body);letter-spacing:.06em;color:var(--muted)}
.mx-chips{display:flex;gap:6px;flex-wrap:wrap}
.mx-chips em{font-style:normal;color:var(--muted);font-size:14px}
.mx-chip{border:1px solid var(--uc);background:var(--bg);color:var(--ink);font:600 14px/1 var(--f-body);padding:7px 10px;border-radius:999px;cursor:pointer}
.mx-chip.is-done{background:var(--uc);color:var(--surface)}
.mx-plot{direction:ltr;align-self:center;width:100%;max-width:340px}
.mx-plot svg{display:block;width:100%;height:auto}
.mx-plot .g{stroke:var(--line);stroke-width:1}
.mx-plot .a{stroke:var(--muted);stroke-width:1.5}
.mx-plot .c{fill:none;stroke:var(--uc,var(--starlight));stroke-width:2.5}
.mx-plot circle{fill:var(--uc,var(--starlight))}
.mx-plot text{font:11px var(--f-body);fill:var(--muted)}
/* a photographed problem */
.mx-thumb{display:block;max-width:100%;max-height:180px;object-fit:contain;align-self:center;border-radius:10px;border:1px solid var(--line)}
.mx-pbody{display:flex;flex-direction:column;gap:12px}
.mx-wait{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;text-align:center}
.mx-wait small{color:var(--muted)}
.mx-spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--mx-accent);animation:mx-spin 1s linear infinite}
@keyframes mx-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mx-spin{animation:none}}
.mx-read{background:var(--bg);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.mx-read small{color:var(--muted);font-size:13px}
.mx-read p{margin:0;font-size:20px}
.mx-link{border:0;background:none;padding:2px 0;color:var(--mx-accent);font:600 14px/1.3 var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mx-steps{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:10px}
.mx-steps li{padding-inline-start:4px;line-height:1.5}
.mx-steps li::marker{color:var(--mx-accent);font-weight:700}
.mx-work{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--mx-accent-soft)}
.mx-row{display:flex;gap:8px;flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){.mx-sheet{animation:mx-up .22s ease-out}@keyframes mx-up{from{transform:translateY(30px);opacity:.4}}}
.mx-figure{direction:ltr;align-self:center;width:100%;max-width:340px;text-align:center}
.mx-figure svg{display:block;width:100%;height:auto}
.mx-figure .s{stroke:var(--uc,var(--starlight));stroke-width:2.2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.mx-figure .d{stroke:var(--uc,var(--starlight));stroke-width:1.6;stroke-dasharray:5 4;fill:none}
.mx-figure .m{stroke:var(--ink);stroke-width:1.4;fill:none;opacity:.75}
.mx-figure .g{stroke:var(--line);stroke-width:1}
.mx-figure .ax{stroke:var(--muted);stroke-width:1.4}
.mx-figure circle{fill:var(--uc,var(--starlight))}
.mx-figure text{text-anchor:middle;fill:var(--ink);font:600 13px var(--f-body)}
.mx-figure .v{font:italic 700 15px var(--f-body)}
.mx-figure .n{font:500 9px var(--f-body);fill:var(--muted)}
.mx-figure .t{font:500 13px var(--f-body);fill:var(--muted)}
.mx-figure p{margin:2px 0 4px;font-weight:600;direction:ltr}
.mx-figure small{font-size:12px;color:var(--muted)}
.mx-geometry{direction:ltr;align-self:center;width:100%;max-width:320px;text-align:center}
.mx-geometry svg{display:block;width:100%;height:auto}
.mx-geometry path{stroke:var(--uc,var(--starlight));stroke-width:2;fill:none}
.mx-geometry text{fill:var(--ink);font:16px var(--f-body)}
.mx-geometry small{font-size:12px;color:var(--muted)}
/* Handwritten answer scanning */
.mx-answer{display:flex;flex-direction:column;gap:12px}
.mx-answer > p[role=status]:empty{display:none}
.mx-answer [hidden]{display:none}
.mx-answer-image{display:block;max-width:100%;max-height:420px;object-fit:contain;border-radius:12px;background:#fff}
/* photo by phone (static/answer-scans.js): a window on the phone with the request, and one on the computer while it waits;
both show the same 4-digit code */
.mx-scan-overlay{position:fixed;inset:0;z-index:1000;background:#000c;overflow:auto;padding:20px;display:flex;align-items:center;justify-content:center;animation:mx-scan-in .2s ease-out}
@keyframes mx-scan-in{from{opacity:0;transform:scale(.97)}}
.mx-scan-card h2{margin:0;font-size:22px}
.mx-scan-code{display:flex;justify-content:center;gap:10px;margin:2px 0}
.mx-scan-code span{display:grid;place-items:center;width:58px;height:72px;border-radius:14px;background:#0b0d0e;border:2px solid var(--mx-accent);
color:#fff;font:800 40px/1 var(--f-body,system-ui);font-variant-numeric:tabular-nums;box-shadow:0 0 18px color-mix(in srgb,var(--mx-accent) 30%,transparent)}
.mx-scan-q{padding:10px 12px;border-radius:12px;background:#0b0d0e;border:1px solid #2c3333}
.mx-scan-actions{display:flex;flex-direction:column;gap:10px}
.mx-scan-actions .mx-btn{min-height:50px;font-size:17px}
.mx-btn-quiet{border-color:#485050;color:#d7dcd8}
.mx-push-offer{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid #485050}
.mx-push-offer[hidden]{display:none}
.mx-scan-live{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700}
.mx-scan-dot{width:10px;height:10px;border-radius:50%;background:var(--mx-accent);animation:sky-pulse 1.4s ease-out infinite}
.mx-phone-cta{font-size:15px;padding:12px 18px}
/* the photo button while the phone has the request: its code and progress, in place (no window over the question) */
.mx-phone-live{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px;border-radius:18px;
border:2px solid var(--mx-accent);background:color-mix(in srgb,var(--mx-accent) 8%,transparent);text-align:center}
.mx-phone-live-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.mx-phone-live-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.mx-phone-live-code small{color:var(--muted,#adb7b1)}
.mx-phone-live .mx-scan-code{gap:6px}
.mx-phone-live .mx-scan-code span{width:34px;height:42px;border-radius:9px;font-size:24px}
.mx-phone-live.is-failed{border-color:var(--amber,#f0b35a)}.mx-phone-live.is-failed .mx-phone-live-head{color:var(--amber,#f0b35a)}
.mx-phone-live.is-uploading .mx-phone-live-code{opacity:.6}
@media (prefers-reduced-motion:reduce){.mx-scan-overlay,.mx-scan-dot{animation:none}}
.mx-scan-card{background:#141719;color:#f4f2ec;border:1px solid #485050;border-radius:18px;padding:24px;width:min(520px,100%);display:flex;flex-direction:column;gap:14px;line-height:1.6}
.mx-scan-card p{margin:0}.mx-scan-card [hidden]{display:none}.mx-scan-card small{color:#adb7b1}
.mx-management,.mx-class-editor form{display:flex;flex-direction:column;gap:16px}
.mx-manage-sheet{
inset:0;max-height:none;border-radius:0;box-shadow:none;gap:12px;
padding-top:max(18px,env(safe-area-inset-top,0px));
padding-bottom:max(28px,env(safe-area-inset-bottom,0px));
padding-left:max(18px,calc((100vw - 1100px)/2));
padding-right:max(18px,calc((100vw - 1100px)/2));
}
.mx-manage-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mx-manage-head h3{font-size:30px;color:var(--mx-accent)}
.mx-prompter-title{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:17px;background:var(--bg);color:inherit;margin-top:10px}
.mx-prompter-acts,.mx-prompter-row{display:flex;flex-wrap:wrap;gap:8px}
.mx-prompter-list article[aria-current="true"]{outline:2px solid var(--mx-accent)}
.mx-prompter-text{width:100%;box-sizing:border-box;min-height:220px;padding:12px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:17px;line-height:1.5;resize:vertical;background:var(--bg);color:inherit;margin-block:10px}
.mx-prompter-outline{margin-block:4px 12px}.mx-prompter-outline summary{cursor:pointer;font-weight:600;padding:6px 0}.mx-prompter-outline .mx-prompter-text{min-height:160px}
.mx-manage-spacer{flex:1}
.mx-manage-state{min-height:18px;margin:0;color:var(--muted);font-size:13px}
.mx-manage-modes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--line)}
.mx-manage-modes button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:10px 6px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:700 16px/1.2 var(--f-body);cursor:pointer;text-align:center}
.mx-manage-modes button small{font:600 11px/1.25 var(--f-body);color:var(--muted)}
.mx-manage-modes button[aria-selected="true"]{background:var(--surface);box-shadow:0 1px 4px rgb(0 0 0/.35)}
.mx-manage-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}
.mx-manage-title h4{margin:0;font:400 23px/1.2 var(--f-display);color:var(--mx-accent)}
.mx-manage-title span{color:var(--muted);font-size:13px}
.mx-manage-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mx-manage-list article,.mx-manage-stats article,.mx-access-card{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:12px}
.mx-manage-list article{display:flex;flex-direction:column;gap:4px;min-width:0}
.mx-manage-list article b{overflow:hidden;text-overflow:ellipsis}
.mx-manage-list article small,.mx-manage-stats small,.mx-access-card>small{color:var(--muted)}
.mx-manage-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mx-manage-stats article{display:flex;flex-direction:column;gap:5px;text-align:center}
.mx-manage-stats b{font:400 28px/1 var(--f-display);color:var(--mx-accent)}
.mx-access-card{display:flex;flex-direction:column;gap:9px}
.mx-tag-row{display:flex;gap:6px;flex-wrap:wrap}
.mx-tag-row span{border:1px solid var(--mx-accent);border-radius:999px;padding:5px 9px;color:var(--mx-accent);font-size:12px}
.mx-class-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mx-class-toolbar span{color:var(--muted);font-size:13px}
.mx-class-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mx-class-card,.mx-empty-class{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:16px}
.mx-class-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.mx-class-card h5,.mx-empty-class h5{margin:0;font:400 22px/1.25 var(--f-display);color:var(--ink)}
.mx-class-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mx-btn.danger{border-color:var(--sumac);color:var(--sumac)}
.mx-class-card dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 12px;margin:0;font-size:14px}
.mx-class-card dt{color:var(--muted)}
.mx-class-card dd{margin:0;min-width:0;overflow-wrap:anywhere}
.mx-empty-class p{margin:7px 0 0;color:var(--muted)}
.mx-class-form{display:flex;flex-direction:column;gap:16px}
.mx-class-form>label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.mx-class-form label>small,.mx-class-form legend small{display:block;color:var(--muted);font-size:12px;font-weight:500;margin-top:3px}
.mx-class-form input[type="text"],.mx-class-form input[name="name"],.mx-class-form textarea{box-sizing:border-box;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);padding:11px 12px;font:inherit}
.mx-class-form textarea{min-height:110px;resize:vertical;text-align:left}
.mx-class-form select{box-sizing:border-box;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);padding:11px 12px;font:inherit;text-align:left}
.mx-class-form fieldset{margin:0}
.mx-subject-picks{--exam:var(--mx-accent);display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.mx-subject-picks label{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:13px;padding:9px 10px;cursor:pointer}
.mx-subject-picks label:has(input:checked),.mx-subject-picks label:has(input:indeterminate){border-color:var(--exam);background:color-mix(in srgb,var(--exam) 14%,var(--surface))}
.mx-subject-picks .mx-subject-icon{width:34px;height:34px;border-radius:10px;font-size:18px}
.mx-subject-picks label>span:last-child{display:flex;flex-direction:column;gap:2px;font-weight:700}
.mx-subject-picks label small{color:var(--muted);font-size:11px;font-weight:500}
.mx-subject-units[hidden],.mx-no-subject[hidden]{display:none}
.mx-unit-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mx-unit-picks label{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;padding:10px;cursor:pointer}
.mx-unit-picks label:has(input:checked){border-color:var(--mx-accent);background:var(--mx-accent-soft)}
.mx-unit-picks label span{display:flex;flex-direction:column;gap:2px;font-weight:700}
.mx-unit-picks label small{color:var(--muted);font-size:11px;font-weight:500}
.mx-class-form-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mx-class-form-actions [role="status"]{color:var(--muted);font-size:13px}
.mx-exam-board{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:14px}
.mx-class-card .mx-exam-board{margin-top:16px;background:var(--surface);padding:13px}
.mx-exam-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mx-exam-head h2,.mx-exam-head h4{margin:0;color:var(--mx-accent);font:400 22px/1.25 var(--f-display)}
.mx-exam-head small{color:var(--muted)}
.mx-exam-countdown{--exam:#7FA6F0;display:flex;align-items:center;gap:14px;border:1px solid color-mix(in srgb,var(--exam) 55%,var(--line));border-radius:16px;padding:13px 16px;background:linear-gradient(115deg,color-mix(in srgb,var(--exam) 20%,var(--surface)),var(--surface) 58%)}
.mx-exam-countdown>span{flex:none;width:76px;height:76px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(closest-side,var(--surface) 72%,transparent 74%),conic-gradient(var(--exam) 82%,var(--line) 0);box-shadow:0 0 24px color-mix(in srgb,var(--exam) 20%,transparent)}
.mx-exam-countdown>span b{font:400 24px/1 var(--f-display);color:var(--exam)}.mx-exam-countdown>span small{font-size:10px;color:var(--muted)}
.mx-exam-countdown>div{display:flex;flex-direction:column;gap:3px;min-width:0}.mx-exam-countdown>div>small{color:var(--muted);font-size:12px}.mx-exam-countdown strong{font-size:20px}.mx-exam-countdown time{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;color:var(--ink);font-size:17px;font-weight:800}.mx-exam-countdown time>span{flex-basis:100%;color:var(--exam);font-size:12px;font-weight:700}.mx-exam-countdown time>small{direction:ltr;unicode-bidi:isolate;color:var(--muted);font-size:11px;font-weight:600}
.mx-exam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mx-exam-card{--exam:#7FA6F0;display:flex;align-items:center;gap:9px;min-width:0;border:1px solid color-mix(in srgb,var(--exam) 45%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--exam) 10%,var(--bg));padding:10px}
.mx-exam-card.is-next{outline:2px solid var(--exam);outline-offset:1px}
.mx-exam-icon{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--exam) 22%,var(--bg));color:var(--exam);font:700 19px/1 var(--f-body)}
.mx-exam-card div{display:flex;flex-direction:column;gap:2px;min-width:0}.mx-exam-card b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx-exam-card small{color:var(--muted);font-size:12px}
.exam-geo{--exam:#65B58A}.exam-civics{--exam:#B89BEB}.exam-intro{--exam:#E0B45A}.exam-math{--exam:#7FA6F0}.exam-language{--exam:#D98AAE}.exam-finance{--exam:#93B85F}.exam-science{--exam:#5CC2B2}.exam-english{--exam:#6FB3D2}.exam-literature{--exam:#C99870}.exam-history{--exam:#A3AD9F}.exam-bible{--exam:#D79B62}
.mx-exam-months{display:flex;flex-direction:column;gap:16px}.mx-exam-months section{display:flex;flex-direction:column;gap:8px}.mx-exam-months h5{margin:0;font:400 18px/1.2 var(--f-display);color:var(--ink)}
.mx-exam-board details summary{cursor:pointer;color:var(--mx-accent);font-weight:700}.mx-exam-board details[open] summary{margin-bottom:14px}
.mx-exam-note{margin:0;color:var(--muted);font-size:13px}
.mx-management select{display:block;width:100%;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
.mx-management fieldset{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:12px}
.mx-management input{accent-color:var(--mx-accent)}
.mx-management button:disabled{opacity:.6;cursor:wait}
/* Monitoring (ניטור) */
.mx-mon-card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:12px}
.mx-mon-card h5{margin:0;font:400 20px/1.2 var(--f-display);color:var(--ink)}
.mx-mon-tiles{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:8px}
.mx-mon-tile{display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);min-width:0}
.mx-mon-tile b{font:400 22px/1.15 var(--f-display);font-variant-numeric:tabular-nums}
.mx-mon-tile small,.mx-mon-tile span{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.mx-mon-tile.ready{border-color:var(--ok);background:var(--ok-bg)}.mx-mon-tile.ready b{color:var(--ok)}
.mx-mon-tile.busy{border-color:var(--amber);background:var(--amber-bg)}.mx-mon-tile.busy b,.mx-mon-tile.warn b{color:var(--amber)}
.mx-mon-tile.bad{border-color:var(--sumac);background:var(--sumac-bg)}.mx-mon-tile.bad b{color:var(--sumac)}
.mx-mon-lower{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px}.mx-mon-logs{grid-column:1/-1}
.mx-mon-action{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}.mx-mon-action:last-child{border-bottom:0}
.mx-mon-action i{font-style:normal}.mx-mon-action b,.mx-mon-action small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx-mon-action b{font-size:14px}
.mx-mon-action small,.mx-mon-action time{color:var(--muted);font-size:12px}.mx-mon-action time{white-space:nowrap}
.mx-mon-panel{padding:12px;border:1px solid var(--line);border-radius:12px;min-width:0;display:flex;flex-direction:column;gap:6px}
.mx-mon-panel h6{margin:0;font:700 15px/1.3 var(--f-body)}
.mx-mon-flags,.mx-mon-verdicts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13px}
.mx-mon-flags li::before{content:"●";margin-inline-end:7px}.mx-mon-flags .on::before{color:var(--ok)}.mx-mon-flags .off::before{color:var(--dim)}
.mx-mon-verdicts li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-bottom:4px}.mx-mon-verdicts li:last-child{border-bottom:0}
.mx-mon-log{padding:7px 0;border-bottom:1px solid var(--line)}.mx-mon-log:last-child{border-bottom:0}
.mx-mon-log>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.mx-mon-level{padding:1px 7px;border-radius:999px;font:700 11px/1.6 var(--f-body)}.mx-mon-level.warn{background:var(--amber-bg);color:var(--amber)}.mx-mon-level.bad{background:var(--sumac-bg);color:var(--sumac)}
.mx-mon-msg{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}
.mx-mon-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mx-mon-head p{margin:3px 0 0;color:var(--muted);font-size:13px}
.mx-mon-ranges{display:flex;gap:5px}
.mx-mon-ranges button{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:700 13px/1 var(--f-body);cursor:pointer}
.mx-mon-ranges button[aria-pressed="true"]{border-color:var(--mx-accent);background:var(--mx-accent);color:var(--mx-on-accent)}
.mx-mon-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.mx-mon-stats article{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.mx-mon-stats b{display:block;font:400 26px/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--mx-accent)}.mx-mon-stats small{color:var(--muted);font-size:12px}
.mx-mon-legend{display:flex;gap:16px;color:var(--muted);font-size:12px}.mx-mon-legend span{display:flex;align-items:center;gap:5px}
.mx-mon-legend i{display:inline-block;width:16px;height:8px;border-radius:2px;background:var(--mx-accent)}.mx-mon-legend .students i{height:3px;background:var(--gold)}
.mx-mon-chart{width:100%;height:auto;max-height:220px;direction:ltr}
.mx-mon-chart .grid{stroke:var(--line)}.mx-mon-chart .bar{fill:var(--mx-accent);opacity:.82}.mx-mon-chart .bar:hover{opacity:1}
.mx-mon-chart .active-line{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linejoin:round}
.mx-mon-chart text{fill:var(--muted);font:11px var(--f-body)}.mx-mon-chart .active-axis{fill:var(--gold)}
@media (max-width:760px){.mx-mon-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.mx-mon-live{grid-column:1/-1}.mx-mon-lower{grid-template-columns:1fr}.mx-mon-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.mx-mon-tiles,.mx-mon-stats{grid-template-columns:1fr}}
@media (max-width:620px){
.mx-manage-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
.mx-manage-list{grid-template-columns:1fr}
.mx-manage-stats{grid-template-columns:1fr}
.mx-class-cards,.mx-unit-picks{grid-template-columns:1fr}
.mx-exam-grid{grid-template-columns:1fr 1fr}
.mx-class-card-head{flex-direction:column}
.mx-manage-head .mx-btn{padding-inline:10px}
}
@media (max-width:400px){.mx-exam-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.mx-manage-sheet{animation:none}}
.mx-grade{border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.mx-grade h4,.mx-grade p{margin:0}.mx-grade-correct{border-color:var(--ok);background:var(--ok-bg)}
.mx-grade summary{cursor:pointer;color:var(--mx-accent)}.mx-grade details p{margin-top:10px}
.mx-grade-solution{white-space:pre-wrap}.mx-grade small{color:var(--muted)}
.mx-qprog{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.mx-qdots{display:flex;gap:4px;flex-wrap:wrap}
.mx-qdots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.mx-qdots i.ok{background:var(--ok)}
.mx-qdots i.now{outline:2px solid var(--mx-accent);outline-offset:1px}
.mx-count{font:700 11px/1 var(--f-body);padding:4px 7px;border-radius:999px;background:var(--bg);color:var(--muted)}
.mx-content-subject{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.mx-content-subject>h5{display:flex;align-items:baseline;gap:8px;margin:0;font-size:18px;color:var(--exam)}
.mx-content-subject>h5 small{color:var(--muted);font-size:13px;font-weight:500}
.mx-content-unit{border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.mx-content-unit summary{display:flex;flex-direction:column;gap:3px;padding:12px;cursor:pointer}
.mx-content-unit summary small,.mx-content-unit li small{color:var(--muted);font-size:12px}
.mx-content-unit ol{margin:0;padding:0 34px 12px 12px;display:flex;flex-direction:column;gap:8px}
.mx-content-unit li span{display:block}
.mx-pick-subject{margin:10px 0 6px;font-size:14px;color:var(--mx-accent)}
/* ---------- the night sky (math-sky.js): home, path, collection and the rewards ---------- */
#mathView>.mx-wrap{position:relative;z-index:1}
.sky-bg,.sky-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.sky-bg{z-index:0}.sky-fx{z-index:90}
.mx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* top bar */
.mx-top{flex-wrap:wrap;align-items:center}
.mx-brand{display:flex;align-items:center;gap:8px;font:400 24px/1 var(--f-display)}
.mx-brand svg{width:22px;height:22px;fill:var(--gold);filter:drop-shadow(0 0 6px var(--gold))}
.mx-stats{display:flex;gap:6px;margin-inline-start:auto}
.mx-top .mx-acts:empty{display:none}
/* what was gathered and the streak: stays on top while the path scrolls under it */
.mx-hud{position:sticky;top:calc(-1 * max(12px, env(safe-area-inset-top, 0px)));z-index:5;margin:-6px -16px 0;padding:max(12px, env(safe-area-inset-top, 0px)) 16px 10px;
background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mx-hud .mx-stats{justify-content:space-between;margin:0;flex-wrap:wrap}
.sky-chip{display:flex;align-items:center;gap:5px;padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:700 15px/1 var(--f-body);font-variant-numeric:tabular-nums}
.sky-chip svg{width:17px;height:17px;fill:currentColor}
.sky-chip.flame svg{fill:var(--ember)}.sky-chip.flame.cold svg{fill:var(--dim)}
.sky-chip.stars svg{fill:var(--starlight)}.sky-chip.golds svg{fill:var(--gold);filter:drop-shadow(0 0 4px var(--gold))}
.sky-chip.comets i{font-style:normal;font-size:16px;line-height:1;color:var(--aurora)}
button.sky-chip{padding:6px 9px;color:var(--muted);cursor:pointer}
/* the owl */
.sky-owl{display:block;overflow:visible}
.sky-owl .o-b{fill:var(--owl)}.sky-owl .o-belly{fill:var(--owl-belly)}.sky-owl .o-eye{fill:var(--owl-eye)}.sky-owl .o-pupil{fill:var(--owl-pupil)}.sky-owl .o-glint{fill:#fff}
.sky-owl .o-feather{fill:none;stroke:var(--owl);stroke-width:1.6;opacity:.45}
.sky-owl .o-glass{fill:none;stroke:var(--gold);stroke-width:3}
.sky-owl .o-beak{fill:var(--beak)}.sky-owl .o-feet{fill:none;stroke:var(--beak);stroke-width:3;stroke-linecap:round}
.sky-owl .o-lid{fill:var(--owl);transform-box:fill-box;transform-origin:center;transform:scaleY(0);animation:sky-blink 5.5s infinite}
@keyframes sky-blink{0%,94%,100%{transform:scaleY(0)}96%,98%{transform:scaleY(1)}}
.mx-sh h2{font-size:21px}
.mx-sh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mx-sh b{font:400 21px/1.15 var(--f-display)}
.mx-sh>span{color:var(--aurora);font-size:14px}
.mx-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;text-align:center}
.mx-counts div{padding:8px 4px;border-radius:12px;background:var(--surface-2)}
.mx-counts b{display:block;font:400 22px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.mx-counts small{color:var(--muted);font-size:11.5px}
.mx-counts .g b{color:var(--gold)}.mx-counts .k b{color:var(--u-k)}.mx-counts .c b{color:var(--aurora)}
/* constellations: a full picture (home, collection, celebration) */
.mx-con{width:100%;max-width:120px;height:auto;overflow:visible}
.mx-con line{stroke:var(--uc);stroke-linecap:round}
.mx-con line.ghost{stroke-opacity:.22;stroke-width:4;stroke-dasharray:6 12}
.mx-con line.on{stroke-opacity:.9;stroke-width:6}
.mx-con .c-gold{fill:var(--gold)}.mx-con .c-lit,.mx-con .c-next{fill:var(--starlight)}.mx-con .c-fading{fill:var(--starlight);opacity:.35}
.mx-con .c-open,.mx-con .c-locked,.mx-con .c-off{fill:var(--dim)}
line.draw{stroke-dasharray:500;stroke-dashoffset:500;animation:sky-draw 1.1s ease-out forwards}
@keyframes sky-draw{to{stroke-dashoffset:0}}
/* the path */
.mx-pghead{display:flex;flex-direction:column;gap:2px}
.mx-pghead h1,.mx-pghead h2{font-size:26px;color:var(--ink)}
/* today's goal, above the path; opens the streak calendar */
.mx-daily{display:flex;flex-direction:column;gap:8px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s}
.mx-daily:hover{border-color:var(--ember)}
.mx-review,.mx-quiz-card{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-inline-start:4px solid var(--gold);border-radius:18px;background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s}
.mx-review:hover,.mx-quiz-card:hover{border-color:var(--gold)}
#mathView .mx-review-sheet{--uc:var(--starlight)} /* neutral: a unit colour would give the topic away */
.mx-review span,.mx-quiz-card span{color:var(--muted);font-size:13px}.mx-review .mx-dgo,.mx-quiz-card .mx-dgo{color:var(--gold)}
.mx-daily small{color:var(--muted);font-size:13px}
.mx-dline{display:flex;align-items:center;gap:8px;font-size:15px}
.mx-dline b{flex:1;min-width:0}
.mx-dgo{color:var(--muted);font-size:13px;white-space:nowrap}
.mx-dline svg{width:20px;height:20px;fill:var(--ember)}.mx-daily.done .mx-dline svg{fill:var(--gold)}
.mx-meter{display:block;height:10px;border-radius:999px;background:var(--ember-bg);overflow:hidden}
.mx-meter i{display:block;height:100%;border-radius:inherit;background:var(--ember);transition:width .4s}
.mx-daily.done .mx-meter i{background:var(--gold)}
button.sky-chip.flame{padding:6px 11px;color:var(--ink)}
/* the streak calendar */
.mx-streak-sheet{--ice:#8FD3FF;--ice-bg:#16304A}
.mx-shero{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 0}
.mx-shero svg{width:64px;height:64px;fill:var(--ember);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--ember) 60%,transparent))}
.mx-shero.cold svg{fill:var(--dim);filter:none}
.mx-shero div{display:flex;flex-direction:column;line-height:1}
.mx-shero b{font:400 54px/1 var(--f-display);color:var(--ember);font-variant-numeric:tabular-nums}
.mx-shero.cold b{color:var(--ink)}
.mx-shero span{color:var(--muted);font-size:15px;margin-top:4px}
.mx-ssay{text-align:center;color:var(--ink)}
.mx-sstats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mx-sstats div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.mx-sstats b{font:700 22px/1 var(--f-body);font-variant-numeric:tabular-nums}.mx-sstats small{color:var(--muted);font-size:12.5px}
.mx-cal{padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.mx-calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mx-calhead b{font:400 18px/1.2 var(--f-display)}
.mx-calnav{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.mx-calnav:disabled{opacity:.3;cursor:default}
.mx-calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:6px}
.mx-cdow{text-align:center;color:var(--muted);font-size:12px;padding-bottom:4px}
.mx-cday{position:relative;display:grid;place-items:center;height:40px}
.mx-cday b{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:500 14px/1 var(--f-body);font-variant-numeric:tabular-nums;color:var(--muted)}
.mx-cday.jp::before,.mx-cday.jn::after{content:"";position:absolute;top:3px;bottom:3px;width:50%;background:color-mix(in srgb,var(--ember) 32%,transparent)}
.mx-cday.jp::before{inset-inline-start:0}.mx-cday.jn::after{inset-inline-end:0}
.mx-cday.s-met b{background:var(--ember);color:#2A0E05;font-weight:700}
.mx-cday.s-saved b{background:var(--ice-bg);color:var(--ice);box-shadow:inset 0 0 0 2px var(--ice);font-weight:700}
.mx-cday.s-some b::after{content:"";position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:var(--ember)}
.mx-cday.today b{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--aurora);color:var(--ink)}
.mx-cday.today.s-met b{color:#2A0E05}
.mx-cday.future b{color:var(--dim)}
.mx-calkey{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:10px;color:var(--muted);font-size:12px}
.mx-calkey span{display:flex;align-items:center;gap:5px}
.mx-calkey i{width:12px;height:12px;border-radius:50%}
.k-met{background:var(--ember)}.k-saved{background:var(--ice-bg);box-shadow:inset 0 0 0 2px var(--ice)}.k-some{width:6px!important;height:6px!important;background:var(--ember)}
.mx-examsoon{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border:1px solid color-mix(in srgb,var(--ember) 50%,var(--line));border-radius:14px;background:var(--ember-bg);color:var(--ink);font-size:15px;text-align:start;cursor:pointer}
.mx-examsoon span{color:var(--muted);font-size:13px;white-space:nowrap}
/* the path: start, then each unit's orbit (and its quiz), then the finish; a dotted line joins them top to bottom */
.mx-trail{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px;padding-block:6px 10px;container-type:inline-size}
.mx-trail>:not(:first-child)::before{content:"";position:absolute;bottom:100%;left:50%;width:6px;height:30px;margin-left:-3px;
background:radial-gradient(circle,var(--line) 2.6px,transparent 3px) center top/6px 10px repeat-y;pointer-events:none}
.mx-start,.mx-finish{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;font:400 15px/1.2 var(--f-display);color:var(--muted)}
.mx-flag{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--surface-2);border:3px solid var(--aurora)}
.mx-start b{color:var(--aurora)}
.mx-finish>svg{width:30px;height:30px;fill:var(--dim)}
/* a unit's orbit: the unit in the middle, its skills around it in order (math.js, pathView) */
.mx-unit{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;scroll-margin-top:72px}
.mx-stage{--s:min(400px,100cqw);position:relative;width:var(--s);height:var(--s);margin-block:34px 30px}
.mx-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mx-ring path{fill:none;stroke:var(--line);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:.1 3.2}
.mx-ring path.on{stroke:var(--uc);stroke-dasharray:none;stroke-opacity:.9}
.mx-ring .mx-arrow{stroke-width:1.1;stroke-dasharray:none;stroke-linejoin:round;stroke:var(--dim)}
.mx-ring .mx-arrow.on{stroke:var(--uc)}
.mx-ring .mx-back{stroke-opacity:.35}
.mx-uhead{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap}
.mx-hub{position:absolute;left:50%;top:50%;width:calc(var(--s) * .36);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
flex-direction:column;justify-content:center;flex-wrap:nowrap;gap:4px;padding:12px;box-sizing:border-box;text-align:center;
background:radial-gradient(circle,color-mix(in srgb,var(--uc) 22%,var(--surface)) 0 calc(100% - 7px),transparent calc(100% - 6px)),
conic-gradient(var(--uc) calc(var(--p) * 1%),var(--surface-2) 0);
box-shadow:0 6px 0 var(--night-2),0 0 26px color-mix(in srgb,var(--uc) 30%,transparent)}
.mx-hub h2{font-size:clamp(14px,4.2cqw,18px);line-height:1.15;color:var(--ink);margin:0;overflow-wrap:anywhere}
.mx-hub .mx-pill{background:color-mix(in srgb,var(--uc) 35%,var(--bg));color:var(--ink)}
.mx-hub .mx-usub{width:auto;font-size:11.5px}
.mx-unit.full .mx-hub{box-shadow:0 6px 0 var(--night-2),0 0 30px color-mix(in srgb,var(--gold) 55%,transparent)}
.mx-unit.full .mx-hub h2::after{content:" ✦";color:var(--gold)}
/* lesson resources: a teacher opens them from a unit's title (static/math.js, openResources) */
.mx-uhead.is-teach{cursor:pointer}
.mx-res-open{border:1px solid color-mix(in srgb,var(--uc) 55%,var(--line));background:var(--bg);color:var(--ink);border-radius:999px;padding:6px 12px;font:600 13px/1 var(--f-body);cursor:pointer;min-height:32px}
.mx-res-take{align-self:stretch;min-height:52px;font-size:17px}
.mx-res-msg{min-height:1.3em;color:var(--muted);font-size:14px}
.mx-res-form{display:flex;flex-direction:column;gap:14px}
.mx-res-form .mx-thumb{max-height:260px}
.mx-res-form fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:10px}
.mx-res-form legend,.mx-res-form>label{font-weight:700;margin-bottom:6px}
.mx-res-form>label{display:flex;flex-direction:column;gap:6px}.mx-res-form>label small{color:var(--muted);font-weight:500}
.mx-res-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mx-res-kinds label{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border:1px solid var(--line);border-radius:12px;padding:8px;text-align:center;cursor:pointer;font-weight:600}
.mx-res-kinds label:has(input:checked){border-color:var(--mx-accent);background:var(--mx-accent-soft)}
.mx-res-kinds input{position:absolute;opacity:0;pointer-events:none}
.mx-res-kinds label:has(input:focus-visible){outline:2px solid var(--mx-accent);outline-offset:2px}
.mx-res-form input[name="note"],.mx-res-form select{box-sizing:border-box;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);padding:11px 12px;font:inherit}
.mx-res-list{display:flex;flex-direction:column;gap:10px}
.mx-res-item{display:grid;grid-template-columns:88px 1fr auto;gap:12px;align-items:start;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:10px}
.mx-res-img{display:block;width:88px;height:88px;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.mx-res-img img{width:100%;height:100%;object-fit:cover;display:block}
.mx-res-item>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.mx-res-item p{margin:0;overflow-wrap:anywhere}.mx-res-item small{color:var(--muted);overflow-wrap:anywhere}
@media (max-width:380px){.mx-res-kinds{grid-template-columns:1fr}}
.mx-pill{padding:3px 10px;border-radius:999px;font:700 12px/1.4 var(--f-body);background:color-mix(in srgb,var(--uc) 18%,transparent);color:var(--uc);font-variant-numeric:tabular-nums}
.mx-usub{width:100%;color:var(--muted);font-size:13px}
.mx-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:150px}
/* a skill on the orbit: its centre sits on the ring; the name goes above it in the top part, below it elsewhere */
.mx-orb{position:absolute;width:0;height:0;gap:0;left:calc(50% + var(--dx) * var(--s) * .34);top:calc(50% + var(--dy) * var(--s) * .34)}
.mx-orb>.mx-star{position:absolute;left:0;top:0;width:54px;height:54px;transform:translate(-50%,-50%)}
.mx-orb>.mx-star:active{transform:translate(-50%,calc(-50% + 3px))}
.mx-orb>.mx-star.st-next{width:64px;height:64px}
.mx-orb>.mx-lbl{position:absolute;left:0;top:32px;transform:translateX(-50%);width:max-content;max-width:min(112px,28cqw);padding:2px 7px;font-size:12px}
.mx-orb .mx-perch{top:20px;left:-30px}
.mx-orb.up>.mx-lbl{top:auto;bottom:32px}
.mx-orb>.st-next+.mx-lbl{top:38px}.mx-orb.up>.st-next+.mx-lbl{top:auto;bottom:38px}
.mx-num{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 4px;box-sizing:border-box;border-radius:999px;display:grid;place-items:center;
font:700 11.5px/1 var(--f-body);font-variant-numeric:tabular-nums;background:var(--bg);color:var(--muted);border:2px solid var(--line)}
.mx-star.st-lit .mx-num,.mx-star.st-fading .mx-num{border-color:var(--uc);color:var(--ink)}
.mx-star.st-gold .mx-num{border-color:var(--gold);color:var(--gold)}
.mx-star.st-next .mx-num{border-color:var(--aurora);background:var(--aurora);color:var(--on-aurora)}
.mx-star{position:relative;width:62px;height:62px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
background:var(--surface-2);border:3px solid var(--line);box-shadow:0 5px 0 var(--night-2);transition:transform .15s}
.mx-star:active{transform:translateY(3px);box-shadow:0 2px 0 var(--night-2)}
.mx-star>svg{width:26px;height:26px;fill:var(--muted);transition:transform .2s}
.mx-star:hover>svg{transform:scale(1.18) rotate(8deg)}
.mx-star.st-lit,.mx-star.st-fading{border-color:var(--uc);background:color-mix(in srgb,var(--uc) 30%,var(--surface))}
.mx-star.st-lit>svg{fill:var(--starlight);filter:drop-shadow(0 0 5px var(--uc))}
.mx-star.st-gold{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 25%,var(--surface))}
.mx-star.st-gold>svg{width:32px;height:32px;fill:var(--gold);filter:drop-shadow(0 0 6px var(--gold));animation:sky-twinkle 3.2s ease-in-out infinite}
.mx-star.st-fading>svg{fill:var(--starlight);opacity:.32;animation:sky-flicker 2.6s ease-in-out infinite}
.mx-star.st-next{width:72px;height:72px;border-color:var(--aurora);background:color-mix(in srgb,var(--aurora) 22%,var(--surface))}
.mx-star.st-next>svg{width:32px;height:32px;fill:var(--ink);filter:drop-shadow(0 0 8px var(--ink))}
.mx-star.st-next::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--aurora);animation:sky-pulse 1.8s ease-out infinite}
.mx-star.st-off{opacity:.55}
.mx-star.st-off>svg{fill:var(--dim)}
@keyframes sky-twinkle{50%{transform:scale(1.12) rotate(12deg)}}
@keyframes sky-flicker{0%,100%{opacity:.32}45%{opacity:.5}50%{opacity:.18}}
@keyframes sky-pulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.6);opacity:0}}
.mx-perch{position:absolute;top:-30px;left:44px;width:34px;pointer-events:none}
.mx-lbl{max-width:150px;padding:3px 10px;border-radius:10px;background:var(--bg);font-size:12.5px;line-height:1.3;color:var(--muted);text-align:center;overflow-wrap:anywhere;pointer-events:none}
.mx-lbl.l-lit,.mx-lbl.l-gold,.mx-lbl.l-next,.mx-lbl.l-fading{color:var(--ink)}
.mx-lbl em{display:table;margin:3px auto 0;padding:1px 8px;border-radius:999px;font:700 11px/1.5 var(--f-body);font-style:normal;background:var(--aurora);color:var(--on-aurora)}
.mx-lbl.l-fading em{background:var(--surface-2);color:var(--muted);border:1px dashed var(--dim)}
/* the collection */
.mx-cons{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.mx-con-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);text-align:center;cursor:pointer}
.mx-con-card .mx-con{max-width:130px;height:110px}
.mx-con-card b{font:400 17px/1.2 var(--f-display);color:var(--uc)}
.mx-con-card small{color:var(--muted);font-size:12px}
.mx-con-card.full{border-color:color-mix(in srgb,var(--uc) 55%,var(--line));box-shadow:0 0 22px color-mix(in srgb,var(--uc) 18%,transparent)}
.mx-con-card.unknown b{color:var(--dim)}
.mx-comets{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.mx-comet{aspect-ratio:3/4;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:center;cursor:pointer}
.mx-comet .sym{font:600 26px/1.1 var(--f-math);direction:ltr;color:var(--dim)}
.mx-comet small{font-size:12px;color:var(--muted)}
.mx-comet.have{border-color:var(--gold-deep);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--gold) 22%,var(--surface)),var(--surface) 70%)}
.mx-comet.have .sym{color:var(--gold);text-shadow:0 0 14px color-mix(in srgb,var(--gold) 60%,transparent)}
.mx-comet.have small{color:var(--ink)}
.mx-comet-sheet .sky-card{animation:none}
/* the tab bar */
#mathView{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
.mx-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.mx-nav[hidden]{display:none}
.mx-nav>div{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(var(--tabs,2),1fr)}
.mx-nav button{border:0;background:none;padding:10px 4px 12px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font:500 12.5px/1 var(--f-body);cursor:pointer}
.mx-nav svg{width:24px;height:24px;fill:currentColor}
.mx-nav button[aria-current=page]{color:var(--gold)}
.mx-nav button[aria-current=page] svg{filter:drop-shadow(0 0 6px var(--gold))}
/* a correct answer */
.mx-ok b{font-size:17px}
.mx-combo{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:var(--ember-bg);color:var(--ember);font:700 13px/1.5 var(--f-body);animation:sky-pop .4s cubic-bezier(.2,1.8,.4,1)}
.mx-combo svg{width:14px;height:14px;fill:var(--ember)}
.mx-choices button.right{animation:sky-pop .35s cubic-bezier(.2,1.8,.4,1)}
.mx-choices button.wrong{animation:sky-shake .4s}
@keyframes sky-pop{from{transform:scale(.6)}}
@keyframes sky-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* celebrations, the comet, toasts */
.sky-cele{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgb(4 7 20 / .93);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);text-align:center;
padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.sky-cele .in{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:380px}
.sky-cele .rays{position:absolute;top:-70px;width:320px;height:320px;max-width:90vw;max-height:90vw;pointer-events:none;
background:repeating-conic-gradient(color-mix(in srgb,var(--gold) 30%,transparent) 0 8deg,transparent 8deg 22deg);
-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);animation:sky-spin 14s linear infinite}
.sky-cele.k-lit .rays{background:repeating-conic-gradient(color-mix(in srgb,var(--starlight) 22%,transparent) 0 8deg,transparent 8deg 22deg)}
@keyframes sky-spin{to{transform:rotate(360deg)}}
.sky-cele .big{position:relative;width:150px;height:150px;display:grid;place-items:center;animation:sky-in .9s cubic-bezier(.2,1.6,.35,1) both}
.sky-cele .big>svg{width:100%;height:100%;fill:var(--gold);filter:drop-shadow(0 0 18px var(--gold)) drop-shadow(0 0 40px color-mix(in srgb,var(--gold) 60%,transparent))}
.sky-cele.k-lit .big>svg{fill:var(--starlight);filter:drop-shadow(0 0 18px var(--aurora))}
.sky-cele .big>svg.mx-con{max-width:none;filter:none;fill:none}
.sky-cele .big:has(.sky-card){width:auto;height:auto}
@keyframes sky-in{from{transform:scale(0) rotate(-120deg)}}
.sky-cele h2{position:relative;font-size:34px;color:var(--gold)}
.sky-cele.k-lit h2{color:var(--ink)}
.sky-cele p{position:relative;margin:0;color:var(--muted);line-height:1.5}
.sky-pips{position:relative;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.sky-pips svg{width:22px;height:22px;fill:var(--dim)}
.sky-pips .l{fill:var(--starlight)}.sky-pips .g{fill:var(--gold)}
.sky-pips .new{animation:sky-in .7s .5s cubic-bezier(.2,1.6,.35,1) both}
.sky-btn{position:relative;margin-top:6px;border:0;border-radius:14px;padding:13px 26px;font:700 16px/1 var(--f-body);background:var(--aurora);color:var(--on-aurora);box-shadow:0 5px 0 color-mix(in srgb,var(--aurora) 40%,#000);cursor:pointer}
.sky-btn.gold{background:var(--gold);color:#2A1C00;box-shadow:0 5px 0 var(--gold-deep)}
.sky-btn:active{transform:translateY(4px);box-shadow:none}
.sky-card{align-self:center;width:160px;aspect-ratio:3/4;border-radius:18px;border:2px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;
background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--gold) 30%,var(--surface)),var(--surface) 72%);box-shadow:0 0 40px color-mix(in srgb,var(--gold) 40%,transparent);animation:sky-flip .8s cubic-bezier(.2,1.4,.4,1)}
.sky-card .sym{font:600 40px/1.1 var(--f-math);color:var(--gold);direction:ltr;text-align:center}
.sky-card b{font:400 20px/1.2 var(--f-display);color:var(--ink)}
@keyframes sky-flip{from{transform:rotateY(180deg) scale(.6);opacity:0}}
.sky-toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:85;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);
padding:11px 16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--gold-deep);box-shadow:0 10px 30px #000;font-weight:500;animation:sky-up .3s cubic-bezier(.2,1.2,.4,1)}
.sky-toast b{color:var(--gold)}
@keyframes sky-up{from{transform:translate(-50%,30px);opacity:0}}
.sky-comet{position:fixed;z-index:88;top:18%;left:-130px;width:120px;height:56px;border:0;padding:0;background:none;cursor:pointer;animation:sky-fly 6s linear forwards}
.sky-comet svg{width:100%;height:100%;filter:drop-shadow(0 0 8px var(--gold))}
@keyframes sky-fly{from{transform:translate(0,0) rotate(14deg)}to{transform:translate(calc(100vw + 260px),46vh) rotate(14deg)}}
@media (prefers-reduced-motion:reduce){
.sky-owl .o-lid,.mx-owl .sky-owl,.mx-star>svg,.mx-star::before,line.draw,.sky-cele .rays,.sky-cele .big,.sky-pips .new,.sky-card,.sky-toast,.mx-combo,.mx-choices button{animation:none!important}
line.draw{stroke-dashoffset:0}
.sky-comet{animation:none;left:auto;right:24px;top:30%}
}
/* the practice exam (math.js, "practice exam"); its card looks like the review's */
.mx-quiz-card{border-inline-start-color:var(--aurora)}.mx-quiz-card .mx-dgo{color:var(--aurora)}
.mx-quiz-units{display:flex;flex-wrap:wrap;gap:8px}
.mx-quiz-units button[aria-pressed="true"]{background:var(--mx-accent);color:var(--mx-on-accent)}
.mx-quiz-units button[aria-pressed="false"]{opacity:.7}
.mx-quiz-dots{display:flex;flex-wrap:wrap;gap:6px}
.mx-quiz-dots button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:600 13px/1 var(--f-body);cursor:pointer}
.mx-quiz-dots button.done{border-color:var(--mx-accent);color:var(--ink)}
.mx-quiz-dots button.now{outline:2px solid var(--gold);outline-offset:2px}
.mx-quiz-sheet .mx-choices button[aria-pressed="true"]{border-color:var(--gold);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--gold)}
.mx-quiz-nav{display:flex;justify-content:space-between;gap:8px;margin-top:4px}
.mx-quiz-warn{color:var(--amber)}
.mx-quiz-units-score{display:grid;gap:10px}
.mx-quiz-units-score div{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center}
.mx-quiz-units-score .mx-meter{grid-column:1/-1;height:8px;background:var(--surface-2)}
.mx-quiz-units-score .mx-meter i{background:var(--aurora)}
.mx-quiz-plan{display:flex;flex-direction:column;gap:10px;padding-inline-start:20px;margin:0}
.mx-quiz-plan li{display:flex;flex-direction:column;gap:4px;background:var(--amber-bg);border-radius:12px;padding:10px 12px}
.mx-quiz-plan li b{color:var(--amber)}
.mx-quiz-review summary{cursor:pointer;color:var(--muted)}
.mx-quiz-review ol{display:flex;flex-direction:column;gap:8px;padding-inline-start:20px}
.mx-quiz-review li{display:flex;flex-direction:column;gap:2px}
.mx-quiz-review li small{color:var(--dim)}
.mx-quiz-review li.ok>span:last-child{color:var(--ok)}
.mx-quiz-review li.bad>span:last-child{color:var(--amber)}
/* the unit quiz (math.js, "unit quiz"): a node at the end of the unit, and a sheet that looks like a paper quiz */
.mx-uquiz{width:60px;height:60px;padding:0;border-radius:18px;font-size:24px;display:grid;place-items:center;border:2px dashed var(--uc,var(--gold));background:var(--surface);cursor:pointer;box-shadow:0 5px 0 var(--night-2)}
.mx-uquiz.done{border-style:solid}
.mx-uq-rules{display:flex;flex-direction:column;gap:6px;padding-inline-start:20px;margin:0;color:var(--ink)}
.mx-uq-history{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.mx-uq-history h4{width:100%;margin:0}
.mx-uq-head{position:sticky;top:-16px;z-index:2;display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--surface);padding:16px 0 6px;margin-top:-16px;border-bottom:1px solid var(--line)} /* covers the sheet's top padding too */
.mx-uq-head h3{margin:2px 0 0}
.mx-uq-clock{font:700 22px/1 var(--f-body);font-variant-numeric:tabular-nums;color:var(--ink);padding:6px 12px;border-radius:999px;background:var(--surface-2);margin-inline-start:auto}
.mx-uq-clock.low{color:var(--amber)}.mx-uq-clock.over{color:var(--amber);background:var(--amber-bg)}
.mx-uq-banner{margin:0;color:var(--amber);font-size:14px}.mx-uq-banner:empty{display:none}
.mx-uq-qs{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.mx-uq-q{background:var(--bg);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.mx-uq-qhead{display:flex;justify-content:space-between;align-items:baseline}.mx-uq-qhead span{color:var(--muted);font-size:14px}
.mx-uq-text{margin:0;line-height:1.7}
.mx-uq-answer{display:flex;flex-direction:column;gap:6px;border-top:1px dashed var(--line);padding-top:8px}
.mx-uq-img{max-width:100%;max-height:320px;object-fit:contain;border-radius:10px;border:1px solid var(--line);align-self:flex-start}
.mx-uq-verdict{margin:0;font-weight:700}.mx-uq-verdict.correct{color:var(--ok)}.mx-uq-verdict.partial,.mx-uq-verdict.incorrect,.mx-uq-verdict.none,.mx-uq-verdict.unreadable,.mx-uq-verdict.needs_review{color:var(--amber)}
/* misconception patterns: a card on home (after the review) and its sheet */
.mx-patterns{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-inline-start:4px solid var(--starlight);border-radius:18px;background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s}
.mx-patterns:hover{border-color:var(--starlight)}
.mx-patterns span{color:var(--muted);font-size:13px;overflow-wrap:anywhere}.mx-patterns .mx-dgo{color:var(--starlight)}
#mathView .mx-patterns-sheet{--uc:var(--starlight)}
.mx-pattern-list{display:flex;flex-direction:column;gap:10px;margin:12px 0;padding:0;list-style:none}
.mx-pattern-list li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;border:1px solid var(--line);border-radius:14px;overflow-wrap:anywhere}
.mx-pattern-list li>span{color:var(--muted);font-size:14px}
.mx-pattern-list.gone li{opacity:.85;border-style:dashed}
.mx-patterns-sheet h4{margin:18px 0 0}.mx-pattern-list.gone{margin-top:8px}
/* a skill that a recurring mistake sends back to: a gold ring on its star and its tag in gold, so it shows on the path */
.mx-star.fix{box-shadow:0 0 0 3px var(--gold),0 0 14px color-mix(in srgb,var(--gold) 55%,transparent)}
.mx-lbl.l-fix em{background:var(--gold);color:#2A1B00}
.mx-pattern-note{display:block;margin-top:6px;padding:8px 10px;border-inline-start:3px solid var(--gold);border-radius:8px;background:color-mix(in srgb,var(--gold) 10%,transparent);color:var(--ink);font-size:13.5px}
/* the sketch board beside a skill's exercise (static/math-board.js): a desktop screen with a mouse or a pen only */
.mx-shacts{display:flex;align-items:center;gap:6px}
.mx-board{display:none} /* the buttons that open it show everywhere: beside the exercise on a desktop, full screen on a phone */
.mx-board-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:none;color:var(--muted);font:700 14px/1 var(--f-body);padding:7px 12px;border-radius:999px;cursor:pointer}
.mx-board-btn .mx-ic{width:16px;height:16px}
/* the board's icons: one line-drawn set in the button's own colour */
.mx-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .mx-ic-flip{transform:scaleX(-1)} /* back and undo point to the start of a right-to-left line */
.mx-board-btn[aria-pressed="true"]{border-color:var(--mx-accent);background:var(--mx-accent-soft);color:var(--ink)}
@media (min-width:1000px) and (any-pointer:fine){
.mx-sheet.with-board{inset:16px 16px 16px auto;width:min(600px,42vw);max-height:none;border-radius:20px}
.mx-board{display:flex;flex-direction:column;position:fixed;z-index:62;top:16px;bottom:16px;left:16px;right:clamp(16px,var(--door,100vw),calc(min(600px,42vw) + 32px));transition:right .28s ease;
background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 6px 30px rgb(0 0 0/.25)}
}
.mx-board-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mx-board-bar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;background:none;color:var(--muted);
font:500 14px/1 var(--f-body);padding:0 7px;border-radius:10px;cursor:pointer;height:36px;min-width:36px}
.mx-board-bar button:hover{color:var(--ink);background:var(--surface-2)}
.mx-board-bar button[hidden]{display:none}
.mx-board-bar button[aria-pressed="true"]{color:var(--ink);border-color:var(--mx-accent);background:var(--mx-accent-soft)}
@media (max-width:1600px){.mx-board-bar button span{display:none}} /* a narrower board: icons only, names stay as tooltips */
.mx-board-group{display:inline-flex;align-items:center;gap:3px}
/* the inks and the eraser's sizes sit on a strip of the paper's colour, so each ink shows as it will be drawn
(the black one too); the chosen one has a ring, not the tools' outline. The sizes take the inks' place with
the eraser, so the bar keeps its shape. */
.mx-board-inks,.mx-board-sizes{background:#F8F7F2;border-radius:12px;padding:2px;gap:2px}
.mx-board-bar .mx-board-inks button,.mx-board-bar .mx-board-sizes button{width:34px;min-width:0;height:32px;padding:0;border:0;border-radius:9px;background:none}
.mx-board-bar .mx-board-inks button:hover,.mx-board-bar .mx-board-sizes button:hover{background:rgb(27 33 64/.08)}
.mx-board-inks button::before,.mx-board-sizes button::before{content:"";border-radius:50%}
.mx-board-inks button::before{width:18px;height:18px;background:var(--dot)}
.mx-board-sizes button::before{width:var(--d);height:var(--d);background:#8A93B8}
.mx-board-bar .mx-board-inks button[aria-pressed="true"],.mx-board-bar .mx-board-sizes button[aria-pressed="true"]{background:none}
.mx-board-inks button[aria-pressed="true"]::before{box-shadow:0 0 0 2px #F8F7F2,0 0 0 4px #1B2140}
.mx-board-sizes button[aria-pressed="true"]::before{background:#1B2140;box-shadow:0 0 0 2px #F8F7F2,0 0 0 4px #1B2140}
.mx-board:not([data-tool="eraser"]) .mx-board-sizes,.mx-board[data-tool="eraser"] .mx-board-inks{display:none}
.mx-board-acts{margin-inline-start:auto} /* the page's actions at the far end, apart from the tools */
.mx-board-bar .mx-board-close{position:relative;margin-inline-start:9px} /* close, kept apart from clear by a line */
.mx-board-close::before{content:"";position:absolute;inset-inline-start:-8px;top:8px;bottom:8px;width:1px;background:var(--line)}
.mx-board-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line)}
.mx-board-row[hidden]{display:none}
.mx-board-pages{display:flex;align-items:center;gap:4px;flex:1;color:var(--muted);font-size:13px}
.mx-board-pages span{margin-inline-end:4px}
.mx-board-pages button{min-width:30px;height:28px;border:1px solid var(--line);background:none;color:var(--muted);border-radius:8px;font:700 13px/1 var(--f-body);cursor:pointer}
.mx-board-pages button.has{color:var(--ink)}
.mx-board-pages button[aria-selected="true"]{border-color:var(--mx-accent);background:var(--mx-accent-soft);color:var(--ink)}
.mx-board-stage{position:relative;flex:1;min-height:0}
/* a pen held still on an iPad is a long press: no text selection, no Copy bubble and no magnifier on the board.
The angle's words and the typed math are still fields to type in. */
.mx-board{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mx-board input,.mx-board math-field{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.mx-board button{touch-action:manipulation} /* two quick taps on a button: two taps, not a zoom */
.mx-board canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;
background-color:#F8F7F2;background-image:linear-gradient(rgb(27 33 64/.07) 1px,transparent 1px),linear-gradient(90deg,rgb(27 33 64/.07) 1px,transparent 1px);
background-size:28px 28px}
.mx-board-del,.mx-board-top{display:inline-flex;align-items:center;gap:5px}
.mx-board-del .mx-ic,.mx-board-top .mx-ic{width:16px;height:16px}
.mx-board-del{position:absolute;z-index:1;border:1px solid #E7B3BB;background:#FFF1F3;color:#B4233A;font:700 13px/1 var(--f-body);
padding:7px 11px;border-radius:999px;cursor:pointer;box-shadow:0 2px 8px rgb(27 33 64/.15)}
.mx-board-del[hidden]{display:none}
.mx-calc{position:absolute;z-index:2;inset-block-end:12px;inset-inline-start:12px;width:min(340px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;
padding:12px;border:1px solid #2A2F45;border-radius:18px;background:#3A3F55;color:#fff;box-shadow:0 8px 24px rgb(27 33 64/.35);display:flex;flex-direction:column;gap:10px}
.mx-calc[hidden]{display:none}
/* the closet door's handle on the board's right edge (a desktop screen): tap or drag it to slide the board over the exercise */
.mx-board-door{display:none}
@media (min-width:1000px) and (any-pointer:fine){
.mx-board-door{display:flex;align-items:center;justify-content:center;position:absolute;z-index:3;right:0;top:50%;transform:translateY(-50%);
width:22px;height:110px;padding:0;border:1px solid var(--line);border-right:0;border-radius:12px 0 0 12px;background:var(--surface-2);cursor:ew-resize;touch-action:none}
.mx-board-door::before{content:"";width:5px;height:56px;border-radius:3px;background:var(--muted);opacity:.6}
.mx-board-door:hover::before{opacity:1;background:var(--mx-accent)}
.mx-board.wide{z-index:63} /* over the exercise it slid onto */
.mx-board.sliding{transition:none}
.mx-board.full .mx-board-door{display:none}
}
@media (prefers-reduced-motion:reduce){.mx-board{transition:none}}
/* the bar that drags the calculator: wide enough for a finger, with a grip in the middle */
.mx-calc-grip{height:22px;margin:-6px -4px -4px;border-radius:10px;cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center}
.mx-calc-grip::before{content:"";width:48px;height:5px;border-radius:3px;background:rgb(255 255 255/.45)}
.mx-calc-grip:hover::before{background:rgb(255 255 255/.75)}
.mx-calc.moving{box-shadow:0 14px 34px rgb(27 33 64/.45)}
.mx-calc.moving .mx-calc-grip{cursor:grabbing}
.mx-calc-screen{position:relative;background:#C9D3B4;color:#1E2418;border-radius:8px;padding:16px 10px 6px;text-align:right;display:flex;flex-direction:column;box-shadow:inset 0 2px 5px rgb(0 0 0/.3)}
.mx-calc-flags{position:absolute;top:3px;left:8px;font:700 10px/1 var(--f-body);letter-spacing:.08em}
.mx-calc-expr{font:500 17px/1.3 ui-monospace,Menlo,Consolas,monospace;overflow-x:auto;white-space:nowrap;scrollbar-width:none;min-height:22px}
.mx-calc-screen output{font:700 24px/1.3 ui-monospace,Menlo,Consolas,monospace;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.mx-calc-screen output.live{opacity:.55}
.mx-calc-keys{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 6px}
.mx-calc-keys button{position:relative;height:38px;padding:0;border:0;border-radius:8px;font:700 15px/1 var(--f-body);cursor:pointer;color:#fff;background:#5A5F78;box-shadow:0 2px 0 #1E2233}
.mx-calc-keys button i{position:absolute;top:-11px;left:0;right:0;font:600 10px/1 var(--f-body);font-style:normal;color:#F2C94C;pointer-events:none}
.mx-calc-keys button.num{background:#F4F5FA;color:#1B2140}
.mx-calc-keys button.fn{background:#2E3247;font-size:13px}
.mx-calc-keys button.op{background:#5A5F78}
.mx-calc-keys button.del{background:#D3455B}
.mx-calc-keys button.eq{grid-column:span 2;background:#2563D9}
.mx-calc-keys button.shift{background:#F2C94C;color:#1B2140}
.mx-calc-keys button.shift[aria-pressed="true"]{box-shadow:0 0 0 3px #fff}
.mx-calc-keys button.shifted:not(.shift){}
.mx-calc-keys button:active{transform:translateY(1px);filter:brightness(.9)}
.mx-calc-keys{padding-top:10px}
.mx-board-send .mx-ic{width:18px;height:18px}
.mx-board-send{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--mx-accent);background:var(--mx-accent);color:var(--mx-on-accent);
font:700 14px/1 var(--f-body);padding:8px 14px;border-radius:999px;cursor:pointer}
.mx-board-send[hidden]{display:none}
.mx-board-send:disabled{opacity:.7;cursor:progress}
.mx-board-top{position:absolute;z-index:1;top:8px;left:50%;transform:translateX(-50%);border:1px solid #C5CBDF;background:#fff;color:#1B2140;
font:700 13px/1 var(--f-body);padding:7px 12px;border-radius:999px;cursor:pointer;box-shadow:0 2px 8px rgb(27 33 64/.15)}
.mx-board-top[hidden]{display:none}
.mx-uq-q{scroll-margin-top:90px} /* a question scrolled to from the board's tabs shows below the quiz's sticky head */
/* the board full screen (a phone or a tablet, and the phone's answer to a photo request) */
.mx-board-head{display:none}
.mx-board.full{display:flex;flex-direction:column;position:fixed;inset:0;z-index:1100;border:0;border-radius:0;box-shadow:none;background:var(--surface);
padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.mx-board.full .mx-board-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--ink)}
.mx-board-back{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--mx-accent);background:var(--mx-accent-soft);color:var(--ink);font:700 14px/1 var(--f-body);padding:9px 14px;border-radius:999px;cursor:pointer}
.mx-board.full .mx-board-bar{flex-wrap:wrap;row-gap:4px} /* every tool in sight: two rows on a phone rather than hidden off the edge */
.mx-board.full .mx-board-bar [data-do="hide"]{display:none} /* the head's "back" does it */ /* the head's "back" does it */
.mx-board.full .mx-board-bar button{height:40px;min-width:40px}
.mx-board.full .mx-board-bar .mx-board-inks button,.mx-board.full .mx-board-bar .mx-board-sizes button{height:36px;width:40px}
/* typing math on the board: a bar over the board's top; MathLive's keyboard sits above everything, the board too */
body{--keyboard-zindex:3000}
.mx-board-mathedit{position:absolute;z-index:2;top:8px;left:8px;right:8px;display:flex;align-items:center;gap:6px;padding:6px;
background:#fff;border:1.5px solid var(--mx-accent);border-radius:12px;box-shadow:0 4px 16px rgb(27 33 64/.18)}
.mx-board-mathedit math-field{flex:1;min-width:0;font-size:24px;border:0;background:none;color:#1B2140;--caret-color:#2563D9;--selection-background-color:#DCE6FF}
.mx-board-mathedit math-field::part(virtual-keyboard-toggle),.mx-board-mathedit math-field::part(menu-toggle){display:none}
.mx-board-mathedit button{flex:none;width:40px;height:40px;border-radius:10px;border:1px solid #C5CBDF;background:#F4F6FC;color:#1B2140;font:700 18px/1 var(--f-body);cursor:pointer}
.mx-board-mathedit button[data-math="ok"]{background:var(--mx-accent);border-color:var(--mx-accent);color:var(--mx-on-accent)}
/* an angle's words, typed in a box where they will sit */
.mx-board-angleedit{position:absolute;z-index:2;display:flex;flex-direction:column;gap:4px;padding:4px;background:#fff;border:1px solid #C5CBDF;border-radius:12px;
box-shadow:0 2px 10px rgb(27 33 64/.2)}
.mx-board-anglein{width:80px;height:34px;box-sizing:border-box;padding:0 6px;border:1.5px solid #2563D9;border-radius:9px;
background:#fff;color:#1B2140;font:500 17px/1 "STIX Two Text","Cambria Math","Times New Roman",serif;text-align:center;outline:none}
.mx-board-angleedit button{width:34px;height:34px;border:1px solid #C5CBDF;border-radius:9px;background:#F4F6FC;color:#1B2140;
font:500 18px/1 "STIX Two Text","Cambria Math","Times New Roman",serif;cursor:pointer}
.mx-board-angleedit button:hover{background:#DCE6FF;border-color:#2563D9}
.mx-board-arcs{display:flex;gap:4px;padding-inline-start:4px;border-inline-start:1px solid #C5CBDF}
.mx-board-arcs button{display:inline-flex;align-items:center;justify-content:center;padding:0}
.mx-board-arcs button[aria-pressed="true"]{background:#DCE6FF;border-color:#2563D9}
.mx-board-anglerow{display:flex;align-items:center;gap:4px}
.mx-board-anglerow .mx-board-anglein{flex:1}
.mx-board-anglerow > .mx-board-arcs{border:0;padding:0} /* first in its row: no line before it */
.mx-board-colors{display:flex;gap:4px;padding-inline-start:4px;border-inline-start:1px solid #C5CBDF}
.mx-board-colors button{display:inline-flex;align-items:center;justify-content:center;padding:0;background:none}
.mx-board-colors button::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--dot)}
.mx-board-colors button[aria-pressed="true"]{background:none;border-color:transparent}
.mx-board-colors button[aria-pressed="true"]::before{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--dot)}
.mx-board-anglein::placeholder{color:#8A93B8}
.mx-board-mathwait{flex:1;color:#5B6694;font:500 14px/1.3 var(--f-body);padding:8px}
/* the class teacher's report (math.js: classReport) */
.mx-report-tabs{display:flex;gap:6px;flex-wrap:wrap}
.mx-report-tabs [aria-pressed="true"]{border-color:var(--mx-accent);background:var(--mx-accent);color:var(--mx-on-accent);font-weight:800;box-shadow:0 0 0 2px color-mix(in srgb,var(--mx-accent) 35%,transparent)}
.mx-report-tabs [aria-pressed="true"]::before{content:"✓ "}
.mx-report{display:flex;flex-direction:column;gap:10px}
.mx-report h4{margin:10px 0 0;font-size:18px}
.mx-report-common{border:1px solid var(--amber);border-radius:14px;background:var(--amber-bg);padding:14px 16px}
.mx-report-common h4{margin:0 0 6px;color:var(--amber)}
.mx-report-list{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:6px}
.mx-report-list li small{display:block;color:var(--muted)}
.mx-report-student{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.mx-report-student>summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px;cursor:pointer;list-style:none}
.mx-report-student>summary::-webkit-details-marker{display:none}
.mx-report-student>summary b{min-width:8ch}
.mx-report-student[open]>summary{border-bottom:1px solid var(--line)}
.mx-report-prog{display:flex;align-items:center;gap:8px;flex:1;min-width:150px}
.mx-report-prog .mx-meter{flex:1;height:8px;background:var(--surface-2)}
.mx-report-prog .mx-meter i{background:var(--aurora)}
.mx-report-prog small{color:var(--muted);white-space:nowrap}
.mx-report-chip{font:700 12px/1 var(--f-body);padding:5px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.mx-report-chip.good,.mx-report-grade.good{color:var(--ok)}.mx-report-chip.good{background:var(--ok-bg)}
.mx-report-chip.mid,.mx-report-grade.mid{color:var(--amber)}.mx-report-chip.mid{background:var(--amber-bg)}
.mx-report-chip.low,.mx-report-grade.low{color:var(--sumac)}.mx-report-chip.low{background:var(--sumac-bg)}
.mx-report-body{display:flex;flex-direction:column;gap:16px;padding:14px}
.mx-report-body h5{margin:0 0 8px;font-size:15px;color:var(--mx-accent)}
.mx-report-body p{margin:0}
.mx-report-table{width:100%;border-collapse:collapse;font-size:14px}
.mx-report-table th{color:var(--muted);font-weight:400;text-align:start;padding:4px 6px;border-bottom:1px solid var(--line)}
.mx-report-table td{padding:6px;border-bottom:1px solid var(--line)}
.mx-report-grade{font-weight:700}
@media (max-width:600px){.mx-report-prog{flex-basis:100%}.mx-report-table{font-size:13px}}
/* the teacher's AI queue (math.js: aiQueue) */
.mx-aq-badge{display:inline-block;min-width:1.6em;margin-inline-start:4px;padding:2px 6px;border-radius:999px;background:var(--sumac);color:#fff;font:700 12px/1.2 var(--f-body);text-align:center}
.mx-aq{display:flex;flex-direction:column;gap:10px}
.mx-aq-student{display:flex;flex-direction:column;gap:8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.mx-aq-who{margin:0;font-size:17px;text-align:start}
.mx-aq-subject{display:flex;flex-direction:column;gap:8px;padding-inline-start:10px}
.mx-aq-subject h5{margin:4px 0 0;font-size:14px;color:var(--muted)}
.mx-aq-group{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);padding:8px 10px}
.mx-aq-group>summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;list-style:none}
.mx-aq-group>summary::-webkit-details-marker{display:none}
.mx-aq-group>summary::before{content:"◂";color:var(--muted)}
.mx-aq-group[open]>summary::before{content:"▾"}
.mx-aq-group[open]>summary{margin-bottom:8px}
.mx-aq-group>.mx-aq-card{margin-top:8px}
.mx-aq-done{margin:10px 0 0;font-size:16px;color:var(--muted)}
.mx-aq-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px 14px}
.mx-aq-card p{margin:0}
.mx-aq-card.done,.mx-aq-card.declined,.mx-aq-card.cancelled{opacity:.8}
.mx-aq-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.mx-aq-head small{color:var(--muted)}
.mx-aq-state{margin-inline-start:auto;font:700 12px/1 var(--f-body);padding:5px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.mx-aq-card.pending .mx-aq-state{background:var(--amber-bg);color:var(--amber)}
.mx-aq-card.done .mx-aq-state{background:var(--ok-bg);color:var(--ok)}
.mx-aq-card.failed .mx-aq-state,.mx-aq-card.declined .mx-aq-state{background:var(--sumac-bg);color:var(--sumac)}
.mx-aq-label{font-weight:700}
.mx-aq-q{color:var(--muted);font-size:14px}
.mx-aq-error{color:var(--sumac)}
.mx-aq-img{max-width:100%;max-height:360px;object-fit:contain;border-radius:10px;border:1px solid var(--line);align-self:flex-start}
/* "פירוט השגיאה": why an AI check failed (answer-scans.js: errorDetails) */
.mx-error-details{align-self:flex-start;max-width:100%}
.mx-error-details>summary{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font:500 13px/1.2 var(--f-body);color:var(--sumac);list-style:none}
.mx-error-details>summary::-webkit-details-marker{display:none}
.mx-error-details>summary::before{content:"ⓘ"}
.mx-error-details[open]>summary{border-color:var(--sumac)}
.mx-error-details p{margin:8px 0 0}
.mx-error-details code{display:block;margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--surface-2);color:var(--muted);font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}
.mx-device{font-weight:400;color:var(--muted)}
.mx-report-attn{border:1px solid var(--sumac);border-radius:14px;background:var(--sumac-bg);padding:14px 16px}
.mx-report-attn h4{margin:0 0 6px;color:var(--sumac)}
.mx-report-open{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline}
.mx-report-week{color:var(--muted);font-size:14px}
.mx-report-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.mx-report-views{display:flex;gap:6px;flex-wrap:wrap}
/* the view shown now: filled, like the selected class above it, so it stands out among the tabs */
.mx-report-views [aria-pressed="true"]{border-color:var(--mx-accent);background:var(--mx-accent);color:var(--mx-on-accent);font-weight:800;box-shadow:0 0 0 2px color-mix(in srgb,var(--mx-accent) 35%,transparent)}
.mx-report-views [aria-pressed="true"] .mx-aq-badge{background:var(--mx-on-accent);color:var(--mx-accent)}
.mx-report-bar select{font:inherit;color:inherit;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;max-width:100%}
.mx-report,.mx-grid-wrap{min-width:0;max-width:100%}
.mx-grid-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.mx-grid{border-collapse:separate;border-spacing:0;font-size:13px;min-width:max-content}
.mx-grid th,.mx-grid td{padding:6px;text-align:center;border-bottom:1px solid var(--line);font-weight:400}
.mx-grid .mx-grid-name{position:sticky;inset-inline-start:0;z-index:1;background:var(--surface);text-align:start;white-space:nowrap;border-inline-end:1px solid var(--line)}
.mx-grid thead th{vertical-align:bottom}
.mx-grid-unit{min-width:72px;white-space:normal}
.mx-grid-skill{width:34px;padding-inline:3px}
.mx-grid-skill span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);max-height:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-grid-skill.hard,.mx-grid-sum.hard{color:var(--sumac);font-weight:700}
.mx-grid-num{font-weight:700}
.mx-grid-num.good{color:var(--ok)}.mx-grid-num.mid{color:var(--amber)}.mx-grid-num.low{color:var(--sumac)}
.mx-grid-sum{color:var(--muted)}
.mx-grid tfoot th,.mx-grid tfoot td{border-bottom:0}
.mx-cell{display:block;width:22px;height:22px;margin:0 auto;border-radius:50%;border:2px solid var(--line)}
.mx-cell.trying{border-color:var(--amber);background:var(--amber-bg)}
.mx-cell.lit{border-color:var(--ok);background:var(--ok)}
.mx-cell.fading{border:2px dashed var(--ok);background:var(--ok-bg)}
.mx-cell.gold{border-color:var(--gold-deep);background:var(--gold)}
.mx-teacher-note{border:1px solid var(--aurora);border-radius:12px;background:var(--surface-2);padding:10px 14px;margin:8px 0}
.mx-teacher-note h4{margin:0 0 4px;color:var(--aurora)}
.mx-teacher-note p{margin:0}
.mx-ask{margin:8px 0}
.mx-ask summary{cursor:pointer;color:var(--muted)}
.mx-ask textarea{display:block;width:100%;margin:8px 0;font:inherit;color:inherit;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px;box-sizing:border-box}
.mx-ask-wait{color:var(--muted)}
.mx-ask-error{color:var(--sumac)}
.mx-teacher-comment{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:10px;padding:12px 14px;border:1px solid var(--aurora);border-inline-start:4px solid var(--aurora);border-radius:18px;background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.mx-teacher-comment b{color:var(--aurora)}
.mx-teacher-comment span{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.mx-tr{display:flex;flex-direction:column;gap:12px}
.mx-tr h5{margin:0 0 6px;font-size:15px;color:var(--mx-accent)}
.mx-tr p{margin:0}
.mx-tr-img{max-width:100%;border-radius:12px;border:1px solid var(--line)}
.mx-tr-request{border:1px solid var(--amber);border-radius:12px;background:var(--amber-bg);padding:10px 14px}
.mx-tr-request p{margin:4px 0}
.mx-tr-form{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.mx-tr-form label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.mx-tr-form input,.mx-tr-form textarea{font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px;box-sizing:border-box;width:100%}
.mx-tr-form input[type=number]{max-width:9ch}
.mx-helpbtn{border:1px solid var(--line);background:none;color:var(--muted);font-weight:700;font-size:18px;line-height:1;font-family:inherit;border-radius:50%;width:34px;height:34px;padding:0;cursor:pointer}
.mx-help-wrap{position:static}
.mx-help-wrap .mx-scrim{z-index:63}
.mx-help{z-index:64}
.mx-example{border:1px solid var(--aurora);border-radius:14px;background:var(--surface-2);padding:12px 14px;margin:10px 0}
.mx-example h4{margin:0 0 6px;color:var(--aurora)}
.mx-example-q{font-weight:700}
.mx-example-steps{margin:8px 0;padding-inline-start:22px;display:flex;flex-direction:column;gap:10px}
.mx-example-steps li span{display:block;color:var(--muted);font-size:14px}
.mx-example-answer{margin:8px 0}
.mx-res-visible{flex-direction:row!important;align-items:center;gap:8px}
.mx-res-vis{font-size:12px;color:var(--muted)}.mx-res-vis.on{color:var(--ok)}
.mx-res-acts{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.mx-skill-res h4{margin:0 0 8px}
.mx-sres{display:flex;flex-wrap:wrap;gap:12px}
.mx-sres-item{margin:0;width:calc(50% - 6px);display:flex;flex-direction:column;gap:4px}
.mx-sres-img{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:0;cursor:zoom-in;overflow:hidden}
.mx-sres-img img{display:block;width:100%;height:110px;object-fit:cover}
.mx-sres-item figcaption{font-size:13px;color:var(--muted)}
.mx-sres-item.zoom{width:100%}.mx-sres-item.zoom .mx-sres-img{cursor:zoom-out}.mx-sres-item.zoom img{height:auto;max-height:70vh;object-fit:contain}
.mx-sres-open{display:block;margin:6px auto 0;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:13px;padding:6px 14px;cursor:pointer}
.mx-asgs{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.mx-asgs h2{margin:0;font-size:18px}
.mx-asg{border:1px solid var(--line);border-inline-start:4px solid var(--aurora);border-radius:18px;background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.mx-asg.late{border-inline-start-color:var(--sumac)}
.mx-asg-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.mx-asg-due{color:var(--muted);font-size:13px;white-space:nowrap}.mx-asg.late .mx-asg-due{color:var(--sumac);font-weight:700}
.mx-asg-note,.mx-asg-count{margin:0;color:var(--muted);font-size:14px}.mx-asg-count b{color:var(--ink)}
.mx-asg-items{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:14px}
.mx-asg-items li.done{color:var(--muted)}.mx-asg-items li.done span:first-child{color:var(--ok)}
.mx-asg-done summary{cursor:pointer;color:var(--muted)}.mx-asg-done ul{margin:6px 0 0;padding-inline-start:18px}
.mx-asg-pin{position:absolute;top:-6px;inset-inline-end:-6px;font-size:14px;line-height:1;pointer-events:none}
.mx-asg-t{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.mx-asg-t.past{border-color:var(--amber)}
.mx-asg-who summary{cursor:pointer;color:var(--mx-accent)}
.mx-asg-cell.ok{color:var(--ok)}.mx-asg-cell.late{color:var(--amber)}.mx-asg-cell.none,.mx-asg-cell.unknown{color:var(--muted)}
.mx-asg-form{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px}
.mx-asg-form h4{margin:0}
.mx-asg-form label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.mx-asg-form input[type=text],.mx-asg-form input:not([type]),.mx-asg-form input[type=date],.mx-asg-form textarea{font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px;box-sizing:border-box;width:100%}
.mx-asg-form fieldset{border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.mx-asg-form legend{color:var(--mx-accent);font-size:14px;padding:0 6px}
.mx-asg-form details>summary{cursor:pointer}
.mx-asg-checks{display:flex;flex-direction:column;gap:4px;padding:6px 0}
.mx-asg-checks label{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
/* the teacher's classes on the home screen */
.mx-classes{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.mx-classes h2{margin:0;font-size:18px}
.mx-classes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.mx-myclass{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;text-align:start;border:1px solid color-mix(in srgb,var(--mx-accent) 45%,var(--line));border-radius:16px;background:var(--surface);color:var(--ink);padding:12px 14px;cursor:pointer;font:inherit}
.mx-myclass b{font-size:17px;overflow-wrap:anywhere}.mx-myclass small{grid-column:1;color:var(--muted)}
.mx-myclass i{grid-row:1/3;grid-column:2;color:var(--mx-accent);font-style:normal;font-size:22px}
.mx-myclass:hover{border-color:var(--mx-accent)}
.mx-ai-left{margin:0;color:var(--muted)}
/* worksheets on assignments (app/worksheets.py) */
.mx-asg-due.soon{color:var(--amber);font-weight:700}
.mx-subs{display:flex;flex-direction:column;gap:6px}
.mx-subs li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}.mx-subs li small{color:var(--muted)}
.mx-subs .mx-btn{margin-inline-start:auto}
.mx-ws-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.mx-ws-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink);border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:8px 10px;overflow-wrap:anywhere}
.mx-ws-list small{color:var(--muted)}
.mx-ws-add{display:flex;flex-direction:column;gap:8px}
.mx-asg-form input[type=file]{font:inherit;color:var(--ink);max-width:100%}
.mx-ws-add progress,.mx-ws-hand progress{width:100%;max-width:240px;accent-color:var(--mx-accent)}
.mx-ws-sum{margin:0;font-size:14px;color:var(--muted);overflow-wrap:anywhere}.mx-ws-sum b{color:var(--ink)}
.mx-ws-wait{color:var(--amber);font-weight:700}
.mx-ws-cell{white-space:nowrap}.mx-ws-cell.wait{color:var(--amber)}
.mx-ws-badge{display:inline-block;border-radius:999px;padding:1px 8px;font-size:12px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.mx-ws-badge.checked{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,var(--line))}
.mx-ws-comment{margin:4px 0 0;padding:6px 10px;border-radius:10px;background:var(--mx-accent-soft);color:var(--ink);font-size:14px;overflow-wrap:anywhere;white-space:pre-line}
.mx-ws-pages{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.mx-ws-page{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;min-height:120px}
.mx-ws-page img{display:block;width:100%;height:auto}
.mx-ws-hand{display:flex;flex-direction:column;gap:8px}
.mx-ws-done{margin:0;color:var(--ok);font-size:14px}
.mx-ws-checked{margin:0;color:var(--ok);font-weight:700}.mx-ws-checked b{font-size:20px}
.mx-ws-late{color:var(--amber)}
.mx-ws-chosen{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.mx-ws-chosen li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--surface-2)}
.mx-ws-chosen li img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
.mx-ws-acts{display:flex;gap:4px;justify-content:center}.mx-ws-chosen li .mx-link{min-width:32px;min-height:32px}
.mx-ws-review{display:flex;flex-direction:column;gap:8px}.mx-ws-review h4{margin:0;overflow-wrap:anywhere}
.mx-ws-check{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px}
.mx-ws-check label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.mx-ws-check input,.mx-ws-check textarea{font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px;box-sizing:border-box;width:100%}
.mx-ws-check input{max-width:120px}
.mx-aq-code,.mx-uq-code{font:700 13px/1 var(--f-body);letter-spacing:.08em;padding:4px 8px;border-radius:8px;background:var(--surface-2);color:var(--ink,inherit)}
.mx-uq-code{font-size:15px}
.mx-preview{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding:8px 12px;border:1px dashed var(--mx-accent);border-radius:12px;background:var(--mx-accent-soft);color:var(--ink);font-weight:700}
/* the class map: a row per student, a column per unit, coloured by how far the student is */
.mx-heat{border-collapse:separate;border-spacing:3px;min-width:max-content;font-size:12px}
.mx-heat th{font-weight:400;padding:0}
.mx-heat .mx-grid-name{padding:0 8px;font-size:13px;border-bottom:0}
.mx-heat-wrap{padding:0 18px 0 100px}
.mx-heat-col{position:relative;height:110px;vertical-align:bottom}
.mx-heat-unit{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;right:6px;left:auto;bottom:4px;max-width:140px;direction:rtl;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:100% 100%;transform:rotate(45deg);color:var(--muted);font-size:12px;line-height:1.2}
.mx-heat-unit:focus-visible{outline:2px solid var(--mx-accent);border-radius:4px}
.mx-heat-unit:hover{color:var(--ink,inherit)}
.mx-heat-unit span{display:inline}
.mx-heat-col.hard .mx-heat-unit{color:var(--sumac);font-weight:700}
.mx-heat-cell{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:30px;border-radius:6px;font-size:11px;font-weight:700;background:var(--line);color:var(--ink,inherit)}
.mx-heat-cell.h0{background:var(--line);opacity:.55}
.mx-heat-cell.h1{background:color-mix(in srgb,var(--ok) 28%,var(--surface))}
.mx-heat-cell.h2{background:color-mix(in srgb,var(--ok) 52%,var(--surface))}
.mx-heat-cell.h3{background:color-mix(in srgb,var(--ok) 76%,var(--surface))}
.mx-heat-cell.h4{background:var(--ok);color:var(--surface)}
.mx-heat-cell.stuck::after{content:"";position:absolute;top:3px;inset-inline-end:3px;width:8px;height:8px;border-radius:50%;background:var(--sumac);box-shadow:0 0 0 2px var(--surface)}
.mx-heat-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:6px 0}
.mx-heat-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-3px;margin-inline-end:4px;background:var(--line)}
.mx-heat-legend .h0{opacity:.55}.mx-heat-legend .h1{background:color-mix(in srgb,var(--ok) 28%,var(--surface))}.mx-heat-legend .h2{background:color-mix(in srgb,var(--ok) 52%,var(--surface))}
.mx-heat-legend .h3{background:color-mix(in srgb,var(--ok) 76%,var(--surface))}.mx-heat-legend .h4{background:var(--ok)}
/* the student's card: status, the last 14 days, difficulties as chips */
.mx-spark{display:flex;align-items:flex-end;gap:2px;height:22px;width:56px;flex:none}
.mx-spark i{flex:1;background:var(--mx-accent);border-radius:2px;min-height:3px}
.mx-spark i.off{background:var(--line)}
.mx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.mx-chips em{font-style:normal;margin-inline-start:3px}
@media (max-width:600px){.mx-spark{display:none}}
/* the map's month columns: a month opens into its units */
.mx-heat td{text-align:center}.mx-heat-cell{margin:0 auto}
.mx-heat-gcol{vertical-align:bottom;min-width:76px}
.mx-heat-group{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:6px 4px;text-align:center;font-size:13px;font-weight:700;color:var(--ink,inherit);border-radius:8px;background:var(--surface-2)}
.mx-heat-group small{display:block;font-weight:400;font-size:11px;color:var(--muted)}
.mx-heat-group:hover{background:var(--line)}
.mx-heat-group:focus-visible{outline:2px solid var(--mx-accent)}
.mx-heat-gcol.hard .mx-heat-group{color:var(--sumac)}
.mx-heat-gopen{border-bottom:2px solid var(--mx-accent)}
.mx-heat-gopen .mx-heat-group{background:none;color:var(--mx-accent)}
/* final unit quizzes, and the skills to practise before a retake (app/quiz_modes.py) */
.mx-uq-final{border:1px solid color-mix(in srgb,var(--mx-accent) 55%,var(--line));border-radius:14px;padding:12px 14px;margin:10px 0;background:color-mix(in srgb,var(--mx-accent) 10%,var(--surface))}
.mx-uq-final h4{margin:0 0 6px}
.mx-uq-retake{border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:12px 0;background:var(--surface)}
.mx-uq-retake h4{margin:0 0 4px}
.mx-uq-skills{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.mx-uq-skills small{color:var(--muted)}
.mx-asg-personal{font:600 12px/1 var(--f-body);color:var(--mx-accent);margin-inline-start:6px}
.mx-ws-returned{border:1px solid color-mix(in srgb,#F59E0B 55%,var(--line));border-radius:12px;padding:8px 12px;margin:6px 0;background:color-mix(in srgb,#F59E0B 10%,var(--surface))}
.mx-ws-badge.back{color:#F59E0B}
.mx-ws-note{display:grid;gap:4px;margin:8px 0}
.mx-ws-note textarea{width:100%;box-sizing:border-box}
.mx-ws-earlier{margin:6px 0}.mx-ws-earlier ul{margin:4px 0;padding-inline-start:18px}
.mx-ws-return-box{margin-top:10px}
/* the student's task list (המשימות שלי) */
.mx-tasks-sum{display:flex;flex-direction:column;gap:2px;width:100%;text-align:start;padding:12px 14px;margin:8px 0;border:1px solid color-mix(in srgb,var(--mx-accent) 50%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--mx-accent) 10%,var(--surface));color:var(--ink);cursor:pointer;font:inherit}
.mx-tasks-sum.quiet{border-color:var(--line);background:var(--surface)}
.mx-tasks-sum span{color:var(--muted);font-size:14px}
.mx-tasks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mx-task{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.mx-task p{margin:2px 0 0}
.mx-task-chip{font:600 12px/1.2 var(--f-body);padding:4px 8px;border-radius:99px;background:var(--surface-2);white-space:nowrap}
.mx-task-chip[data-task=returned],.mx-task-chip[data-task=late]{background:color-mix(in srgb,#F59E0B 25%,var(--surface));color:#FBBF24}
.mx-task-chip[data-task=waiting]{background:color-mix(in srgb,var(--mx-accent) 22%,var(--surface))}
.mx-task-chip[data-task=checked],.mx-task-chip[data-task=handed]{background:color-mix(in srgb,#22C55E 20%,var(--surface))}
@media (max-width:480px){.mx-task{grid-template-columns:1fr auto}.mx-task .mx-btn{grid-column:1/-1}}
/* the student's grades page (הציונים שלי) */
.mx-grades-btn{display:inline-block;margin:0 0 8px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.mx-grade-unit{border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:10px 0;background:var(--surface)}
.mx-grade-unit h4{margin:0 0 6px}
.mx-grades{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mx-grade-kind{display:inline-block;font:600 12px/1.2 var(--f-body);padding:3px 8px;border-radius:99px;background:var(--surface-2);color:var(--muted);margin-inline-end:6px}
.mx-grade-kind.official{background:color-mix(in srgb,var(--mx-accent) 25%,var(--surface));color:var(--ink)}
.mx-grade-new{border:1px solid color-mix(in srgb,var(--mx-accent) 55%,var(--line));border-radius:14px;padding:8px 14px;background:color-mix(in srgb,var(--mx-accent) 10%,var(--surface))}
.mx-grade-new h4{margin:0 0 4px}.mx-grade-new ul{margin:0;padding-inline-start:18px}
/* preparing for an exam */
.mx-prep-open{border-color:color-mix(in srgb,var(--mx-accent) 55%,var(--line))}
.mx-prep-ready,.mx-prep-plan{border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:10px 0;background:var(--surface)}
.mx-prep-ready h4,.mx-prep-plan h4{margin:0 0 6px}
.mx-prep-unit{margin:8px 0}
.mx-prep-skills,.mx-prep-steps,.mx-prep-mistakes{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}
.mx-prep-skills small{color:var(--muted)}
.mx-prep-skills li[data-state=fading] small,.mx-prep-skills li[data-state=new] small{color:#FBBF24}
.mx-prep-step{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;background:var(--surface-2)}
.mx-prep-step.done{opacity:.65}
.mx-prep-step.today{outline:1px solid color-mix(in srgb,var(--mx-accent) 60%,var(--line))}
.mx-prep-today{color:var(--mx-accent);font-weight:700}
/* the report's focus areas and final quizzes */
.mx-focus{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:8px 0;background:var(--surface-2)}
.mx-focus h5{margin:0 0 4px}
.mx-focus-list{margin:4px 0;padding-inline-start:20px;display:grid;gap:4px}
.mx-final-t,.mx-exam-t{border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:10px 0;background:var(--surface)}
.mx-final-t h4,.mx-exam-t h4{margin:0 0 4px}
.mx-aq-budget{border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:8px 0 12px;background:var(--surface)}
.mx-aq-budget h4{margin:0 0 4px}
.mx-aq-scopes{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.mx-ws-ai{border:1px dashed var(--line);border-radius:10px;padding:6px 10px}
.mx-inbox{list-style:none;margin:6px 0;padding:0;display:grid;gap:6px}
.mx-inbox-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.mx-inbox-row p{margin:2px 0 0}
.mx-inbox-filters{flex-wrap:wrap;gap:8px}
.mx-inbox-count{color:var(--mx-accent);font-weight:700}
/* home: only what has a date or needs the student, then a way back to the path */
.mx-home{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.mx-home>*{margin-top:0}
.mx-home-exam b{font-size:16px}
.mx-home-empty{margin:4px 0}
.mx-continue{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:13px 16px;border:1px solid var(--line);border-inline-start:4px solid var(--gold);border-radius:18px;background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.mx-continue span{color:var(--muted);font-size:13px}
.mx-continue:hover{border-color:var(--gold)}
/* quizzes chosen for each student, on home */
.mx-hq{display:flex;flex-direction:column;gap:8px}
.mx-hq h2{font-size:17px;margin:4px 0 0}
.mx-hq .mx-quiz-card{margin-top:0}
.mx-hq-today{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;background:var(--gold);color:var(--bg,#000);font-size:12px;font-weight:600}
.mx-hq-best{color:var(--ink);font-size:13px}
.mx-hq-card.blocked{cursor:default;opacity:.92}
.mx-hq-card.blocked .mx-chips{display:flex;flex-wrap:wrap;gap:6px}
.mx-quiz-fb:empty{display:none}
.mx-quiz-fb{margin-top:10px}
.mx-quiz-sure{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.mx-quiz-sure [aria-pressed=true]{border-color:var(--aurora);color:var(--aurora)}
.mx-quiz-best{margin:6px 0 10px}
.mx-quiz-surewrong{margin:12px 0}
.mx-quiz-note{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin:12px 0}
.mx-quiz-note label{display:flex;flex-direction:column;gap:4px;flex:1 1 220px}
.mx-quiz-note input{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.mx-quiz-example{margin-top:8px}
/* the button that sends the hand-in, after a page was added from the board */
.mx-btn.mx-attn{box-shadow:0 0 0 3px color-mix(in srgb,var(--mx-accent) 60%,transparent);animation:mx-attn 1.2s ease-in-out 3}
@keyframes mx-attn{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--mx-accent) 25%,transparent)}}
@media (prefers-reduced-motion:reduce){.mx-btn.mx-attn{animation:none}}
/* the grades: one plain list, a row per item (no cards) */
.mx-glist{list-style:none;margin:8px 0;padding:0;border-top:1px solid var(--line)}
.mx-glist-row{display:grid;grid-template-columns:3.2em 1fr auto auto;gap:6px 10px;align-items:center;padding:8px 2px;border-bottom:1px solid var(--line)}
.mx-glist-row time{color:var(--muted);font-size:13px}
.mx-glist-what{display:flex;flex-direction:column;min-width:0}
.mx-glist-what small{color:var(--muted);font-size:12px}
.mx-glist-res{text-align:end;white-space:nowrap}
.mx-glist-row .mx-btn{padding:6px 10px;font-size:13px}
.mx-glist-row.todo{background:color-mix(in srgb,var(--mx-accent) 8%,transparent)}
.mx-glist-mark{font-size:11px;color:var(--gold);margin-inline-start:4px}
.mx-glist-units,.mx-glist-new{margin:6px 0;font-size:14px}
@media (max-width:480px){.mx-glist-row{grid-template-columns:3em 1fr auto}.mx-glist-row .mx-btn{grid-column:2/-1;justify-self:start}}
/* home: the lessons of the next exam, the ones to finish highlighted */
.mx-home-lessons{margin:8px 0}
.mx-home-lessons h3{margin:0 0 6px;font-size:16px}
.mx-home-lessons ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mx-home-lessons button{display:grid;grid-template-columns:1fr auto;gap:2px 8px;width:100%;text-align:start;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.mx-home-lessons button span{color:var(--muted);font-size:13px}
.mx-home-lessons button>.mx-meter{grid-column:1/-1;display:block;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.mx-home-lessons button>.mx-meter>i{display:block;height:100%;background:var(--mx-accent)}
.mx-home-lessons li.todo button{border:2px solid #F59E0B;background:color-mix(in srgb,#F59E0B 12%,var(--surface))}
.mx-home-lessons li.todo button span{color:#FBBF24;font-weight:700}
.mx-home-lessons li.done button{opacity:.7}
/* Mathly's narrow practice path: progress, the next skill, and each unit's winding trail. */
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&family=Secular+One&family=STIX+Two+Text:wght@400;600&display=swap");
#mathView{
color-scheme:dark;
/* the night sky: a deep blue ground, starlight, gold for mastery, aurora for the next step, ember for the streak */
--bg:#060A19; --night-2:#0E1532; --surface:#121B3B; --surface-2:#18234A; --ink:#F2EFFF; --muted:#9BA5CD; --dim:#5B6694; --line:#27335F;
--ok:#6CC08A; --ok-bg:#12291B; --sumac:#F08A96; --sumac-bg:#33161B; --amber:#E0B45A; --amber-bg:#2E2512;
--olive:#A6C77A; --olive-soft:#1E2618;
--gold:#F7C948; --gold-deep:#B5841A; --starlight:#EAF0FF; --aurora:#7EE3C8; --on-aurora:#05231B; --ember:#FF8B5C; --ember-bg:#3A1D18;
--owl:#8C6A4A; --owl-belly:#E1C496; --owl-eye:#FFF8E6; --owl-pupil:#1B1530; --beak:#F29A4A;
--mx-accent:#7EE3C8; --mx-accent-soft:#163A36; --mx-on-accent:#05231B;
--u-t:#93B85F; --u-k:#B89BEB; --u-q:#6FB3D2; --u-e:#7C9BE6; --u-a:#C99BD8; --u-z:#9C8FD6; --u-r:#C8C26A;
--u-h:#E0915A; --u-s:#5CA8C2; --u-m:#D6A3E0; --u-n:#5CC2B2; --u-p:#E0B45A; --u-w:#D98AAE; --u-d:#A9B7F2;
--mx-scrim:rgb(3 5 14 / .74); --glass:rgb(9 14 34 / .86);
--f-math:"STIX Two Text","Cambria Math","Times New Roman",serif;
--f-display:"Secular One","Rubik",system-ui,sans-serif;
--f-body:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
font-family:var(--f-body);
}
html.math-on, html.math-on body{overflow:hidden}
#mathView{position:fixed;inset:0;z-index:60;overflow:auto;overscroll-behavior:contain;background:radial-gradient(120% 60% at 85% -10%,rgb(52 70 170 / .32),transparent 60%),radial-gradient(90% 50% at 0% 40%,rgb(120 60 160 / .16),transparent 70%),var(--bg);background-attachment:fixed;color:var(--ink);
padding-block:max(12px, env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-bottom, 0px));
padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
#mathView[hidden]{display:none}
#mathView .u-t{--uc:var(--u-t)} #mathView .u-k{--uc:var(--u-k)} #mathView .u-q{--uc:var(--u-q)} #mathView .u-e{--uc:var(--u-e)}
#mathView .u-a{--uc:var(--u-a)} #mathView .u-z{--uc:var(--u-z)} #mathView .u-r{--uc:var(--u-r)} #mathView .u-h{--uc:var(--u-h)}
#mathView .u-s{--uc:var(--u-s)} #mathView .u-m{--uc:var(--u-m)} #mathView .u-n{--uc:var(--u-n)} #mathView .u-p{--uc:var(--u-p)}
#mathView .u-w{--uc:var(--u-w)} #mathView .u-d{--uc:var(--u-d)}
/* units split off an older unit keep its colour */
#mathView .u-i{--uc:var(--u-k)} #mathView .u-l,#mathView .u-o{--uc:var(--u-a)} #mathView .u-v{--uc:var(--u-e)}
#mathView .u-g,#mathView .u-z2{--uc:var(--u-z)} #mathView .u-t2{--uc:var(--u-t)} #mathView .u-q2{--uc:var(--u-q)} #mathView .u-b,#mathView .u-c{--uc:var(--u-m)}
#mathView h1,#mathView h2,#mathView h3{font-family:var(--f-display);font-weight:400;margin:0;text-wrap:balance}
#mathView button{font-family:var(--f-body)}
#mathView button:focus-visible{outline:3px solid var(--mx-accent);outline-offset:2px}
#mathView .m{font-family:var(--f-math);direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-size:1.05em}
/* an equation drawn as a picture by math-tex.js */
#mathView .m.m-img{font-size:1.12em}
#mathView .m-img svg{display:inline-block;overflow:visible;max-width:none}
.mx-wrap{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.mx-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mx-top h1{font-size:28px;line-height:1.15;color:var(--mx-accent)}
.mx-sub{margin:2px 0 0;color:var(--muted);font-size:15px}
.mx-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mx-btn{border:1px solid var(--mx-accent);background:transparent;color:var(--mx-accent);font:700 14px/1 var(--f-body);padding:9px 14px;border-radius:999px;cursor:pointer}
.mx-btn.solid{background:var(--mx-accent);color:var(--mx-on-accent)}
.mx-note{margin:0;color:var(--muted);font-size:14px}
.mx-subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mx-subject-card{--exam:var(--mx-accent);display:flex;align-items:center;gap:12px;min-width:0;padding:14px;border:1px solid color-mix(in srgb,var(--exam) 48%,var(--line));border-radius:16px;background:linear-gradient(130deg,color-mix(in srgb,var(--exam) 14%,var(--surface)),var(--surface));color:var(--ink);text-align:start;cursor:pointer}
.mx-subject-card:hover{border-color:var(--exam);transform:translateY(-1px)}
.mx-subject-icon{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--exam) 22%,var(--bg));color:var(--exam);font:700 24px/1 var(--f-body)}
.mx-subject-card>span:nth-child(2){display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.mx-subject-card b{font-size:18px}.mx-subject-card small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx-subject-card i{color:var(--exam);font-size:26px;font-style:normal}
.mx-subject-empty{--exam:var(--mx-accent);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;border:1px solid color-mix(in srgb,var(--exam) 45%,var(--line));border-radius:18px;background:var(--surface);padding:32px 20px}.mx-subject-empty>span{font-size:42px}.mx-subject-empty h2{color:var(--exam)}.mx-subject-empty p{max-width:480px;margin:0;color:var(--muted);line-height:1.5}
.mx-subject-left{display:flex;align-items:center;gap:6px}
.mx-subject-dots{display:inline-flex;gap:3px;flex:none}.mx-subject-dots>span{width:8px;height:8px;border-radius:50%;background:var(--exam)}.mx-subject-dots>span.past{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--exam) 55%,var(--line))}
.mx-subject-bar{display:block;height:6px;border-radius:99px;background:color-mix(in srgb,var(--exam) 28%,var(--line));overflow:hidden;margin-top:2px}.mx-subject-bar>span{display:block;height:100%;border-radius:inherit;background:var(--exam)}
.mx-subject-count{flex:none;display:flex;flex-direction:column;align-items:center;min-width:48px;padding:6px 8px;border-radius:12px;background:color-mix(in srgb,var(--exam) 14%,var(--bg));line-height:1.1}
.mx-subject-card .mx-subject-count b{font:700 22px/1.1 var(--f-display)}.mx-subject-card .mx-subject-count small{font-size:11px}
.mx-subject-count.soon{background:var(--amber-bg);color:var(--amber)}.mx-subject-count.urgent{background:var(--sumac-bg);color:var(--sumac)}
.mx-subject-count.soon small,.mx-subject-count.urgent small{color:inherit}
.mx-subject-card.is-over{opacity:.55;filter:saturate(.4)}.mx-subject-card.is-over:hover{opacity:.8}
@media (max-width:520px){.mx-subject-grid{grid-template-columns:1fr}}
/* a skill's sheet */
.mx-layer[hidden]{display:none}
.mx-scrim{position:fixed;inset:0;z-index:61;background:var(--mx-scrim)}
.mx-sheet{position:fixed;inset:auto 0 0 0;z-index:62;max-height:88vh;overflow:auto;background:var(--surface);border-radius:20px 20px 0 0;
box-shadow:0 -6px 30px rgb(0 0 0/.2);display:flex;flex-direction:column;gap:14px;
padding-block:16px calc(24px + env(safe-area-inset-bottom, 0px));
padding-left:max(18px, env(safe-area-inset-left, 0px));padding-right:max(18px, env(safe-area-inset-right, 0px))}
@media (min-width:720px){.mx-sheet{inset:auto calc(50% - 330px) 0 calc(50% - 330px)}}
.mx-sheet>p{margin:0}
.mx-shtop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.mx-shtop h3{font-size:24px;line-height:1.2;margin-top:8px}
.mx-uchip{display:inline-block;font:700 13px/1 var(--f-body);color:var(--uc);border:1px solid var(--uc);padding:5px 10px;border-radius:999px}
.mx-src{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.mx-x{border:0;background:none;color:var(--muted);font-size:22px;line-height:1;padding:6px 10px;border-radius:8px;cursor:pointer}
.mx-hint{background:var(--amber-bg);color:var(--ink);border-radius:12px;padding:10px 12px;font-size:15px;display:flex;flex-direction:column;gap:6px}
.mx-q{background:var(--bg);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.mx-q>p{margin:0;font-size:19px}
.mx-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:420px){.mx-choices{grid-template-columns:1fr}}
.mx-choices button{padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 17px/1.3 var(--f-body);cursor:pointer}
.mx-choices button:hover{border-color:var(--mx-accent)}
.mx-choices button.right{background:var(--ok-bg);border-color:var(--ok)}
.mx-choices button.wrong{background:var(--amber-bg);border-color:var(--amber)} /* a mistake is amber, not alarm red */
.mx-ok,.mx-bad{border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mx-ok{background:var(--ok-bg);color:var(--ok)}
.mx-bad{background:var(--amber-bg)}
.mx-bad b{color:var(--amber)}
.mx-small{font-size:13px;color:var(--muted)}
.mx-sec h4{margin:0 0 6px;font:700 12px/1 var(--f-body);letter-spacing:.06em;color:var(--muted)}
.mx-chips{display:flex;gap:6px;flex-wrap:wrap}
.mx-chips em{font-style:normal;color:var(--muted);font-size:14px}
.mx-chip{border:1px solid var(--uc);background:var(--bg);color:var(--ink);font:600 14px/1 var(--f-body);padding:7px 10px;border-radius:999px;cursor:pointer}
.mx-chip.is-done{background:var(--uc);color:var(--surface)}
.mx-plot{direction:ltr;align-self:center;width:100%;max-width:340px}
.mx-plot svg{display:block;width:100%;height:auto}
.mx-plot .g{stroke:var(--line);stroke-width:1}
.mx-plot .a{stroke:var(--muted);stroke-width:1.5}
.mx-plot .c{fill:none;stroke:var(--uc,var(--starlight));stroke-width:2.5}