/* Edinburgh College 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). */
:root{
  /* word cloud: six decorative colours, Bright and Pastel (gated on --stage in every theme) */
  --cloud-a:#003078; --cloud-b:#1a7f3c; --cloud-c:#c8102e; --cloud-d:#6b2fa0; --cloud-e:#0b6f7a; --cloud-f:#b23b00;
  --pastel-a:#4a5a7a; --pastel-b:#3f6f52; --pastel-c:#8a4f6a; --pastel-d:#5c4d8a; --pastel-e:#3f6f78; --pastel-f:#8a5a3a;
  --bg:#f4f6fb; --panel:#ffffff; --ink:#151a24; --muted:#4a5468; --line:#7c8597;
  --accent:#003078; --accent-ink:#ffffff; --good:#1a7f3c; --warn:#b23b00; --warn-ink:#ffffff; --bad:#c62828;
  --stage:#ffffff; --shadow:0 1px 3px rgba(20,26,36,.12),0 8px 30px rgba(20,26,36,.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;
  --fs:1;
}
:root[data-theme="dark"]{
  --cloud-a:#5b8bff; --cloud-b:#4cd07d; --cloud-c:#ff6b8a; --cloud-d:#c792ff; --cloud-e:#4fd8e8; --cloud-f:#ffb347;
  --pastel-a:#c7d7ff; --pastel-b:#c3f0d2; --pastel-c:#ffd0e4; --pastel-d:#e3d2ff; --pastel-e:#c8f1f5; --pastel-f:#ffe1bf;
  --bg:#0d1017; --panel:#161b26; --ink:#eef1f7; --muted:#a3adc2; --line:#6b7690;
  --accent:#5b8bff; --accent-ink:#0d1017; --good:#4cd07d; --warn:#ff9f5b; --warn-ink:#0d1017; --bad:#ff6b6b;
  --stage:#10141d; --shadow:0 1px 3px rgba(0,0,0,.5),0 10px 40px rgba(0,0,0,.4);
  --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;
  --accent:#ffd400; --accent-ink:#000; --good:#00e676; --warn:#ff5252; --warn-ink:#000; --bad:#ff5252;
  --stage:#000; --shadow: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:#4a5a7a; --cloud-b:#2f6a48; --cloud-c:#7a4a5a; --cloud-d:#5a4a7a; --cloud-e:#3a6470; --cloud-f:#7a5a2a;
  --pastel-a:#4a5a7a; --pastel-b:#3f6f52; --pastel-c:#8a4f6a; --pastel-d:#5c4d8a; --pastel-e:#3f6f78; --pastel-f:#8a5a3a;
  --accent:#4a5a7a; --accent-ink:#ffffff; --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;
}
:root[data-calm="on"][data-theme="dark"]{
  --cloud-a:#8ea2c8; --cloud-b:#7fc39a; --cloud-c:#d9a0b0; --cloud-d:#b8a8d8; --cloud-e:#8ec8d0; --cloud-f:#d9a86a;
  --pastel-a:#c7d7ff; --pastel-b:#c3f0d2; --pastel-c:#ffd0e4; --pastel-d:#e3d2ff; --pastel-e:#c8f1f5; --pastel-f:#ffe1bf;
  --bg:#12151c; --panel:#1a1e27; --stage:#12151c; --line:#6a7183;
  --accent:#8ea2c8; --accent-ink:#12151c; --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; --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.4; display:flex; flex-direction:column;
}
.bar{ display:flex; align-items:center; gap:.5rem; padding:.45rem .75rem; background:var(--panel); border-bottom:2px solid var(--line); flex:0 0 auto; flex-wrap:wrap; }
.bar h1{ font-size:1.05rem; margin:0 auto 0 .25rem; font-weight:700; letter-spacing:.2px; }
.bar .spacer{ margin-left:auto; }
button{ font:inherit; cursor:pointer; border:2px solid var(--line); background:var(--panel); color:var(--ink); border-radius:.5rem; padding:.4rem .7rem; min-height:44px; min-width:44px; }
button:hover{ border-color:var(--accent); }
button:disabled{ opacity:.7; cursor:not-allowed; border-style:dashed; color:var(--muted); background:transparent; box-shadow: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:700; }
.danger{ border-color:var(--warn); color:var(--warn); }
.ghost{ border-color:transparent; background:transparent; }
.stage{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:1.25rem; background:var(--stage); text-align:center; overflow:auto; position:relative; }
.panel{ background:var(--panel); border:2px solid var(--line); border-radius:.75rem; padding:1rem; box-shadow:var(--shadow); max-width:min(680px,94vw); width:100%; text-align:left; }
label{ display:block; font-weight:600; color:var(--muted); margin:.6rem 0 .2rem; }
/* 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:600; color:var(--muted); margin:.6rem 0 .2rem; }
input,select,textarea{ font:inherit; color:var(--ink); background:var(--bg); border:2px solid var(--line); border-radius:.5rem; padding:.5rem .6rem; width:100%; min-height:44px; }
/* 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:600; 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:.6rem .75rem; font-size:.78rem; color:var(--muted); text-align:center; line-height:1.4; }
.legal span{ display:block; }
body[data-fs-mode] .legal{ display:none; }
.pill{ display:inline-block; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:.15rem .6rem; font-weight:600; }
.toast{ position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:.6rem 1rem; border-radius:.6rem; box-shadow:var(--shadow); opacity:0; transition:opacity .2s; pointer-events:none; z-index:60; max-width:92vw; }
.toast[data-show]{ opacity:1; }
.strip{ background:var(--warn); color:var(--warn-ink); text-align:center; padding:.3rem; font-weight:700; display:none; }
.strip[data-show]{ display:block; }
.field-error{ color:var(--warn); font-weight:600; margin:.2rem 0 0; }
.field-error:empty{ display:none; }
.notice{ background:var(--warn-bg); border-left:5px solid var(--warn); padding:.6rem .9rem; border-radius:.4rem; 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:.3rem; padding:.05rem .35rem; 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(0,0,0,.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.25rem; min-height:56px; }

/* 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:.5em; 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(--bg); border:2px solid var(--line); border-radius:.5rem; height:2.8rem; position:relative; overflow:hidden; }
.bar-row .fill{ position:absolute; inset:0 auto 0 0; background:var(--accent); border-radius:.4rem; transition:width .5s cubic-bezier(.2,.8,.2,1); display:flex; align-items:center; padding-left:.6rem; 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; }

/* Edinburgh College 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.02rem; font-weight:800; letter-spacing:.01em; }
.legal a{ display:block; color:var(--muted); text-decoration:underline; }
/* 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; }
/* the hidden attribute always wins, whatever display a class sets (search filters, the A button, list rows) */
[hidden]{ display:none !important; }