/* Goal100 Learning — brand styles v2.
   Brand: deep indigo (trust, school), gold (achievement, the 100), teal (growth, "you did it").
   Type: Baloo 2 (friendly display) + Atkinson Hyperlegible (built for readability).
   Layout: sticky header with a large logo; calm sections; cards on auto-fit grids; rich footer. */
:root{
  --bg:#F6F5FB; --bg2:#ECEBF8; --card:#FFFFFF; --ink:#16163A; --ink2:#55577A; --line:#DCDBEE;
  --brand:#2B2A8C; --brand-ink:#FFFFFF; --brand-soft:#E6E5FA; --gold:#F2A93B; --gold-deep:#8F5C08; --gold-logo:#B4720A; --gold-soft:#FDF0D8;
  --teal:#0E7C66; --teal-soft:#DDF3EE;
  --req:#2B2A8C; --req-ink:#FFFFFF; --req-soft:#E6E5FA; --ext:#8A5000; --ext-soft:#FDEDD0; --ext-fill:#F2A93B;
  --good:#17703D; --good-soft:#DDF2E5; --warn:#7F5300; --warn-soft:#FBEFD6;
  --hero:#1E1D6B; --hero2:#2B2A8C; --hero-ink:#FFFFFF;
  --shadow:0 10px 30px rgba(30,29,107,.10);
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif; --body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#101126; --bg2:#17183A; --card:#1B1C3D; --ink:#EEEEFB; --ink2:#B4B5D6; --line:#34365E;
  --brand:#A9A6FF; --brand-ink:#101126; --brand-soft:#25265A; --gold:#F6BE5E; --gold-deep:#F6BE5E; --gold-logo:#F6BE5E; --gold-soft:#3A2D12;
  --teal:#5ED3B8; --teal-soft:#123A33;
  --req:#A9A6FF; --req-ink:#101126; --req-soft:#25265A; --ext:#F7BE5E; --ext-soft:#3A2A0C;
  --good:#53C98A; --good-soft:#173726; --warn:#F2C062; --warn-soft:#3A2D12;
  --hero:#17183A; --hero2:#25265A; --hero-ink:#EEEEFB; --shadow:0 10px 30px rgba(0,0,0,.35); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#101126; --bg2:#17183A; --card:#1B1C3D; --ink:#EEEEFB; --ink2:#B4B5D6; --line:#34365E;
  --brand:#A9A6FF; --brand-ink:#101126; --brand-soft:#25265A; --gold:#F6BE5E; --gold-deep:#F6BE5E; --gold-logo:#F6BE5E; --gold-soft:#3A2D12;
  --teal:#5ED3B8; --teal-soft:#123A33;
  --req:#A9A6FF; --req-ink:#101126; --req-soft:#25265A; --ext:#F7BE5E; --ext-soft:#3A2A0C;
  --good:#53C98A; --good-soft:#173726; --warn:#F2C062; --warn-soft:#3A2D12;
  --hero:#17183A; --hero2:#25265A; --hero-ink:#EEEEFB; --shadow:0 10px 30px rgba(0,0,0,.35); color-scheme:dark }
*{box-sizing:border-box}
html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{margin:0; background:var(--bg); color:var(--ink); font:18px/1.65 var(--body)}
body.easy-font, body.easy-font *{letter-spacing:.02em; word-spacing:.1em}
h1,h2,h3{font-family:var(--display); line-height:1.12; margin:0; text-wrap:balance}
h1{font-size:clamp(2.2rem,5.6vw,3.6rem); font-weight:800} h2{font-size:clamp(1.5rem,3.2vw,2.15rem); font-weight:800} h3{font-size:1.2rem}
p{margin:0} ul,ol{margin:0; padding-left:1.3em; display:flex; flex-direction:column; gap:6px}
a{color:var(--brand)} img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px}
.wrap{max-width:1160px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute; left:-999px; top:8px; background:var(--card); padding:8px 12px; border-radius:8px; z-index:20} .skip:focus{left:12px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- header with a large logo ---------- */
.note{background:var(--gold-soft); border-bottom:1px solid var(--line); font-size:.9rem} .note .wrap{padding-block:7px}
header.top{position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; padding-block:10px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); margin-right:auto}
.brand .logo{width:128px; height:117px; flex:none; filter:drop-shadow(0 6px 14px rgba(30,29,107,.18))}
.brand .word{display:flex; flex-direction:column; line-height:1}
.brand .word b{font-family:var(--display); font-weight:800; font-size:3.4rem; letter-spacing:-.01em}
.brand .tm{font-family:Arial,Helvetica,sans-serif; font-size:.38em; font-weight:700; vertical-align:super; margin-left:2px; color:var(--ink)} .brand .word b span{color:var(--gold-logo,var(--gold-deep))}
.brand .word small{font-weight:700; font-size:1rem; letter-spacing:.46em; color:var(--ink2); margin-top:3px}
nav.main{display:flex; flex-wrap:wrap; gap:2px; align-items:center}
nav.main a{padding:9px 10px; border-radius:12px; text-decoration:none; color:var(--ink); font-weight:700; font-size:.98rem}
nav.main a[aria-current="page"], nav.main a:hover{background:var(--brand-soft)}
.cta-top{background:var(--gold)!important; color:#1B1300!important}
.menu-btn, .pill.menu-btn{display:none}
@media (max-width:980px){ .pill.menu-btn{display:inline-flex} nav.main{display:none; width:100%; flex-direction:column; align-items:stretch} nav.main.open{display:flex} .brand .logo{width:88px; height:80px} .brand .word b{font-size:2.5rem} .brand .word small{font-size:.85rem} }
.pill{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:4px 14px; border-radius:999px; border:2px solid var(--line); background:var(--card); color:var(--ink); font:700 .95rem var(--body); cursor:pointer; text-decoration:none}
.pill[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-soft)}

/* ---------- page ---------- */
main{padding-block:30px 72px; display:flex; flex-direction:column; gap:36px}
.hero{position:relative; overflow:hidden; background:radial-gradient(120% 140% at 85% 20%, var(--hero2), var(--hero) 60%); color:var(--hero-ink); border-radius:32px; padding:clamp(24px,5vw,56px); display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:24px; align-items:center; box-shadow:var(--shadow)}
.hero > *{min-width:0} .hero .copy{display:flex; flex-direction:column; gap:16px}
.hero h1{color:var(--hero-ink)} .hero h1 em{font-style:normal; color:var(--gold)}
.hero p.lede, .hero .lede{color:var(--hero-ink); opacity:.92; font-size:1.18rem; max-width:58ch}
.hero .mark{width:min(340px,100%); justify-self:center; filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
:root:not([data-motion="off"]) .hero .mark{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:760px){ .hero{grid-template-columns:minmax(0,1fr)} .hero .mark{width:180px; order:-1} }
.trust{display:flex; flex-wrap:wrap; gap:8px 18px; font-weight:700; font-size:.95rem; opacity:.95}
.trust > span::before{content:"✓ "; color:var(--gold)}
.section{display:flex; flex-direction:column; gap:16px}
.section > .head{display:flex; flex-direction:column; gap:6px}
.eyebrow{font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; color:var(--gold-deep)}
.lede{color:var(--ink2); font-size:1.1rem; max-width:66ch}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:22px; display:flex; flex-direction:column; gap:10px; min-width:0}
.card.link{text-decoration:none; color:var(--ink); border-width:2px; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease}
.card.link:hover{border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--shadow)}
.card .ico{font-size:2.2rem; line-height:1}
.card.feature{background:linear-gradient(180deg, var(--brand-soft), var(--card) 70%)}
.muted{color:var(--ink2)} .small{font-size:.9rem}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:12px 24px; border-radius:16px; border:2px solid var(--brand); background:var(--brand); color:var(--brand-ink); font:700 1.05rem var(--body); text-decoration:none; cursor:pointer}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#1B1300}
.btn.ghost{background:var(--card); color:var(--ink); border-color:var(--line)}
.hero .btn.ghost{background:transparent; color:var(--hero-ink); border-color:currentColor}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-weight:700; font-size:.82rem; width:fit-content}
.b-req{background:var(--req); color:var(--req-ink)} .b-ext{background:var(--ext-soft); color:var(--ext); border:2px dashed var(--ext)}
.b-test{background:var(--warn-soft); color:var(--ink); border:1px solid var(--warn)} .b-ok{background:var(--good-soft); color:var(--good)} .b-plan{background:var(--bg); color:var(--ink2); border:1px dashed var(--ink2)}
.b-gold{background:var(--gold); color:#1B1300}
.steps{counter-reset:s; list-style:none; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.steps li{counter-increment:s; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:6px}
.steps li::before{content:counter(s); font-family:var(--display); font-weight:800; font-size:1.4rem; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold-deep)}
table{border-collapse:collapse; width:100%; font-size:.96rem; font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:10px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2)}
.tw{overflow-x:auto}
.price{font-family:var(--display); font-weight:800; font-size:2.4rem; line-height:1}
.offer{position:relative; border:2px solid var(--line)} .offer.best{border:3px solid var(--gold); box-shadow:var(--shadow)}
.offer .ribbon{position:absolute; top:-14px; left:20px}
.callout{border-left:6px solid var(--brand); background:var(--brand-soft); border-radius:14px; padding:14px 18px}
.callout.warn{border-color:var(--warn); background:var(--warn-soft)} .callout.gold{border-color:var(--gold); background:var(--gold-soft)}
details{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 18px}
details summary{cursor:pointer; font-weight:700; min-height:32px}
details[open] summary{margin-bottom:8px}
form{display:flex; flex-direction:column; gap:14px}
label{font-weight:700; display:flex; flex-direction:column; gap:6px}
label.check{flex-direction:row; align-items:flex-start; gap:10px; font-weight:400}
input,select,textarea{font:inherit; min-height:48px; border-radius:12px; border:2px solid var(--line); background:var(--bg); color:var(--ink); padding:8px 12px; width:100%}
textarea{min-height:140px} label.check input{width:22px; min-height:22px; margin-top:3px}
.hp{position:absolute; left:-5000px}
/* chips (personalize) */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:6px; min-height:46px; padding:6px 16px; border-radius:999px; border:2px solid var(--line); background:var(--card); color:var(--ink); font:700 1rem var(--body); cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-soft)}
.plan{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.plan a{display:flex; gap:12px; align-items:center; padding:14px; border-radius:18px; border:2px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none}
.plan a:hover{border-color:var(--brand)} .plan .ico{font-size:2rem}
.avatar{width:96px; height:96px; border-radius:28px; display:grid; place-items:center; font-size:3rem; background:var(--gold-soft); flex:none}
/* help "?" */
.help{position:relative; display:inline-block; vertical-align:middle}
.help>button{width:30px; height:30px; border-radius:50%; border:2px solid var(--brand); background:var(--card); color:var(--brand); font:700 .95rem var(--body); cursor:pointer; padding:0}
.help .tip{position:absolute; left:50%; top:36px; transform:translateX(-50%); width:min(290px,80vw); background:var(--ink); color:var(--bg); padding:10px 12px; border-radius:12px; font:400 .9rem/1.45 var(--body); z-index:12}
/* demos + library */
.rolebar{display:flex; flex-wrap:wrap; gap:6px}
.tiles{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr))}
.tile{border:2px solid var(--line); border-radius:20px; padding:16px 10px; background:var(--card); text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center; text-decoration:none; color:var(--ink); transition:transform .15s ease}
.tile:hover{border-color:var(--brand); transform:translateY(-3px)} .tile .ico{font-size:2.3rem} .stars{color:var(--gold-deep); letter-spacing:2px}
.door{border-radius:24px; padding:22px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:6px; border:3px solid var(--req); background:var(--req-soft)}
.door.ext{border:3px dashed var(--ext); background:var(--ext-soft)}
.door strong{font-family:var(--display); font-size:1.8rem}
.mission{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; border:3px solid var(--req)}
.meter{height:12px; border-radius:999px; background:var(--line); overflow:hidden} .meter i{display:block; height:100%; background:var(--teal)}
.lvl{display:inline-block; min-width:28px; text-align:center; border-radius:8px; padding:1px 6px; font-weight:700; background:var(--req-soft)}
.ok{color:var(--good); font-weight:700}
.kpi{font-family:var(--display); font-weight:800; font-size:2.2rem; line-height:1}
dl.kv{display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:6px 14px; margin:0} dl.kv dt{font-weight:700} dl.kv dd{margin:0; min-width:0}
@media (max-width:520px){ dl.kv{grid-template-columns:1fr} dl.kv dt{margin-top:6px} }
/* legal documents */
.doc{max-width:820px; display:flex; flex-direction:column; gap:14px}
.doc h2{font-size:1.45rem; margin-top:14px} .doc h3{margin-top:8px}
.doc .meta{color:var(--ink2); font-size:.92rem}
.toc{columns:2 240px; gap:20px}
/* footer */
footer.foot{border-top:1px solid var(--line); background:var(--card)}
footer.foot .cols{display:grid; gap:22px; grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr)); padding-block:34px 18px}
@media (max-width:700px){ footer.foot .cols{grid-template-columns:minmax(0,1fr)} }
footer.foot h4{margin:0 0 8px; font-family:var(--display); font-size:1.05rem}
footer.foot ul{list-style:none; padding:0; gap:4px} footer.foot a{color:var(--ink2); text-decoration:none} footer.foot a:hover{color:var(--brand); text-decoration:underline}
footer.foot .base{border-top:1px solid var(--line); padding-block:14px 22px; font-size:.86rem; color:var(--ink2); display:flex; flex-wrap:wrap; gap:8px 18px}
.faqsearch{display:flex; gap:8px; flex-wrap:wrap} .faqsearch input{flex:1 1 240px}
mark{background:var(--gold-soft); color:var(--ink)}
@media print{ header.top, footer.foot, .note, .help{display:none} }
@media (max-width:600px){ .rolebar{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px} .rolebar .pill{white-space:nowrap; flex:none} }

/* v3 polish (Nov 6, 2026): bigger logo, calmer spacing, modern cards */
header.top .wrap{padding-block:12px}
@media (min-width:981px){ nav.main{gap:4px} nav.main a{padding:10px 13px} }
.section{margin-block:clamp(36px,6vw,72px)}
.card{border-radius:20px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
a.card:hover,.card.link:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(30,29,107,.16); border-color:var(--brand)}
.hero{border-radius:28px; box-shadow:0 24px 60px rgba(30,29,107,.22)}
.btn{box-shadow:0 6px 18px rgba(30,29,107,.18)} .btn:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){ .card,.btn{transition:none} a.card:hover{transform:none} }

.brand .word .g100-for{display:block;font-weight:700;font-size:.82rem;letter-spacing:.01em;color:var(--gold-deep,#9a6a12);margin-top:6px;line-height:1.25;white-space:normal;max-width:30ch}
@media (max-width:980px){.brand .word .g100-for{font-size:.74rem}}

/* screen-reader-only text (audit Nov 8, 2026) */
.g100-sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

@media (max-width:640px){.help .tip{position:fixed;left:16px;right:16px;top:auto;bottom:16px;transform:none;width:auto;max-height:50vh;overflow:auto}}
/* 🏠 Home button in every header (ux, Nov 8, 2026) */
header.top .home-btn{flex:none;white-space:nowrap;text-decoration:none;font-weight:800}
header.top .home-btn[aria-current="page"]{outline:2px solid var(--gold,#F2B53B);outline-offset:1px}
@media (max-width:520px){header.top .wrap{gap:8px 10px} header.top .home-btn,header.top .menu-btn,header.top #lang{padding:6px 11px}}

/* ---------- Site navigation (Nov 9, 2026) — built by site.js siteNav() from G100_NAV ----------
   Desktop: mega-dropdown under the header (left rail of sections, the chosen section on the right).
   Phones and tablets (≤980px): ☰ drawer from the right with accordions. Tap targets ≥44px, visible focus, reduced motion. */
nav.main.gn{position:static}
nav.main.gn ul{list-style:none; margin:0; padding:0}
.gn-top{display:flex; flex-direction:row; flex-wrap:wrap; gap:2px; align-items:center}
.gn-ti{position:static}
.gn-tb,nav.main a.gn-tl{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:9px 12px; border-radius:12px; border:0; background:transparent; color:var(--ink); font:700 .98rem var(--body); cursor:pointer; text-decoration:none}
.gn-tb:hover,nav.main a.gn-tl:hover,.gn-tb[aria-expanded="true"]{background:var(--brand-soft)}
.gn-tb.gn-cur,nav.main a.gn-tl.gn-cur{box-shadow:inset 0 -3px 0 var(--gold)}
.gn-car{font-size:.8em; transition:transform .15s ease} .gn-tb[aria-expanded="true"] .gn-car{transform:rotate(180deg)}
.gn-ico{font-size:1.1em; width:1.4em; text-align:center; flex:none}
.gn-panel{background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:22px; box-shadow:0 24px 60px rgba(30,29,107,.22); font-size:.95rem; line-height:1.35}
.gn-panel[hidden],.gn-sec[hidden],.gn-scrim[hidden]{display:none!important}
.gn-phead{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; padding:10px 16px; border-bottom:1px solid var(--line)}
nav.main a.gn-hub{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:6px 10px; border-radius:12px; font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--brand); text-decoration:none; background:var(--brand-soft)}
nav.main a.gn-hub:hover{text-decoration:underline}
.gn-d{color:var(--ink2); font-size:.9rem; font-weight:700}
.gn-rh{margin:8px 8px 2px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.gn-rail .gn-rh:first-child{margin-top:2px}
.gn-sb,nav.main a.gn-sl{display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:6px 10px; border:2px solid transparent; border-radius:12px; background:transparent; color:var(--ink); font:700 .98rem var(--body); text-align:left; cursor:pointer; text-decoration:none}
.gn-sb:hover{background:var(--bg2)}
button.gn-sb[aria-expanded="true"]{background:var(--brand-soft); border-color:var(--brand)}
.gn-sb[data-current="true"]::after,.gn-sb[aria-current="page"]::after{content:"•"; color:var(--gold-deep); font-size:1.4rem; line-height:1; margin-left:auto}
.gn-sb .gn-chev{margin-left:auto; transition:transform .15s ease}
.gn-sb[data-current="true"] .gn-chev{margin-left:6px}
.gn-sech{font-family:var(--display); font-weight:800; font-size:1.25rem; margin:0 0 4px; grid-column:1 / -1}
.gn-g{min-width:0}
.gn-gh{margin:4px 6px 4px; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.gn-sh{margin:8px 6px 2px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.gn-g ul{display:grid; gap:2px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
nav.main .gn-g a{display:flex; align-items:center; gap:6px; min-height:44px; padding:5px 8px; border-radius:10px; color:var(--ink); font-weight:700; font-size:.93rem; text-decoration:none}
nav.main .gn-g a:hover,nav.main .gn-g a:focus-visible{background:var(--bg2); text-decoration:underline}
nav.main .gn-g a[aria-current="page"],nav.main .gn-sec a[aria-current="page"]{background:var(--gold-soft); box-shadow:inset 3px 0 0 var(--gold)}
/* Required / Extra / Electives tracks inside a grade */
.gn-trk{border-radius:16px; padding:8px 10px}
.gn-trk.gn-req{background:var(--req-soft); border:2px solid var(--req)}
.gn-trk.gn-ext{background:var(--ext-soft); border:2px dashed var(--ext)}
.gn-trk.gn-ele{background:var(--bg2); border:2px solid var(--line)}
.gn-trk .gn-gh{text-transform:none; letter-spacing:0; margin:2px 4px 6px}
.gn-gt{font-family:var(--display); font-weight:800; font-size:1.05rem; color:var(--ink)}
.gn-tg{display:none}
.gn-n{display:inline-block; min-width:1.8em; text-align:center; font:700 .76rem var(--body); padding:1px 7px; border-radius:999px; background:var(--card); border:1px solid var(--line); vertical-align:middle}
nav.main .gn-trk a.gn-open{display:inline-flex; min-height:44px; align-items:center; padding:4px 8px; font-size:.9rem; color:var(--brand); text-decoration:underline}
nav.main .gn-trk .gn-g a,nav.main .gn-trk ul a{background:transparent}
nav.main .gn-trk ul a:hover{background:var(--card)}
.gn-dhead,.gn-scrim{display:none}
/* desktop */
@media (min-width:981px){
  .gn-panel{position:absolute; z-index:30; top:calc(100% - 4px); left:50%; transform:translateX(-50%); width:min(1140px, calc(100vw - 32px)); height:560px; display:grid; grid-template-columns:260px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); overflow:hidden}
  .gn-phead{grid-column:1 / -1}
  .gn-rail{grid-column:1; grid-row:2; border-right:1px solid var(--line); overflow:auto; padding:8px; display:flex; flex-direction:column; gap:2px}
  .gn-ri{position:static}
  .gn-sec{position:absolute; left:261px; right:0; top:var(--gn-top,66px); bottom:0; overflow:auto; padding:12px 18px 18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px 16px; align-content:start}
  .gn-sec .gn-trk.gn-req{grid-column:1 / -1}
  .gn-sec .gn-trk.gn-ext,.gn-sec .gn-trk.gn-ele{grid-column:span 1}
  .gn-sec .gn-trk .gn-list{display:block}
  .gn-sec .gn-trk.gn-req ul{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  .gn-sec .gn-trk.gn-ext ul,.gn-sec .gn-trk.gn-ele ul{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
  nav.main .nav-quick{display:none}
}
/* phones and tablets: ☰ drawer with accordions */
@media (max-width:980px){
  nav.main.gn{display:none; position:fixed; top:0; right:0; bottom:0; left:auto; z-index:60; width:min(440px,100vw); max-height:none; overflow-y:auto; overscroll-behavior:contain; background:var(--card); border-left:1px solid var(--line); box-shadow:-20px 0 50px rgba(0,0,0,.25); padding:0 12px 28px; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0}
  nav.main.gn.open{display:flex}
  html.gn-open header.top{backdrop-filter:none; -webkit-backdrop-filter:none}
  html.gn-open body{overflow:hidden}
  .gn-scrim{display:block; position:fixed; inset:0; z-index:55; background:rgba(16,17,38,.45)}
  .gn-dhead{display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; top:0; z-index:2; background:var(--card); padding:12px 0 10px; border-bottom:1px solid var(--line)}
  .gn-dhead b{font-family:var(--display); font-size:1.4rem}
  nav.main .nav-quick{display:flex; flex-wrap:wrap; gap:6px; padding:10px 0; border-bottom:1px solid var(--line)}
  nav.main .nav-quick a{flex:1 1 44%; min-height:44px; display:flex; align-items:center; padding:6px 10px; border-radius:12px; background:var(--bg2); color:var(--ink); font-weight:700; text-decoration:none}
  .gn-top{flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:4px; padding-top:8px}
  .gn-tb,nav.main a.gn-tl{width:100%; justify-content:space-between; min-height:48px; font-size:1.08rem; padding:10px 12px; background:var(--bg2)}
  .gn-tb.gn-cur,nav.main a.gn-tl.gn-cur{box-shadow:inset 4px 0 0 var(--gold)}
  .gn-panel{border-radius:16px; box-shadow:none; margin:4px 0 8px; border-color:var(--line)}
  .gn-rail{padding:6px; display:flex; flex-direction:column; gap:2px}
  .gn-sb .gn-chev{transform:rotate(90deg); font-size:1.35rem; line-height:1; width:1em; text-align:center} button.gn-sb[aria-expanded="true"] .gn-chev{transform:rotate(270deg)}
  .gn-sec{padding:6px 2px 10px 8px; display:flex; flex-direction:column; gap:8px}
  .gn-sech{display:none}
  .gn-g ul{grid-template-columns:1fr}
  .gn-tg{display:flex; align-items:center; gap:6px; width:100%; min-height:44px; padding:4px 6px; border:0; background:transparent; color:var(--ink); font:800 1rem var(--display); text-align:left; cursor:pointer; border-radius:10px}
  .gn-tg .gn-chev{margin-left:auto; transition:transform .15s ease} .gn-tg[aria-expanded="false"] .gn-chev{transform:rotate(-90deg)}
  .gn-gt{display:none}
  .gn-list.gn-shut{display:none}
  .gn-phead{padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){ .gn-car,.gn-chev{transition:none} }
@media print{ .gn-panel,.gn-scrim,.g100-crumbs{display:none!important} }

/* ---------- breadcrumbs (Nov 9, 2026): built by site.js from the same G100_NAV ---------- */
.g100-crumbs{font-size:.9rem; margin-bottom:-18px}
.g100-crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:0; flex-direction:row}
.g100-crumbs li{display:inline-flex; align-items:center; min-width:0; overflow-wrap:anywhere}
.g100-crumbs li + li::before{content:"›"; margin:0 8px; color:var(--ink2); font-weight:700}
.g100-crumbs a{display:inline-flex; align-items:center; min-height:44px; padding:0 2px; color:var(--brand); font-weight:700}
.g100-crumbs li[aria-current="page"]{color:var(--ink2); font-weight:700; min-height:44px}
.g100-crumbs .gc-h{margin-right:4px}
@media (max-width:600px){ .g100-crumbs ol{flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; scrollbar-width:thin; overscroll-behavior-x:contain} .g100-crumbs li{flex:none; overflow-wrap:normal} }

/* ---------- Link tiles (looks, Nov 10, 2026) ----------
   the owner: "links look like plain lists of links ... make them graphical / 3D-looking buttons or cards that match the whole website."
   ONE pattern: class "g100-linktiles" on a ul/ol. site.js adds it automatically to qualifying lists (every item is one link,
   not a sources list, not in the header/footer/menu) and sets each item's emoji bubble (data-lt-ico). Opt in: add the class yourself.
   Opt out: class "g100-plainlinks" or data-lt="off" on the list or a parent. No markup change inside the items (keeps the Spanish
   page translations working): the bubble and arrow are pseudo-elements; the whole tile is clickable through a stretched a::after. */
:root{ --rose:#B4235A; --rose-soft:#FCE4EE }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --rose:#FF8FB8; --rose-soft:#3D1A2A } }
:root[data-theme="dark"]{ --rose:#FF8FB8; --rose-soft:#3D1A2A }
:is(ul,ol).g100-linktiles.g100-linktiles{list-style:none; padding:0; margin:8px 0 6px; display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); columns:auto; counter-reset:lt; line-height:1.35; padding-left:0!important}
/* items stay display:block with the link inline (the Spanish page translation keys depend on it) */
:where(.g100-linktiles > li){display:block}
.g100-linktiles > li{--lt-a:var(--brand); --lt-s:var(--brand-soft); position:relative; counter-increment:lt; min-width:0; min-height:62px; margin:0; padding:19px 40px 19px 66px; line-height:1.35;
  border-radius:18px; border:2px solid color-mix(in srgb, var(--lt-a) 28%, var(--line)); color:var(--ink2); font-size:.94rem; overflow-wrap:anywhere;
  background:linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--lt-s) 70%, var(--card)) 100%);
  box-shadow:0 4px 0 color-mix(in srgb, var(--lt-a) 38%, var(--line)), 0 10px 22px rgba(30,29,107,.09);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.g100-linktiles > li:nth-child(5n+2){--lt-a:var(--teal); --lt-s:var(--teal-soft)}
.g100-linktiles > li:nth-child(5n+3){--lt-a:var(--gold-deep); --lt-s:var(--gold-soft)}
.g100-linktiles > li:nth-child(5n+4){--lt-a:var(--rose); --lt-s:var(--rose-soft)}
.g100-linktiles > li:nth-child(5n+5){--lt-a:var(--good); --lt-s:var(--good-soft)}
.g100-linktiles > li::before{content:attr(data-lt-ico); content:attr(data-lt-ico) / ""; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:42px; height:42px; display:grid; place-items:center;
  border-radius:13px; background:var(--lt-s); font-size:1.35rem; line-height:1; box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--lt-a) 30%, transparent), 0 2px 6px rgba(30,29,107,.10)}
.g100-linktiles > li.lt-own::before{content:none}
.g100-linktiles > li::after{content:"→"; content:"→" / ""; position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--lt-a); font-weight:800; font-size:1.15rem; line-height:1; transition:transform .15s ease}
.g100-linktiles > li.lt-in::after{content:"↓"; content:"↓" / ""}
.g100-linktiles > li.lt-out::after{content:"↗"; content:"↗" / ""}
.g100-linktiles > li > a{color:var(--ink); font-weight:700; font-size:1.04rem; text-decoration:none; min-width:0}
.g100-linktiles > li > a::after{content:""; position:absolute; inset:-2px; border-radius:18px; z-index:1}
.g100-linktiles > li.lt-own::first-letter{float:left; margin:-9px 14px -9px -54px; padding:8px 7px; text-align:center; border-radius:13px; background:var(--lt-s); font-size:1.35rem; line-height:26px; box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--lt-a) 30%, transparent)}
.g100-linktiles > li.lt-desc{padding-top:12px; padding-bottom:12px}
.g100-linktiles > li.lt-desc.lt-own::first-letter{margin-top:-8px}
.g100-linktiles > li.lt-desc::before{top:10px; transform:none}
.g100-linktiles > li.lt-desc > a{font-size:1rem}
ol.g100-linktiles > li > a::before{content:counter(lt) ". "; content:counter(lt) ". " / ""; color:var(--lt-a)}
ol.g100-linktiles > li.lt-own > a::before{content:none}
.g100-linktiles > li:hover{transform:translateY(-3px); border-color:var(--lt-a); box-shadow:0 7px 0 color-mix(in srgb, var(--lt-a) 45%, var(--line)), 0 16px 30px rgba(30,29,107,.16)}
.g100-linktiles > li:hover::after{transform:translate(3px,-50%)}
.g100-linktiles > li.lt-in:hover::after{transform:translate(0,-40%)}
.g100-linktiles > li:active{transform:translateY(3px); box-shadow:0 1px 0 color-mix(in srgb, var(--lt-a) 45%, var(--line)), 0 4px 10px rgba(30,29,107,.12)}
.g100-linktiles > li > a:focus-visible{outline:none}
.g100-linktiles > li > a:focus-visible::after{outline:3px solid var(--brand); outline-offset:3px; box-shadow:0 0 0 7px var(--gold)}
.g100-linktiles > li[aria-current="page"], .g100-linktiles > li:has(> a[aria-current="page"]){border-color:var(--gold); border-style:solid}
@media (max-width:440px){ :is(ul,ol).g100-linktiles.g100-linktiles{grid-template-columns:minmax(0,1fr); gap:10px} }
@media (prefers-reduced-motion:reduce){ .g100-linktiles > li, .g100-linktiles > li::after{transition:none} .g100-linktiles > li:hover, .g100-linktiles > li:active{transform:none} .g100-linktiles > li:hover::after{transform:translateY(-50%)} }
@media (forced-colors:active){ .g100-linktiles > li{border:2px solid LinkText} }
@media print{ :is(ul,ol).g100-linktiles.g100-linktiles{display:block; padding-left:1.3em; list-style:disc} .g100-linktiles > li{display:list-item; padding:0; min-height:0; border:0; box-shadow:none; background:none} .g100-linktiles > li::before, .g100-linktiles > li::after{content:none} }
/* the "On this page" box that holds a tile list: a soft card */
nav.g100-lt-box{background:color-mix(in srgb, var(--brand-soft) 45%, var(--card)); border:1px solid var(--line); border-radius:22px; padding:14px 16px 16px}
nav.g100-lt-box > b:first-child, nav.g100-lt-box > h2:first-child, nav.g100-lt-box > h3:first-child{display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:800; font-size:1.15rem; color:var(--ink)}
nav.g100-lt-box > b:first-child::before{content:"🧭"; content:"🧭" / ""}

/* sources and citations stay plain, readable links (tidied) */
:is(ul,ol):is(.sources,.srclist,[class*="-src"],[class*="sources"]), .sources :is(ul,ol){overflow-wrap:anywhere; font-size:.95rem; line-height:1.5}
:is(ul,ol):is(.sources,.srclist,[class*="-src"],[class*="sources"]) li::marker, .sources :is(ul,ol) li::marker{color:var(--ink2)}
:is(ul,ol):is(.sources,.srclist,[class*="-src"],[class*="sources"]) a, .sources :is(ul,ol) a{text-underline-offset:2px; text-decoration-thickness:1px}

/* section headings: a short colored accent bar (added by site.js only to plain h2s on content pages) */
h2.g100-h2bar::after{content:""; display:block; width:64px; height:5px; margin-top:.32em; border-radius:999px; background:linear-gradient(90deg, var(--gold), var(--teal))}
@media print{ h2.g100-h2bar::after{content:none} }

/* ---------- Footer logo no longer runs into the "Learn" column (the owner, Nov 10: chess/play.html) ---------- */
footer.foot .cols > *{min-width:0}
footer.foot .brand{flex-wrap:wrap; gap:8px 10px; margin-right:0; max-width:100%}
footer.foot .brand .logo{width:72px; height:66px}
footer.foot .brand .word b{font-size:2.1rem}
footer.foot .brand .word small{font-size:.78rem; letter-spacing:.42em}
footer.foot li{overflow-wrap:anywhere}
/* room at the very bottom so the floating 🎧 Focus sounds / beta / book buttons never cover the last footer line */
footer.foot .base{padding-bottom:calc(22px + 64px + env(safe-area-inset-bottom,0px))}
/* tablets (701-900px): the brand + blurb take a full row above the link columns (the first column was too narrow) */
@media (min-width:701px) and (max-width:900px){
  footer.foot .cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  footer.foot .cols > :first-child{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px}
  footer.foot .cols > :first-child p{margin-top:0!important; max-width:52ch!important}
}
/* in-page links (On this page tiles, #anchors) land below the sticky header, not under it */
html{scroll-padding-top:calc(var(--g100-hdr, 0px) + 14px)}
/* "On this page" link rows (nav > a): jump chips (site.js adds .g100-jumpchips) */
nav.g100-jumpchips.g100-jumpchips{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
nav.g100-jumpchips.g100-jumpchips > a{--lt-a:var(--brand); --lt-s:var(--brand-soft); position:relative; display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:5px 14px 5px 6px; border-radius:999px;
  border:2px solid color-mix(in srgb, var(--lt-a) 30%, var(--line)); background:linear-gradient(180deg, var(--card), color-mix(in srgb, var(--lt-s) 70%, var(--card))); color:var(--ink); font-weight:700; font-size:.95rem; line-height:1.2; text-decoration:none;
  box-shadow:0 3px 0 color-mix(in srgb, var(--lt-a) 38%, var(--line)), 0 6px 14px rgba(30,29,107,.08); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
nav.g100-jumpchips > a.lt-own{padding-left:14px}
nav.g100-jumpchips > a::before{content:attr(data-lt-ico); content:attr(data-lt-ico) / ""; display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; background:var(--lt-s); font-size:1.05rem; box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--lt-a) 30%, transparent)}
nav.g100-jumpchips > a.lt-own::before{content:none}
nav.g100-jumpchips > a:nth-of-type(5n+2){--lt-a:var(--teal); --lt-s:var(--teal-soft)}
nav.g100-jumpchips > a:nth-of-type(5n+3){--lt-a:var(--gold-deep); --lt-s:var(--gold-soft)}
nav.g100-jumpchips > a:nth-of-type(5n+4){--lt-a:var(--rose); --lt-s:var(--rose-soft)}
nav.g100-jumpchips > a:nth-of-type(5n+5){--lt-a:var(--good); --lt-s:var(--good-soft)}
nav.g100-jumpchips > a:hover{transform:translateY(-2px); border-color:var(--lt-a); box-shadow:0 5px 0 color-mix(in srgb, var(--lt-a) 45%, var(--line)), 0 10px 20px rgba(30,29,107,.14)}
nav.g100-jumpchips > a:active{transform:translateY(2px); box-shadow:0 1px 0 color-mix(in srgb, var(--lt-a) 45%, var(--line))}
nav.g100-jumpchips > a:focus-visible{outline:3px solid var(--brand); outline-offset:2px; box-shadow:0 0 0 6px var(--gold)}
@media (max-width:440px){ nav.g100-jumpchips > a{flex:1 1 calc(50% - 5px); min-width:0; padding-right:10px} }
@media (prefers-reduced-motion:reduce){ nav.g100-jumpchips > a{transition:none} nav.g100-jumpchips > a:hover, nav.g100-jumpchips > a:active{transform:none} }
@media print{ nav.g100-jumpchips{display:none} }
/* numbered lesson lists: the number sits in the bubble */
ol.g100-linktiles.lt-num > li::before{content:counter(lt); content:counter(lt) / ""; font-family:var(--display); font-weight:800; font-size:1.3rem; color:var(--lt-a)}
ol.g100-linktiles.lt-num > li > a::before{content:none}

/* Nov 10, 2026 (rule 155 N4): tag for tools and teacher courses on the library pages */
.b-tool{background:var(--teal-soft); color:var(--teal); border:1px solid var(--teal)}

/* ===== Polish pass, Nov 11, 2026 (rule 174): footer, tabs, buttons, links. Additive; motion stops with "reduce motion" or data-motion="off". ===== */
@keyframes g100-band{to{background-position:200% 0}}
@keyframes g100-twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes g100-glow{0%{box-shadow:0 4px 0 rgba(143,92,8,.55),0 0 0 0 rgba(242,169,59,.55)}70%{box-shadow:0 4px 0 rgba(143,92,8,.55),0 0 0 16px rgba(242,169,59,0)}100%{box-shadow:0 4px 0 rgba(143,92,8,.55),0 0 0 0 rgba(242,169,59,0)}}
@keyframes g100-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* --- footer: night-sky panel with a moving gold band --- */
footer.foot{position:relative; margin-top:56px; border-top:0; border-radius:32px 32px 0 0; overflow:hidden; color:#E9E9FB; isolation:isolate;
  background:radial-gradient(1100px 360px at 10% -12%, rgba(242,169,59,.20), transparent 60%), radial-gradient(900px 420px at 96% -4%, rgba(124,121,255,.34), transparent 62%), linear-gradient(180deg,#1E1D6B 0%,#14143F 100%)}
footer.foot::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; background:linear-gradient(90deg,#F2A93B,#FFD98A,#8E8BFF,#5ED3B8,#F2A93B,#FFD98A,#8E8BFF,#5ED3B8,#F2A93B); background-size:200% 100%}
footer.foot::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:radial-gradient(2px 2px at 8% 22%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 23% 64%,#FFD98A 50%,transparent 51%),radial-gradient(2px 2px at 41% 14%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 57% 78%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 72% 30%,#FFD98A 50%,transparent 51%),radial-gradient(1.5px 1.5px at 86% 58%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 94% 18%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 33% 88%,#fff 50%,transparent 51%)}
:root:not([data-motion="off"]) footer.foot::before{animation:g100-band 10s linear infinite}
:root:not([data-motion="off"]) footer.foot::after{animation:g100-twinkle 5s ease-in-out infinite}
footer.foot .cols{gap:18px; padding-block:44px 22px; align-items:start}
footer.foot .cols > div:first-child p{color:#CFCEF3}
footer.foot .brand{text-decoration:none}
footer.foot .brand .logo{background:#fff; border-radius:22px; padding:5px; box-shadow:0 8px 22px rgba(0,0,0,.35); transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
footer.foot .brand:hover .logo,footer.foot .brand:focus-visible .logo{transform:rotate(-6deg) scale(1.06)}
footer.foot .brand .word b{color:#fff} footer.foot .brand .word b span{color:#F6BE5E} footer.foot .brand .word small{color:#CFCEF3}
footer.foot .cols > div:not(:first-child){background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:16px 18px 12px; transition:transform .2s ease, background .2s ease, border-color .2s ease}
footer.foot .cols > div:not(:first-child):hover,footer.foot .cols > div:not(:first-child):focus-within{background:rgba(255,255,255,.11); border-color:rgba(255,217,138,.55); transform:translateY(-3px)}
footer.foot h4{color:#FFD98A; font-size:1.12rem; display:flex; align-items:center; gap:8px; padding-bottom:8px; margin-bottom:6px; border-bottom:2px solid rgba(255,217,138,.28)}
footer.foot .cols > div:nth-child(2) h4::before{content:"📚"} footer.foot .cols > div:nth-child(3) h4::before{content:"🤝"} footer.foot .cols > div:nth-child(4) h4::before{content:"🏢"} footer.foot .cols > div:nth-child(5) h4::before{content:"⚖️"}
footer.foot ul{display:grid; gap:0; margin:0}
footer.foot li a{display:inline-flex; align-items:center; min-height:40px; padding:3px 0; color:#E4E4FA; font-weight:600; text-decoration:none; transition:color .15s ease}
footer.foot li a::before{content:"→"; display:inline-block; width:0; opacity:0; overflow:hidden; color:#FFD98A; font-weight:800; transition:width .2s ease, opacity .2s ease, margin .2s ease}
footer.foot li a:hover,footer.foot li a:focus-visible{color:#fff; text-decoration:underline; text-decoration-color:#FFD98A; text-underline-offset:4px}
footer.foot li a:hover::before,footer.foot li a:focus-visible::before{width:1.1em; opacity:1; margin-right:2px}
footer.foot a:focus-visible,footer.foot button:focus-visible{outline:3px solid #FFD98A; outline-offset:3px; border-radius:8px}
footer.foot .base{border-top:1px solid rgba(255,255,255,.16); color:#C4C3EE; align-items:center}
footer.foot .base a{color:#fff; font-weight:700}
footer.foot .base .g100-chip{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; border:1.5px solid rgba(255,217,138,.6); color:#FFE7B3; font-weight:700; background:rgba(242,169,59,.12)}
footer.foot .g100-totop{display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-left:auto; padding:6px 16px; border-radius:999px; border:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; font:700 .95rem var(--body); cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .15s ease}
footer.foot .g100-totop:hover{background:rgba(255,255,255,.16); border-color:#FFD98A; transform:translateY(-2px)}
:root:not([data-motion="off"]) footer.foot .g100-totop:hover .g100-up{animation:g100-bob .7s ease-in-out infinite}
footer.foot .g100-up{display:inline-block}
@media (max-width:620px){ footer.foot{border-radius:24px 24px 0 0} footer.foot .cols{grid-template-columns:1fr 1fr; gap:12px} footer.foot .cols > div:first-child{grid-column:1 / -1} footer.foot .cols > div:not(:first-child){padding:14px 12px 8px} footer.foot .g100-totop{margin-left:0} }
@media (max-width:360px){ footer.foot .cols{grid-template-columns:1fr} }
@media (forced-colors:active){ footer.foot{background:Canvas; color:CanvasText} footer.foot::before,footer.foot::after{display:none} }
@media print{ footer.foot{background:none; color:#000; border-radius:0} footer.foot::before,footer.foot::after{display:none} footer.foot .g100-totop{display:none} }

/* --- top tabs: a gold bar grows under the tab --- */
.gn-tb,nav.main a.gn-tl{position:relative; transition:background .18s ease, color .18s ease, transform .18s ease}
.gn-tb::after,nav.main a.gn-tl::after{content:""; position:absolute; left:12px; right:12px; bottom:3px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--gold),#FFD98A); transform:scaleX(0); transform-origin:50% 50%; transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.gn-tb:hover::after,.gn-tb:focus-visible::after,nav.main a.gn-tl:hover::after,nav.main a.gn-tl:focus-visible::after,.gn-tb[aria-expanded="true"]::after{transform:scaleX(1)}
.gn-tb.gn-cur,nav.main a.gn-tl.gn-cur{box-shadow:none} .gn-tb.gn-cur::after,nav.main a.gn-tl.gn-cur::after{transform:scaleX(1)}
.gn-tb:hover,nav.main a.gn-tl:hover{transform:translateY(-1px)} .gn-tb:active,nav.main a.gn-tl:active{transform:translateY(1px)}
nav.main .gn-g a,nav.main .gn-sec a{transition:background .15s ease, padding-left .15s ease}
nav.main .gn-g a:hover,nav.main .gn-g a:focus-visible{padding-left:12px}

/* --- buttons: raised edge, light sweep, press --- */
.btn,.btn.gold,.btn.ghost{background-image:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%); background-size:260% 100%; background-position:130% 0; background-repeat:no-repeat;
  transition:background-position .65s ease, transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease}
.btn{box-shadow:0 4px 0 rgba(20,19,80,.45), 0 12px 22px rgba(30,29,107,.18)}
.btn.gold{box-shadow:0 4px 0 rgba(143,92,8,.55), 0 12px 22px rgba(242,169,59,.28)}
.btn.ghost{box-shadow:0 4px 0 var(--line), 0 10px 18px rgba(30,29,107,.08)}
.btn:hover,.btn:focus-visible{background-position:-40% 0; transform:translateY(-2px); filter:saturate(1.08)}
.btn.ghost:hover{border-color:var(--brand)}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(20,19,80,.45), 0 4px 10px rgba(30,29,107,.16)}
.btn:focus-visible,.pill:focus-visible,.tile:focus-visible,.card.link:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.btn[disabled],.btn[aria-disabled="true"]{transform:none; filter:none; background-image:none}
:root:not([data-motion="off"]) .btn.gold:not([disabled]){animation:g100-glow 2.2s ease-out 1s 3}

/* --- pills, tiles, cards --- */
.pill{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease}
.pill:hover{transform:translateY(-2px); border-color:var(--brand); box-shadow:0 4px 0 var(--line)} .pill:active{transform:translateY(1px); box-shadow:none}
.tile{box-shadow:0 4px 0 var(--line); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.tile:hover{box-shadow:0 8px 0 var(--brand-soft), var(--shadow)} .tile:active{transform:translateY(2px); box-shadow:0 1px 0 var(--line)}
.tile .ico,.card.link .ico{display:inline-block; transition:transform .28s cubic-bezier(.3,1.7,.5,1)}
.tile:hover .ico,.tile:focus-visible .ico,.card.link:hover .ico,.card.link:focus-visible .ico{transform:translateY(-4px) scale(1.15) rotate(-6deg)}

/* --- links in the text: thicker underline, highlighter sweep, mark for a new tab --- */
main :is(p,li,td,dd,figcaption) a:not([class]){text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--brand) 45%, transparent); background:linear-gradient(var(--gold-soft),var(--gold-soft)) 0 100% / 0% 42% no-repeat; border-radius:3px; transition:background-size .22s ease, text-decoration-color .15s ease}
main :is(p,li,td,dd,figcaption) a:not([class]):hover,main :is(p,li,td,dd,figcaption) a:not([class]):focus-visible{background-size:100% 42%; text-decoration-color:var(--gold-deep)}
main :is(p,li,td,dd) a[target="_blank"]:not([class])::after{content:"↗"; display:inline-block; margin-left:2px; font-size:.78em; font-weight:800; text-decoration:none; transition:transform .15s ease}
main :is(p,li,td,dd) a[target="_blank"]:not([class]):hover::after{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){ footer.foot::before,footer.foot::after,.btn.gold{animation:none!important} .btn,.pill,.tile,.gn-tb,nav.main a.gn-tl{transform:none!important} }

/* ===== Polish pass 2, Nov 11 (rule 202): motion you can see on a phone, where there is no hover ===== */
@keyframes g100-sheen{0%{background-position:130% 0}60%,100%{background-position:-40% 0}}
@keyframes g100-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
body > header{position:relative}
body > header::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:4px; background:linear-gradient(90deg,#F2A93B,#FFD98A,#8E8BFF,#5ED3B8,#F2A93B,#FFD98A,#8E8BFF,#5ED3B8,#F2A93B); background-size:200% 100%; pointer-events:none}
:root:not([data-motion="off"]) body > header::after{animation:g100-band 12s linear infinite}
header .pill{background-image:linear-gradient(180deg,var(--card),var(--bg2)); box-shadow:0 3px 0 var(--line), 0 6px 14px rgba(30,29,107,.08); transition:transform .12s ease, box-shadow .12s ease, border-color .15s ease}
header .pill:active{transform:translateY(3px); box-shadow:0 0 0 var(--line)}
header .pill.menu-btn{background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.35) 50%,transparent 68%) 130% 0 / 260% 100% no-repeat, var(--brand); color:var(--brand-ink); border-color:var(--brand); box-shadow:0 3px 0 rgba(20,19,80,.5), 0 8px 16px rgba(30,29,107,.22)}
:root:not([data-motion="off"]) header .pill.menu-btn{animation:g100-sheen 3.2s ease-in-out 1.2s 3}
.btn:active,.tile:active,.card.link:active,.pill:active{transition-duration:.05s}
.card.link:active{transform:translateY(2px) scale(.99)}
main h2{position:relative}
html.g100-anim main h2::after{content:""; display:block; width:64px; height:5px; margin-top:8px; border-radius:5px; background:linear-gradient(90deg,var(--gold),#FFD98A); transform:scaleX(0); transform-origin:0 50%}
html.g100-anim main h2.g100-in::after{animation:g100-line .7s cubic-bezier(.3,1.3,.5,1) .15s forwards}
html.g100-anim .g100-rv{opacity:0; transform:translateY(18px) scale(.98)}
html.g100-anim .g100-rv.g100-in{opacity:1; transform:none; transition:opacity .45s ease, transform .5s cubic-bezier(.3,1.3,.5,1)}
html.g100-anim .g100-rv.g100-in .ico{animation:g100-bob .7s ease-in-out .25s 1}
@media (prefers-reduced-motion:reduce){ html.g100-anim .g100-rv{opacity:1!important; transform:none!important} html.g100-anim main h2::after{transform:none!important; animation:none!important} body > header::after,header .pill.menu-btn{animation:none!important} }
@media print{ html.g100-anim .g100-rv{opacity:1!important; transform:none!important} body > header::after{display:none} }
@media (forced-colors:active){ body > header::after{display:none} }

/* ===== Nothing scrolls sideways (owner, Nov 11, 2026): breadcrumb wraps, Teacher Center chips wrap and fold, wide tables become cards on small screens. JS half: end of site.js. ===== */
@media (max-width:600px){ .g100-crumbs ol{flex-wrap:wrap!important; overflow-x:visible!important; white-space:normal!important} .g100-crumbs li{flex:0 1 auto!important; overflow-wrap:anywhere!important} .g100-crumbs{margin-bottom:-8px} }
nav.tc-sub.tc-sub{flex-wrap:wrap!important; overflow-x:visible!important}
nav.tc-sub.tc-sub .pill{white-space:normal}
nav.tc-sub.g1-fold{max-height:116px; overflow:hidden!important}
.g1-foldbtn{margin-top:6px}
@media (max-width:1100px){ .tc-tw table{min-width:0!important} }
/* Nov 12 (iphone-a): also a phone held sideways (up to 950 px wide, 520 px tall): tables become cards there too */
@media (max-width:820px), (orientation:landscape) and (max-height:520px) and (max-width:950px){
  .tc-tw table,.tw table,.sv-scroll table,.st-scroll table,.scroll table,.of-scroll table{min-width:0!important}
  .tc-tw td,.tc-tw td:first-child{min-width:0!important}
  table.g1-stack{display:block; min-width:0!important; width:100%!important; border:0!important}
  table.g1-stack thead,table.g1-stack tr.g1-headrow{position:absolute!important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
  table.g1-stack tbody,table.g1-stack tfoot{display:block}
  table.g1-stack tr{display:block; border:1px solid var(--line); border-radius:14px; margin:0 0 10px; padding:8px 12px; background:var(--card)}
  table.g1-stack td,table.g1-stack tbody th{display:block; min-width:0!important; width:auto!important; max-width:100%; border:0!important; padding:4px 0!important; text-align:left!important; overflow-wrap:anywhere}
  table.g1-stack td[data-th]::before{content:attr(data-th); display:block; font-weight:700; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink2,var(--muted))}
  .g1-swipehint{display:none!important}
  .g1-stackwrap{overflow-x:visible!important; border:0!important; background:transparent!important; max-width:100%}
}
@media print{ nav.tc-sub.g1-fold{max-height:none} .g1-foldbtn{display:none!important} }

/* ===== Accessibility pass, Nov 11, 2026 (WCAG 2.2 AA; axe-core + scripted checks on 60 pages). Additive: only what a failing check needed; the look stays. ===== */
/* 1.4.3 contrast: "Tool" badge text 4.42:1 -> about 5.4:1 (light); dark mode gets lighter, so it stays above 4.5:1 */
.b-tool,.badge.b-tool{color:color-mix(in srgb,var(--teal) 85%,var(--ink))}
/* 1.4.3 contrast (dark mode): the Grade 6 "Quick review" button keeps its light purple fill, so its text turns dark */
main .g6pair a.g6btn.q{color:var(--brand-ink)}
/* 1.4.3 contrast (dark mode): library tabs that keep a fixed light fill (#E4E4F7) get dark text, as in light mode */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) main a[style*="background:#E4E4F7"]{color:#16163A!important} }
:root[data-theme="dark"] main a[style*="background:#E4E4F7"]{color:#16163A!important}
/* 2.5.8 target size + house rule 8 (44 px): search button, breadcrumb links, footer base links, open/close rows */
.g1s-form .g1s-go{min-height:44px; min-width:44px}
.g100-crumbs a{min-width:44px; justify-content:center}
footer.foot .base a{display:inline-flex; align-items:center; min-height:44px}
main details > summary{min-height:40px; padding-block:4px; box-sizing:border-box}
/* "?" help buttons keep their 30 px look; an invisible ring makes the tap area 44 px */
.help > button{position:relative}
.help > button::after{content:""; position:absolute; inset:-7px; border-radius:50%}
/* link lists: a link that is the whole list item (site.js marks it .g100-tap) gets a 44 px tall tap area */
main li > a.g100-tap{display:inline-flex; align-items:center; min-height:44px}
/* footnote links like [2] in tables: at least 24 x 24 px (2.5.8) */
main a[href^="#src-"]{display:inline-block; min-width:24px; min-height:24px; text-align:center}
/* 1.4.3 contrast: the small "TM" mark in the footer logo was dark text on the dark footer (light mode) */
footer.foot .brand .tm{color:#E9E9FB}
/* 2.4.7 focus visible: the "Home" pill on the home page already wears a gold ring, so its focus ring must look different */
header.top .home-btn[aria-current="page"]:focus-visible{outline:3px solid var(--brand); outline-offset:3px; box-shadow:0 0 0 7px var(--gold)}

/* Nov 11, 2026: room under the page on phones so the floating Board and headphone buttons never cover the last lines */
@media (max-width:820px){ body{ padding-bottom:76px } }

/* ===== Nov 12, 2026 (job iphone-a): iPhone layout fixes =====
   1. Phones (and any phone held sideways): the site header scrolls away with the page instead of staying on top.
      Sticky, it covered 30 to 47% of an iPhone screen (285 px of 667 on iPhone SE, 185 of 390 sideways).
      Wider screens (tablets, laptops, smart boards) keep the sticky header. site.js sets --g100-hdr to 0 when not sticky. */
@media (max-width:700px), (orientation:landscape) and (max-height:520px) and (max-width:950px){
  header.top{position:relative}
}
/* 2. (iphone-a) no text under 12 px on phones: the "for students · families · teachers · schools" line and the menu's small group labels */
@media (max-width:980px){ .brand .word .g100-for{font-size:12px} }
.gn-rh,.gn-sh{font-size:max(12px,.72rem)}
/* Nov 12 (fix-misc): tap targets at least 44 px (WCAG 2.5.5 / site rule) without changing the desktop look.
   Footer links grow from 40 to 44 px tall; the small negative margin keeps the same spacing between lines.
   The "See this year's plans" link in the top note: a 44 px tall box, with negative margins so the strip keeps its height. */
footer.foot a:not(.brand){display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box}
footer.foot li a{min-height:44px; margin-block:-2px}
.note a{display:inline-flex; align-items:center; min-height:44px; margin-block:-13px; vertical-align:middle}

/* Nov 14, 2026 (C4): 44 px taps + 16 px inputs on phones */
main details > summary{min-height:44px}
.help>button{position:relative}.help>button::after{content:"";position:absolute;inset:-7px}
#hkStage input,#hkStage select,#hkStage textarea{font-size:16px}