/* ============================================================================
   SV Learning — shared design system
   The single source of truth for brand tokens + core components. Link this on
   every page, then add page-specific styles on top.
   Brand: green #43B02A seal logo. Page palette is vibrant multi-colour; green is
   the "go / free" colour, NOT the whole site.
   ============================================================================ */

:root {
  /* text + surfaces (light) — clean, calm off-white ground (not beige), easy on the eyes */
  --ink:#26324C; --ink-soft:#66748C;
  --cream:#F5F8F6; --card:#FFFFFF; --surface-2:#ECF3EF; --line:#E4ECE7;

  /* brand + accents */
  --green:#43B02A; --green-d:#34901F;   /* brand · CTAs · free/correct */
  --sky:#17BECF;   --sky-d:#0E97A6;     /* play · secondary */
  --sun:#FFB400;   --sun-d:#E29400;     /* XP · coins · energy */
  --coral:#FF5C7A; --coral-d:#E63E5E;   /* fun accent */
  --grape:#7B61FF; --grape-d:#6247E6;   /* playful */
  --navy:#20304F;                        /* grounding dark (parent/footer) */

  /* semantic */
  --danger:#E5484D; --warning:var(--sun); --success:var(--green);

  --shadow:0 12px 30px rgba(38,50,76,.12); --shadow-sm:0 4px 14px rgba(38,50,76,.09);
  --r-lg:26px; --r-md:16px; --r-sm:10px;

  --display:"Nunito", ui-rounded, system-ui, sans-serif;   /* headings — heavy weights */
  --body:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw:1140px;
}
@media (prefers-color-scheme: dark){ :root{
  --ink:#EEF1F8; --ink-soft:#A4AEC6; --cream:#141A2A; --card:#1D2740; --surface-2:#1A2236; --line:#2C3550;
  --shadow:0 14px 34px rgba(0,0,0,.5); --shadow-sm:0 4px 16px rgba(0,0,0,.4);
}}
:root[data-theme="light"]{ --ink:#26324C; --ink-soft:#66748C; --cream:#F5F8F6; --card:#FFFFFF; --surface-2:#ECF3EF; --line:#E4ECE7; --shadow:0 12px 30px rgba(38,50,76,.12); --shadow-sm:0 4px 14px rgba(38,50,76,.09); }
:root[data-theme="dark"]{ --ink:#EEF1F8; --ink-soft:#A4AEC6; --cream:#141A2A; --card:#1D2740; --surface-2:#1A2236; --line:#2C3550; --shadow:0 14px 34px rgba(0,0,0,.5); --shadow-sm:0 4px 16px rgba(0,0,0,.4); }

*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.08; margin:0; letter-spacing:-.01em; text-wrap:balance; }
a{ color:inherit; }
.eyebrow{ font-size:13px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--sky-d); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* buttons — tactile, with depth */
.btn{ font-family:var(--display); font-weight:700; font-size:17px; border:none; cursor:pointer; border-radius:14px; padding:15px 28px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:transform .08s ease, box-shadow .08s ease, background .15s; }
.btn-primary{ background:var(--green); color:#fff; box-shadow:0 5px 0 var(--green-d); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 0 var(--green-d); background:#49bd2e; }
.btn-primary:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--green-d); }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2.5px var(--line); }
.btn-ghost:hover{ box-shadow:inset 0 0 0 2.5px var(--sky); color:var(--sky-d); }
.btn:focus-visible, a:focus-visible, button:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; }

.badge{ display:inline-flex; align-items:center; gap:8px; background:color-mix(in srgb,var(--green) 15%,var(--card)); color:var(--green-d); font-weight:800; font-size:13.5px; padding:7px 15px; border-radius:999px; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ============================================================================
   SITE NAV — one shared, role-aware, accessible top navigation.
   Rendered by shared/site-nav.js into <header id="site-nav">. Replaces the
   copy-pasted inline navs across the app.
   ============================================================================ */
.site-nav{ position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--cream) 90%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.site-nav .sn-in{ max-width:1320px; margin:0 auto; padding:0 22px; height:66px; display:flex; align-items:center; gap:14px; }
.sn-logo{ display:flex; align-items:center; flex-shrink:0; }
.sn-logo img{ height:42px; width:auto; display:block; }
.sn-logo .sn-logo-white{ display:none; }
/* reset in case a page ships a leftover element-level `nav {}` rule that would style the inner <nav class="sn-links"> */
.site-nav nav.sn-links{ padding:0; background:transparent; border:none; box-shadow:none; }
.sn-links{ display:flex; align-items:center; gap:2px; margin-left:6px; min-width:0; }
.sn-spacer{ flex:1; }
.sn-link{ text-decoration:none; color:var(--ink-soft); font-weight:700; font-size:15px; padding:8px 12px; border-radius:9px; white-space:nowrap; }
.sn-link:hover{ color:var(--ink); background:color-mix(in srgb,var(--ink) 5%,transparent); }
.sn-link.active{ color:var(--green-d); background:color-mix(in srgb,var(--green) 12%,transparent); }

.sn-dd{ position:relative; }
.sn-dd-toggle{ background:none; border:none; font-family:var(--body); color:var(--ink-soft); font-weight:700; font-size:15px; padding:8px 12px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.sn-dd-toggle:hover{ color:var(--ink); background:color-mix(in srgb,var(--ink) 5%,transparent); }
.sn-dd-toggle.active{ color:var(--green-d); }
.sn-dd-toggle .sn-caret{ font-size:10px; transition:transform .15s; }
.sn-dd[aria-open="true"] .sn-caret{ transform:rotate(180deg); }
.sn-dd-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:210px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); padding:6px; display:none; }
.sn-dd[aria-open="true"] .sn-dd-menu{ display:block; }
.sn-dd-menu a{ display:block; text-decoration:none; color:var(--ink); font-weight:600; font-size:14.5px; padding:9px 12px; border-radius:8px; }
.sn-dd-menu a:hover, .sn-dd-menu a:focus-visible{ background:color-mix(in srgb,var(--green) 12%,transparent); color:var(--green-d); outline:none; }
.sn-dd-menu a.active{ color:var(--green-d); font-weight:800; }

.sn-right{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.sn-email{ color:var(--ink-soft); font-size:13.5px; font-weight:700; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sn-logout{ background:transparent; border:2px solid var(--line); color:var(--ink); font-family:var(--display); font-weight:800; font-size:13.5px; padding:8px 14px; border-radius:10px; cursor:pointer; }
.sn-logout:hover{ border-color:var(--coral); color:var(--coral-d); }
.sn-theme{ background:var(--card); border:1px solid var(--line); border-radius:9px; width:36px; height:36px; cursor:pointer; font-size:15px; color:var(--ink); flex-shrink:0; }

.sn-burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px; margin-left:auto; }
.sn-burger span{ display:block; width:24px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s; }
.sn-mobile{ position:fixed; inset:0; z-index:70; background:var(--cream); display:none; flex-direction:column; padding:20px 24px; overflow-y:auto; }
.sn-mobile.open{ display:flex; }
.sn-mobile-top{ display:flex; align-items:center; justify-content:space-between; height:46px; margin-bottom:18px; }
.sn-mobile-close{ background:none; border:none; font-size:28px; cursor:pointer; color:var(--ink-soft); line-height:1; }
.sn-mobile a, .sn-mobile .sn-m-group > span{ display:block; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:800; font-size:20px; padding:12px 0; border-bottom:1px solid var(--line); }
.sn-mobile .sn-m-group span{ color:var(--ink-soft); font-size:13px; text-transform:uppercase; letter-spacing:.08em; padding:16px 0 6px; border:none; }
.sn-mobile .sn-m-sub{ font-size:16px !important; font-weight:700 !important; padding-left:14px !important; }
.sn-mobile .sn-logout{ margin-top:18px; align-self:flex-start; font-size:16px; }

.site-nav :focus-visible, .sn-mobile :focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
:root[data-theme="dark"] .sn-logo .sn-logo-dark{ display:none; } :root[data-theme="dark"] .sn-logo .sn-logo-white{ display:block; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sn-logo .sn-logo-dark{ display:none; } :root:not([data-theme="light"]) .sn-logo .sn-logo-white{ display:block; } }

@media (max-width:900px){
  .site-nav .sn-links, .site-nav .sn-right .sn-email, .site-nav .sn-right .sn-logout, .site-nav .sn-right .sn-theme{ display:none; }
  .sn-burger{ display:flex; }
}

/* A display formula cannot wrap. An isoelectronic series like
   N³⁻ > O²⁻ > F⁻ > Ne > Na⁺ > Mg²⁺ > Al³⁺ measured 73px wider than a 390px phone and pushed the
   whole page sideways with it. Give the formula its own scroller so the page stays put and the
   student can still reach the end of it. Applies wherever KaTeX renders. */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0 6px; }