/* Brand font - Lato (OFL), embedded offline (Latin subset) */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(/shared/fonts/lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(/shared/fonts/lato-700.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url(/shared/fonts/lato-900.woff2) format('woff2')}
/* Shared shell: tokens, themes, Calm Mode, base components. Same token names as the offline apps.
   Every text/background pair below is checked by scripts/contrast-check.js (≥4.5:1 text, ≥3:1 borders).
   THE LOOK (2026-09-13, the author: "make the whole site/app match the style of the new welcome page"): violet accent,
   lavender ground, white cards with a soft hairline and a deep soft shadow, pill buttons, heavy tight headings.
   --line stays the gated 3:1 border for controls; --hairline is the decorative card edge (not a control boundary). */
:root{
  /* word cloud: six decorative colours, Bright and Pastel (gated on --stage in every theme) */
  --cloud-a:#5b2bd6; --cloud-b:#1a7f3c; --cloud-c:#c8102e; --cloud-d:#1f5bd6; --cloud-e:#0b6f7a; --cloud-f:#b23b00;
  --pastel-a:#5a5478; --pastel-b:#3f6f52; --pastel-c:#8a4f6a; --pastel-d:#4a5a8a; --pastel-e:#3f6f78; --pastel-f:#8a5a3a;
  --bg:#f6f4fd; --panel:#ffffff; --ink:#111633; --muted:#4a5068; --line:#8b85a8; --hairline:#e3e1f0;
  --accent:#5b2bd6; --accent-ink:#ffffff; --accent-soft:#efeafd; --good:#1a7f3c; --warn:#b23b00; --warn-ink:#ffffff; --bad:#c62828;
  --stage:#ffffff; --shadow:0 1px 2px rgba(30,20,80,.05),0 14px 34px rgba(60,40,140,.12); --shadow-sm:0 1px 2px rgba(30,20,80,.05),0 4px 14px rgba(60,40,140,.08);
  --optA:#c8102e; --optB:#1f5eff; --optC:#9a6500; --optD:#1a7f3c; --opt-ink:#ffffff;
  /* podium fills: white text on each is ≥4.5:1 */
  --gold:#8a6d00; --silver:#5f6673; --bronze:#8a5a20; --gold-text:#7a5f00; --silver-text:#535a66; --bronze-text:#7f4f14;
  --ok-bg:#e3f4e6; --warn-bg:#fff1e6;
  --radius:18px; --radius-sm:12px;
  --fs:1;
}
:root[data-theme="dark"]{
  --cloud-a:#a98bff; --cloud-b:#4cd07d; --cloud-c:#ff6b8a; --cloud-d:#6ea8ff; --cloud-e:#4fd8e8; --cloud-f:#ffb347;
  --pastel-a:#ddd2ff; --pastel-b:#c3f0d2; --pastel-c:#ffd0e4; --pastel-d:#c7d7ff; --pastel-e:#c8f1f5; --pastel-f:#ffe1bf;
  --bg:#0f0d1a; --panel:#1a1730; --ink:#eeeaf9; --muted:#b0a9cc; --line:#6f6890; --hairline:#2c2846;
  --accent:#a98bff; --accent-ink:#110f1f; --accent-soft:#261f45; --good:#4cd07d; --warn:#ff9f5b; --warn-ink:#0d1017; --bad:#ff6b6b;
  --stage:#110f1f; --shadow:0 1px 3px rgba(0,0,0,.5),0 14px 40px rgba(0,0,0,.45); --shadow-sm:0 1px 3px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  --optA:#e0263f; --optB:#1f5eff; --optC:#a06800; --optD:#1a7f3c;
  --gold-text:#f0c040; --silver-text:#c9d1de; --bronze-text:#e0a060;
  --ok-bg:#14301f; --warn-bg:#3a2210;
}
:root[data-theme="hc"]{
  --cloud-a:#ffd400; --cloud-b:#00e676; --cloud-c:#ff5252; --cloud-d:#c792ff; --cloud-e:#4fd8e8; --cloud-f:#ffb060;
  --pastel-a:#ffffff; --pastel-b:#c3f0d2; --pastel-c:#ffd0e4; --pastel-d:#e3d2ff; --pastel-e:#c8f1f5; --pastel-f:#ffe1bf;
  --bg:#000; --panel:#000; --ink:#fff; --muted:#ffd400; --line:#fff; --hairline:#fff;
  --accent:#ffd400; --accent-ink:#000; --accent-soft:#000; --good:#00e676; --warn:#ff5252; --warn-ink:#000; --bad:#ff5252;
  --stage:#000; --shadow:none; --shadow-sm:none;
  --optA:#fff; --optB:#fff; --optC:#fff; --optD:#fff; --opt-ink:#000;
  --gold:#ffd400; --silver:#fff; --bronze:#ffb060; --gold-text:#ffd400; --silver-text:#fff; --bronze-text:#ffb060;
  --ok-bg:#000; --warn-bg:#000;
}
/* Calm Mode: muted palette, no motion, plain layout */
:root[data-calm="on"]{
  --cloud-a:#5a5478; --cloud-b:#2f6a48; --cloud-c:#7a4a5a; --cloud-d:#4a5a7a; --cloud-e:#3a6470; --cloud-f:#7a5a2a;
  --pastel-a:#5a5478; --pastel-b:#3f6f52; --pastel-c:#8a4f6a; --pastel-d:#4a5a8a; --pastel-e:#3f6f78; --pastel-f:#8a5a3a;
  --accent:#56507a; --accent-ink:#ffffff; --accent-soft:#eeedf4; --good:#2f6a48; --warn:#7a5a2a; --warn-ink:#ffffff; --bad:#8c3a3a;
  --optA:#6e5560; --optB:#4f5f80; --optC:#6f6140; --optD:#4d6e5a;
  --gold:#6f6548; --silver:#5f6673; --bronze:#6d5a48; --gold-text:#5f5640; --silver-text:#535a66; --bronze-text:#5e4d3c;
  --shadow:0 1px 3px rgba(20,26,36,.10); --shadow-sm:none;
}
:root[data-calm="on"][data-theme="dark"]{
  --cloud-a:#b3aad3; --cloud-b:#7fc39a; --cloud-c:#d9a0b0; --cloud-d:#8ea2c8; --cloud-e:#8ec8d0; --cloud-f:#d9a86a;
  --pastel-a:#ddd2ff; --pastel-b:#c3f0d2; --pastel-c:#ffd0e4; --pastel-d:#c7d7ff; --pastel-e:#c8f1f5; --pastel-f:#ffe1bf;
  --bg:#13121a; --panel:#1c1b25; --stage:#13121a; --line:#6f6c82; --hairline:#2e2c3a;
  --accent:#a79fc8; --accent-ink:#13121a; --accent-soft:#25233a; --good:#7fc39a; --warn:#d9a86a; --warn-ink:#12151c; --bad:#e08585;
  --gold-text:#d9c27a; --silver-text:#c9d1de; --bronze-text:#d2a884;
}
:root[data-calm="on"][data-theme="hc"]{
  --cloud-a:#ffd400; --cloud-b:#00e676; --cloud-c:#ff5252; --cloud-d:#c792ff; --cloud-e:#4fd8e8; --cloud-f:#ffb060;
  --pastel-a:#ffffff; --pastel-b:#c3f0d2; --pastel-c:#ffd0e4; --pastel-d:#e3d2ff; --pastel-e:#c8f1f5; --pastel-f:#ffe1bf;
  --accent:#ffd400; --accent-ink:#000; --accent-soft:#000; --good:#00e676; --warn:#ff5252; --warn-ink:#000; --bad:#ff5252;
  --optA:#fff; --optB:#fff; --optC:#fff; --optD:#fff; --opt-ink:#000;
  --gold:#ffd400; --silver:#fff; --bronze:#ffb060; --gold-text:#ffd400; --silver-text:#fff; --bronze-text:#ffb060;
}
:root[data-calm="on"] *, :root[data-motion="off"] *{ transition:none!important; animation:none!important; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }

*{box-sizing:border-box}
/* The in-app A−/A+ control scales the root, so every rem-based size follows it. */
html{ font-size:calc(100% * var(--fs)); height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink); height:100%;
  font-family:'Lato','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:1rem; line-height:1.45; display:flex; flex-direction:column;
}
h1,h2,h3{ letter-spacing:-.015em; }
h2{ font-weight:900; }
.bar{ display:flex; align-items:center; gap:.55rem; padding:.55rem 1rem; background:var(--panel); border-bottom:1px solid var(--hairline); box-shadow:var(--shadow-sm); flex:0 0 auto; flex-wrap:wrap; position:relative; z-index:2; }
.bar h1{ font-size:1.05rem; margin:0 auto 0 .25rem; font-weight:900; letter-spacing:-.01em; }
.bar .spacer{ margin-left:auto; }
button{ font:inherit; font-weight:700; cursor:pointer; border:2px solid var(--line); background:var(--panel); color:var(--ink); border-radius:999px; padding:.45rem 1rem; min-height:44px; min-width:44px; transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
button:hover{ border-color:var(--accent); }
button:active{ transform:translateY(1px); }
button:disabled{ opacity:.7; cursor:not-allowed; border-style:dashed; color:var(--muted); background:transparent; box-shadow:none; transform:none; }
button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:900; box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 28%,transparent); }
.primary:hover{ border-color:var(--accent); filter:brightness(1.08); }
.danger{ border-color:var(--warn); color:var(--warn); }
.ghost{ border-color:transparent; background:transparent; box-shadow:none; }
.stage{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; padding:1.4rem; background:var(--stage); text-align:center; overflow:auto; position:relative; }
.panel{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius); padding:1.2rem 1.3rem; box-shadow:var(--shadow); max-width:min(680px,94vw); width:100%; text-align:left; }
label{ display:block; font-weight:700; color:var(--muted); margin:.7rem 0 .25rem; }
/* Names a row of buttons (a radio group, a choice of kinds): a <label> with no control is announced as an orphan. */
.grouplabel{ display:block; font-weight:700; color:var(--muted); margin:.7rem 0 .25rem; }
input,select,textarea{ font:inherit; color:var(--ink); background:var(--bg); border:2px solid var(--line); border-radius:var(--radius-sm); padding:.55rem .75rem; width:100%; min-height:44px; }
input:focus,select:focus,textarea:focus{ border-color:var(--accent); background:var(--panel); }
/* Placeholders use the muted token (checked by the contrast gate), not the browser's own grey, which fails AA (W6). */
::placeholder{ color:var(--muted); opacity:1; }
input[aria-invalid="true"],textarea[aria-invalid="true"]{ border-color:var(--warn); }
input[type="checkbox"]{ width:1.4rem; height:1.4rem; min-height:0; accent-color:var(--accent); vertical-align:middle; margin:0 .5rem 0 0; }
.check{ display:flex; align-items:center; gap:.2rem; font-weight:700; color:var(--ink); min-height:44px; }
.row{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.row>*{ flex:1 1 auto; }
.muted{ color:var(--muted); }
.legal{ flex:0 0 auto; padding:.45rem .75rem .5rem; font-size:.8rem; color:var(--muted); text-align:center; line-height:1.4; border-top:1px solid var(--hairline); }   /* trimmed 14 Sep 2026: a lower footer */
.legal span{ display:block; }
body[data-fs-mode] .legal{ display:none; }
.pill{ display:inline-block; background:var(--accent-soft); color:var(--ink); border:1px solid var(--hairline); border-radius:999px; padding:.2rem .75rem; font-weight:700; }
.toast{ position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:.7rem 1.2rem; border-radius:999px; box-shadow:var(--shadow); opacity:0; transition:opacity .2s; pointer-events:none; z-index:60; max-width:92vw; font-weight:700; }
.toast[data-show]{ opacity:1; }
.strip{ background:var(--warn); color:var(--warn-ink); text-align:center; padding:.35rem; font-weight:700; display:none; }
.strip[data-show]{ display:block; }
.field-error{ color:var(--warn); font-weight:700; margin:.25rem 0 0; }
.field-error:empty{ display:none; }
.notice{ background:var(--warn-bg); border-left:5px solid var(--warn); padding:.7rem 1rem; border-radius:var(--radius-sm); text-align:left; }
.notice.ok{ background:var(--ok-bg); border-left-color:var(--good); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
kbd{ background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:.4rem; padding:.05rem .4rem; font-family:inherit; }
.primary kbd,button[aria-pressed="true"] kbd{ background:transparent; color:inherit; border-color:currentColor; }
body[data-fs-mode] .bar{ display:none; }
.overlay{ position:fixed; inset:0; background:rgba(17,14,40,.55); display:none; align-items:center; justify-content:center; padding:1rem; z-index:50; }
.overlay[data-open]{ display:flex; }
.overlay .panel{ max-width:560px; max-height:90vh; overflow:auto; }
.hidden{ display:none!important; }
.wide{ width:100%; }
.discard-panel{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.discard-note{ margin:0; font-size:.85rem; }
.center{ text-align:center; }
.mt{ margin-top:1rem; }
.big-btn{ font-size:1.2rem; min-height:56px; padding-inline:1.6rem; }

/* Option colours + shapes (never colour alone: letter + shape + text) */
.opt-badge{ display:inline-flex; align-items:center; justify-content:center; width:2.2em; height:2.2em; border-radius:.7em; font-weight:900; color:var(--opt-ink); flex:0 0 auto; }
.opt-badge[data-k="0"]{ background:var(--optA); }
.opt-badge[data-k="1"]{ background:var(--optB); }
.opt-badge[data-k="2"]{ background:var(--optC); }
.opt-badge[data-k="3"]{ background:var(--optD); }
.opt-badge svg{ width:60%; height:60%; fill:currentColor; }

/* Bars */
.bars{ display:flex; flex-direction:column; gap:.7rem; width:100%; max-width:1000px; }
.bar-row{ display:flex; align-items:center; gap:.7rem; }
.bar-row .lab{ width:min(32vw,300px); font-weight:700; text-align:right; flex:0 0 auto; word-break:break-word; display:flex; justify-content:flex-end; align-items:center; gap:.5rem; }
.bar-row .track{ flex:1; background:var(--accent-soft); border:2px solid var(--line); border-radius:999px; height:2.8rem; position:relative; overflow:hidden; }
.bar-row .fill{ position:absolute; inset:0 auto 0 0; background:var(--accent); border-radius:999px; transition:width .5s cubic-bezier(.2,.8,.2,1); display:flex; align-items:center; padding-left:.9rem; color:var(--accent-ink); font-weight:800; min-width:0; white-space:nowrap; }
.bar-row.correct .fill{ background:var(--good); color:#fff; }
.bar-row .n{ min-width:80px; font-weight:800; text-align:left; }

/* Organisation logo (inline SVG, inherits theme ink via var(--ink)) */
.eclogo{ height:1.9rem; width:auto; display:block; flex:0 0 auto; color:var(--ink); }
.screenbar .eclogo{ height:2.4rem; }
.hostbar h1,.screenbar h1,.phonebar h1{ font-size:1.05rem; font-weight:900; letter-spacing:-.01em; }
.legal a{ display:inline-flex; align-items:center; min-height:32px; padding:0 .6rem; color:var(--muted); text-decoration:underline; }   /* side by side; 32 px, above the 24 px WCAG 2.5.8 minimum */
@media (max-width:420px){ .legal a{ display:flex; justify-content:center; min-height:32px; } }   /* a narrow phone: one link per line */
/* a button that reads as a link, for small in-line actions (Rename, More icons) */
.linkish{ background:none; border:0; color:var(--accent); text-decoration:underline; cursor:pointer; padding:.3rem .4rem; min-height:36px; font:inherit; font-weight:700; box-shadow:none; }
/* the hidden attribute always wins, whatever display a class sets (search filters, the A button, list rows) */
[hidden]{ display:none !important; }

/* ---------- the welcome page's atmosphere, on every page (2026-09-13) ----------
   A lavender wash with soft violet, pink and blue glows, sparkles in the corners that twinkle slowly, and cards that
   rise into place. All of it is decoration BEHIND solid cards: no text sits on a glow. High contrast and Calm mode
   remove it entirely; reduced motion stops the movement (the rule near the top of this file). */
/* The glow belongs to the ROOT background (the canvas behind everything). On the body, or on a fixed layer, the host
   page's scrolling area was composited over it as a flat pale column (2026-09-13). */
/* The glow is the ROOT's background, fixed to the viewport. A scrolling stage is composited as its own layer, and a
   NARROW one (the host page's, 900 px) showed as a paler column over the glow; the host stage is now full width with
   its content centred inside it (host.css), so there is no narrow layer to show. Painting the glow inside the stage
   instead was tried and is wrong: fixed backgrounds inside a scroller are placed against the scroller, not the window. */
:root{ --glow:
  radial-gradient(60rem 40rem at 105% -10%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%),
  radial-gradient(44rem 34rem at -10% 105%, rgba(214,40,90,.08), transparent 62%),
  radial-gradient(40rem 30rem at 55% 45%, rgba(31,94,255,.05), transparent 70%); }
html{ background-color:var(--bg); background-image:var(--glow); background-attachment:fixed; min-height:100%; }
body{ background:transparent; }
.stage{ background:transparent; }
body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:url(/shared/decor/sparkles.svg) no-repeat right 1.5vw top 5.5rem / min(22rem,38vw),
             url(/shared/decor/sparkles.svg) no-repeat left -3rem bottom 2rem / min(18rem,32vw);
  opacity:.5; animation:twinkle 7s ease-in-out infinite; }
.bar,.stage,.legal,main{ position:relative; z-index:1; }
@keyframes twinkle{ 0%,100%{ opacity:.5 } 50%{ opacity:.22 } }
@keyframes rise{ from{ opacity:0; translate:0 14px } to{ opacity:1; translate:0 0 } }
.rise{ animation:rise .5s cubic-bezier(.2,.8,.2,1) both; }
:root[data-theme="dark"] body::after{ opacity:.3; }
:root[data-theme="hc"], :root[data-calm="on"]{ --glow:none; }
:root[data-theme="hc"] body::after, :root[data-calm="on"] body::after{ display:none; }
/* coloured icon tiles, as on the welcome page's feature cards (colours follow the theme's gated palette) */
.tile{ flex:0 0 auto; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb,currentColor 13%,var(--panel)); }
.tile svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.tile.t0{ color:var(--accent); } .tile.t1{ color:var(--cloud-d); } .tile.t2{ color:var(--cloud-c); }
.tile.t3{ color:var(--cloud-b); } .tile.t4{ color:var(--cloud-f); } .tile.t5{ color:var(--cloud-e); }