/* THE PLATFORM HOME'S OWN STYLES.
 *
 * index.html is My Maths: access, then the units this learner may open. It links the shared
 * stylesheets the access and dashboard screens already use, and needs only this on top —
 * the design tokens, the page base, and the two utility classes the shell markup relies on.
 * It deliberately does NOT carry the unit workspace CSS: nothing on this page teaches,
 * generates or marks.
 *
 * The palette is the SAME palette the unit pages carry inline; `year6-v5-pedagogy-test-brand`
 * fails if the two ever disagree, so there is one source of truth with two copies of it
 * rather than two palettes.
 */
:root{--purple:#314b80;--purple-deep:#314b80;--purple-soft:#dfe8f6;--cyan:#08aeb5;--cyan-soft:#e3f8f8;--lime:#b8e33c;--lime-deep:#58750b;--yellow:#ffd85a;--ink:#20202a;--muted:#696977;--line:#dedde7;--paper:#f6f6f8;--white:#fff;--bad:#c43e62;--bad-soft:#fcebf0;--good:#078486;--good-soft:#e3f6f4;--shadow:0 16px 44px rgba(49,75,128,.09);--radius:22px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;letter-spacing:-.012em;line-height:1.45;-webkit-font-smoothing:antialiased}
#app{min-height:100vh;display:flex;flex-direction:column}
*{box-sizing:border-box}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.storage-warning{margin:0;padding:10px 16px;background:var(--bad-soft);color:var(--bad);font-size:14px;text-align:center}

/* SHARED PLATFORM-ROOT FOUNDATIONS.
   Stakeholder dashboards are rendered on the global shell as well as unit pages. Keep the
   small set they need here; teaching/workspace presentation remains unit-page-only. */
.topbar{min-height:62px;padding:8px clamp(16px,4vw,36px);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.topbar-left,.top-actions{display:flex;align-items:center;gap:10px;min-width:0}.top-actions{justify-content:flex-end}
.btn{border:0;border-radius:14px;min-height:44px;padding:10px 16px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 8px 20px rgba(49,75,128,.22)}.btn-secondary{background:#fff;color:var(--purple-deep);border:1px solid var(--line)}.btn-ghost{background:transparent;color:var(--purple-deep)}
.workspace{width:min(790px,calc(100% - 32px));margin:32px auto}.screen-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.crumb{color:var(--muted);font-size:13px}.pill{background:var(--purple-soft);color:var(--purple-deep);font-weight:800;border-radius:999px;padding:7px 11px;font-size:12px}.panel{background:#fff;border-radius:20px;padding:22px;box-shadow:var(--shadow)}.quiet{color:var(--muted)}

/* MY MATHS — its own plain layout.
   It does not borrow the unit chooser's grid: most of that is scoped to the unit page and
   half of it lives inline there, so reusing the class names gave overrides with no base.
   One screen, styled once, in the shared palette. */
.pm-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(14px,3vw,26px);background:var(--purple);color:#fff}
.pm-brand{display:flex;align-items:center;gap:11px;background:none;border:0;padding:0;
  color:inherit;font:inherit;cursor:pointer;text-align:left}
.pm-brand img{width:34px;height:34px;border-radius:50%;background:#fff}
.pm-brand b{display:block;font-size:16px;line-height:1.2}
.pm-brand span span{display:block;font-size:12px;color:#c9d6ee}

.pm-wrap{width:min(1100px,calc(100% - 32px));margin:0 auto;padding:clamp(20px,4vw,38px) 0 26px}
.pm-hero{margin-bottom:clamp(16px,3vw,26px)}
.pm-hero .pm-eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pm-hero h1{margin:0 0 8px;font-size:clamp(26px,4vw,38px);line-height:1.12;letter-spacing:-.01em}
.pm-hero p{margin:0;color:var(--muted);max-width:56ch;line-height:1.5}

.pm-panel{background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:clamp(16px,3vw,24px)}
.pm-panel h2{margin:0 0 14px;font-size:17px}
.pm-note{margin:0;color:var(--muted);line-height:1.5}

.pm-footer{width:min(1100px,calc(100% - 32px));margin:auto auto 0;padding:22px 0 16px;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}
html[lang="zh-CN"] body{letter-spacing:0}
html[lang="zh-CN"] .pm-eyebrow{letter-spacing:0;text-transform:none}