/* ============================================================================
 * mission-control.css — GuruAi Neet v2 "Mission Control" design tokens.
 * Distilled from the claude.ai/design system (Home Reskin Explorations):
 * dual-theme surface — DARK cockpit by default, [data-theme="light"] parchment.
 * Loaded globally via index.html <link>, BEFORE mastery-os.css (which consumes
 * these tokens). Single source of truth for every colour in the app.
 *
 * Rules carried from Mastery OS:
 *  - Calm surface, LOUD progress. Achievement is the brightest thing.
 *  - Subject = accent colour ONLY (stripe / chip / ring), never chrome.
 *  - One mastery language: the red→gold scale, never a subject colour.
 *  - Esha is always the purple identity, never a subject or a signal.
 * ========================================================================== */

:root {
  /* ---- surfaces (dark cockpit) ---- */
  --app-bg:#0C111E;      /* app canvas */
  --rail-bg:#0A0F1A;     /* nav rail / top bar / sheets */
  --frame-border:#1D2740;
  --card:#131A2B;        /* raised card */
  --card-2:#1A2338;      /* inset / nested panel */
  --line:rgba(148,163,208,.16);   /* hairline border */
  --line-2:rgba(148,163,208,.26); /* stronger hairline (inputs, emphasis) */
  --hover:rgba(255,255,255,.05);
  --track:rgba(255,255,255,.08);  /* empty progress track */

  /* ---- ink ---- */
  --ink:#EDF0FA;         /* primary text */
  --muted:#9AA3BF;       /* secondary text */
  --micro:#6B7492;       /* eyebrows / 11px labels */

  /* ---- subject accents (identity only) ---- */
  --phy:#5AA7F0;  --phy-2:#8CC5F5;  --phy-tint:rgba(90,167,240,.10);  --phy-tint-b:rgba(90,167,240,.24);
  --che:#34D3A0;  --che-2:#7FE7C4;  --che-tint:rgba(52,211,160,.10);  --che-tint-b:rgba(52,211,160,.24);  --che-liquid:rgba(52,211,160,.5);
  --bio:#F06D96;  --bio-2:#F79CB8;  --bio-tint:rgba(240,109,150,.10); --bio-tint-b:rgba(240,109,150,.24);

  /* ---- Esha (one identity) ---- */
  --esha:#9188F5;  --esha-2:#B9B2FF;  --esha-tint:rgba(145,136,245,.13);  --esha-tint-b:rgba(145,136,245,.30);
  --hero-a:#4A41B8;  --hero-b:#2A2470;  --hero-border:rgba(145,136,245,.45);  --hero-ink:#EDF0FA;

  /* ---- signals / rewards ---- */
  --gold:#FFC24D;  --gold-tint:rgba(255,194,77,.10);  --gold-tint-b:rgba(255,194,77,.24);
  --flame:#FF8A4D;      /* streak fire */
  --cyan:#4DD6E8;  --cyan-tint:rgba(77,214,232,.10);  --cyan-tint-b:rgba(77,214,232,.24);  /* periodic / reference */
  --silver:#C7D0E0;
  --ok:#34D3A0;   --ok-tint:rgba(52,211,160,.12);
  --bad:#E06C68;  --bad-tint:rgba(217,83,79,.14);

  /* ---- mastery scale (the ONE progress language, low→high) ---- */
  --mastery-0:#FF2233;  --mastery-1:#FF881A;  --mastery-2:#FFD41A;  --mastery-3:#42EAA0;  --mastery-4:#FFB300;

  /* ---- shadows ---- */
  --shadow:rgba(10,14,26,.35);      /* frame drop */
  --card-shadow:rgba(0,0,0,.42);    /* raised card / hover lift */

  /* ---- textures used by set-piece surfaces ---- */
  --paper1:#1A2338;  --paper2:#222D48;  --bezel:#05070C;

  /* ---- figure well: light specimen surface for rendered figures that are
     ink-on-paper by nature (molecule SVGs, scanned crops, image assets).
     Stays LIGHT in both themes so black-stroke figures never vanish. ---- */
  --well:#FFFFFF;  --well-line:rgba(30,26,20,.12);  --well-ink:#221E18;

  /* ---- typography ---- */
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, sans-serif;
  --font-mono:ui-monospace, Menlo, "SF Mono", monospace;
  --text-hero:clamp(24px, 2.4vw, 32px);
  --text-title:clamp(19px, 1.6vw, 24px);
  --text-h2:clamp(15px, 1.1vw, 17px);
  --text-body:14px;
  --text-sm:12.5px;
  --text-label:11px;
  --text-eyebrow:9.5px;
  --lh-tight:1.15;
  --lh-body:1.5;
  --tracking-eyebrow:.16em;
  --tracking-mono:.05em;

  /* ---- spacing & radius ---- */
  --space-1:4px; --space-2:7px; --space-3:10px; --space-4:13px;
  --space-5:16px; --space-6:22px; --space-7:26px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:16px; --r-2xl:20px; --r-pill:999px;

  /* ---- elevation / interaction ---- */
  --elev-card:0 1px 0 var(--line);
  --elev-raised:0 12px 26px var(--card-shadow);
  --elev-frame:0 18px 44px var(--shadow);
  --elev-orb:0 6px 16px rgba(83,74,183,.4);
  --focus-ring:0 0 0 2px var(--app-bg), 0 0 0 4px var(--esha); /* 2px surface gap + solid esha ring — ≥3:1 non-text contrast on every surface incl. esha fills (the old 30%-alpha tint measured 1.4–1.7:1) */
  --ring-current:0 0 0 5px var(--sub-tint, var(--esha-tint)), 0 8px 20px var(--card-shadow);
  --press-shift:translateY(1px);
  --hover-lift:translateY(-3px);
  --hover-lift-lg:translateY(-4px);
  --dur-fast:.15s;
  --dur:.18s;
  --ease:cubic-bezier(.2,.8,.2,1);
  --scrim:rgba(10,14,26,.62);
  --blur:12px;

  /* ---- motion API ---- */
  --anim-enter:fadeUp .5s var(--ease) both;
  --anim-enter-stagger:80ms;
  --anim-esha-in:eshaIn .34s cubic-bezier(.2,.8,.2,1) both;
  --anim-view-in:viewIn .3s ease both;

  /* ======================================================================
     LEGACY ALIASES — Mastery OS v1 token names, re-pointed at the v2 set so
     every existing var() reference in components/mastery-os.css re-resolves
     to the Mission Control surface without a per-file edit. New code should
     use the v2 names above; these exist for compatibility only.
     ====================================================================== */
  --parch:var(--app-bg);
  --parch2:var(--card-2);
  --ink2:var(--muted);
  --ink3:var(--micro);
  --phyL:var(--phy-tint);  --phyD:var(--phy-2);
  --cheL:var(--che-tint);  --cheD:var(--che-2);
  --bioL:var(--bio-tint);  --bioD:var(--bio-2);
  --eshaL:var(--esha-tint); --eshaD:var(--esha-2);
  --okL:var(--ok-tint);
  --badL:var(--bad-tint);
  --line2:var(--line-2);
  --raise:var(--elev-raised);
  --press:none;
  --press-active:none;

  /* Fluid type scale (v1 names, kept — pages reference them) */
  --fs-display: clamp(26px, 5vw, 30px);
  --fs-h1: clamp(20px, 3.2vw, 22px);
  --fs-h2: clamp(16px, 2.4vw, 18px);
  --fs-h3: clamp(15px, 2vw, 16px);
  --fs-body: clamp(14px, 1.6vw, 15px);
  --fs-label: clamp(12px, 1.4vw, 13px);
  --fs-caption: clamp(11px, 1.2vw, 12px);
  /* App-frame layout tokens */
  --header-h: 56px; --header-h-concept: 64px;
  --sidebar-w: 240px; --rail-w: 72px; --bottombar-h: 60px;
  --esha-dock-w:344px; --tab-h:64px;
}

/* ---- light parchment daytime theme ---- */
[data-theme="light"] {
  --app-bg:#EEEBE2;  --rail-bg:#FFFFFF;  --frame-border:rgba(30,26,20,.10);
  --card:#FFFFFF;  --card-2:#F6F3EC;
  --line:rgba(30,26,20,.10);  --line-2:rgba(30,26,20,.18);
  --hover:rgba(30,26,20,.04);  --track:rgba(30,26,20,.08);
  --ink:#221E18;  --muted:#6E6A5C;  --micro:#A39E8F;

  --phy:#185FA5;  --phy-2:#2E74BE;  --phy-tint:rgba(24,95,165,.08);  --phy-tint-b:rgba(24,95,165,.22);
  --che:#0F6E56;  --che-2:#1C8468;  --che-tint:rgba(15,110,86,.08);  --che-tint-b:rgba(15,110,86,.22);  --che-liquid:rgba(15,110,86,.26);
  --bio:#993556;  --bio-2:#B24169;  --bio-tint:rgba(153,53,86,.08);  --bio-tint-b:rgba(153,53,86,.22);

  --esha:#534AB7;  --esha-2:#6C63D8;  --esha-tint:rgba(83,74,183,.10);  --esha-tint-b:rgba(83,74,183,.24);
  --hero-a:#534AB7;  --hero-b:#3A3392;  --hero-border:rgba(83,74,183,.5);  --hero-ink:#FFFFFF;

  --gold:#B7791F;  --gold-tint:rgba(183,121,31,.10);  --gold-tint-b:rgba(183,121,31,.26);
  --flame:#D2691E;
  --cyan:#0E8FA6;  --cyan-tint:rgba(14,143,166,.08);  --cyan-tint-b:rgba(14,143,166,.22);
  --silver:#8C93A3;
  --ok:#0F6E56;   --ok-tint:rgba(15,110,86,.10);
  --bad:#A32D2D;  --bad-tint:rgba(163,45,45,.10);

  --shadow:rgba(80,70,45,.16);  --card-shadow:rgba(80,70,45,.14);
  --paper1:#F3EFE6;  --paper2:#FFFFFF;  --bezel:#141210;
  --scrim:rgba(30,26,20,.45);
}

/* Subject scope helper — set data-subj on a container to bind --sub* there. */
[data-subj="physics"]  {--sub:var(--phy);--sub-2:var(--phy-2);--sub-tint:var(--phy-tint);--sub-tint-b:var(--phy-tint-b);}
[data-subj="chemistry"]{--sub:var(--che);--sub-2:var(--che-2);--sub-tint:var(--che-tint);--sub-tint-b:var(--che-tint-b);}
[data-subj="biology"]  {--sub:var(--bio);--sub-2:var(--bio-2);--sub-tint:var(--bio-tint);--sub-tint-b:var(--bio-tint-b);}

/* ── FORM-CONTROL CONTRAST GUARD (design-system rule) ───────────────────────
 * Dual theme: native controls (inputs, <select> lists, autofill, caret) must
 * follow the ACTIVE theme, never the OS. color-scheme is set per theme and
 * every field gets an explicit ink + surface so no field can ever render
 * white-on-white / dark-on-dark (the mobile-number bug class). */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
input, textarea, select { color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--micro); opacity: 1; }
/* The OPEN dropdown popup is OS chrome — some Android WebViews paint it LIGHT
   regardless of color-scheme, while var(--ink) resolves from the page (WHITE in
   dark cockpit) → white-on-white options (owner repro 2026-08-02, second
   occurrence of this bug class). Rule 30: explicit near-black on an explicit
   light background — never theme variables inside the native popup. The CLOSED
   select face above stays theme-styled. */
select option { color: #0f172a; background: #ffffff; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: #EDF0FA;
  -webkit-box-shadow: 0 0 0 1000px #1A2338 inset;
  caret-color: #EDF0FA;
}
[data-theme="light"] input:-webkit-autofill, [data-theme="light"] input:-webkit-autofill:hover, [data-theme="light"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: #221E18;
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
  caret-color: #221E18;
}

/* Ink for text sitting ON a filled subject/signal accent: near-black on the
   bright dark-theme accents, white on the deep light-theme accents. */
.on-accent { color: #08101E; }
[data-theme="light"] .on-accent { color: #FFFFFF; }

/* Brand mark theme swap: white tracing on the dark rail, colour on parchment. */
.logo-on-light { display: none; }
[data-theme="light"] .logo-on-dark { display: none; }
[data-theme="light"] .logo-on-light { display: inline-block; }

/* Keyboard focus — one visible ring everywhere, Esha purple. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

/* Cockpit scrollbars — quiet, hairline, theme-aware. */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* KaTeX on the cockpit: formulas render in the surrounding ink colour
   (KaTeX uses currentColor), so nothing to override — but the fraction/sqrt
   RULES are drawn with border-color:currentColor too, already fine. Guard
   only the odd hardcoded dark ink some content embeds. */
.katex { color: inherit; }

/* ── Motion: ALL @keyframes live in /styles/animations.css (the ONE animation
   library — loaded right after this file in index.html). Never define
   keyframes here or in tailwind.config.js; see animations.css header. ── */