/* QuantaLearn design system layer — the "quantum instrument" identity.

   Loaded AFTER every older stylesheet (styles.css … styles-freebuild.css) and
   BEFORE styles-shell.css / styles-learn.css / styles-tutor.css / styles-home.css,
   which consume these tokens. It extends the base tokens in styles.css
   (--ground, --surface*, --ink*, --accent*, --rule*, --good/--warn/--signal);
   it never renames them, so every existing var() call site keeps working.

   Token contract (names are fixed — values may be refined):
     --ds-deck, --ds-deck-2       sidebar / control-deck surfaces
     --ds-deck-ink, --ds-deck-ink-2, --ds-deck-ink-3
     --ds-deck-line               hairline on the deck
     --ds-deck-hover              hover wash on deck items
     --ds-deck-active             active item wash (soft, never a heavy block)
     --ds-line, --ds-line-strong  hairlines on content surfaces
     --ds-glow                    accent glow colour (use at low alpha, sparingly)
     --ds-accent-grad             probability-inspired accent gradient
     --ds-radius-1/2/3/pill       6 / 10 / 14 / 999
     --ds-shadow-1/2/pop          resting / raised / floating
     --ds-dur-1/2/3               150 / 220 / 300ms
     --ds-ease, --ds-ease-out
     --ds-focus                   focus ring box-shadow
     --ds-grid                    faint scientific grid (background-image)
     --shell-sidebar-w, --shell-sidebar-w-collapsed, --shell-topbar-h
     --shell-bottomnav-h          0px on desktop; the shell sets it on mobile
*/

:root {
  --ds-deck:#F7F8FB; --ds-deck-2:#EEF1F7;
  --ds-deck-ink:#141827; --ds-deck-ink-2:#4A5266; --ds-deck-ink-3:#7A8396;
  --ds-deck-line:#E1E5EE;
  --ds-deck-hover:rgba(47,63,191,.06);
  --ds-deck-active:rgba(47,63,191,.09);
  --ds-line:#DCE1EB; --ds-line-strong:#C3CAD8;
  --ds-glow:rgba(74,90,216,.28);
  --ds-accent-grad:linear-gradient(135deg, #2F3FBF 0%, #5B4FD6 55%, #1F8AA8 100%);
  --ds-radius-1:6px; --ds-radius-2:10px; --ds-radius-3:14px; --ds-radius-pill:999px;
  --ds-shadow-1:0 1px 2px rgba(16,19,32,.05), 0 1px 1px rgba(16,19,32,.03);
  --ds-shadow-2:0 1px 2px rgba(16,19,32,.05), 0 8px 24px -12px rgba(16,19,32,.18);
  --ds-shadow-pop:0 2px 6px rgba(16,19,32,.08), 0 24px 48px -16px rgba(16,19,32,.28);
  --ds-dur-1:150ms; --ds-dur-2:220ms; --ds-dur-3:300ms;
  --ds-ease:cubic-bezier(.2,.8,.2,1); --ds-ease-out:cubic-bezier(.16,1,.3,1);
  --ds-focus:0 0 0 3px rgba(74,90,216,.35);
  --ds-grid:linear-gradient(rgba(16,19,32,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(16,19,32,.035) 1px, transparent 1px);
  --shell-sidebar-w:248px; --shell-sidebar-w-collapsed:64px; --shell-topbar-h:56px;
  --shell-bottomnav-h:0px;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --ds-deck:#0E111A; --ds-deck-2:#141826;
    --ds-deck-ink:#E8EBF4; --ds-deck-ink-2:#A3ABBE; --ds-deck-ink-3:#6E778B;
    --ds-deck-line:#1E2433;
    --ds-deck-hover:rgba(142,153,255,.07);
    --ds-deck-active:rgba(142,153,255,.12);
    --ds-line:#232A3A; --ds-line-strong:#323B50;
    --ds-glow:rgba(142,153,255,.30);
    --ds-accent-grad:linear-gradient(135deg, #8E99FF 0%, #A58CFF 55%, #4FC3D9 100%);
    --ds-shadow-1:0 1px 2px rgba(0,0,0,.4);
    --ds-shadow-2:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.8);
    --ds-shadow-pop:0 2px 8px rgba(0,0,0,.5), 0 28px 56px -18px rgba(0,0,0,.9);
    --ds-focus:0 0 0 3px rgba(142,153,255,.38);
    --ds-grid:linear-gradient(rgba(237,240,247,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(237,240,247,.03) 1px, transparent 1px);
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --ds-deck:#0E111A; --ds-deck-2:#141826;
  --ds-deck-ink:#E8EBF4; --ds-deck-ink-2:#A3ABBE; --ds-deck-ink-3:#6E778B;
  --ds-deck-line:#1E2433;
  --ds-deck-hover:rgba(142,153,255,.07);
  --ds-deck-active:rgba(142,153,255,.12);
  --ds-line:#232A3A; --ds-line-strong:#323B50;
  --ds-glow:rgba(142,153,255,.30);
  --ds-accent-grad:linear-gradient(135deg, #8E99FF 0%, #A58CFF 55%, #4FC3D9 100%);
  --ds-shadow-1:0 1px 2px rgba(0,0,0,.4);
  --ds-shadow-2:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.8);
  --ds-shadow-pop:0 2px 8px rgba(0,0,0,.5), 0 28px 56px -18px rgba(0,0,0,.9);
  --ds-focus:0 0 0 3px rgba(142,153,255,.38);
  --ds-grid:linear-gradient(rgba(237,240,247,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(237,240,247,.03) 1px, transparent 1px);
}

/* =====================================================================
   SHARED COMPONENTS — the parts every screen draws with, so a button, a
   field, a focus ring or a page heading looks the same on every view.
   Everything below styles existing class names only; no markup depends
   on it, and removing this block returns the older look untouched.
   ===================================================================== */

/* ---- buttons: one shape, one type ramp, one press ---- */
.btn {
  border-radius: var(--ds-radius-1);
  border-color: var(--ds-line-strong);
  font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .005em;
  transition:
    border-color var(--ds-dur-1) var(--ds-ease),
    color var(--ds-dur-1) var(--ds-ease),
    background-color var(--ds-dur-1) var(--ds-ease),
    transform var(--ds-dur-1) var(--ds-ease);
}
.btn.primary { font-weight: 600; }
.btn.tiny { font-size: 11.5px; border-radius: 5px; }
.btn:not(:disabled):not([disabled]):active { transform: translateY(1px); }
.btn:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus);
}

/* ---- fields ---- */
select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
  border-radius: var(--ds-radius-1);
}
input[type="text"]:focus-visible,
input[type="search"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
textarea:focus-visible { border-color: var(--accent); }

/* ---- page headings: the same title / lede on every view ---- */
h2.vh {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.1;
  color: var(--ink);
}
p.vd { color: var(--ink-2); line-height: 1.55; max-width: 68ch; }

/* ---- surfaces: panels share the card radius and hairline ---- */
.panel { border-radius: var(--ds-radius-2); }

/* ---- page transition: a short fade + lift as a view comes on ----
   fill-mode `backwards` only, so no transform stays on the view once it has
   landed (a lingering transform would re-anchor position:fixed children).
   Views that host the real workbench or the 3D island fade only. */
.view.on { animation: ds-view-in 240ms var(--ds-ease-out) backwards; }
:is(#view-build, #view-expedition, #view-playground, #view-mission).view.on {
  animation-name: ds-view-fade;
}
@keyframes ds-view-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
@keyframes ds-view-fade { from { opacity: 0; } }

/* ---- reduced motion, everywhere ----
   styles.css already zeroes animation for the OS setting, but its in-app
   rule (:root[data-reduced-motion]) only reached the root element itself.
   This reaches every descendant, for both the OS and the in-app switch. */
:root[data-reduced-motion="true"] *,
:root[data-reduced-motion="true"] *::before,
:root[data-reduced-motion="true"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
:root[data-reduced-motion="true"] .view.on { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .view.on { animation: none !important; }
  html { scroll-behavior: auto !important; }
}