/* ══════════════════════════════════════════════════════════════════════════
   learnit-bright.css — the Learn It design system for standalone pages
   (2026-10-02). The year pages get the same tokens from common-features.js
   (_injectBrightTheme); keep the two in step.

   Jordan: "Remove the current dark navy/starry background completely …
   bright, modern, premium EdTech"; then, on seeing it: "the graphics look
   rubbish … all of it", and asked for game-style 3D characters.

   THE RULES
   · Ground #F7F8FA with a soft brand-blue wash and faint hexagons. Light only.
   · One typeface: Lexend (built for reading fluency). Playfair Display is the
     wordmark and nothing else. No Fraunces, no Instrument Serif.
   · One navy (#1f2f4d) for text and primary buttons. Brand blue #80A7C7 for
     selection and accents, #4f7ea6 where it must carry text. Green and coral
     mean right and wrong and nothing else. Amber is streaks and XP.
   · Radius scale: 10 (small chips), 16 (controls), 22 (cards), 999 (pills).
   · Shadows are navy-tinted, never black. Interactive things have a 4px
     "lip" that disappears when pressed.
   · Icons are Phosphor (bold for UI, fill for status). Emoji are not icons.
   ══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/bold/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/fill/style.css');

:root{
  --lb-bg:#f7f8fa; --lb-card:#ffffff; --lb-sunk:#f3f6fa;
  --lb-brand:#80a7c7; --lb-brand-d:#4f7ea6; --lb-brand-soft:#eaf1f7; --lb-wordmark:#4368b5;
  --lb-ink:#1f2f4d; --lb-ink2:#51607a; --lb-mute:#8a96a8; --lb-line:#e3e8ef; --lb-line2:#dfe5ec;
  --lb-ok:#1f9d63; --lb-ok-bg:#ebf7f0; --lb-no:#e0655a; --lb-no-bg:#fdf0ee; --lb-warm:#f2a33a; --lb-warm-bg:#fff5e3;
  --lb-font:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lb-r-sm:10px; --lb-r:16px; --lb-r-card:22px; --lb-r-pill:999px;
  --lb-shadow-1:0 1px 2px rgba(31,47,77,.05),0 2px 8px rgba(31,47,77,.04);
  --lb-shadow-2:0 12px 32px rgba(31,47,77,.08),0 2px 6px rgba(31,47,77,.04);
  --lb-shadow-3:0 30px 80px rgba(31,47,77,.18);
  --lb-hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2l25 14.5v29L28 60 3 45.5v-29z' fill='none' stroke='%2380a7c7' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E");
  --lb-ease:cubic-bezier(.3,1.4,.5,1);
}

/* ── ground ── the colour lives on <html>; the body stays transparent so the
   fixed decoration layer (z-index -1) is not painted over */
html{background:var(--lb-bg);}
body.lb{margin:0;min-height:100dvh;background:transparent;color:var(--lb-ink);font-family:var(--lb-font);
  -webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;font-size:15px;line-height:1.55;}
body.lb::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 100% -10%,rgba(128,167,199,.20),rgba(128,167,199,0) 70%),
    radial-gradient(700px 480px at -10% 110%,rgba(128,167,199,.14),rgba(128,167,199,0) 70%);}
body.lb::after{content:"";position:fixed;z-index:-1;pointer-events:none;right:-40px;top:60px;width:440px;height:380px;
  background:var(--lb-hex) 0 0/56px 64px;
  -webkit-mask-image:radial-gradient(closest-side at 70% 40%,#000,transparent);mask-image:radial-gradient(closest-side at 70% 40%,#000,transparent);}
body.lb button,body.lb input,body.lb select,body.lb textarea{font-family:var(--lb-font);}
body.lb a{color:var(--lb-brand-d);}

/* ── nav ── */
.lb-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:4px;padding:10px max(16px,calc((100vw - 1180px)/2));min-height:60px;box-sizing:border-box;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--lb-line);}
.lb-nav .wm{font:700 22px/1 "Playfair Display",Georgia,serif;color:#151515;text-decoration:none;margin-right:auto;letter-spacing:-.005em;}
.lb-nav .wm i{color:var(--lb-wordmark);font-style:italic;}
.lb-nav a.lk{display:inline-flex;align-items:center;gap:7px;font:600 13.5px/1 var(--lb-font);color:var(--lb-ink2);text-decoration:none;padding:9px 12px;border-radius:var(--lb-r-sm);transition:background .15s,color .15s;white-space:nowrap;}
.lb-nav a.lk i{font-size:16px;}
.lb-nav a.lk:hover{background:var(--lb-brand-soft);color:var(--lb-ink);}
.lb-nav a.lk.on{background:var(--lb-ink);color:#fff;}
.lb-nav .lb-me{display:inline-flex;align-items:center;gap:8px;margin-left:6px;padding:3px 12px 3px 3px;border-radius:var(--lb-r-pill);background:#fff;border:1px solid var(--lb-line);color:var(--lb-ink);font:600 13.5px/1 var(--lb-font);text-decoration:none;}
@media (max-width:720px){.lb-nav{gap:2px;overflow-x:auto;scrollbar-width:none}.lb-nav::-webkit-scrollbar{display:none}.lb-nav a.lk{padding:8px 9px;font-size:12.5px}.lb-nav a.lk span{display:none}}

/* ── layout and type ── */
.lb-wrap{max-width:1180px;margin:0 auto;padding:28px 16px 64px;}
.lb-h1{font:700 clamp(28px,3.6vw,40px)/1.1 var(--lb-font);letter-spacing:-.03em;margin:0 0 8px;color:var(--lb-ink);text-wrap:balance;}
.lb-h1 em{font-style:normal;color:var(--lb-brand-d);}
.lb-h2{font:700 22px/1.2 var(--lb-font);letter-spacing:-.02em;margin:0 0 12px;color:var(--lb-ink);}
.lb-lede{margin:0 0 24px;color:var(--lb-ink2);font-size:15.5px;line-height:1.6;max-width:62ch;text-wrap:pretty;}
.lb-eyebrow{font:700 11px/1 var(--lb-font);letter-spacing:.14em;text-transform:uppercase;color:var(--lb-mute);}
.lb-num{font-variant-numeric:tabular-nums;}

/* ── surfaces ── */
.lb-card{background:var(--lb-card);border:1px solid var(--lb-line);border-radius:var(--lb-r-card);box-shadow:var(--lb-shadow-2);}
.lb-card.flat{box-shadow:var(--lb-shadow-1);}
.lb-sunk{background:var(--lb-sunk);border-radius:var(--lb-r);}
/* an interactive card: lifts on hover, presses on tap */
.lb-tile{display:block;background:#fff;border:1px solid var(--lb-line);border-radius:var(--lb-r-card);box-shadow:0 4px 0 var(--lb-line2),var(--lb-shadow-1);
  color:inherit;text-decoration:none;transition:transform .16s var(--lb-ease),box-shadow .16s,border-color .15s;}
.lb-tile:hover{transform:translateY(-2px);border-color:#c9d8e6;box-shadow:0 6px 0 #c9d8e6,var(--lb-shadow-2);}
.lb-tile:active{transform:translateY(3px);box-shadow:0 1px 0 #c9d8e6;}

/* ── buttons: a lip under every one ── */
.lb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--lb-font);border-radius:var(--lb-r);padding:13px 20px;cursor:pointer;
  border:2px solid var(--lb-line2);background:#fff;color:var(--lb-ink);text-decoration:none;box-shadow:0 4px 0 var(--lb-line2);
  transition:transform .14s var(--lb-ease),box-shadow .14s,background .15s,border-color .15s;white-space:nowrap;}
.lb-btn:hover{border-color:#b9cde0;box-shadow:0 4px 0 #b9cde0;transform:translateY(-1px);}
.lb-btn:active{transform:translateY(4px);box-shadow:0 0 0 #b9cde0;}
.lb-btn.primary{background:var(--lb-ink);border-color:var(--lb-ink);color:#fff;box-shadow:0 4px 0 #111b30;}
.lb-btn.primary:hover{background:#2a3d61;border-color:#2a3d61;box-shadow:0 5px 0 #111b30;}
.lb-btn.primary:active{box-shadow:0 0 0 #111b30;}
.lb-btn.small{padding:9px 14px;font-size:13.5px;border-radius:12px;}
.lb-btn i{font-size:18px;}
.lb-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;}
.lb-btn:focus-visible,.lb-tile:focus-visible,.lb-nav a:focus-visible{outline:3px solid rgba(128,167,199,.6);outline-offset:3px;}

/* ── chips, stats, progress ── */
.lb-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--lb-r-pill);background:var(--lb-sunk);border:1px solid var(--lb-line);font:600 12.5px/1 var(--lb-font);color:var(--lb-ink2);}
.lb-chip.ok{background:var(--lb-ok-bg);border-color:#cfe9da;color:#145c3b;}
.lb-chip.warm{background:var(--lb-warm-bg);border-color:#f3dcae;color:#7a4a08;}
.lb-chip i{font-size:15px;}
.lb-stat{display:flex;flex-direction:column;gap:4px;}
.lb-stat b{font:700 28px/1 var(--lb-font);letter-spacing:-.03em;color:var(--lb-ink);font-variant-numeric:tabular-nums;}
.lb-stat span{font:500 12.5px/1.3 var(--lb-font);color:var(--lb-mute);}
.lb-bar{height:8px;border-radius:8px;background:#e8edf3;overflow:hidden;}
.lb-bar>i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--lb-brand),var(--lb-brand-d));transition:width .6s var(--lb-ease);}
.lb-icon-tile{width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:var(--lb-brand-soft);color:var(--lb-brand-d);font-size:22px;flex-shrink:0;}

/* ── the student's avatar ── a still of the 3D character (cached PNG) or the
   2D fallback, always on the same soft disc */
.lb-avatar{display:inline-block;border-radius:50%;overflow:hidden;flex-shrink:0;background:radial-gradient(120% 100% at 50% 18%,#fff 0%,#e3edf6 60%,#cfdfee 100%);box-shadow:0 0 0 2px #fff,0 2px 8px rgba(31,47,77,.14);}
.lb-avatar img,.lb-avatar svg{width:100%;height:100%;display:block;object-fit:cover;}
.lb-stage{position:relative;border-radius:var(--lb-r-card);background:radial-gradient(85% 70% at 50% 45%,rgba(128,167,199,.24),rgba(128,167,199,0) 72%),linear-gradient(180deg,#f3f7fb,#fff);overflow:hidden;}
.lb-stage canvas{width:100%;height:100%;display:block;}

/* ── motion: entries settle in; never on reduced motion ── */
@keyframes lbRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lb-rise{animation:lbRise .55s cubic-bezier(.16,1,.3,1) both;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}}