/* =====================================================================
   Year 9 Chemistry · Course Companion
   Design system — Prussian ink / bench-white / electric indigo
   Display: Space Grotesk · Body: Newsreader · Utility: IBM Plex Mono
   ===================================================================== */

:root{
  /* --- grounds --- */
  --ink:        #0C1226;   /* Prussian-ink, primary dark ground */
  --ink-2:      #141B33;   /* raised ink panel */
  --ink-line:   #263056;   /* hairline on ink */
  --bench:      #EEF1F7;   /* cool bench-white page */
  --paper:      #FFFFFF;   /* card surface */
  --paper-2:    #F6F8FC;   /* inset surface */
  --line:       #DBE2EE;   /* hairline on light */
  --line-soft:  #E9EEF6;

  /* --- type --- */
  --tx:         #131A2B;   /* body ink */
  --tx-mid:     #4A5568;   /* secondary */
  --tx-dim:     #7B8494;   /* tertiary / captions */
  --tx-on-ink:  #EAF0FF;
  --tx-on-ink-dim:#9AA6C8;

  /* --- brand + signal --- */
  --indigo:     #4E39E6;   /* electric indigo — spark / actions */
  --indigo-700: #3A29B8;
  --indigo-100: #ECE9FD;
  --indigo-050: #F4F2FE;

  /* RAG — muted chemical, functional */
  --red:        #DB4A4A;
  --amber:      #E39A17;
  --green:      #1F9D6B;
  --red-bg:     #FBEBEB; --amber-bg:#FBF2E1; --green-bg:#E6F5EE;

  /* stretch = "handle with care" gold (hazard lineage) */
  --gold:       #B8860B;
  --gold-bg:    #FBF3DE;

  /* section blocks (like s/p/d) */
  --sec-principles: #4E39E6;   /* indigo */
  --sec-inorganic:  #C2571E;   /* copper — metals */
  --sec-physical:   #0E8C8C;   /* teal — energy/rates */

  /* --- geometry --- */
  --r:          14px;
  --r-sm:       9px;
  --r-lg:       20px;
  --shadow:     0 1px 2px rgba(16,24,48,.05), 0 8px 24px -12px rgba(16,24,48,.18);
  --shadow-lg:  0 24px 60px -24px rgba(12,18,38,.35);
  --wrap:       1120px;
  --ease:       cubic-bezier(.2,.7,.2,1);
}

/* graph-paper bench texture */
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; color:var(--tx); background:var(--bench);
  font-family:"Newsreader",Georgia,serif; font-size:18px; line-height:1.62;
  font-optical-sizing:auto;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:26px 26px;
  background-position:-1px -1px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--indigo-700); text-underline-offset:2px}
h1,h2,h3,h4,.disp{font-family:"Space Grotesk",system-ui,sans-serif; color:var(--tx); line-height:1.12; letter-spacing:-.01em; font-weight:600}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
sub,sup{font-size:.72em}

/* screen-reader only */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* ============================ TOP BAR ============================ */
.topbar{
  position:sticky; top:0; z-index:40; background:rgba(12,18,38,.92);
  backdrop-filter:saturate(1.3) blur(8px); color:var(--tx-on-ink);
  border-bottom:1px solid var(--ink-line);
}
.topbar .wrap{display:flex; align-items:center; gap:18px; height:62px}
.brand{display:flex; align-items:center; gap:11px; cursor:pointer; text-decoration:none; color:inherit; border:0; background:none; padding:0}
.brand .mk{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-family:"Space Grotesk";font-weight:700;font-size:16px;color:#fff;
  background:linear-gradient(145deg,var(--indigo),#7a5cff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 14px -4px rgba(78,57,230,.7);
}
.brand b{font-family:"Space Grotesk";font-weight:600;font-size:16px;letter-spacing:-.01em}
.brand .sub{font-family:"IBM Plex Mono";font-size:11px;color:var(--tx-on-ink-dim);letter-spacing:.04em;text-transform:uppercase}
.topbar .spacer{flex:1}
/* overall progress meter in bar */
.omtr{display:flex;align-items:center;gap:10px;font-family:"IBM Plex Mono";font-size:12px;color:var(--tx-on-ink-dim)}
.omtr .bar{width:130px;height:7px;border-radius:99px;background:#222c4d;overflow:hidden;box-shadow:inset 0 0 0 1px var(--ink-line)}
.omtr .fill{height:100%;width:0;background:linear-gradient(90deg,var(--green),#39d38f);border-radius:99px;transition:width 1s var(--ease)}
.omtr b{color:var(--tx-on-ink);font-weight:600}
.tb-btn{font-family:"Space Grotesk";font-weight:500;font-size:13px;color:var(--tx-on-ink);background:#1c2647;border:1px solid var(--ink-line);border-radius:8px;padding:7px 12px;cursor:pointer}
.tb-btn:hover{background:#243158}

/* ============================ DASHBOARD ============================ */
.hero{padding:44px 0 26px}
.hero .eyebrow{font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo-700);margin:0 0 12px}
.hero h1{font-size:clamp(34px,5.4vw,58px);font-weight:700;margin:0;letter-spacing:-.025em}
.hero h1 .lo{color:var(--tx-dim)}
.hero p.lede{font-size:19px;color:var(--tx-mid);max-width:60ch;margin:16px 0 0}
.hero-stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:26px}
.hstat{display:flex;flex-direction:column;gap:2px}
.hstat .n{font-family:"Space Grotesk";font-weight:700;font-size:30px;line-height:1;color:var(--tx)}
.hstat .n small{font-size:16px;color:var(--tx-dim);font-weight:500}
.hstat .l{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-dim)}

/* section block header */
.block{margin:38px 0 0}
.block-h{display:flex;align-items:baseline;gap:14px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.block-h .idx{font-family:"IBM Plex Mono";font-size:12px;color:#fff;padding:3px 8px;border-radius:6px;letter-spacing:.04em}
.block-h h2{font-size:22px;margin:0}
.block-h .meta{font-family:"IBM Plex Mono";font-size:12px;color:var(--tx-dim);margin-left:auto}

/* tile grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.tile{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:13px 13px 15px;min-height:150px;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;color:inherit;text-decoration:none;
  box-shadow:var(--shadow);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--sec)}
.tile:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
/* liquid fill = progress */
.tile .liquid{
  position:absolute;inset:0;z-index:-1;height:100%;
  transform:translateY(100%);
  background:linear-gradient(180deg, color-mix(in srgb,var(--sec) 15%,transparent), color-mix(in srgb,var(--sec) 22%,transparent));
  border-top:2px solid color-mix(in srgb,var(--sec) 55%,transparent);
  transition:transform 1.1s var(--ease);
}
.tile .row1{display:flex;align-items:flex-start;justify-content:space-between}
.tile .atno{font-family:"IBM Plex Mono";font-size:12px;color:var(--tx-dim);font-weight:500}
.tile .rag{width:10px;height:10px;border-radius:99px;margin-top:3px;box-shadow:0 0 0 3px var(--paper)}
.tile .rag.g{background:var(--green)} .tile .rag.a{background:var(--amber)} .tile .rag.r{background:var(--red)} .tile .rag.u{background:var(--line);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--line)}
.tile .sym{font-family:"Space Grotesk";font-weight:700;font-size:44px;line-height:.9;margin:10px 0 2px;letter-spacing:-.02em;color:var(--tx)}
.tile .nm{font-family:"Space Grotesk";font-weight:500;font-size:13.5px;line-height:1.15;color:var(--tx);margin-top:auto}
.tile .pct{font-family:"IBM Plex Mono";font-size:11px;color:var(--tx-dim);margin-top:4px}
.tile .flag{position:absolute;top:11px;right:26px;font-family:"IBM Plex Mono";font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--gold);padding:2px 5px;border-radius:4px;display:none}
.tile.building .flag{display:inline-block}
.tile.building{opacity:.92}
.tile.building .sym{color:var(--tx-dim)}

/* resume + capstone strip */
.strip{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-top:16px}
@media(max-width:760px){.strip{grid-template-columns:1fr}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.panel.dark{background:var(--ink);color:var(--tx-on-ink);border-color:var(--ink-line)}
.panel .k{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim);margin:0 0 8px}
.panel.dark .k{color:var(--tx-on-ink-dim)}
.panel h3{font-size:19px;margin:0 0 6px}
.panel.dark h3{color:#fff}
.panel p{margin:0;color:var(--tx-mid);font-size:15.5px}
.panel.dark p{color:var(--tx-on-ink-dim)}
.btn{
  display:inline-flex;align-items:center;gap:8px;font-family:"Space Grotesk";font-weight:600;font-size:14px;
  background:var(--indigo);color:#fff;border:0;border-radius:9px;padding:10px 16px;cursor:pointer;text-decoration:none;
  box-shadow:0 6px 18px -8px rgba(78,57,230,.8);transition:transform .12s var(--ease),background .15s}
.btn:hover{background:var(--indigo-700);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--indigo-700);box-shadow:none;border:1px solid var(--line)}
.btn.ghost:hover{background:var(--indigo-050)}
.btn.on-ink{background:#fff;color:var(--ink)}
.btn.on-ink:hover{background:#e8ecff}
.capstones{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.cap{flex:1 1 180px;border:1px solid var(--ink-line);border-radius:11px;padding:13px 14px;background:#131b34}
.cap .ic{font-size:20px}
.cap b{display:block;font-family:"Space Grotesk";color:#fff;font-size:15px;margin:6px 0 3px}
.cap span{font-size:13px;color:var(--tx-on-ink-dim)}

/* ============================ TOPIC VIEW ============================ */
.tv{padding:26px 0 80px}
.tv-top{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:8px}
.crumb{font-family:"IBM Plex Mono";font-size:12px;color:var(--tx-dim);background:none;border:0;cursor:pointer;padding:0;margin:0 0 12px;display:inline-flex;gap:6px;align-items:center}
.crumb:hover{color:var(--indigo-700)}
.tv-title{flex:1;min-width:260px}
.tv-title .kicker{font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px;color:var(--sec)}
.tv-title h1{font-size:clamp(28px,4.4vw,44px);font-weight:700;margin:0;letter-spacing:-.02em}
.tv-title p{color:var(--tx-mid);margin:10px 0 0;max-width:56ch}
.symbig{
  width:96px;height:96px;flex:none;border-radius:16px;border:1px solid var(--line);background:var(--paper);
  display:flex;flex-direction:column;justify-content:space-between;padding:9px 11px;box-shadow:var(--shadow);position:relative;overflow:hidden
}
.symbig .liquid{position:absolute;inset:0;z-index:0;transform:translateY(100%);background:linear-gradient(180deg,color-mix(in srgb,var(--sec) 16%,transparent),color-mix(in srgb,var(--sec) 26%,transparent));border-top:2px solid color-mix(in srgb,var(--sec) 55%,transparent);transition:transform 1.1s var(--ease)}
.symbig .n{font-family:"IBM Plex Mono";font-size:12px;color:var(--tx-dim);position:relative}
.symbig .s{font-family:"Space Grotesk";font-weight:700;font-size:40px;line-height:1;position:relative}
.symbig .p{font-family:"IBM Plex Mono";font-size:11px;color:var(--tx-dim);position:relative}

/* progress ring */
.ring{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.ring svg{transform:rotate(-90deg)}
.ring .rr-bg{stroke:var(--line)} .ring .rr-fg{stroke:var(--green);stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--ease)}
.ring .lab{font-family:"Space Grotesk";font-weight:700;font-size:18px;margin-top:-42px;pointer-events:none}
.ring .cap{font-family:"IBM Plex Mono";font-size:10px;color:var(--tx-dim);text-transform:uppercase;letter-spacing:.05em}

/* layout: sticky spine nav + main */
.tv-body{display:grid;grid-template-columns:196px 1fr;gap:34px;margin-top:26px;align-items:start}
@media(max-width:860px){.tv-body{grid-template-columns:1fr}}
.spine-nav{position:sticky;top:78px}
@media(max-width:860px){
  .spine-nav{position:sticky;top:62px;z-index:20;background:rgba(238,241,247,.94);backdrop-filter:blur(6px);margin:0 -22px;padding:10px 22px;border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap}
  .spine-nav ol{display:flex;gap:6px}
}
.spine-nav ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.spine-nav a{
  display:flex;align-items:center;gap:9px;font-family:"Space Grotesk";font-weight:500;font-size:13.5px;
  color:var(--tx-mid);text-decoration:none;padding:7px 10px;border-radius:8px;border-left:2px solid transparent}
.spine-nav a:hover{background:var(--paper);color:var(--tx)}
.spine-nav a.active{background:var(--indigo-050);color:var(--indigo-700);border-left-color:var(--indigo)}
.spine-nav a .dot{width:6px;height:6px;border-radius:99px;background:var(--line-soft);flex:none}
.spine-nav a.active .dot{background:var(--indigo)}
@media(max-width:860px){.spine-nav a{border-left:0;border-bottom:2px solid transparent;padding:6px 10px}.spine-nav a.active{border-left:0;border-bottom-color:var(--indigo)}.spine-nav a .dot{display:none}}

.sec{scroll-margin-top:88px;margin:0 0 40px}
.sec > h2{font-size:15px;font-family:"IBM Plex Mono";font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-dim);display:flex;align-items:center;gap:10px;margin:0 0 16px}
.sec > h2::after{content:"";flex:1;height:1px;background:var(--line)}

/* --- spec map --- */
.specrow{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.specrow:last-child{border-bottom:0}
.speccode{font-family:"IBM Plex Mono";font-weight:600;font-size:13px;color:var(--tx);background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:3px 8px;flex:none;min-width:52px;text-align:center}
.specrow .txt{font-size:16px;color:var(--tx)}
.pbadge{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.03em;padding:2px 6px;border-radius:5px;flex:none;margin-top:2px;font-weight:500}
.pbadge.p1{background:var(--indigo-100);color:var(--indigo-700)}
.pbadge.p2{background:#fdeede;color:#9a5a10}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:"IBM Plex Mono";font-size:12px;color:var(--tx-mid);margin-top:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* --- outcomes / RAG --- */
.oc{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--paper);margin-bottom:8px;transition:border-color .15s}
.oc .txt{flex:1;font-size:16px}
.oc.st-g{border-color:color-mix(in srgb,var(--green) 45%,var(--line))}
.oc.st-a{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
.oc.st-r{border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.rag-set{display:flex;gap:5px;flex:none}
.rag-set button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--paper-2);cursor:pointer;font-family:"IBM Plex Mono";font-weight:600;font-size:13px;color:var(--tx-dim);display:grid;place-items:center;transition:transform .1s,background .12s,color .12s,border-color .12s}
.rag-set button:hover{transform:translateY(-1px)}
.rag-set button.r.on{background:var(--red);border-color:var(--red);color:#fff}
.rag-set button.a.on{background:var(--amber);border-color:var(--amber);color:#fff}
.rag-set button.g.on{background:var(--green);border-color:var(--green);color:#fff}
.oc-hint{font-family:"IBM Plex Mono";font-size:12px;color:var(--tx-dim);margin:2px 0 14px}

/* --- content blocks --- */
.prose{font-size:18px;line-height:1.66;color:var(--tx)}
.prose h3{font-size:21px;margin:26px 0 8px;font-weight:600}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:5px 0}
.prose strong{font-weight:600}
.prose .lead{font-size:20px;color:var(--tx);border-left:3px solid var(--indigo);padding-left:16px;margin:0 0 20px}
.callout{border:1px solid var(--line);border-left:4px solid var(--indigo);background:var(--indigo-050);border-radius:0 11px 11px 0;padding:14px 18px;margin:18px 0}
.callout .lb{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo-700);margin:0 0 5px}
.callout p{margin:0;font-size:16.5px}
.eg{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:16px 18px;margin:18px 0;box-shadow:var(--shadow)}
.eg .lb{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin:0 0 8px;display:flex;align-items:center;gap:7px}
.eg .lb::before{content:"▶";font-size:9px}
.eg .work{font-family:"IBM Plex Mono";font-size:15px;background:var(--paper-2);border-radius:8px;padding:12px 14px;margin:10px 0 0;line-height:1.8;white-space:pre-wrap}
.miscon{border:1px solid color-mix(in srgb,var(--red) 30%,var(--line));background:var(--red-bg);border-radius:12px;padding:14px 18px;margin:18px 0}
.miscon .lb{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:0 0 5px}
.miscon p{margin:0;font-size:16px}
table.data{width:100%;border-collapse:collapse;margin:16px 0;font-size:15.5px}
table.data th,table.data td{border:1px solid var(--line);padding:9px 12px;text-align:left}
table.data th{background:var(--ink);color:var(--tx-on-ink);font-family:"Space Grotesk";font-weight:500;font-size:14px}
table.data td .mono,table.data tbody th{font-family:"IBM Plex Mono"}
table.data tr:nth-child(even) td{background:var(--paper-2)}

/* --- interactive frame --- */
.iframe-wrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow);margin:14px 0}
.iframe-wrap .bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.iframe-wrap .bar .dot3{display:flex;gap:5px}.iframe-wrap .bar .dot3 i{width:9px;height:9px;border-radius:99px;background:var(--line);display:block}
.iframe-wrap .bar b{font-family:"Space Grotesk";font-weight:500;font-size:14px}
.iframe-wrap .bar .tag{margin-left:auto;font-family:"IBM Plex Mono";font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-dim);border:1px solid var(--line);padding:2px 7px;border-radius:5px}
.iframe-wrap iframe{width:100%;border:0;display:block;background:#fff}
.iframe-note{font-family:"IBM Plex Mono";font-size:12px;color:var(--tx-dim);margin:-4px 0 18px}
.slot-empty{border:2px dashed var(--line);border-radius:14px;padding:22px;text-align:center;color:var(--tx-dim);background:var(--paper-2);margin:14px 0}
.slot-empty b{font-family:"Space Grotesk";color:var(--tx-mid);display:block;font-size:15px;margin-bottom:4px}
.slot-empty code{font-family:"IBM Plex Mono";font-size:12px;background:var(--paper);border:1px solid var(--line);padding:2px 6px;border-radius:5px}

/* --- stretch --- */
.stretch-card{border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));background:var(--gold-bg);border-radius:12px;padding:15px 18px;margin-bottom:10px}
.stretch-card .lb{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0 0 6px;display:flex;align-items:center;gap:6px}
.stretch-card .lb::before{content:"◆"}
.stretch-card .q{font-size:16.5px;margin:0}
.stretch-card details{margin-top:8px}
.stretch-card summary{font-family:"IBM Plex Mono";font-size:13px;color:var(--gold);cursor:pointer}
.stretch-card details p{font-size:15.5px;color:var(--tx-mid);margin:8px 0 0}

/* --- quiz --- */
.quiz-q{border:1px solid var(--line);border-radius:13px;background:var(--paper);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow)}
.quiz-q .qn{font-family:"IBM Plex Mono";font-size:11px;color:var(--tx-dim);letter-spacing:.05em}
.quiz-q .qtext{font-size:17px;margin:6px 0 12px}
.opt{display:block;width:100%;text-align:left;font-family:inherit;font-size:16px;border:1px solid var(--line);background:var(--paper-2);border-radius:9px;padding:11px 14px;margin-bottom:7px;cursor:pointer;transition:border-color .12s,background .12s;color:var(--tx)}
.opt:hover{border-color:var(--indigo)}
.opt.correct{border-color:var(--green);background:var(--green-bg)}
.opt.wrong{border-color:var(--red);background:var(--red-bg)}
.opt.correct::after{content:"✓";float:right;color:var(--green);font-weight:700}
.opt.wrong::after{content:"✕";float:right;color:var(--red);font-weight:700}
.opt:disabled{cursor:default}
.explain{font-size:15px;color:var(--tx-mid);background:var(--indigo-050);border-radius:8px;padding:11px 14px;margin-top:6px;border-left:3px solid var(--indigo);display:none}
.explain.show{display:block}
.exam-q{border:1px solid var(--line);border-left:4px solid var(--sec-inorganic);border-radius:0 13px 13px 0;background:var(--paper);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow)}
.exam-q .hd{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.exam-q .hd .lb{font-family:"IBM Plex Mono";font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sec-inorganic)}
.exam-q .marks{margin-left:auto;font-family:"IBM Plex Mono";font-size:12px;color:var(--tx-dim);border:1px solid var(--line);border-radius:5px;padding:2px 8px}
.exam-q .qtext{font-size:17px;margin:0 0 6px}
.exam-q summary{font-family:"Space Grotesk";font-weight:500;font-size:14px;color:var(--indigo-700);cursor:pointer;padding:8px 0}
.exam-q .scheme{font-size:15.5px;background:var(--paper-2);border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-top:6px}
.exam-q .scheme ul{margin:6px 0 0;padding-left:20px}
.exam-q .scheme li{margin:4px 0}
.exam-q .scheme .mk{font-family:"IBM Plex Mono";font-size:11px;color:var(--green);font-weight:600}

/* --- resources --- */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.res{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;background:var(--paper);padding:12px 14px;text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s,border-color .12s}
.res:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--indigo)}
.res .ic{width:34px;height:34px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:16px;color:#fff}
.res .ic.video{background:#d64545}.res .ic.notes{background:#3a29b8}.res .ic.sim{background:#0e8c8c}.res .ic.practical{background:#c2571e}.res .ic.exam{background:#1f9d6b}
.res b{font-family:"Space Grotesk";font-weight:500;font-size:14.5px;display:block;line-height:1.25}
.res span{font-family:"IBM Plex Mono";font-size:11px;color:var(--tx-dim);text-transform:uppercase;letter-spacing:.04em}
.res .arrow{margin-left:auto;color:var(--tx-dim);align-self:center}

/* --- keywords --- */
.kw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.kw{border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:11px 13px}
.kw dt{font-family:"IBM Plex Mono";font-weight:600;font-size:14px;color:var(--indigo-700);margin:0 0 3px}
.kw dd{margin:0;font-size:14.5px;color:var(--tx-mid);line-height:1.45}

/* building notice */
.building-note{border:2px dashed var(--line);border-radius:14px;background:var(--paper-2);padding:26px 22px;text-align:center;color:var(--tx-mid)}
.building-note .ic{font-size:26px}
.building-note h3{margin:8px 0 6px;color:var(--tx)}
.building-note p{max-width:52ch;margin:0 auto;font-size:16px}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:40px;padding:22px 0 60px;color:var(--tx-dim);font-family:"IBM Plex Mono";font-size:12px}
.foot .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .tile .liquid,.symbig .liquid,.ring .rr-fg,.omtr .fill{transition:none !important}
  .tile:hover,.res:hover,.btn:hover{transform:none}
}

/* --- stretch: deep-dive panels --- */
.stretch-read{border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));border-left:4px solid var(--gold);background:linear-gradient(180deg,var(--gold-bg),#fff 92%);border-radius:12px;padding:16px 20px;margin-bottom:12px}
.stretch-read .lb{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0 0 6px;display:flex;align-items:center;gap:6px}
.stretch-read .lb::before{content:"\276F"}
.stretch-read h3{font-size:19px;margin:0 0 10px;font-weight:600;color:var(--tx)}
.stretch-read .prose{font-size:16px;line-height:1.62;color:var(--tx)}
.stretch-read .prose p{margin:0 0 10px}
.stretch-read .prose ul{margin:0 0 10px;padding-left:20px}
.stretch-read .prose li{margin:4px 0}
.stretch-read .prose strong{font-weight:600}
.stretch-read .prose em{font-style:italic}

/* --- see it first --- */
.see-lead{font-size:16.5px;line-height:1.55;color:var(--tx-mid);margin:0 0 14px}

/* --- mobile hardening --- */
@media(max-width:600px){
  .wrap{padding:0 16px}
  .tv{padding:18px 0 60px}
  .prose{font-size:16.5px}
  .prose h3{font-size:19px}
  table.data{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:14px}
  .eg .work{font-size:14px}
  .tv-title h1{font-size:26px}
  .symbig{width:64px;height:64px}
  .symbig .s{font-size:32px}
  .stretch-read{padding:14px 16px}
  .stretch-read h3{font-size:17px}
}
html,body{max-width:100%;overflow-x:hidden}
/* =====================================================================
   VISUAL + SEN-FRIENDLY BLOCKS  (States rebuild)
   Bigger type, generous line-height, short measure, strong visual anchors.
   ===================================================================== */

/* Notes prose: easier to read for everyone, especially SEN pupils */
.notes p { line-height: 1.75; letter-spacing: 0.005em; }
.notes p, .notes li { max-width: 62ch; }
.notes li { line-height: 1.7; margin-bottom: .45rem; }
.notes h3 {
  margin-top: 2.1rem; font-size: 1.32rem; letter-spacing: -0.01em;
  padding-bottom: .35rem; border-bottom: 2px solid var(--rule, #dfe4ee);
}

/* Big takeaway line */
.bigline {
  font-family: var(--font-display, inherit);
  font-size: 1.34rem; font-weight: 700; line-height: 1.45;
  color: var(--ink, #0C1226);
  background: linear-gradient(180deg, rgba(78,57,230,.07), rgba(78,57,230,.03));
  border-left: 5px solid var(--indigo, #4E39E6);
  border-radius: 0 12px 12px 0;
  padding: .95rem 1.15rem; margin: 1.5rem 0;
  max-width: none !important;
}

/* Figures */
.fig { margin: 1.6rem 0 1.8rem; }
.fig .figwrap {
  background: #fff; border: 1px solid var(--rule, #dfe4ee); border-radius: 16px;
  padding: .85rem .7rem; overflow: hidden;
  box-shadow: 0 2px 10px rgba(12,18,38,.05);
}
.fig svg { display: block; width: 100%; height: auto; }
.fig figcaption {
  margin-top: .6rem; font-size: .95rem; line-height: 1.5;
  color: var(--ink-soft, #5A6472); text-align: center;
  max-width: 60ch; margin-left: auto; margin-right: auto;
}

/* Mini card rows */
.cardrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .8rem; margin: 1.3rem 0 1.5rem;
}
.minicard {
  background: #fff; border: 1px solid var(--rule, #dfe4ee);
  border-top: 4px solid var(--indigo, #4E39E6);
  border-radius: 14px; padding: .95rem 1rem;
}
.minicard[data-tone="solid"]  { border-top-color: #4E39E6; }
.minicard[data-tone="liquid"] { border-top-color: #2E6FC7; }
.minicard[data-tone="gas"]    { border-top-color: #D2551F; }
.minicard[data-tone="in"]     { border-top-color: #B8860B; }
.minicard[data-tone="out"]    { border-top-color: #0E8C8C; }
.mc-ic { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: .4rem; }
.mc-h  { font-weight: 700; font-size: 1.04rem; margin: 0 0 .25rem; color: var(--ink, #0C1226); }
.mc-p  { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft, #5A6472); }

/* Words to know */
.kwbox {
  background: #FBFAF4; border: 1px solid #E7DFC2; border-radius: 14px;
  padding: 1rem 1.1rem; margin: 1.4rem 0;
}
.kwbox .lb {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #8A6208; margin: 0 0 .6rem;
}
.kwrow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem;
  padding: .5rem 0; border-top: 1px solid #EFE7CE;
}
.kwrow:first-of-type { border-top: 0; }
.kw-w  { font-weight: 700; font-size: 1.05rem; color: var(--ink, #0C1226); }
.kw-say {
  font-size: .82rem; color: #8A6208; background: #F5EFDC;
  padding: .12rem .5rem; border-radius: 999px; white-space: nowrap;
}
.kw-d  { flex: 1 1 220px; font-size: .96rem; line-height: 1.6; color: var(--ink-soft, #5A6472); }

/* Tap-to-reveal check questions */
.checkq {
  border: 2px solid var(--indigo, #4E39E6); border-radius: 14px;
  background: rgba(78,57,230,.04); margin: 1.4rem 0; overflow: hidden;
}
.checkq > summary {
  cursor: pointer; list-style: none; padding: .85rem 1rem;
  font-weight: 700; font-size: 1.03rem; color: var(--ink, #0C1226);
  display: flex; align-items: center; gap: .6rem;
}
.checkq > summary::-webkit-details-marker { display: none; }
.checkq > summary::after {
  content: "Tap to check"; margin-left: auto; font-size: .78rem; font-weight: 600;
  color: var(--indigo, #4E39E6); background: #fff; border: 1px solid var(--indigo, #4E39E6);
  padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
}
.checkq[open] > summary::after { content: "Hide"; }
.cq-ic {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--indigo, #4E39E6); color: #fff;
  display: grid; place-items: center; font-size: .95rem; font-weight: 700;
}
.cq-a {
  padding: 0 1rem 1rem 3.2rem; font-size: 1rem; line-height: 1.7;
  color: var(--ink, #0C1226);
}

/* Numbered steps */
.stepslist { list-style: none; counter-reset: st; padding: 0; margin: 1.3rem 0; }
.stepslist li {
  counter-increment: st; position: relative;
  padding: .1rem 0 .9rem 2.9rem; margin: 0;
}
.stepslist li::before {
  content: counter(st); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--indigo, #4E39E6); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}
.st-h { display: block; font-weight: 700; font-size: 1.03rem; color: var(--ink, #0C1226); }
.st-p { display: block; font-size: .96rem; line-height: 1.65; color: var(--ink-soft, #5A6472); margin-top: .15rem; }

@media (max-width: 640px) {
  .bigline { font-size: 1.18rem; padding: .85rem 1rem; }
  .fig .figwrap { padding: .6rem .45rem; border-radius: 13px; }
  .cardrow { grid-template-columns: 1fr; }
  .cq-a { padding-left: 1rem; }
}
/* =====================================================================
   WONDER LAYER  ·  stat cards, hero panels, deep-dive doors
   ===================================================================== */

/* ---- Wow stats ---------------------------------------------------- */
.wowrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: .75rem; margin: 1.6rem 0;
}
.wowcard {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0C1226 0%, #1B2350 100%);
  border-radius: 16px; padding: 1.15rem 1rem 1rem; text-align: center;
  box-shadow: 0 6px 20px rgba(12,18,38,.22);
}
.wowcard::after {
  content: ""; position: absolute; inset: -40% -60% auto auto;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(78,57,230,.55), transparent 70%);
}
.wow-n {
  position: relative; display: block; font-family: var(--font-display, inherit);
  font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  color: #fff;
}
.wow-u {
  position: relative; display: block; margin-top: .2rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #8E7BFF;
}
.wow-p {
  position: relative; display: block; margin-top: .55rem;
  font-size: .93rem; line-height: 1.55; color: #C7CDE4;
}

/* ---- Wonder hero panel -------------------------------------------- */
.wonder {
  position: relative; margin: 1.9rem 0;
  background: linear-gradient(135deg, #4E39E6 0%, #7B4BE0 55%, #C2571E 140%);
  border-radius: 20px; padding: 1.5rem 1.6rem 1.4rem; color: #fff;
  box-shadow: 0 10px 30px rgba(78,57,230,.28);
}
.wo-ic { font-size: 2rem; line-height: 1; display: block; margin-bottom: .5rem; }
.wo-lb {
  margin: 0 0 .4rem; font-size: .76rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.82);
}
.wo-h {
  margin: 0; font-family: var(--font-display, inherit);
  font-size: 1.5rem; font-weight: 800; line-height: 1.35; color: #fff;
  max-width: 34ch;
}
.wo-p {
  margin: .7rem 0 0; font-size: 1.02rem; line-height: 1.65;
  color: rgba(255,255,255,.94); max-width: 60ch;
}

/* ---- Deep dive "doors" -------------------------------------------- */
.dd-intro {
  font-size: 1.06rem; line-height: 1.7; color: var(--ink, #0C1226);
  max-width: 60ch; margin: 0 0 1.2rem;
}
.ddgrid { display: grid; gap: .7rem; margin-bottom: 2.4rem; }
.dive {
  border: 1px solid #E4DCC0; border-left: 5px solid #B8860B;
  border-radius: 14px; background: #FCFBF6; overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.dive[open] { background: #fff; box-shadow: 0 6px 22px rgba(184,134,11,.15); }
.dive > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.05rem;
}
.dive > summary::-webkit-details-marker { display: none; }
.dv-ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(150deg, #B8860B, #E0A82E);
  display: grid; place-items: center; font-size: 1.25rem; color: #fff;
}
.dv-txt { flex: 1 1 auto; min-width: 0; }
.dv-n {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #B8860B; margin-bottom: .1rem;
}
.dv-h {
  display: block; font-weight: 700; font-size: 1.08rem; line-height: 1.35;
  color: var(--ink, #0C1226);
}
.dv-hook {
  display: block; margin-top: .2rem; font-size: .93rem; line-height: 1.5;
  color: var(--ink-soft, #5A6472);
}
.dv-go {
  flex: 0 0 auto; align-self: center; font-size: .76rem; font-weight: 700;
  color: #B8860B; border: 1px solid #D9BE72; background: #fff;
  padding: .28rem .65rem; border-radius: 999px; white-space: nowrap;
}
.dive[open] .dv-go::before { content: "Close"; }
.dive[open] .dv-go { font-size: 0; }
.dive[open] .dv-go::before { font-size: .76rem; }
.dive > .prose {
  padding: 0 1.15rem 1.2rem 4.05rem; font-size: 1rem; line-height: 1.75;
  color: var(--ink, #0C1226);
}
.dive > .prose p { margin: 0 0 .85rem; max-width: 62ch; }
.dive > .prose p:last-child { margin-bottom: 0; }

/* ---- Challenge cards ---------------------------------------------- */
.ch-head { margin: 0 0 1rem; font-size: 1.3rem; }
.chgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem;
}
.chcard {
  background: #fff; border: 1px solid var(--rule, #dfe4ee);
  border-top: 4px solid var(--indigo, #4E39E6);
  border-radius: 14px; padding: .95rem 1.05rem 1rem;
}
.ch-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.ch-n {
  width: 26px; height: 26px; border-radius: 8px; background: var(--indigo, #4E39E6);
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .88rem;
}
.ch-lv { display: inline-flex; gap: 4px; margin-left: auto; }
.ch-lv i {
  width: 9px; height: 9px; border-radius: 50%; background: #DDE1EC; display: block;
}
.ch-lv i.on { background: #B8860B; }
.chcard .q { margin: 0 0 .6rem; font-size: 1rem; line-height: 1.65; color: var(--ink, #0C1226); }
.chcard details summary {
  cursor: pointer; font-size: .88rem; font-weight: 700; color: var(--indigo, #4E39E6);
}
.chcard details p {
  margin: .55rem 0 0; font-size: .95rem; line-height: 1.65; color: var(--ink-soft, #5A6472);
}

/* ---- Motion, gated for reduced-motion users ------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .fig svg .p-vib   { animation: vib 1.1s ease-in-out infinite; }
  .fig svg .p-slide { animation: slide 3.4s ease-in-out infinite; }
  .fig svg .p-zoom  { animation: zoom 3.2s linear infinite; }
}
@keyframes vib {
  0%,100% { transform: translate(0,0); }
  25%     { transform: translate(1.6px,-1.2px); }
  50%     { transform: translate(-1.4px,1.4px); }
  75%     { transform: translate(1.2px,1.1px); }
}
@keyframes slide {
  0%,100% { transform: translate(0,0); }
  30%     { transform: translate(9px,-3px); }
  60%     { transform: translate(-7px,2px); }
}
@keyframes zoom {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(26px,-18px); }
  50%  { transform: translate(-14px,16px); }
  75%  { transform: translate(18px,12px); }
  100% { transform: translate(0,0); }
}

@media (max-width: 640px) {
  .wow-n { font-size: 2.1rem; }
  .wonder { padding: 1.25rem 1.15rem; border-radius: 16px; }
  .wo-h { font-size: 1.28rem; }
  .dive > .prose { padding-left: 1.15rem; }
  .dive > summary { gap: .7rem; padding: .85rem .9rem; }
  .dv-ic { width: 36px; height: 36px; font-size: 1.05rem; }
  .dv-go { display: none; }
}

/* figure sitting inside an opened deep dive */
.dive-fig { margin: 1.1rem 0 .2rem; }
.dive-fig .figwrap { border-color: #E4DCC0; background: #FFFDF7; }
.dive-fig figcaption { text-align: left; margin-left: 0; font-size: .9rem; }

/* ---- downloadable worksheets --------------------------------------- */
.shelf-lb{font-family:var(--font-mono,monospace);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft,#5A6472);margin:0 0 .65rem}
.shelf-lb+.shelf,.dlgrid+.shelf-lb{margin-top:0}
.dlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.7rem;margin-bottom:1.6rem}
.dl{display:flex;align-items:center;gap:.85rem;text-decoration:none;background:#fff;
  border:1px solid var(--rule,#dfe4ee);border-left:5px solid var(--indigo,#4E39E6);
  border-radius:13px;padding:.8rem .95rem;transition:transform .14s,box-shadow .14s}
.dl:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(12,18,38,.1)}
.dl-ic{flex:0 0 auto;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  background:var(--indigo,#4E39E6);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.04em}
.dl-tx{flex:1 1 auto;min-width:0}
.dl-tx b{display:block;font-size:1rem;color:var(--ink,#0C1226);line-height:1.35}
.dl-tx span{display:block;margin-top:.15rem;font-size:.88rem;line-height:1.5;color:var(--ink-soft,#5A6472)}
.dl-go{flex:0 0 auto;font-size:1.1rem;color:var(--indigo,#4E39E6)}