/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; }
input, select { font: inherit; color: inherit; }

:root {
  --bg-0: #07071a;
  --bg-1: #0c0c2a;
  --bg-2: #161640;
  --panel: rgba(20, 22, 55, 0.55);
  --panel-border: rgba(140, 200, 255, 0.18);
  --panel-glow: rgba(120, 220, 255, 0.25);
  --ink: #e7eefc;
  --ink-soft: #a8b3d6;
  --ink-mute: #7e87ad;
  --accent: #7ee0ff;
  --accent-2: #c89bff;
  --accent-3: #ff9bd2;
  --accent-warm: #ffd28a;
  --success: #7fffb5;
  --shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
  --radius: 18px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(126, 224, 255, 0.18), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(200, 155, 255, 0.18), transparent 60%),
    radial-gradient(700px 500px at 90% 90%, rgba(255, 155, 210, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 60%, var(--bg-2));
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Decorative DNA ---------- */
.dna-decor {
  position: fixed;
  top: 8vh;
  width: 60px;
  height: 80vh;
  color: var(--accent);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  animation: dnaFloat 18s ease-in-out infinite;
}
.dna-left  { left: 0.5vw; }
.dna-right { right: 0.5vw; color: var(--accent-2); animation-delay: -6s; }
@keyframes dnaFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}

/* ---------- Floating gene bubbles ---------- */
.gene-bubbles {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.gene-bubbles span {
  position: absolute;
  left: var(--x);
  bottom: -40px;
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(126,224,255,0.4) 50%, rgba(200,155,255,0.0) 75%);
  border-radius: 50%;
  filter: blur(0.4px);
  box-shadow: 0 0 18px rgba(126, 224, 255, 0.35);
  animation: bubbleFloat var(--s) linear infinite;
  animation-delay: var(--d);
  opacity: 0.85;
}
.gene-bubbles span:nth-child(3n)  { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(200,155,255,0.5) 50%, rgba(126,224,255,0.0) 75%); }
.gene-bubbles span:nth-child(5n)  { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,155,210,0.5) 50%, rgba(126,224,255,0.0) 75%); }
@keyframes bubbleFloat {
  0%   { transform: translateY(0) translateX(0) scale(0.9); opacity: 0; }
  10%  { opacity: 0.7; }
  50%  { transform: translateY(-50vh) translateX(20px) scale(1); }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-105vh) translateX(-10px) scale(0.95); opacity: 0; }
}

/* ---------- Mode-specific atmospheric layer ----------
   A second decorative layer on top of gene-bubbles. Each mode styles
   it as its own ambient texture: warm drifting orbs in Reflection,
   cheerful floating shapes in Kids, cold dust motes in Adult. */
.atmosphere {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.atmosphere span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
}

/* Reflection: warm slow orbs drifting upward like dust in evening light. */
body.mode-reflection .atmosphere span {
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, rgba(245, 184, 176, 0.65), rgba(245, 184, 176, 0) 70%);
  filter: blur(0.4px);
  animation: warmOrbDrift var(--s) ease-in-out infinite;
  animation-delay: var(--d);
}
body.mode-reflection .atmosphere span:nth-child(3n) {
  background: radial-gradient(circle, rgba(238, 196, 220, 0.55), rgba(238, 196, 220, 0) 70%);
  width: 5px; height: 5px;
}
body.mode-reflection .atmosphere span:nth-child(5n) {
  background: radial-gradient(circle, rgba(255, 210, 160, 0.5), rgba(255, 210, 160, 0) 70%);
  width: 9px; height: 9px;
}
@keyframes warmOrbDrift {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
  15%      { opacity: 0.45; }
  50%      { opacity: 0.55; transform: translate3d(8px, -22px, 0); }
  85%      { opacity: 0.45; transform: translate3d(-4px, -38px, 0); }
}

/* Kids: cheerful floating shapes — small squares + circles. */
body.app-kids .atmosphere span {
  width: 8px;
  height: 8px;
  background: var(--accent-3);
  border-radius: 50%;
  opacity: 0.4;
  filter: drop-shadow(0 0 4px var(--accent-3));
  animation: kidsShapeFloat var(--s) ease-in-out infinite;
  animation-delay: var(--d);
}
body.app-kids .atmosphere span:nth-child(2n) {
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(45deg);
  width: 7px; height: 7px;
}
body.app-kids .atmosphere span:nth-child(3n) {
  background: var(--accent-warm);
  width: 6px; height: 6px;
}
@keyframes kidsShapeFloat {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
  20%      { opacity: 0.5; }
  50%      { opacity: 0.55; transform: translate3d(-6px, -14px, 0); }
  80%      { opacity: 0.5; transform: translate3d(6px, -22px, 0); }
}

/* Adult: cold dust motes falling slowly — barely there, surveillance-light. */
body.mode-adult .atmosphere span {
  width: 2px;
  height: 2px;
  background: rgba(126, 192, 224, 0.55);
  border-radius: 50%;
  opacity: 0;
  animation: coldDustFall var(--s) linear infinite;
  animation-delay: var(--d);
}
body.mode-adult .atmosphere span:nth-child(3n) {
  width: 1.5px; height: 1.5px;
  background: rgba(160, 172, 196, 0.5);
}
body.mode-adult .atmosphere span:nth-child(5n) {
  width: 2.5px; height: 2.5px;
  background: rgba(126, 192, 224, 0.4);
}
@keyframes coldDustFall {
  0%   { transform: translate3d(0, -20px, 0); opacity: 0; }
  8%   { opacity: 0.22; }
  92%  { opacity: 0.22; }
  100% { transform: translate3d(-12px, 105vh, 0); opacity: 0; }
}

/* On reduced motion, kill the atmosphere entirely. */
@media (prefers-reduced-motion: reduce) {
  .atmosphere span { animation: none !important; opacity: 0 !important; }
}

/* ---------- Layout ---------- */
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}
.site-header {
  text-align: center;
  padding: 48px 24px 24px;
  position: relative;
}

/* Language selector: small pill in the top-right of the header. */
.lang-selector-wrap {
  position: absolute;
  top: 14px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.lang-label {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(10, 14, 40, 0.55);
  color: var(--ink);
  border: 1px solid rgba(126, 224, 255, 0.22);
  border-radius: 999px;
  padding: 4px 22px 4px 12px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.3px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.lang-select:hover { border-color: rgba(126, 224, 255, 0.5); }
.lang-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(126, 224, 255, 0.18); }
@media (max-width: 540px) {
  .lang-selector-wrap { top: 8px; right: 10px; }
  .lang-label { display: none; }
}

.site-header h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: 0.5px;
  color: var(--ink); /* fallback when background-clip:text isn't supported */
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(126, 224, 255, 0.15);
}
.site-header .logo-mark {
  display: inline-block;
  margin-right: 6px;
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent);
}
.tagline {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  letter-spacing: 0.4px;
}
.disclaimer {
  margin: 6px 0 0;
  color: var(--ink-mute);
  font-size: 12px;
  font-style: italic;
}

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---------- Panel ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(126, 224, 255, 0.04),
    0 18px 60px rgba(0, 0, 0, 0.45),
    0 0 32px rgba(126, 224, 255, 0.06);
  position: relative;
  overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg, rgba(126,224,255,0.5), rgba(200,155,255,0.0) 40%, rgba(255,155,210,0.4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.45;
}
.panel h2 {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: 0.6px;
  color: var(--ink);
}
.subtle {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 13px;
}

/* ---------- Parent forms ---------- */
.parents-defaults-note {
  margin: -6px 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft, rgba(220, 224, 240, 0.7));
  opacity: 0.85;
}
.parents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.parent-card {
  background: rgba(10, 12, 38, 0.5);
  border: 1px solid rgba(126, 224, 255, 0.12);
  border-radius: 14px;
  padding: 16px 16px 14px;
}
.parent-card[data-parent="A"] { box-shadow: inset 0 0 0 1px rgba(126, 224, 255, 0.05), 0 0 24px rgba(126, 224, 255, 0.06); }
.parent-card[data-parent="B"] { box-shadow: inset 0 0 0 1px rgba(200, 155, 255, 0.05), 0 0 24px rgba(200, 155, 255, 0.06); }

.parent-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}
.parent-card h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.parent-card[data-parent="A"] h3 { color: var(--accent); }
.parent-card[data-parent="B"] h3 { color: var(--accent-2); }

.parent-randomize-btn {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(126, 224, 255, 0.25);
  background: rgba(10, 12, 38, 0.55);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.4s;
  flex-shrink: 0;
}
.parent-card[data-parent="A"] .parent-randomize-btn { border-color: rgba(126, 224, 255, 0.30); }
.parent-card[data-parent="B"] .parent-randomize-btn { border-color: rgba(200, 155, 255, 0.30); }
.parent-randomize-btn:hover {
  color: var(--ink);
  background: rgba(126, 224, 255, 0.08);
  border-color: rgba(126, 224, 255, 0.55);
}
.parent-card[data-parent="B"] .parent-randomize-btn:hover {
  background: rgba(200, 155, 255, 0.08);
  border-color: rgba(200, 155, 255, 0.55);
}
.parent-randomize-btn.spinning { transform: rotate(360deg); }

/* Advanced-traits disclosure — collapses OCEAN sliders behind a single
 * toggle per parent card. Motion is tuned to the page's slow-fade
 * vocabulary (introSectionIn, historyOpen): downward settle, opacity
 * lead, eased over ~0.45s so the reveal reads as part of the
 * atmosphere rather than a UI affordance. */
.parent-advanced {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(126, 224, 255, 0.10);
}
.parent-card[data-parent="B"] .parent-advanced {
  border-top-color: rgba(200, 155, 255, 0.10);
}
.parent-advanced-summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 2px 2px;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}
.parent-advanced-summary::-webkit-details-marker { display: none; }
.parent-advanced-summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0.55;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
}
.parent-advanced[open] > .parent-advanced-summary::after {
  transform: translateY(1px) rotate(225deg);
  opacity: 0.85;
}
.parent-advanced-summary:hover,
.parent-advanced[open] > .parent-advanced-summary { color: var(--ink-soft); }
.parent-advanced-body {
  margin-top: 12px;
  animation: parent-advanced-reveal 0.45s ease both;
}
@keyframes parent-advanced-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  .parent-advanced { margin-top: 8px; padding-top: 8px; }
  .parent-advanced-body { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .parent-advanced-summary,
  .parent-advanced-summary::after { transition: none !important; }
  .parent-advanced-body { animation: none !important; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.field label {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
}
.field-subtitle {
  display: inline;
  margin-left: 4px;
  font-size: 10.5px;
  font-style: italic;
  color: var(--ink-mute);
  letter-spacing: 0.2px;
}
.field input[type="text"],
.field input[type="number"],
.field select {
  background: rgba(7, 9, 30, 0.7);
  color: var(--ink);
  border: 1px solid rgba(126, 224, 255, 0.15);
  border-radius: 10px;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.field input:focus,
.field select:focus {
  border-color: rgba(126, 224, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(126, 224, 255, 0.12);
}
.field-range {
  display: flex;
  align-items: center;
  gap: 10px;
}
.field-range input[type="range"] { flex: 1; }
.field-range .val {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  min-width: 22px;
  text-align: right;
  font-weight: 600;
}

/* ---------- Range sliders ---------- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(126,224,255,0.35), rgba(200,155,255,0.35), rgba(255,155,210,0.35));
  border: 1px solid rgba(126, 224, 255, 0.18);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(126,224,255,0.35), rgba(200,155,255,0.35), rgba(255,155,210,0.35));
  border: 1px solid rgba(126, 224, 255, 0.18);
}
/* Thumb: visible 18px disc, but full 44px hit area for touch (WCAG 2.5.5).
   Trick: 44px box with a 13px transparent border clipped via background-clip,
   so only the inner 18px renders. Pointer events still fire on the full box.
   The visible 1px white edge is drawn by an inset box-shadow inside padding
   box; the outer glow uses drop-shadow to avoid extending the touch area
   visually. */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px; height: 44px;
  border: 13px solid transparent;
  background-clip: padding-box;
  border-radius: 50%;
  background-color: transparent;
  background-image: radial-gradient(circle at 30% 30%, #ffffff, #7ee0ff 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  filter: drop-shadow(0 0 6px rgba(126, 224, 255, 0.7));
  margin-top: -19px;
  transition: transform 0.12s;
}
input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 44px; height: 44px;
  border: 13px solid transparent;
  background-clip: padding-box;
  border-radius: 50%;
  background-color: transparent;
  background-image: radial-gradient(circle at 30% 30%, #ffffff, #7ee0ff 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  filter: drop-shadow(0 0 6px rgba(126, 224, 255, 0.7));
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }

/* ---------- Buttons ---------- */
.primary-action {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
@media (max-width: 768px) {
  .primary-action .btn { padding: 12px 18px; }
}
.btn {
  appearance: none;
  border: 1px solid rgba(126, 224, 255, 0.3);
  background: rgba(10, 14, 40, 0.6);
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 16px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.18s, border-color 0.18s, background 0.18s;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.btn:hover {
  border-color: rgba(126, 224, 255, 0.6);
  background: rgba(126, 224, 255, 0.08);
  box-shadow: 0 0 18px rgba(126, 224, 255, 0.15);
}
.btn:active { transform: translateY(1px); }
/* Keyboard focus: a visible ring on every primary control family.
   :focus-visible only fires for keyboard navigation, so mouse users
   don't see it. Same ring colour as the cyan accent so it lives
   inside the existing palette. Covers the four main control families
   plus the intro skip / enter pair (first thing a keyboard user hits),
   the bottom toggles (history accordion, "show more"), the chaos
   toggle, the per-stat <details> sources in the intro, and the
   footer link — i.e. every interactive element not already covered
   by .field :focus or the disclosure block near .parent-advanced-summary. */
.btn:focus-visible,
.app-mode-btn:focus-visible,
.style-btn:focus-visible,
.gender-btn:focus-visible,
.history-toggle:focus-visible,
.details-toggle:focus-visible,
.chaos-pill:focus-visible,
.intro-skip:focus-visible,
.intro-enter-btn:focus-visible,
.intro-stat-source > summary:focus-visible,
.site-footer .footer-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-primary {
  background: linear-gradient(135deg, rgba(126,224,255,0.85), rgba(200,155,255,0.85));
  color: #0a0a25;
  font-weight: 700;
  padding: 12px 28px;
  font-size: 15px;
  border: none;
  box-shadow:
    0 0 24px rgba(126, 224, 255, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow:
    0 0 32px rgba(126, 224, 255, 0.6),
    inset 0 1px 0 rgba(255,255,255,0.45);
}
/* R21rev: post-allocation cue — UX Flow gates the Generate button when
   adultGen===1 and projection is still gated; this rule layers a subtle
   cyan pulse on top of .btn-primary so the affordance reads as "ready,
   waiting on you" without competing with hover.
   LOOP_REQUEST(ux-flow): toggle is-pending-reveal class when adultGen===1 + projection gated */
.btn-primary.is-pending-reveal {
  animation: pendingRevealPulse 1.8s ease-in-out infinite;
}
@keyframes pendingRevealPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(126,224,255,0.45), inset 0 1px 0 rgba(255,255,255,0.45); }
  50%      { box-shadow: 0 0 36px rgba(126,224,255,0.75), 0 0 0 2px rgba(126,224,255,0.35), inset 0 1px 0 rgba(255,255,255,0.45); }
}
/* R22 a11y: respect prefers-reduced-motion — the pulse is a *cue*, not a
   load-bearing affordance (UX Flow also sets aria-label + visible class).
   Users with vestibular sensitivity get a static glow + outline ring
   instead of the 1.8s repeating box-shadow animation. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary.is-pending-reveal {
    animation: none;
    /* R22rev UX: thicker (3px) + higher-opacity (0.55) ring stays
       distinguishable when :hover layers its own cyan glow on top. */
    box-shadow: 0 0 32px rgba(126,224,255,0.6), 0 0 0 3px rgba(126,224,255,0.55), inset 0 1px 0 rgba(255,255,255,0.45);
  }
}

/* ---------- Results layout ---------- */
.results {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  animation: fadeUp 0.5s ease;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Sliders panel ---------- */
.sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
}
.slider-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.slider-row .slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.slider-row .slider-label {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.2px;
}
.slider-row .slider-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  max-width: 55%;
  text-align: right;
}
.slider-row .slider-foot {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ---------- Confidence band ----------
   Personality-slider companion: a tiny bell-curve SVG that sits just
   under the slider track. The bell is centered on the parents'
   midpoint; the user's current position is a vertical line. Drift
   shows visually as the line moves away from the bell's peak. */
.slider-row .confidence-band-svg {
  display: block;
  width: 100%;
  height: 22px;
  margin: 1px 0 0;
  opacity: 0.85;
}
.slider-row .confidence-band-svg .band-fill {
  fill: var(--accent);
  opacity: 0.18;
}
.slider-row .confidence-band-svg .midparent-marker {
  stroke: var(--accent-2);
  stroke-width: 1;
  opacity: 0.55;
  stroke-dasharray: 1 2;
}
.slider-row .confidence-band-svg .current-marker {
  stroke: var(--accent-3);
  stroke-width: 1.5;
  opacity: 0.95;
  transition: x1 0.18s ease, x2 0.18s ease;
}

/* Reflection: violet wash, breathing animation */
body.mode-reflection .slider-row .confidence-band-svg .band-fill {
  fill: var(--accent-2);
  opacity: 0.22;
  animation: bandBreathe 6s ease-in-out infinite;
}
body.mode-reflection .slider-row .confidence-band-svg .midparent-marker {
  stroke: var(--accent-2);
}
body.mode-reflection .slider-row .confidence-band-svg .current-marker {
  stroke: var(--accent-3);
}
@keyframes bandBreathe {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.30; }
}

/* Kids: warm pastel wash */
body.app-kids .slider-row .confidence-band-svg .band-fill {
  fill: var(--accent-3);
  opacity: 0.26;
}
body.app-kids .slider-row .confidence-band-svg .midparent-marker {
  stroke: var(--accent);
  opacity: 0.6;
}
body.app-kids .slider-row .confidence-band-svg .current-marker {
  stroke: var(--accent);
  stroke-width: 2;
}

/* Adult: crisp cyan with hard edges */
body.mode-adult .slider-row .confidence-band-svg .band-fill {
  fill: rgba(126, 224, 255, 0.18);
  opacity: 1;
}
body.mode-adult .slider-row .confidence-band-svg .midparent-marker {
  stroke: rgba(126, 224, 255, 0.7);
  stroke-dasharray: 2 3;
  opacity: 0.8;
}
body.mode-adult .slider-row .confidence-band-svg .current-marker {
  stroke: rgba(126, 224, 255, 0.95);
  stroke-width: 1.2;
  stroke-dasharray: none;
}

/* Speculative band (OCEAN traits) — visually distinct inheritance category.
   Lower-opacity fill + warm violet shift + dashed outline reads as
   "less-confident / behavioral" without overpowering the layout.
   Phenotypic bands keep the original solid look (no override). */
.slider-row .confidence-band-svg[data-uncertainty="speculative"] { opacity: 0.7; }
.slider-row .confidence-band-svg[data-uncertainty="speculative"] .band-fill {
  fill: var(--accent-2);
  opacity: 0.10;
  stroke: var(--accent-2);
  stroke-width: 0.6;
  stroke-dasharray: 2 2.5;
  stroke-opacity: 0.55;
}
body.mode-adult .slider-row .confidence-band-svg[data-uncertainty="speculative"] .band-fill {
  fill: rgba(200, 155, 255, 0.14);
  stroke: rgba(200, 155, 255, 0.55);
  stroke-dasharray: 1.5 2;
}
@media (prefers-reduced-motion: reduce) {
  .slider-row .confidence-band-svg[data-uncertainty="speculative"] .band-fill { animation: none !important; }
}

/* ---------- Surprise meter ---------- */
.surprise-wrap {
  margin-top: 22px;
  padding: 14px 14px 12px;
  background: rgba(10, 14, 40, 0.5);
  border: 1px solid rgba(255, 155, 210, 0.18);
  border-radius: 14px;
}
.surprise {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.surprise-label {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
}
.surprise-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.surprise-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
  box-shadow: 0 0 16px rgba(255, 155, 210, 0.5);
  transition: width 0.45s ease;
}
.surprise-pct {
  font-weight: 700;
  color: var(--accent-3);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  text-align: right;
}
.surprise-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
}

/* ---------- Action buttons ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.copy-status {
  margin-top: 8px;
  font-size: 12px;
  color: var(--success);
  min-height: 1em;
  letter-spacing: 0.3px;
}

/* ---------- Baby panel ---------- */
.baby-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.codename {
  font-size: 13px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2px 0 10px;
  text-shadow: 0 0 10px rgba(126, 224, 255, 0.5);
}

/* ---------- Profile epigraph (Reflection only) ---------- */
.profile-epigraph { display: none; }
.profile-epigraph[hidden] { display: none !important; }
body.mode-reflection .profile-epigraph:not([hidden]) { display: block; }
.profile-epigraph .epigraph-text {
  margin: 4px auto 12px;
  max-width: 320px;
  font-family: var(--reflection-serif, Georgia, serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: 0.2px;
}
.profile-epigraph .epigraph-text::before { content: '“'; margin-right: 2px; opacity: 0.6; }
.profile-epigraph .epigraph-text::after  { content: '”'; margin-left: 2px;  opacity: 0.6; }

/* ---------- Case-file header (Adult only) ---------- */
.case-file { display: none; }
.case-file[hidden] { display: none !important; }
body.mode-adult .case-file:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 4px 14px;
  width: 100%;
  max-width: 360px;
  margin: 6px auto 10px;
  padding: 10px 12px;
  background: rgba(7, 9, 24, 0.6);
  border: 1px solid rgba(126, 192, 224, 0.22);
  border-radius: 4px;
  text-align: left;
  font-family: var(--adult-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  line-height: 1.6;
}
.case-file .case-row {
  display: contents;
}
.case-file .case-label {
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 9.5px;
}
.case-file .case-value {
  color: var(--ink);
}
.case-file .case-tier {
  color: var(--accent);
}
/* First-render motion for the dossier opener — faint downward settle
 * (translateY 4px → 0, opacity 0 → 1) keyed by .is-settling. Pacing
 * micro-adjustment (R4): the case-file is the moment the Adult
 * fascination → unease beat lands; a barely-there settle marks it as
 * an opening rather than a static label, without animating loud. */
.case-file.is-settling { animation: case-file-settle 0.45s ease both; }
@keyframes case-file-settle {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .case-file.is-settling { animation: none !important; }
}

.avatar-stage {
  position: relative;
  width: 220px;
  height: 240px;
  margin: 4px 0 12px;
}
.avatar-glow {
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle at 50% 55%, rgba(126,224,255,0.35), rgba(200,155,255,0.2) 40%, transparent 70%);
  filter: blur(8px);
  animation: pulseGlow 4s ease-in-out infinite;
  border-radius: 50%;
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.7; transform: scale(0.97); }
  50%      { opacity: 1;   transform: scale(1.03); }
}
.avatar-host {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-host svg {
  width: 100%;
  height: 100%;
  max-width: 220px;
  max-height: 220px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
}

/* ---------- Life-stage avatar strip ----------
   Three small avatars (At 7 / At 17 / At 47) below the main one.
   Same trait state, per-age seed suffix so DiceBear varies the hair
   while keeping identity recognizable. Mode-aware framing. */
.life-stage-section {
  width: 100%;
  margin: 4px 0 10px;
  text-align: center;
}
.life-stage-section[hidden] { display: none; }
.life-stage-heading {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.life-stage-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}
.life-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.life-stage-avatar {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(7, 9, 30, 0.45);
  border: 1px solid rgba(126, 224, 255, 0.18);
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.18s ease;
}
.life-stage-avatar svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}
.life-stage-label {
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.life-stage[data-age="47"] .life-stage-avatar svg { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)) saturate(0.85); }
.life-stage[data-age="7"]  .life-stage-avatar svg { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)) brightness(1.04); }

/* Reflection: violet glow on the avatar frames, italic age labels. */
body.mode-reflection .life-stage-heading { color: var(--accent-2); }
body.mode-reflection .life-stage-avatar {
  background: rgba(28, 22, 56, 0.55);
  border-color: rgba(180, 160, 220, 0.32);
  box-shadow: 0 0 14px rgba(180, 160, 220, 0.18);
}
body.mode-reflection .life-stage-label { color: var(--accent-3); font-style: italic; letter-spacing: 1.6px; }

/* Kids: warmer frame, bouncier hover. */
body.app-kids .life-stage-heading { color: var(--accent); }
body.app-kids .life-stage-avatar {
  background: rgba(255, 250, 246, 0.65);
  border-color: rgba(220, 140, 170, 0.28);
  border-radius: 18px;
  box-shadow: 0 0 12px rgba(255, 141, 163, 0.18);
}
body.app-kids .life-stage-label { color: var(--accent); }
body.app-kids .life-stage:hover .life-stage-avatar {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(255, 141, 163, 0.3);
}

/* Adult: precise dossier framing, monospace labels. */
body.mode-adult .life-stage-heading { color: var(--accent); letter-spacing: 1.8px; }
body.mode-adult .life-stage-avatar {
  background: rgba(7, 9, 30, 0.6);
  border-color: rgba(126, 224, 255, 0.28);
  border-radius: 6px;
  box-shadow: none;
}
body.mode-adult .life-stage-avatar svg { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)) saturate(0.92); }
body.mode-adult .life-stage-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 1.2px;
}
body.mode-adult .life-stage[data-age="47"] .life-stage-avatar svg { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)) saturate(0.7); }

/* ---------- Aging scrubber ----------
   A single age slider you can drag from 0 to 80. The main avatar
   re-seeds per age, and a mode-aware ticker line describes the person
   at that age. */
.aging-scrubber {
  width: 100%;
  max-width: 320px;
  margin: 8px auto 12px;
  padding: 12px 14px;
  background: rgba(7, 9, 30, 0.45);
  border: 1px solid rgba(126, 224, 255, 0.18);
  border-radius: 12px;
}
.aging-scrubber[hidden] { display: none; }
.aging-scrubber .scrubber-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.aging-scrubber .scrubber-label {
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.aging-scrubber .scrubber-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.aging-scrubber #age-slider {
  width: 100%;
  margin: 4px 0 6px;
}
.aging-scrubber .scrubber-ticker {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  min-height: 2.2em;
  /* R22 UX Flow (Mobile R19 followup): the R18 `interruption` life_shape
     entry in ADULT_TRAJECTORY_MILESTONES runs ~280 chars vs ~60-120 for
     other entries. Without a ceiling, the ticker reflows the panel by
     2-4 lines when that shape is selected, jolting the slider's spatial
     position. Cap height at ~6 lines and scroll the overflow so the
     surround stays still; padding-right reserves space for the scroll
     thumb so text doesn't reflow when it appears. */
  max-height: 12em;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}
/* R22rev Visual Director: subtle scrollbar styling — matches .decision-list pattern
   so the ticker scroll-area reads as part of the cool/cyan panel family rather
   than the browser default chrome. */
.scrubber-ticker::-webkit-scrollbar { width: 6px; }
.scrubber-ticker::-webkit-scrollbar-thumb {
  background: rgba(126, 224, 255, 0.18);
  border-radius: 999px;
}
.scrubber-ticker::-webkit-scrollbar-track { background: transparent; }
/* R18rev (Risk + Science + Sociology MAJOR convergence): disclosure microcopy
   beneath the trajectory ticker. Codename-deterministic life_shape selection
   reads as destiny without an explicit disclaimer; this italic, muted line
   reframes the milestone as one path among many. Sits flush under the ticker,
   small and quiet so it doesn't compete with the milestone itself. Hidden by
   default; revealed in adult mode only.
   R19 polish: add 2px cyan border-left + 8px text inset to unify with the
   .burden-disclaimer / .projection-gated-placeholder visual family — all
   three disclosure-microcopy slots now share the same "framed aside" signal.
   Cyan accent matches the aging-scrubber's own border tint so the rule reads
   as belonging to the panel, not appended to it. */
.aging-scrubber .trajectory-disclaimer {
  margin: 6px 0 0;
  padding: 2px 0 2px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-mute);
  font-style: italic;
  border-left: 2px solid rgba(126, 224, 255, 0.20);
}
.aging-scrubber .trajectory-disclaimer[hidden] { display: none; }

/* Reflection: italic serif ticker, warm violet glow. */
body.mode-reflection .aging-scrubber {
  background: rgba(28, 22, 56, 0.5);
  border-color: rgba(180, 160, 220, 0.28);
}
body.mode-reflection .aging-scrubber .scrubber-label { color: var(--accent-2); }
body.mode-reflection .aging-scrubber .scrubber-value { color: var(--accent-3); font-family: var(--reflection-serif, Georgia, serif); }
body.mode-reflection .aging-scrubber .scrubber-ticker {
  font-family: var(--reflection-serif, Georgia, serif);
  font-style: italic;
  color: var(--ink);
}

/* Kids: warm pastel surround, friendlier label. */
body.app-kids .aging-scrubber {
  background: rgba(255, 250, 246, 0.7);
  border-color: rgba(220, 140, 170, 0.28);
  border-radius: 16px;
}
body.app-kids .aging-scrubber .scrubber-label { color: var(--accent); }
body.app-kids .aging-scrubber .scrubber-value { color: var(--accent); }
body.app-kids .aging-scrubber .scrubber-ticker { color: var(--ink); }

/* Adult: monospace, clinical, no decorations. */
body.mode-adult .aging-scrubber {
  background: rgba(7, 9, 24, 0.6);
  border-color: rgba(126, 192, 224, 0.22);
  border-radius: 4px;
  font-family: var(--adult-mono, ui-monospace, monospace);
}
body.mode-adult .aging-scrubber .scrubber-label { color: var(--ink-mute); letter-spacing: 1.8px; }
body.mode-adult .aging-scrubber .scrubber-value { color: var(--accent); font-family: var(--adult-mono, ui-monospace, monospace); font-weight: 700; }
body.mode-adult .aging-scrubber .scrubber-ticker { color: var(--ink-soft); font-size: 11.5px; }

/* ---------- Generational lineage cascade ----------
   Lives in its own panel below the baby panel. SVG shows parents
   (top), the baby (highlighted), and two hypothetical grandchildren
   (silhouettes, dashed connectors). Mode-aware styling. */
.lineage-panel { margin-top: 22px; }
.lineage-tree {
  width: 100%;
  display: flex;
  justify-content: center;
}
.lineage-tree:empty { display: none; }
.lineage-svg {
  width: 100%;
  max-width: 460px;
  height: auto;
  overflow: visible;
}
.lineage-svg .lineage-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.7;
}
.lineage-svg .grandchild-line {
  stroke-dasharray: 2 4;
  opacity: 0.55;
}
.lineage-svg .lineage-label {
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  fill: var(--ink-mute);
}
.lineage-svg .lineage-label.baby-label { fill: var(--accent); font-weight: 700; }
.lineage-svg .lineage-label.grandchild { fill: var(--ink-mute); font-style: italic; }
.lineage-svg .node-baby svg { filter: drop-shadow(0 0 12px var(--accent)); }
.lineage-svg .node-grandchild svg { opacity: 0.65; filter: saturate(0.7) drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.lineage-svg .node-parent svg { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)); }

/* Reflection: warm violet/peach, soft glows, italic serif labels. */
body.mode-reflection .lineage-svg .lineage-line { stroke: var(--accent-3); }
body.mode-reflection .lineage-svg .grandchild-line { stroke: var(--accent-2); }
body.mode-reflection .lineage-svg .lineage-label { fill: var(--accent-3); font-family: var(--reflection-serif, Georgia, serif); font-style: italic; text-transform: none; letter-spacing: 0.3px; font-size: 11.5px; }
body.mode-reflection .lineage-svg .lineage-label.baby-label { fill: var(--accent); font-weight: 700; font-style: italic; }
body.mode-reflection .lineage-svg .node-baby svg { filter: drop-shadow(0 0 14px var(--accent-3)); }

/* Kids: warm coral/gold tones, friendly thicker branches. */
body.app-kids .lineage-svg .lineage-line { stroke: var(--accent); stroke-width: 1.6; opacity: 0.85; }
body.app-kids .lineage-svg .grandchild-line { stroke: var(--accent-3); stroke-dasharray: 4 4; }
body.app-kids .lineage-svg .lineage-label { fill: var(--ink); font-size: 11px; letter-spacing: 0.6px; text-transform: none; font-weight: 600; }
body.app-kids .lineage-svg .lineage-label.baby-label { fill: var(--accent); }
body.app-kids .lineage-svg .node-baby svg { filter: drop-shadow(0 0 12px var(--accent-3)); }

/* Adult: clinical lineage diagram, straight lines, monospace labels. */
body.mode-adult .lineage-svg .lineage-line { stroke: rgba(126, 192, 224, 0.55); stroke-width: 0.8; }
body.mode-adult .lineage-svg .grandchild-line { stroke: rgba(126, 192, 224, 0.45); stroke-dasharray: 3 3; }
body.mode-adult .lineage-svg .lineage-label { fill: var(--ink-soft); font-family: var(--adult-mono, ui-monospace, monospace); font-size: 9px; letter-spacing: 1.4px; }
body.mode-adult .lineage-svg .lineage-label.baby-label { fill: var(--accent); }
body.mode-adult .lineage-svg .lineage-label.grandchild { font-style: normal; fill: var(--ink-mute); }
body.mode-adult .lineage-svg .node-baby svg { filter: none; }
body.mode-adult .lineage-svg .node-grandchild svg { opacity: 0.55; filter: saturate(0.4) drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
/* Subject ID hint over each node could be added; kept minimal for now. */

/* Segmented controls (style + gender) */
.style-toggle,
.gender-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 999px;
  background: rgba(10, 14, 40, 0.55);
  padding: 4px;
  border: 1px solid rgba(126, 224, 255, 0.18);
  margin: 4px 0 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.gender-toggle { margin-bottom: 12px; border-color: rgba(255, 155, 210, 0.22); }
.style-btn,
.gender-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.style-btn:hover:not(.is-active),
.gender-btn:hover:not(.is-active) { color: var(--ink); }
.style-btn.is-active {
  background: linear-gradient(135deg, rgba(126,224,255,0.85), rgba(200,155,255,0.85));
  color: #0a0a25;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(126,224,255,0.32);
}
.gender-btn.is-active {
  background: linear-gradient(135deg, rgba(255,155,210,0.85), rgba(200,155,255,0.85));
  color: #0a0a25;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(255,155,210,0.32);
}
.gender-expression {
  max-width: 340px;
  margin: 6px auto 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 155, 210, 0.18);
  transition: opacity 0.2s ease;
}
.gender-expression > label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  color: var(--ink);
  text-align: left;
  margin-bottom: 6px;
}
.gender-expression .field-subtitle {
  display: block;
  font-size: 0.7rem;
  opacity: 0.7;
  font-weight: 400;
}
.gender-expression .field-range {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gender-expression input[type="range"] { flex: 1; }
.gender-expression .val {
  min-width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.gender-expression.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.archetype-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(126,224,255,0.25), rgba(255,155,210,0.25));
  border: 1px solid rgba(126, 224, 255, 0.35);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.4px;
  margin: 4px 0 12px;
  box-shadow: 0 0 18px rgba(126, 224, 255, 0.15);
}
.baby-stats {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  text-align: left;
  font-size: 13.5px;
}
.baby-stats dt {
  color: var(--ink-mute);
  letter-spacing: 0.3px;
}
.baby-stats dt.ocean-sep {
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-2);
}
.baby-stats dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Ethics note ---------- */
.ethics {
  border-left: 3px solid rgba(255, 210, 138, 0.55);
  background: rgba(20, 22, 55, 0.35);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.ethics h3 {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-warm);
}
.ethics p { margin: 0; }

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 20px 16px 36px;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .results { grid-template-columns: 1fr; }
  .sliders { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .parents { grid-template-columns: 1fr; }
  main { padding: 4px 14px 28px; }
  .panel { padding: 18px 16px; }
  .dna-decor { display: none; }
  .site-header { padding: 28px 18px 16px; }
}

/* ---------- Chaos pill (toggle) ---------- */
.chaos-pill {
  appearance: none;
  border: 1px solid rgba(255,155,210,0.35);
  background: rgba(10, 14, 40, 0.55);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 7px 18px;
  cursor: pointer;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  margin: 0 0 12px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
}
.chaos-pill:hover { color: var(--ink); }
.chaos-pill.is-active {
  background: linear-gradient(135deg, rgba(255,155,210,0.95), rgba(200,155,255,0.95));
  color: #0a0a25;
  font-weight: 700;
  box-shadow: 0 0 22px rgba(255, 100, 180, 0.55);
  animation: chaosPulse 1.6s ease-in-out infinite;
}
@keyframes chaosPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 22px rgba(255, 100, 180, 0.55); }
  50%      { transform: scale(1.04); box-shadow: 0 0 32px rgba(255, 100, 180, 0.85); }
}
.chaos-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,155,210,0.6), rgba(200,155,255,0.6));
  color: #0a0a25;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(255, 100, 180, 0.4);
  vertical-align: middle;
}

/* ---------- Vibe title (funny title under codename) ---------- */
.vibe-title {
  margin: -4px 0 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, var(--accent-3), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(255, 155, 210, 0.18);
}

/* ---------- Future-vibe block ---------- */
.future-block {
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(10, 14, 40, 0.45);
  border: 1px solid rgba(200, 155, 255, 0.18);
  border-radius: 12px;
  text-align: left;
}
.future-block h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-2);
}
.kids-futures-preamble {
  margin: 0 0 10px;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--accent-2);
  opacity: 0.85;
}
.future-paths {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.future-paths li {
  padding: 5px 0 5px 16px;
  position: relative;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.future-paths li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 6px;
  font-size: 9px;
  color: var(--accent);
}
.random-events {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.event-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(126, 224, 255, 0.10);
  border: 1px solid rgba(126, 224, 255, 0.25);
  color: var(--ink-soft);
  font-size: 11.5px;
  letter-spacing: 0.2px;
}

/* ---------- Saved timelines ---------- */
.saved-timelines {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(10, 14, 40, 0.4);
  border: 1px solid rgba(126, 224, 255, 0.15);
  border-radius: 12px;
}
.saved-timelines h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}
.saved-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(126, 224, 255, 0.15);
  color: var(--ink);
  font-size: 10.5px;
}
.saved-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.saved-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(7, 9, 30, 0.45);
  border: 1px solid rgba(126, 224, 255, 0.12);
  border-radius: 10px;
  transition: border-color 0.15s;
}
.saved-entry:hover { border-color: rgba(126, 224, 255, 0.4); }
.saved-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.saved-text strong {
  font-size: 12.5px;
  color: var(--ink);
  letter-spacing: 0.2px;
}
.saved-vibe {
  font-size: 11px;
  color: var(--accent-3);
  letter-spacing: 0.3px;
}
.saved-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.btn-tiny {
  padding: 4px 10px;
  font-size: 11.5px;
  border-radius: 8px;
}
.btn-danger {
  border-color: rgba(255, 120, 140, 0.3);
  color: rgba(255, 180, 195, 0.8);
  padding: 4px 8px;
}
.btn-danger:hover {
  border-color: rgba(255, 120, 140, 0.7);
  background: rgba(255, 120, 140, 0.08);
}

/* ---------- Alternate Timelines grid ---------- */
.alternates-panel { margin-top: 22px; }
.alternates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.alt-card {
  background: rgba(10, 14, 40, 0.55);
  border: 1px solid rgba(126, 224, 255, 0.18);
  border-radius: 14px;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.alt-card:hover {
  transform: translateY(-2px);
  border-color: rgba(126, 224, 255, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 24px rgba(126, 224, 255, 0.18);
}
.alt-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alt-avatar svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}
.alt-codename {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2px;
}
.alt-vibe {
  font-size: 13.5px;
  font-weight: 600;
  background: linear-gradient(90deg, var(--accent-3), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.2;
}
.alt-archetype {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.alt-load {
  margin-top: 6px;
  width: 100%;
  font-size: 11px;
}

/* Kids mode forces playful copy & hides any adult-only content
   (Standard mode's playful/adult visibility lives further down in the
   "Adult Mode" CSS section.) */
body.app-kids .playful-text { display: inline; }
body.app-kids .adult-text   { display: none !important; }
body.app-kids .adult-only   { display: none !important; }
body.app-kids #history-panel { display: none !important; }

/* ---------- App-mode toggle (Standard / Kids — primary) ---------- */
.app-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 999px;
  background: rgba(10, 14, 40, 0.55);
  padding: 5px;
  border: 1px solid rgba(126, 224, 255, 0.22);
  margin: 14px auto 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 18px rgba(126, 224, 255, 0.08);
}
.app-mode-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  padding: 8px 22px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: background 0.25s, color 0.25s, transform 0.18s, box-shadow 0.25s;
}
.app-mode-btn:hover:not(.is-active) { color: var(--ink); }
.app-mode-btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0a0a25;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(126,224,255,0.32);
}
body.app-kids .app-mode-btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #3a1d2a;
  box-shadow: 0 0 22px rgba(255, 178, 198, 0.4);
}

/* ---------- Ethics-mode toggle (header sub-toggle) ---------- */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 999px;
  background: rgba(10, 14, 40, 0.55);
  padding: 4px;
  border: 1px solid rgba(126, 224, 255, 0.18);
  margin: 10px auto 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.mode-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  transition: background 0.18s, color 0.18s;
}
.mode-btn:hover:not(.is-active) { color: var(--ink); }
.mode-btn.is-active {
  background: linear-gradient(135deg, rgba(126,224,255,0.85), rgba(200,155,255,0.85));
  color: #0a0a25;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(126,224,255,0.32);
}

/* Hide the Playful/Reflection sub-toggle in Kids mode */
body.app-kids .sub-mode { display: none !important; }

/* ---------- Reflection-mode theme ----------
   A muted twilight: deeper indigo/violet, lower saturation, slower
   movement. Distinct from the default playful palette AND from the
   clinical Adult look. The page should feel like it's asking you to
   slow down. */
body.mode-reflection {
  /* Warm dusk: more pink/peach in the violet, less blue. The page
     should feel like late-evening light, not space. */
  --bg-0: #1a0e22;
  --bg-1: #2a1530;
  --bg-2: #3a1a36;
  --panel: rgba(46, 28, 64, 0.62);
  --panel-border: rgba(220, 180, 200, 0.24);
  --panel-glow: rgba(238, 196, 220, 0.28);
  --ink: #f4e7ee;
  --ink-soft: #d4bccd;
  --ink-mute: #a08aa0;
  --accent: #e9bfd4;
  --accent-2: #f0caa6;
  --accent-3: #f5b8b0;
  --accent-warm: #ffd2a0;
  --reflection-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
}
body.mode-reflection {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(245, 184, 176, 0.22), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(238, 196, 220, 0.20), transparent 60%),
    radial-gradient(700px 500px at 90% 90%, rgba(255, 210, 160, 0.16), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 55%, var(--bg-2));
}
/* Reflection: literary register. Serif body type on key surfaces. */
body.mode-reflection .baby-panel,
body.mode-reflection .pause-panel,
body.mode-reflection .memory-card .memory-text,
body.mode-reflection .ethics p,
body.mode-reflection .reflection-prompt,
body.mode-reflection .vibe-title {
  font-family: var(--reflection-serif);
}
body.mode-reflection .codename {
  font-family: var(--reflection-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.5px;
  font-size: 15px;
}
body.mode-reflection .vibe-title {
  font-style: italic;
  font-weight: 400;
}

/* Quieter motion */
body.mode-reflection .tagline { opacity: 0.85; }
body.mode-reflection .gene-bubbles span {
  opacity: 0.28;
  animation-duration: calc(var(--s) * 1.6);
  filter: saturate(0.65);
}
body.mode-reflection .dna-decor { opacity: 0.18; filter: saturate(0.6); }
body.mode-reflection .avatar-glow { opacity: 0.55; }

/* Make the gentle-reminder ethics footer actually feel weighted */
body.mode-reflection .ethics {
  background: rgba(28, 22, 56, 0.55);
  border-left-width: 4px;
  border-left-color: rgba(214, 184, 228, 0.7);
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.65;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
body.mode-reflection .ethics h3 {
  font-size: 13px;
  color: var(--accent-2);
  margin-bottom: 8px;
}

/* The small italic reflection-prompt block stays hidden in Reflection mode
   (the Pause panel below now carries the question with more weight). */
body.mode-reflection #reflection-prompt { display: none !important; }

/* ---------- Pause panel (Reflection mode) ---------- */
.pause-panel {
  width: 100%;
  margin-top: 14px;
  padding: 16px 18px;
  background: rgba(28, 22, 56, 0.55);
  /* R12 rev (Ethics POLISH): consolidated border declarations — was
     `border: 1px solid X` then `border-left: 3px solid Y` override.
     Spelling out each side removes the shorthand→override dance and
     makes the asymmetric accent-left explicit. */
  border-top: 1px solid rgba(180, 160, 220, 0.32);
  border-right: 1px solid rgba(180, 160, 220, 0.32);
  border-bottom: 1px solid rgba(180, 160, 220, 0.32);
  border-left: 3px solid rgba(214, 184, 228, 0.75);
  border-radius: 14px;
  text-align: left;
  color: var(--ink-soft);
}
.pause-panel[hidden] { display: none; }
.pause-panel h3 {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
}
.pause-panel h4 {
  margin: 14px 0 6px;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-warm);
  font-weight: 600;
  opacity: 0.85;
}
.pause-observations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pause-observations li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
  padding-left: 14px;
  border-left: 2px solid rgba(214, 184, 228, 0.4);
}
.pause-cant-see {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.pause-cant-see li {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  padding: 3px 10px;
  background: rgba(180, 160, 220, 0.08);
  border: 1px solid rgba(180, 160, 220, 0.2);
  border-radius: 999px;
}
.pause-question {
  margin-top: 14px;
  padding: 12px 14px 12px 38px;
  background: rgba(7, 7, 26, 0.45);
  border-radius: 10px;
  position: relative;
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
}
.pause-q-mark {
  position: absolute;
  left: 14px;
  top: 12px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(214, 184, 228, 0.3);
  color: var(--accent-2);
  text-align: center;
  line-height: 20px;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
}

/* Don't let Kids mode override the pause panel (it's hidden anyway,
   but keep the rules orthogonal). */
body.app-kids .pause-panel { display: none !important; }

/* ---------- Trait Constellation ----------
   Five-node SVG visualization of the baby's personality. Replaces the
   text-heavy personality dl in Reflection / Kids; supplements it in
   Adult. Mode-specific styling via body classes — same JS-generated
   SVG, different surface treatments. */
.trait-constellation {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
}
.trait-constellation:empty { display: none; }
.trait-constellation .constellation-svg {
  width: 240px;
  height: 240px;
  overflow: visible;
}
.trait-constellation .bg-stars circle {
  fill: rgba(255, 255, 255, 0.7);
}
.trait-constellation .links line {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.55;
  stroke-linecap: round;
}
.trait-constellation .nodes .node circle {
  fill: var(--accent);
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.35;
  filter: drop-shadow(0 0 3px currentColor);
  transition: r 0.5s ease, opacity 0.5s ease, fill 0.5s ease;
}
.trait-constellation .nodes .node .ray {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.5;
  stroke-linecap: round;
  pointer-events: none;
}
.trait-constellation .nodes .node text {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  fill: var(--ink-mute);
  font-family: inherit;
}
/* Per-trait color identity. Lets the constellation read as a structure,
   not a uniform blob. Each node uses its mode's CSS variable so the
   palette swap follows mode automatically. */
.trait-constellation .nodes .node-0 circle { fill: var(--accent); }      /* O */
.trait-constellation .nodes .node-1 circle { fill: var(--accent-2); }    /* C */
.trait-constellation .nodes .node-2 circle { fill: var(--accent-3); }    /* E */
.trait-constellation .nodes .node-3 circle { fill: var(--accent-warm); } /* A */
.trait-constellation .nodes .node-4 circle { fill: var(--success); }     /* N / Confidence */

/* Reflection: soft glow + slow pulse. Lines drift in opacity. */
body.mode-reflection .trait-constellation .nodes .node circle {
  filter: drop-shadow(0 0 5px var(--accent-2));
  animation: constellationPulse 5s ease-in-out infinite;
}
body.mode-reflection .trait-constellation .nodes .node-1 circle { animation-delay: -1s; }
body.mode-reflection .trait-constellation .nodes .node-2 circle { animation-delay: -2s; }
body.mode-reflection .trait-constellation .nodes .node-3 circle { animation-delay: -3s; }
body.mode-reflection .trait-constellation .nodes .node-4 circle { animation-delay: -4s; }
body.mode-reflection .trait-constellation .links line {
  stroke: var(--accent-2);
  stroke-width: 0.85;
  stroke-dasharray: 1 3;
  animation: constellationLinkDrift 9s linear infinite;
}
@keyframes constellationPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 5px var(--accent-2)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 9px var(--accent-2)); }
}
@keyframes constellationLinkDrift {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 16; }
}
body.mode-reflection .trait-constellation .nodes .node circle {
  transform-origin: center;
  transform-box: fill-box;
}

/* Kids: warmer fills, gentle pulse, larger label type. */
body.app-kids .trait-constellation .nodes .node circle {
  filter: drop-shadow(0 0 6px var(--accent));
  animation: kidsConstellationPulse 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
body.app-kids .trait-constellation .nodes .node-1 circle { animation-delay: -0.8s; }
body.app-kids .trait-constellation .nodes .node-2 circle { animation-delay: -1.6s; }
body.app-kids .trait-constellation .nodes .node-3 circle { animation-delay: -2.4s; }
body.app-kids .trait-constellation .nodes .node-4 circle { animation-delay: -3.2s; }
body.app-kids .trait-constellation .nodes .node text { font-size: 11px; fill: var(--ink); }
body.app-kids .trait-constellation .links line { stroke: var(--accent); stroke-width: 1; }
@keyframes kidsConstellationPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 6px var(--accent)); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 0 12px var(--accent-3)); }
}

/* Adult: clinical dots, confidence rings, crisp lines, no glow. */
body.mode-adult .trait-constellation .nodes .node circle {
  filter: none;
  stroke: rgba(126, 224, 255, 0.5);
  stroke-width: 0.5;
}
body.mode-adult .trait-constellation .links line {
  stroke: rgba(126, 224, 255, 0.4);
  stroke-width: 0.6;
}
body.mode-adult .trait-constellation .nodes .node text {
  fill: var(--ink-soft);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
body.mode-adult .trait-constellation .nodes .node .confidence-ring {
  stroke: rgba(126, 224, 255, 0.45);
  stroke-dasharray: 2 3;
}
body.mode-adult .trait-constellation .nodes .node .confidence-ring.conf-low {
  stroke: rgba(255, 210, 138, 0.55);
}
body.mode-adult .trait-constellation .nodes .node .confidence-ring.conf-moderate {
  stroke: rgba(200, 155, 255, 0.5);
}

/* ---------- Kids: Hobby Constellation ----------
   Six future hobbies arranged around a central child. Pulls warmth
   from the Kids palette via the existing CSS variables. */
.hobby-constellation { display: none; }
body.app-kids .hobby-constellation:not(:empty) {
  display: flex;
  justify-content: center;
  margin: 4px 0 12px;
}
.hobby-constellation .hobby-constellation-svg {
  width: 100%;
  max-width: 280px;
  height: auto;
  overflow: visible;
}
.hobby-constellation .hobby-links line {
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.5;
}
.hobby-constellation .hobby-center {
  fill: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent));
}
.hobby-constellation .hobby-node circle {
  fill: var(--accent-3);
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1;
  filter: drop-shadow(0 0 5px var(--accent-3));
  transform-origin: center;
  transform-box: fill-box;
  animation: hobbyNodeBob 4.2s ease-in-out infinite;
}
.hobby-constellation .hobby-node:nth-child(2n) circle { animation-delay: -1.1s; fill: var(--accent); }
.hobby-constellation .hobby-node:nth-child(3n) circle { animation-delay: -2.2s; fill: var(--accent-warm); }
.hobby-constellation .hobby-node text {
  font-size: 11px;
  fill: var(--ink);
  font-family: inherit;
  letter-spacing: 0.2px;
}
@keyframes hobbyNodeBob {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* ---------- Behavioral Trace Notes (card grid) ---------- */
.behavioral-traces {
  width: 100%;
  margin: 10px 0 6px;
  text-align: left;
}
.behavioral-traces[hidden] { display: none; }
.behavioral-traces .traces-heading {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent-warm);
  font-weight: 600;
}
.behavioral-traces .traces-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.behavioral-traces .trace-card {
  padding: 9px 11px;
  background: rgba(10, 14, 40, 0.45);
  border: 1px solid rgba(126, 224, 255, 0.18);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  transition: border-color 0.3s ease, background 0.3s ease;
}
/* Mode-specific trace card surfaces */
body.mode-reflection .behavioral-traces .traces-heading { color: var(--accent-2); }
body.mode-reflection .behavioral-traces .trace-card {
  background: rgba(28, 22, 56, 0.5);
  border-color: rgba(180, 160, 220, 0.25);
  font-style: italic;
  color: var(--ink);
}
body.app-kids .behavioral-traces .traces-heading { color: var(--accent); }
body.app-kids .behavioral-traces .trace-card {
  background: rgba(255, 250, 246, 0.6);
  border-color: rgba(220, 140, 170, 0.22);
  color: var(--ink);
  border-radius: 14px;
}
body.mode-adult .behavioral-traces .traces-heading { color: var(--accent); letter-spacing: 1.8px; }
body.mode-adult .behavioral-traces .trace-card {
  background: rgba(7, 9, 30, 0.55);
  border-color: rgba(126, 224, 255, 0.22);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  /* R14 rev (UX POLISH): monospace at 11.5px in 9×11 box ran too tight;
     bump padding to 11×14 + line-height 1.6 for breathing room. */
  padding: 11px 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- Reflection: Memory Snapshot cards ----------
   A three-card strip showing one memory from each life stage. Only
   surfaces in Reflection mode. Picks are seeded by codename so each
   baby's memories are stable across re-renders. */
.memory-cards { width: 100%; margin: 14px 0 6px; text-align: left; }
.memory-cards[hidden] { display: none; }
.reflection-only { display: none; }
body.mode-reflection .reflection-only { display: revert; }
.memory-cards .memory-heading {
  margin: 0 0 10px;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
}
.memory-cards .memory-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.memory-cards .memory-card {
  position: relative;
  padding: 10px 12px 11px;
  background: rgba(28, 22, 56, 0.55);
  border: 1px solid rgba(180, 160, 220, 0.28);
  border-radius: 12px;
  overflow: hidden;
}
.memory-cards .memory-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 30% 20%, rgba(214, 184, 228, 0.10), transparent 70%);
}
.memory-cards .memory-age {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 6px;
}
.memory-cards .memory-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
}
/* Subtle staggered fade-in so the three cards feel sequential. */
.memory-cards .memory-card { animation: memoryCardIn 0.6s ease both; }
.memory-cards .memory-card[data-stage="17"] { animation-delay: 0.15s; }
.memory-cards .memory-card[data-stage="47"] { animation-delay: 0.3s; }
@keyframes memoryCardIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 540px) {
  .memory-cards .memory-strip { grid-template-columns: 1fr; }
  /* R14 rev (UX MAJOR): two-column traces grid produced cramped 1-2 word
     lines on narrow viewports; stack to single column for legibility. */
  .behavioral-traces .traces-grid { grid-template-columns: 1fr; }
}

/* ---------- Future Branching Tree ----------
   SVG tree from a root node (the baby) to N future-path leaves. The
   visible #future-paths list is hidden — the tree replaces it. */
.future-tree {
  width: 100%;
  display: flex;
  justify-content: center;
}
.future-tree:empty { display: none; }
.future-tree-svg {
  width: 100%;
  max-width: 380px;
  height: auto;
  overflow: visible;
}
.future-tree-svg .branch {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.7;
}
.future-tree-svg .root,
.future-tree-svg .leaf circle {
  fill: var(--accent);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
}
.future-tree-svg .leaf-text {
  font: 12.5px/1.4 inherit;
  color: var(--ink-soft);
  letter-spacing: 0.2px;
}

/* Reflection: soft organic curves, dreamy glow on leaves, drifting motion. */
body.mode-reflection .future-tree-svg .branch {
  stroke: var(--accent-2);
  stroke-width: 0.9;
  stroke-dasharray: 1 4;
  animation: treeBranchDrift 12s linear infinite;
  opacity: 0.85;
}
body.mode-reflection .future-tree-svg .leaf circle {
  fill: var(--accent-2);
  filter: drop-shadow(0 0 6px var(--accent-2));
  animation: treeLeafPulse 5s ease-in-out infinite;
}
body.mode-reflection .future-tree-svg .root {
  fill: var(--accent-3);
  filter: drop-shadow(0 0 8px var(--accent-3));
}
body.mode-reflection .future-tree-svg .leaf-text {
  color: var(--ink);
  font-style: italic;
}
@keyframes treeBranchDrift {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 20; }
}
@keyframes treeLeafPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 6px var(--accent-2)); }
  50%      { transform: scale(1.15); filter: drop-shadow(0 0 11px var(--accent-2)); }
}
body.mode-reflection .future-tree-svg .leaf circle {
  transform-origin: center;
  transform-box: fill-box;
}

/* Kids: thicker rounded branches, planet-like leaves with radial fill. */
body.app-kids .future-tree-svg .branch {
  stroke: var(--accent);
  stroke-width: 1.6;
  opacity: 0.85;
}
body.app-kids .future-tree-svg .leaf circle {
  fill: var(--accent-3);
  r: 7;
  filter: drop-shadow(0 0 7px var(--accent));
  animation: kidsLeafBob 3.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
body.app-kids .future-tree-svg .root {
  fill: var(--accent);
  r: 9;
  filter: drop-shadow(0 0 10px var(--accent));
}
body.app-kids .future-tree-svg .leaf-text {
  color: var(--ink);
  font-size: 13px;
}
@keyframes kidsLeafBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Adult: precise straight branches, clinical typography, no glow. */
body.mode-adult .future-tree-svg .branch {
  stroke: rgba(126, 224, 255, 0.5);
  stroke-width: 0.7;
  stroke-dasharray: none;
  opacity: 0.9;
}
body.mode-adult .future-tree-svg .leaf circle {
  fill: rgba(126, 224, 255, 0.9);
  r: 3.5;
  filter: none;
}
body.mode-adult .future-tree-svg .root {
  fill: rgba(126, 224, 255, 0.9);
  r: 5;
}
body.mode-adult .future-tree-svg .leaf-text {
  color: var(--ink-soft);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.2px;
}

/* ---------- Dynamic UI evolution ----------
   The body listens to --opt-intensity (0..1). Adult mode already has
   elaborate intensity-driven rules baked in; these add a subtler,
   universal layer that applies to ALL modes. As intensity rises the
   page desaturates and the gene bubbles fade — never harshly. */
body {
  transition: filter 1.4s ease;
  filter: saturate(calc(1 - 0.18 * var(--opt-intensity, 0)));
}
.gene-bubbles span {
  opacity: calc(0.85 - 0.45 * var(--opt-intensity, 0));
  transition: opacity 1.4s ease;
}
/* When the user just clicked Preserve Natural Variation, gently bloom
   the palette for a few seconds. */
body.is-warming {
  filter: saturate(1.15) brightness(1.02);
  transition: filter 0.9s ease;
}
body.is-warming .gene-bubbles span {
  opacity: 0.95;
  transition: opacity 0.9s ease;
}

/* ---------- Kids-mode theme overrides ---------- */
/* Warm, softly-lit palette. Same structural code, different emotional weather. */
body.app-kids {
  --bg-0: #fbeede;
  --bg-1: #f7d6e2;
  --bg-2: #e8d4f0;
  --panel: rgba(255, 248, 240, 0.72);
  --panel-border: rgba(220, 140, 170, 0.28);
  --panel-glow: rgba(255, 170, 200, 0.3);
  --ink: #3a2a3f;
  --ink-soft: #6e5a72;
  --ink-mute: #9c8a9a;
  --accent: #ff8da3;
  --accent-2: #b08fe0;
  --accent-3: #ffc06e;
  --accent-warm: #ffb06b;
  --success: #6cc8a0;
  --shadow: 0 8px 30px rgba(120, 70, 110, 0.18);
  --radius: 22px;
}
body.app-kids {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255, 200, 220, 0.45), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(220, 200, 255, 0.45), transparent 60%),
    radial-gradient(700px 500px at 90% 90%, rgba(255, 220, 170, 0.35), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 55%, var(--bg-2));
}

/* Smooth transitions between modes */
body, .panel, .btn, .field input, .field select,
.parent-card, .surprise-wrap, .future-block,
.trait-conflicts, .reflection-prompt, .saved-timelines,
.alt-card, .future-card, .history-card, .history-toggle,
.app-mode-toggle, .mode-toggle, .chaos-pill,
.style-toggle, .gender-toggle, .reminder-banner {
  transition:
    background 0.45s ease,
    background-color 0.45s ease,
    border-color 0.45s ease,
    color 0.35s ease,
    border-radius 0.35s ease,
    box-shadow 0.45s ease;
}

/* Header gradient text — softer in Kids mode */
body.app-kids .site-header h1 {
  text-shadow: 0 0 22px rgba(255, 180, 200, 0.25);
}
body.app-kids .site-header .logo-mark {
  text-shadow: 0 0 14px var(--accent);
}
body.app-kids .tagline { color: var(--ink-soft); }
body.app-kids .disclaimer { color: var(--ink-mute); }

/* Panel softening */
body.app-kids .panel {
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(220, 140, 170, 0.08),
    0 18px 60px rgba(120, 70, 110, 0.12),
    0 0 32px rgba(255, 170, 200, 0.1);
}
body.app-kids .panel::before {
  background: linear-gradient(135deg, rgba(255,141,163,0.4), rgba(176,143,224,0.0) 40%, rgba(255,192,110,0.35) 100%);
  opacity: 0.5;
}

/* Parent cards */
body.app-kids .parent-card {
  background: rgba(255, 250, 246, 0.55);
  border: 1px solid rgba(220, 140, 170, 0.18);
  border-radius: 18px;
}
body.app-kids .parent-card[data-parent="A"] { box-shadow: inset 0 0 0 1px rgba(255, 141, 163, 0.08), 0 0 22px rgba(255, 141, 163, 0.08); }
body.app-kids .parent-card[data-parent="B"] { box-shadow: inset 0 0 0 1px rgba(176, 143, 224, 0.08), 0 0 22px rgba(176, 143, 224, 0.08); }
body.app-kids .parent-card[data-parent="A"] h3 { color: var(--accent); }
body.app-kids .parent-card[data-parent="B"] h3 { color: var(--accent-2); }

/* Inputs */
body.app-kids .field input[type="text"],
body.app-kids .field input[type="number"],
body.app-kids .field select {
  background: rgba(255, 250, 246, 0.85);
  border: 1px solid rgba(220, 140, 170, 0.22);
  border-radius: 14px;
  color: var(--ink);
}
body.app-kids .field input:focus,
body.app-kids .field select:focus {
  border-color: rgba(255, 141, 163, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 141, 163, 0.18);
}

/* Sliders — warmer track */
body.app-kids input[type="range"]::-webkit-slider-runnable-track,
body.app-kids input[type="range"]::-moz-range-track {
  background: linear-gradient(90deg, rgba(255,141,163,0.4), rgba(176,143,224,0.4), rgba(255,192,110,0.4));
  border: 1px solid rgba(220, 140, 170, 0.22);
}
body.app-kids input[type="range"]::-webkit-slider-thumb,
body.app-kids input[type="range"]::-moz-range-thumb {
  background: radial-gradient(circle at 30% 30%, #ffffff, #ff8da3 70%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 14px rgba(255, 141, 163, 0.55);
}
body.app-kids .field-range .val { color: var(--accent); }

/* Buttons */
body.app-kids .btn {
  border: 1px solid rgba(220, 140, 170, 0.28);
  background: rgba(255, 250, 246, 0.7);
  color: var(--ink);
  border-radius: 16px;
  text-shadow: none;
}
body.app-kids .btn:hover {
  border-color: rgba(255, 141, 163, 0.6);
  background: rgba(255, 230, 235, 0.85);
  box-shadow: 0 0 18px rgba(255, 141, 163, 0.18);
}
body.app-kids .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.12);
  box-shadow:
    0 0 26px rgba(255, 141, 163, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Slider rows */
body.app-kids .slider-row .slider-label { color: var(--ink-soft); }
body.app-kids .slider-row .slider-value { color: var(--accent); }
body.app-kids .slider-row .slider-foot { color: var(--ink-mute); }

/* Surprise meter */
body.app-kids .surprise-wrap {
  background: rgba(255, 250, 246, 0.55);
  border: 1px solid rgba(255, 192, 110, 0.28);
  border-radius: 18px;
}
body.app-kids .surprise-pct { color: var(--accent); }

/* Codename / vibe-title */
body.app-kids .codename {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(255, 141, 163, 0.35);
  letter-spacing: 1.8px;
}

/* Stat panel */
body.app-kids .baby-stats dt { color: var(--ink-mute); }
body.app-kids .baby-stats dt.ocean-sep { color: var(--accent-2); }
body.app-kids .baby-stats dd { color: var(--ink); }

/* Style + Gender toggles */
body.app-kids .style-toggle,
body.app-kids .gender-toggle {
  background: rgba(255, 250, 246, 0.55);
  border-color: rgba(220, 140, 170, 0.22);
}
body.app-kids .gender-toggle { border-color: rgba(255, 192, 110, 0.32); }
body.app-kids .style-btn.is-active {
  background: linear-gradient(135deg, var(--accent-3), var(--accent));
  color: #4a1f2f;
  box-shadow: 0 0 14px rgba(255, 192, 110, 0.32);
}
body.app-kids .gender-btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #4a1f2f;
  box-shadow: 0 0 14px rgba(255, 141, 163, 0.32);
}

/* Chaos / Wild Card pill */
body.app-kids .chaos-pill {
  border-color: rgba(255, 192, 110, 0.45);
  background: rgba(255, 250, 246, 0.55);
  color: var(--ink-soft);
}
body.app-kids .chaos-pill.is-active {
  background: linear-gradient(135deg, var(--accent-3), var(--accent));
  color: #4a1f2f;
  box-shadow: 0 0 22px rgba(255, 178, 130, 0.55);
}

/* Archetype tag */
body.app-kids .archetype-tag {
  background: linear-gradient(135deg, rgba(255, 141, 163, 0.22), rgba(255, 192, 110, 0.22));
  border-color: rgba(255, 141, 163, 0.35);
  color: var(--ink);
}

/* Future block */
body.app-kids .future-block {
  background: rgba(255, 250, 246, 0.55);
  border-color: rgba(176, 143, 224, 0.28);
  border-radius: 16px;
}
body.app-kids .future-block h3 { color: var(--accent-2); }
body.app-kids .future-paths li { color: var(--ink-soft); }
body.app-kids .future-paths li::before { color: var(--accent); }
body.app-kids .event-chip {
  background: rgba(255, 141, 163, 0.12);
  border-color: rgba(255, 141, 163, 0.3);
  color: var(--ink-soft);
}
body.app-kids .future-news-heading { color: var(--accent-warm) !important; }
body.app-kids .future-headlines li {
  border-left-color: rgba(255, 192, 110, 0.4);
  color: var(--ink-soft);
}

/* Trait conflicts */
body.app-kids .trait-conflicts {
  background: rgba(255, 250, 246, 0.55);
  border-color: rgba(255, 192, 110, 0.28);
  border-radius: 16px;
}
body.app-kids .trait-conflicts h3 { color: var(--accent-warm); }
body.app-kids .conflict-chip {
  background: rgba(255, 250, 246, 0.7);
  border-color: rgba(255, 192, 110, 0.3);
  border-radius: 14px;
}
body.app-kids .conflict-tag { color: var(--accent-warm); }
body.app-kids .conflict-note { color: var(--ink-soft); }

/* Reflection prompt */
body.app-kids .reflection-prompt {
  background: rgba(255, 250, 246, 0.55);
  border-color: rgba(176, 143, 224, 0.4);
  color: var(--ink-soft);
}
body.app-kids .reflection-prompt .reflection-mark {
  background: rgba(176, 143, 224, 0.3);
  color: var(--accent-2);
}

/* Saved timelines */
body.app-kids .saved-timelines {
  background: rgba(255, 250, 246, 0.5);
  border-color: rgba(220, 140, 170, 0.2);
  border-radius: 16px;
}
body.app-kids .saved-entry {
  background: rgba(255, 250, 246, 0.7);
  border-color: rgba(220, 140, 170, 0.18);
  border-radius: 14px;
}
body.app-kids .saved-entry:hover { border-color: rgba(255, 141, 163, 0.5); }
body.app-kids .saved-text strong { color: var(--ink); }
body.app-kids .saved-vibe { color: var(--accent); }

/* Alternates */
body.app-kids .alt-card {
  background: rgba(255, 250, 246, 0.55);
  border-color: rgba(220, 140, 170, 0.24);
  border-radius: 18px;
}
body.app-kids .alt-codename { color: var(--accent); }
body.app-kids .alt-vibe {
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.app-kids .alt-archetype { color: var(--ink-soft); }

/* Future cards */
body.app-kids .future-card {
  background: rgba(255, 250, 246, 0.6);
  border-color: rgba(176, 143, 224, 0.28);
  border-radius: 18px;
}
body.app-kids .future-headline {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.app-kids .future-details li { color: var(--ink-soft); }
body.app-kids .future-details li::before { color: var(--accent-2); }

/* Reminder banner */
body.app-kids .reminder-banner {
  background: rgba(255, 250, 246, 0.92);
  border-color: rgba(255, 192, 110, 0.5);
  color: var(--ink);
  box-shadow: 0 8px 28px rgba(120, 70, 110, 0.18), 0 0 26px rgba(255, 192, 110, 0.2);
}

/* Ethics block */
body.app-kids .ethics {
  background: rgba(255, 250, 246, 0.55);
  border-left-color: rgba(255, 192, 110, 0.6);
  color: var(--ink-soft);
}
body.app-kids .ethics h3 { color: var(--accent-warm); }

/* DNA decor + gene bubbles — softer & slower in Kids */
body.app-kids .dna-decor { opacity: 0.2; }
body.app-kids .dna-left  { color: var(--accent); }
body.app-kids .dna-right { color: var(--accent-2); }
body.app-kids .gene-bubbles span {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,141,163,0.45) 50%, rgba(176,143,224,0.0) 75%);
  box-shadow: 0 0 18px rgba(255, 141, 163, 0.35);
  animation-duration: calc(var(--s) * 1.4);
  opacity: 0.7;
}
body.app-kids .gene-bubbles span:nth-child(3n) {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(176,143,224,0.5) 50%, rgba(255,192,110,0.0) 75%);
}
body.app-kids .gene-bubbles span:nth-child(5n) {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,192,110,0.5) 50%, rgba(255,141,163,0.0) 75%);
}

/* ---------- Kids: derived-stat star row ---------- */
.kids-stars-row {
  display: none;
  width: 100%;
  margin: -2px 0 12px;
  padding: 10px 14px;
  background: rgba(255, 250, 246, 0.55);
  border: 1px solid rgba(220, 140, 170, 0.22);
  border-radius: 14px;
  text-align: left;
}
body.app-kids .kids-stars-row { display: block; }
.kids-stars-row dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-size: 12.5px;
}
.kids-stars-row dt {
  color: var(--ink-mute);
  letter-spacing: 0.3px;
}
.kids-stars-row dd {
  margin: 0;
  color: var(--accent);
  letter-spacing: 1px;
  font-weight: 600;
}

/* ---------- Kids: slider explainer ("?") button + popover ---------- */
.slider-explain {
  display: none;
  vertical-align: baseline;
}
body.app-kids .slider-explain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 141, 163, 0.18);
  border: 1px solid rgba(255, 141, 163, 0.35);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background 0.18s, transform 0.12s;
}
body.app-kids .slider-explain:hover {
  background: rgba(255, 141, 163, 0.35);
  transform: scale(1.08);
}
.slider-explain[aria-expanded="true"] {
  background: var(--accent) !important;
  color: #fff !important;
}

.slider-popover {
  display: none;
  margin: 6px 0 2px;
  padding: 9px 12px;
  background: rgba(255, 250, 246, 0.92);
  border: 1px solid rgba(255, 141, 163, 0.32);
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(120, 70, 110, 0.12);
}
.slider-popover.is-open { display: block; animation: popIn 0.22s ease; }
@keyframes popIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* R13 rev (Visual Director POLISH): guard the popover entrance for users
   who request reduced motion — show without the slide-fade. */
@media (prefers-reduced-motion: reduce) {
  .slider-popover.is-open { animation: none !important; }
}

/* ---------- Humanity reminder banner ---------- */
.reminder-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translate(-50%, -16px);
  z-index: 50;
  max-width: min(640px, 92vw);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(20, 22, 55, 0.85);
  border: 1px solid rgba(255, 210, 138, 0.45);
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.3px;
  text-align: center;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 26px rgba(255, 210, 138, 0.2);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reminder-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Environment Factors panel ---------- */
.env-panel { margin-top: 0; }

/* Env Modifiers <details> disclosure (R4 triage). In Adult mode, the
 * env-grid sits between Parents and Enhancement Allocation, adding a
 * fourth input layer before the user sees output. Collapsing it
 * behind a summary keeps the inputs reachable without consuming
 * attention. Default-open in Reflection/Kids, default-closed in
 * Adult — applyAppModeClass() flips the `open` attribute when the
 * mode toggle is used. Chevron size + opacity + motion match
 * .parent-advanced exactly (R5 coherence pass) so the two read as
 * one disclosure vocabulary. */
.env-disclosure { width: 100%; }
.env-disclosure > .env-disclosure-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 2px;
  min-height: 44px;
  user-select: none;
}
.env-disclosure > .env-disclosure-summary::-webkit-details-marker { display: none; }
/* Keyboard focus ring — mirrors the parent-advanced-summary disclosure
   vocabulary (Round 4 revision): same accent ring used across primary
   controls so the two disclosures read as one focus pattern. */
.parent-advanced-summary:focus-visible,
.env-disclosure > .env-disclosure-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.env-disclosure > .env-disclosure-summary h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.env-disclosure > .env-disclosure-summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0.55;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
  margin-left: auto;
  color: var(--ink-mute);
}
.env-disclosure[open] > .env-disclosure-summary::after {
  transform: translateY(1px) rotate(225deg);
  opacity: 0.85;
}
.env-disclosure-hint {
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0.7;
}
.env-disclosure[open] > .subtle,
.env-disclosure[open] > .env-grid {
  animation: parent-advanced-reveal 0.45s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .env-disclosure[open] > .subtle,
  .env-disclosure[open] > .env-grid { animation: none !important; }
}
/* iPad-portrait (≤768px): cushion the touch target and let the hint
   wrap below the heading so the chevron stays right-aligned without
   cramping the h2. Mirrors the touch-target padding used on primary
   buttons in this breakpoint. */
@media (max-width: 768px) {
  .env-disclosure > .env-disclosure-summary {
    flex-wrap: wrap;
    padding: 8px 4px;
    row-gap: 2px;
  }
  .env-disclosure > .env-disclosure-summary h2 { flex: 1 1 auto; }
  .env-disclosure > .env-disclosure-summary .env-disclosure-hint {
    flex: 1 0 100%;
    order: 3;
  }
}

.env-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 18px;
}
.env-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.env-field label {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
}

/* ---------- Trait Conflict chips ---------- */
.trait-conflicts {
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(10, 14, 40, 0.42);
  border: 1px solid rgba(255, 210, 138, 0.22);
  border-radius: 12px;
  text-align: left;
}
.trait-conflicts h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-warm);
}
.conflict-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.conflict-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(7, 9, 30, 0.45);
  border: 1px solid rgba(255, 210, 138, 0.18);
  border-radius: 10px;
}
.conflict-tag {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-warm);
  letter-spacing: 0.2px;
}
.conflict-note {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ---------- Reflection prompt ---------- */
.reflection-prompt {
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px 12px 40px;
  background: rgba(20, 22, 55, 0.45);
  border: 1px solid rgba(200, 155, 255, 0.28);
  border-left-width: 3px;
  border-radius: 10px;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  position: relative;
  text-align: left;
}
.reflection-prompt .reflection-mark {
  position: absolute;
  left: 14px;
  top: 11px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(200, 155, 255, 0.25);
  color: var(--accent-2);
  text-align: center;
  line-height: 18px;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
}

/* ---------- News headlines block ---------- */
.future-news-heading {
  margin: 12px 0 4px !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  color: var(--accent-warm) !important;
}
.future-headlines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.future-headlines li {
  padding: 4px 0 4px 10px;
  position: relative;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.4;
  border-left: 1px solid rgba(255, 210, 138, 0.25);
  margin-left: 2px;
  margin-bottom: 4px;
}

/* ---------- Multi-Future cards ---------- */
.futures-panel { margin-top: 22px; }
.futures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.future-card {
  background: rgba(10, 14, 40, 0.55);
  border: 1px solid rgba(200, 155, 255, 0.22);
  border-radius: 14px;
  padding: 14px;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.future-card:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 155, 255, 0.55);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 24px rgba(200, 155, 255, 0.2);
}
.future-headline {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.future-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.future-details li {
  padding: 4px 0 4px 14px;
  position: relative;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.future-details li::before {
  content: "·";
  position: absolute;
  left: 4px;
  top: 0;
  font-size: 18px;
  color: var(--accent-2);
}

/* ---------- History accordion ---------- */
.history-panel {
  position: relative;
  z-index: 1;
}
.history-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(20, 22, 55, 0.45);
  border: 1px solid rgba(126, 224, 255, 0.18);
  border-radius: 12px;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.4px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.history-toggle:hover { border-color: rgba(126, 224, 255, 0.5); }
.history-chevron {
  transition: transform 0.2s;
  color: var(--accent);
}
.history-toggle.is-open .history-chevron { transform: rotate(180deg); }
.history-content {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  animation: historyOpen 0.35s ease;
}
@keyframes historyOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.history-card {
  padding: 12px 14px;
  background: rgba(10, 14, 40, 0.5);
  border: 1px solid rgba(255, 210, 138, 0.18);
  border-radius: 12px;
}
.history-card h3 {
  margin: 0 0 6px;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: var(--accent-warm);
}
.history-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ====================================================================
 * Adult Mode — clinical biotech-product styling
 * ==================================================================== */

body { --opt-intensity: 0; }  /* set by JS from budget usage */

/* Mode-conditional text visibility */
.adult-text { display: none; }
.reflection-text { display: none; }
.playful-text { display: inline; }
body.mode-adult .adult-text { display: inline; }
body.mode-adult .playful-text { display: none; }
body.mode-adult .reflection-text { display: none; }

/* In Reflection mode: prefer .reflection-text when present, fall back
   to .playful-text otherwise. The :has() selector lets us hide the
   playful sibling only when a reflection-text alternative exists in
   the same parent — buttons / headings without a reflection variant
   continue to read their playful copy. */
body.mode-reflection .reflection-text { display: inline; }
body.mode-reflection *:has(> .reflection-text) > .playful-text { display: none; }

/* Mode-conditional whole-block visibility */
.adult-only { display: none; }
body.mode-adult .adult-only { display: revert; }
/* JS-driven gating (e.g. #budget-panel waiting on generateCount>=2)
 * must still hide adult-only panels via the [hidden] attribute. */
body.mode-adult .adult-only[hidden] { display: none; }
body.mode-adult .playful-only { display: none !important; }

/* Beta-tag inline label */
.beta-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid rgba(126, 224, 255, 0.45);
  color: var(--accent);
  background: rgba(126, 224, 255, 0.08);
  vertical-align: middle;
  font-weight: 600;
}

/* Cool the accents toward clinical white-cyan as optimization climbs.
   The base palette is also pushed toward a more monochrome blue-gray
   so Adult reads less "neon biotech" and more "medical record viewer". */
body.mode-adult {
  --bg-0: #060814;
  --bg-1: #0a0e1c;
  --bg-2: #10162a;
  --ink: #e2e8f4;
  --ink-soft: #99a3b8;
  --ink-mute: #6c768a;
  --panel: rgba(14, 18, 36, 0.55);
  --panel-border: rgba(140, 180, 220, 0.18);
  --accent:    color-mix(in srgb, #7ec0e0 calc((1 - var(--opt-intensity)) * 100%), #d6ecff calc(var(--opt-intensity) * 100%));
  --accent-2:  color-mix(in srgb, #8a9fc0 calc((1 - var(--opt-intensity)) * 100%), #b8c8e2 calc(var(--opt-intensity) * 100%));
  --accent-3:  color-mix(in srgb, #9eb4d0 calc((1 - var(--opt-intensity)) * 100%), #9eb4d0 calc(var(--opt-intensity) * 100%));
  --accent-warm: color-mix(in srgb, #c0c8d6 calc((1 - var(--opt-intensity)) * 100%), #d2dae6 calc(var(--opt-intensity) * 100%));
  --adult-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

body.mode-adult {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(126, 192, 224, calc(0.16 - var(--opt-intensity) * 0.10)), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(140, 160, 192, calc(0.14 - var(--opt-intensity) * 0.10)), transparent 60%),
    radial-gradient(700px 500px at 90% 90%, rgba(160, 172, 196, calc(0.10 - var(--opt-intensity) * 0.10)), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 60%, var(--bg-2));
}

/* Monospace section headings in Adult mode — feels like a record viewer. */
body.mode-adult .panel h2,
body.mode-adult #baby-heading,
body.mode-adult .codename,
body.mode-adult .archetype-tag {
  font-family: var(--adult-mono);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-size: 12px;
}
body.mode-adult .codename {
  font-weight: 600;
  text-shadow: none;
  color: var(--ink);
  background: rgba(126, 192, 224, 0.08);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(126, 192, 224, 0.22);
  display: inline-block;
}
body.mode-adult .archetype-tag {
  background: rgba(126, 192, 224, 0.10);
  border-radius: 4px;
  border: 1px solid rgba(126, 192, 224, 0.28);
  color: var(--ink);
  box-shadow: none;
}

/* Quieter decorations as user optimizes more aggressively */
body.mode-adult .gene-bubbles span {
  opacity: calc(0.6 - var(--opt-intensity) * 0.45);
  filter: saturate(calc(1 - var(--opt-intensity) * 0.7));
}
body.mode-adult .dna-decor {
  opacity: calc(0.18 - var(--opt-intensity) * 0.15);
  filter: saturate(calc(1 - var(--opt-intensity) * 0.6));
}

/* Tighten + cool the panels */
body.mode-adult .panel {
  border-color: rgba(140, 200, 255, calc(0.12 + var(--opt-intensity) * 0.10));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 60px rgba(0, 0, 0, 0.5),
    0 0 calc(32px * (1 - var(--opt-intensity))) rgba(126, 224, 255, 0.05);
}
body.mode-adult .panel::before { opacity: calc(0.35 - var(--opt-intensity) * 0.30); }
body.mode-adult h1 .logo-mark { text-shadow: 0 0 calc(14px * (1 - var(--opt-intensity))) var(--accent); }
body.mode-adult .site-header h1 { filter: saturate(calc(1 - var(--opt-intensity) * 0.5)); }

/* No chaos pulse in adult — it'd break the tone */
body.mode-adult .chaos-pill.is-active { animation: none; }

/* ---------- Budget panel ---------- */
.budget-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(126, 224, 255, 0.08);
  border: 1px solid rgba(126, 224, 255, 0.18);
  margin: 4px 0 16px;
  overflow: hidden;
}
.budget-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.25s ease;
  box-shadow: 0 0 14px rgba(126, 224, 255, 0.4);
}
.budget-text {
  position: absolute;
  right: 6px;
  top: -22px;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
/* Inline ethics flags — appear under the budget bar at any allocation
   > 0, BEFORE the full Consent Implications panel unlocks at 50 credits.
   Two short text spans, no widget. Kept faint so they read as ambient
   labels rather than a second compliance frame. */
.budget-ethics-flags {
  margin: -8px 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.budget-ethics-flags .ethics-flag strong {
  color: rgba(255, 210, 138, 0.88);
  font-weight: 600;
}
.budget-ethics-flags .ethics-flag-sep {
  opacity: 0.5;
}
/* R5: compact env summary (3 short tokens) shown only when the
   #env-disclosure <details> is closed in Adult mode — surfaces the
   hidden dependency near the burden bar without re-opening the panel.
   Faint, monospace, label-style so it reads as ambient context, not
   another projection row. */
.env-summary-tokens {
  margin: -4px 0 12px;
  padding: 4px 0 4px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--ink-mute);
  text-transform: uppercase;
  border-left: 2px solid rgba(126, 224, 255, 0.18);
}
.env-summary-tokens .env-token {
  white-space: nowrap;
}
.env-summary-tokens .env-token-sep {
  opacity: 0.5;
}
/* R5: burden disclaimer 1-liner above the burden bar — names that the
   index measures propagation of an already-equal loss, not whether the
   allocation is "less wrong". Faint italic so it reads as a frame, not a
   competing projection value. */
.budget-projections .burden-disclaimer {
  grid-column: 1 / -1;
  margin: 6px 0 -2px;
  padding: 2px 0 2px 10px;
  font-size: 11px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-mute);
  border-left: 2px solid rgba(126, 224, 255, 0.20);
}
/* Budget projections (Cohort Placement + Inheritance Burden) — Adult only. */
.budget-projections {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 18px;
  padding: 10px 12px;
  background: rgba(7, 9, 30, 0.45);
  border: 1px solid rgba(126, 224, 255, 0.18);
  border-radius: 10px;
  font-size: 12px;
  letter-spacing: 0.25px;
}
.budget-projections .projection-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(60px, 2fr) auto;
  align-items: center;
  column-gap: 12px;
}
.budget-projections .projection-row:first-child {
  grid-template-columns: minmax(160px, 1fr) 1fr;
}
.budget-projections .projection-label {
  color: var(--ink-mute);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 1.4px;
}
.budget-projections .projection-value {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.budget-projections .pressure-note {
  color: var(--accent);
  text-align: right;
  font-size: 11.5px;
}
.budget-projections .projection-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(126, 224, 255, 0.08);
  border: 1px solid rgba(126, 224, 255, 0.18);
  overflow: hidden;
}
.budget-projections .projection-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  /* R21rev: explicit stops so the cyan→purple→pink sweep is visible
     even at small fill widths (without stops, browsers spread the
     midpoint at 50% of the rendered width, hiding purple under ~30%). */
  background: linear-gradient(90deg, rgba(126,224,255,0.55) 0%, rgba(200,155,255,0.55) 50%, rgba(255,155,210,0.7) 100%);
  transition: width 0.35s ease;
}

/* R17 scaffold (Frontend pre-add for UX Flow): pre-allocation gate.
   When budget=0 in Adult mode, the trait projection panel should not
   surface default-state stats — UX Flow may swap the projection rows
   for a soft prompt placeholder asking the user to allocate first.
   Typography family matches .burden-disclaimer / .consent-awareness-note:
   italic, restrained, low-contrast — reads as a held-back affordance,
   not a competing UI element. Centered to distinguish from the left-
   aligned projection-row rhythm above. Class is anticipatory; if UX
   Flow chooses a different selector, this rule is dead-stripped at
   verification time (R18). */
/* R17rev: tighten padding/margin to match .burden-disclaimer family
   (defer outer spacing to flex-gap on .budget-projections); bump font to
   13.5px for clearer CTA hierarchy; switch to --ink @ 0.7 so low-vision
   mobile users get sufficient contrast vs. the prior --ink-soft token.
   R18rev: placeholder is the default first-render state, not a CTA — so
   re-harmonize with the .burden-disclaimer scale (11px) and add a 2px
   left border in the panel's cool/cyan accent to frame it as an
   affordance slot rather than a data row. Padding-left holds at 10px to
   align with the disclaimer's text inset. */
.budget-projections .projection-gated-placeholder,
.projection-gated-placeholder {
  /* R22rev LOOP_REQUEST(systems): with .ocean-sep dropped from the
     placeholder element, the top margin + border-top here provide the
     visual separator the section header used to supply. */
  margin: 8px 0 0;
  padding: 6px 10px 4px 10px;
  font-size: 11px;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-mute);
  letter-spacing: 0.3px;
  border-left: 2px solid rgba(126, 224, 255, 0.20);
  border-top: 1px solid rgba(126, 224, 255, 0.12);
}
/* R18 verification: placeholder is a single <dt> rendered inside
   .baby-stats (a 2-column `auto 1fr` grid). Without column-span, the
   <dt> shrinks to the auto column and text-align: center centers within
   that narrow track instead of the full panel. Span both columns so the
   message reads as a centered standalone notice across the projection
   panel — matches the .burden-disclaimer pattern in .budget-projections. */
.baby-stats .projection-gated-placeholder {
  grid-column: 1 / -1;
}
/* R21rev mobile polish: narrower viewport wraps the italic placeholder
   onto 2–3 lines; bump line-height + padding so the wrapped lines breathe. */
@media (max-width: 540px) {
  .budget-projections .projection-gated-placeholder,
  .projection-gated-placeholder {
    line-height: 1.6;
    padding: 6px 10px;
  }
}

.budget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px 22px;
}

/* Regulatory Context (Adult only). Sits at the bottom of the budget
   panel; surfaces clinical disclosure-language notes when allocations
   cross thresholds. */
.regulatory-notes { margin-top: 18px; }
.regulatory-notes[hidden] { display: none; }
.regulatory-notes .reg-heading {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.regulatory-notes .reg-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(126, 224, 255, 0.15);
  border: 1px solid rgba(126, 224, 255, 0.35);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 1px;
}
.regulatory-notes .reg-empty {
  margin: 0;
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}
.regulatory-notes .reg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.regulatory-notes .reg-note {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
  padding: 9px 12px;
  background: rgba(7, 9, 30, 0.5);
  border: 1px solid rgba(126, 224, 255, 0.18);
  border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.regulatory-notes .reg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  background: rgba(126, 224, 255, 0.6);
  box-shadow: 0 0 8px rgba(126, 224, 255, 0.5);
}
.regulatory-notes .reg-amber {
  border-color: rgba(255, 210, 138, 0.4);
}
.regulatory-notes .reg-amber .reg-dot {
  background: rgba(255, 210, 138, 0.85);
  box-shadow: 0 0 10px rgba(255, 210, 138, 0.55);
}
.regulatory-notes .reg-red {
  border-color: rgba(255, 130, 150, 0.45);
  background: rgba(40, 8, 20, 0.55);
}
.regulatory-notes .reg-red .reg-dot {
  background: rgba(255, 130, 150, 0.9);
  box-shadow: 0 0 12px rgba(255, 130, 150, 0.6);
}
.regulatory-notes .reg-text {
  color: var(--ink);
}

/* Consent-affected badge in the Enhancement Allocation header. Reuses
   the .beta-tag chassis with a warmer amber-leaning border. */
.consent-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase;
  border-radius: 4px; border: 1px solid rgba(255, 210, 138, 0.45);
  color: rgba(255, 220, 170, 0.95); background: rgba(255, 210, 138, 0.08);
  vertical-align: middle; font-weight: 600;
}
.consent-badge[hidden] { display: none; }

/* Visibly-locked state for #budget-panel before first generation.
 * Visible but interaction-disabled; sliders are also disabled in JS. */
.budget-panel.panel-locked { opacity: 0.62; }
.budget-panel.panel-locked .budget-grid,
.budget-panel.panel-locked .budget-projections { filter: grayscale(35%); }
.budget-panel .budget-lock-notice {
  margin: 6px 0 10px; padding: 8px 12px;
  font-size: 12px; color: var(--ink-mute);
  background: rgba(7, 9, 30, 0.55);
  border: 1px dashed rgba(140, 180, 220, 0.28); border-radius: 6px;
}
.budget-panel input[type="range"][disabled] { cursor: not-allowed; opacity: 0.55; }

/* Gen-1 consent-awareness one-liner. Round 7: hoisted out of the
   collapsed trait-conflicts block into #consent-awareness-leadin above
   the Enhancement Allocation header so the ethical framing precedes the
   behavioral projection. Cross-fades out on micro-ack so the same
   screen-space hands off to the intensity-progress hint (two-beat
   consent rhythm). */

/* Container for the leadin — Round 7 rev: without a panel chrome the
   italic one-liner gets visually dominated by the backdrop-blurred
   budget-panel that follows. Borrow the .consent-ack-prompt palette
   (dark inset, warm amber border) so the ethical framing reads as a
   peer of the micro-ack that succeeds it. */
#consent-awareness-leadin {
  /* Round 9 rev: margin:0 so the wrapper's retirement during note fade
     doesn't leave a residual gap above the budget-panel. The inner
     .consent-awareness-note keeps owning its own surrounding space via
     the chrome rule below (margin:0, padding:0 reset inside wrapper). */
  margin: 0;
  padding: 10px 12px;
  background: rgba(7, 9, 30, 0.6);
  border: 1px solid rgba(255, 210, 138, 0.28);
  border-left: 3px solid rgba(255, 210, 138, 0.55);
  border-radius: 8px;
}
#consent-awareness-leadin .consent-awareness-note {
  margin: 0;
  border-left: none;
  padding: 0;
}

.consent-awareness-note {
  margin: 0 0 10px; padding: 6px 10px;
  font-size: 12px; font-style: italic; color: rgba(255, 220, 170, 0.92);
  border-left: 2px solid rgba(255, 210, 138, 0.4);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.consent-awareness-note.is-leaving { opacity: 0; transform: translateY(-4px); pointer-events: none; }

/* One-time heritable-decision micro-acknowledgment prompt. Fades on click. */
.consent-ack-prompt {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  margin: 12px 0; padding: 12px 14px;
  background: rgba(7, 9, 30, 0.6);
  border: 1px solid rgba(255, 210, 138, 0.35); border-radius: 8px;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.consent-ack-prompt.is-leaving { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.consent-ack-prompt .consent-ack-copy { margin: 0; font-size: 13px; color: rgba(255, 220, 170, 0.95); }
/* R12 rev (Visual Director POLISH): align desktop padding with the mobile
   override (10px 16px) so the button doesn't visually shrink-then-jump
   across the 640px breakpoint. Font-size still 12px keeps the compact ack
   feel; padding parity is the visual continuity win. */
.consent-ack-prompt .consent-ack-btn { padding: 10px 16px; font-size: 12px; }

/* Faint progress hint toward the next consent-intensity threshold (50
   credits) — appears after the micro-ack to bridge the two beats into one
   journey. Auto-removes once the threshold is reached. */
.consent-progress-hint {
  margin: 10px 0 14px; padding: 6px 0 0;
  animation: parent-advanced-reveal 0.45s ease 0.04s both;
}
.consent-progress-copy {
  margin: 0 0 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.4px; color: var(--ink-mute); text-transform: uppercase;
}
.consent-progress-track {
  height: 3px; border-radius: 2px; background: rgba(255, 210, 138, 0.20); overflow: hidden;
}
.consent-progress-fill {
  height: 100%; width: 0; background: rgba(255, 210, 138, 0.70);
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .consent-awareness-note, .consent-ack-prompt, .consent-progress-hint, .consent-progress-fill,
  .priority-row {
    transition: none !important; animation: none !important;
  }
}

/* Cohesive reveal motion for the Consent Implications panel — matches the
   parent-advanced (OCEAN) disclosure (translateY 6px → 0, 0.45s) so the
   two systems read as one. Applied via .is-revealing on first unhide. */
.consent-panel.is-revealing { animation: parent-advanced-reveal 0.45s ease both; }
@media (prefers-reduced-motion: reduce) {
  .consent-panel.is-revealing { animation: none !important; }
}

/* One-line compliance footnote under the budget intro. */
.budget-panel .compliance-footnote {
  margin: -2px 0 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.4px; color: var(--ink-mute);
  border-left: 2px solid rgba(255, 210, 138, 0.25); padding: 2px 0 2px 10px;
}

/* Consent Implications panel — adjacent to Enhancement Allocation.
   Warm-tinted left border echoes the heritable-allocation badge; negative
   margin tightens the gap with the budget panel above so the two read as a
   grouped pair rather than two equally-weighted sections. */
#budget-panel + .consent-panel { margin-top: -6px; }
.consent-panel { border-left: 3px solid rgba(255, 210, 138, 0.4); }
.consent-panel > .subtle { font-size: 13px; }
.consent-panel .consent-explainer { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.consent-panel .consent-row {
  display: grid; grid-template-columns: minmax(110px, 18%) 1fr; gap: 14px; align-items: start;
  padding: 10px 12px; background: rgba(14, 18, 40, 0.6);
  border: 1px solid rgba(140, 180, 220, 0.18); border-radius: 8px;
}
.consent-panel .consent-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent-warm); padding: 1px 0 6px;
  border-bottom: 1px solid rgba(255, 210, 138, 0.18);
}
.consent-panel .consent-body,
.consent-panel .consent-line { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
@media (max-width: 768px) {
  .consent-panel .consent-row { grid-template-columns: 1fr; gap: 6px; }
  .consent-panel .consent-label { display: inline; font-weight: 700; border-bottom: 0; padding: 0; }
}

.priority-row {
  background: rgba(10, 12, 38, 0.45);
  border: 1px solid rgba(126, 224, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.12s, background 0.12s;
}
.priority-row.over-budget {
  border-color: rgba(255, 150, 170, 0.6);
  background: rgba(255, 60, 100, 0.08);
}
.priority-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.priority-head label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.2px;
}
.priority-tier {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border-radius: 4px;
  color: var(--ink-mute);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.priority-row[data-tier="premium"] .priority-tier      { color: var(--accent-2); border-color: rgba(200,155,255,0.35); }
.priority-row[data-tier="experimental"] .priority-tier { color: var(--accent-3); border-color: rgba(255,155,210,0.35); }
.priority-row[data-tier="entry"] .priority-tier        { color: var(--accent);   border-color: rgba(126,224,255,0.35); }
.priority-cost {
  font-size: 11px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
}
.priority-tradeoff {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.45;
  font-style: italic;
}

/* ---------- Confidence pill in stats ---------- */
.confidence {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid;
  vertical-align: middle;
  font-weight: 600;
}
.confidence.high     { color: var(--accent);   border-color: rgba(126, 224, 255, 0.45); background: rgba(126, 224, 255, 0.06); }
.confidence.moderate { color: var(--accent-2); border-color: rgba(200, 155, 255, 0.45); background: rgba(200, 155, 255, 0.06); }
.confidence.low      { color: var(--ink-mute); border-color: rgba(255, 255, 255, 0.15);  background: rgba(255, 255, 255, 0.03); }

/* ---------- Social Response block ---------- */
.social-response {
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(10, 14, 40, 0.42);
  border: 1px solid rgba(126, 224, 255, 0.18);
  border-radius: 10px;
  text-align: left;
}
.social-response h3 {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}
.social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.social-list li {
  padding: 4px 0 4px 14px;
  position: relative;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.social-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--accent);
  font-weight: 700;
}

/* ---------- Adult-mode polish ---------- */
body.mode-adult .vibe-title       { display: none !important; }
body.mode-adult .surprise-bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 calc(16px * (1 - var(--opt-intensity))) rgba(126, 224, 255, 0.5);
}
body.mode-adult .codename {
  letter-spacing: 1.8px;
  font-size: 11.5px;
  color: var(--ink-soft);
  text-shadow: none;
}
body.mode-adult .archetype-tag {
  background: rgba(126, 224, 255, 0.10);
  border-color: rgba(126, 224, 255, 0.25);
  color: var(--ink);
  box-shadow: none;
  letter-spacing: 0.6px;
  text-transform: none;
}
body.mode-adult .chaos-badge {
  background: rgba(255, 155, 210, calc(0.25 + var(--opt-intensity) * 0.10));
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0.4px;
}
body.mode-adult .future-headline {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--ink);
  font-weight: 600;
}
body.mode-adult .alt-vibe {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--ink-soft);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gene-bubbles span,
  .dna-decor,
  .avatar-glow,
  .chaos-pill.is-active,
  .reminder-banner,
  .history-content,
  .history-chevron { animation: none !important; transition: none !important; }

  /* R22rev Visual Director: with the pulse stopped, the radial glow sits
     at its full intensity which reads as "hot" rather than ambient. Soften
     to ~mid-pulse opacity so the static state matches what the animated
     state averages to. */
  .avatar-glow { opacity: 0.5; }

  /* Atmospheric loops on key reveal screens — constellation pulses,
     hobby-node bob, future-tree drift/pulse, and the band-breathe on
     reflection-mode confidence bands. These were perpetual `infinite`
     animations missing a guard. Stops motion without affecting layout. */
  .trait-constellation .nodes .node circle,
  .trait-constellation .links line,
  .hobby-constellation .hobby-node circle,
  .future-tree-svg .branch,
  .future-tree-svg .leaf circle,
  /* R13 rev (Visual Director MAJOR): explicit body-scoped variants of the
     reflection-mode tree drift/pulse — defensive belt-and-suspenders so
     the guard wins regardless of cascade order or specificity tweaks. */
  body.mode-reflection .future-tree-svg .branch,
  body.mode-reflection .future-tree-svg .leaf circle,
  .slider-row .confidence-band-svg .band-fill { animation: none !important; }
}

/* ====================================================================
 * Editing pass — give each mode a stricter component set on first view.
 *
 * Strategy: hide secondary blocks per mode by default. The "Show more"
 * toggle adds body.show-details which overrides the hides.
 * ==================================================================== */

/* Reflection: constellation is the personality view; hide text stats +
   playful future block + clinical conflicts/traces. */
body.mode-reflection:not(.show-details) .baby-stats,
body.mode-reflection:not(.show-details) .future-block,
body.mode-reflection:not(.show-details) .trait-conflicts,
body.mode-reflection:not(.show-details) .behavioral-traces,
body.app-reflection:not(.show-details) .baby-stats,
body.app-reflection:not(.show-details) .future-block,
body.app-reflection:not(.show-details) .trait-conflicts,
body.app-reflection:not(.show-details) .behavioral-traces { display: none; }

/* Kids: hide clinical/reflective sections by default. */
body.app-kids:not(.show-details) .trait-constellation,
body.app-kids:not(.show-details) .trait-conflicts,
body.app-kids:not(.show-details) .behavioral-traces,
body.app-kids:not(.show-details) .reflection-prompt,
body.app-kids:not(.show-details) .pause-panel { display: none; }

/* Adult: clinical stays primary, whimsical visuals hidden. */
body.mode-adult:not(.show-details) .trait-constellation,
body.mode-adult:not(.show-details) .pause-panel,
body.mode-adult:not(.show-details) .reflection-prompt,
body.app-adult:not(.show-details) .trait-constellation,
body.app-adult:not(.show-details) .pause-panel,
body.app-adult:not(.show-details) .reflection-prompt { display: none; }

/* The toggle itself — small, unobtrusive. */
.details-toggle {
  appearance: none;
  background: transparent;
  border: 1px dashed rgba(126, 224, 255, 0.3);
  border-radius: 8px;
  color: var(--ink-mute);
  padding: 6px 14px;
  cursor: pointer;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 14px auto 4px;
  display: block;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.details-toggle:hover {
  color: var(--ink);
  border-color: rgba(126, 224, 255, 0.6);
  background: rgba(126, 224, 255, 0.04);
}
body.show-details .details-toggle {
  border-style: solid;
  color: var(--ink-soft);
}

/* When details are shown, give previously-hidden sections a faint
   separator so the reader can tell they were secondary. */
body.show-details .behavioral-traces,
body.show-details .trait-conflicts,
body.show-details .baby-stats,
body.show-details .trait-constellation,
body.show-details .future-block {
  border-top: 1px dashed rgba(126, 224, 255, 0.12);
  padding-top: 10px;
  margin-top: 10px;
}

/* ====================================================================
 * Landing overlay — first-view intro that fades on Enter
 * ==================================================================== */
.landing {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  overflow-y: auto;
  background:
    radial-gradient(900px 600px at 70% -10%, rgba(126, 224, 255, 0.20), transparent 60%),
    radial-gradient(800px 700px at -10% 30%, rgba(200, 155, 255, 0.18), transparent 60%),
    radial-gradient(700px 500px at 90% 90%, rgba(255, 155, 210, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 60%, var(--bg-2));
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 1;
}
body.has-entered .landing {
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
}

.landing-inner {
  max-width: 540px;
  text-align: center;
  position: relative;
  animation: landingFadeIn 0.7s ease;
}
@keyframes landingFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.landing-mark {
  display: inline-block;
  font-size: 54px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 28px rgba(126, 224, 255, 0.55);
  margin-bottom: 6px;
  animation: landingMarkPulse 5s ease-in-out infinite;
}
@keyframes landingMarkPulse {
  0%, 100% { transform: scale(1);    text-shadow: 0 0 28px rgba(126, 224, 255, 0.55); }
  50%      { transform: scale(1.05); text-shadow: 0 0 38px rgba(126, 224, 255, 0.85); }
}

.landing-title {
  margin: 6px 0 0;
  font-size: clamp(36px, 7vw, 56px);
  letter-spacing: 0.6px;
  /* Visible fallback in case background-clip:text or color-mix aren't
     supported. -webkit-text-fill-color only takes effect when the gradient
     clip works; otherwise the ink-colored fallback shows through. */
  color: var(--ink);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(126, 224, 255, 0.15);
}

.landing-tagline {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: clamp(13px, 1.6vw, 15px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.landing-desc {
  margin: 22px auto 0;
  color: var(--ink);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.55;
  max-width: 420px;
}

.landing-features {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}
.landing-features li {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(10, 14, 40, 0.55);
  border: 1px solid rgba(126, 224, 255, 0.22);
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.landing-begin {
  appearance: none;
  margin: 32px auto 0;
  display: inline-block;
  padding: 14px 36px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(126,224,255,0.95), rgba(200,155,255,0.95));
  color: #0a0a25;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.6px;
  cursor: pointer;
  box-shadow:
    0 0 24px rgba(126, 224, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
}
.landing-begin:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 0 36px rgba(126, 224, 255, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.landing-begin:active { transform: translateY(0); }

.landing-disclaimer {
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.3px;
}

@media (prefers-reduced-motion: reduce) {
  .landing-inner,
  .landing-mark { animation: none !important; }
  .landing { transition: opacity 0.2s ease !important; }
}

/* ====================================================================
 * Societal Outcomes Brief — Adult-mode hero panel
 *
 * Visual hierarchy upgrade. The brief is the headline insight in Adult
 * mode, so it gets bigger heading, generous padding, and a stronger
 * accent stripe. Categories sit in a responsive grid with breathing
 * room between them.
 * ==================================================================== */
.societal-brief-panel {
  position: relative;
  padding: 30px 28px 28px;
  margin-top: 4px;
}
.societal-brief-panel::after {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(126, 224, 255, 0.0),
    rgba(126, 224, 255, 0.65) 30%,
    rgba(200, 155, 255, 0.65) 70%,
    rgba(255, 155, 210, 0.0));
  border-radius: 999px;
}
.societal-brief-head { margin-bottom: 18px; }
.societal-brief-panel h2 {
  font-size: 22px;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.societal-brief-panel .subtle {
  margin-bottom: 0;
  max-width: 640px;
}
.societal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px 22px;
  margin-top: 16px;
}
.societal-category {
  padding: 16px 16px 14px;
  background: rgba(7, 9, 30, 0.42);
  border: 1px solid rgba(126, 224, 255, 0.14);
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.societal-category:hover {
  border-color: rgba(126, 224, 255, 0.32);
  background: rgba(7, 9, 30, 0.55);
}
.societal-category h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}
.societal-category[data-cat="identity"] h3 { color: var(--accent-3); }
.societal-category[data-cat="stress"]   h3 { color: var(--accent-warm); }
.societal-category[data-cat="career"]   h3 { color: var(--accent-2); }
.societal-category ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.societal-category li {
  padding: 0 0 0 14px;
  position: relative;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.societal-category li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}

/* In Adult mode, give the brief stronger visual weight than surrounding
   panels — but only when it has content (not hidden). */
body.mode-adult .societal-brief-panel:not([hidden]) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 38px rgba(126, 224, 255, 0.07);
}

/* Estimated cost + access tier: nudge them visually so they read as a
   pair separate from the more abstract Cohort/Pressure rows above. */
.projection-row:has(#cost-est),
.projection-row:has(#access-tier) {
  border-left: 2px solid rgba(255, 210, 138, 0.25);
  padding-left: 10px;
}

/* ---------- Adult-mode panel-triplet hierarchy ----------
   Three surfaces — Enhancement Allocation (action) → Consent Implications
   (cost) → Inheritance Burden Index (projection) — read as one story.
   The consent panel anchors the chain with a warm left border (Round 2);
   here we tighten the chain by:
   (a) repeating that warm accent on the burden-row at lower opacity, so the
       projection surface visibly echoes the cost surface;
   (b) lifting the burden-row off the cost/access pair with a hair more top
       margin + a faint divider, so it reads as the chain's terminus;
   (c) collapsing the gap from consent-panel into whatever follows so the
       triplet groups visually.
   No literal arrows/lines — just shared accent + spacing. */
.budget-projections .projection-row.burden-row {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255, 210, 138, 0.10);
  border-left: 2px solid rgba(255, 210, 138, 0.18);
  padding-left: 10px;
}
.consent-panel + .primary-action { margin-top: 12px; }

/* R3 revision (R4 polish): institutional voice footnotes inside
   #budget-projections. Unified as restrained footnotes — italic,
   smaller, lower-contrast than the projection numbers above so they
   read as annotations, not as new projection rows. Both share the
   warm-accent left border that ties the Enhancement → Consent →
   Burden chain together. consent-gap-note hangs immediately under
   the burden-row (its referent); access-compound-foot is inserted
   under the Access Tier row by script.js (its referent). */
.budget-projections .access-compound-foot,
.budget-projections .consent-gap-note {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  padding: 2px 0 2px 10px;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.1px;
  color: var(--ink-mute);
  font-style: italic;
  border-left: 2px solid rgba(255, 210, 138, 0.16);
}
/* Tighten parent flex-gap visual: footnotes use negative top margin
   to absorb the .budget-projections gap (6px), so each annotation
   hangs from its referent row rather than reading as a stacked sibling. */
.budget-projections .consent-gap-note { margin-top: 0; }
/* Mobile: keep the footnote from crowding the burden bar — the
   burden-row collapses awkwardly at small widths. Slightly smaller
   font + a hair of extra breathing room above the burden footnote. */
@media (max-width: 720px) {
  .budget-projections { gap: 4px; padding: 9px 10px; }
  .budget-projections .access-compound-foot,
  .budget-projections .consent-gap-note {
    font-size: 10px; line-height: 1.45;
  }
  .budget-projections .projection-row.burden-row + .consent-gap-note {
    margin-top: 4px;
  }
}

/* ====================================================================
 * Divergence banner — Adult-mode warning that the projection is void
 * ==================================================================== */
.divergence-banner {
  margin: 16px 0 -4px;
  padding: 14px 18px 12px;
  background: rgba(40, 18, 6, 0.55);
  border: 1px solid rgba(255, 184, 110, 0.45);
  border-left: 3px solid rgba(255, 184, 110, 0.85);
  border-radius: 10px;
  color: var(--ink);
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 24px rgba(255, 184, 110, 0.10);
  animation: divergenceIn 0.45s ease;
}
@keyframes divergenceIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.divergence-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.divergence-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgb(255, 200, 130);
}
.divergence-actions { display: flex; gap: 4px; }
.divergence-reroll,
.divergence-dismiss {
  appearance: none;
  /* Round 9 rev (mobile): visible 24x24 disc preserved, but the touch
     target is expanded to 44x44 via box-sizing:content-box + 10px
     transparent padding ring on every side. Same hit-area technique as
     the R8 thumb. background-clip:content-box keeps the visible fill
     inside the 24px disc; the 1px amber outline is the visual border
     drawn via box-shadow so the transparent padding doesn't show a ring. */
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  padding: 10px;
  margin: -10px; /* layout occupies ~24px while hit-area is 44x44 */
  border-radius: 50%;
  border: none;
  background: transparent;
  background-clip: content-box;
  box-shadow: inset 0 0 0 1px rgba(255, 184, 110, 0.35);
  color: rgba(255, 220, 180, 0.85);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.divergence-reroll:hover,
.divergence-dismiss:hover {
  background: rgba(255, 184, 110, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255, 184, 110, 0.7);
  color: var(--ink);
}
.divergence-body {
  margin: 4px 0 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.divergence-note {
  margin: 0;
  font-size: 11.5px;
  color: rgba(255, 220, 180, 0.75);
  letter-spacing: 0.2px;
  font-style: italic;
}

/* ====================================================================
 * Trait Popularity Through History timeline
 * ==================================================================== */
.trait-history-panel {
  padding: 26px 24px 24px;
}
.trait-history-head { margin-bottom: 14px; }
.trait-history-panel h2 {
  font-size: 19px;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.trait-history-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  position: relative;
}
.trait-history-timeline::before {
  content: "";
  position: absolute;
  top: 18px; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(126, 224, 255, 0.0),
    rgba(126, 224, 255, 0.4) 20%,
    rgba(200, 155, 255, 0.4) 80%,
    rgba(200, 155, 255, 0.0));
  pointer-events: none;
}
.history-era {
  position: relative;
  padding: 30px 12px 14px;
  background: rgba(7, 9, 30, 0.4);
  border: 1px solid rgba(126, 224, 255, 0.14);
  border-radius: 10px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.history-era::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(126, 224, 255, 0.65);
  box-shadow: 0 0 8px rgba(126, 224, 255, 0.7);
}
.history-era:hover {
  border-color: rgba(126, 224, 255, 0.42);
  background: rgba(7, 9, 30, 0.6);
  transform: translateY(-1px);
}
.history-era.is-present {
  border-color: rgba(126, 224, 255, 0.55);
  background: rgba(10, 20, 50, 0.6);
}
.history-era.is-present::before {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.history-era.is-speculative {
  border-style: dashed;
  border-color: rgba(200, 155, 255, 0.3);
  background: rgba(20, 14, 40, 0.4);
}
.history-era.is-speculative::before {
  background: var(--accent-2);
  box-shadow: 0 0 8px var(--accent-2);
  border: 1px dashed rgba(200, 155, 255, 0.7);
}
.era-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
}
.era-year {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
}
.era-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 2px;
}
.history-era.is-present .era-label    { color: var(--accent); }
.history-era.is-speculative .era-label { color: var(--accent-2); font-style: italic; }
.era-traits {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.era-traits li {
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.35;
}
.era-note {
  margin: 6px 0 0;
  font-size: 10.5px;
  font-style: italic;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* Smaller screens: timeline wraps to fewer columns. */
@media (max-width: 880px) {
  .trait-history-timeline { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .trait-history-timeline::before { display: none; }
}

/* ====================================================================
 * Sibling Cohort — Adult-mode variance row
 * Five mini avatars side-by-side. The variance is the projection's
 * confidence interval, rendered as people.
 * ==================================================================== */
.sibling-cohort-panel {
  padding: 26px 22px 22px;
}
.sibling-head { margin-bottom: 14px; }
.sibling-cohort-panel h2 {
  font-size: 19px;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.sibling-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.sibling-card {
  padding: 12px 8px 10px;
  background: rgba(7, 9, 30, 0.42);
  border: 1px solid rgba(126, 224, 255, 0.14);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.sibling-card:hover {
  border-color: rgba(126, 224, 255, 0.42);
  background: rgba(7, 9, 30, 0.55);
  transform: translateY(-1px);
}
.sibling-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sibling-avatar svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
}
.sibling-id {
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.sibling-archetype {
  font-size: 11.5px;
  color: var(--ink);
  letter-spacing: 0.2px;
  line-height: 1.3;
}
.sibling-divergence {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  color: var(--accent-warm);
  margin-top: 2px;
}
.sibling-divergence.is-baseline {
  color: var(--ink-mute);
  font-style: italic;
  letter-spacing: 0.2px;
}

@media (max-width: 880px) {
  .sibling-strip { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* ====================================================================
 * Regional Access — small note under the cost/tier rows
 * ==================================================================== */
.regional-access {
  margin-top: 12px;
  padding: 10px 14px 12px;
  background: rgba(20, 22, 55, 0.32);
  border: 1px solid rgba(255, 210, 138, 0.22);
  border-radius: 10px;
}
.regional-access h4 {
  margin: 0 0 6px;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-warm);
}
.regional-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.regional-list li {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  padding-left: 12px;
  position: relative;
}
.regional-list li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--accent-warm);
  font-weight: 700;
}
/* Mobile: tiny compliance text gets a touch larger + looser leading
   so it stays readable on phones without breaking the dry register. */
@media (max-width: 720px) {
  .regional-list li { font-size: 12.5px; line-height: 1.6; }
}

/* ====================================================================
 * Reflection arc: Inner Cohort + Lifetime Drift
 *
 * Reflection mode's equivalent of Adult's Sibling Cohort and Historical
 * Drift. Same thesis, different angle: identity is unmappable.
 * ==================================================================== */

/* ---------- Inner Cohort — same person, different rooms ---------- */
.inner-cohort-panel { padding: 28px 24px 24px; }
.inner-cohort-head { margin-bottom: 16px; }
.inner-cohort-panel h2 {
  font-size: 21px;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  font-weight: 600;
}
body.mode-reflection .inner-cohort-panel h2 {
  background: linear-gradient(90deg, var(--accent-2), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ink);
  -webkit-text-fill-color: transparent;
}
.inner-cohort-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.inner-context {
  padding: 18px 18px 16px;
  background: rgba(7, 9, 30, 0.42);
  border: 1px solid rgba(200, 155, 255, 0.18);
  border-radius: 14px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.inner-context:hover {
  border-color: rgba(200, 155, 255, 0.45);
  background: rgba(7, 9, 30, 0.55);
  transform: translateY(-1px);
}
.inner-context-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(200, 155, 255, 0.15);
}
.inner-context-icon {
  font-size: 18px;
  color: var(--accent-2);
  line-height: 1;
}
.inner-context-label {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
}
.inner-context-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inner-context-lines li {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  font-style: italic;
  padding-left: 0;
  position: relative;
}

@media (max-width: 720px) {
  .inner-cohort-grid { grid-template-columns: 1fr; }
}

/* ---------- Lifetime Drift — one life, different decades ---------- */
.lifetime-drift-panel { padding: 28px 24px 26px; }
.lifetime-drift-head { margin-bottom: 16px; }
.lifetime-drift-panel h2 {
  font-size: 21px;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  font-weight: 600;
}
body.mode-reflection .lifetime-drift-panel h2 {
  background: linear-gradient(90deg, var(--accent-warm), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ink);
  -webkit-text-fill-color: transparent;
}
.lifetime-drift-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  position: relative;
}
.lifetime-drift-row::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 210, 138, 0.0),
    rgba(255, 210, 138, 0.4) 20%,
    rgba(255, 155, 210, 0.4) 80%,
    rgba(255, 155, 210, 0.0));
  pointer-events: none;
}
.drift-stage {
  position: relative;
  padding: 30px 14px 16px;
  background: rgba(7, 9, 30, 0.40);
  border: 1px solid rgba(255, 210, 138, 0.18);
  border-radius: 12px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.drift-stage::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 210, 138, 0.7);
  box-shadow: 0 0 8px rgba(255, 210, 138, 0.7);
}
.drift-stage:hover {
  border-color: rgba(255, 210, 138, 0.5);
  background: rgba(7, 9, 30, 0.55);
  transform: translateY(-1px);
}
.drift-age {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-warm);
  letter-spacing: 0.6px;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.drift-line {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.55;
  font-style: italic;
}

@media (max-width: 880px) {
  .lifetime-drift-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .lifetime-drift-row::before { display: none; }
}

/* ====================================================================
 * INTRO LANDING — five-section scroll experience
 *
 * Replaces the single-screen landing. Reads as a calm corporate intro
 * to a near-future biotech product. Real citations only. Scroll-based
 * reveal, accessible, restrained.
 *
 * The container keeps the `.landing` class so the existing has-entered
 * dismiss mechanism still works. Adds `.intro` to override the old
 * flex-centered single-screen layout.
 * ==================================================================== */
.landing.intro {
  display: block;
  align-items: stretch;
  padding: 0;
  /* Explicit height + overflow so iOS Safari reliably treats this as
     a scroll container. position: fixed + inset: 0 alone isn't always
     enough; some browsers leave touch-scroll falling through to the
     body, which reads as "scrolling doesn't work." */
  height: 100vh;
  max-height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
/* Don't run the old landing-inner fade-in animation on the new intro. */
.landing.intro .landing-inner { animation: none; }

.intro-skip {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 5;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(10, 14, 40, 0.55);
  /* R14 rev (MOBILE POLISH a11y): bumped border opacity 0.18 → 0.6 so the
     skip link reads as an interactive control against the busy hero. */
  border: 1px solid rgba(126, 224, 255, 0.6);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.intro-skip:hover {
  color: var(--ink);
  border-color: rgba(126, 224, 255, 0.5);
  background: rgba(10, 14, 40, 0.75);
}

.intro-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 24px 80px;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  /* Auto-playing one-time fade-in instead of an observer-driven class
     toggle. Reliable across iOS Safari quirks; sections later in the
     stack finish animating off-screen and are simply visible by the
     time you scroll to them. */
  opacity: 0;
  transform: translateY(14px);
  animation: introSectionIn 0.7s ease 0.15s forwards;
}
@keyframes introSectionIn {
  to { opacity: 1; transform: translateY(0); }
}
.intro-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-eyebrow {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.intro-head { margin-bottom: 32px; text-align: left; width: 100%; max-width: 720px; }
.intro-head h2 {
  font-size: clamp(28px, 4.4vw, 42px);
  letter-spacing: -0.2px;
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
}
.intro-lede {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 600px;
}

/* ---------- Section 1: Hero ---------- */
.intro-hero { text-align: center; }
.intro-hero .landing-mark {
  display: inline-block;
  font-size: 54px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 28px rgba(126, 224, 255, 0.55);
  margin-bottom: 14px;
  animation: landingMarkPulse 5s ease-in-out infinite;
}
.intro-title {
  margin: 12px 0 18px;
  font-size: clamp(38px, 6.4vw, 64px);
  letter-spacing: -0.3px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  max-width: 880px;
}
.intro-title em {
  font-style: italic;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ink);
  -webkit-text-fill-color: transparent;
}
.intro-sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
}
.intro-scroll-prompt {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: scrollPromptBob 2.6s ease-in-out infinite;
}
.intro-scroll-arrow { font-size: 13px; color: var(--accent); }
@keyframes scrollPromptBob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.75; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}

/* ---------- Section 2: Historical timeline ---------- */
.intro-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.intro-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 70px;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(126, 224, 255, 0.0),
    rgba(126, 224, 255, 0.45) 12%,
    rgba(200, 155, 255, 0.45) 88%,
    rgba(200, 155, 255, 0.0));
  transform-origin: top center;
  /* Line renders fully drawn from frame one. Animated draw was leaving
     the line at scaleY(0) in some browser states. */
}
@keyframes introTimelineDraw {
  to { transform: scaleY(1); }
}

.intro-event {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  position: relative;
  /* R12 rev (Visual Director MAJOR): removed `opacity: 0` + `translateY(8px)`
     starting state. Commit 211029a applied the same fix to `.intro-section`
     but missed child events. `animation-forwards` carries the reveal; the
     hidden start risks invisibility if animation stalls (iOS Safari
     interrupted-paint). Visible default = safe degradation. */
  animation: introEventIn 0.55s ease forwards;
}
@keyframes introEventIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Tightened stagger: 0.1s steps so the timeline lands faster and the
   eye reaches the contested 2018/2019 beats sooner. Total span 0.95s
   (0.35s → 0.95s) instead of the previous 1.2s. */
.intro-event:nth-child(1) { animation-delay: 0.35s; }
.intro-event:nth-child(2) { animation-delay: 0.45s; }
.intro-event:nth-child(3) { animation-delay: 0.55s; }
.intro-event:nth-child(4) { animation-delay: 0.65s; }
.intro-event:nth-child(5) { animation-delay: 0.75s; }
.intro-event:nth-child(6) { animation-delay: 0.85s; }
.intro-event:nth-child(7) { animation-delay: 0.95s; }

.intro-event::before {
  content: "";
  position: absolute;
  left: 65px;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(126, 224, 255, 0.6);
}
/* 2018 — the contested edit. Warmer, slowly pulsing dot to weight the
   moment visually without altering any prose. Restrained: amplitude is
   small, period is long, so it reads as institutional unease rather
   than alarm. */
.intro-event:nth-child(4)::before {
  background: var(--accent-warm);
  box-shadow: 0 0 14px rgba(255, 210, 160, 0.65);
  animation: contestedDotPulse 4.8s ease-in-out infinite;
  animation-delay: 1.6s;
}
@keyframes contestedDotPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 210, 160, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 22px rgba(255, 210, 160, 0.95); transform: scale(1.18); }
}
/* 2019 — He Jiankui sentencing. The institutional response to the
   contested edit. Deeper, redder cast and a slower (~6.4s) pulse —
   distinct from 2018's warmer unease: this dot reads as judgement,
   not anxiety. */
.intro-event:nth-child(5)::before {
  background: #d97a6c;
  box-shadow: 0 0 14px rgba(217, 122, 108, 0.7);
  animation: sentencingDotPulse 6.4s ease-in-out infinite;
  animation-delay: 2s;
}
@keyframes sentencingDotPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(217, 122, 108, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 20px rgba(217, 122, 108, 0.9);  transform: scale(1.12); }
}
/* 2023 — closure beat. After the timeline lands, the final dot
   re-glows once, like the page settling. Single play, runs ~2.4s
   after the last event's stagger completes. */
.intro-event:nth-child(7)::before {
  animation: closureDotGlow 2.2s ease-out 2.4s 1 both;
}
@keyframes closureDotGlow {
  0%   { box-shadow: 0 0 12px rgba(126, 224, 255, 0.6); }
  45%  { box-shadow: 0 0 26px rgba(126, 224, 255, 0.95); }
  100% { box-shadow: 0 0 12px rgba(126, 224, 255, 0.6); }
}
.intro-event-year {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.intro-event-body p {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
}
.intro-event-body cite {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: var(--ink-mute);
}

/* ---------- Section 3: Optimization culture stats ---------- */
.intro-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 880px;
}
.intro-stat {
  padding: 22px 22px 18px;
  background: rgba(10, 14, 40, 0.55);
  border: 1px solid rgba(126, 224, 255, 0.16);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.intro-stat-value {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--ink);
  line-height: 1.1;
}
.intro-stat-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.intro-stat-source {
  margin-top: auto;
  font-size: 11px;
  color: var(--ink-mute);
}
.intro-stat-source summary {
  cursor: pointer;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--accent);
  padding: 12px 8px;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  user-select: none;
}
.intro-stat-source summary::-webkit-details-marker { display: none; }
.intro-stat-source summary::before {
  content: "+ ";
  color: var(--accent);
}
.intro-stat-source[open] summary::before { content: "− "; }
.intro-stat-source p {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.5;
  font-style: italic;
}

/* ---------- Section 4: Questions ---------- */
.intro-questions { text-align: center; }
.intro-questions .intro-head { text-align: center; max-width: none; margin-bottom: 48px; }
.intro-questions-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 760px;
}
.intro-questions-list p {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.1px;
  line-height: 1.25;
  font-style: italic;
}
.intro-questions-list p:nth-child(even) { color: var(--ink-soft); }

/* ---------- Section 5: Enter ---------- */
.intro-enter { text-align: center; }
.intro-enter .intro-head { text-align: center; max-width: none; margin-bottom: 24px; }
.intro-notices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 540px;
  margin: 12px 0 28px;
}
.intro-notice {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(10, 14, 40, 0.55);
  border: 1px solid rgba(126, 224, 255, 0.16);
  border-radius: 8px;
  text-align: left;
}
.intro-notice-tag {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.intro-notice span:last-child {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.intro-enter-btn {
  appearance: none;
  margin: 8px 0 16px;
  padding: 16px 40px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(126,224,255,0.95), rgba(200,155,255,0.95));
  color: #0a0a25;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(126, 224, 255, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
}
.intro-enter-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 0 38px rgba(126, 224, 255, 0.75),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.intro-enter-btn:active { transform: translateY(0); }

.intro-disclaimer {
  margin: 16px 0 0;
  color: var(--ink-mute);
  font-size: 11.5px;
  font-style: italic;
  letter-spacing: 0.3px;
}

/* Small-screen polish */
@media (max-width: 600px) {
  .intro-section { padding: 64px 18px; }
  .intro-timeline::before { left: 36px; }
  .intro-event { grid-template-columns: 56px 1fr; gap: 12px; }
  .intro-event::before { left: 31px; }
  .intro-event-year { font-size: 15px; }
  .intro-questions-list { gap: 28px; }
}

/* iPad portrait / mid-tablet: intro was using desktop padding and
   the prose felt cramped against the edges. Pull it in. */
@media (max-width: 768px) {
  .intro-section { padding: 56px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-section { transition: opacity 0.3s ease !important; transform: none !important; }
  .intro-section:not(.is-visible) { opacity: 0; }
  .intro-section.is-visible { opacity: 1; }
  .intro-scroll-prompt,
  .intro-hero .landing-mark { animation: none !important; }
  .intro-timeline::before { transition: none !important; transform: scaleY(1) !important; }
  .intro-event { transition: none !important; opacity: 1 !important; transform: none !important; }
  .intro-event:nth-child(4)::before,
  .intro-event:nth-child(5)::before,
  .intro-event:nth-child(7)::before { animation: none !important; }
}

/* ====================================================================
 * Decision Log — Adult-mode allocation audit trail
 *
 * Session-scope record of every released allocation move. The order is
 * the point; the log shows what the user reached for, in what
 * sequence. Audit-trail framing — no judgment in the copy.
 * ==================================================================== */
.decision-log {
  margin-top: 12px;
  padding: 12px 14px 10px;
  background: rgba(10, 14, 40, 0.45);
  border: 1px solid rgba(126, 224, 255, 0.18);
  border-left: 2px solid rgba(126, 224, 255, 0.5);
  border-radius: 10px;
}
.decision-log-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.decision-log h4 {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.decision-count {
  margin-left: 8px;
  font-size: 10.5px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: 0.4px;
}
.decision-clear {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(126, 224, 255, 0.25);
  color: var(--ink-mute);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.decision-clear:hover {
  color: var(--ink);
  border-color: rgba(126, 224, 255, 0.6);
  background: rgba(126, 224, 255, 0.06);
}

.decision-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
/* Subtle scrollbar styling — keeps the log scroll-area contained */
.decision-list::-webkit-scrollbar { width: 6px; }
.decision-list::-webkit-scrollbar-thumb {
  background: rgba(126, 224, 255, 0.18);
  border-radius: 999px;
}

.decision-row {
  display: grid;
  grid-template-columns: 28px 38px 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: background 0.12s;
}
.decision-row:hover { background: rgba(126, 224, 255, 0.05); }
.decision-index {
  color: var(--ink-mute);
  font-size: 10.5px;
  letter-spacing: 0.4px;
}
.decision-delta {
  font-weight: 700;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 11.5px;
}
.decision-delta.is-pos {
  color: rgb(150, 230, 200);
  background: rgba(110, 220, 170, 0.10);
}
.decision-delta.is-neg {
  color: rgb(255, 190, 150);
  background: rgba(255, 170, 110, 0.10);
}
.decision-label {
  color: var(--ink);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.decision-total {
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 0.3px;
}
/* Tier-tinted left edge so premium / experimental moves stand out
   without being loud. */
.decision-row[data-tier="premium"]      { box-shadow: inset 2px 0 0 rgba(200, 155, 255, 0.40); }
.decision-row[data-tier="experimental"] { box-shadow: inset 2px 0 0 rgba(255, 155, 210, 0.45); }
.decision-row[data-tier="entry"]        { box-shadow: inset 2px 0 0 rgba(126, 224, 255, 0.35); }

.decision-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
  letter-spacing: 0.2px;
  text-align: right;
}

/* About / sources footer link — small, unobtrusive */
.site-footer .footer-sep { margin: 0 6px; color: var(--ink-mute); opacity: 0.55; }
/* Use --ink-soft (#a8b3d6) over the dark gradient bg (~#0c0c2a) for
   ~8:1 contrast — well above WCAG AA 4.5:1. Underline removed by default
   but restored on hover/focus so the link affords its nature. */
.site-footer .footer-link {
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color 0.15s;
}
.site-footer .footer-link:hover,
.site-footer .footer-link:focus-visible { color: var(--accent); text-decoration: underline; }

/* ====================================================================
 * Kids-mode arc — Wonder / Curiosity / Variance-as-gift
 *
 * Three small panels in a warmer register. The thesis is wonder, not
 * measurement — same shape as Adult and Reflection arcs, lightest
 * weight of the three.
 * ==================================================================== */

/* Mode-conditional visibility (parallel to .reflection-only / .adult-only) */
.kids-only { display: none; }
body.app-kids .kids-only { display: revert; }

.kids-arc-panel { padding: 28px 24px 24px; }
.kids-arc-head { margin-bottom: 14px; }
.kids-arc-panel h2 {
  font-size: 22px;
  letter-spacing: -0.1px;
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--ink);
}
.kids-arc-panel h2 em {
  font-style: italic;
  background: linear-gradient(90deg, var(--accent-warm), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ink);
  -webkit-text-fill-color: transparent;
}
.kids-arc-panel .subtle {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* R10 rev (Ethics + Risk MAJOR): disclaimer was rendering at small-print
   size, making the heading dominate it perceptually. Elevate to peer-of-
   heading typography — larger size, near-ink contrast, slightly heavier
   weight — so the "this is guesswork, not certainty" frame lands before
   the list reads as facts. */
.kids-arc-panel .kids-arc-disclaimer {
  margin: 0 0 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

/* R13 rev (UX + Narrative Design MAJOR): closing-affirmation slot under the
   kids-arc list. Matches the disclaimer typography family (size, weight,
   color) so the open/close brackets read as one atmospheric pair — the
   disclaimer frames "this is guesswork," the closer reaffirms "and they
   are still loved." Centered to set it apart from the list rhythm. */
.kids-arc-panel .kids-arc-closing {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  color: var(--ink);
}

/* R16 scaffold (Frontend pre-add for UX Flow): mirror of .kids-arc-closing
   for the Reflection-mode arc panel. Same size/weight/centering rhythm so
   the closing affirmation reads as a peer of the disclaimer, but uses the
   reflection serif (where active) and italic register for a poetic/
   humanistic accent that fits Reflection's tonal language. Falls back to
   --ink gracefully if no reflection-serif var is bound. */
.reflection-arc-closing {
  margin-top: 16px;
  font-size: 14.5px;
  /* R16 rev (VISUAL DIRECTOR MAJOR): 1.55 → 1.5 to mirror .kids-arc-closing
     rhythm exactly. The two closers now share one cadence — same size, same
     leading — so Reflection's italic register reads as a tonal variant, not
     a structurally different element.
     R16 rev (VISUAL DIRECTOR POLISH): font-family removed — .pause-panel
     parent already binds var(--reflection-serif) in Reflection mode; in
     Adult mode the closer correctly falls through to the body face. */
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  color: var(--ink);
  font-style: italic;
}

.kids-arc-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.kids-arc-list li {
  padding: 12px 14px;
  background: rgba(20, 14, 30, 0.40);
  border: 1px solid rgba(255, 210, 138, 0.45);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.kids-arc-list li:hover {
  border-color: rgba(255, 210, 138, 0.7);
  background: rgba(20, 14, 30, 0.55);
}
.kids-arc-list li::before {
  content: "✦";
  margin-right: 6px;
  color: var(--accent-warm);
  opacity: 0.85;
  font-size: 11px;
  vertical-align: 1px;
}
.kids-arc-questions li::before {
  content: "?";
  font-weight: 700;
  font-size: 12px;
  color: var(--accent-3);
}
.kids-arc-questions li {
  font-style: italic;
  border-color: rgba(255, 155, 210, 0.45);
}
.kids-arc-questions li:hover {
  border-color: rgba(255, 155, 210, 0.7);
}

/* R14 rev (MOBILE MAJOR): widened breakpoint from 640 → 768 so iPad-
   portrait viewports (641-768px) also get WCAG 2.5.5 44×44 touch targets
   on .style-btn/.gender-btn/.details-toggle/.intro-skip/consent-ack. */
@media (max-width: 768px) {
  .kids-arc-list { grid-template-columns: 1fr; }
  /* R10 rev (MOBILE MAJOR): 28px side padding ate too much horizontal
     real estate on narrow viewports — drop to 18px so two-line list
     items don't wrap awkwardly. Vertical padding unchanged. */
  .kids-arc-panel { padding: 28px 18px 24px; }
  /* R11 rev (MOBILE MAJOR): heritable-decision consent-ack button was
     sub-44px on mobile (6×12 padding + 12px text). Bump to WCAG 2.5.5
     touch-target minimum so the one-time acknowledgment is comfortably
     tappable. Desktop sizing unchanged. */
  .consent-ack-prompt .consent-ack-btn {
    min-height: 44px; min-width: 44px; padding: 10px 16px;
  }
  /* R11 rev (MOBILE POLISH): intro skip link was 6×12 padding — too
     small to hit reliably on phones. Force 44×44 with centered content
     while preserving the compact look (no width inflation). */
  .intro-skip {
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* R12 rev (MOBILE MAJOR): .style-btn + .gender-btn used 6×14 padding
     + 12.5px text → sub-44px tap targets. Match R11 intro-skip pattern:
     44×44 min, inline-flex center so the pill shape stays compact while
     the hit area meets WCAG 2.5.5. Desktop sizing unchanged. */
  .style-btn,
  .gender-btn {
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* R13 rev (MOBILE MAJOR): .details-toggle used 6×14 padding + 11.5px
     text → sub-44px tap target. Same R12 pattern: 44×44 min, inline-flex
     center so the dashed pill keeps its compact silhouette. */
  .details-toggle {
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* R16 rev (MOBILE MAJOR): 14.5px italic affirmation crowds narrow viewports
     and pushes the panel taller than it needs to be. Trim to ~13px and tuck
     margin-top from 16 → 12 so the closer sits closer to the question
     without losing its "centered breath" beat. Desktop sizing unchanged. */
  .reflection-arc-closing {
    font-size: 13px;
    margin-top: 12px;
  }
  /* R16 rev (MOBILE POLISH a11y): .pause-cant-see pills used 3×10 padding +
     12.5px text → ~24px tall, well under WCAG 2.5.5 minimum. Tap targets
     don't need to be tappable here (read-only chips), but consistent 44px
     hit areas keep adjacent question/closer easy to scan and avoid
     fat-finger overlap with the question block beneath. */
  .pause-cant-see li {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* R12 rev (MOBILE POLISH): Kids OCEAN parentheticals can be long; cap
   popover width so it doesn't push past narrow viewports and wrap any
   over-long single tokens cleanly. */
.slider-popover {
  max-width: 240px;
  word-wrap: break-word;
}

/* R10 rev (Visual Director + Narrative Design): duration 0.32s→0.5s to
   match the app's `fadeUp` / `parent-advanced-reveal` motion language;
   stagger intervals normalised to a uniform 0.3s "wonder cadence"
   (0s / 0.3s / 0.6s) rather than the prior compressed 0.3s / 0.45s.
   Keys off `data-stage` set by R9 in script.js render. Reduced-motion
   users skip the motion. */
.kids-arc-panel[data-stage] {
  animation: kidsArcPanelIn 0.5s ease both;
}
.kids-arc-panel[data-stage="1"] { animation-delay: 0s; }
.kids-arc-panel[data-stage="2"] { animation-delay: 0.3s; }
.kids-arc-panel[data-stage="3"] { animation-delay: 0.6s; }
@keyframes kidsArcPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .kids-arc-panel[data-stage] {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ====================================================================
 * CSS-3D DNA helix — reactive atmospheric element
 *
 * Lives in the top-right of the Enhancement Allocation panel. Pure
 * CSS, no JS dependency. Rotation speed and base-pair glow react to
 * --opt-intensity (set by updateBudgetBar from credits used), so the
 * helix literally spins faster as the user enhances more — the model
 * itself accelerates as you accept more modifications.
 * ==================================================================== */
.dna-helix {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 64px;
  height: 230px;
  perspective: 900px;
  pointer-events: none;
  z-index: 1;
}
.dna-helix-rotator {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* 18s at 0 intensity, ~9s at full budget — accelerates with allocation */
  animation: dnaHelixRotate calc(18s - var(--opt-intensity, 0) * 9s) linear infinite;
}
.dna-rung {
  position: absolute;
  left: 50%;
  top: calc(var(--i) * 11px + 12px);
  width: 50px;
  height: 1.5px;
  margin-left: -25px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    rgba(126, 224, 255, 0.0) 18%,
    rgba(255, 155, 210, 0.0) 82%,
    var(--accent-3) 100%);
  /* Each rung rotates a little more around Y, creating the helical twist.
     20 rungs × 24° = 480° → 1.33 full turns down the strand. */
  transform: rotateY(calc(var(--i) * 24deg));
  transform-style: preserve-3d;
  border-radius: 1px;
  opacity: calc(0.55 + var(--opt-intensity, 0) * 0.35);
}
.dna-rung::before,
.dna-rung::after {
  content: "";
  position: absolute;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 calc(6px + var(--opt-intensity, 0) * 10px) currentColor;
  transition: box-shadow 0.4s ease;
}
.dna-rung::before {
  left: -3px;
  background: var(--accent);
  color: var(--accent);
}
.dna-rung::after {
  right: -3px;
  background: var(--accent-3);
  color: var(--accent-3);
}

@keyframes dnaHelixRotate {
  to { transform: rotateY(360deg); }
}

/* Hide on small screens — fewer atmospheric elements competing on iPad */
@media (max-width: 720px) {
  .dna-helix { display: none; }
}

/* Make sure heading sits to the LEFT of the helix on wide screens.
   (.panel already sets position: relative — no need to re-declare here.) */
.budget-panel h2 { padding-right: 90px; }

@media (prefers-reduced-motion: reduce) {
  .dna-helix-rotator { animation: none; }
}

/* ====================================================================
 * Regulatory Letter — Adult-mode bureaucratic correspondence
 *
 * The narrative artifact Adult mode was missing: a fictional letter
 * from the Global Heritable Traits Review Board, generated from the
 * user's allocation. Letterhead, monospace body, redaction bars,
 * subtle paper texture. The mundane authority of the layout is the
 * point.
 * ==================================================================== */
.regulatory-letter-panel {
  padding: 30px 28px 28px;
}
.letter-panel-head { margin-bottom: 18px; }
.regulatory-letter-panel h2 {
  font-size: 19px;
  letter-spacing: 0.3px;
  margin: 0 0 4px;
  font-weight: 600;
}

.letter-document {
  margin-top: 4px;
  padding: 36px 44px 34px;
  background:
    repeating-linear-gradient(to bottom,
      rgba(126, 224, 255, 0.0) 0,
      rgba(126, 224, 255, 0.0) 26px,
      rgba(126, 224, 255, 0.022) 27px),
    linear-gradient(180deg, rgba(20, 20, 30, 0.65), rgba(15, 16, 28, 0.72));
  border: 1px solid rgba(126, 224, 255, 0.18);
  border-left: 3px solid rgba(126, 224, 255, 0.45);
  border-radius: 4px;
  font-family: "SF Mono", "Monaco", "Menlo", "Consolas", "Courier New", monospace;
  position: relative;
}

/* Severity tinting on the document edge */
.letter-document[data-letter="returned"]     { border-left-color: rgba(255, 155, 210, 0.6); }
.letter-document[data-letter="experimental"] { border-left-color: rgba(255, 210, 138, 0.6); }
.letter-document[data-letter="cognitive"]    { border-left-color: rgba(200, 155, 255, 0.6); }
.letter-document[data-letter="provisional"]  { border-left-color: rgba(126, 224, 255, 0.6); }
.letter-document[data-letter="baseline"]     { border-left-color: rgba(168, 179, 214, 0.45); }

.letter-letterhead {
  text-align: center;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(126, 224, 255, 0.20);
}
.letter-board {
  font-size: 12.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.letter-office {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.letter-ref {
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.5px;
  margin-top: 10px;
}
.letter-ref-code {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.8px;
}

.letter-meta {
  margin: 0 0 20px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.letter-subject {
  display: inline-block;
  margin-left: 6px;
  color: var(--ink);
  font-weight: 600;
}

.letter-body p {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.75;
  letter-spacing: 0.1px;
  white-space: pre-line;
}

.letter-redacted {
  display: inline-block;
  background: rgba(0, 0, 0, 0.92);
  color: transparent;
  user-select: none;
  padding: 0 6px;
  border-radius: 1px;
  vertical-align: baseline;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.letter-signature {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px dashed rgba(126, 224, 255, 0.18);
}
.letter-signature p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.letter-sig-name { padding: 4px 0; }
.letter-sig-title {
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.3px;
  font-style: italic;
}

@media (max-width: 640px) {
  .letter-document { padding: 24px 22px; }
  .letter-board { font-size: 11px; letter-spacing: 2px; }
}