/* Pearl-educate UI tokens, from the Pearl-educate UI Specification (23 Oct 2026).
   Ternah navy and Hanken Grotesk set the rules; six accents carry subjects and moments.
   Every accent has one approved text colour: navy on all of them except cobalt, which takes white. */
@font-face{font-family:'Hanken Grotesk';font-weight:100 900;font-style:normal;font-display:swap;src:url("../fonts/HankenGrotesk-latin.1183e3526008.woff2") format('woff2')}
:root{
  --paper:#F4F3EF;--surface:#FFFFFF;--ink:#15202E;--muted:#5B6472;
  --border:#E4E2DB;--border-2:#D2CFC6;
  --navy:#14233A;--navy-2:#22385A;--icon-bg:#EEF1F6;--nav-text:#C9D2DE;
  --coral:#EC6A4B;--cobalt:#3B6EE0;--meadow:#2E9E6B;--sun:#F7C32E;--blossom:#F07B9F;--lilac:#A98BE6;
  --coral-ink:#B8371F;--cobalt-ink:#2B54B8;--meadow-ink:#1F7A50;
  --warn:#8A4A0E;--warn-bg:#FBF0E2;
  --font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --r-btn:999px;--r-card:20px;--r-tile:24px;--r-chip:999px;--r-input:12px;--r-pill:999px;--r-sticker:16px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;--sp-24:96px;
  --shadow-sticker:0 6px 16px rgba(20,35,58,.18);
  --focus:0 0 0 2px var(--surface),0 0 0 5px rgba(59,110,224,.45);
  --maxw:1200px;--gutter:24px;--ease:cubic-bezier(.22,.61,.36,1);
  --warm:#E6E2D8;
  /* Older names used across the app, kept as aliases so every page follows the tokens above. */
  --bg:var(--paper);--nav:var(--navy);--nav-active:var(--navy-2);--border-hover:var(--border-2);
  --ok:var(--meadow-ink);--ok-bg:#E3F3EB;--bad:var(--coral-ink);--bad-bg:#FCE9E4;
  --sp-5:20px;--sp-7:28px;--sp-10:40px;--r-photo:var(--r-tile);--placeholder:#ECEAE3;--photo:var(--warm);
  --shadow-lift:0 1px 0 var(--border);
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--font);font-synthesis:style}
h1,h2,h3{font-weight:600;line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:1.9rem}h2{font-size:1.3rem}h3{font-size:1.05rem}
a{color:var(--nav);text-underline-offset:3px}a:hover{color:var(--nav-active)}
p{margin:0 0 1em}
.muted{color:var(--muted)}.small{font-size:.875rem}.right{text-align:right}.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
/* Top bar (spec: 66px, paper, 1px bottom border, links 15px/500 muted, 28px apart, small primary pill) */
.topbar{background:var(--paper);border-bottom:1px solid var(--border);position:relative;z-index:20}
.topbar-in{display:flex;align-items:center;gap:var(--sp-8);min-height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none;font-weight:600;font-size:18px}
.brand small{color:var(--muted);font-weight:500;font-size:11px;margin-left:6px}
.wordmark{display:grid;line-height:1}
.wordmark b{font-weight:600;font-size:21px;letter-spacing:-.02em;color:var(--navy)}
.wordmark small{margin:3px 0 0;font-size:9.5px;font-weight:500;letter-spacing:.24em;color:var(--muted)}
.brand-rev .wordmark b{color:#fff}.brand-rev .wordmark small{color:var(--nav-text)}
.brand-rev .logo-mark circle:nth-of-type(4){fill:#fff}.brand-rev .logo-mark circle:nth-of-type(5){fill:var(--navy)}
.main-nav{display:flex;gap:var(--sp-8);flex:1;justify-content:center}
.topbar a.nav{color:var(--muted);font-size:15px;font-weight:500;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.topbar a.nav:hover{color:var(--navy)}
.topbar a.nav.on{color:var(--navy);border-bottom-color:var(--sun)}
.nav-actions{display:flex;align-items:center;gap:var(--sp-6)}
.nav-actions .btn.sm{min-height:40px;white-space:nowrap}
.brand{flex:none}
.nav-actions .count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--coral);color:var(--navy);font-size:12px;font-weight:700}
.topbar form{display:inline}
.nav-menu{display:none;margin-left:auto}
.nav-menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-pill);border:1px solid var(--border-2);background:var(--surface);color:var(--navy)}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary .icon{width:22px;height:22px}
.nav-sheet{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--border);padding:var(--sp-2) max(var(--gutter),env(safe-area-inset-left,0px)) var(--sp-6);display:grid;gap:2px}
.nav-sheet a:not(.btn){display:block;padding:12px 0;font-size:17px;font-weight:500;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--border)}
.nav-sheet .btn{margin-top:var(--sp-4);width:100%}
.side .brand{color:#fff}.side .brand small{color:var(--nav-text)}
/* Bottom tab bar for signed-in students on phones (spec: Home, Courses, Review, Me) */
.tabs{display:none}
@media (max-width:860px){
  .main-nav{display:none}
  .nav-actions{margin-left:auto}
}
@media (max-width:600px){
  .nav-actions{display:none}
  .nav-menu{display:block}
  .wordmark{display:none}
  .tabs{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--border);padding:6px max(8px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px))}
  .tabs a,.tabs label{display:grid;justify-items:center;gap:2px;min-height:48px;padding-top:4px;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;cursor:pointer}
  .tabs a .icon,.tabs label .icon{width:24px;height:24px}
  .tabs a.on{color:var(--navy)}
  .tabs a.on .icon{color:var(--cobalt-ink)}
  body:has(.tabs){padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}
.icon{width:24px;height:24px;flex:none}
main{padding:28px 0 64px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-tile);padding:22px;margin-bottom:18px}
.tile:hover.link{border-color:var(--border-hover)}
.grid{display:grid;gap:18px}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat .label{color:var(--muted);font-size:.85rem}.stat .value{font-size:1.7rem;font-weight:600;font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1.5px solid var(--navy);background:var(--navy);color:#fff;border-radius:var(--r-btn);padding:10px 22px;font:600 15px/1.2 var(--font);cursor:pointer;text-decoration:none;transition:transform .15s var(--ease),background-color .15s var(--ease)}
.btn:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff;transform:translateY(-1px)}
.btn.ghost{background:var(--surface);color:var(--navy);border-color:var(--border-2)}.btn.ghost:hover{background:var(--surface);border-color:var(--navy);color:var(--navy)}
.btn.danger{background:var(--coral-ink);border-color:var(--coral-ink)}.btn.sm{min-height:36px;padding:6px 14px;font-size:14px}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.pill{display:inline-block;border-radius:var(--r-pill);padding:2px 10px;font-size:.78rem;font-weight:500;background:var(--icon-bg);color:var(--muted)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.bad{background:var(--bad-bg);color:var(--bad)}
label{display:block;font-weight:500;margin:14px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=date],input[type=search],select,textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--border-hover);border-radius:var(--r-input);background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(59,110,224,.25)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(59,110,224,.45);outline-offset:2px}
textarea{min-height:110px}
.helptext,.help{color:var(--muted);font-size:.85rem;margin-top:3px;display:block}
.errorlist{list-style:none;margin:4px 0;padding:0;color:var(--bad);font-size:.9rem}
.messages{list-style:none;padding:0;margin:0 0 18px}
.messages li{padding:12px 16px;border-radius:var(--r-input);background:var(--icon-bg);margin-bottom:8px}
.messages li.success{background:var(--ok-bg);color:var(--ok)}.messages li.error{background:var(--bad-bg);color:var(--bad)}.messages li.warning{background:var(--warn-bg);color:var(--warn)}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th{text-align:left;font-weight:500;color:var(--muted);font-size:.8rem;border-bottom:1px solid var(--border);padding:8px 10px}
td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}
tr:last-child td{border-bottom:0}
th.num{text-align:right}
.scroll{overflow-x:auto}
tfoot td{font-weight:600;border-top:2px solid var(--border-hover)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}
.hero{padding:36px 0 18px}.hero h1{font-size:2.4rem;max-width:18ch}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.console{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.side{background:var(--nav);color:var(--nav-text);padding:20px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.side .brand{display:block;padding:0 12px 16px}
.side a{display:block;color:var(--nav-text);text-decoration:none;padding:8px 12px;border-radius:var(--r-input);font-size:.93rem}
.side a:hover,.side a.on{background:var(--nav-active);color:#fff}
.side h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#8896aa;margin:18px 12px 6px;font-weight:500}
.console main{padding:28px 32px 64px}
.bar{height:8px;border-radius:var(--r-pill);background:var(--icon-bg);overflow:hidden}.bar>i{display:block;height:100%;background:var(--nav)}
.ok-text{color:var(--ok)}.bad-text{color:var(--bad)}
.lesson-list a{display:block;padding:8px 10px;border-radius:var(--r-input);text-decoration:none}.lesson-list a:hover,.lesson-list a.on{background:var(--icon-bg)}
.note{background:var(--icon-bg);border-radius:var(--r-input);padding:12px 16px;margin:12px 0;font-size:.93rem}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.principle{border-left:3px solid var(--nav);padding-left:12px;margin:10px 0;color:var(--muted);font-size:.9rem}
.console>main{min-width:0}  /* a wide table must not stretch the page */
.side-toggle,.side-open,.side-backdrop,.side-nav-head{display:none}
@media(max-width:820px){
  .console{grid-template-columns:1fr;grid-template-rows:auto 1fr}.console main{padding:20px 16px}.hero h1{font-size:1.8rem}
  /* Phones: a slim bar with a Menu button; the sidebar slides in from the left over the page */
  .side{position:sticky;top:0;z-index:30;height:auto;padding:10px 12px;overflow:visible}
  .side-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .side .brand{padding:0 4px}
  .side-toggle{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 16px;border-radius:var(--r-btn);border:1.5px solid rgba(255,255,255,.35);color:#fff;font-weight:600;font-size:.93rem;cursor:pointer}
  .side-open:focus-visible~.side-top .side-toggle{outline:3px solid rgba(255,255,255,.6);outline-offset:2px}
  .side-nav{position:fixed;top:0;bottom:0;left:0;z-index:50;width:75vw;background:var(--nav);padding:14px 12px 32px;
    overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
  .side-open:checked~.side-nav{transform:none;box-shadow:8px 0 24px rgba(10,18,32,.35)}
  .side-nav-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 12px 0}
  .side-close{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;font-size:18px;cursor:pointer;border:1.5px solid rgba(255,255,255,.35)}
  /* The quarter of the page left showing is dimmed and blurred, so the open menu is clearly in front */
  .side-backdrop{display:block;position:fixed;inset:0;z-index:45;background:rgba(10,18,32,.35);
    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
  .side-open:checked~.side-backdrop{opacity:1;pointer-events:auto}
  body:has(.side-open:checked){overflow:hidden}  /* the page behind stays still while the menu is open */
  /* Wide tables scroll on their own instead of pushing the whole page sideways */
  .console main table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media print{.topbar,.side,.btn{display:none}body{background:#fff}.tile{border:0}}

/* ---- Shared marketing pieces: large and on-navy buttons (Ternah components), site footer ---- */
.btn.lg{min-height:52px;padding:14px 28px;font-size:16px}
.btn.on-navy{background:#fff;color:var(--navy);border-color:#fff}.btn.on-navy:hover{background:var(--icon-bg);border-color:var(--icon-bg);color:var(--navy)}
.btn.ghost-navy{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}.btn.ghost-navy:hover{border-color:rgba(255,255,255,.6);background:transparent;color:#fff}
.site-foot{background:var(--nav);color:var(--nav-text);padding:56px 0 32px;border-top:1px solid rgba(255,255,255,.08)}
.site-foot .wrap{max-width:var(--maxw)}
.foot-cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.10)}
.site-foot p{font-size:15px;margin:12px 0 0;max-width:40ch}
.site-foot h4{color:#fff;font-size:15px;font-weight:600;margin:0 0 12px}
.site-foot a:not(.brand){display:block;color:var(--nav-text);text-decoration:none;font-size:15px;padding:4px 0}
.site-foot a:not(.brand):hover{color:#fff}
.site-foot .legal{font-size:14px;margin-top:24px;max-width:none}
.site-foot .legal a{display:inline;padding:0;text-decoration:underline}
@media(max-width:860px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media(max-width:600px){.foot-cols{grid-template-columns:1fr}}

/* ---- Lesson content blocks (REQ-08, 09, 18, 19, 26, 30), links (REQ-11), key terms (REQ-10), hints (REQ-32) ---- */
mark.term{background:var(--icon-bg);color:var(--nav);font-weight:600;padding:0 4px;border-radius:4px}
.lesson-text{max-width:68ch}
.links-back a{font-weight:500}.link-note{display:block;color:var(--muted);margin-top:4px}
.block{border:1px solid var(--border);border-radius:var(--r-tile);padding:22px;margin:22px 0;display:grid;gap:12px;background:var(--surface)}
.block>h2{margin:0;font-size:1.2rem}
.block p:last-child{margin-bottom:0}
.block-kind{font-size:.78rem;font-weight:500;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.block-prompt{background:var(--bg);border-radius:var(--r-input);padding:14px 16px}
.block-prompt .small{display:block;margin-bottom:4px}
.steps-reveal,.task-list{margin:0;padding-left:22px;display:grid;gap:10px}
.steps-reveal strong,.task-list strong{display:block}
.block-try,.block-bridge{border-left:3px solid var(--nav);padding:4px 0 4px 14px}
.block-try strong,.block-bridge strong{display:block;margin-bottom:4px}
.fade-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;counter-reset:f}
.fade-row li{background:var(--bg);border-radius:var(--r-input);padding:14px;position:relative}
.fade-row li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600}
.fade-label{display:block;font-size:.78rem;font-weight:600;color:var(--nav);margin-bottom:6px}
.example-grid,.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.example{border:1px solid var(--border);border-radius:var(--r-input);padding:14px;min-width:0}
.example h3{margin:0 0 6px;font-size:1rem}.example .pill{margin-bottom:8px}
.block-reveal{border:1px dashed var(--border-hover);border-radius:var(--r-input);padding:12px 16px}
.block-reveal summary{cursor:pointer;font-weight:500;color:var(--nav)}
.block-reveal[open] summary{margin-bottom:10px}
.compare-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.compare-notes strong{display:block;margin-bottom:4px}
.hints{margin:8px 0 4px}.hints ol{margin:4px 0 8px;padding-left:22px;color:var(--ink)}.hints-title{margin:0}
.item-row{border:1px solid var(--border);border-radius:var(--r-input);padding:4px 16px 14px;margin:12px 0}
.item-row legend{font-weight:600;padding:0 6px}
label.check{display:flex;gap:8px;align-items:center;font-weight:400}
a.block-kind{text-transform:none;letter-spacing:0;font-size:inherit;color:inherit;text-decoration:none;display:block}
@media(max-width:600px){.fade-row li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-14px;transform:translateX(-50%)}}
.block>.btn{justify-self:start}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---- Spec components shared across pages ---- */
/* Colour blocks: each accent with its one approved text colour (navy everywhere, white only on cobalt). */
.t-sun{background:var(--sun);color:var(--navy)}.t-coral{background:var(--coral);color:var(--navy)}
.t-meadow{background:var(--meadow);color:var(--navy)}.t-blossom{background:var(--blossom);color:var(--navy)}
.t-lilac{background:var(--lilac);color:var(--navy)}.t-cobalt{background:var(--cobalt);color:#fff}
.t-warm{background:var(--warm);color:var(--navy)}
/* Label / chip type: 12px, 600, uppercase, +0.06em */
.label{display:inline-block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.chip-label{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:var(--r-chip);border:1px solid var(--border);background:var(--surface);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
/* The accent word: one per screen, italic 600 with a sun underline at 82%-94% of the line box. */
.accent{font-style:italic;font-weight:600;background:linear-gradient(transparent 82%,var(--sun) 82%,var(--sun) 94%,transparent 94%);padding:0 .06em}
/* Sticker: 52px white square, radius 16, the only shadow in the system */
.sticker{position:absolute;width:52px;height:52px;border-radius:var(--r-sticker);background:var(--surface);color:var(--navy);display:grid;place-items:center;box-shadow:var(--shadow-sticker)}
.sticker .icon{width:26px;height:26px}
.verified{display:inline-flex;align-items:center;gap:3px;color:var(--meadow-ink);font-weight:600}
.verified .icon{width:15px;height:15px;stroke-width:2.4}
/* Course card: subject-coloured thumbnail, title 22/600, chips, price 20/700 tabular */
.course-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;color:var(--ink);text-decoration:none;transition:border-color .15s var(--ease),transform .15s var(--ease)}
.course-card:hover{border-color:var(--border-2);transform:translateY(-2px);color:var(--ink)}
.cc-thumb{position:relative;height:132px}
.cc-subject{position:absolute;left:12px;bottom:12px;padding:5px 12px;border-radius:var(--r-chip);background:var(--surface);color:var(--navy);font-size:12px;font-weight:600}
.cc-thumb .sticker{right:16px;top:16px;transform:rotate(7deg)}
.cc-body{padding:18px 20px 20px;display:grid;gap:10px;flex:1;align-content:start}
.cc-body h3{font-size:22px;line-height:1.15;margin:0;text-wrap:balance}
.cc-by{margin:0;font-size:14px;color:var(--muted)}
.cc-chips{display:flex;flex-wrap:wrap;gap:6px}
.cc-price{margin:4px 0 0;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cc-rating{font-size:14px;font-weight:500;color:var(--muted)}
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--sp-6)}
@media (max-width:600px){.course-grid{grid-template-columns:1fr;gap:var(--sp-4)}}
/* Small pearl drawing (partials/pearl.html) */
.pearl{flex:none;overflow:visible}
.pearl-body{fill:var(--surface);stroke:var(--navy);stroke-width:2.5}
.pearl-gloss{fill:none;stroke:var(--border-2);stroke-width:2.5;stroke-linecap:round}
.pearl-face{fill:var(--navy)}.pearl-smile{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round}
.pearl.is-goal .pearl-body{fill:var(--navy)}.pearl.is-goal .pearl-face{fill:var(--paper)}
.pearl.is-goal .pearl-smile{stroke:var(--paper)}.pearl.is-goal .pearl-gloss{stroke:var(--navy-2)}
.pearl.is-next .pearl-body{fill:none;stroke:var(--border-2);stroke-dasharray:4 4}
/* Subject filter chips (courses page): the chosen subject keeps a navy ring */
.subject-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--sp-4)}
.schip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:var(--r-chip);background:var(--surface);border:1px solid var(--border-2);color:var(--navy);font-size:14px;font-weight:600;text-decoration:none}
.schip i{width:12px;height:12px;border-radius:50%}
.schip:hover{border-color:var(--navy);color:var(--navy)}
.schip.on{border-color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
/* Sign-in and sign-up: form beside a photo on a flat colour block (photos hide on phones to save data) */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--sp-8);align-items:center;max-width:1000px;margin:var(--sp-6) auto}
.auth-form{margin:0;padding:32px}
.auth-form h1{font-size:clamp(28px,3.6vw,36px);letter-spacing:-.02em}
.auth-photo{border-radius:var(--r-tile);padding:18px 18px 0;display:grid;gap:14px;overflow:hidden}
.auth-photo .photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--r-tile) - 6px)}
.auth-caption{margin:0 0 18px;font-weight:600;font-size:16px;line-height:1.4}
@media (max-width:860px){.auth{grid-template-columns:1fr;max-width:560px}.auth-photo{display:none}}

/* Audience bar (above the nav, like Coursera's): Kids is live, Upskilling is coming soon */
.audience-bar{background:var(--navy)}
.audience-bar .wrap{display:flex;gap:var(--sp-6);min-height:36px;align-items:stretch}
.audience-bar a{display:inline-flex;align-items:center;gap:8px;color:var(--nav-text);font-size:13px;font-weight:600;text-decoration:none;border-bottom:3px solid transparent;padding-top:3px}
.audience-bar a:hover{color:#fff}
.audience-bar a.on{color:#fff;border-bottom-color:var(--sun)}
.soon{display:inline-block;padding:1px 7px;border-radius:var(--r-chip);background:var(--sun);color:var(--navy);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1.5}
.site-foot a .soon{margin-left:4px}

/* ---- Upskilling (grown-ups): Ternah's original look — off-white, navy, 12px controls, no kid accents ---- */
.theme-ternah{--r-btn:12px;--r-chip:12px}
.theme-ternah .topbar a.nav.on{border-bottom-color:var(--navy)}
.up{max-width:1080px;margin:var(--sp-8) auto var(--sp-16)}
.up-hero{max-width:760px}
.up-eyebrow{display:inline-block;padding:6px 12px;border-radius:12px;background:var(--icon-bg);color:var(--navy);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.up-hero h1{margin:20px 0 0;font-size:clamp(32px,4.6vw,52px);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.up-sub{margin:20px 0 0;font-size:18px;line-height:1.6;color:var(--muted);max-width:62ch}
.up-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--sp-8);align-items:start;margin-top:var(--sp-12)}
.up-tiles{display:grid;gap:var(--sp-4)}
.up-tile{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px 24px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;align-items:start}
.up-ic{grid-row:span 2;width:44px;height:44px;border-radius:12px;background:var(--icon-bg);color:var(--navy);display:grid;place-items:center}
.up-ic .icon{width:22px;height:22px}
.up-tile h2{font-size:17px;margin:0}
.up-tile p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.up-form{margin:0;padding:28px}
.up-form h2{font-size:22px}
.up-form .btn{width:100%;min-height:48px}
.up-back{margin-top:var(--sp-8);color:var(--muted)}
.up-back a{font-weight:600}
@media (max-width:860px){.up-grid{grid-template-columns:1fr}}

/* ---- Demo tour (development only) ---- */
.audience-bar .demo-link{margin-left:auto;color:var(--sun)}
.demo{padding:var(--sp-6) 0 var(--sp-16);display:grid;gap:var(--sp-12)}
.demo-head{max-width:760px;display:grid;gap:var(--sp-4);justify-items:start}
.demo-head h1{font-size:clamp(34px,4.6vw,52px);letter-spacing:-.025em;margin:0}
.demo-sub{margin:0;font-size:17px;color:var(--muted);line-height:1.6}
.demo code{background:var(--icon-bg);padding:2px 7px;border-radius:6px;font-size:.92em;color:var(--navy)}
.demo-h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin:0 0 var(--sp-6)}
.flow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:var(--sp-4)}
.flow{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:24px 24px 20px;border-top:6px solid var(--sun)}
.flow-money{border-top-color:var(--sun)}.flow-learn{border-top-color:var(--blossom)}.flow-teach{border-top-color:var(--lilac)}.flow-review{border-top-color:var(--meadow)}
.flow-num{position:absolute;right:20px;top:18px;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.flow h3{font-size:19px;margin:0 44px var(--sp-4) 0;line-height:1.25}
.flow ol{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-4);counter-reset:st}
.flow li{counter-increment:st;display:grid;gap:8px;padding-left:34px;position:relative}
.flow li::before{content:counter(st);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--icon-bg);color:var(--navy);display:grid;place-items:center;font-size:12px;font-weight:700}
.flow li p{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.flow li form{margin:0}
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-4)}
.acct{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:22px;display:flex;flex-direction:column;gap:12px;transition:transform .15s var(--ease),border-color .15s var(--ease)}
.acct:hover{transform:translateY(-2px);border-color:var(--border-2)}
.acct-top{display:flex;gap:12px;align-items:center}
.acct-avatar{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:700;background:var(--sun);color:var(--navy)}
.acct-administrators .acct-avatar{background:var(--navy);color:#fff}
.acct-teachers .acct-avatar{background:var(--lilac)}
.acct h3{margin:0;font-size:18px}
.acct-email{font-size:13px;color:var(--muted);user-select:all}
.acct-status{align-self:flex-start;padding:4px 10px;border-radius:var(--r-chip);background:var(--icon-bg);color:var(--navy);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.acct p{margin:0;color:var(--muted);font-size:15px;line-height:1.5;flex:1}
.acct form{margin:0}.acct .btn{width:100%}

/* Eyebrow pill (spec): white, 1px border, coral dot. Shared by the home hero and the demo tour. */
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-chip);background:var(--surface);border:1px solid var(--border-2);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--navy)}
.eyebrow-pill i{width:7px;height:7px;border-radius:50%;background:var(--coral)}

/* ---- Forms: one wrapper per field (lets the question builder show only the fields it needs) ---- */
.field[hidden]{display:none}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--coral-ink)}
.warn-text{color:var(--warn)}
.small-h{font-size:15px;margin:16px 0 8px}

/* ---- In-page video player with notes beside it ---- */
.vplayer{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;margin:18px 0 22px;align-items:start}
.vplayer.no-side{grid-template-columns:1fr}
.vframe{position:relative;aspect-ratio:16/9;background:var(--navy);border-radius:var(--r-card);overflow:hidden}
.vframe video,.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--navy)}
.vside{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:16px;display:grid;gap:14px;max-height:min(70vh,520px);overflow:auto}
.vside h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.vmoments ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.vmoments button{width:100%;text-align:left;display:flex;gap:10px;align-items:baseline;border:0;background:var(--paper);border-radius:var(--r-input);padding:8px 10px;font:500 14px var(--font);color:var(--ink);cursor:pointer}
.vmoments button:hover{background:var(--icon-bg)}
.vmoments button span{flex:none;font-weight:700;color:var(--cobalt-ink);font-variant-numeric:tabular-nums}
.vnotes-text{font-size:15px;line-height:1.6;color:var(--ink)}
.vnotes-text p{margin:0 0 .8em}
@media (max-width:860px){.vplayer{grid-template-columns:1fr}.vside{max-height:none}}

/* ---- Questions of every kind ---- */
.q{border:1px solid var(--border);border-radius:var(--r-card);padding:18px 20px;margin:0 0 16px;background:var(--surface)}
.q legend{display:flex;gap:10px;align-items:baseline;font-weight:600;font-size:17px;padding:0;float:left;width:100%;margin-bottom:12px}
.q legend+*{clear:both}
.q-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--icon-bg);color:var(--navy);display:inline-grid;place-items:center;font-size:13px;font-weight:700}
.q-options{display:grid;gap:8px}
.q-opt{display:flex;gap:10px;align-items:center;font-weight:500;margin:0;padding:12px 14px;border:1.5px solid var(--border-2);border-radius:var(--r-input);cursor:pointer;background:var(--paper)}
.q-opt:has(input:checked){border-color:var(--navy);background:var(--icon-bg)}
.q-number{max-width:220px;font-size:22px!important;font-weight:600}
.q-pictures{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.q-pic{position:relative;display:grid;gap:6px;justify-items:center;margin:0;padding:10px;border:1.5px solid var(--border-2);border-radius:var(--r-card);cursor:pointer;background:var(--paper);font-weight:500}
.q-pic img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.q-pic input{position:absolute;opacity:0}
.q-pic:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 3px rgba(59,110,224,.35)}
.q-pairs{display:grid;gap:8px}
.q-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center;margin:0;font-weight:500}
@media (max-width:600px){.q-pair{grid-template-columns:1fr}}

/* ---- Answer feedback: a pearl, never a red cross ---- */
.answer-card{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-radius:var(--r-card);background:var(--icon-bg);margin:0 0 10px}
.answer-card.is-right{background:#FEF3CD}
.answer-card p{margin:0 0 4px}
.answer-q{font-weight:600}
.preview-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--navy);color:#fff;border-radius:var(--r-card);padding:12px 18px;margin-bottom:16px;font-size:15px}
.preview-bar a{color:var(--sun);font-weight:600;margin-left:auto}

/* ---- Rubrics and marks ---- */
.rubric-show{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 18px;margin:12px 0}
.rubric-show ul{margin:6px 0 0;padding-left:20px}
.marks{list-style:none;padding:0;margin:8px 0 16px;display:grid;gap:6px}
.level{display:inline-block;padding:3px 10px;border-radius:var(--r-chip);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--icon-bg);color:var(--navy)}
.level-1{background:var(--sun)}.level-2{background:var(--meadow);color:var(--navy)}
.crit-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.crit-row span{display:block}
.crit-mark{border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px;margin:0 0 12px}
.crit-mark legend{padding:0 4px}.crit-mark legend span{display:block}
.levels{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.level-opt{position:relative;margin:0;cursor:pointer}.level-opt input{position:absolute;opacity:0}
.level-opt .level{padding:8px 14px;font-size:13px;border:2px solid transparent}
.level-opt input:checked+.level{border-color:var(--navy)}
.level-opt input:focus-visible+.level{outline:3px solid rgba(59,110,224,.45)}

/* ---- Course workspace ---- */
.ws-head{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:end;margin-bottom:16px}
.ws-head h1{margin:0 0 6px}
.meter{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 18px}
.meter-top{display:flex;justify-content:space-between;margin-bottom:8px}
.meter .bar{height:10px}.meter .bar>i{background:var(--meadow)}
.meter p{margin:8px 0 0}
.ws-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 16px}
.ws-steps a{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--border);color:var(--navy);text-decoration:none;font-weight:600;font-size:15px}
.ws-steps a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ws-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--icon-bg);color:var(--navy);display:grid;place-items:center;font-size:13px;font-weight:700}
.ws-todo{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-chip);background:var(--sun);color:var(--navy);display:grid;place-items:center;font-size:12px;font-weight:700}
.ws-done{margin-left:auto;color:var(--meadow-ink);font-weight:700}
.ws-steps a.on .ws-done{color:#fff}
.ws-checks,.ws-all{display:grid;gap:6px;margin:0 0 16px}
.ws-check{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:var(--r-input);background:var(--warn-bg);color:var(--ink)}
.ws-check.ok{background:var(--surface);border:1px solid var(--border)}
.ws-check.must{background:#FCE9E4}
.ws-check span.small{display:block}
.ws-dot{flex:none;width:22px;height:22px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--warn)}
.ws-check.ok .ws-dot{background:var(--meadow);color:var(--navy)}
.ws-check.must .ws-dot{background:var(--coral);color:var(--navy)}
.must-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--coral-ink);margin-left:6px}
.ws-pane h2{font-size:22px}
.ws-add{margin-top:16px;border:1px dashed var(--border-2);border-radius:var(--r-card);padding:12px 16px}
.ws-add summary{cursor:pointer;font-weight:600;color:var(--navy)}
.sortable{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.sort-item{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-input);background:var(--surface)}
.sort-item.dragging{opacity:.5;border-style:dashed}
.grip{cursor:grab;color:var(--muted);letter-spacing:-2px;font-weight:700;user-select:none}
.sort-main{flex:1;min-width:200px;display:grid}
.sort-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sort-actions form{margin:0}
.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border-2);background:var(--surface);color:var(--navy);cursor:pointer;font-weight:700}
.icon-btn:hover{border-color:var(--navy)}
.kind-chip{display:inline-block;padding:3px 10px;border-radius:var(--r-chip);font-size:12px;font-weight:600;background:var(--icon-bg);color:var(--navy)}
.k-video{background:var(--cobalt);color:#fff}.k-quiz{background:var(--blossom)}.k-assignment{background:var(--lilac)}.k-reading{background:var(--sun)}
.recipe-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.recipe{position:relative;display:grid;gap:4px;margin:0;padding:14px;border:1.5px solid var(--border-2);border-radius:var(--r-card);cursor:pointer;background:var(--paper);font-weight:400}
.recipe input{position:absolute;opacity:0}
.recipe span{font-size:14px;color:var(--muted)}
.recipe:has(input:checked){border-color:var(--navy);background:var(--icon-bg)}
.recipe:has(input:focus-visible){outline:3px solid rgba(59,110,224,.45)}
.recipe-row{align-items:flex-end}.recipe-row>div{flex:1;min-width:200px}.recipe-row label{margin-top:0}
.outcome-map{display:grid;gap:8px}
.om-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;padding:12px 14px;border-radius:var(--r-input);border:1px solid var(--border);background:var(--surface)}
.om-row.gap{background:var(--warn-bg);border-color:var(--warn-bg)}
.om-outcome{display:flex;gap:10px;font-weight:600}
.om-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:12px}
.om-qs{display:flex;flex-wrap:wrap;gap:6px}
.om-q{padding:4px 10px;border-radius:var(--r-chip);background:var(--icon-bg);font-size:13px}
.link-row{display:grid;grid-template-columns:minmax(0,1fr) 260px auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.submit-row{display:grid;gap:12px;justify-items:start;margin:16px 0}
.qcard .qcard-q{font-size:17px;font-weight:600;margin:10px 0 6px}
.bulk-help{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-input);padding:12px;font-size:13px;line-height:1.5;white-space:pre-wrap;max-height:220px;overflow:auto}
.rv-lesson{border-top:1px solid var(--border);padding:12px 0}
.rv-lesson summary{cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rv-q{border-left:3px solid var(--border-2);padding:4px 0 4px 12px;margin:10px 0}
.rv-q p{margin:0 0 4px}
@media (max-width:860px){
  .ws-head{grid-template-columns:1fr}
  .ws-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .om-row,.link-row{grid-template-columns:1fr}
}

/* ---- Certificate: landscape A4 proportions on screen, exactly one A4 page in print ---- */
.cert-link{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:var(--r-chip);background:var(--sun);color:var(--navy);font-size:12px;font-weight:700;text-decoration:none}
.cert-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:var(--sp-4) 0}
.cert-cheer{font-size:20px;font-weight:600;margin:0 0 var(--sp-4)}
.cert-note{margin-top:var(--sp-4)}
.verify-banner{border-radius:var(--r-card);padding:14px 18px;margin:var(--sp-4) 0;font-size:16px}
.verify-banner.ok{background:#E3F3EB;color:var(--meadow-ink)}
.verify-banner.void{background:#FCE9E4;color:var(--coral-ink)}
.cert{position:relative;max-width:1060px;margin:0 auto;aspect-ratio:297/210;background:var(--surface);border-radius:var(--r-card);border:1px solid var(--border);padding:22px;overflow:hidden;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;container-type:inline-size}
.cert::before,.cert::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.cert::before{width:46%;aspect-ratio:1;right:-14%;top:-30%;background:var(--icon-bg)}
.cert::after{width:22%;aspect-ratio:1;left:-7%;bottom:-11%;background:#FEF3CD}
.cert-frame{position:relative;z-index:1;height:100%;border:2px solid var(--navy);border-radius:calc(var(--r-card) - 6px);padding:3.2cqw 4.4cqw 2.2cqw;display:flex;flex-direction:column}
.cert-top{display:flex;justify-content:space-between;align-items:center}
.cert-brand{display:inline-flex;align-items:center;gap:10px}
.cert-brand .wordmark b{font-size:clamp(18px,2.6cqw,28px)}
.cert-brand .wordmark small{font-size:clamp(8px,1cqw,11px)}
.cert-subject{padding:6px 14px;border-radius:var(--r-chip);font-size:clamp(11px,1.3cqw,14px);font-weight:700}
.cert-body{text-align:center;margin-top:2.4cqw;display:grid;gap:.8cqw;justify-items:center}
.cert-eyebrow{margin:0;font-size:clamp(11px,1.4cqw,15px);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--navy)}
.cert-lead{margin:0;font-size:clamp(13px,1.7cqw,19px);color:var(--muted)}
.cert-name{margin:.3cqw 0;font-size:clamp(28px,5.6cqw,62px);line-height:1.05;letter-spacing:-.025em;font-weight:600;color:var(--navy);text-wrap:balance}
.cert-name span{background:linear-gradient(transparent 80%,var(--sun) 80%,var(--sun) 93%,transparent 93%);padding:0 .12em}
.cert-course{margin:0;font-size:clamp(18px,3cqw,34px);font-weight:600;letter-spacing:-.015em;text-wrap:balance}
.cert-string{position:relative;margin-top:auto;padding:1.6cqw 0 .6cqw;display:grid;justify-items:center;gap:.6cqw}
.cert-line{position:absolute;left:8%;right:8%;top:calc(1.6cqw + 27px);border-top:2.5px solid var(--navy)}
.cert-pearls{position:relative;list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;gap:clamp(4px,.9cqw,12px);flex-wrap:nowrap}
.cert-pearls .pearl{width:clamp(14px,2.4cqw,26px);height:auto}
.cert-pearls .cert-goal .pearl{width:clamp(30px,5cqw,54px)}
.cert-pearls .pearl-body{fill:var(--surface)}
.cert-pearls .is-goal .pearl-body{fill:var(--navy)}
.cert-tagline{margin:0;font-size:clamp(14px,1.9cqw,21px);font-weight:600;color:var(--navy)}
.cert-tagline span{font-weight:400;color:var(--muted);font-size:.8em}
.cert-foot{display:grid;grid-template-columns:1fr auto 1fr;gap:3cqw;align-items:end;margin-top:1.8cqw}
.cert-sign{display:grid;gap:4px;border-top:1.5px solid var(--border-2);padding-top:8px}
.cert-sign-name{font-size:clamp(13px,1.7cqw,19px);font-weight:600}
.cert-sign-role{font-size:clamp(10px,1.15cqw,13px);color:var(--muted)}
.cert-meta{text-align:right}
.cert-seal{display:grid;justify-items:center;gap:4px;text-align:center;font-size:clamp(10px,1.2cqw,13px);color:var(--muted);line-height:1.25}
.cert-seal .logo-mark{width:clamp(40px,6cqw,64px);height:auto}
.cert-seal b{color:var(--navy)}
.cert-verify{margin:1.2cqw 0 0;text-align:center;font-size:clamp(9px,1cqw,12px);color:var(--muted);word-break:break-all}
.cert-void{position:absolute;inset:0;z-index:3;display:grid;place-items:center;font-size:clamp(20px,4.4cqw,48px);font-weight:700;color:var(--coral-ink);text-transform:uppercase;letter-spacing:.06em;background:rgba(255,255,255,.55);transform:rotate(-12deg);pointer-events:none;text-align:center}
.cert.is-void .cert-frame{opacity:.55}
@media (max-width:700px){
  .cert{aspect-ratio:auto;padding:12px}
  .cert-frame{padding:20px 16px 14px}
  .cert-body{margin-top:18px;gap:6px}
  .cert-string{margin-top:20px}
  .cert-line{display:none}
  .cert-pearls{flex-wrap:wrap}
  .cert-foot{grid-template-columns:1fr;gap:14px;text-align:center}
  .cert-meta{text-align:center}
}
@media print{
  @page{size:A4 landscape;margin:0}
  .cert-page .audience-bar,.cert-page .topbar,.cert-page .site-foot,.cert-page .tabs,.cert-page .cert-actions,.cert-page .cert-cheer,
  .cert-page .cert-note,.cert-page .messages,.cert-page .verify-banner{display:none!important}
  .cert-page,.cert-page main{background:#fff;padding:0!important;margin:0}
  .cert-page main .wrap{max-width:none;padding:0}
  .cert{width:297mm;height:210mm;max-width:none;border:0;border-radius:0;margin:0;break-inside:avoid}
}
.cert-skills{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.8cqw;margin-top:1.4cqw;max-width:86%}
.cert-skills span{font-size:clamp(11px,1.3cqw,14px);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.cert-skills b{padding:.5cqw 1.3cqw;border-radius:var(--r-chip);background:var(--icon-bg);color:var(--navy);font-size:clamp(11px,1.4cqw,15px);font-weight:600}
.cert-meta-wrap{display:flex;align-items:flex-end;justify-content:flex-end;gap:1.6cqw}
.cert-meta-wrap .cert-meta{flex:1}
.cert-qr{display:grid;justify-items:center;gap:3px;flex:none}
.cert-qr .qr{display:block;width:clamp(64px,8.4cqw,92px);height:auto;border-radius:6px}
.cert-qr span{font-size:clamp(9px,1cqw,11px);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
@media (max-width:700px){.cert-meta-wrap{flex-direction:column;align-items:center}.cert-qr .qr{width:96px}}
/* Reef friend on a course card (partials/critter.html) */
.cc-pal{position:absolute;right:12px;bottom:-12px}.cc-pal .critter{width:108px;height:108px}
.cc-thumb{overflow:hidden}
/* Audit trail: compact rows (the log runs to millions of entries) and Newer / Older paging */
.audit-table th,.audit-table td{padding:5px 10px;font-size:13px;line-height:1.35;vertical-align:top}
.audit-table code{font-size:12px;background:var(--icon-bg);padding:1px 6px;border-radius:6px}
.audit-table .nowrap{white-space:nowrap}
.audit-note{max-width:420px}
.audit-note>span,.audit-note summary{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
.audit-note summary{cursor:pointer;color:var(--navy)}
.audit-note details[open] summary{white-space:normal}
.audit-wrap{padding:8px 4px;margin-bottom:10px}
.pager{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;margin:0 0 10px}
.pager-links{display:flex;gap:8px;flex-wrap:wrap}

/* ================= App menu for signed-in students and teachers (partials/student_nav.html, teacher_nav.html) =========
   The menu slides in from the left by default (phones, and lessons or lesson previews on any screen: focus mode).
   On computers, outside lessons, it is a fixed sidebar beside the page. The checkbox opens it without JavaScript.
   The students' bright look is in kid.css; the teachers' navy look is below. */
.app-open{display:none}
.app-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:10px 16px}
.app-top .brand{margin-right:auto}
.app-toggle{display:inline-flex;align-items:center;gap:6px;min-height:42px;margin:0;padding:6px 14px;border-radius:var(--r-btn);cursor:pointer}
.app-toggle .icon{width:20px;height:20px}
.app-backdrop{position:fixed;inset:0;z-index:45;margin:0;background:rgba(20,35,58,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.app-open:checked~.app-backdrop{opacity:1;pointer-events:auto}
.app-side{position:fixed;top:0;bottom:0;left:0;z-index:50;width:min(75vw,360px);padding:14px 14px 28px;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-105%);transition:transform .25s var(--ease)}
.app-open:checked~.app-side{transform:none}
body:has(.app-open:checked){overflow:hidden}
.app-side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.app-close{display:grid;place-items:center;width:40px;height:40px;margin:0;border-radius:50%;font-size:18px;cursor:pointer}
.app-nav{display:grid;gap:4px}
.app-nav form{margin:0}
.app-nav a,.app-signout{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px;border:0;background:none;
  text-decoration:none;text-align:left;cursor:pointer;transition:background-color .15s}
.app-nav .icon{width:22px;height:22px}
.app-count{margin-left:auto;display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;font-size:13px;font-weight:600}
.app-legal{margin:0;padding:8px 16px 28px;text-align:center;font-size:13px;color:var(--muted)}
.app-main main{padding-top:24px}
@media (min-width:901px){
  body:not(.lesson-page) .app-top,body:not(.lesson-page) .app-backdrop,body:not(.lesson-page) .app-close{display:none}
  body:not(.lesson-page) .app-side{transform:none;width:264px;z-index:20}
  body:not(.lesson-page) .app-main,body:not(.lesson-page) .demo-bar.app-shift{margin-left:264px}
}
@media print{.app-top,.app-side,.app-backdrop,.tabs,.app-legal{display:none!important}.app-main{margin:0!important}}

/* Teachers: the administrator console's navy sidebar and plain font, so the workspace reads as a calm, adult tool */
.teacher-app .app-top{background:var(--navy);color:#fff}
.teacher-app .app-top .brand,.teacher-app .app-side .brand{color:#fff;font:600 17px var(--font)}
.teacher-app .app-top .brand small,.teacher-app .app-side .brand small{color:var(--nav-text);font-weight:500;font-size:12px;margin-left:6px}
.teacher-app .app-toggle,.teacher-app .app-close{border:1.5px solid rgba(255,255,255,.35);color:#fff;background:transparent;font:600 15px var(--font)}
.teacher-app .app-side{background:var(--navy);color:var(--nav-text)}
.teacher-app .app-side-head{padding:6px 4px 10px 12px}
.teacher-app .app-nav a,.teacher-app .app-signout{color:var(--nav-text);font:500 15px var(--font)}
.teacher-app .app-nav a:hover,.teacher-app .app-signout:hover,.teacher-app .app-nav a.on{background:var(--nav-active);color:#fff}
.teacher-app .app-nav h4{margin:14px 12px 4px;font:500 .72rem var(--font);text-transform:uppercase;letter-spacing:.08em;color:#8896aa}
.teacher-app .app-nav hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:10px 4px}
.teacher-app .app-count{background:var(--sun);color:var(--navy)}
.app-flag{margin-left:auto;padding:2px 8px;border-radius:999px;background:var(--coral);color:var(--navy);font-size:11px;font-weight:600;white-space:nowrap}
.app-who{margin:8px 0 0;padding:0 12px;color:#8896aa;font-size:13px}
/* Teacher menu: numbered steps with a one-line hint under each */
.teacher-app .app-nav a>span:not(.app-count):not(.app-flag){display:grid;line-height:1.25}
.teacher-app .app-nav a small{font-size:12px;font-weight:400;color:#8896aa;margin-top:1px}
.teacher-app .app-nav a.on small,.teacher-app .app-nav a:hover small{color:var(--nav-text)}
.app-step{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);font:600 12px var(--font);font-style:normal;color:#fff}
.teacher-app .app-nav a.on .app-step{background:var(--sun);border-color:var(--sun);color:var(--navy)}
/* Teacher guide: how to build a course */
.guide{max-width:860px}
.guide-lead{font-size:17px;color:var(--muted);max-width:68ch}
.guide-toc{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.guide-step h2{display:flex;align-items:center;gap:12px;font-size:1.25rem;margin-bottom:12px}
.guide-num{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font:600 15px var(--font);font-style:normal}
.guide-step ol,.guide-step ul{padding-left:20px;display:grid;gap:8px;line-height:1.55}
.guide-step li .btn,.guide-step li .pill{margin-left:8px;vertical-align:middle}
.guide-tip{background:var(--icon-bg);border-radius:var(--r-input);padding:10px 14px;margin:12px 0 0}
.guide-table{width:100%;margin:8px 0 14px;font-size:14px}
.guide-kinds{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.guide-more{margin-top:14px;border:1px solid var(--border);border-radius:var(--r-input);padding:10px 14px}
.guide-more summary{cursor:pointer;font-weight:600}
.guide-more pre{background:var(--paper);border-radius:10px;padding:12px;overflow-x:auto;font-size:13px;line-height:1.5}
.guide-end{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
html{scroll-behavior:smooth}
.guide-step{scroll-margin-top:72px}