/* ────────────────────────────────────────────────────────────────────────
   Motion layer — design tokens + base styles for the GSAP-driven upgrades.

   This file is loaded AFTER the legacy styles.css so its rules win on
   specificity ties. It only adds; it does not redefine existing tokens.

   Naming convention: every motion-related custom property is prefixed
   `--motion-*`. Every motion-related class is prefixed `.motion-*` or
   `.fx-*`. Data-attributes use `data-motion-*`.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Spring / easing tokens */
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-ease-out:    cubic-bezier(0.2, 0.65, 0.3, 1);
  --motion-ease-in:     cubic-bezier(0.55, 0, 0.85, 0.55);

  /* Timing tokens */
  --motion-dur-micro:   120ms;
  --motion-dur-fast:    220ms;
  --motion-dur-base:    420ms;
  --motion-dur-slow:    820ms;

  /* Stagger steps */
  --motion-stagger:     55ms;

  /* Reticle / cursor */
  --motion-cursor-size: 22px;
  --motion-cursor-color: var(--accent, #38bdf8);

  /* Spring highlight (cursor-tracking radial) */
  --motion-spring-glow: rgba(255, 255, 255, 0.18);

  /* Fluid sim canvas overlay opacity */
  --motion-fluid-alpha: 0.85;
}

html[data-theme="light"] {
  --motion-spring-glow: rgba(2, 132, 199, 0.18);
  --motion-fluid-alpha: 0.50;
}

/* ────────────────────────────────────────────────────────────────────────
   Reduced motion override — collapse every motion-* token to instant.
   The motion bootstrap also sets gsap.defaults({duration:0}), but pure-CSS
   transitions need this layer.
   ──────────────────────────────────────────────────────────────────────── */
html.motion-reduced {
  --motion-dur-micro: 0ms;
  --motion-dur-fast: 0ms;
  --motion-dur-base: 0ms;
  --motion-dur-slow: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    --motion-dur-micro: 0ms;
    --motion-dur-fast: 0ms;
    --motion-dur-base: 0ms;
    --motion-dur-slow: 0ms;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Spring micro-interaction (magnetic CTAs).
   Attached by scripts/motion/springs.js via the `.motion-spring` class.
   The radial highlight follows the cursor using --mx, --my updated by JS.
   ──────────────────────────────────────────────────────────────────────── */
.motion-spring {
  position: relative;
  will-change: transform;
}

.motion-spring::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    120px circle at var(--mx, 50%) var(--my, 50%),
    var(--motion-spring-glow),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--motion-dur-fast) var(--motion-ease-out);
  z-index: 0;
}

.motion-spring:hover::after {
  opacity: 1;
}

/* Keep button content above the highlight overlay */
.motion-spring > * {
  position: relative;
  z-index: 1;
}

html.motion-reduced .motion-spring {
  transform: none !important;
}

html.motion-reduced .motion-spring::after {
  display: none;
}

/* ────────────────────────────────────────────────────────────────────────
   Fluid sim canvas — placeholder until scripts/motion/fluid-sim.js renders.
   ──────────────────────────────────────────────────────────────────────── */
.motion-fluid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--motion-fluid-alpha, 0.85);
  z-index: 0;
  /* Below the hero text/avatar but above the page background */
}

/* Stacking discipline in the hero:
   .signal-hero       — isolation, owns the stacking context
   .motion-fluid-canvas — z-index 0 (drawn first)
   .signal-grid-bg     — z-index 1 (engineering grid overlay)
   .signal-hero-inner  — z-index 2 (text always on top)
*/
.signal-hero {
  isolation: isolate;
}
.signal-hero .motion-fluid-canvas {
  z-index: 0;
}
.signal-hero .signal-grid-bg {
  position: absolute;
  z-index: 1;
}
.signal-hero .signal-hero-inner,
.signal-hero .container.signal-hero-inner {
  position: relative;
  z-index: 2;
}

html.motion-reduced .motion-fluid-canvas {
  /* Reduced motion: render a single static frame, no animation */
  filter: saturate(0.7) brightness(0.9);
}

/* ────────────────────────────────────────────────────────────────────────
   Theme toggle radial wipe — used by motion/theme-wipe.js
   The wipe overlay is added to <body> during the transition.
   ──────────────────────────────────────────────────────────────────────── */
.motion-theme-wipe {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  clip-path: circle(0% at var(--wipe-x, 50%) var(--wipe-y, 50%));
  transition: clip-path var(--motion-dur-slow) var(--motion-ease-out);
  will-change: clip-path;
}

.motion-theme-wipe.is-active {
  clip-path: circle(150% at var(--wipe-x, 50%) var(--wipe-y, 50%));
}

/* ────────────────────────────────────────────────────────────────────────
   Custom cursor placeholder (cursor.js fills in the SVG).
   ──────────────────────────────────────────────────────────────────────── */
html.motion-cursor-active,
html.motion-cursor-active * {
  cursor: none;
}

html.motion-touch .motion-cursor,
html.motion-reduced .motion-cursor {
  display: none !important;
}

.motion-cursor {
  position: fixed;
  top: 0; left: 0;
  width: var(--motion-cursor-size);
  height: var(--motion-cursor-size);
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  will-change: transform;
  mix-blend-mode: difference;
}

html[data-theme="light"] .motion-cursor {
  color: #007478;
  mix-blend-mode: multiply;
}

/* ────────────────────────────────────────────────────────────────────────
   Section scroll rail (right-side mini indicators).
   ──────────────────────────────────────────────────────────────────────── */
.motion-scroll-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 50;
  opacity: 0;
  transition: opacity var(--motion-dur-base) var(--motion-ease-out);
}

.motion-scroll-rail.is-ready {
  opacity: 1;
}

/* 24px button = accessible hit area; the visible 10px dot is drawn by ::before.
   (Targets were 10x10 with 10px gaps, which failed the touch-target audit.) */
.motion-scroll-rail button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.motion-scroll-rail button::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--accent, #38bdf8);
  transition: transform var(--motion-dur-fast) var(--motion-ease-spring),
              background var(--motion-dur-fast) var(--motion-ease-spring);
}

.motion-scroll-rail button[aria-current="true"]::before {
  background: var(--accent, #38bdf8);
  transform: scale(1.4);
}

.motion-scroll-rail button[data-progress="true"]::after,
.motion-scroll-rail button[data-passed="true"]::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--accent, #38bdf8);
  opacity: 0.5;
  animation: motion-pulse 1.4s var(--motion-ease-out) infinite;
}

@keyframes motion-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.6); opacity: 0; }
}

@media (max-width: 980px) {
  .motion-scroll-rail { display: none; }
}

html[data-theme="light"] .motion-scroll-rail button::before {
  border-color: #007478;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 18px rgba(15, 25, 35, 0.12);
}

html[data-theme="light"] .motion-scroll-rail button[aria-current="true"]::before {
  background: #007478;
}

/* ────────────────────────────────────────────────────────────────────────
   Capability chip taxonomy — generated by scripts/motion/chips.js.
   Blue = tools, orange = methods, teal = domains, amber = standards/certs.
   ──────────────────────────────────────────────────────────────────────── */
[data-chip-type] {
  border-color: color-mix(in srgb, var(--chip-color) 42%, transparent) !important;
  color: var(--chip-ink, var(--text, #e8eef7)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chip-color) 16%, transparent), color-mix(in srgb, var(--chip-color) 8%, transparent)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip-color) 18%, transparent);
}

[data-chip-type="tool"] {
  --chip-color: #2563a8;
  --chip-ink: #dbeafe;
}

[data-chip-type="method"] {
  --chip-color: #d0622c;
  --chip-ink: #ffedd5;
}

[data-chip-type="domain"] {
  --chip-color: #0f9f93;
  --chip-ink: #ccfbf1;
}

[data-chip-type="cert"] {
  --chip-color: #c4871d;
  --chip-ink: #fef3c7;
}

html[data-theme="light"] [data-chip-type] {
  --chip-ink: #17202b;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chip-color) 13%, #ffffff), color-mix(in srgb, var(--chip-color) 6%, #ffffff)) !important;
  border-color: color-mix(in srgb, var(--chip-color) 34%, #d5ddd8) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip-color) 14%, transparent);
}

/* ────────────────────────────────────────────────────────────────────────
   Page-transition viewTransition styling (the bits the browser hands us).
   ──────────────────────────────────────────────────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-dur-base);
  animation-timing-function: var(--motion-ease-out);
}

::view-transition-old(thesis-hero),
::view-transition-new(thesis-hero) {
  animation-duration: var(--motion-dur-slow);
  animation-timing-function: var(--motion-ease-spring);
}

/* ────────────────────────────────────────────────────────────────────────
   Entrance choreography — first-load only, set via JS class on <html>.
   ──────────────────────────────────────────────────────────────────────── */
html.motion-entrance-pending body {
  opacity: 0;
}

html.motion-entrance-active body {
  opacity: 1;
  transition: opacity var(--motion-dur-slow) var(--motion-ease-out);
}

/* ────────────────────────────────────────────────────────────────────────
   Audio toggle button (in nav)
   ──────────────────────────────────────────────────────────────────────── */
.motion-audio-toggle {
  background: transparent;
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: color var(--motion-dur-fast),
              border-color var(--motion-dur-fast),
              background var(--motion-dur-fast);
}

.motion-audio-toggle:hover {
  color: var(--accent, #38bdf8);
  border-color: var(--accent, #38bdf8);
}

.motion-audio-toggle[aria-pressed="true"] {
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent, #38bdf8);
  border-color: var(--accent, #38bdf8);
}

.motion-audio-toggle .audio-icon-on  { display: none; }
.motion-audio-toggle .audio-icon-off { display: inline; }
.motion-audio-toggle[aria-pressed="true"] .audio-icon-on  { display: inline; }
.motion-audio-toggle[aria-pressed="true"] .audio-icon-off { display: none; }

/* Autonomous research telemetry: the nozzle scene animates without controls. */
.research-telemetry {
  position: relative;
  z-index: 3;
  margin-top: clamp(1.15rem, 2.6vw, 1.8rem);
  padding: clamp(0.9rem, 2vw, 1.2rem);
  border: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 22%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg, #070907) 70%, transparent);
  backdrop-filter: blur(8px);
}

.research-telemetry[hidden] {
  display: none;
}

.research-telemetry-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.research-telemetry-head h2 {
  margin: 0.18rem 0 0;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  letter-spacing: 0;
}

.research-telemetry-copy {
  max-width: 63rem;
  margin: 0.75rem 0 0.85rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.research-live-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.45rem;
}

.mode-telemetry .research-live-rail {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.research-live-rail article {
  position: relative;
  min-height: 3.75rem;
  padding: 0.55rem 0.62rem;
  border-top: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 32%, var(--line));
}

.research-live-rail strong {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--text);
  font: 600 clamp(0.94rem, 1.3vw, 1.14rem)/1.12 var(--font-mono, ui-monospace, monospace);
}

.research-live-rail span {
  color: var(--muted);
  font-size: 0.7rem;
}

/* Research-lens engine-control row (sliders that drive the worker model) */
.research-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.55rem 0.9rem;
  margin: 0.85rem 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg, #070907) 60%, transparent);
}
.research-controls .model-slider {
  display: grid;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.research-controls .model-slider span {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
}
.research-controls .model-slider output {
  color: color-mix(in srgb, var(--accent, #38bdf8) 80%, var(--text));
  font-weight: 700;
}
.research-controls input[type="range"] { width: 100%; accent-color: #a78bfa; }

/* Altitude slider + LAUNCH button — the flight-mode showpiece controls */
.research-controls .research-altitude {
  grid-column: 1 / -1;
  border-top: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 18%, var(--line));
  padding-top: 0.55rem;
  margin-top: 0.15rem;
}
.research-controls .research-altitude input[type="range"] { accent-color: #65d6c9; }
.research-launch-btn {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.1rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid color-mix(in srgb, #a78bfa 55%, transparent);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(167,139,250,0.22), rgba(7,8,7,0.6));
  color: #d6ccff;
  font: 700 0.82rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 160ms cubic-bezier(0.22,1,0.36,1), box-shadow 200ms ease;
}
.research-launch-btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(167,139,250,0.32);
}
.research-launch-btn[data-launch-state="active"] {
  background: linear-gradient(180deg, rgba(101,214,201,0.30), rgba(7,8,7,0.6));
  border-color: color-mix(in srgb, #65d6c9 60%, transparent);
  color: #bdf5ec;
}
.research-launch-btn:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }

/* Flight readout rail sits below the main rail with a subtle divider */
.research-flight-rail {
  margin-top: 0.5rem;
  padding-top: 0.55rem;
  border-top: 1px dashed color-mix(in srgb, #65d6c9 30%, var(--line));
}

@media (prefers-reduced-motion: reduce) {
  .research-launch-btn { transition: none; }
}

/* Equation symbol chip — small, monospace, sits above the value */
.research-live-rail .cell-sym,
.model-readouts .cell-sym {
  display: inline-block;
  margin-bottom: 0.18rem;
  padding: 0.05rem 0.36rem;
  border: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 38%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent, #38bdf8) 80%, var(--text));
  background: color-mix(in srgb, var(--accent, #38bdf8) 10%, transparent);
  font: 600 0.66rem/1.1 var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
}

/* Per-mode tint for the symbol chip */
body[data-home-mode="thermal"]        .research-live-rail .cell-sym,
body[data-home-mode="thermal"]        .model-readouts .cell-sym { border-color: color-mix(in srgb, #f97316 50%, transparent); color: #f97316; background: color-mix(in srgb, #f97316 12%, transparent); }
body[data-home-mode="energy"]         .research-live-rail .cell-sym { border-color: color-mix(in srgb, #22d3ee 50%, transparent); color: #22d3ee; background: color-mix(in srgb, #22d3ee 12%, transparent); }
body[data-home-mode="decarbonisation"] .research-live-rail .cell-sym,
body[data-home-mode="decarbonisation"] .model-readouts .cell-sym { border-color: color-mix(in srgb, #f59e0b 50%, transparent); color: #f59e0b; background: color-mix(in srgb, #f59e0b 12%, transparent); }
body[data-home-mode="research"]       .research-live-rail .cell-sym { border-color: color-mix(in srgb, #a78bfa 50%, transparent); color: #a78bfa; background: color-mix(in srgb, #a78bfa 12%, transparent); }

/* Methodology disclosure — equations + source-code citations */
.lens-methodology {
  margin-top: 1rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg, #070907) 50%, transparent);
  font-size: 0.82rem;
}

.lens-methodology > summary {
  cursor: pointer;
  font-weight: 700;
  color: color-mix(in srgb, var(--accent, #38bdf8) 75%, var(--text));
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
}

.lens-methodology > summary::-webkit-details-marker { display: none; }

.lens-methodology > summary::after {
  content: "+";
  position: absolute;
  right: 0.15rem;
  top: -0.05rem;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--muted);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lens-methodology[open] > summary::after {
  content: "−";
  color: color-mix(in srgb, var(--accent, #38bdf8) 80%, var(--text));
}

.lens-methodology ul {
  margin: 0.55rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  line-height: 1.5;
}

.lens-methodology li + li {
  margin-top: 0.35rem;
}

.lens-methodology code {
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent, #38bdf8) 12%, transparent);
  color: color-mix(in srgb, var(--accent, #38bdf8) 80%, var(--text));
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82em;
}

/* Geometry segmented control (Lens 1) */
.lens-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.6rem 0 0.45rem;
  font-size: 0.78rem;
}

.lens-controls-label {
  color: var(--muted);
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lens-segmented {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 28%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg, #070907) 60%, transparent);
}

.lens-seg-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 600 0.78rem/1 inherit;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}

.lens-seg-btn:hover { color: var(--text); }

.lens-seg-btn.is-active {
  color: #0a0d10;
  background: linear-gradient(180deg,
    color-mix(in srgb, #f97316 90%, white 10%),
    #f97316 70%,
    color-mix(in srgb, #f97316 88%, black 12%));
}

@media (prefers-reduced-motion: reduce) {
  .lens-methodology > summary::after { transition: none; }
}

html[data-theme="light"] .research-telemetry {
  background: rgba(255, 255, 255, 0.82);
  border-color: #cbd5e1;
}

/* Industrial digital-twin console — controls expose scenario response. */
.hero-model-console {
  position: relative;
  z-index: 3;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1rem, 2.2vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg, #070907) 79%, transparent);
  backdrop-filter: blur(10px);
}

.hero-model-console[hidden] {
  display: none;
}

.hero-model-head,
.hero-model-grid {
  display: grid;
  gap: 1rem;
}

.hero-model-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  margin-bottom: 1rem;
}

.hero-model-head h2 {
  margin: 0.2rem 0 0;
  max-width: 42rem;
  font-size: clamp(1.04rem, 1.3vw, 1.22rem);
  letter-spacing: 0;
}

.model-badge {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.38rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 32%, transparent);
  color: var(--muted);
  font: 500 0.72rem/1.2 var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
}

.hero-model-grid {
  grid-template-columns: minmax(16rem, 1.15fr) minmax(18rem, 1fr);
  align-items: start;
}

.hero-model-controls {
  display: grid;
  gap: 0.8rem;
}

.model-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.25rem;
  padding: 0;
  border: 0;
}

.model-segmented legend {
  flex: 0 0 100%;
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.model-segmented button {
  min-height: 2.35rem;
  padding: 0.35rem 0.62rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.model-segmented button.is-active,
.model-segmented button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent, #38bdf8) 68%, var(--line));
  background: color-mix(in srgb, var(--accent, #38bdf8) 15%, transparent);
  color: var(--text);
}

.model-slider {
  display: grid;
  gap: 0.4rem;
}

.model-slider span {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.model-slider output {
  color: var(--text);
  font-family: var(--font-mono, ui-monospace, monospace);
}

.model-slider input[type="range"] {
  width: 100%;
  accent-color: var(--accent, #38bdf8);
}

.model-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}

.model-switches label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.model-switches input {
  accent-color: var(--accent, #38bdf8);
}

.model-interaction,
.model-footnote {
  margin: 0;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.55;
}

.model-footnote {
  margin-top: 0.9rem;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}

.model-footnote a {
  margin-left: 0.55rem;
  color: var(--accent, #38bdf8);
}

.model-readouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.model-readouts article {
  min-height: 4.4rem;
  padding: 0.68rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel, #101720) 58%, transparent);
}

.model-readouts strong {
  display: block;
  margin-bottom: 0.22rem;
  color: var(--text);
  font: 600 clamp(1.05rem, 1.5vw, 1.3rem)/1.1 var(--font-mono, ui-monospace, monospace);
}

.model-readouts span {
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.25;
}

.health-readout strong {
  color: var(--accent, #38bdf8);
}

html[data-theme="light"] .hero-model-console {
  background: rgba(255, 255, 255, 0.78);
  border-color: #cbd5e1;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .model-readouts article {
  background: rgba(240, 245, 248, 0.76);
  border-color: #d7dfe5;
}

@media (max-width: 760px) {
  .research-telemetry-head {
    flex-direction: column;
  }

  .research-live-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-model-head,
  .hero-model-grid {
    grid-template-columns: 1fr;
  }

  .model-badge {
    justify-self: start;
  }
}