/* design.css — visual system for the Complex Frequency story.
   Authored by host; agents match this. Expected shell DOM (see index.html):
     #scene-host   full-bleed 3D scene (VIZ mounts here)
     #narrative    glass panel: .kicker  h1.title  .prose  figure.eq  .controls
     #stepnav      bottom bar: #prev  .dots  #next  #counter
*/

:root {
  --bg:        #0e1116;
  --bg-2:      #0b0e13;
  --panel:     rgba(18, 23, 30, 0.72);
  --panel-2:   rgba(13, 17, 23, 0.82);   /* denser glass for the nav bar */
  --line:      #232b36;
  --line-2:    rgba(255, 255, 255, 0.06);/* hairline for inner separators */
  --text:      #e9eef5;
  --mute:      #93a0b4;
  --accent:    #bdb2ff;
  --accent-dim: rgba(189, 178, 255, 0.16);
  --radial:    #4cc9f0;   /* ρ */
  --azimuth:   #06d6a0;   /* ω, N */
  --torsion:   #ef476f;   /* ξ, B */
  --tangent:   #ffd166;   /* T, v */

  --r-pill: 999px;
  --r-lg: 18px;  --r-md: 12px;  --r-sm: 8px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.38);
  --glow-accent: 0 0 0 1px var(--accent), 0 0 16px rgba(189,178,255,.45);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- scene backdrop (full bleed hero) ---------------------------------- */
#scene-host {
  position: fixed; inset: 0;
  background:
    radial-gradient(1100px 760px at 62% 42%, #161d27 0%, var(--bg) 62%),
    var(--bg);
}
#scene-host canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#scene-host canvas:active { cursor: grabbing; }
/* gentle vignette so the glass panel reads */
#scene-host::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 45%, rgba(8,11,16,.55) 100%);
}

/* ---- narrative glass panel --------------------------------------------- */
#narrative {
  position: fixed; top: 0; right: 0; height: 100vh;
  width: min(440px, 40vw);
  padding: 64px 44px;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
}
/* a faint accent seam down the panel edge to lift it off the scene */
#narrative::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent-dim) 22%,
              var(--accent-dim) 78%, transparent);
  pointer-events: none;
}
/* the swappable content fades/slides between steps */
#narrative .content {
  display: flex; flex-direction: column; gap: 18px;
  transition: opacity .34s var(--ease), transform .34s var(--ease);
  will-change: opacity, transform;
}
#narrative .content.leaving { opacity: 0; transform: translateY(12px); }

.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 9px;
}
/* a small accent tick before the kicker text */
.kicker::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: var(--accent); opacity: .8;
}
.title {
  margin: 0; font-size: clamp(27px, 3.2vw, 39px); font-weight: 700;
  line-height: 1.1; letter-spacing: -.015em;
  text-wrap: balance;
}
.prose { color: #c5cedb; font-size: 15.5px; line-height: 1.66; }
.prose p { margin: 0 0 11px; }
.prose p:last-child { margin-bottom: 0; }
.prose b, .prose strong { color: var(--text); font-weight: 650; }
.prose i, .prose em { color: #d7deea; font-style: italic; }

/* equation block (SVG) with gloss caption */
figure.eq {
  margin: 6px 0 0; padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
figure.eq img, figure.eq svg { width: 100%; height: auto; max-height: 90px;
  filter: invert(.92) hue-rotate(180deg); /* white-on-dark for black LaTeX SVGs */ }
figure.eq figcaption { margin-top: 11px; font-size: 12.5px; line-height: 1.5;
  color: var(--mute); padding-top: 10px; border-top: 1px solid var(--line-2); }

/* ---- per-step controls -------------------------------------------------- */
.controls { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.controls:empty { display: none; }
.ctl-row .ctl-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; margin-bottom: 8px;
}
.ctl-row .ctl-label .v {
  font-variant-numeric: tabular-nums; color: var(--text);
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 9px; font-size: 12px; min-width: 42px;
  text-align: center; transition: border-color .2s var(--ease), color .2s var(--ease);
}
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 3px; background: #1c2430; border: 1px solid var(--line); outline: none;
  cursor: pointer; transition: border-color .2s var(--ease);
}
input[type="range"]:hover { border-color: #2f3a49; }
input[type="range"]:focus-visible { border-color: var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(189,178,255,.5); cursor: pointer;
  transition: transform .15s var(--ease-out), box-shadow .2s var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.2); box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(189,178,255,.7);
}
input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--bg); cursor: pointer;
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(189,178,255,.5);
  transition: transform .15s var(--ease-out);
}
input[type="range"]:hover::-moz-range-thumb { transform: scale(1.12); }

/* ---- bottom step nav: one cohesive glass pill --------------------------- */
/* Centred under the 3D area (the space left of the narrative panel). All the
   chrome lives inside this single bar so nothing overlaps the way the old
   fixed counter did. nav.js builds: #prev · #dots(line+dots) · .nav-meta · #next */
#stepnav {
  position: fixed; bottom: 26px;
  left: calc((100vw - min(440px, 40vw)) / 2);   /* centre of the scene area */
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  max-width: calc(100vw - 32px);
}

/* prev / next arrow buttons */
#stepnav button#prev, #stepnav button#next {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); color: var(--text);
  border: 1px solid var(--line); font-size: 16px; line-height: 1; cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .2s var(--ease-out), color .2s var(--ease), opacity .2s var(--ease);
}
#stepnav button#prev:hover, #stepnav button#next:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-dim); transform: translateY(-1px);
}
#stepnav button#prev:active, #stepnav button#next:active { transform: translateY(0) scale(.95); }
#stepnav button#prev:focus-visible, #stepnav button#next:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
#stepnav button:disabled {
  opacity: .28; cursor: default; transform: none;
  border-color: var(--line); color: var(--text); background: transparent;
}

/* ---- the progress track: connecting line + labelled dots ---------------- */
.dots {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 0 14px; height: 38px;
}
/* the thin line that connects the dots, with a fill that grows to the active step */
.dot-line {
  position: absolute; left: 14px; right: 14px; top: 50%; height: 2px;
  transform: translateY(-50%); border-radius: 2px;
  background: var(--line); overflow: hidden; pointer-events: none;
}
.dot-line-fill {
  display: block; height: 100%; width: 0%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #cabfff);
  box-shadow: 0 0 8px rgba(189,178,255,.5);
  transition: width .42s var(--ease-out);
}
.dots .dot {
  position: relative; flex: none; width: 11px; height: 11px; border-radius: 50%;
  padding: 0; background: #2b3543; border: 2px solid transparent; cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease-out),
              box-shadow .25s var(--ease), border-color .25s var(--ease);
}
/* completed steps read as filled accent (sit on the progress line) */
.dots .dot.done { background: var(--accent); opacity: .65; }
/* hover/focus: enlarge + ring */
.dots .dot:hover { transform: scale(1.35); background: #3a4759; }
.dots .dot:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-dim); }
/* active step: bright, ringed, lifted */
.dots .dot.active {
  background: var(--accent); transform: scale(1.45);
  border-color: var(--bg); box-shadow: var(--glow-accent);
}

/* per-dot tooltip showing the step title (read from STEPS via nav.js) */
.dot-tip {
  position: absolute; bottom: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 10px; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease-out);
}
.dot-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--line);
}
.dots .dot:hover .dot-tip, .dots .dot:focus-visible .dot-tip {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ---- in-bar meta: current step title + "01 / 06" position --------------- */
.nav-meta {
  display: flex; align-items: baseline; gap: 9px;
  padding: 0 14px 0 12px; border-left: 1px solid var(--line-2);
  min-width: 0; max-width: 230px;
}
.nav-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-pos {
  flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--mute); font-variant-numeric: tabular-nums;
}

/* the original fixed bottom-left counter is folded into the bar; hide it but
   keep the element + its text alive for anything that reads #counter. */
#counter { position: fixed; left: 26px; bottom: 30px; font-size: 12px; color: var(--mute);
  font-variant-numeric: tabular-nums; pointer-events: none; }
#counter.counter-folded {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- responsive: stack narrative under scene on narrow screens ---------- */
@media (max-width: 820px) {
  #narrative { position: fixed; inset: auto 0 0 0; height: auto; width: 100%;
    border-left: none; border-top: 1px solid var(--line); padding: 22px 22px 96px;
    justify-content: flex-start; }
  #narrative::before { display: none; }
  #scene-host::after { background: linear-gradient(180deg, transparent 50%, rgba(8,11,16,.6)); }
  /* the panel now spans full width, so centre the bar on the whole viewport */
  #stepnav { left: 50%; bottom: 18px; }
  /* drop the title label on small screens; keep dots + position counter */
  .nav-title { display: none; }
  .nav-meta { max-width: none; }
}

@media (max-width: 480px) {
  /* tighten the track so the pill fits very narrow phones */
  .dots { gap: 9px; padding: 0 10px; }
  .dot-line { left: 10px; right: 10px; }
  .nav-meta { display: none; }   /* counter shown inline gets cramped; rely on dots */
}