/* Accessibility: the keyboard (skip link, one focus ring), screen-reader-only text, and Settings › Look's choices
   (web/js/access.js sets data-font, data-contrast, data-motion and data-text on <html>). */

/* ---------- keyboard ---------- */
.skiplink{position:fixed;inset-inline-start:12px;top:calc(8px + env(safe-area-inset-top,0px));z-index:10050;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--onink);font-weight:700;font-size:.9375rem;text-decoration:none;transform:translateY(-160%);transition:transform .15s}
.skiplink:focus{transform:none}
/* one focus ring everywhere, for keyboards only (taps don't show it): a dark/light halo outside the coloured ring so it
   shows on yellow buttons, glass and pictures alike */
:focus-visible{outline:3px solid var(--focus)!important;outline-offset:2px;box-shadow:0 0 0 5px var(--paper)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline-offset:1px}
main:focus,#main:focus,.sheet2:focus,.amenu:focus,h1[tabindex="-1"]:focus{outline:none!important;box-shadow:none}
/* phones hide the page's title in the header (the logo shows instead); screen readers still get it */
@media (max-width:759.98px){h1.onlywide{display:block!important;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}}

/* a row's name as its open/close button (classes: set work, students), looking like the text it was */
.sbtn{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:start;cursor:pointer;min-width:0}
.asgcard .t.sbtn,.sch .sbtn{flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:start}
/* People: a folding row's ⋯ sits beside its summary (not inside it: a control inside a summary can't be reached properly) */
.ppfoldw{position:relative}
.ppdotsgap{flex:none;width:32px;height:32px}
.ppfoldw>.ppdots{position:absolute;top:calc(26px - 16px);inset-inline-end:32px;width:32px;height:32px}

/* ---------- contrast fixes (WCAG AA) ---------- */
/* section names in a subject's colour: darker in light mode so yellow and orange stay readable */
:root:not([data-theme=dark]) .ctext{color:color-mix(in srgb,var(--tc,var(--ink)) 45%,var(--ink))}

/* switches: the "off" track stands out from the row behind it (3:1) */
.calcsw input:not(:checked){background:color-mix(in srgb,var(--ink) 50%,var(--paper))}

/* ---------- read aloud (web/js/speak.js) ---------- */
.saybtn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;vertical-align:middle}
.saybtn:hover{background:var(--soft);color:var(--ink)}
.saybtn[aria-pressed=true]{background:var(--ink);color:var(--onink)}
.saybtn svg{width:18px;height:18px}
.saybtn.sm{width:28px;height:28px}.saybtn.sm svg{width:16px;height:16px}
.saybtn.corner{position:absolute;top:8px;inset-inline-end:8px}
.theadmore~.saybtn.corner{inset-inline-end:44px}
.thead2:has(>.saybtn.corner)>.lead:first-child{padding-inline-end:30px}
.thead2:has(>.theadmore~.saybtn.corner)>.lead:first-child{padding-inline-end:66px}
.saybtn.endbtn{margin-inline-start:auto}
p>.saybtn,.pq>.saybtn,.tq>.saybtn,li>.saybtn,.qtext>.saybtn,.tbox>.saybtn{margin-inline-start:4px;vertical-align:-8px}
.saybar{position:fixed;left:50%;bottom:calc(var(--tabbar,0px) + 76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9500;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:var(--ink);color:var(--onink);box-shadow:0 6px 20px var(--shadow)}
.saybar button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;font-weight:600;font-size:.875rem;cursor:pointer}
.saybar button:hover{background:color-mix(in srgb,var(--onink) 14%,transparent)}
.saybar svg{width:18px;height:18px}
@media (min-width:760px){.saybar{bottom:24px}}

/* ---------- dyslexia-friendly font: Atkinson Hyperlegible (SIL OFL 1.1, Braille Institute); downloaded only when used ---------- */
@font-face{font-family:'Atkinson Hyperlegible';src:url(/assets/fonts/Atkinson-latin-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';src:url(/assets/fonts/Atkinson-latin-700.woff2) format('woff2');font-weight:500 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';src:url(/assets/fonts/Atkinson-latin-ext-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';src:url(/assets/fonts/Atkinson-latin-ext-700.woff2) format('woff2');font-weight:500 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root[data-font=readable]{--sans:'Atkinson Hyperlegible','Lexend',system-ui,-apple-system,'Segoe UI',sans-serif}
:root[data-font=readable] body{letter-spacing:.012em;word-spacing:.06em}
:root[data-font=readable] p,:root[data-font=readable] .bd,:root[data-font=readable] .qbody{line-height:1.6}

/* ---------- text size: every app size is in rem ---------- */
:root[data-text=l]{font-size:112.5%}
:root[data-text=xl]{font-size:125%}

/* ---------- high contrast: stronger text, edges on everything, no see-through glass or doodles ---------- */
:root[data-contrast=more]{--muted:#2F343C;--faint:#40464F;--line:#6E7581;--soft:#E3E6EB;--focus:#004E9A;--okText:#05603A;--badText:#8E0B14;--chkText:#05536B;
  --glass-bg:var(--paper);--glass-blur:none;--glass-edge:var(--ink);--card-shadow:0 0 0 1.5px var(--line);--card-shadow-hi:0 0 0 2px var(--ink)}
:root[data-contrast=more][data-theme=dark]{--desk:#000;--paper:#0D0E11;--board:#111317;--field:#16181D;--muted:#D9DDE3;--faint:#C2C7CF;--line:#8B929D;--soft:#24272E;--focus:#8FEAFF;--okText:#7DF0C2;--badText:#FFB0B6;--chkText:#A6EEFF}
:root[data-contrast=more] body::after,:root[data-contrast=more] body::before{display:none}
:root[data-contrast=more] .tabbar,:root[data-contrast=more] .head::before,:root[data-contrast=more] .rail{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--paper)!important}
:root[data-contrast=more] .btn.sec,:root[data-contrast=more] .fchip,:root[data-contrast=more] .input,:root[data-contrast=more] .select,:root[data-contrast=more] .textarea{border-color:var(--ink)!important}
:root[data-contrast=more] .btn:not(.sec):not(.ghost){box-shadow:inset 0 0 0 2px var(--ink)}
:root[data-contrast=more] .main a:not(.btn):not(.fchip):not(.tab):not(.nav):not([class*=card]):not([class*=row]):not([class*=tile]):not(.iconbtn):not(.pickbtn){text-decoration:underline;text-underline-offset:2px}
:root[data-contrast=more] .muted,:root[data-contrast=more] .small{opacity:1!important}

/* ---------- reduce motion (the setting, or the device's own) ---------- */
:root[data-motion=reduce] *,:root[data-motion=reduce] ::before,:root[data-motion=reduce] ::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
:root[data-motion=reduce] .spiral path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
/* the spinner still shows something is happening, by fading instead of turning */
@keyframes a11yfade{from{opacity:1}to{opacity:.35}}
:root[data-motion=reduce] .spinner{animation:a11yfade .9s ease-in-out infinite alternate!important;border-top-color:var(--line)}
@media (prefers-reduced-motion:reduce){.spinner{animation:a11yfade .9s ease-in-out infinite alternate!important;border-top-color:var(--line)}}