/* =====================================================================
   Lanyard 3 · bold
   Back to the original look: bright ground, chunky outlined "sticker"
   cards with hard offset shadows, orange + sky-blue brand colours,
   Unbounded headings. Students get an orange top bar, educators navy.
   Night mode: navy ground with orange outlines.
   ===================================================================== */
:root{
  --bg:#f4f8fc; --surface:#ffffff; --surface-2:#e6eef6; --fg:#16120d; --muted:#55606e; --line:#d3dde8;
  --edge:#16120d; --shadow:#16120d;
  --ink:#ff7a00; --on-ink:#16120d;
  --accent:#7fd4ff; --accent-fg:#0f1a2a; --hilite:#7fd4ff;
  --navy:#0b1630;
  --panel:#0b1630; --on-panel:#f3f6fb; --panel-muted:rgba(243,246,251,.72); --panel-line:rgba(243,246,251,.18);
  --lift:4px 4px 0 var(--shadow);
  --font-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --font-body:"DM Sans","Segoe UI",system-ui,sans-serif;
  --r:16px; --r-lg:24px;
  --bar:var(--ink); --on-bar:#16120d; --bar-pill:var(--accent); --on-bar-pill:var(--accent-fg);
}
:root[data-role="educator"]{--bar:var(--navy); --on-bar:#f3f6fb; --bar-pill:var(--ink); --on-bar-pill:#16120d}
:root[data-theme="dark"]{
  --bg:#0a1428; --surface:#112040; --surface-2:#18294d; --fg:#eef3fb; --muted:#a8b8d0; --line:#26395f;
  --edge:#ff7a00; --shadow:#ff7a00;
  --ink:#ff7a00; --on-ink:#0a1428; --accent:#7fd4ff; --accent-fg:#0a1428; --hilite:#ff7a00;
  --panel:#050d1f; --on-panel:#eef3fb;
  --ma:#3d8bff; --acc:#1fae74; --dda:#ef4f86; --dsd:#8f66ff; --mbp:#f45bd0;
  --lift:4px 4px 0 var(--shadow);
  --bar:#ff7a00; --on-bar:#0a1428; --bar-pill:#0a1428; --on-bar-pill:#ff7a00;
}
:root[data-theme="dark"][data-role="educator"]{--bar:#050d1f; --on-bar:#eef3fb; --bar-pill:var(--ink); --on-bar-pill:#0a1428}

body{font-family:var(--font-body);font-size:16px;line-height:1.55}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em}
h1{font-weight:800;line-height:1.08;letter-spacing:-.02em}
h2{font-weight:800;font-size:1.35rem}
h3{font-weight:600}
.eyebrow{font-family:var(--font-body);font-weight:700;font-size:.74rem;letter-spacing:.09em}
.hl{background:var(--accent);color:var(--accent-fg);padding:0 .2em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
[data-theme="dark"] .hl{background:var(--ink);color:#0a1428}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- top bar: orange for students, navy for educators ---------- */
.top,[data-theme="dark"] .top{background:var(--bar);color:var(--on-bar);--on-ink:var(--on-bar);border-bottom:3px solid var(--edge);-webkit-backdrop-filter:none;backdrop-filter:none}
[data-role="educator"] .top{border-bottom-color:var(--ink)}
.top-in{padding:.85rem 16px}
.brand,[data-theme="dark"] .brand{color:var(--on-bar);font-family:var(--font-display);font-weight:800;font-size:1.9rem;letter-spacing:-.03em}
.brand-mark{width:36px;height:48px;color:var(--on-bar)}
[data-role="educator"] .brand-mark{color:var(--ink)}
.nav>button,.nav .dd>button{color:var(--on-bar);opacity:.85;font-weight:700;font-size:.92rem}
.nav>button:hover,.nav .dd>button:hover{opacity:1;background:color-mix(in srgb,var(--on-bar) 14%,transparent);color:var(--on-bar)}
.nav>button[aria-current="page"],.nav .dd>button.cur,
[data-theme="dark"] .nav>button[aria-current="page"],[data-theme="dark"] .nav .dd>button.cur{opacity:1;background:var(--bar-pill);color:var(--on-bar-pill);box-shadow:inset 0 0 0 2px var(--on-bar)}
.dd-menu{border:2px solid var(--edge);border-radius:16px;box-shadow:5px 5px 0 var(--shadow)}
.dd-menu button{color:var(--fg)}
.dd-menu button:hover,.dd-menu button[aria-current="page"]{background:color-mix(in srgb,var(--accent) 30%,var(--surface))}
.dd-menu .mi-n{background:var(--ink);color:#16120d;font-weight:600}
.dd-menu button[aria-current="page"] .mi-n{background:var(--fg);color:var(--bg)}
.theme-btn,[data-theme="dark"] .theme-btn{border:2px solid var(--on-bar);color:var(--on-bar);background:transparent}
.theme-btn:hover{background:color-mix(in srgb,var(--on-bar) 14%,transparent)}
.acct-chip{background:var(--surface)!important;color:var(--fg)!important;box-shadow:inset 0 0 0 2px var(--edge)!important}
.acct-chip .av{background:var(--ink)!important;color:#16120d!important}
.nav .switch{box-shadow:inset 0 0 0 2px var(--on-bar)!important;color:var(--on-bar)!important}
.proto,[data-theme="dark"] .proto{background:var(--surface-2);color:var(--muted);border-bottom:1px solid var(--line);font-family:var(--font-body);letter-spacing:.02em;text-transform:none;font-size:.8rem}

/* ---------- buttons ---------- */
.btn{border:2px solid var(--edge);background:var(--accent);color:var(--accent-fg);font-weight:700;box-shadow:3px 3px 0 var(--shadow);padding:.6rem 1.1rem}
.btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow);opacity:1}
.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.btn.ghost,[data-theme="dark"] .btn.ghost{background:var(--surface);color:var(--fg);box-shadow:3px 3px 0 var(--shadow)}
.btn.ghost:hover:not(:disabled){background:var(--surface);box-shadow:4px 4px 0 var(--shadow)}
.btn.small{padding:.35rem .75rem;font-size:.86rem;box-shadow:2px 2px 0 var(--shadow)}
.btn.orange,[data-theme="dark"] .btn{background:var(--ink);color:#16120d}
[data-theme="dark"] .btn{border-color:var(--ink);box-shadow:3px 3px 0 #000}
[data-theme="dark"] .btn.ghost{border-color:var(--ink);box-shadow:3px 3px 0 #000}
.btn.alt{background:var(--surface);color:var(--fg)}

/* ---------- surfaces ---------- */
.sticker,[data-theme="dark"] .sticker{border:2px solid var(--edge)!important;box-shadow:5px 5px 0 var(--shadow)}
button.sticker:hover,.opp.sticker:hover,a.sticker:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--shadow)}
.theme,.pcard,.why-panel,.learn-more,.wr-card,.comp-card,.course-head,.cls-card,.teach-card,.gm-card,.sc-card,.dash-card,.role,.auth,.panel.pop,.hero-pop.light,.wq,.prac,.q{border:2px solid var(--edge);box-shadow:4px 4px 0 var(--shadow)}
.theme:hover{box-shadow:6px 6px 0 var(--shadow)}
.theme[open]{box-shadow:6px 6px 0 var(--shadow)}
.theme summary{border-top:6px solid var(--c);border-radius:calc(var(--r) - 2px) calc(var(--r) - 2px) 0 0}
.theme[open] .th-ic,[data-theme="dark"] .theme[open] .th-ic{background:var(--ink);color:#16120d}
.theme .th-dots i.d{background:var(--c)}
.course-head{border-top:8px solid var(--c);box-shadow:4px 4px 0 var(--shadow)}
.panel{border:1.5px solid var(--line)}
.topic{border:1.5px solid var(--line);border-radius:12px}
.topic.ready{border-color:var(--c);box-shadow:inset 5px 0 0 var(--c)}
.pc-top,.cc-top,.dc-top{border-bottom:2px solid var(--edge);font-family:var(--font-display);font-weight:800}
.ticket{border:2px solid var(--edge);box-shadow:5px 5px 0 var(--shadow)}

/* navy feature panels keep the orange, now with an outline */
.hero-panel,.continue,.place-card{border:2px solid var(--edge);box-shadow:6px 6px 0 var(--shadow)}
[data-theme="dark"] .hero-panel{box-shadow:6px 6px 0 var(--shadow)}
[data-role="student"] .hero-panel{background:linear-gradient(135deg,#0b1630 0%,#0f2350 100%)}
.hero-panel .hl{background:var(--ink);color:#16120d;padding:.02em .14em .06em;margin:0 .06em;border-radius:8px;display:inline-block;line-height:.92}
.hero-panel .btn{background:var(--ink);color:#16120d;border-color:#16120d}
.hero-panel .btn.ghost{background:transparent;color:var(--on-panel);border-color:var(--on-panel);box-shadow:3px 3px 0 var(--ink)}
.continue .btn,.place-card .btn{background:var(--ink);color:#16120d;border-color:#16120d}

/* tabs and filters */
.tabs button{border:2px solid var(--edge);box-shadow:none;font-weight:700}
.tabs button[aria-selected="true"]{background:var(--c);color:#fff;box-shadow:3px 3px 0 var(--shadow)}
.ctabs button{border:2px solid var(--edge);box-shadow:3px 3px 0 var(--shadow);background:var(--surface)}
.ctabs button[aria-selected="true"]{background:var(--c);color:#fff;box-shadow:4px 4px 0 var(--shadow);border:2px solid var(--edge)}
.ctabs button[aria-selected="true"]::after{display:none}
.ctabs button[aria-selected="true"] small,.ctabs button[aria-selected="true"] .ck{color:rgba(255,255,255,.88)}
.lfilter button{box-shadow:inset 0 0 0 2px var(--line);font-weight:700}
.lfilter button[aria-pressed="true"],[data-theme="dark"] .lfilter button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);box-shadow:inset 0 0 0 2px var(--edge)}
.lsearch{box-shadow:inset 0 0 0 2px var(--edge)}
.chip.toggle[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--edge)}
.seg button[aria-pressed="true"],.auth-tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-fg)}
[data-theme="dark"] .seg button[aria-pressed="true"],[data-theme="dark"] .auth-tabs button[aria-selected="true"]{background:var(--ink);color:#0a1428}
.unit-title h3{font-weight:800}
.unit-block+.unit-block{border-top:2px dashed var(--line)}

/* lesson page */
.objs{border:2px solid var(--edge);border-left:8px solid var(--c);box-shadow:4px 4px 0 var(--shadow)}
.toc a:hover{background:color-mix(in srgb,var(--accent) 35%,var(--surface))}
.key{border-left:6px solid var(--c);box-shadow:inset 0 0 0 1.5px var(--line)}
.tip{border:2px solid var(--edge);background:color-mix(in srgb,var(--ink) 16%,var(--surface));box-shadow:4px 4px 0 var(--shadow)}
.opt{border:2px solid var(--line);border-radius:10px}
.opt:hover:not(:disabled){border-color:var(--edge)}
.lesson-next{border:2px solid var(--edge)!important}

/* writing page */
.wr-hero{background:linear-gradient(135deg,#0b1630,#0f2350);border:2px solid var(--edge);box-shadow:6px 6px 0 var(--shadow)}
.wr-n{color:var(--ink)}
.wr-tag{border:1.5px solid var(--edge);color:var(--fg);font-family:var(--font-body);font-weight:700}
.wr-st{border:2px solid var(--edge);border-top:8px solid var(--wc,var(--ma));box-shadow:3px 3px 0 var(--shadow)}
.wlink{border:2px solid var(--edge);border-top:8px solid var(--wc)}