/* Visual polish for the practice page. Loaded last, so it wins over the older theme layers. */

/* ---------- Color: a calm, near-white page. Green is for buttons, gold for stars. ---------- */
:root{--pg:#f5f7f3;--ink2:#1f2b1c;--soft:#4d5c48;--rule:#e2e8de;
  --sc:#2f8a4a;--sc-bg:#eaf5ec}
body[data-subj=ela]{--sc:#1f5fc4;--sc-bg:#e9f0fc}
body[data-subj=sci]{--sc:#6a3fb8;--sc-bg:#f1ebfb}
body[data-subj=soc]{--sc:#b5531a;--sc-bg:#fcefe6}
html{background:var(--pg)}
body.kidmode{min-height:100vh;background:var(--pg);color:var(--ink2);--muted:var(--soft);--label:var(--soft)}

/* White top bar, like a school workbook cover. */
nav.top{background:#fff;border-bottom:1px solid var(--rule)}
nav.top .subj{color:var(--soft)}
nav.top .subj[aria-current=page]{color:var(--sc);box-shadow:inset 0 -3px 0 var(--sc)}
nav.top #soundBtn{background:#fff;border-color:var(--rule)}

/* Skill heading uses the subject color; helper text is dark enough to read. */
header.band #sGrade{color:var(--sc)}
header.band #sTitle{color:var(--ink2)}
header.band .constel-lab,header.band p{color:var(--soft)}
#skillsBtn{background:#fff;box-shadow:0 1px 3px rgba(30,40,25,.12)}

/* Question card: white, with a quiet edge instead of a big green shadow. */
main#card.work{background:#fff;border:1px solid var(--rule);box-shadow:0 2px 10px rgba(30,40,25,.05)}

/* Skill list picks up the subject color. */
.sl-letter,#nav .group h2{color:var(--sc)}
#nav .group h2{border-bottom-color:var(--sc)}
#nav .skill[aria-current=true]{background:var(--sc-bg)}
aside.skills{background:var(--pg)}

/* Pop-ups dim the page lightly instead of turning it olive. */
.pw-ov,.ls-ov{background:rgba(25,35,22,.35)!important}
.drawer-open .drawer-bg,.mn-wrap.is-open .mn-bg{background:rgba(25,35,22,.35)}
.picker-ov{background:var(--pg)}

/* ---------- Layout: the question comes first. ---------- */
header.band{padding-block:0}
header.band .in{padding-top:14px;padding-bottom:10px}
header.band .in>div:first-child{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:2px}
header.band #sGrade{order:1;flex-basis:100%;margin:0}
header.band #sTitle{order:2;margin:0;font-size:clamp(1.4rem,2.6vw,1.75rem);line-height:1.2}
header.band #skillsBtn{order:3;min-height:38px}
header.band .constel-lab{order:5;flex-basis:100%;margin:2px 0 0;font-size:.9rem}
header.band .in>div:first-child>*:not(#sGrade):not(#sTitle):not(#skillsBtn):not(.constel-lab){order:4}
header.band .scorewrap{align-self:center}

/* ---------- Writing: two typefaces, and bigger questions for young readers. ---------- */
:root{--display:"Lexend",system-ui,sans-serif}
body[data-band=early] .kidmode .prompt,body[data-band=early] #card .prompt{font-size:clamp(1.35rem,3.2vw,1.65rem);line-height:1.3}
body[data-band=early] #card .choice{font-size:clamp(1.5rem,4vw,2rem)}
body[data-band=older] #card .prompt{font-size:clamp(1.15rem,2.4vw,1.35rem);line-height:1.4}
#card .prompt{max-width:40ch}

/* "Maya, Grade 1": no stray space before the comma. */
nav.top .who{gap:0}
nav.top .who .av{margin-right:8px}

/* Title block lines up with the left edge of the question card. */
header.band .in{max-width:892px}
@media (min-width:900px){
  /* Keypad sits level with the question, not floating above it. */
  main#card .pad{align-self:center}
}

/* Hint button sits with Read aloud, no extra gap. */
#card .prow .hn-btn{margin-left:0}

@media (max-width:640px){
  /* Header: one tidy row of menu, logo, badges and sound; subjects scroll sideways. */
  nav.top .in{row-gap:6px;padding-block:10px}
  nav.top .brand{margin-right:auto}
  nav.top .brand b{font-size:1.05rem}
  nav.top #badgeBtn{font-size:0;gap:0;padding:6px 10px;min-height:40px}
  nav.top #badgeBtn img.fe{width:20px;height:20px;margin-right:6px}
  nav.top #badgeBtn .bn{font-size:.85rem}
  nav.top #soundBtn{margin-left:4px}
  nav.top #subjects{display:contents}
  nav.top .subj{white-space:nowrap}
  nav.top #who{font-size:.85rem}

  /* Question row: prompt on its own line, then Read aloud and the hint side by side. */
  #card .prow .prompt{flex-basis:100%}
  #card .prow{row-gap:8px;column-gap:8px}

  /* Card uses the width it has. */
  main#card.work{padding:20px 16px 22px}
}

/* Tablet: the keypad keeps a comfortable width under the question. */
@media (min-width:641px) and (max-width:899px){
  main#card .pad{width:100%;max-width:420px}
}

/* The closed skill list leaves no shadow on the page edge. */
aside.skills{box-shadow:none}
.drawer-open aside.skills{box-shadow:8px 0 30px -12px rgba(0,0,0,.25)}

/* Question on its own line, with Read aloud and the hint together underneath. */
#card .prow .prompt{flex-basis:100%}
#card .prow{row-gap:10px;column-gap:8px}

/* Vita wordmark, same as the rest of the site. */
nav.top .brand .vl{display:inline-flex;align-items:baseline;gap:6px;line-height:1;color:#1f5a3a;white-space:nowrap}
nav.top .brand .vl-word{font-family:"Bitter",Georgia,serif;font-weight:700;font-size:1.7rem;letter-spacing:-.02em}
nav.top .brand .vl-sub{font-weight:500;font-size:.95rem;color:#4d6a46}
@media (max-width:640px){nav.top .brand .vl-word{font-size:1.45rem}nav.top .brand .vl-sub{font-size:.85rem}}