/* Colour themes for the school site (operator request, 2026-10-30). Chosen on the sign-in page, kept on the device, and applied
   to every page the school site serves (the Worker adds this file): sign-in, dashboard, tours and the apps.
   Sources (read 2026-10-30): the British Dyslexia Association advises dark (not black) text on a light (not white) background,
   such as cream, and says each person has their own most comfortable colours (as quoted by Dyslexia Scotland, 25 July 2023,
   dyslexiascotland.org.uk/contrasting-advice-what-colours-are-best-for-accessibility/). RNIB's site offers light, dark and a
   desaturated "yellow mode" chosen with people with sight loss (torchbox.com/blog/rnib-yellow-mode, 6 Jan 2025).
   Variables cover both our pages (--card ...) and the apps (--surface ...). */
:root[data-vrtheme="cream"]{--bg:#F7EFD9!important;--surface:#FFF9EA!important;--card:#FFF9EA!important;--ink:#1F2A44!important;--muted:#4B5563!important;--line:#E2D6B8!important;--soft:#F1E7CC!important;--accent:#1E5AA8!important;--accent-ink:#FFFFFF!important}
:root[data-vrtheme="blue"]{--bg:#E3ECF7!important;--surface:#F4F8FD!important;--card:#F4F8FD!important;--ink:#1F2A44!important;--muted:#4B5563!important;--line:#C9D6E6!important;--soft:#DCE6F2!important;--accent:#1E5AA8!important;--accent-ink:#FFFFFF!important}
:root[data-vrtheme="green"]{--bg:#E4F2E7!important;--surface:#F4FAF5!important;--card:#F4FAF5!important;--ink:#1F2A44!important;--muted:#4B5563!important;--line:#C8DFCD!important;--soft:#D8ECDD!important;--accent:#1E5AA8!important;--accent-ink:#FFFFFF!important}
:root[data-vrtheme="yellow"]{--bg:#FBF5D3!important;--surface:#FFFCEB!important;--card:#FFFCEB!important;--ink:#1F2A44!important;--muted:#4B5563!important;--line:#E6DDAA!important;--soft:#F4ECC2!important;--accent:#1E5AA8!important;--accent-ink:#FFFFFF!important}
:root[data-vrtheme="dark"]{--bg:#1E1E1E!important;--surface:#2A2A2A!important;--card:#2A2A2A!important;--ink:#E8E6E3!important;--muted:#B5B1AB!important;--line:#454545!important;--soft:#333333!important;--accent:#8AB4F8!important;--accent-ink:#0F1B2D!important;--good:#7CCB97!important;--bad:#F28B82!important;--warn:#F2C25C!important;--focus:#F2C25C!important;color-scheme:dark}
:root[data-vrtheme="contrast"]{--bg:#000000!important;--surface:#000000!important;--card:#000000!important;--ink:#FFFFFF!important;--muted:#FFFFFF!important;--line:#FFFFFF!important;--soft:#1A1A1A!important;--accent:#FFE45C!important;--accent-ink:#000000!important;--good:#7CFF9E!important;--bad:#FF9A8F!important;--warn:#FFE45C!important;--focus:#FFE45C!important;color-scheme:dark}
/* in the apps, the colour is now chosen once for the site, so the app's own Background buttons are hidden */
:root[data-vrtheme] .grp:has(> .sw){display:none!important}
/* picker */
.vrthemes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:1fr;gap:10px}   /* every row as tall as the tallest: all buttons one size */
.vrtheme{display:flex;min-height:3.6em;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:3px solid transparent;font:inherit;font-weight:700;cursor:pointer;text-align:left}
.vrtheme[aria-pressed="true"]{outline:4px solid var(--accent);outline-offset:2px}
.vrtheme .aa{font-size:1.4rem;line-height:1}