/* Study Compass theme: soft colour blocks (29 Sep 2026).
   Loaded after app.css. Maps the old tokens onto the new palette and adds the new screens' components.
   Light only for now (dark mode not designed yet), so these tokens deliberately beat the old dark blocks. */
:root:root:root{
  color-scheme:light;
  --bg:#F8F9FB; --panel:#EFF2F6; --ink:#2F3A4F; --ink-lip:#1E2636; --ink-2:#586174; --ink-3:#6A7285;
  --maths-fill:#DDE7F8; --maths-ink:#1C3563; --maths-bar:#9DB6E6;
  --writing-fill:#D2ECDF; --writing-ink:#22523D; --writing-bar:#93CDB2;
  --reading-fill:#F7E0D6; --reading-ink:#74321F; --reading-bar:#E7B7A3;
  --puzzles-fill:#E9E3F5; --puzzles-ink:#3E3164;
  --primary:#4A6FB8; --primary-lip:#34548F; --progress:#6F93D6;
  --sunny:#F4D58A; --attention-fill:#FBF3DD; --good-fill:#EDF7F1; --good-ink:#22523D;
  /* old names, remapped */
  --paper:#F8F9FB; --surface:#FFFFFF; --surface-2:#EFF2F6; --line:#E3E7ED; --line-strong:#C9D0DA; --grid:transparent;
  --coral:#4A6FB8; --coral-soft:#DDE7F8; --teal:#2F3A4F; --teal-bright:#4A6FB8; --teal-soft:#DDE7F8;
  --course:#4A6FB8; --course-strong:#34548F; --course-subtle:#DDE7F8; --flag:#F4D58A; --lip:4px;
  --sun:#7A5500; --sun-soft:#FBF3DD; --good:#2B6B50; --good-soft:#EDF7F1; --bad:#A63D2A; --bad-soft:#F9E3DC; --on-accent:#FFFFFF;
  --maths:#9DB6E6; --writing:#93CDB2; --shadow:none;
  --display:var(--font-sans);
  --body:var(--font-sans);
  --r:20px;
}
body{background:var(--bg);font-family:var(--body);color:var(--ink)}
h1{font-weight:var(--fw-h1);letter-spacing:var(--ls-h1);line-height:var(--lh-h1)}
h2{font-weight:var(--fw-h2);letter-spacing:var(--ls-h2)} h3{font-weight:var(--fw-h3);letter-spacing:var(--ls-h3)}
.eyebrow{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-2)}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:10px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-weight:var(--fw-semibold);text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1180px;padding-inline:clamp(16px,4vw,48px)}

/* header */
.bar{background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line)}
.bar-in{max-width:1180px;padding:12px clamp(16px,4vw,48px);flex-wrap:wrap;row-gap:10px}
.brand{font-family:var(--display);font-weight:var(--fw-h3);font-size:var(--fs-2xl);letter-spacing:var(--ls-h3);color:var(--ink)}
.brand .logo-tile{width:38px;height:38px;border-radius:12px;background:var(--ink);display:grid;place-items:center}
.topnav{display:flex;gap:4px;padding:4px;border-radius:16px;background:var(--panel);overflow-x:auto;max-width:100%}
.topnav button{border:0;background:none;padding:9px 16px;border-radius:12px;font-weight:var(--fw-button);font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;min-height:40px}
.topnav button[aria-current="page"]{background:var(--ink);color:#fff}
.topnav button:hover:not([aria-current="page"]){color:var(--ink)}
.chip-btn{border-radius:12px;background:var(--surface);border:1.5px solid var(--line)}
@media (max-width:760px){.topnav{order:5;width:100%}.save-dot #saveTxt{display:none}}

/* buttons */
.btn{border-radius:14px;font-family:var(--body);font-weight:var(--fw-button);background:var(--primary);color:#fff;box-shadow:0 var(--lip) 0 var(--primary-lip);margin-bottom:var(--lip);min-height:48px}
.btn:active{transform:translateY(var(--lip));box-shadow:0 0 0 var(--primary-lip)}
.btn.dark{background:var(--ink);box-shadow:0 var(--lip) 0 var(--ink-lip)}
.btn.teal,.btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-strong);box-shadow:0 var(--lip) 0 var(--line-strong)}
.btn.small{min-height:40px;font-size:var(--fs-sm);padding:8px 16px}
.linkish{background:none;border:0;padding:6px 0;font-weight:var(--fw-semibold);color:var(--primary-lip);text-decoration:underline;text-underline-offset:3px;min-height:40px}

/* cards, pills */
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r)}
.pill{border-radius:8px;font-weight:var(--fw-button)}
.pill.next{background:var(--maths-fill);color:var(--maths-ink)}
.pill.done{background:var(--good-fill);color:var(--good-ink)}
.pill.todo{background:var(--panel);color:var(--ink-2)}
.subject.sw-maths{background:var(--maths-fill);border-color:transparent;color:var(--maths-ink)}
.subject.sw-writing{background:var(--writing-fill);border-color:transparent;color:var(--writing-ink)}
.subject.sw-maths::before,.subject.sw-writing::before{display:none}
.subject.sw-maths .muted,.subject.sw-writing .muted{color:inherit;opacity:.85}
.tabs button[aria-selected="true"]{border-color:var(--primary)}
.feedback.good{background:var(--good-fill)} .feedback.bad{background:var(--attention-fill)}
.opt.sel{border-color:var(--primary);background:var(--maths-fill)}
.back{color:var(--ink-2);min-height:40px}
.muted{color:var(--ink-2)}
.slide.dark{background:var(--ink)!important}

/* ---------- Today ---------- */
.today-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-block:28px 18px}
.today-head h1{font-size:var(--fs-h1)}
.today-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
@media (max-width:900px){.today-grid{grid-template-columns:1fr}}
.today-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.hero-task{position:relative;overflow:hidden;border-radius:24px;padding:clamp(22px,4vw,32px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;background:var(--maths-fill);color:var(--maths-ink)}
.hero-task.writing{background:var(--writing-fill);color:var(--writing-ink)}
.hero-task.reading{background:var(--reading-fill);color:var(--reading-ink)}
.hero-task.test{background:var(--puzzles-fill);color:var(--puzzles-ink)}
.hero-task .deco{position:absolute;right:-30px;top:-50px;opacity:.1;pointer-events:none}
.hero-task .txt{position:relative;display:flex;flex-direction:column;gap:10px;max-width:60ch}
.hero-task h2{font-size:clamp(24px,1.8vw + 12px,34px)}
.hero-task p{font-size:var(--fs-h4)}
.tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:var(--fs-label);font-weight:var(--fw-semibold);background:rgba(255,255,255,.75);color:inherit}
.tag.sun{background:var(--sunny);color:var(--ink)} .tag.good{background:var(--writing-fill);color:var(--good-ink)} .tag.plain{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.bar-prog{width:min(280px,100%);height:10px;border-radius:99px;background:#fff}
.bar-prog i{display:block;height:100%;border-radius:99px;background:var(--progress)}
.task-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.task{background:var(--panel);border-radius:24px;padding:22px;display:flex;gap:16px;align-items:flex-start}
.task .ico{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--maths-fill)}
.task .ico.sun{background:var(--sunny)} .task .ico.writing{background:var(--writing-fill)} .task .ico.reading{background:var(--reading-fill)} .task .ico.test{background:var(--puzzles-fill)}
.task .body{display:flex;flex-direction:column;gap:6px;min-width:0}
.task .lbl{font-size:var(--fs-label);font-weight:var(--fw-semibold);color:var(--ink-2)}
.task h3{font-size:var(--fs-xl)}
.task .btn{align-self:flex-start;margin-top:8px}
.more-list{display:flex;flex-direction:column;gap:8px}
.more-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);text-align:left;width:100%}
.side{display:flex;flex-direction:column;gap:16px}
.side-box{border:2px solid var(--panel);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center;font-size:var(--fs-meta);font-weight:var(--fw-semibold);color:var(--ink-2)}
.week .d{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.week .blk{height:36px;border-radius:10px;background:var(--panel);display:grid;place-items:center}
.week .blk.done{background:var(--writing-fill)} .week .blk.part{background:var(--maths-fill)}
.week .blk.today{outline:2.5px solid var(--ink);outline-offset:-2.5px;background:var(--surface)}
.week .blk.today.done{background:var(--writing-fill)}
.week .blk.free{background:none;border:1.5px dashed var(--line-strong)}
.subj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.subj{border:0;border-radius:20px;padding:18px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;gap:8px}
.subj b{font-family:var(--display);font-size:var(--fs-xl);font-weight:var(--fw-h3);letter-spacing:var(--ls-h3)}
.subj span{font-size:var(--fs-label);font-weight:var(--fw-semibold)}
.subj.maths{background:var(--maths-fill);color:var(--maths-ink)} .subj.writing{background:var(--writing-fill);color:var(--writing-ink)}
.subj.reading{background:var(--reading-fill);color:var(--reading-ink)} .subj.puzzles{background:var(--puzzles-fill);color:var(--puzzles-ink)}
.subj[aria-disabled="true"]{cursor:default}
.freeday{background:var(--panel);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:10px}

/* setup */
.setup{background:var(--surface);border:1.5px solid var(--line);border-radius:24px;padding:clamp(20px,4vw,32px);display:flex;flex-direction:column;gap:18px;max-width:720px}
.choice-row{display:flex;flex-wrap:wrap;gap:8px}
.choice{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:12px;padding:10px 16px;font-weight:var(--fw-semibold);min-height:48px}
.choice[aria-pressed="true"]{background:var(--maths-fill);border-color:var(--primary);color:var(--maths-ink)}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.days label{display:flex;flex-direction:column;gap:4px;font-weight:var(--fw-semibold);font-size:var(--fs-label)}
.days select{min-height:44px;border-radius:10px;border:1.5px solid var(--line-strong);padding:0 6px;background:var(--surface);font:inherit}
@media (max-width:560px){.days{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* lesson done */
.ldone{max-width:640px;margin:40px auto;background:var(--good-fill);color:var(--good-ink);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:14px}

/* ---------- grown-ups ---------- */
.gu{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start;margin-top:18px}
.gu-nav{position:sticky;top:90px;background:var(--panel);border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:2px}
.gu-nav button{border:0;background:none;text-align:left;padding:10px 12px;border-radius:12px;font-weight:var(--fw-button);color:var(--ink-2);min-height:42px}
.gu-nav button[aria-selected="true"]{background:var(--surface);color:var(--ink)}
.gu-nav .sep{height:1px;background:var(--line-strong);opacity:.4;margin:8px 4px}
@media (max-width:860px){.gu{grid-template-columns:1fr}.gu-nav{position:static;flex-direction:row;overflow-x:auto}.gu-nav .sep{display:none}.gu-nav button{white-space:nowrap}}
.ov-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ov-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:16px}
.ov-day{border-radius:16px;background:var(--panel);padding:12px;display:flex;flex-direction:column;gap:2px;min-height:86px}
.ov-day b{font-family:var(--display);font-size:var(--fs-xl);font-weight:var(--fw-h3)}
.ov-day.done{background:var(--writing-fill);color:var(--good-ink)}
.ov-day.today{outline:2.5px solid var(--ink);outline-offset:-2.5px;background:var(--surface)}
.ov-day.free{background:none;border:1.5px dashed var(--line-strong)}
.ov-day.missed{background:var(--attention-fill)}
@media (max-width:640px){.ov-week{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ov-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
@media (max-width:980px){.ov-cols{grid-template-columns:1fr}}
.att{border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;background:var(--panel)}
.att.recurring,.att.alert{background:var(--attention-fill)} .att.improving,.att.resolved{background:var(--good-fill)}
.att h4{margin:0;font-family:var(--display);font-size:var(--fs-h4);font-weight:var(--fw-h3)}
.att details summary{cursor:pointer;font-weight:var(--fw-semibold);color:var(--primary-lip)}
.att .ev{font-size:var(--fs-label);display:flex;flex-direction:column;gap:6px;margin-top:8px}
.work-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left}
.work-row .sb{width:10px;height:40px;border-radius:4px;background:var(--maths-bar);flex:none}
.work-row .sb.writing{background:var(--writing-bar)} .work-row .sb.timed{background:#C9BDE6} .work-row .sb.reading{background:var(--reading-bar)}
.work-row .t{flex:1;display:flex;flex-direction:column;min-width:0}
.work-row .t b{font-size:var(--fs-body)}
.cov{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.cov th,.cov td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.note{font-size:var(--fs-label);color:var(--ink-2)}
.hc{border:1.5px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.hc textarea,.hc input[type=number]{font:inherit;border:1.5px solid var(--line-strong);border-radius:10px;padding:8px 10px;width:100%}

/* ---------- English: reading and language ---------- */
.rd{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:16px}
@media (max-width:860px){.rd{grid-template-columns:1fr}}
.passage{background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:clamp(18px,3vw,28px);font-size:var(--fs-h4);line-height:1.7;max-height:75vh;overflow:auto}
@media (max-width:860px){.passage{max-height:none}}
.passage h2{font-size:var(--fs-2xl);margin-bottom:12px}
.passage p{margin:0 0 14px;max-width:66ch}
.passage p .pn{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--ink-3);margin-right:6px}
.passage mark{background:var(--sunny);color:var(--ink);border-radius:4px;padding:0 2px}
.rq{display:flex;flex-direction:column;gap:16px}
.rq .card{padding:18px;display:flex;flex-direction:column;gap:10px}
.rq .options{grid-template-columns:1fr}
.rq .opt{text-align:left;font-weight:var(--fw-semibold);font-size:var(--fs-md)}
.sample-tag{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--puzzles-fill);color:var(--puzzles-ink);font-size:var(--fs-meta);font-weight:var(--fw-semibold)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:861px){.passage{position:sticky;top:96px}}
@media (max-width:860px){.gu{grid-template-columns:minmax(0,1fr)}}
.gu-nav,.gu-body{min-width:0}
.gu-body .card{min-width:0;max-width:100%}
.gu-body input,.gu-body select,.gu-body textarea{max-width:100%;min-width:0;box-sizing:border-box}
.gu-body .form-row{min-width:0;max-width:100%}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,#app:focus{outline:none}

/* ===== Bright colour blocks (Deb, 29 Sep 2026): white page, strong subject colours with white text, chunky buttons ===== */
:root:root:root{
  --bg:#FFFFFF; --panel:#F3F4F6; --ink:#111827; --ink-lip:#4B5563; --ink-2:#4B5563; --ink-3:#6B7280;
  --paper:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F4F6; --line:#E5E7EB; --line-strong:#C7CBD2;
  --maths-fill:#1D5BD8; --maths-ink:#FFFFFF; --maths-soft:#E3ECFD; --maths-soft-ink:#123E9E; --maths-bar:#1D5BD8;
  --writing-fill:#12805C; --writing-ink:#FFFFFF; --writing-soft:#DDF3E9; --writing-bar:#12805C;
  --reading-fill:#C23E22; --reading-ink:#FFFFFF; --reading-soft:#FBE3DC; --reading-bar:#C23E22;
  --language-fill:#6B3FA0; --language-ink:#FFFFFF; --language-soft:#EEE9FB; --language-bar:#6B3FA0;
  --puzzles-fill:#F3F4F6; --puzzles-ink:#111827; --puzzles-soft:#EEE9FB;
  --primary:#1D5BD8; --primary-lip:#123E9E; --progress:#FFFFFF;
  --sunny:#FFC53D; --attention-fill:#FFF3D1; --good-fill:#E3F5EC; --good-ink:#0E6B4C;
  --coral:#1D5BD8; --coral-soft:#E3ECFD; --course:#1D5BD8; --course-strong:#123E9E; --course-subtle:#E3ECFD; --teal:#111827; --teal-soft:#E3ECFD;
  --good:#0E6B4C; --good-soft:#E3F5EC; --sun:#7A5500; --sun-soft:#FFF3D1; --maths:#1D5BD8; --writing:#12805C;
}
.btn.dark{background:var(--ink);box-shadow:0 var(--lip) 0 var(--ink-lip)}
.pill.next,.opt.sel{background:var(--maths-soft);color:var(--maths-soft-ink)}
.opt.sel{border-color:var(--maths-fill)}
.tag.good{background:var(--writing-soft);color:var(--good-ink)}
.sample-tag{background:var(--puzzles-soft);color:#3E3164}
/* hero */
.hero-task{color:#fff}
.hero-task.maths{background:var(--maths-fill)} .hero-task.writing{background:var(--writing-fill)} .hero-task.reading{background:var(--reading-fill)} .hero-task.language{background:var(--language-fill)} .hero-task.test{background:var(--ink)}
.hero-task .deco{opacity:.16}
.hero-task .tag{background:rgba(255,255,255,.2);color:#fff}
.hero-task p{color:rgba(255,255,255,.92)}
.hero-task .btn{background:#fff;color:#123E9E;box-shadow:0 5px 0 rgba(0,0,0,.28)}
.hero-task.writing .btn{color:#0B5A40} .hero-task.reading .btn{color:#8A2915} .hero-task.language .btn{color:#4A2A73} .hero-task.test .btn{color:var(--ink)}
.bar-prog{background:rgba(255,255,255,.3)} .bar-prog i{background:#fff}
/* task icons */
.task .ico{background:var(--maths-fill);color:#fff}
.task .ico.sun{background:var(--sunny);color:var(--ink)} .task .ico.writing{background:var(--writing-fill);color:#fff}
.task .ico.reading{background:var(--reading-fill);color:#fff} .task .ico.language{background:var(--language-fill);color:#fff} .task .ico.test{background:var(--ink);color:#fff}
/* subjects and tiles */
.subj.maths,.subj.writing,.subj.reading,.subj.language{color:#fff} .subj.language{background:var(--language-fill)}
.subj.puzzles{background:var(--panel);color:var(--ink)}
.subject.sw-maths{background:var(--maths-fill);color:#fff} .subject.sw-writing{background:var(--writing-fill);color:#fff}
.subject.sw-maths .muted,.subject.sw-writing .muted{color:rgba(255,255,255,.9);opacity:1}
.subject.sw-maths .pill,.subject.sw-writing .pill{background:rgba(255,255,255,.22);color:#fff}
.subject.sw-maths .eyebrow,.subject.sw-writing .eyebrow{color:rgba(255,255,255,.9)}
/* choices, week */
.choice[aria-pressed="true"]{background:var(--maths-fill);border-color:var(--maths-fill);color:#fff}
.choice{border-width:2px;box-shadow:0 3px 0 var(--line-strong)}
.week .blk.done{background:var(--writing-fill);color:#fff} .week .blk.part{background:var(--maths-soft)}
.week .blk.today.done{background:var(--writing-fill)}
.ov-day.done{background:var(--writing-fill);color:#fff}
.side-box{border-color:var(--panel)}
/* topic lists: white tiles with a strong subject band, so full pages don't become walls of colour */
.subjects .subject.sw-maths,.subjects .subject.sw-writing{background:var(--surface);color:var(--ink);border:2px solid var(--line);position:relative;overflow:hidden;padding-top:26px}
.subjects .subject.sw-maths::before,.subjects .subject.sw-writing::before{display:block;content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--maths-fill)}
.subjects .subject.sw-writing::before{background:var(--writing-fill)}
.subjects .subject.sw-maths .muted,.subjects .subject.sw-writing .muted{color:var(--ink-2)}
.subjects .subject.sw-maths .eyebrow,.subjects .subject.sw-writing .eyebrow{color:var(--ink-2)}
.subjects .subject.sw-maths .pill{background:var(--maths-soft);color:var(--maths-soft-ink)}
.subjects .subject.sw-maths .pill.done{background:var(--good-fill);color:var(--good-ink)}
.subjects .subject.sw-maths:hover{border-color:var(--maths-fill);transform:translateY(-2px)}

/* logo (30 Sep 2026): compass mark SVG carries its own tile */
.logo-mark{background:none!important;padding:0;overflow:hidden}
.logo-mark svg{display:block;width:100%;height:100%}
.wordmark{text-transform:none;letter-spacing:-.03em}

.work-row .sb.language{background:var(--language-bar)}