/* Style · Stile (Kiers, 1–2 Oct 2026: "style mode is for students not for me, so it needs to be a simple dyslexic
   treatment — not crazy complex"). Round colour circles in the menu row and nothing else: Light (the site as it always
   was), Dark (the old dark mode), and three soft tints — Cream, Blue, Green. Choosing a tint switches on the whole
   easy-reading treatment at once: Lexend, the WCAG 1.4.12 spacing, upright Italian lines in violet, no justified text,
   dark grey text on the tint. For pupils: src/tf/read.js never draws it (nor applies a tint) on the board or on the
   teacher pages. Loaded by tf/bar.html on every page; saved on this device (localStorage "tf-read").

   Why these choices (research, Oct 2026):
   - British Dyslexia Association Dyslexia Style Guide (2018/2023): cream or soft pastel instead of dazzling white; dark
     (not black) text; sans-serif; bold for emphasis, no italics; left-aligned, not justified; line spacing 1.5.
   - WCAG 2.2 SC 1.4.12 text spacing: letter .12em, word .16em, line 1.5, after paragraphs 2em; 1.4.8: no justification.
   - Coloured backgrounds help some readers and not others (Griffiths et al. 2016), so they are a choice, never forced.
     Pictures, videos, drawings and the games are never tinted: only the page's own surfaces change colour.
   - Lexend is a legibility font (SIL Open Font License, tf/fonts/OFL-Lexend.txt).
   All three tints keep body text at ≥ 10.5:1 and the softest grey text at ≥ 5.6:1 (WCAG AA is 4.5:1). */

/* ── the font: self-hosted; a browser only downloads it when a tint is on ── */
@font-face{font-family:"TF Lexend";src:url(fonts/lexend-latin.woff2) format("woff2");font-weight:100 900;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}
/* every bit of page text, except code, the header, the games and the laser tool (they keep their own look) */
html[data-rd] body :where(*:not(pre,code,kbd,samp,textarea,svg,svg *,.tf-top *,.tf-sty,.tf-sty *,.tf-game,.tf-game *,.arc,.arc *,.lz,.lz *,.tf-hush *,.py-ed *,.cm-editor *)){
  font-family:"TF Lexend",Verdana,Arial,sans-serif!important}

/* ── the three tints: page, cards (what was white) and panels; text dark grey, not black ── */
html[data-rd]{--rd-fg:#2B2B2B;--rd-dim:#4D5560;--rd-it:#5B3A8C;--rd-itd:#D9CCF2;--rd-link:#1C4E9A}
html[data-rd="cream"]{--rd-bg:#FAF4E4;--rd-card:#FFFAEE;--rd-panel:#F1E8D2;--rd-line:#D9CBA8}
html[data-rd="peach"]{--rd-bg:#FBEADF;--rd-card:#FFF5EE;--rd-panel:#F3DDCD;--rd-line:#DCBFA8}
/* the site's own colour variables (faculty pages and class sites alike) */
html[data-rd][data-theme],html[data-rd]:root{--bg:var(--rd-bg);--panel:var(--rd-panel);--line:var(--rd-line);--fg:var(--rd-fg);--dim:var(--rd-dim);
  --card:#2B2B2B;--cardfg:var(--rd-card);--divider:#2B2B2B;--navbg:var(--rd-bg)}
html[data-rd] body{background:var(--rd-bg)!important;color:var(--rd-fg)}
/* the accents a shade deeper, so small coloured text stays ≥ 4.5:1 on every tint (faculty pages; the class sites' pink) */
html[data-rd] body.tf-page{--a1:#974608;--a2:#B61759;--a3:#A7380A;--a4:#875206}
html[data-rd] body:not(.tf-page){--a1:#B8005F;--a2:#B8005F;--a3:#B8005F;--a4:#B8005F}
html[data-rd] .kid-app{color:var(--rd-fg)}
/* the kids' bottom bar is white under a green line, drawn as a gradient (style.css) */
html[data-rd] .kid-nav{background:linear-gradient(transparent 60px,var(--tf-green,#617b30) 60px,var(--tf-green,#617b30) 64px,var(--rd-card) 64px)!important}
/* white boxes, found by read.js (data-rd-s): cards, speech bubbles, the kids' app bars, quiz options … */
html[data-rd] [data-rd-s]{background-color:var(--rd-card)!important}
/* coloured text darkened by read.js where a tint left it under 4.5:1 */
html[data-rd] [data-rd-c]{color:var(--rd-deep)!important}

/* ── reading: upright text (the Italian lines are italic site-wide: upright, in violet, instead), bold for emphasis,
      no justified text, no capitals-only headings, lines ≤ 70 characters ── */
html[data-rd] :is(em,i,cite,dfn,var,address):not(:is(.tf-top,.tf-game,.arc,.lz) *){font-style:normal!important;font-weight:700}
html[data-rd] [data-rd-it]{font-style:normal!important;color:var(--rd-it)!important}
html[data-rd] [data-rd-it="d"]{color:var(--rd-itd)!important}
html[data-rd] [data-rd-j],html[data-rd] [style*="justify"]{text-align:left!important}
html[data-rd] body :is(h1,h2,h3,.eyebrow):not(:is(.tf-top,.tf-game,.arc,.lz) *){text-transform:none}
html[data-rd]:not(.tf-stepping) body :is(p,.intro,.lead):not(:is(.tf-top,.tf-game,.arc,.lz) *){max-width:70ch}
/* plain text links: no underline, but bold and blue (underlined again on hover and focus) */
html[data-rd] body :is(p,li,td,dd,.intro,.lead,.tx) a:not([class]):not(:is(.tf-top,.tf-game,.arc,.lz) *){text-decoration:none;color:var(--rd-link);font-weight:700}
html[data-rd] body :is(p,li,td,dd,.intro,.lead,.tx) a:not([class]):is(:hover,:focus-visible){text-decoration:underline}

/* ── spacing: the WCAG 1.4.12 values, body text only (headings, menus, the design-cycle arrows, the lesson panel and
      buttons keep their own) ── */
html[data-rd] body :is(p,li,dd,dt,td,th,blockquote,figcaption,label,.intro,.lead,.sub,.h2it,.kid-bubble):not(:is(.tf-top,.tf-game,.arc,.lz,.tf-hush,.dc,.tf-side,.tf-steps,nav,.toc2,.crumbs,button) *):not(.dc>li){
  letter-spacing:.12em!important;word-spacing:.16em!important;line-height:1.6!important}
html[data-rd] body p:not(:last-child):not(:is(.tf-top,.tf-game,.arc,.lz,.tf-hush) *){margin-bottom:2em!important}

/* ════ the control in the menu row: just the circles ════ */
.tf-tabs-in>.tf-sty{order:3;margin-left:auto}
.tf-sty{position:relative;display:inline-flex;align-items:center;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:#16191d}
.tf-sty *{box-sizing:border-box}
.tf-sty-row{display:inline-flex;align-items:center;gap:6px}
.tf-sty-c,.tf-sty-b{flex:none;width:24px;height:24px;padding:0;margin:0;border-radius:50%;border:1.5px solid rgba(22,25,29,.35);background:var(--sw,#fff);cursor:pointer;
  box-shadow:0 0 0 2px #f7f8fa;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tf-sty-c:hover{transform:scale(1.12)}
.tf-sty-c[aria-pressed="true"]{box-shadow:0 0 0 2px #f7f8fa,0 0 0 4px #244572}
.tf-sty-c:focus-visible,.tf-sty-b:focus-visible{outline:2px solid #2f6096;outline-offset:3px}
/* the round button (phones, the kids' app): the colour now on, opens the circles */
.tf-sty-b{display:none;width:30px;height:30px;box-shadow:0 0 0 2px #f7f8fa,0 0 0 3.5px #244572}
.tf-sty-dot{display:none}
.tf-sty-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:1600;padding:10px 12px;border:1px solid #dfe3e8;border-radius:999px;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.tf-sty-pop[hidden]{display:none}
.tf-sty-pop .tf-sty-row{gap:10px}
.tf-sty-pop .tf-sty-c{width:34px;height:34px;box-shadow:0 0 0 2px #fff}
.tf-sty-pop .tf-sty-c[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px #244572}
@media (max-width:700px){
  .tf-tabs-in>.tf-sty>.tf-sty-row{display:none}
  .tf-tabs-in>.tf-sty>.tf-sty-b{display:block}
}
/* in the Primary kids' app the faculty header is hidden: the round button sits in the kids' top bar */
.kid-top>.tf-sty{flex:none}
.kid-top>.tf-sty>.tf-sty-row{display:none}
.kid-top>.tf-sty>.tf-sty-b{display:block;width:52px;height:52px;border:3px solid #14181f;box-shadow:none}
.kid-top>.tf-sty .tf-sty-pop{left:0;right:auto}
.kid-top>.tf-sty .tf-sty-pop .tf-sty-c{width:48px;height:48px}
@media print{.tf-sty{display:none}}