/* =====================================================================
   Glass theme: a soft, slowly moving colour field behind frosted,
   translucent panels. Loaded last on every page, on top of the other
   stylesheets.

   Performance: real blur (backdrop-filter) is only used on a few surfaces
   that stay put or float over content (sidebar, top bar, dialogs, menus,
   canvas tools). Cards are translucent without blur: over a soft
   background that reads the same and costs nothing to scroll.
   ===================================================================== */

:root,
:root[data-theme="dark"] {
  --aurora-1: rgba(79, 140, 255, 0.3);
  --aurora-2: rgba(139, 92, 246, 0.24);
  --aurora-3: rgba(45, 212, 191, 0.15);
  --glass: rgba(14, 15, 21, 0.55);
  --glass-strong: rgba(17, 18, 25, 0.86);
  --glass-solid: rgba(19, 20, 27, 0.96);
  --glass-solid-2: rgba(30, 31, 40, 0.96);
  --glass-card: rgba(255, 255, 255, 0.032);
  --glass-card-2: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.075);
  --glass-border-strong: rgba(255, 255, 255, 0.13);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --glass-blur: blur(22px) saturate(160%);
  --grad: linear-gradient(135deg, #4f8cff 0%, #7c6cff 55%, #a855f7 100%);
  --grad-text: linear-gradient(100deg, #6aa1ff 0%, #a78bfa 45%, #2dd4bf 100%);
  --glow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(79, 140, 255, 0.18);
  /* primary buttons: monochrome, inverted against the page (light on dark) */
  --btn-primary: linear-gradient(180deg, #ffffff 0%, #e4e6ec 100%);
  --btn-primary-ink: #0c0d12;
  --btn-primary-edge: rgba(255, 255, 255, 0.9);
  --btn-primary-glow: 0 6px 22px rgba(255, 255, 255, 0.14);
}
:root[data-theme="light"] {
  --aurora-1: rgba(79, 140, 255, 0.26);
  --aurora-2: rgba(168, 85, 247, 0.18);
  --aurora-3: rgba(20, 184, 166, 0.15);
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.9);
  --glass-solid: rgba(255, 255, 255, 0.97);
  --glass-solid-2: rgba(243, 244, 248, 0.98);
  --glass-card: rgba(255, 255, 255, 0.58);
  --glass-card-2: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(15, 23, 42, 0.08);
  --glass-border-strong: rgba(15, 23, 42, 0.14);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 16px 40px rgba(30, 41, 59, 0.1);
  --grad: linear-gradient(135deg, #2f6fed 0%, #6355f0 55%, #9333ea 100%);
  --grad-text: linear-gradient(100deg, #2f6fed 0%, #7c3aed 50%, #0d9488 100%);
  --glow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(47, 111, 237, 0.16);
  /* primary buttons: monochrome, inverted against the page (dark on light) */
  --btn-primary: linear-gradient(180deg, #2a2c36 0%, #111218 100%);
  --btn-primary-ink: #ffffff;
  --btn-primary-edge: #0b0c10;
  --btn-primary-glow: 0 6px 18px rgba(15, 23, 42, 0.22);
}

/* ------------------------------------------------------------ the colour field */
body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: -12vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40vmax 32vmax at 10% 6%, var(--aurora-1), transparent 70%),
    radial-gradient(36vmax 30vmax at 90% 14%, var(--aurora-2), transparent 70%),
    radial-gradient(44vmax 34vmax at 62% 104%, var(--aurora-3), transparent 70%);
  animation: aurora 40s ease-in-out infinite alternate;
}
@keyframes aurora {
  50% {
    transform: translate3d(2.5vmax, -2vmax, 0) rotate(4deg) scale(1.06);
  }
  100% {
    transform: translate3d(-2vmax, 1.5vmax, 0) rotate(-3deg) scale(1.02);
  }
}

/* ------------------------------------------------------------ app shell */
/* Inside the app's frame, cards and inputs become translucent. Dialogs, menus
   and toasts live outside it and keep their own (frosted) backgrounds below. */
.shell {
  --surface: var(--glass);
  --panel: var(--glass-card);
  --panel-2: var(--glass-card-2);
  --border: var(--glass-border);
  --border-strong: var(--glass-border-strong);
}
.sidebar,
.topbar {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
/* The gap above the floating top bar, where the page scrolls past: a frosted
   strip fixed to the window (a blur inside the bar itself couldn't see the page). */
.topbar::before {
  display: none;
}
body:not(.lp)::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  z-index: 25;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
/* lesson tabs stick right under the top bar, with no gap for text to show through */
.toc {
  top: 68px;
  padding-top: 16px;
  margin-top: -6px;
}
#main {
  background: var(--glass);
  border-color: var(--glass-border);
  box-shadow: var(--glass-edge);
}
.card,
.rail-card {
  box-shadow: var(--glass-edge);
}

/* the active page in the sidebar: a lit pill with an accent edge */
.nav-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  position: relative;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: var(--grad);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.nav-item.active .ico {
  color: var(--accent);
}

/* things that float over the page: frosted */
.toc,
.ws-head,
.tour-card {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* Panels over the design canvas (and small tooltips) carry a lot of text on top of
   busy diagrams: nearly solid, so nothing behind can show through the words. Their
   insides use solid colours too, not the frame's see-through ones. */
.ed-palette,
.ed-toolbar,
.ed-dock,
.ed-library,
.ed-props,
.ed-empty-card,
.lab,
.menu,
.col em {
  --panel: var(--glass-solid-2);
  --panel-2: var(--glass-solid-2);
  background: var(--glass-solid);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-edge), var(--shadow-lg);
}

/* ------------------------------------------------------------ sidebar */
/* the list fades out at its top and bottom edges instead of being cut off */
.side-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
}

/* section headings: small spaced capitals */
.nav-group {
  border-bottom-color: color-mix(in srgb, var(--text) 7%, transparent);
}
.nav-group-head {
  padding: 12px 10px 8px;
  font: 600 11px Inter, system-ui, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.nav-group-head .chev {
  opacity: 0.7;
}

/* Nested lists hang off a guide line with a rounded branch into each item,
   like a file tree. --tree-x is where the line runs (under the parent's icon). */
.nav-tree-body,
.nav-sub {
  --tree-x: 20px;
  --tree-line: color-mix(in srgb, var(--text) 20%, transparent);
  position: relative;
  margin: 2px 0 6px;
  padding: 0 0 0 calc(var(--tree-x) + 16px);
  border-left: 0;
}
.nav-sub {
  --tree-x: 18px;
}
.nav-tree-body > a,
.nav-sub > a {
  position: relative;
}
/* the curve into each item */
.nav-tree-body > a::before,
.nav-sub > a::before {
  content: "";
  position: absolute;
  left: calc(-16px - 1px);
  top: 0;
  width: 12px;
  height: 50%;
  border-left: 1.5px solid var(--tree-line);
  border-bottom: 1.5px solid var(--tree-line);
  border-bottom-left-radius: 9px;
  pointer-events: none;
}
/* the line carries on past every item but the last */
.nav-tree-body > a:not(:last-child)::after,
.nav-sub > a:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(-16px - 1px);
  top: 50%;
  bottom: 0;
  border-left: 1.5px solid var(--tree-line);
  pointer-events: none;
}
/* the current page: a soft pill, and its branch lit up */
.nav-tree-body > a.active::before,
.nav-sub > a.active::before {
  border-color: var(--text);
}
.nav-leaf {
  padding: 8px 12px;
  border-radius: 10px;
}
.nav-leaf.active,
.nav-ch.active {
  background: color-mix(in srgb, var(--text) 9%, transparent);
  color: var(--text);
  font-weight: 600;
}
.nav-ch {
  padding: 6px 10px 6px 8px;
  border-radius: 10px;
}

/* chapter groups ("Foundations" …) */
.nav-part summary {
  padding: 9px 10px;
  border-radius: 10px;
  font-weight: 600;
}

/* chapter progress rings: drawn with a mask, so the see-through sidebar
   never shows through the middle */
.ch-dot {
  position: relative;
  background: none;
  isolation: isolate;
}
.ch-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 18%, transparent) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 81%);
  mask: radial-gradient(closest-side, transparent 78%, #000 81%);
}
.ch-dot.complete {
  background: var(--ok);
}
.ch-dot.complete::before {
  display: none;
}

/* The design report covers the workspace (the canvas under it is hidden): it shows the
   same glass as every other page instead of a flat black sheet. */
.ws-report {
  background: transparent;
}

/* ------------------------------------------------------------ overlays (outside the frame) */
.modal,
.toast,
.ui-select-pop,
.coach {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-edge), var(--shadow-lg);
}
.modal-backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------ buttons */
/* Primary: monochrome and inverted (near-white on the dark theme, near-black on
   the light one), with a faint shade and a soft lift on hover. Blue stays the
   accent for links, selected chips and highlights. */
.btn.primary {
  background: var(--btn-primary);
  border-color: var(--btn-primary-edge);
  color: var(--btn-primary-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: filter 0.15s, box-shadow 0.15s, transform 0.08s;
}
.btn.primary:hover:not(:disabled) {
  background: var(--btn-primary);
  border-color: var(--btn-primary-edge);
  filter: brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), var(--btn-primary-glow);
}
.btn.primary:active:not(:disabled) {
  filter: brightness(0.95);
  transform: scale(0.98);
}
.btn.primary.loading::after {
  border-color: var(--btn-primary-ink) transparent var(--btn-primary-ink) transparent;
}
/* Secondary: glass with a hairline edge; a little lighter on hover */
.btn:not(.primary):not(.ghost):not(.danger) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.btn:not(.primary):not(.ghost):not(.danger):hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
}

/* ------------------------------------------------------------ headings */
.hl,
.grad-text {
  background: var(--grad-text);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s ease-in-out infinite alternate;
}
@keyframes shimmer {
  to {
    background-position: 100% 0;
  }
}

/* ------------------------------------------------------------ landing page */
.lp-nav.scrolled,
.lp-nav.menu-open {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom-color: var(--glass-border);
}
.lp-hero {
  isolation: isolate;
}
.lp-sim {
  background: color-mix(in srgb, var(--glass-strong) 58%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-edge), 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}
.sim-top {
  background: transparent;
}
.lp-eyebrow,
.lp-invite {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.lp-eyebrow {
  background: var(--glass-card-2);
  border-color: var(--glass-border-strong);
}
.lp .tile,
.lp .plan,
.lp .lp-stats-row > *,
.lp .card {
  background: var(--glass-card);
  border-color: var(--glass-border);
  box-shadow: var(--glass-edge);
}
/* a soft light that follows the pointer across tiles and plans (landing.js sets --mx/--my) */
.lp .tile,
.lp .plan {
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}
.lp .tile::after,
.lp .plan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 45%);
}
.lp .tile:hover::after,
.lp .plan:hover::after {
  opacity: 1;
}
.lp .tile:hover,
.lp .plan:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-border));
}
.lp .plan.featured {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: var(--glass-edge), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 24px 60px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* the 3D globe behind the hero (landing/globe3d.js) */
.hero-3d {
  position: absolute;
  inset: -64px 0 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.hero-3d.on {
  opacity: 1;
}
.hero-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 900px) {
  .hero-3d.on {
    opacity: 0.6;
  }
}

/* ------------------------------------------------------------ type scale (the app) */
/* Smaller and lighter than before: calmer pages that fit more on screen.
   The landing page (body.lp) keeps its own, bigger scale. */
body:not(.lp) {
  font-size: 15px;
  line-height: 1.6;
}
.page h1,
.page-head h1,
.dash-head h1,
.sheet-intro h1 {
  font-size: clamp(22px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.ch-head h1 {
  font-size: clamp(22px, 2.5vw, 30px);
}
.block-title {
  font-size: 17px;
}
.sec-head h2 {
  font-size: 19px;
}
.card h2 {
  font-size: 16.5px;
}
.rail-card h3 {
  font-size: 15px;
}
.sheet-intro p,
.lead {
  font-size: 14.5px;
}
.prose {
  font-size: 15px;
}
.prose h3 {
  font-size: 16.5px;
}
.btn.big {
  font-size: 14.5px;
}

/* sidebar: regular weight, a touch smaller; the current page stays bold */
.nav-item {
  gap: 11px;
  padding: 8px 10px;
  font: 400 14px Inter, system-ui, sans-serif;
  color: color-mix(in srgb, var(--text) 84%, var(--muted));
}
.nav-item.active {
  font-weight: 600;
}
.nav-item .ico {
  width: 18px;
  height: 18px;
}
.nav-leaf {
  font-size: 13.5px;
}
.nav-ch {
  font-size: 13px;
}
.nav-part summary {
  font-size: 13px;
  font-weight: 500;
}
.side-user b {
  font-size: 13.5px;
}
.side-user span span,
.side-user .nav-label > span {
  font-size: 12px;
}

/* ------------------------------------------------------------ scrollbars, everywhere */
/* No grey bars with arrow buttons: a thin rounded thumb that shows while the
   pointer is over whatever scrolls (always faintly for the page itself, so it's
   clear the page scrolls). Rows that hide their scrollbar on purpose still do. */
@supports selector(::-webkit-scrollbar) {
  /* Chrome uses the standard properties instead of the ones below when they're set */
  .side-scroll,
  .toc {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 10px;
    background: transparent;
    background-clip: padding-box;
  }
  :hover::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--text) 20%, transparent);
  }
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active {
    background-color: color-mix(in srgb, var(--text) 38%, transparent);
  }
  html::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--text) 14%, transparent);
  }
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  :hover,
  html {
    scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent;
  }
}

/* ------------------------------------------------------------ motion preferences */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .hl,
  .grad-text {
    animation: none;
  }
}