/* Longevity Bae (longevitybae.com) - 2026 design system. Built from partials; edit here or in the staging partials. */

/* ---- 00-core.css ---- */
/* ==========================================================================
   CORE — tokens, base, typography, shared components, motion.
   Owned by the design-system layer. Sections style themselves in their own
   partials, scoped under their section id.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Ink (backgrounds, darkest → lightest) */
  --ink-0: #030509;
  --ink-1: #070a11;
  --ink-2: #0b0f18;
  --ink-3: #111726;
  --ink-4: #182033;
  --ink-5: #212a40;

  /* Text */
  --tx-1: #f4f7fb;   /* headings, key values */
  --tx-2: #b0b9c9;   /* body copy */
  --tx-3: #8591a7;   /* secondary / captions (>= 5.5:1 on ink) */
  --tx-4: #5b667a;   /* decorative only — never essential text */

  /* Hairlines */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.18);

  /* Bioluminescent spectrum */
  --mint: #3cf2b4;
  --mint-2: #12d99b;
  --mint-soft: rgba(60, 242, 180, 0.12);
  --cyan: #38d6f5;
  --cyan-soft: rgba(56, 214, 245, 0.12);
  --sky: #6aa8ff;
  --sky-soft: rgba(106, 168, 255, 0.12);
  --violet: #a68cff;
  --violet-soft: rgba(166, 140, 255, 0.12);
  --rose: #ff7eb6;
  --rose-soft: rgba(255, 126, 182, 0.12);
  --amber: #ffc65c;
  --amber-soft: rgba(255, 198, 92, 0.12);
  --coral: #ff6b6b;
  --coral-soft: rgba(255, 107, 107, 0.12);

  /* Semantic */
  --good: var(--mint);
  --good-soft: var(--mint-soft);
  --warn: var(--amber);
  --warn-soft: var(--amber-soft);
  --risk: var(--coral);
  --risk-soft: var(--coral-soft);
  --info: var(--sky);
  --info-soft: var(--sky-soft);

  /* Gradients */
  --grad-brand: linear-gradient(115deg, #5bf7c2 0%, #38d6f5 48%, #a68cff 100%);
  --grad-brand-soft: linear-gradient(115deg, rgba(91, 247, 194, 0.16), rgba(56, 214, 245, 0.10) 50%, rgba(166, 140, 255, 0.16));
  --grad-warm: linear-gradient(115deg, #ffc65c, #ff6b6b 60%, #ff7eb6);
  --grad-risk: linear-gradient(90deg, var(--mint) 0%, var(--amber) 55%, var(--coral) 100%);
  --grad-hairline: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14) 20%, rgba(60, 242, 180, 0.35) 50%, rgba(255, 255, 255, 0.14) 80%, transparent);

  /* Surfaces ("liquid glass") */
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.058) 0%, rgba(255, 255, 255, 0.022) 100%);
  --glass-bg-strong: linear-gradient(180deg, rgba(22, 29, 46, 0.86) 0%, rgba(11, 15, 24, 0.9) 100%);
  --glass-border: rgba(255, 255, 255, 0.085);
  --glass-border-hi: rgba(255, 255, 255, 0.16);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glass-blur: blur(18px) saturate(150%);
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 14px 40px -18px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  --glow-mint: 0 0 0 1px rgba(60, 242, 180, 0.35), 0 10px 40px -10px rgba(60, 242, 180, 0.5);
  --glow-cyan: 0 0 0 1px rgba(56, 214, 245, 0.35), 0 10px 40px -10px rgba(56, 214, 245, 0.45);

  /* Type */
  --font-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-hero: clamp(2.75rem, 1.1rem + 7vw, 7.5rem);
  --fs-h2: clamp(2.15rem, 1.25rem + 3.6vw, 4.4rem);
  --fs-h3: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
  --fs-h4: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-micro: 0.7rem;

  /* Shape */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-full: 999px;

  /* Layout */
  --container: 1240px;
  --container-narrow: 880px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(4.25rem, 2.5rem + 5.2vw, 7.5rem);
  --header-h: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --dur-1: 0.18s;
  --dur-2: 0.32s;
  --dur-3: 0.6s;
  --dur-4: 0.95s;

  /* Layers */
  --z-raised: 2;
  --z-sticky: 50;
  --z-header: 100;
  --z-drawer: 150;
  --z-modal: 200;
  --z-toast: 300;
  --z-progress: 400;
  --z-skip: 1000;

  /* Data-viz */
  --viz-grid: rgba(255, 255, 255, 0.06);
  --viz-axis: rgba(255, 255, 255, 0.28);
  --viz-label: #8591a7;

  /* Legacy aliases (referenced by engine scripts and inline styles) */
  --bg-primary: var(--ink-0);
  --bg-secondary: var(--ink-1);
  --bg-surface: var(--ink-3);
  --bg-surface-hover: var(--ink-4);
  --bg-subtle: var(--ink-5);
  --border-subtle: var(--line-1);
  --border-medium: var(--line-2);
  --border-strong: var(--line-3);
  --border-focus: var(--mint);
  --text-white: #ffffff;
  --text-primary: var(--tx-1);
  --text-secondary: var(--tx-2);
  --text-muted: var(--tx-3);
  --text-dim: var(--tx-4);
  --accent: var(--mint);
  --accent-hover: var(--mint-2);
  --accent-tint: var(--mint-soft);
  --accent-light: #7ff8cd;
  --warning: var(--amber);
  --warning-tint: var(--amber-soft);
  --danger: var(--coral);
  --danger-tint: var(--coral-soft);
  --cardiac: var(--coral);
  --transition-fast: var(--dur-1) ease;
  --transition-normal: var(--dur-2) var(--ease-out);
  --transition-camera: transform 0.9s var(--ease-out);
  --surface: var(--ink-3);
  --surface-hover: var(--ink-4);
  --border: var(--line-2);
  --text: var(--tx-1);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background-color: var(--ink-0);
  color: var(--tx-2);
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  scrollbar-width: thin;
  overflow-x: clip;
}

body {
  position: relative;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--tx-2);
  background: transparent;
  overflow-x: clip;
  font-feature-settings: "ss01" on, "cv11" on;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Ambient aurora field + film grain, painted once behind everything */
body::before {
  content: "";
  position: fixed;
  inset: -12vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42vmax 30vmax at 10% 6%, rgba(60, 242, 180, 0.085), transparent 62%),
    radial-gradient(40vmax 32vmax at 92% 14%, rgba(56, 214, 245, 0.07), transparent 62%),
    radial-gradient(48vmax 36vmax at 72% 96%, rgba(166, 140, 255, 0.08), transparent 62%),
    radial-gradient(30vmax 26vmax at 4% 84%, rgba(255, 126, 182, 0.04), transparent 62%);
  animation: lb-aurora-drift 38s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
@keyframes lb-aurora-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2vmax, -1.5vmax, 0) scale(1.04); }
  100% { transform: translate3d(-2vmax, 1vmax, 0) scale(1.02); }
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; transition: color var(--dur-1) ease; }
ul[class], ol[class] { list-style: none; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

::selection { background: rgba(60, 242, 180, 0.3); color: #ffffff; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--tx-1);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
strong, b { color: var(--tx-1); font-weight: 600; }
em, i { font-style: italic; }
small { font-size: var(--fs-sm); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7em; height: 1.7em; padding: 0 0.45em;
  font-size: 0.78em; font-weight: 500; line-height: 1; color: var(--tx-1);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 7px;
}
hr { border: 0; height: 1px; background: var(--line-1); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 6px;
}
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: var(--z-skip);
  padding: 0.75rem 1.1rem;
  font-weight: 600; color: #03140d;
  background: var(--mint);
  border-radius: var(--radius-sm);
  box-shadow: var(--glow-mint);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 2px solid #fff; }
.sr-only, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Sections & section heads (shared by every chapter)
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--section-y);
  isolation: isolate;
}
.section-bordered::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(var(--container), 100% - 2 * var(--gutter));
  height: 1px;
  transform: translateX(-50%);
  background: var(--grad-hairline);
  opacity: 0.7;
}
.section-head {
  position: relative;
  max-width: 900px;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.25rem);
}
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-tag-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
}
.section-tag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 30px;
  padding: 0.35rem 0.8rem 0.35rem 0.65rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  background: rgba(60, 242, 180, 0.06);
  border: 1px solid rgba(60, 242, 180, 0.2);
  border-radius: var(--radius-pill);
}
.section-tag::before {
  content: "";
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint), 0 0 2px var(--mint);
  animation: lb-pulse-dot 2.8s ease-in-out infinite;
}
.section-tag .tag-index {
  color: var(--tx-3);
  padding-right: 0.6rem;
  margin-right: 0.05rem;
  border-right: 1px solid rgba(60, 242, 180, 0.22);
}
@keyframes lb-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}
.section-title {
  margin-top: 1.1rem;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--tx-1);
}
.section-title em,
.section-title .accent,
.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  padding-right: 0.08em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-desc {
  max-width: 66ch;
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--tx-2);
}
.section-desc em { color: var(--tx-1); }
.section-head.is-center .section-desc { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Text utilities
   -------------------------------------------------------------------------- */
.text-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-warm {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.mono { font-family: var(--font-mono); }
.tabular, .num { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.muted { color: var(--tx-3); }

/* --------------------------------------------------------------------------
   Icons (inline SVG, Lucide-style 24×24 line icons)
   -------------------------------------------------------------------------- */
.i, .icon {
  width: 1.15em; height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-tile {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 14px;
  color: var(--mint);
  background: linear-gradient(160deg, rgba(60,242,180,0.16), rgba(60,242,180,0.03));
  border: 1px solid rgba(60, 242, 180, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px -12px rgba(60,242,180,0.5);
}
.icon-tile .i { width: 22px; height: 22px; }
.icon-tile.is-cyan { color: var(--cyan); background: linear-gradient(160deg, rgba(56,214,245,0.16), rgba(56,214,245,0.03)); border-color: rgba(56,214,245,0.24); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px -12px rgba(56,214,245,0.5); }
.icon-tile.is-violet { color: var(--violet); background: linear-gradient(160deg, rgba(166,140,255,0.18), rgba(166,140,255,0.03)); border-color: rgba(166,140,255,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px -12px rgba(166,140,255,0.5); }
.icon-tile.is-coral { color: var(--coral); background: linear-gradient(160deg, rgba(255,107,107,0.18), rgba(255,107,107,0.03)); border-color: rgba(255,107,107,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px -12px rgba(255,107,107,0.5); }
.icon-tile.is-amber { color: var(--amber); background: linear-gradient(160deg, rgba(255,198,92,0.18), rgba(255,198,92,0.03)); border-color: rgba(255,198,92,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px -12px rgba(255,198,92,0.5); }
.icon-tile.is-rose { color: var(--rose); background: linear-gradient(160deg, rgba(255,126,182,0.18), rgba(255,126,182,0.03)); border-color: rgba(255,126,182,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px -12px rgba(255,126,182,0.5); }
.icon-tile.is-sky { color: var(--sky); background: linear-gradient(160deg, rgba(106,168,255,0.18), rgba(106,168,255,0.03)); border-color: rgba(106,168,255,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px -12px rgba(106,168,255,0.5); }

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-highlight), var(--shadow-md);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.glass-strong {
  position: relative;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-highlight), var(--shadow-lg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.glass-inset {
  background: rgba(3, 5, 9, 0.45);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Gradient border ring. Uses ::after — don't combine with .spotlight on the same element. */
.ring-gradient { position: relative; }
.ring-gradient::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(60,242,180,0.55), rgba(56,214,245,0.12) 35%, rgba(255,255,255,0.04) 60%, rgba(166,140,255,0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* Cursor spotlight (fx.js feeds --mx/--my). Uses ::before + ::after. */
.spotlight { position: relative; }
.spotlight::before,
.spotlight::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.spotlight::before {
  z-index: 0;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(60, 242, 180, 0.075), transparent 42%);
}
.spotlight::after {
  z-index: 1;
  padding: 1px;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(60, 242, 180, 0.6), rgba(56, 214, 245, 0.2) 30%, transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.spotlight:hover::before,
.spotlight:hover::after,
.spotlight:focus-within::after { opacity: 1; }
.spotlight > * { position: relative; z-index: 2; }

/* Tilt (fx.js feeds --rx/--ry on [data-tilt]) */
[data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease-out);
  transform-style: preserve-3d;
}
[data-tilt].is-tilting { transition: transform 0.12s linear; }

/* Background patterns */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
}
.bg-dots {
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 22px 22px;
}
.glow-orb {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(80px);
  opacity: 0.35;
  background: radial-gradient(circle, rgba(60,242,180,0.5), transparent 65%);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-h: 44px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: var(--btn-h);
  padding: 0 1.15rem;
  font-family: var(--font-sans);
  font-size: 0.925rem;
  font-weight: 550;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--tx-1);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-2) var(--ease-out),
    background-color var(--dur-2) ease,
    border-color var(--dur-2) ease,
    box-shadow var(--dur-3) var(--ease-out),
    color var(--dur-2) ease;
}
.btn .i, .btn svg { width: 1.08em; height: 1.08em; flex: none; }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.btn-primary {
  color: #02130c;
  background: linear-gradient(135deg, #6bf8c9 0%, #3cf2b4 35%, #2adfd3 70%, #45c8f2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 10px 30px -12px rgba(60, 242, 180, 0.7);
  font-weight: 600;
}
.btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.9s var(--ease-out);
}
.btn-primary:hover {
  color: #02130c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 18px 44px -12px rgba(60, 242, 180, 0.85),
    0 0 0 4px rgba(60, 242, 180, 0.12);
}
.btn-primary:hover::after { transform: translateX(130%); }

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
}

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
}
.btn-outline:hover {
  color: var(--mint);
  border-color: rgba(60, 242, 180, 0.5);
  background: rgba(60, 242, 180, 0.06);
  box-shadow: 0 0 0 4px rgba(60, 242, 180, 0.06);
}

.btn-ghost {
  color: var(--tx-2);
  background: transparent;
}
.btn-ghost:hover {
  color: var(--tx-1);
  background: rgba(255, 255, 255, 0.06);
}

.btn-sm { --btn-h: 36px; padding: 0 0.9rem; font-size: 0.85rem; gap: 0.45rem; }
.btn-lg { --btn-h: 54px; padding: 0 1.6rem; font-size: 1rem; }
.btn-icon { width: var(--btn-h); padding: 0; }
.btn .btn-arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }

@media (pointer: coarse) {
  .btn, .btn-sm { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Pills, chips, badges
   -------------------------------------------------------------------------- */
.badge-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 28px;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.1;
  color: #cbbdff;
  background: rgba(166, 140, 255, 0.1);
  border: 1px solid rgba(166, 140, 255, 0.26);
  border-radius: var(--radius-pill);
}
.ui-chip {
  --chip-c: var(--tx-2);
  --chip-bg: rgba(255, 255, 255, 0.05);
  --chip-bd: rgba(255, 255, 255, 0.1);
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 28px;
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.1;
  color: var(--chip-c);
  background: var(--chip-bg);
  border: 1px solid var(--chip-bd);
  border-radius: var(--radius-pill);
}
.ui-chip.is-good { --chip-c: var(--mint); --chip-bg: var(--mint-soft); --chip-bd: rgba(60,242,180,0.28); }
.ui-chip.is-warn { --chip-c: var(--amber); --chip-bg: var(--amber-soft); --chip-bd: rgba(255,198,92,0.3); }
.ui-chip.is-risk { --chip-c: #ff8f8f; --chip-bg: var(--coral-soft); --chip-bd: rgba(255,107,107,0.32); }
.ui-chip.is-info { --chip-c: var(--sky); --chip-bg: var(--sky-soft); --chip-bd: rgba(106,168,255,0.3); }
.ui-chip.is-violet { --chip-c: #c2b2ff; --chip-bg: var(--violet-soft); --chip-bd: rgba(166,140,255,0.3); }
.ui-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* Segmented control / pill toggles (use .seg + .seg-btn[aria-pressed|.active]) */
.seg {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
}
.seg-btn {
  min-height: 36px;
  padding: 0 0.95rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tx-3);
  border-radius: var(--radius-pill);
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.seg-btn:hover { color: var(--tx-1); }
.seg-btn.active, .seg-btn[aria-pressed="true"], .seg-btn[aria-selected="true"] {
  color: var(--tx-1);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px -6px rgba(0,0,0,0.6);
}

/* --------------------------------------------------------------------------
   Sliders (shared by morbidity, VO2, ApoB, calculator engines)
   fx.js keeps --p (fill %) in sync on every input[type=range].
   -------------------------------------------------------------------------- */
.slider-group {
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line-1);
}
.slider-group:last-of-type { border-bottom: 0; }
.slider-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.7rem;
}
.slider-title {
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tx-1);
}
.slider-display {
  flex: none;
  padding: 0.38rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--mint);
  background: rgba(60, 242, 180, 0.08);
  border: 1px solid rgba(60, 242, 180, 0.2);
  border-radius: 9px;
}
.slider-note {
  margin-top: 0.55rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--tx-3);
}
input[type="range"].clean-slider,
.lb-range {
  --p: 50%;
  --track-h: 6px;
  --thumb: 24px;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 30px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.clean-slider::-webkit-slider-runnable-track,
.lb-range::-webkit-slider-runnable-track {
  height: var(--track-h);
  border-radius: 99px;
  background:
    linear-gradient(90deg, var(--mint), var(--cyan)) 0 0 / var(--p) 100% no-repeat,
    rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.clean-slider::-webkit-slider-thumb,
.lb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--thumb); height: var(--thumb);
  margin-top: calc((var(--track-h) - var(--thumb)) / 2);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 4.5px, #0b0f18 5px);
  border: 2px solid var(--mint);
  box-shadow: 0 0 0 6px rgba(60, 242, 180, 0.1), 0 4px 14px rgba(0, 0, 0, 0.55);
  transition: box-shadow var(--dur-2) ease, transform var(--dur-2) var(--ease-spring);
}
.clean-slider:hover::-webkit-slider-thumb,
.lb-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(60, 242, 180, 0.14), 0 0 24px rgba(60, 242, 180, 0.45); }
.clean-slider:active::-webkit-slider-thumb,
.lb-range:active::-webkit-slider-thumb { transform: scale(1.14); }
.clean-slider:focus-visible,
.lb-range:focus-visible { outline: none; }
.clean-slider:focus-visible::-webkit-slider-thumb,
.lb-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #03050a, 0 0 0 5px var(--mint), 0 0 24px rgba(60, 242, 180, 0.5); }
.clean-slider::-moz-range-track,
.lb-range::-moz-range-track { height: var(--track-h); border-radius: 99px; background: rgba(255, 255, 255, 0.08); }
.clean-slider::-moz-range-progress,
.lb-range::-moz-range-progress { height: var(--track-h); border-radius: 99px; background: linear-gradient(90deg, var(--mint), var(--cyan)); }
.clean-slider::-moz-range-thumb,
.lb-range::-moz-range-thumb {
  width: calc(var(--thumb) - 4px); height: calc(var(--thumb) - 4px);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 4.5px, #0b0f18 5px);
  border: 2px solid var(--mint);
  box-shadow: 0 0 0 6px rgba(60, 242, 180, 0.1), 0 4px 14px rgba(0, 0, 0, 0.55);
}
.clean-slider:focus-visible::-moz-range-thumb,
.lb-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #03050a, 0 0 0 5px var(--mint); }

/* Generic text / number inputs & selects */
.lb-input,
input[type="number"],
input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea {
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
  color: var(--tx-1);
  background: rgba(3, 5, 9, 0.5);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, background-color var(--dur-2) ease;
}
input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.lb-input:hover, input[type="number"]:hover, input[type="text"]:hover, select:hover, textarea:hover { border-color: var(--line-3); }
.lb-input:focus-visible, input[type="number"]:focus-visible, input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="date"]:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: rgba(60, 242, 180, 0.6);
  box-shadow: 0 0 0 4px rgba(60, 242, 180, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238591a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
}
select option { background: var(--ink-2); color: var(--tx-1); }
::placeholder { color: var(--tx-4); }

/* --------------------------------------------------------------------------
   Stat / KPI primitives
   -------------------------------------------------------------------------- */
.stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--tx-1);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-3);
}

/* Charts: shared SVG text defaults */
.chart-svg text, svg.chart text {
  font-family: var(--font-mono);
  fill: var(--viz-label);
}

/* --------------------------------------------------------------------------
   Scroll progress (element injected by fx.js)
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: var(--z-progress);
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--grad-brand);
  box-shadow: 0 0 12px rgba(60, 242, 180, 0.6);
}

/* --------------------------------------------------------------------------
   Reveal on scroll. main.js adds .revealed/.is-visible when in view.
   Uses the individual `translate`/`scale` properties so `transform` stays
   free for components (tilt, camera, etc.).
   -------------------------------------------------------------------------- */
html.js .reveal,
html.js [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ease-out),
    translate 1s var(--ease-out),
    scale 1s var(--ease-out),
    filter 0.9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}
html.js [data-reveal="fade"] { translate: none; }
html.js [data-reveal="scale"] { translate: none; scale: 0.94; }
html.js [data-reveal="left"] { translate: -32px 0; }
html.js [data-reveal="right"] { translate: 32px 0; }
html.js .reveal.lb-instant,
html.js [data-reveal].lb-instant { transition: none; }
html.js .reveal.revealed,
html.js [data-reveal].is-visible {
  opacity: 1;
  translate: none;
  scale: none;
  filter: none;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  body::before { animation: none; }
  html.js .reveal, html.js [data-reveal] { opacity: 1; translate: none; scale: none; filter: none; }
  [data-tilt] { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Print base — decorative layers off, revealed content visible.
   Dossier printing is styled by the chrome layer (body.printing-dossier),
   checklist printing by the checklist layer (body:not(.printing-dossier)).
   -------------------------------------------------------------------------- */
@page { margin: 1.5cm; }
/* --------------------------------------------------------------------------
   Homepage refinement — quiet, editorial, and deliberately spare.
   This sits late in the cascade to leave the atlas tools untouched.
   -------------------------------------------------------------------------- */
#hero {
  min-height: min(720px, 88svh);
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
  background: var(--ink-0);
  border-bottom: 1px solid var(--line-1);
}
#hero .hero-inner {
  display: block;
  max-width: var(--container-narrow);
  margin-inline: max(0px, calc((var(--container) - var(--container-narrow)) / -2));
  padding-inline: var(--gutter);
}
#hero .hero-content { max-width: 44rem; }
#hero .hero-eyebrow {
  display: block;
  min-height: 0;
  padding: 0;
  color: var(--tx-3);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
  animation: none;
}
#hero .hero-title {
  margin-top: 1.2rem;
  max-width: 14ch;
  font-size: clamp(3.25rem, 7.6vw, 6.65rem);
  font-weight: 550;
  line-height: 0.97;
  letter-spacing: -0.065em;
}
#hero .hero-lead {
  max-width: 39em;
  margin-top: 1.75rem;
  color: var(--tx-2);
  font-size: clamp(1.05rem, 1vw + 0.7rem, 1.2rem);
  line-height: 1.58;
  animation: none;
}
#hero .hero-buttons {
  gap: 0.65rem;
  margin-top: 2rem;
  animation: none;
}
#hero .hero-buttons .btn {
  box-shadow: none;
  border-radius: 6px;
}
#hero .hero-buttons .btn-primary {
  color: #07100d;
  background: var(--mint);
  border-color: var(--mint);
}
#hero .hero-buttons .btn-primary:hover { background: #7ff8cd; }
#hero .hero-buttons .btn-secondary {
  color: var(--tx-2);
  background: transparent;
  border-color: var(--line-3);
}
#hero .hero-note {
  max-width: 58ch;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-2);
  color: var(--tx-3);
  font-size: 0.84rem;
  line-height: 1.55;
}

@media (max-width: 768px) {
  #hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + 4rem);
    padding-bottom: 4.25rem;
  }
  #hero .hero-inner { margin-inline: auto; }
  #hero .hero-title { font-size: clamp(3.1rem, 14vw, 4.8rem); }
  #hero .hero-buttons { margin-top: 1.75rem; }
  #hero .hero-buttons .btn { width: 100%; justify-content: center; }
  #hero .hero-note { margin-top: 2.5rem; }
}

@media print {
  :root { color-scheme: light; }
  html, body { background: #ffffff !important; color: #111827 !important; }
  body::before, body::after, .scroll-progress, canvas, .glow-orb { display: none !important; }
  .reveal, [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; }
  .glass, .glass-strong { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
}

/* ---- 05-chrome.css ---- */
/* ==========================================================================
   CHROME — floating glass header, drawer, toast, back-to-top, modals
   (evidence, dossier, shortcuts), command palette, editorial footer, and
   dossier print. Every selector is scoped to a chrome-owned root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header — floating liquid-glass pill
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  padding: 14px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  pointer-events: none;
  transition: padding var(--dur-3) var(--ease-out);
}
.site-header .header-inner {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 10px;
  max-width: 1380px;
  height: 62px;
  margin-inline: auto;
  padding: 0 7px 0 7px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 60%),
    rgba(9, 12, 20, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.085);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.025),
    0 10px 30px -18px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  transition:
    height var(--dur-3) var(--ease-out),
    background-color var(--dur-3) ease,
    box-shadow var(--dur-3) var(--ease-out),
    border-color var(--dur-3) ease;
}
/* Specular rim: bright at the top-left, fading around the pill */
.site-header .header-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.28), rgba(60, 242, 180, 0.22) 18%, rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.02) 70%, rgba(166, 140, 255, 0.24));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.8;
}
/* Soft ink scrim behind the floating pill so scrolled content never collides with it */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 5, 9, 0.88) 0%, rgba(3, 5, 9, 0.55) 55%, rgba(3, 5, 9, 0) 100%);
  opacity: 0;
  transition: opacity var(--dur-3) ease;
}
html.is-scrolled .site-header::before { opacity: 1; }
html.drawer-open .site-header::before { opacity: 0; }
html.is-scrolled .site-header { padding-top: 10px; }
html.is-scrolled .site-header .header-inner {
  height: 54px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 60%),
    rgba(7, 10, 17, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 50px -20px rgba(0, 0, 0, 0.9),
    0 2px 10px -4px rgba(0, 0, 0, 0.5);
}

/* Brand */
.site-header .brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 3px 12px 3px 3px;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-2) ease;
}
.site-header .brand:hover { background: rgba(255, 255, 255, 0.04); }
.site-header .brand-logo-frame,
.site-footer .brand-logo-frame-sm {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, rgba(60, 242, 180, 0.22), rgba(6, 9, 15, 0.95) 68%);
  border: 1px solid rgba(60, 242, 180, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 22px -6px rgba(60, 242, 180, 0.55);
  transition: height var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out);
}
html.is-scrolled .site-header .brand-logo-frame { width: 38px; height: 38px; }
.site-header .brand-logo-img { width: 30px; height: 30px; }
.site-header .brand-text-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  line-height: 1;
}
.site-header .brand-name,
.site-footer .brand-name {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--tx-1);
  white-space: nowrap;
}
.site-header .brand-tint,
.site-footer .brand-tint,
.lb-modal .brand-tint,
.cmdk-backdrop .brand-tint {
  padding-left: 0.1em;
  padding-right: 0.06em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.14em;
  letter-spacing: -0.01em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-header .brand-url {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--tx-3);
  white-space: nowrap;
}

/* Nav */
.site-header .nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.site-header .nav-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 13px;
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--tx-3);
  transition: color var(--dur-2) ease;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible { color: var(--tx-1); }
.site-header .nav-link.active { color: var(--tx-1); }
.site-header .nav-link sub {
  position: relative;
  top: 0.28em;
  font-size: 0.68em;
  line-height: 0;
  vertical-align: baseline;
}
.site-header .nav-link:focus-visible { outline-offset: -2px; border-radius: var(--radius-pill); }
html:not(.chrome-ready) .site-header .nav-link.active { background: rgba(255, 255, 255, 0.08); }
.site-header .nav-indicator {
  position: absolute;
  top: 4px;
  left: 0;
  width: 0;
  height: 36px;
  border-radius: var(--radius-pill);
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 6px 18px -8px rgba(0, 0, 0, 0.8);
  transition:
    transform 0.55s var(--ease-out),
    width 0.55s var(--ease-out),
    opacity var(--dur-2) ease,
    background-color var(--dur-2) ease;
}
.site-header .nav-indicator::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: var(--mint);
  box-shadow: 0 0 10px 1px rgba(60, 242, 180, 0.8);
  transition: opacity var(--dur-2) ease, width var(--dur-3) var(--ease-out);
}
.site-header .nav-indicator.is-on { opacity: 1; }
.site-header .nav-indicator.is-preview {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}
.site-header .nav-indicator.is-preview::after { opacity: 0; width: 4px; }

/* Actions */
.site-header .header-action {
  justify-self: end;
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-header .hdr-tools {
  display: flex;
  align-items: center;
  gap: 1px;
  padding-right: 8px;
  margin-right: 2px;
  border-right: 1px solid var(--line-2);
}
.site-header .hdr-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--tx-2);
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.site-header .hdr-icon .i { width: 19px; height: 19px; stroke-width: 1.7; }
.site-header .hdr-icon:hover { color: var(--tx-1); background: rgba(255, 255, 255, 0.07); }
.site-header .hdr-icon:active { transform: scale(0.92); }
.site-header .hdr-icon:focus-visible { outline-offset: 1px; border-radius: 50%; }
.site-header .hdr-icon::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 5;
  translate: -50% -4px;
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--tx-1);
  background: rgba(12, 16, 26, 0.96);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) ease, translate var(--dur-2) var(--ease-out);
}
.site-header .hdr-icon[data-tip-key]::after { content: attr(data-tip) "   " attr(data-tip-key); }
.site-header .hdr-icon:hover::after,
.site-header .hdr-icon:focus-visible::after { opacity: 1; translate: -50% 0; transition-delay: 0.15s; }
.site-header .hdr-icon.is-pinged { animation: chrome-ping 0.7s var(--ease-out); }
@keyframes chrome-ping {
  0% { box-shadow: 0 0 0 0 rgba(60, 242, 180, 0.5); color: var(--mint); }
  100% { box-shadow: 0 0 0 12px rgba(60, 242, 180, 0); }
}
.site-header .header-cta {
  --btn-h: 42px;
  padding: 0 1.1rem 0 1.2rem;
}
.site-header .header-cta-short { display: none; }
html.is-scrolled .site-header .header-cta { --btn-h: 38px; }

/* Hamburger */
.site-header .mobile-toggle {
  position: relative;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2);
  transition: background-color var(--dur-2) ease;
}
.site-header .mobile-toggle:hover { background: rgba(255, 255, 255, 0.1); }
.site-header .mobile-toggle .bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.8px;
  margin-left: -9px;
  border-radius: 2px;
  background: var(--tx-1);
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out);
}
.site-header .mobile-toggle .bar:nth-child(1) { transform: translateY(-3.5px); }
.site-header .mobile-toggle .bar:nth-child(2) { transform: translateY(3.5px); width: 12px; }
.site-header .mobile-toggle[aria-expanded="true"] { background: rgba(60, 242, 180, 0.12); border-color: rgba(60, 242, 180, 0.35); }
.site-header .mobile-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: rotate(45deg); }
.site-header .mobile-toggle[aria-expanded="true"] .bar:nth-child(2) { transform: rotate(-45deg); width: 18px; }

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.site-header .mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  background: rgba(2, 4, 8, 0);
  transition: background-color 0.4s ease, visibility 0s linear 0.5s;
}
.site-header .mobile-drawer.open {
  pointer-events: auto;
  visibility: visible;
  background: rgba(2, 4, 8, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.4s ease, visibility 0s;
}
.site-header .drawer-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(14px + 62px + 26px) 24px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(90% 50% at 100% 0%, rgba(60, 242, 180, 0.09), transparent 60%),
    radial-gradient(80% 50% at 0% 100%, rgba(166, 140, 255, 0.1), transparent 60%),
    linear-gradient(180deg, rgba(10, 14, 22, 0.94), rgba(4, 6, 11, 0.97));
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  opacity: 0;
  translate: 0 -10px;
  transition: opacity 0.4s var(--ease-out), translate 0.6s var(--ease-out);
}
.site-header .mobile-drawer.open .drawer-sheet { opacity: 1; translate: none; }
.site-header .drawer-sheet:focus { outline: none; }
.site-header .drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
}
.site-header .drawer-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
}
.site-header .drawer-eyebrow-dim { color: var(--tx-3); }
.site-header .mobile-nav { display: flex; flex-direction: column; }
.site-header .mobile-nav-link {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-height: 58px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-1);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 0.9rem + 1.6vw, 1.55rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--tx-1);
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity 0.5s var(--ease-out),
    translate 0.7s var(--ease-out),
    color var(--dur-2) ease;
}
.site-header .mobile-drawer.open .mobile-nav-link {
  opacity: 1;
  translate: none;
  transition-delay: calc(var(--i, 0) * 45ms + 90ms), calc(var(--i, 0) * 45ms + 90ms), 0s;
}
.site-header .mnl-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--tx-3);
  transition: color var(--dur-2) ease;
}
.site-header .mobile-nav-link:hover .mnl-num { color: var(--tx-1); }
.site-header .mnl-arrow {
  width: 18px;
  height: 18px;
  color: var(--tx-3);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) ease;
}
.site-header .mobile-nav-link:hover .mnl-arrow,
.site-header .mobile-nav-link:focus-visible .mnl-arrow { color: var(--mint); transform: translate(2px, -2px); }
.site-header .mobile-nav-link.active .mnl-num { color: var(--mint); }
.site-header .mobile-nav-link.active .mnl-label {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-header .mobile-nav-link:focus-visible { outline-offset: -2px; }
.site-header .drawer-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin-top: auto;
  padding-top: 28px;
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.5s var(--ease-out) 0.4s, translate 0.7s var(--ease-out) 0.4s;
}
.site-header .mobile-drawer.open .drawer-actions { opacity: 1; translate: none; }
.site-header .drawer-actions .btn { --btn-h: 50px; justify-content: center; }
.site-header .drawer-actions .mobile-nav-evidence { grid-column: 1 / -1; justify-content: flex-start; padding-inline: 1.1rem; }
.site-header .drawer-actions .mobile-nav-evidence .i { color: var(--mint); }

/* --------------------------------------------------------------------------
   Header responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1379px) {
  .site-header .brand-url { display: none; }
  .site-header .nav-link { padding: 0 11px; }
}
@media (max-width: 1279px) {
  .site-header .nav-link { padding: 0 9px; font-size: 0.84rem; }
  .site-header .header-cta-long { display: none; }
  .site-header .header-cta-short { display: inline; }
  .site-header .header-inner { gap: 6px; }
}
@media (max-width: 1179px) {
  .site-header .header-inner { grid-template-columns: auto minmax(0, 1fr); }
  .site-header .nav { display: none; }
  .site-header .mobile-toggle { display: grid; }
  .site-header .header-action { grid-column: 2; }
  .site-header .header-cta-long { display: inline; }
  .site-header .header-cta-short { display: none; }
  .site-header .brand-url { display: block; }
}
@media (min-width: 641px) and (max-width: 1179px) {
  /* Floating glass panel that drops out of the pill, aligned to its right edge */
  .site-header .drawer-sheet {
    top: 88px;
    right: 16px;
    bottom: 16px;
    left: auto;
    width: min(460px, calc(100% - 32px));
    padding: 22px 22px 22px;
    border-radius: 28px;
    border: 1px solid var(--glass-border-hi);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 90px -30px rgba(0, 0, 0, 0.95);
    translate: 0 -12px;
    scale: 0.98;
    transform-origin: 100% 0;
    transition: opacity 0.4s var(--ease-out), translate 0.6s var(--ease-out), scale 0.6s var(--ease-out);
  }
  .site-header .mobile-drawer.open .drawer-sheet { scale: none; }
  .site-header .mobile-nav-link { min-height: 54px; font-size: 1.4rem; }
}
@media (max-width: 640px) {
  .site-header .brand-url { display: none; }
  .site-header #citations-btn,
  .site-header #shortcuts-btn { display: none; }
  .site-header .hdr-tools { padding-right: 4px; border-right: 0; }
  .site-header .header-cta-long { display: none; }
  .site-header .header-cta-short { display: inline; }
  .site-header .header-cta { padding: 0 0.9rem; }
  .site-header .hdr-icon::after { display: none; }
}
@media (max-width: 400px) {
  .site-header { padding-inline: 10px; padding-top: 10px; }
  .site-header .header-cta { display: none; }
  .site-header .drawer-sheet { padding-inline: 18px; }
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 7px 18px 7px 7px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tx-1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(10, 14, 22, 0.86);
  border: 1px solid var(--glass-border-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 28px) scale(0.94);
  transition: opacity 0.3s ease, transform 0.6s var(--ease-spring), visibility 0s linear 0.6s;
  pointer-events: none;
}
.toast:empty { display: none; }
.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 0.3s ease, transform 0.6s var(--ease-spring), visibility 0s;
}
.toast .toast-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  color: var(--mint);
  background: var(--mint-soft);
  border: 1px solid rgba(60, 242, 180, 0.3);
  box-shadow: 0 0 16px -4px rgba(60, 242, 180, 0.6);
}
.toast .toast-icon .i { width: 16px; height: 16px; stroke-width: 2.2; }
.toast .toast-msg { min-width: 0; }
@media (max-width: 640px) {
  .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   Back to top — glass orb with scroll-progress ring
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: calc(var(--z-header) - 1);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--tx-1);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.1), transparent 60%),
    rgba(9, 12, 20, 0.72);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 40px -14px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.86);
  transition: opacity 0.35s ease, transform 0.6s var(--ease-spring), visibility 0s linear 0.6s, box-shadow var(--dur-3) var(--ease-out);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s ease, transform 0.6s var(--ease-spring), visibility 0s, box-shadow var(--dur-3) var(--ease-out);
}
.back-to-top:not(.visible) { pointer-events: none; }
.back-to-top:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 40px -14px rgba(0, 0, 0, 0.85), 0 0 28px -6px rgba(60, 242, 180, 0.55); }
.back-to-top:focus-visible { border-radius: 50%; }
.back-to-top .btt-ring {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  transform: rotate(-90deg);
  overflow: visible;
}
.back-to-top .btt-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 2; }
.back-to-top .btt-progress {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 3px rgba(60, 242, 180, 0.7));
  transition: stroke-dashoffset 0.15s linear;
}
.back-to-top .btt-arrow {
  position: relative;
  width: 20px;
  height: 20px;
  stroke-width: 2;
  transition: transform var(--dur-2) var(--ease-out);
}
.back-to-top:hover .btt-arrow { transform: translateY(-3px); }
/* Narrow gutters (laptops below ~1400px, tablets, phones): a smaller orb tucked into the corner.
   The script also hides it whenever controls or values sit underneath. */
@media (max-width: 1400px) {
  .back-to-top {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
  }
  .back-to-top .btt-arrow { width: 18px; height: 18px; }
}
@media (pointer: coarse) {
  .back-to-top {
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Modals — shared shell
   -------------------------------------------------------------------------- */
.lb-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vw, 32px);
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(60, 242, 180, 0.05), transparent 70%),
    rgba(2, 4, 8, 0.66);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.45s;
}
.lb-modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s;
}
.lb-modal .citations-modal-window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  max-height: min(900px, calc(100dvh - 2 * clamp(10px, 3vw, 32px)));
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 40% at 0% 0%, rgba(60, 242, 180, 0.08), transparent 60%),
    radial-gradient(60% 40% at 100% 0%, rgba(166, 140, 255, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(19, 25, 39, 0.96), rgba(8, 11, 18, 0.98));
  border: 1px solid var(--glass-border-hi);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 60px 120px -30px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(18px) scale(0.965);
  transition: transform 0.6s var(--ease-out), opacity 0.35s ease;
}
.lb-modal.open .citations-modal-window { opacity: 1; transform: none; }
.lb-modal .modal-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 18px 22px;
  border-bottom: 1px solid var(--line-1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}
.lb-modal .modal-tile { width: 46px; height: 46px; }
.lb-modal .modal-title-stack { flex: 1; min-width: 0; }
.lb-modal .modal-badge {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.lb-modal .modal-title {
  margin-top: 5px;
  font-size: clamp(1.2rem, 0.95rem + 1vw, 1.7rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--tx-1);
}
.lb-modal .modal-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-right: 0.06em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lb-modal .modal-sub {
  max-width: 72ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tx-3);
}
.lb-modal .modal-close-btn {
  display: grid;
  place-items: center;
  align-self: flex-start;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  color: var(--tx-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-2);
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, transform var(--dur-3) var(--ease-out), border-color var(--dur-2) ease;
}
.lb-modal .modal-close-btn .i { width: 18px; height: 18px; stroke-width: 2; }
.lb-modal .modal-close-btn:hover { color: var(--tx-1); background: rgba(255, 255, 255, 0.1); border-color: var(--line-3); transform: rotate(90deg); }
.lb-modal .modal-close-btn:focus-visible { border-radius: 50%; }
.lb-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.lb-modal .modal-footer {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 18px 14px 22px;
  border-top: 1px solid var(--line-1);
  background: rgba(6, 9, 15, 0.72);
}
.lb-modal .footer-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--tx-3);
}
.lb-modal .footer-note .i { width: 15px; height: 15px; color: var(--mint); }

/* --------------------------------------------------------------------------
   Citations
   -------------------------------------------------------------------------- */
#citations-modal .modal-intro {
  max-width: 76ch;
  margin-bottom: 18px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--tx-2);
}
#citations-modal .citations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#citations-modal .citation-card {
  --cite-c: var(--mint);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 18px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--cite-c) 9%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-1);
  transition: border-color var(--dur-2) ease, transform var(--dur-3) var(--ease-out);
}
#citations-modal .citation-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cite-c) 80%, transparent), transparent 65%);
}
#citations-modal .citation-card:hover {
  border-color: color-mix(in srgb, var(--cite-c) 30%, transparent);
  transform: translateY(-2px);
}
#citations-modal .citation-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
#citations-modal .cite-journal {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--cite-c);
  background: color-mix(in srgb, var(--cite-c) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--cite-c) 32%, transparent);
  border-radius: var(--radius-pill);
}
#citations-modal .cite-year {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--tx-1);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
}
#citations-modal .cite-cohort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--tx-3);
}
#citations-modal .cite-cohort .i { width: 13px; height: 13px; }
#citations-modal .cite-title {
  margin-top: 4px;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--tx-1);
}
#citations-modal .cite-authors {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--tx-3);
}
#citations-modal .cite-summary {
  font-size: 0.88rem;
  line-height: 1.62;
  color: var(--tx-2);
}
#citations-modal .cite-key {
  padding: 0 2px;
  color: var(--tx-1);
  font-weight: 500;
  background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--cite-c) 30%, transparent) 60%);
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
#citations-modal .cite-link-row { margin-top: auto; padding-top: 6px; }
#citations-modal .cite-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 34px;
  padding: 4px 12px 4px 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--tx-2);
  background: rgba(3, 5, 9, 0.45);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  transition: color var(--dur-2) ease, border-color var(--dur-2) ease, background-color var(--dur-2) ease;
}
#citations-modal .cite-doi-tag {
  flex: none;
  padding: 4px 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #02130c;
  background: var(--mint);
  border-radius: var(--radius-pill);
}
#citations-modal .cite-link { border-radius: 18px; }
#citations-modal .cite-doi { min-width: 0; line-height: 1.4; overflow-wrap: break-word; }
#citations-modal .cite-link .i { width: 14px; height: 14px; flex: none; transition: transform var(--dur-2) var(--ease-out); }
#citations-modal .cite-link:hover { color: var(--tx-1); border-color: rgba(60, 242, 180, 0.45); background: rgba(60, 242, 180, 0.06); }
#citations-modal .cite-link:hover .i { transform: translate(2px, -2px); color: var(--mint); }

/* --------------------------------------------------------------------------
   Dossier — "My Longevity Report"
   -------------------------------------------------------------------------- */
#dossier-modal .dossier-window { width: min(1100px, 100%); }
#dossier-modal .dossier-masthead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--line-2);
}
#dossier-modal .dossier-brandline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
#dossier-modal .dossier-logo { width: 28px; height: 28px; }
#dossier-modal .dossier-brandname {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tx-1);
}
#dossier-modal .dossier-doc-tag {
  margin-left: auto;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
}
#dossier-modal .dossier-print-foot { display: none; }

/* KPI hero */
#dossier-modal .dossier-patient-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "age chrono date"
    "age pace pace";
  gap: 12px;
  margin-bottom: 12px;
}
#dossier-modal .dossier-meta-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-1);
  overflow: hidden;
}
#dossier-modal .dossier-meta-item:nth-child(2) { grid-area: chrono; }
#dossier-modal .dossier-kpi-date { grid-area: date; }
#dossier-modal .dossier-kpi-pace { grid-area: pace; }
#dossier-modal .dossier-kpi-age {
  grid-area: age;
  gap: 10px;
  padding: 22px 24px;
  background:
    radial-gradient(90% 90% at 0% 0%, rgba(60, 242, 180, 0.16), transparent 60%),
    radial-gradient(70% 80% at 100% 100%, rgba(56, 214, 245, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  border-color: rgba(60, 242, 180, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 50px -30px rgba(60, 242, 180, 0.45);
}
#dossier-modal .dossier-kpi-age.is-warn {
  background:
    radial-gradient(90% 90% at 0% 0%, rgba(255, 198, 92, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  border-color: rgba(255, 198, 92, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
#dossier-modal .dossier-meta-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--tx-3);
}
#dossier-modal .dossier-meta-label .i { width: 14px; height: 14px; }
#dossier-modal .dossier-meta-val {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--tx-1);
}
/* Secondary KPI tiles: label on top, figure anchored to the bottom (bento rhythm) */
#dossier-modal .dossier-meta-item:not(.dossier-kpi-age):not(.dossier-kpi-pace) { justify-content: space-between; gap: 14px; }
#dossier-modal .dossier-meta-item:not(.dossier-kpi-age) .dossier-meta-val {
  font-size: clamp(1.9rem, 1.5rem + 1vw, 2.45rem);
  letter-spacing: -0.045em;
}
#dossier-modal .dossier-meta-item.dossier-kpi-date .dossier-meta-val { font-size: clamp(1.3rem, 0.9rem + 1.2vw, 2rem); letter-spacing: -0.03em; white-space: nowrap; }
#dossier-modal .dossier-meta-val .dv-unit { font-size: 0.42em; margin-left: 3px; }
#dossier-modal .dossier-kpi-pace {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(56, 214, 245, 0.1), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
}
#dossier-modal .dossier-kpi-pace .dossier-meta-val {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin-top: 4px;
}
#dossier-modal .dv-unit {
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tx-3);
}
#dossier-modal .dossier-kpi-age .dossier-meta-val {
  font-size: clamp(3rem, 2.2rem + 3vw, 4.6rem);
  letter-spacing: -0.055em;
  line-height: 0.95;
}
#dossier-modal .dossier-kpi-age .dv-num {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(60, 242, 180, 0.25));
}
#dossier-modal .dossier-kpi-age.is-warn .dv-num { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; filter: none; }
#dossier-modal .dossier-kpi-age .dv-unit { font-size: 0.3em; margin-left: 4px; }
#dossier-modal .dossier-delta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 11px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--mint);
  background: var(--mint-soft);
  border: 1px solid rgba(60, 242, 180, 0.3);
  border-radius: var(--radius-pill);
}
#dossier-modal .dossier-delta.is-warn { color: var(--amber); background: var(--amber-soft); border-color: rgba(255, 198, 92, 0.3); }
#dossier-modal .dossier-agebars {
  display: grid;
  gap: 9px;
  margin-top: auto;
  padding-top: 10px;
}
#dossier-modal .agebar {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
#dossier-modal .agebar-name {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#dossier-modal .agebar-track {
  display: block;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
#dossier-modal .agebar-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-origin: 0 50%;
  transform: scaleX(0.8);
  transition: transform 1.2s var(--ease-out) 0.2s;
}
#dossier-modal .agebar-bio .agebar-fill { background: var(--grad-brand); box-shadow: 0 0 14px rgba(60, 242, 180, 0.5); }
#dossier-modal .is-warn .agebar-bio .agebar-fill { background: var(--grad-warm); box-shadow: none; }
#dossier-modal .agebar-chrono .agebar-fill { background: rgba(255, 255, 255, 0.3); transition-delay: 0.3s; }
#dossier-modal:not(.is-filled) .agebar-fill,
#dossier-modal:not(.is-filled) .dossier-meter-fill { transform: scaleX(0) !important; transition: none; }
#dossier-modal:not(.is-filled) .span-health { flex-basis: 0% !important; transition: none; }

#dossier-modal .dossier-status {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px 9px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  vertical-align: middle;
  border-radius: var(--radius-pill);
}
#dossier-modal .dossier-status.is-good { color: var(--mint); background: var(--mint-soft); border: 1px solid rgba(60, 242, 180, 0.28); }
#dossier-modal .dossier-status.is-warn { color: var(--amber); background: var(--amber-soft); border: 1px solid rgba(255, 198, 92, 0.3); }
#dossier-modal .pace-scale { margin-top: auto; padding-top: 14px; }
#dossier-modal .pace-track {
  position: relative;
  display: block;
  height: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(60, 242, 180, 0.7), rgba(56, 214, 245, 0.45) 48%, rgba(255, 198, 92, 0.55) 72%, rgba(255, 107, 107, 0.7));
}
#dossier-modal .pace-mid {
  position: absolute;
  left: 50%;
  top: -5px;
  bottom: -5px;
  width: 1.5px;
  background: rgba(255, 255, 255, 0.6);
}
#dossier-modal .pace-dot {
  position: absolute;
  top: 50%;
  left: 34%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid var(--ink-1);
  box-shadow: 0 0 0 2px var(--mint), 0 0 18px rgba(60, 242, 180, 0.8);
  transform: translate(-50%, -50%);
  transition: left 1s var(--ease-out) 0.25s;
}
#dossier-modal .pace-dot.is-warn { box-shadow: 0 0 0 2px var(--amber), 0 0 18px rgba(255, 198, 92, 0.8); }
#dossier-modal .pace-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-3);
}

/* Pillars */
#dossier-modal .dossier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#dossier-modal .dossier-card {
  --pc: var(--mint);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 70% at 100% 0%, color-mix(in srgb, var(--pc) 10%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-1);
}
#dossier-modal .dossier-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pc) 70%, transparent) 50%, transparent);
  opacity: 0.8;
}
#dossier-modal .dossier-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
#dossier-modal .dossier-card-head .icon-tile { width: 42px; height: 42px; border-radius: 13px; }
#dossier-modal .dossier-card-head .icon-tile .i { width: 20px; height: 20px; }
#dossier-modal .dossier-card-badge {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--pc);
}
#dossier-modal .dossier-card-title {
  display: block;
  margin-top: 3px;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--tx-1);
}
#dossier-modal .dossier-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line-1);
}
#dossier-modal .dossier-row-hero {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0 0 14px;
  border-top: 0;
}
#dossier-modal .dossier-metric-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--tx-3);
}
#dossier-modal .dossier-metric-kicker .i { width: 15px; height: 15px; color: var(--pc); }
#dossier-modal .dossier-row-hero .dossier-metric-kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#dossier-modal .dossier-metric-bold {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tx-1);
}
#dossier-modal .dossier-metric-bold.success { color: var(--mint); }
#dossier-modal .dossier-row-hero .dossier-metric-bold {
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-align: left;
}
#dossier-modal .dossier-row-hero .dv-unit { font-size: 0.4em; margin-left: 2px; }
#dossier-modal .dossier-metric-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
  color: var(--pc);
  background: color-mix(in srgb, var(--pc) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc) 30%, transparent);
  border-radius: var(--radius-pill);
}
/* Status pills follow the site's colour semantics (set by the dossier script) */
#dossier-modal .dossier-metric-pill.is-good { --pc: var(--mint); }
#dossier-modal .dossier-metric-pill.is-info { --pc: var(--sky); }
#dossier-modal .dossier-metric-pill.is-warn { --pc: var(--amber); }
#dossier-modal .dossier-metric-pill.is-risk { --pc: #ff8f8f; }
#dossier-modal .dossier-metric-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
#dossier-modal .dossier-card-row:has(.dossier-metric-pill) { flex-wrap: wrap; }
#dossier-modal .dossier-row-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
#dossier-modal .dossier-metric-text {
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--tx-1);
}
#dossier-modal .dossier-card-note {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--tx-3);
  border-top: 1px dashed var(--line-2);
}
#dossier-modal .dossier-reduc-row .dossier-metric-bold { text-align: left; font-size: 1.05rem; }
#dossier-modal .dossier-meter {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
#dossier-modal .dossier-meter-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-origin: 0 50%;
  transform: scaleX(0.3);
  background: linear-gradient(90deg, var(--mint), var(--cyan));
  transition: transform 1.1s var(--ease-out) 0.3s;
}
#dossier-modal .dossier-span-bar {
  display: flex;
  gap: 3px;
  height: 10px;
  margin: 0 0 14px;
}
#dossier-modal .span-health {
  flex: 0 0 94%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--mint), var(--cyan));
  box-shadow: 0 0 12px rgba(60, 242, 180, 0.35);
  transition: flex-basis 1.1s var(--ease-out) 0.25s;
}
#dossier-modal .span-morb,
#dossier-modal .key-morb {
  background: repeating-linear-gradient(135deg, rgba(166, 140, 255, 0.95) 0 3px, rgba(166, 140, 255, 0.35) 3px 6px);
}
#dossier-modal .span-morb { flex: 1 1 auto; min-width: 6px; border-radius: var(--radius-pill); }
#dossier-modal .key-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
#dossier-modal .key-health { background: var(--mint); }

/* Labs */
#dossier-modal .dossier-lab-section {
  margin-top: 12px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(3, 5, 9, 0.4);
  border: 1px solid var(--line-1);
}
#dossier-modal .dossier-lab-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
#dossier-modal .dossier-lab-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tx-1);
}
#dossier-modal .dossier-lab-title .i { width: 18px; height: 18px; color: var(--mint); }
#dossier-modal .dossier-lab-count {
  padding: 4px 11px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint);
  background: var(--mint-soft);
  border: 1px solid rgba(60, 242, 180, 0.25);
  border-radius: var(--radius-pill);
}
#dossier-modal .dossier-lab-count.is-empty { color: var(--tx-2); background: rgba(255, 255, 255, 0.04); border-color: var(--line-2); }
#dossier-modal .dossier-lab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#dossier-modal .dossier-lab-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  max-width: 100%;
  padding: 5px 12px 5px 8px;
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--tx-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
}
#dossier-modal .dossier-lab-chip .i { width: 16px; height: 16px; color: var(--sky); }
#dossier-modal .dossier-lab-chip.checked { border-color: rgba(60, 242, 180, 0.28); background: rgba(60, 242, 180, 0.05); }
#dossier-modal .dossier-lab-chip.checked .i {
  width: 20px;
  height: 20px;
  padding: 3px;
  stroke-width: 2.6;
  color: #02130c;
  background: var(--mint);
  border-radius: 50%;
}
#dossier-modal .lab-chip-name { color: var(--tx-1); font-weight: 500; }
#dossier-modal .lab-chip-target {
  padding-left: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mint);
  border-left: 1px solid var(--line-2);
}
#dossier-modal .dossier-footer-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------------------------------------------
   Shortcuts
   -------------------------------------------------------------------------- */
#shortcuts-modal .shortcuts-window { width: min(780px, 100%); }
#shortcuts-modal .modal-sub { margin-bottom: 16px; }
#shortcuts-modal .shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#shortcuts-modal .shortcut-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-1);
  transition: border-color var(--dur-2) ease;
}
#shortcuts-modal .shortcut-item:hover { border-color: var(--line-2); }
#shortcuts-modal .shortcut-item-wide {
  grid-column: 1 / -1;
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(60, 242, 180, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border-color: rgba(60, 242, 180, 0.18);
}
#shortcuts-modal .shortcut-keys {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-width: 6.4rem;
}
#shortcuts-modal .kbd-key {
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.55em;
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--line-3);
  border-bottom-width: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 14px -6px rgba(0, 0, 0, 0.8);
}
#shortcuts-modal .kbd-inline {
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.35em;
  font-size: 0.78em;
  border-bottom-width: 2px;
  border-radius: 6px;
  vertical-align: 0.05em;
}
#shortcuts-modal .kbd-sep {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--tx-3);
}
#shortcuts-modal .shortcut-desc {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--tx-2);
}

/* --------------------------------------------------------------------------
   Modal responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  #dossier-modal .dossier-patient-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "age age"
      "chrono date"
      "pace pace";
  }
  #dossier-modal .dossier-grid,
  #citations-modal .citations-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lb-modal { padding: 0; place-items: end center; }
  .lb-modal .citations-modal-window {
    max-height: calc(100dvh - 12px);
    border-radius: 26px 26px 0 0;
    border-bottom: 0;
    transform: translateY(40px);
  }
  .lb-modal .modal-header { padding: 16px 14px 14px 16px; gap: 12px; }
  .lb-modal .modal-tile { display: none; }
  .lb-modal .modal-body { padding: 16px; }
  .lb-modal .modal-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .lb-modal .footer-note { display: none; }
  .lb-modal .modal-footer > .btn,
  #dossier-modal .dossier-footer-btns { flex: 1 1 100%; }
  #dossier-modal .dossier-footer-btns .btn { flex: 1 1 auto; }
  #citations-modal .cite-cohort { margin-left: 0; }
  #shortcuts-modal .shortcuts-grid { grid-template-columns: minmax(0, 1fr); }
  #shortcuts-modal .shortcut-item { min-height: 0; }
  #dossier-modal .dossier-doc-tag { margin-left: 0; }
  #dossier-modal .dossier-kpi-age { padding: 18px; }
  #dossier-modal .agebar { grid-template-columns: 6.4rem minmax(0, 1fr); }
  #dossier-modal .dossier-card { padding: 18px 16px 16px; }
  #dossier-modal .dossier-lab-section { padding: 16px; }
}

/* Short viewports (phones in landscape): the whole window scrolls, with a slim sticky
   header so the close button stays in reach, instead of a fixed header and footer
   squeezing the body to a sliver. */
@media (max-height: 500px) {
  .lb-modal { padding: 8px; place-items: center; }
  .lb-modal .citations-modal-window {
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
    border-radius: 22px;
    border-bottom: 1px solid var(--glass-border-hi);
  }
  .lb-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    gap: 12px;
    padding: 8px 10px 8px 18px;
    background: linear-gradient(180deg, rgba(21, 27, 42, 0.98), rgba(15, 20, 32, 0.97));
    box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.9);
  }
  .lb-modal .modal-tile { display: none; }
  .lb-modal .modal-title { margin-top: 2px; font-size: 1.12rem; }
  .lb-modal .modal-close-btn { align-self: center; }
  .lb-modal .modal-body { flex: none; overflow: visible; min-height: auto; padding: 16px 18px; }
  .lb-modal .modal-footer { padding: 10px 14px 10px 18px; }
}

/* --------------------------------------------------------------------------
   Command palette
   -------------------------------------------------------------------------- */
.cmdk-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 10);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(12vh, 64px) 16px 16px;
  background: rgba(2, 4, 8, 0.58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.3s;
}
.cmdk-backdrop.open { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; }
.cmdk-backdrop .cmdk-window {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: min(580px, 76vh);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(60, 242, 180, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(21, 27, 43, 0.97), rgba(9, 12, 20, 0.98));
  border: 1px solid var(--glass-border-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 50px 110px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.5);
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.45s var(--ease-out);
}
.cmdk-backdrop.open .cmdk-window { transform: none; }
.cmdk-backdrop .cmdk-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 0 18px;
  border-bottom: 1px solid var(--line-1);
  transition: box-shadow var(--dur-2) ease;
}
.cmdk-backdrop .cmdk-search:focus-within { box-shadow: inset 0 -1px 0 rgba(60, 242, 180, 0.6); }
.cmdk-backdrop .cmdk-search > .i { width: 20px; height: 20px; color: var(--mint); }
.cmdk-backdrop input.cmdk-input,
.cmdk-backdrop input.cmdk-input:hover,
.cmdk-backdrop input.cmdk-input:focus-visible {
  flex: 1;
  min-width: 0;
  height: 62px;
  min-height: 62px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--tx-1);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
.cmdk-backdrop input.cmdk-input::placeholder { color: var(--tx-3); }
.cmdk-backdrop .cmdk-esc { font-size: 0.7rem; }
.cmdk-backdrop .cmdk-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 6px 8px 10px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.cmdk-backdrop .cmdk-group {
  padding: 12px 12px 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.cmdk-backdrop .cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 12px 6px 7px;
  border-radius: 13px;
  color: var(--tx-2);
  cursor: pointer;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.cmdk-backdrop .cmdk-item[aria-selected="true"] {
  color: var(--tx-1);
  background: linear-gradient(90deg, rgba(60, 242, 180, 0.13), rgba(56, 214, 245, 0.04));
  box-shadow: inset 0 0 0 1px rgba(60, 242, 180, 0.22);
}
.cmdk-backdrop .cmdk-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  color: var(--tx-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-1);
}
.cmdk-backdrop .cmdk-ico .i { width: 17px; height: 17px; }
.cmdk-backdrop .cmdk-item[aria-selected="true"] .cmdk-ico { color: var(--mint); border-color: rgba(60, 242, 180, 0.3); background: var(--mint-soft); }
.cmdk-backdrop .cmdk-label {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-backdrop .cmdk-hint { font-family: var(--font-mono); font-size: 0.72rem; color: var(--tx-3); }
.cmdk-backdrop .cmdk-item kbd { font-size: 0.7rem; }
.cmdk-backdrop .cmdk-go { display: grid; color: var(--mint); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease-out); }
.cmdk-backdrop .cmdk-go .i { width: 16px; height: 16px; }
.cmdk-backdrop .cmdk-item[aria-selected="true"] .cmdk-go { opacity: 1; transform: none; }
.cmdk-backdrop .cmdk-empty { padding: 32px 12px; text-align: center; color: var(--tx-3); }
.cmdk-backdrop .cmdk-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  font-size: 0.74rem;
  color: var(--tx-3);
  border-top: 1px solid var(--line-1);
  background: rgba(3, 5, 9, 0.4);
}
.cmdk-backdrop .cmdk-foot > span { display: inline-flex; align-items: center; gap: 4px; }
.cmdk-backdrop .cmdk-foot kbd { font-size: 0.68rem; margin-right: 2px; }
.cmdk-backdrop .cmdk-foot kbd .i { width: 11px; height: 11px; stroke-width: 2.2; }
.cmdk-backdrop .cmdk-down .i { transform: rotate(180deg); }
.cmdk-backdrop .cmdk-brand { margin-left: auto; font-weight: 600; color: var(--tx-2); }
@media (max-width: 640px) {
  .cmdk-backdrop { padding-top: 72px; }
  .cmdk-backdrop .cmdk-foot > span:not(.cmdk-brand) { display: none; }
}

/* --------------------------------------------------------------------------
   Footer — editorial
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(3rem, 6vw, 6rem);
  padding-top: clamp(3.5rem, 6vw, 6rem);
  background: linear-gradient(180deg, transparent 0%, rgba(6, 9, 15, 0.7) 30%, #030509 100%);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(var(--container), 100% - 2 * var(--gutter));
  height: 1px;
  transform: translateX(-50%);
  background: var(--grad-hairline);
}
.site-footer .footer-glow {
  position: absolute;
  left: 50%;
  bottom: -260px;
  z-index: -1;
  width: min(1200px, 140%);
  height: 560px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(45% 55% at 35% 55%, rgba(60, 242, 180, 0.16), transparent 70%),
    radial-gradient(45% 55% at 68% 50%, rgba(166, 140, 255, 0.16), transparent 70%);
  filter: blur(40px);
}
.site-footer .footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.site-footer .brand-footer {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.site-footer .brand-logo-frame-sm { width: 42px; height: 42px; }
.site-footer .brand-logo-img-sm { width: 28px; height: 28px; }
.site-footer .brand-name { font-size: 1.2rem; }
.site-footer .footer-tagline {
  max-width: 30ch;
  margin-top: 18px;
  font-size: 1.08rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--tx-2);
}
.site-footer .footer-tagline em {
  font-family: var(--font-serif);
  font-size: 1.12em;
  color: var(--tx-1);
}
.site-footer .footer-domain-badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 6px 14px 6px 12px;
  font-size: 0.78rem;
  color: var(--tx-3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
}
.site-footer .footer-domain-badge a {
  font-family: var(--font-mono);
  color: var(--tx-1);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
.site-footer .footer-domain-badge a:hover { color: var(--mint); }
.site-footer .footer-domain-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}
.site-footer .footer-col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.site-footer .footer-col-title .i { width: 14px; height: 14px; color: var(--mint); }
.site-footer .footer-links-list { display: grid; gap: 2px; list-style: none; }
.site-footer .footer-links-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  font-size: 0.93rem;
  color: var(--tx-2);
  transition: color var(--dur-2) ease;
}
.site-footer .footer-links-list a .i {
  width: 14px;
  height: 14px;
  color: var(--mint);
  opacity: 0;
  translate: -4px 3px;
  transition: opacity var(--dur-2) ease, translate var(--dur-2) var(--ease-out);
}
.site-footer .footer-links-list a:hover,
.site-footer .footer-links-list a:focus-visible { color: var(--tx-1); }
.site-footer .footer-links-list a:hover .i,
.site-footer .footer-links-list a:focus-visible .i { opacity: 1; translate: none; }
.site-footer .footer-refs li > span {
  display: block;
  padding: 6px 0 6px 12px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--tx-3);
  border-left: 1px solid var(--line-2);
}
.site-footer .footer-cite-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin-top: 16px;
  padding: 0 16px 0 14px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--mint);
  background: var(--mint-soft);
  border: 1px solid rgba(60, 242, 180, 0.3);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-2) ease, box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-2) ease;
}
.site-footer .footer-cite-btn .i { width: 16px; height: 16px; }
.site-footer .footer-cite-btn .footer-cite-arrow { transition: transform var(--dur-2) var(--ease-out); }
.site-footer .footer-cite-btn:hover {
  background: rgba(60, 242, 180, 0.18);
  border-color: rgba(60, 242, 180, 0.55);
  box-shadow: 0 10px 30px -12px rgba(60, 242, 180, 0.6);
}
.site-footer .footer-cite-btn:hover .footer-cite-arrow { transform: translateX(3px); }
.site-footer .disclaimer {
  padding: 16px 18px;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--tx-3);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-1);
  border-radius: 18px;
}
.site-footer .footer-wordmark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: clamp(3rem, 8vw, 7rem);
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 13.2vw, 11.9rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.065em;
  white-space: nowrap;
  padding-bottom: 0.12em;
  margin-bottom: -0.04em;
  user-select: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.55) 72%, rgba(0, 0, 0, 0.12) 100%);
  mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.55) 72%, rgba(0, 0, 0, 0.12) 100%);
}
.site-footer .fw-a {
  background: linear-gradient(180deg, rgba(244, 247, 251, 0.34), rgba(244, 247, 251, 0.08));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-footer .fw-b {
  padding: 0 0.08em 0 0.1em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-footer .footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 22px 0 calc(26px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-1);
}
.site-footer .copyright { font-size: 0.8rem; color: var(--tx-3); }
.site-footer .copyright a { display: inline-block; padding-block: 4px; color: var(--tx-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.site-footer .copyright a:hover { color: var(--mint); }
.site-footer .footer-kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--tx-3);
}
.site-footer .footer-kbd-hint kbd { font-size: 0.7rem; }
.site-footer .footer-kbd-hint span { margin: 0 12px 0 4px; }
.site-footer .footer-kbd-hint span:last-child { margin-right: 0; }
@media (hover: none), (max-width: 768px) {
  .site-footer .footer-kbd-hint { display: none; }
}
/* Keep the bottom bar clear of the floating back-to-top orb */
@media (max-width: 1420px) {
  .site-footer .footer-bottom { padding-right: 76px; }
}
@media (max-width: 1024px) {
  .site-footer .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .site-footer .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .site-footer .footer-links-list a { min-height: 40px; }
  .site-footer .footer-wordmark { font-size: 16vw; letter-spacing: -0.055em; }
  .site-footer .footer-bottom { padding-right: 0; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   Print — chrome is screen-only; the dossier prints as a clean document
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .toast,
  .back-to-top,
  .cmdk-backdrop,
  .lb-modal { display: none !important; }

  body.printing-dossier {
    position: static !important;
    top: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
    color: #111827 !important;
  }
  body.printing-dossier > *:not(#dossier-modal) { display: none !important; }
  body.printing-dossier #dossier-modal {
    position: static !important;
    display: block !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.printing-dossier #dossier-modal * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    border-color: #d1d5db !important;
  }
  body.printing-dossier #dossier-modal .citations-modal-window {
    display: block !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  body.printing-dossier #dossier-modal .modal-header {
    padding: 0 0 10pt !important;
    border-bottom: 2pt solid #111827 !important;
  }
  body.printing-dossier #dossier-modal .modal-title { font-size: 18pt !important; }
  body.printing-dossier #dossier-modal .modal-close-btn,
  body.printing-dossier #dossier-modal .modal-tile,
  body.printing-dossier #dossier-modal .modal-footer,
  body.printing-dossier #dossier-modal .icon-tile,
  body.printing-dossier #dossier-modal .pace-scale,
  body.printing-dossier #dossier-modal .key-dot,
  body.printing-dossier #dossier-modal .dossier-card::before,
  body.printing-dossier #dossier-modal .dossier-meter { display: none !important; }
  body.printing-dossier #dossier-modal .modal-body { padding: 12pt 0 0 !important; overflow: visible !important; }
  body.printing-dossier #dossier-modal .dossier-masthead { border-bottom: 1pt solid #d1d5db !important; }
  body.printing-dossier #dossier-modal .dossier-meta-item,
  body.printing-dossier #dossier-modal .dossier-card,
  body.printing-dossier #dossier-modal .dossier-lab-section {
    border: 1pt solid #d1d5db !important;
    border-radius: 8pt !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  body.printing-dossier #dossier-modal .dossier-patient-strip,
  body.printing-dossier #dossier-modal .dossier-grid { gap: 8pt !important; }
  body.printing-dossier #dossier-modal .dossier-kpi-age .dossier-meta-val { font-size: 30pt !important; }
  body.printing-dossier #dossier-modal .agebar-track,
  body.printing-dossier #dossier-modal .dossier-span-bar { border: 1pt solid #9ca3af !important; border-radius: 6pt !important; }
  body.printing-dossier #dossier-modal .agebar-fill,
  body.printing-dossier #dossier-modal .span-health {
    background: #374151 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    transform: none;
  }
  body.printing-dossier #dossier-modal .agebar-chrono .agebar-fill { background: #9ca3af !important; }
  body.printing-dossier #dossier-modal .dossier-lab-chip,
  body.printing-dossier #dossier-modal .dossier-metric-pill,
  body.printing-dossier #dossier-modal .dossier-status,
  body.printing-dossier #dossier-modal .dossier-delta,
  body.printing-dossier #dossier-modal .dossier-lab-count,
  body.printing-dossier #dossier-modal .dossier-doc-tag { border: 1pt solid #9ca3af !important; }
  body.printing-dossier #dossier-modal .dossier-lab-chip.checked .i { border: 1pt solid #111827 !important; }
  body.printing-dossier #dossier-modal .dossier-print-foot {
    display: block !important;
    margin-top: 12pt;
    padding-top: 8pt;
    font-size: 8pt;
    border-top: 1pt solid #d1d5db !important;
  }
}

/* Touch devices: the shortcuts dialog is keyboard-only, and header icons get a 44px hit area. */
@media (hover: none) and (pointer: coarse) {
  .site-header #shortcuts-btn { display: none; }
  .site-header .hdr-icon::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
}

/* ---- 10-hero.css ---- */
/* ==========================================================================
   HERO — luminous helix stage, kinetic headline, stat strip, scroll cue.
   OVERVIEW — bento index of the eight tools + evidence marquee.
   All selectors scoped under #hero / #overview.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero shell & background layers
   -------------------------------------------------------------------------- */
#hero {
  --hero-top: calc(var(--header-h) + clamp(16px, 3vh, 40px));
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--hero-top);
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
  overflow: clip;
}
#hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Fade every background layer out towards the bottom edge so the hero
     dissolves into the page aurora instead of ending in a hard seam. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
}
#hero #hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
#hero.hero-gl-ready #hero-canvas { opacity: 1; }

#hero .hero-gridlines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(60% 70% at 70% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 70% 45%, #000 0%, transparent 75%);
}
#hero .hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 5, 9, 0.78) 0%, rgba(3, 5, 9, 0.5) 32%, rgba(3, 5, 9, 0) 58%);
}

/* CSS-only fallback when WebGL is unavailable */
#hero .hero-fallback {
  display: none;
  position: absolute;
  top: 8%;
  bottom: 12%;
  right: 8%;
  width: 34%;
  background:
    radial-gradient(closest-side, rgba(60, 242, 180, 0.22), transparent 70%) 30% 30% / 70% 50% no-repeat,
    radial-gradient(closest-side, rgba(56, 214, 245, 0.2), transparent 70%) 70% 60% / 70% 50% no-repeat,
    radial-gradient(closest-side, rgba(166, 140, 255, 0.18), transparent 70%) 50% 90% / 80% 40% no-repeat,
    repeating-linear-gradient(160deg, rgba(60, 242, 180, 0.22) 0 2px, transparent 2px 22px);
  -webkit-mask-image: radial-gradient(40% 50% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(40% 50% at 50% 50%, #000 30%, transparent 100%);
  transform: rotate(-12deg);
}
#hero.hero-nogl .hero-fallback { display: block; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
#hero .hero-inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.75rem, 4vh, 3rem);
}
#hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
}

/* Eyebrow chip */
#hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 34px;
  padding: 0.4rem 0.95rem 0.4rem 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--tx-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--glass-highlight);
  animation: hero-fade-up 0.9s var(--ease-out) both;
}
#hero .eyebrow-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 12px var(--mint);
}
#hero .eyebrow-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--mint);
  opacity: 0;
  animation: hero-ping 2.6s var(--ease-out) infinite;
}
@keyframes hero-ping {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Headline */
#hero .hero-title {
  margin-top: clamp(1.1rem, 2.6vh, 1.75rem);
  /* 88px cap: each statement stays on one line inside the 920px column, so large
     desktops keep headline + CTAs + stat strip within the first screen. */
  font-size: min(var(--fs-hero), 5.7vw, 88px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.048em;
  color: var(--tx-1);
  text-wrap: balance;
}
#hero .hero-line { display: block; }
#hero .hero-line-2 { color: #dde3ee; }
#hero .hero-line-2:first-of-type,
#hero .hero-line + .hero-line-2 { margin-top: 0.06em; }
#hero .hw {
  display: inline-block;
  opacity: 0;
  translate: 0 0.42em;
  filter: blur(14px);
  animation: hero-word 1.15s var(--ease-out) forwards;
  animation-delay: calc(140ms + var(--i, 0) * 75ms);
}
#hero .hero-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  line-height: 0.9;
  letter-spacing: -0.02em;
  padding: 0 0.12em 0.06em 0;
  background: linear-gradient(100deg, #7dfad0 0%, #3cf2b4 22%, #38d6f5 55%, #a68cff 92%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    hero-word 1.15s var(--ease-out) forwards calc(140ms + var(--i, 0) * 75ms),
    hero-sheen 9s ease-in-out 1.6s infinite alternate;
}
@keyframes hero-word {
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}
@keyframes hero-sheen {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@keyframes hero-fade-up {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

#hero .hero-lead {
  max-width: 35em;
  margin-top: clamp(1.1rem, 2.6vh, 1.75rem);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--tx-2);
  animation: hero-fade-up 1s var(--ease-out) 0.85s both;
}

#hero .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3.4vh, 2.25rem);
  animation: hero-fade-up 1s var(--ease-out) 1s both;
}
#hero .hero-report-btn {
  color: var(--tx-2);
  border-color: transparent;
}
#hero .hero-report-btn:hover { color: var(--tx-1); }
#hero .hero-report-btn .i { color: var(--mint); }

/* --------------------------------------------------------------------------
   Stage (helix companion: halo, insight chips, vertical label)
   -------------------------------------------------------------------------- */
#hero .hero-stage {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: var(--gutter);
  width: 44%;
  pointer-events: none;
}
#hero .hero-halo {
  position: absolute;
  left: 62%;
  top: 44%;
  width: 520px;
  height: 520px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(56, 214, 245, 0.12), rgba(60, 242, 180, 0.05) 45%, transparent 72%);
  filter: blur(10px);
}
#hero .hero-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 212px;
  padding: 0.7rem 1.05rem 0.7rem 0.7rem;
  color: var(--tx-1);
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(24, 32, 51, 0.66) 0%, rgba(9, 13, 22, 0.58) 100%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-highlight), 0 24px 50px -26px rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  animation: hero-float 7s ease-in-out infinite alternate;
  transition:
    opacity 1s var(--ease-out) var(--cd, 0s),
    scale 1.1s var(--ease-out) var(--cd, 0s),
    border-color var(--dur-2) ease,
    box-shadow var(--dur-3) var(--ease-out);
}
html.js #hero:not(.hero-in) .hero-chip { opacity: 0; scale: 0.9; }
#hero .hero-stage:hover .hero-chip,
#hero .hero-stage:focus-within .hero-chip { animation-play-state: paused; }
#hero .hero-chip:hover,
#hero .hero-chip:focus-visible {
  border-color: rgba(60, 242, 180, 0.4);
  box-shadow: var(--glass-highlight), 0 0 0 4px rgba(60, 242, 180, 0.08), 0 24px 50px -22px rgba(60, 242, 180, 0.35);
}
#hero .hero-chip::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 44px;
  height: 1px;
  pointer-events: none;
}
#hero .hero-chip::after {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chip-c, var(--mint));
  box-shadow: 0 0 10px var(--chip-c, var(--mint));
  pointer-events: none;
}
#hero .hero-chip-a { top: 7%; right: 0; --cd: 1.1s; }
#hero .hero-chip-a::before { right: 100%; background: linear-gradient(270deg, rgba(60, 242, 180, 0.5), transparent); }
#hero .hero-chip-a::after { right: calc(100% + 44px); }
#hero .hero-chip-b { top: 46%; right: -1%; --chip-c: var(--violet); --cd: 1.3s; animation-delay: -2.5s; }
#hero .hero-chip-b::before { right: 100%; background: linear-gradient(270deg, rgba(166, 140, 255, 0.5), transparent); }
#hero .hero-chip-b::after { right: calc(100% + 44px); }
#hero .hero-chip-c { top: 66%; left: 18%; --chip-c: var(--coral); --cd: 1.5s; animation-delay: -4.5s; }
#hero .hero-chip-c::before { left: 100%; background: linear-gradient(90deg, rgba(255, 107, 107, 0.5), transparent); }
#hero .hero-chip-c::after { left: calc(100% + 44px); }

#hero .hero-chip-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  color: var(--mint);
  background: linear-gradient(160deg, rgba(60, 242, 180, 0.2), rgba(60, 242, 180, 0.04));
  border: 1px solid rgba(60, 242, 180, 0.24);
}
#hero .hero-chip-icon.is-violet { color: #c2b2ff; background: linear-gradient(160deg, rgba(166, 140, 255, 0.22), rgba(166, 140, 255, 0.04)); border-color: rgba(166, 140, 255, 0.28); }
#hero .hero-chip-icon.is-coral { color: #ff8f8f; background: linear-gradient(160deg, rgba(255, 107, 107, 0.22), rgba(255, 107, 107, 0.04)); border-color: rgba(255, 107, 107, 0.28); }
#hero .hero-chip-icon .i { width: 19px; height: 19px; }
#hero .hero-chip-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
#hero .hero-chip-k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#hero .hero-chip-k sub { font-size: 0.8em; vertical-align: -0.2em; line-height: 0; }
#hero .hero-chip-v {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#hero .hero-chip-v small {
  font-size: var(--fs-xs);
  font-weight: 450;
  letter-spacing: 0;
  color: var(--tx-2);
}
@keyframes hero-float {
  from { translate: 0 -6px; }
  to { translate: 0 6px; }
}

#hero .hero-stage-label {
  position: absolute;
  right: -0.4rem;
  bottom: 4%;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-3);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
#hero .hero-stage-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* --------------------------------------------------------------------------
   Stat strip
   -------------------------------------------------------------------------- */
#hero .trust-metrics-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  padding: 0.7rem 0.4rem;
  background: linear-gradient(180deg, rgba(22, 29, 46, 0.55) 0%, rgba(9, 13, 22, 0.45) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-highlight), var(--shadow-md);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  animation: hero-fade-up 1s var(--ease-out) 1.15s both;
}
#hero .trust-metrics-bar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--grad-hairline);
  pointer-events: none;
}
#hero .trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.35rem 1.4rem;
}
#hero .trust-item .icon-tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
#hero .trust-item .icon-tile .i { width: 19px; height: 19px; }
#hero .trust-text { display: flex; flex-direction: column; gap: 0.4rem; }
#hero .trust-figure {
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--tx-1);
}
#hero .trust-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-3);
  max-width: 19ch;
}
#hero .trust-sep {
  width: 1px;
  flex: none;
  background: linear-gradient(180deg, transparent, var(--line-2), transparent);
}

/* --------------------------------------------------------------------------
   Scroll cue
   -------------------------------------------------------------------------- */
#hero .hero-scroll {
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  bottom: clamp(1.75rem, 4vh, 2.75rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.35rem 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-3);
  animation: hero-fade-up 1s var(--ease-out) 1.5s both;
}
#hero .hero-scroll:hover { color: var(--tx-1); }
#hero .hero-scroll-track {
  position: relative;
  width: 22px;
  height: 36px;
  border: 1px solid var(--line-3);
  border-radius: 12px;
}
#hero .hero-scroll-thumb {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
  animation: hero-scroll 2.2s var(--ease-in-out) infinite;
}
@keyframes hero-scroll {
  0% { translate: 0 0; opacity: 0; }
  25% { opacity: 1; }
  80% { translate: 0 14px; opacity: 0; }
  100% { translate: 0 14px; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Overview (00)
   -------------------------------------------------------------------------- */
#overview {
  padding-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  overflow-x: clip;
}
#overview .ov-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 18% 38%, rgba(60, 242, 180, 0.06), transparent 70%),
    radial-gradient(34% 30% at 86% 64%, rgba(166, 140, 255, 0.07), transparent 70%);
}
#overview .ov-head { max-width: 820px; }

#overview .ov-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Last row (full-width lab tile) sizes to its content. */
  grid-template-rows: repeat(3, minmax(236px, auto)) auto;
  grid-auto-rows: minmax(236px, auto);
  grid-template-areas:
    "atlas atlas horse morb"
    "atlas atlas vo2   vo2"
    "apob  proto proto calc"
    "labs  labs  labs  labs";
  gap: 16px;
}
#overview .ov-atlas { grid-area: atlas; }
#overview .ov-horse { grid-area: horse; }
#overview .ov-morb { grid-area: morb; }
#overview .ov-vo2 { grid-area: vo2; }
#overview .ov-apob { grid-area: apob; }
#overview .ov-proto { grid-area: proto; }
#overview .ov-calc { grid-area: calc; }
#overview .ov-labs { grid-area: labs; }
#overview .ov-cell { min-width: 0; }

#overview .ov-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: 1.35rem;
  color: var(--tx-2);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-highlight), var(--shadow-sm);
  overflow: hidden;
  transition: translate var(--dur-3) var(--ease-out), border-color var(--dur-2) ease, background-color var(--dur-2) ease;
}
#overview .ov-tile:hover { translate: 0 -4px; border-color: var(--glass-border-hi); background-color: rgba(255, 255, 255, 0.02); }
#overview .ov-tile:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }

#overview .ov-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
#overview .ov-idx {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  color: var(--tx-3);
  transition: opacity var(--dur-2) ease, translate var(--dur-2) var(--ease-out);
}
#overview .ov-go {
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #02130c;
  background: var(--mint);
  border-radius: 50%;
  opacity: 0;
  scale: 0.6;
  transition: opacity var(--dur-2) ease, scale var(--dur-3) var(--ease-spring);
}
#overview .ov-go .i { width: 16px; height: 16px; }
#overview .ov-tile:hover .ov-go,
#overview .ov-tile:focus-visible .ov-go { opacity: 1; scale: 1; }
#overview .ov-tile:hover .ov-idx,
#overview .ov-tile:focus-visible .ov-idx { opacity: 0; translate: -8px 0; }

#overview .ov-copy {
  order: 3;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
#overview .ov-name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--tx-1);
}
#overview .ov-name sub { font-size: 0.7em; vertical-align: -0.15em; line-height: 0; }
#overview .ov-desc {
  max-width: 44ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--tx-2);
}

/* Visuals */
#overview .ov-viz {
  order: 2;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: visible;
}
#overview .ov-viz-wide { height: 92px; flex: 1 1 92px; }
#overview .ov-viz-ring { height: 104px; flex: 1 1 104px; }
#overview .ov-plot { position: relative; display: block; }
#overview .ov-plot svg { width: 100%; height: 100%; overflow: visible; }
#overview .ov-marker {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 6px rgba(60, 242, 180, 0.16), 0 0 16px rgba(60, 242, 180, 0.8);
  animation: ov-pulse 2.4s ease-in-out infinite;
}
@keyframes ov-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(60, 242, 180, 0.16), 0 0 16px rgba(60, 242, 180, 0.8); }
  50% { box-shadow: 0 0 0 10px rgba(60, 242, 180, 0.05), 0 0 22px rgba(60, 242, 180, 0.9); }
}
#overview .ov-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.8s var(--ease-out) 0.3s;
  filter: drop-shadow(0 0 6px rgba(60, 242, 180, 0.45));
}
html.js #overview .ov-cell:not(.is-visible) .ov-draw { stroke-dashoffset: 1; }

#overview .ov-atlas .ov-tile { padding: 1.75rem; }
#overview .ov-atlas .ov-viz { flex: 1 1 260px; height: 100%; max-height: 360px; }
#overview .ov-atlas .ov-name { font-size: var(--fs-h3); }
#overview .ov-atlas .ov-desc { font-size: 1rem; }
#overview .ov-body {
  fill: rgba(60, 242, 180, 0.045);
  stroke: url(#ovAtlasLine);
  stroke-width: 1.2;
  stroke-opacity: 0.55;
}
#overview .ov-organ-ticks path { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; stroke-dasharray: 2 3; }
#overview .ov-organ-labels text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--tx-3);
}
#overview .ov-tile:hover .ov-organ-labels text { fill: var(--tx-2); }
#overview .ov-ring-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.04em;
  fill: var(--tx-1);
}
#overview .ov-organ-nodes circle {
  fill: #0b0f18;
  stroke: var(--mint);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(60, 242, 180, 0.8));
}
#overview .ov-organ-nodes circle:nth-child(3n) { stroke: var(--cyan); }
#overview .ov-organ-nodes circle:nth-child(4n) { stroke: var(--violet); }
#overview .ov-scanline {
  opacity: 0.55;
  filter: drop-shadow(0 0 8px rgba(60, 242, 180, 0.9));
  animation: ov-scan 5.5s var(--ease-in-out) infinite alternate;
}
@keyframes ov-scan {
  from { transform: translateY(24px); }
  to { transform: translateY(276px); }
}
#overview .ov-rings { transform-origin: 160px 150px; animation: ov-spin 60s linear infinite; }
@keyframes ov-spin { to { transform: rotate(360deg); } }

#overview .ov-bars rect { fill: rgba(166, 140, 255, 0.35); }
#overview .ov-bars rect:nth-child(n+5) { fill: rgba(166, 140, 255, 0.55); }
#overview .ov-bars rect:nth-child(n+7) { fill: #a68cff; filter: drop-shadow(0 0 6px rgba(166, 140, 255, 0.6)); }

#overview .ov-hand { transform-origin: 70px 70px; animation: ov-spin 24s linear infinite; }
#overview .ov-needle {
  transform-origin: 100px 104px;
  transition: transform 1.2s var(--ease-spring);
}
#overview .ov-tile:hover .ov-needle { transform: rotate(-28deg); }

/* Horizontal tiles: index row spans the tile (index stays top-right like every
   other tile); copy on the left and the visual on the right share one centred row. */
#overview .ov-proto .ov-tile,
#overview .ov-labs .ov-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
}
#overview .ov-proto .ov-top,
#overview .ov-labs .ov-top { grid-column: 1 / -1; grid-row: 1; align-self: start; }
#overview .ov-proto .ov-copy,
#overview .ov-labs .ov-copy { grid-column: 1; grid-row: 2; }
#overview .ov-proto .ov-viz { grid-column: 2; grid-row: 2; width: 176px; height: 176px; flex: none; }
#overview .ov-labs .ov-tile { grid-template-columns: minmax(15rem, 1fr) minmax(0, max-content); }

#overview .ov-calc .ov-viz { flex: 1 1 140px; max-height: 190px; }
#overview .ov-calc .ov-tile { background: linear-gradient(180deg, rgba(255, 126, 182, 0.06), rgba(255, 255, 255, 0.015) 60%); }

#overview .ov-tests {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  max-width: 840px;
}
#overview .ov-test {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem 0.5rem 0.55rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tx-2);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
}
#overview .ov-test .i {
  width: 16px;
  height: 16px;
  padding: 2px;
  color: transparent;
  border: 1px solid var(--line-3);
  border-radius: 5px;
  stroke-width: 3;
}
#overview .ov-test.is-on { color: var(--tx-1); border-color: rgba(56, 214, 245, 0.25); background: rgba(56, 214, 245, 0.06); }
#overview .ov-test.is-on .i { color: #02130c; background: var(--cyan); border-color: var(--cyan); }

/* Evidence marquee */
#overview .ov-evidence { margin-top: clamp(4rem, 2.5rem + 4vw, 6.5rem); }
#overview .ov-evidence-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
#overview .ov-evidence-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
}
#overview .ov-evidence-label .i { width: 16px; height: 16px; }
#overview .ov-evidence-note { font-size: var(--fs-sm); color: var(--tx-3); }
#overview .ov-marquee {
  position: relative;
  margin-top: 1.25rem;
  padding-block: 1.1rem;
  overflow: hidden;
  border-block: 1px solid var(--line-1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
#overview .ov-marquee:focus-visible { outline-offset: -2px; border-radius: 0; }
#overview .ov-marquee-track {
  display: flex;
  width: max-content;
  animation: ov-marquee 70s linear infinite;
}
#overview .ov-marquee:hover .ov-marquee-track,
#overview .ov-marquee:focus-within .ov-marquee-track { animation-play-state: paused; }
#overview .ov-marquee-list {
  display: flex;
  flex: none;
  gap: 0.75rem;
  padding-right: 0.75rem;
}
@keyframes ov-marquee { to { transform: translateX(-50%); } }
#overview .ov-cite {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.8rem 0.7rem 1.3rem;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
}
#overview .ov-cite-j {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--tx-1);
}
#overview .ov-cite-a { font-size: var(--fs-sm); color: var(--tx-2); }
#overview .ov-cite-y {
  padding: 0.3rem 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--mint);
  background: var(--mint-soft);
  border-radius: var(--radius-pill);
}
#overview .ov-cite:not(:has(.ov-cite-y)) { padding-right: 1.3rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  #hero .hero-chip { min-width: 0; }
  #hero .hero-chip-c { left: -2%; }
  #hero .trust-item { padding-inline: 1rem; }
}

@media (max-width: 1024px) {
  #hero .hero-stage { width: 50%; opacity: 0.9; }
  #hero .hero-chip,
  #hero .hero-stage-label { display: none; }
  #hero #hero-canvas { opacity: 0; }
  #hero.hero-gl-ready #hero-canvas { opacity: 0.6; }
  #hero .hero-title { font-size: min(var(--fs-hero), 8.4vw); }
  #hero .hero-scrim {
    background:
      linear-gradient(90deg, rgba(3, 5, 9, 0.8) 0%, rgba(3, 5, 9, 0.35) 60%, rgba(3, 5, 9, 0.1) 100%);
  }
  #hero .hero-scroll { position: static; align-self: center; margin-top: 1.5rem; }
  #hero .trust-metrics-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }
  #hero .trust-sep { display: none; }
  #hero .trust-item { flex-direction: column; align-items: flex-start; gap: 0.7rem; }

  #overview .ov-labs .ov-tile { grid-template-columns: minmax(0, 1fr); row-gap: 1.1rem; }
  #overview .ov-labs .ov-copy { grid-row: 3; }
  #overview .ov-tests { grid-column: 1; grid-row: 2; justify-content: flex-start; max-width: none; }
  #overview .ov-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "atlas atlas"
      "horse morb"
      "vo2   vo2"
      "apob  calc"
      "proto proto"
      "labs  labs";
    grid-template-rows: none;
  }
  #overview .ov-atlas .ov-tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 1.5rem;
  }
  #overview .ov-atlas .ov-top { grid-column: 1 / -1; grid-row: 1; }
  #overview .ov-atlas .ov-copy { grid-column: 1; grid-row: 2; align-self: center; }
  #overview .ov-atlas .ov-viz { grid-column: 2; grid-row: 2; height: 260px; }
}

@media (max-width: 768px) {
  #hero {
    --hero-top: calc(var(--header-h) + 20px);
    min-height: auto;
  }
  #hero .hero-stage { width: 100%; right: 0; opacity: 0.8; }
  #hero .hero-halo { left: 70%; top: 32%; width: 380px; height: 380px; }
  #hero.hero-gl-ready #hero-canvas { opacity: 0.7; }
  #hero #hero-canvas {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 64%);
    mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 64%);
  }
  #hero .hero-scrim {
    background:
      linear-gradient(180deg, rgba(3, 5, 9, 0.2) 0%, rgba(3, 5, 9, 0.55) 45%, rgba(3, 5, 9, 0.85) 75%, rgba(3, 5, 9, 0.85) 100%),
      linear-gradient(90deg, rgba(3, 5, 9, 0.55), rgba(3, 5, 9, 0) 80%);
  }
  #hero .hero-gridlines {
    -webkit-mask-image: radial-gradient(80% 50% at 70% 25%, #000 0%, transparent 75%);
    mask-image: radial-gradient(80% 50% at 70% 25%, #000 0%, transparent 75%);
  }
  #hero .hero-inner { justify-content: flex-start; padding-top: clamp(1rem, 6vh, 3rem); }
  #hero .hero-title { font-size: var(--fs-hero); line-height: 0.98; }
  #hero .hero-lead { font-size: 1.02rem; }
  #hero .hero-buttons .btn { flex: 1 1 auto; }
  #hero .hero-buttons .btn-primary { flex-basis: 100%; }
  #hero .trust-metrics-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.5rem;
    border-radius: 20px;
  }
  #hero .trust-item { flex-direction: row; align-items: center; padding: 0.7rem; }

}

/* Phones: compact two-column index (icon, number, name). The decorative visuals,
   chips and arrow are hidden; descriptions stay in the link's accessible name. */
@media (max-width: 640px) {
  #overview { padding-top: 2.75rem; padding-bottom: 3rem; }
  #overview .ov-head { margin-bottom: 1.5rem; }
  #overview .ov-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-template-areas:
      "atlas horse"
      "morb  vo2"
      "apob  proto"
      "calc  labs";
    gap: 10px;
  }
  #overview .ov-tile,
  #overview .ov-atlas .ov-tile,
  #overview .ov-proto .ov-tile,
  #overview .ov-labs .ov-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.7rem;
    min-height: 104px;
    padding: 0.85rem 0.9rem 0.95rem;
    border-radius: var(--radius-md);
  }
  #overview .ov-tile:hover { translate: none; }
  #overview .ov-top,
  #overview .ov-proto .ov-top,
  #overview .ov-labs .ov-top { gap: 0.5rem; align-self: stretch; }
  #overview .ov-top .icon-tile { width: 34px; height: 34px; border-radius: 10px; }
  #overview .ov-top .icon-tile .i { width: 17px; height: 17px; }
  #overview .ov-viz,
  #overview .ov-tests,
  #overview .ov-go { display: none; }
  #overview .ov-tile:hover .ov-idx,
  #overview .ov-tile:focus-visible .ov-idx { opacity: 1; translate: none; }
  #overview .ov-copy,
  #overview .ov-atlas .ov-copy { order: 3; gap: 0; align-self: stretch; }
  #overview .ov-name,
  #overview .ov-atlas .ov-name { font-size: 1rem; line-height: 1.22; letter-spacing: -0.01em; }
  #overview .ov-desc {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  #overview .ov-evidence { margin-top: 2.25rem; }
  #overview .ov-evidence-note { font-size: var(--fs-xs); }
  #overview .ov-marquee { margin-top: 0.85rem; padding-block: 0.75rem; }
  #overview .ov-cite { padding: 0.5rem 0.65rem 0.5rem 1rem; gap: 0.65rem; }
  #overview .ov-cite-j { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  #hero .hero-eyebrow { letter-spacing: 0.1em; font-size: 0.7rem; }
  #hero .hero-buttons .btn-lg { --btn-h: 50px; padding-inline: 1.1rem; }
  #hero .trust-item { gap: 0.6rem; padding: 0.6rem 0.5rem; }
  #hero .trust-item .icon-tile { width: 34px; height: 34px; border-radius: 10px; }
  #hero .trust-figure { font-size: 1.5rem; }
  #hero .trust-label { font-size: 0.7rem; letter-spacing: 0.04em; }
}

/* --------------------------------------------------------------------------
   Reduced motion: final states, static marquee
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #hero .hw,
  #hero .hero-em,
  #hero .hero-chip,
  #hero .hero-eyebrow,
  #hero .hero-lead,
  #hero .hero-buttons,
  #hero .trust-metrics-bar,
  #hero .hero-scroll {
    animation: none;
    opacity: 1;
    translate: none;
    scale: none;
    filter: none;
  }
  #hero .hero-scroll-thumb { animation: none; opacity: 1; translate: 0 6px; }
  #hero .eyebrow-dot::after { animation: none; }
  #overview .ov-scanline { animation: none; transform: translateY(150px); }
  #overview .ov-rings,
  #overview .ov-hand { animation: none; }
  #overview .ov-marquee {
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: var(--gutter);
  }
  #overview .ov-marquee-track { animation: none; width: auto; max-width: var(--container); margin-inline: auto; }
  #overview .ov-marquee-list { flex-wrap: wrap; justify-content: center; flex: 1; padding-right: 0; }
  #overview .ov-marquee-dup { display: none; }
  #overview .ov-cite { white-space: normal; }
}
/* Phones + reduced motion: the static citation list becomes a swipeable rail
   (the region is focusable, so it also scrolls with the keyboard). */
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  #overview .ov-marquee { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  #overview .ov-marquee-track { max-width: none; width: max-content; margin-inline: 0; }
  #overview .ov-marquee-list { flex-wrap: nowrap; justify-content: flex-start; padding-right: var(--gutter); }
  #overview .ov-cite { white-space: nowrap; }
}

@media print {
  #hero .hero-bg,
  #hero .hero-stage,
  #hero .hero-scroll,
  #overview .ov-bg,
  #overview .ov-marquee-dup { display: none !important; }
  #overview .ov-draw { stroke-dashoffset: 0 !important; }
  #overview .ov-marquee { -webkit-mask-image: none; mask-image: none; }
  #overview .ov-marquee-track { animation: none !important; width: auto; }
  #overview .ov-marquee-list { flex-wrap: wrap; }
}

/* ---- 20-anatomy.css ---- */
/* ==========================================================================
   20 · ANATOMY — holographic body scanner + organ dossier
   Everything is scoped under #anatomy.
   ========================================================================== */

@property --cam {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

#anatomy {
  --anat-scan: #7ee8ff;
  --anat-hud: rgba(56, 214, 245, 0.55);
  --anat-panel-r: 28px;
  overflow-x: clip;
}

/* Ambient light ------------------------------------------------------------ */
#anatomy .anat-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
#anatomy .anat-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
#anatomy .anat-orb--a {
  top: 26%;
  left: -12%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(56, 214, 245, 0.16), transparent 65%);
}
#anatomy .anat-orb--b {
  right: -14%;
  bottom: 4%;
  width: 680px;
  height: 680px;
  background: radial-gradient(circle, rgba(166, 140, 255, 0.13), transparent 65%);
}

/* Head + goal filters ------------------------------------------------------ */
#anatomy .anat-head {
  margin-bottom: 2.25rem;
}
#anatomy .atlas-goal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: clamp(1.5rem, 1rem + 1.2vw, 2rem);
}
#anatomy .goal-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#anatomy .goal-filter-label .i {
  width: 14px;
  height: 14px;
  color: var(--mint);
}
#anatomy .anat-goal-set {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#anatomy .goal-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 34px;
  padding: 0 0.95rem;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--tx-2);
  border-radius: var(--radius-pill);
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
#anatomy .goal-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0.2);
  margin-left: -0.9rem;
  transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-spring), margin var(--dur-2) var(--ease-out);
}
#anatomy .goal-pill:hover {
  color: var(--tx-1);
  background: rgba(255, 255, 255, 0.05);
}
#anatomy .goal-pill.active {
  color: var(--tx-1);
  background: linear-gradient(180deg, rgba(60, 242, 180, 0.16), rgba(60, 242, 180, 0.06));
  box-shadow: inset 0 0 0 1px rgba(60, 242, 180, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 20px -10px rgba(60, 242, 180, 0.6);
}
#anatomy .goal-pill.active::before {
  opacity: 1;
  transform: none;
  margin-left: 0;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
}

/* Organ tabs: bento deck on desktop, snap rail below 1025px ---------------- */
#anatomy .anat-tabs-shell {
  position: relative;
  padding: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: var(--glass-highlight), var(--shadow-md);
}
#anatomy .anat-tab-rail {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(150px, 0.72fr);
  gap: 4px;
}
#anatomy .organ-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
#anatomy .anat-tab-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(60, 242, 180, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(60, 242, 180, 0.12), rgba(56, 214, 245, 0.05));
  border: 1px solid rgba(60, 242, 180, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 34px -14px rgba(60, 242, 180, 0.65);
  transition:
    transform 0.6s var(--ease-out),
    width 0.6s var(--ease-out),
    height 0.6s var(--ease-out),
    opacity var(--dur-2) ease;
}
#anatomy .anat-tab-indicator.is-on { opacity: 1; }

#anatomy .organ-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 60px;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  color: var(--tx-2);
  border-radius: 18px;
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, opacity var(--dur-2) ease;
}
#anatomy .organ-tab:hover { color: var(--tx-1); background: rgba(255, 255, 255, 0.035); }
#anatomy .organ-tab.active { color: var(--tx-1); background: transparent; }
#anatomy .organ-tab:focus-visible { outline-offset: -2px; border-radius: 18px; }
#anatomy .anat-tab-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  color: var(--tx-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-1);
  border-radius: 12px;
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, border-color var(--dur-2) ease, box-shadow var(--dur-3) var(--ease-out);
}
#anatomy .anat-tab-ico .i { width: 18px; height: 18px; }
#anatomy .organ-tab:hover .anat-tab-ico { color: var(--tx-1); border-color: var(--line-2); }
#anatomy .organ-tab.active .anat-tab-ico {
  color: var(--mint);
  background: linear-gradient(160deg, rgba(60, 242, 180, 0.22), rgba(60, 242, 180, 0.04));
  border-color: rgba(60, 242, 180, 0.4);
  box-shadow: 0 0 18px -4px rgba(60, 242, 180, 0.7);
}
#anatomy .anat-tab-label { flex: 1 1 auto; min-width: 0; }
#anatomy .organ-tab .key-badge {
  flex: none;
  margin-left: auto;
  color: var(--tx-3);
  transition: color var(--dur-2) ease, border-color var(--dur-2) ease;
}
#anatomy .organ-tab.active .key-badge {
  color: var(--mint);
  border-color: rgba(60, 242, 180, 0.4);
}
#anatomy .organ-tab.is-dimmed:not(.active) {
  opacity: 1 !important; /* JS writes 0.35 inline; keep the label readable (>= 4.5:1) */
  color: var(--tx-3);
}
#anatomy .organ-tab.is-dimmed:not(.active) .anat-tab-ico { border-style: dashed; opacity: 0.4; }
#anatomy .organ-tab.is-dimmed:not(.active) .key-badge { opacity: 0.45; }
#anatomy .organ-tab.is-dimmed:not(.active):hover { color: var(--tx-1); }

#anatomy .organ-tab.reset-tab {
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  text-align: center;
  color: var(--tx-2);
  border: 1px dashed var(--line-2);
  background: rgba(3, 5, 9, 0.25);
}
#anatomy .organ-tab.reset-tab .anat-tab-label { flex: none; }
#anatomy .organ-tab.reset-tab .key-badge { margin-left: 0; }
#anatomy .organ-tab.reset-tab:hover {
  color: var(--tx-1);
  border-color: rgba(60, 242, 180, 0.45);
  background: rgba(60, 242, 180, 0.05);
}
#anatomy .organ-tab.reset-tab:hover .anat-tab-ico .i { transform: rotate(-120deg); }
#anatomy .organ-tab.reset-tab .anat-tab-ico .i { transition: transform 0.6s var(--ease-out); }

/* Two-column stage ---------------------------------------------------------- */
#anatomy .anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(1.25rem, 2.2vw, 2rem);
  align-items: start;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

/* Viewer (holographic body scanner) ----------------------------------------- */
#anatomy .anatomy-viewer {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  padding: 8px;
  border-radius: var(--anat-panel-r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.3);
}
#anatomy .anat-stage {
  position: relative;
  border-radius: 21px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(56, 214, 245, 0.12);
}
#anatomy .model-viewport-box {
  position: relative;
  height: clamp(540px, calc(100vh - var(--header-h) - 120px), 780px);
  overflow: hidden;
  background:
    radial-gradient(60% 46% at 50% 40%, rgba(56, 214, 245, 0.10), transparent 70%),
    radial-gradient(90% 70% at 50% 42%, #1a2231 0%, #0c111b 55%, #05070c 100%);
}
#anatomy .anat-hud-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(126, 232, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 232, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(126, 232, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 232, 255, 0.035) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 48%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 48%, #000 30%, transparent 100%);
  mix-blend-mode: screen;
}

/* Camera track: JS writes transform + transformOrigin; --cam mirrors the scale */
#anatomy .model-camera-track {
  position: absolute;
  inset: 62px 12px 64px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
  transform-origin: 50% 50%;
  transition: transform 0.9s var(--ease-out), --cam 0.9s var(--ease-out);
  will-change: transform;
}
#anatomy .model-img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: brightness(0.9) contrast(1.1) saturate(1.06);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 5%, #000 84%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 5%, #000 84%, transparent 99%);
  mask-composite: intersect;
}

/* Cardiac beacon (heart sits at 52% / 29.8% of the image) */
#anatomy .cardiac-pulse-beacon {
  position: absolute;
  top: 29.8%;
  left: 52%;
  left: calc(50% + 1.12cqh);
  width: 64px;
  height: 64px;
  width: 9cqh;
  height: 9cqh;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 190, 190, 0.85) 0%, rgba(255, 107, 107, 0.45) 30%, rgba(255, 107, 107, 0.12) 52%, transparent 70%);
  box-shadow: 0 0 0 1px rgba(255, 143, 143, 0.35);
  mix-blend-mode: screen;
  transition: opacity 0.4s ease;
}
#anatomy .cardiac-pulse-beacon::before,
#anatomy .cardiac-pulse-beacon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 170, 170, 0.95);
  box-shadow: 0 0 14px rgba(255, 107, 107, 0.85), inset 0 0 10px rgba(255, 107, 107, 0.5);
  opacity: 0;
}
#anatomy .cardiac-pulse-beacon.active::before { animation: anat-ecg-ripple 1.25s var(--ease-out) infinite; }
#anatomy .cardiac-pulse-beacon.active::after { animation: anat-ecg-ripple 1.25s var(--ease-out) 0.19s infinite; }
@keyframes anat-ecg-ripple {
  0% { transform: scale(0.45); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
#anatomy .cardiac-pulse-beacon.active {
  opacity: 0.75;
  animation: anat-heartbeat 1.25s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}
@keyframes anat-heartbeat {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.35; }
  15% { transform: translate(-50%, -50%) scale(1.35); opacity: 0.95; }
  30% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.4; }
  45% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
  70% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.3; }
}

/* Pins. Sizes are authored in screen px; --pin-k undoes camera + viewBox scaling. */
#anatomy .pins-overlay {
  --pin-k: calc(1 / (var(--cam, 1) * var(--pin-base, 0.5)));
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#anatomy .pin {
  cursor: pointer;
  pointer-events: none;
  outline: none;
  transition: opacity var(--dur-3) var(--ease-out);
}
#anatomy .pin-line,
#anatomy .pin-ring,
#anatomy .pin-halo,
#anatomy .pin-dot,
#anatomy .pin-text { pointer-events: none; }
#anatomy .pin-chip { pointer-events: all; }
#anatomy .pin-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
  transform-box: fill-box;
  transform-origin: center;
  /* r=22 is a 44px target on screen; never wider than half the gap to the nearest pin */
  scale: min(var(--pin-k), calc(var(--pin-nn, 1) * 0.96));
}
#anatomy .pins-overlay.has-active .pin:not(.active) { opacity: 0.62; }
#anatomy .pins-overlay .pin.is-filtered-out:not(.active) { opacity: 0.22; }
#anatomy .pins-overlay .pin:hover,
#anatomy .pins-overlay .pin:focus-visible { opacity: 1; }

#anatomy .pin-dot,
#anatomy .pin-halo,
#anatomy .pin-ring {
  transform-box: fill-box;
  transform-origin: center;
  scale: var(--pin-k);
}
#anatomy .pin-label {
  scale: calc(var(--pin-k) * var(--pin-ui, 1));
  transition: opacity var(--dur-3) var(--ease-out);
}
#anatomy .pins-overlay.is-zoomed.has-active .pin:not(.active):not(:hover):not(:focus-visible) .pin-label,
#anatomy .pins-overlay.is-zoomed.has-active .pin:not(.active):not(:hover):not(:focus-visible) .pin-line { opacity: 0; }
#anatomy .pins-overlay.is-zoomed.has-active .pin:not(.active):not(:hover):not(:focus-visible) .pin-chip { pointer-events: none; }
#anatomy .pin-line {
  stroke: rgba(214, 236, 255, 0.34);
  stroke-width: calc(1.1px * var(--pin-k));
  stroke-dasharray: calc(3px * var(--pin-k)) calc(4px * var(--pin-k));
  transition: stroke var(--dur-2) ease, opacity var(--dur-3) var(--ease-out);
}
#anatomy .pin-halo {
  fill: rgba(60, 242, 180, 0.12);
  stroke: rgba(60, 242, 180, 0.55);
  stroke-width: 1.2;
  transition: fill var(--dur-2) ease, stroke var(--dur-2) ease;
}
#anatomy .pin-dot {
  fill: #dffff3;
  transition: fill var(--dur-2) ease;
}
#anatomy .pin-ring {
  fill: none;
  stroke: var(--mint);
  stroke-width: 1.4;
  opacity: 0;
}
#anatomy .pin-chip {
  fill: rgba(5, 8, 14, 0.78);
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
  transition: fill var(--dur-2) ease, stroke var(--dur-2) ease;
}
#anatomy .pin-text {
  fill: #dbe3ee;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: fill var(--dur-2) ease;
}
#anatomy .pin-text.left { text-anchor: end; }

#anatomy .pin:hover .pin-halo,
#anatomy .pin:focus-visible .pin-halo { fill: rgba(60, 242, 180, 0.28); stroke: #ffffff; }
#anatomy .pin:hover .pin-chip { stroke: rgba(255, 255, 255, 0.4); }
#anatomy .pin:focus-visible .pin-chip { stroke: var(--mint); stroke-width: 2; }
#anatomy .pin:hover .pin-text { fill: #ffffff; }

#anatomy .pin.active .pin-halo {
  fill: rgba(60, 242, 180, 0.3);
  stroke: #eafff7;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 6px rgba(60, 242, 180, 0.9));
}
#anatomy .pin.active .pin-dot { fill: #ffffff; }
#anatomy .pin.active .pin-line {
  stroke: var(--mint);
  stroke-dasharray: none;
  filter: drop-shadow(0 0 3px rgba(60, 242, 180, 0.8));
}
#anatomy .pin.active .pin-chip {
  fill: rgba(6, 40, 30, 0.9);
  stroke: var(--mint);
  filter: drop-shadow(0 0 8px rgba(60, 242, 180, 0.55));
}
#anatomy .pin.active .pin-text { fill: #eafff7; font-weight: 600; }
#anatomy .pin.active .pin-ring {
  animation: anat-pin-ring 2.4s var(--ease-out) infinite;
}
#anatomy .pin.active .pin-ring + .pin-halo + .pin-dot { animation: anat-pin-breathe 2.4s ease-in-out infinite; }
@keyframes anat-pin-ring {
  0% { transform: scale(1); opacity: 0.85; }
  70% { opacity: 0; }
  100% { transform: scale(3.1); opacity: 0; }
}
@keyframes anat-pin-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* HUD chrome ---------------------------------------------------------------- */
#anatomy .anat-hud {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
#anatomy .anat-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--anat-hud);
  filter: drop-shadow(0 0 4px rgba(56, 214, 245, 0.5));
}
#anatomy .anat-corner--tl { top: 62px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 6px; }
#anatomy .anat-corner--tr { top: 62px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; border-top-right-radius: 6px; }
#anatomy .anat-corner--bl { bottom: 66px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; border-bottom-left-radius: 6px; }
#anatomy .anat-corner--br { bottom: 66px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 6px; }
#anatomy .anat-ruler {
  position: absolute;
  top: 110px;
  bottom: 110px;
  right: 18px;
  width: 10px;
  background-image:
    repeating-linear-gradient(180deg, rgba(126, 232, 255, 0.5) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 12px);
  background-size: 10px 100%, 5px 100%;
  background-position: right top, right top;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
}
#anatomy .anat-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 46%, transparent 58%, rgba(3, 5, 9, 0.55) 100%),
    linear-gradient(180deg, rgba(3, 5, 9, 0.55) 0%, transparent 16%, transparent 88%, rgba(3, 5, 9, 0.5) 100%);
}
#anatomy .anat-scan {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  animation: anat-scan 7.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
#anatomy .anat-scan-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: -110px;
  height: 110px;
  background: linear-gradient(180deg, transparent 0%, rgba(56, 214, 245, 0.05) 55%, rgba(126, 232, 255, 0.2) 96%, rgba(210, 250, 255, 0.85) 100%);
  box-shadow: 0 1px 14px rgba(126, 232, 255, 0.55);
}
@keyframes anat-scan {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(calc(100% + 110px)); opacity: 0; }
}
#anatomy .model-viewport-box.is-offscreen .anat-scan,
#anatomy .model-viewport-box.is-offscreen .pin-ring,
#anatomy .model-viewport-box.is-offscreen .pin-dot,
#anatomy .model-viewport-box.is-offscreen .cardiac-pulse-beacon,
#anatomy .model-viewport-box.is-offscreen .cardiac-pulse-beacon::before,
#anatomy .model-viewport-box.is-offscreen .cardiac-pulse-beacon::after { animation-play-state: paused; }

#anatomy .anat-hud-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 0.95rem 0 0.9rem;
  background: rgba(8, 12, 20, 0.5);
  border: 1px solid rgba(56, 214, 245, 0.18);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#anatomy .anat-hud-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* HUD top bar: status readout + camera toolbar */
#anatomy .viewer-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  pointer-events: none;
}
#anatomy .viewer-top > * { pointer-events: auto; }
#anatomy .anat-status-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  justify-content: center;
}
#anatomy .viewer-status-group,
#anatomy .camera-controls {
  display: flex;
  align-items: center;
  min-height: 44px;
  background: rgba(8, 12, 20, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
#anatomy .viewer-status-group {
  min-width: 0;
  max-width: 100%;
  gap: 0.7rem;
  padding: 0 1.2rem 0 1rem;
}
#anatomy .status-indicator {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}
#anatomy .status-indicator::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--mint);
  opacity: 0;
  animation: anat-status-ping 2.2s var(--ease-out) infinite;
}
@keyframes anat-status-ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2); opacity: 0; }
}
#anatomy .viewer-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-1);
}
#anatomy .viewer-title.is-updating { animation: anat-type-in 0.5s var(--ease-out); }
@keyframes anat-type-in {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
#anatomy .camera-controls {
  flex: none;
  gap: 2px;
  padding: 3px;
}
#anatomy .cam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 36px;
  height: 36px;
  padding: 0;
  color: var(--tx-2);
  border-radius: var(--radius-pill);
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
#anatomy .cam-btn .i { width: 17px; height: 17px; }
#anatomy .cam-btn:hover { color: var(--tx-1); background: rgba(255, 255, 255, 0.09); }
#anatomy .cam-btn:active { transform: scale(0.92); }
#anatomy .cam-btn.cam-reset { padding: 0 0.8rem 0 0.65rem; }
#anatomy .cam-btn.cam-reset:hover { color: var(--mint); background: rgba(60, 242, 180, 0.1); }
#anatomy .anat-cam-reset-text {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#anatomy .anat-zoom-readout {
  min-width: 3.4rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}
#anatomy .anat-cam-sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--line-2);
}

#anatomy .viewer-bottom-bar {
  padding: 0.8rem 0.75rem 0.4rem;
}
#anatomy .viewer-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--tx-3);
  text-align: center;
}
#anatomy .viewer-hint > .i { width: 16px; height: 16px; color: var(--tx-3); }
#anatomy .viewer-hint strong { font-family: var(--font-mono); font-weight: 500; color: var(--tx-1); }
#anatomy .viewer-hint kbd { font-size: 0.75rem; }
#anatomy .anat-hint-touch { display: none; }

/* Organ dossier -------------------------------------------------------------- */
#anatomy .anat-dossier-col { min-width: 0; }
#anatomy .clinical-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.4rem, 1rem + 1.8vw, 2.5rem);
  border-radius: var(--anat-panel-r);
  background: linear-gradient(180deg, rgba(22, 29, 46, 0.72) 0%, rgba(10, 14, 22, 0.82) 100%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--shadow-lg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
#anatomy .clinical-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: var(--grad-hairline);
  pointer-events: none;
}
#anatomy .anat-card-glow {
  position: absolute;
  top: -180px;
  right: -140px;
  z-index: -1;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(60, 242, 180, 0.14), rgba(56, 214, 245, 0.05) 40%, transparent 68%);
}

#anatomy .card-head {
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line-1);
}
#anatomy .anat-card-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
#anatomy .anat-card-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  color: var(--mint);
  border-radius: 15px;
  background: linear-gradient(160deg, rgba(60, 242, 180, 0.22), rgba(60, 242, 180, 0.03));
  border: 1px solid rgba(60, 242, 180, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 30px -10px rgba(60, 242, 180, 0.6);
}
#anatomy .anat-card-icon .i { width: 23px; height: 23px; }
#anatomy .card-system {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
}
#anatomy .anat-card-index {
  margin-left: auto;
  flex: none;
  padding: 0.3rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
}
#anatomy .card-name {
  margin-top: 1.15rem;
  font-size: clamp(1.9rem, 1.15rem + 2vw, 2.85rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.038em;
  color: var(--tx-1);
}
#anatomy .card-summary {
  max-width: 54ch;
  margin-top: 0.75rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--tx-2);
}

/* Telemetry KPI tiles */
#anatomy .organ-telemetry-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 1.6rem;
}
#anatomy .telemetry-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  min-height: 118px;
  padding: 1rem 1.05rem 1.15rem;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#anatomy .telemetry-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-3);
  padding-right: 14px;
}
#anatomy .telemetry-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.55rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
  color: var(--tx-1);
}
#anatomy .anat-telem-spark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mint) 30%, transparent);
  opacity: 0.75;
}
#anatomy .telemetry-cell:nth-child(2) .anat-telem-spark { background: linear-gradient(90deg, transparent, var(--cyan) 50%, transparent); }
#anatomy .telemetry-cell:nth-child(3) .anat-telem-spark { background: linear-gradient(90deg, transparent, var(--violet) 70%, transparent); }
#anatomy .telemetry-cell::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
}
#anatomy .telemetry-cell:nth-child(2)::after { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
#anatomy .telemetry-cell:nth-child(3)::after { background: var(--violet); box-shadow: 0 0 8px var(--violet); }

/* Tissue inspector: 3-step timeline */
#anatomy .tissue-inspector-card {
  --st: var(--mint);
  --st-text: var(--mint);
  --st-soft: rgba(60, 242, 180, 0.1);
  --st-line: rgba(60, 242, 180, 0.3);
  --fill: 0;
  margin-top: 1.1rem;
  padding: 1.15rem 1.15rem 1.2rem;
  border-radius: 22px;
  background: rgba(3, 5, 9, 0.42);
  border: 1px solid var(--line-1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
#anatomy .tissue-inspector-card[data-state="aged"] {
  --st: var(--coral);
  --st-text: #ff8f8f;
  --st-soft: rgba(255, 107, 107, 0.1);
  --st-line: rgba(255, 107, 107, 0.34);
  --fill: 0.5;
}
#anatomy .tissue-inspector-card[data-state="optimized"] {
  --st: var(--sky);
  --st-text: #8dbcff;
  --st-soft: rgba(106, 168, 255, 0.1);
  --st-line: rgba(106, 168, 255, 0.36);
  --fill: 1;
}
#anatomy .tissue-inspector-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-2);
}
#anatomy .tissue-inspector-title .i { width: 15px; height: 15px; color: var(--cyan); }
#anatomy .tissue-state-buttons {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 1rem;
}
#anatomy .anat-steps-rail {
  position: absolute;
  top: 25px;
  left: 16.66%;
  right: 16.66%;
  height: 2px;
  border-radius: 2px;
  background: var(--line-2);
  overflow: hidden;
}
#anatomy .anat-steps-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--mint) 0%, var(--amber) 30%, var(--coral) 50%, var(--violet) 75%, var(--sky) 100%);
  transform-origin: 0 50%;
  transform: scaleX(var(--fill));
  transition: transform 0.7s var(--ease-out);
}
#anatomy .tissue-btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.3rem 0.25rem 0.45rem;
  text-align: center;
  color: var(--tx-3);
  border-radius: 14px;
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease;
}
#anatomy .tissue-btn:hover { color: var(--tx-1); background: rgba(255, 255, 255, 0.03); }
#anatomy .anat-step-node {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--tx-3);
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 5px rgba(3, 5, 9, 0.9);
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, border-color var(--dur-2) ease, box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-spring);
}
#anatomy .anat-step-node .i { width: 17px; height: 17px; }
#anatomy .tissue-btn:hover .anat-step-node { border-color: var(--line-3); color: var(--tx-1); }
#anatomy .tissue-btn.active .anat-step-node {
  color: var(--st-text);
  background: color-mix(in srgb, var(--st) 18%, var(--ink-2));
  border-color: var(--st);
  box-shadow: 0 0 0 5px rgba(3, 5, 9, 0.9), 0 0 22px -2px var(--st);
  transform: scale(1.08);
}
#anatomy .tissue-inspector-card[data-state="aged"] .tissue-btn[data-state="healthy"] .anat-step-node,
#anatomy .tissue-inspector-card[data-state="optimized"] .tissue-btn:not(.active) .anat-step-node {
  color: var(--tx-2);
  border-color: var(--line-3);
}
#anatomy .anat-step-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.2;
}
#anatomy .anat-step-age {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#anatomy .anat-step-name {
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--tx-2);
}
#anatomy .tissue-btn.active .anat-step-name { color: var(--tx-1); }
#anatomy .tissue-btn.active .anat-step-age { color: var(--st-text); }

#anatomy .tissue-state-box {
  margin-top: 1rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--st-soft), rgba(255, 255, 255, 0.01) 70%);
  border: 1px solid var(--st-line);
  transition: background-color var(--dur-3) ease, border-color var(--dur-3) ease;
}
#anatomy .tissue-state-box.is-updating { animation: anat-fade-up 0.45s var(--ease-out); }
#anatomy .tissue-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
}
#anatomy .tissue-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 26px;
  padding: 0.25rem 0.7rem 0.25rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  color: var(--mint);
  background: var(--mint-soft);
  border: 1px solid rgba(60, 242, 180, 0.32);
}
#anatomy .tissue-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
#anatomy .tissue-pill.pill-aged { color: #ff8f8f; background: var(--coral-soft); border-color: rgba(255, 107, 107, 0.34); }
#anatomy .tissue-pill.pill-optimized { color: #8dbcff; background: var(--sky-soft); border-color: rgba(106, 168, 255, 0.36); }
#anatomy .tissue-stage-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tx-1);
}
#anatomy .tissue-desc {
  margin-top: 0.65rem;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--tx-2);
}
@keyframes anat-fade-up {
  0% { opacity: 0.2; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}

/* Info blocks */
#anatomy .info-block {
  margin-top: 2rem;
}
#anatomy .info-block-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.95rem;
}
#anatomy .info-icon.icon-tile { width: 40px; height: 40px; border-radius: 13px; }
#anatomy .info-icon.icon-tile .i { width: 19px; height: 19px; }
#anatomy .info-title {
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tx-1);
}
#anatomy .anat-block--mechanism .info-text {
  position: relative;
  padding: 0.1rem 0 0.1rem 1.15rem;
  margin-left: calc(40px + 0.9rem - 1.15rem - 1px);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tx-2);
  border-left: 1px solid transparent;
  border-image: linear-gradient(180deg, var(--violet), rgba(166, 140, 255, 0.05)) 1;
}

#anatomy .biomarker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#anatomy .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 34px;
  padding: 0.4rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tx-1);
  background: linear-gradient(180deg, rgba(56, 214, 245, 0.09), rgba(56, 214, 245, 0.03));
  border: 1px solid rgba(56, 214, 245, 0.22);
  border-radius: 10px;
  transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease;
}
#anatomy .chip:hover { border-color: rgba(56, 214, 245, 0.5); }
#anatomy .chip-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

#anatomy .protocol-checklist {
  display: grid;
  gap: 8px;
  list-style: none;
}
#anatomy .protocol-checklist li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.95rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line-1);
  transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
#anatomy .protocol-checklist li:hover {
  border-color: rgba(60, 242, 180, 0.25);
  transform: translateX(2px);
}
#anatomy .anat-proto-check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 0.05rem;
  border-radius: 50%;
  color: var(--mint);
  background: var(--mint-soft);
  border: 1px solid rgba(60, 242, 180, 0.35);
  box-shadow: 0 0 16px -6px rgba(60, 242, 180, 0.8);
}
#anatomy .anat-proto-check .i { width: 14px; height: 14px; stroke-width: 2.5; }
#anatomy .anat-proto-body {
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--tx-2);
}
#anatomy .anat-proto-body strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tx-1);
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1180px) {
  #anatomy .organ-tab { gap: 0.6rem; padding: 0.55rem 0.6rem; font-size: 0.86rem; }
  #anatomy .anat-tab-ico { width: 32px; height: 32px; }
}

@media (max-width: 1024px) {
  #anatomy .anat-tabs-shell { padding: 5px; border-radius: 22px; }
  #anatomy .anat-tab-rail {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 8px;
    scrollbar-width: none;
    --fade-l: 0px;
    --fade-r: 0px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  }
  #anatomy .anat-tabs-shell.can-scroll-left .anat-tab-rail { --fade-l: 36px; }
  #anatomy .anat-tabs-shell.can-scroll-right .anat-tab-rail { --fade-r: 36px; }
  #anatomy .anat-tab-rail::-webkit-scrollbar { display: none; }
  #anatomy .organ-tabs {
    display: flex;
    flex: none;
    gap: 4px;
  }
  #anatomy .organ-tab {
    flex: none;
    min-height: 52px;
    padding: 0.4rem 0.75rem 0.4rem 0.45rem;
    scroll-snap-align: start;
    white-space: nowrap;
    border-radius: 17px;
  }
  #anatomy .organ-tab .key-badge { margin-left: 0.25rem; }
  #anatomy .organ-tab.reset-tab {
    flex-direction: row;
    gap: 0.6rem;
    text-align: left;
  }
  #anatomy .anat-tab-indicator { border-radius: 17px; }

}

@media (max-width: 1024px) and (min-width: 901px) {
  #anatomy .anatomy-grid { grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); gap: 1.1rem; }
  #anatomy .anatomy-viewer { padding: 6px; }
  #anatomy .model-camera-track { inset: 60px 6px 62px; }
  #anatomy .anat-hud-tag { display: none; }
  #anatomy .viewer-top { justify-content: center; }
  #anatomy .viewer-title { font-size: 0.75rem; letter-spacing: 0.06em; }
  #anatomy .clinical-card { padding: 1.5rem 1.35rem 1.6rem; }
  #anatomy .anat-card-index { display: none; }
  #anatomy .telemetry-cell { padding: 0.9rem 0.85rem 1rem; min-height: 108px; }
  #anatomy .telemetry-value { font-size: 1.12rem; }
  #anatomy .viewer-hint { font-size: 0.7rem; }
}

@media (max-width: 900px) {
  #anatomy .anatomy-grid { grid-template-columns: minmax(0, 1fr); }
  #anatomy .anatomy-viewer { position: relative; top: auto; }
  #anatomy .model-viewport-box {
    height: min(600px, calc(100vh - var(--header-h) - 40px));
    height: min(600px, calc(100dvh - var(--header-h) - 40px));
    min-height: 300px;
  }
}

@media (max-width: 768px) {
  #anatomy .atlas-goal-filters { flex-direction: column; align-items: stretch; gap: 0.6rem; min-width: 0; max-width: 100%; }
  #anatomy .anat-goal-set {
  position: relative;
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    border-radius: 18px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  #anatomy .anat-goal-set::-webkit-scrollbar { display: none; }
  #anatomy .goal-pill { flex: none; scroll-snap-align: start; min-height: 38px; border-radius: 14px; }
  #anatomy .goal-pill:last-child { margin-right: 2.5rem; }
  #anatomy .model-viewport-box {
    height: min(520px, calc(100vh - var(--header-h) - 40px));
    height: min(520px, calc(100dvh - var(--header-h) - 40px));
  }
  #anatomy .anat-block--mechanism .info-text { margin-left: 0; }
}

@media (max-width: 560px) {
  #anatomy .organ-telemetry-strip { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #anatomy .telemetry-cell {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
  }
  #anatomy .telemetry-label { flex: 1 1 40%; padding-right: 0; }
  #anatomy .telemetry-value { flex: 1 1 60%; text-align: right; font-size: 1.1rem; padding-right: 1rem; }
  #anatomy .telemetry-cell::after { top: 50%; right: 0.85rem; margin-top: -3px; }
  #anatomy .anat-telem-spark { display: none; }
}

@media (max-width: 480px) {
  #anatomy { --anat-panel-r: 24px; }
  #anatomy .model-viewport-box {
    height: min(460px, calc(100vh - var(--header-h) - 40px));
    height: min(460px, calc(100dvh - var(--header-h) - 40px));
  }
  #anatomy .model-camera-track { inset: 60px 6px 62px; }
  #anatomy .anat-corner--tl, #anatomy .anat-corner--tr { top: 60px; }
  #anatomy .anat-hud-tag { padding: 0 0.8rem; }
  #anatomy .anat-status-bar { left: 8px; right: 8px; bottom: 8px; }
  #anatomy .viewer-top { top: 8px; left: 8px; right: 8px; }
  #anatomy .viewer-title {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    line-height: 1.3;
    white-space: normal;
    text-wrap: balance;
    text-align: center;
    padding-block: 0.4rem;
  }
  #anatomy .anat-cam-reset-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #anatomy .cam-btn.cam-reset { padding: 0; }
  #anatomy .anat-zoom-readout { display: none; }
  #anatomy .anat-cam-sep { display: none; }
  #anatomy .anat-ruler { right: 12px; }
  #anatomy .clinical-card { padding: 1.35rem 1.1rem 1.4rem; }
  #anatomy .anat-card-index { display: none; }
  #anatomy .card-name { font-size: 1.85rem; }
  #anatomy .tissue-inspector-card { padding: 1rem 0.8rem; }
  #anatomy .anat-step-name { font-size: 0.8rem; }
  #anatomy .protocol-checklist li { grid-template-columns: 24px minmax(0, 1fr); gap: 0.75rem; padding: 0.9rem 0.9rem; }
  #anatomy .anat-proto-check { width: 24px; height: 24px; }
  #anatomy .anat-proto-body { font-size: 0.9rem; }
  #anatomy .viewer-hint { font-size: 0.72rem; justify-content: flex-start; align-items: flex-start; text-align: left; }
  #anatomy .viewer-hint > .i { margin-top: 0.15rem; }
}

/* Phones and touch screens: 12px pin labels, 44px filter pills */
@media (max-width: 900px), (pointer: coarse) {
  #anatomy .pins-overlay { --pin-ui: 1; }
  #anatomy .pin-text { font-size: 12px; }
  #anatomy .goal-pill { min-height: 44px; }
}

@media (pointer: coarse) {
  #anatomy .cam-btn { min-width: 44px; height: 44px; }
  #anatomy .camera-controls { min-height: 50px; }
  #anatomy .viewer-status-group { min-height: 50px; }
}

/* Touch-only devices: keyboard hints are replaced by touch guidance */
@media (hover: none) and (pointer: coarse) {
  #anatomy .anat-hint-keys { display: none; }
  #anatomy .anat-hint-touch { display: flex; }
  #anatomy .organ-tab .key-badge { display: none; }
}

/* Landscape phones: viewer and dossier side by side, viewer fits the screen height */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  #anatomy .anatomy-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; }
  #anatomy .anatomy-viewer { position: sticky; top: calc(var(--header-h) + 8px); padding: 6px; }
  #anatomy .anat-stage { border-radius: 18px; }
  #anatomy .model-viewport-box {
    height: calc(100vh - var(--header-h) - 28px);
    height: calc(100dvh - var(--header-h) - 28px);
    min-height: 260px;
  }
  #anatomy .viewer-bottom-bar { display: none; }
  #anatomy .anat-hud-tag { display: none; }
  #anatomy .viewer-top { top: 8px; left: auto; right: 8px; }
  #anatomy .camera-controls { flex-direction: column; min-height: 0; }
  #anatomy .anat-zoom-readout,
  #anatomy .anat-cam-sep { display: none; }
  #anatomy .anat-cam-reset-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #anatomy .cam-btn.cam-reset { padding: 0; }
  #anatomy .model-camera-track { inset: 10px 62px 58px 10px; }
  #anatomy .anat-corner--tl { top: 10px; left: 10px; }
  #anatomy .anat-corner--tr { top: 10px; right: 64px; }
  #anatomy .anat-corner--bl { bottom: 62px; left: 10px; }
  #anatomy .anat-corner--br { bottom: 62px; right: 64px; }
  #anatomy .anat-ruler { display: none; }
  #anatomy .anat-status-bar { left: 8px; right: 8px; bottom: 8px; }
  #anatomy .viewer-status-group { min-height: 44px; padding: 0 0.9rem 0 0.8rem; }
  #anatomy .viewer-title {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    line-height: 1.3;
    white-space: normal;
    text-wrap: balance;
    text-align: center;
    padding-block: 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #anatomy .model-camera-track { transition: none; }
  #anatomy .cardiac-pulse-beacon.active { animation: none; opacity: 0.75; }
  #anatomy .cardiac-pulse-beacon.active::before { animation: none; opacity: 0.8; transform: scale(1.1); }
  #anatomy .cardiac-pulse-beacon.active::after { animation: none; opacity: 0; }
}

@media print {
  #anatomy .anat-hud,
  #anatomy .anat-hud-grid,
  #anatomy .anat-ambient,
  #anatomy .anat-card-glow { display: none !important; }
}

/* ---- 30-horsemen.css ---- */
/* ==========================================================================
   02 — THE FOUR HORSEMEN (#four-horsemen)
   Bento: a lead tile with the luminous 80% ring + four disease tiles, each
   with its own colour identity, giant index numeral, spotlight and tilt.
   ========================================================================== */

#four-horsemen {
  overflow: clip;
}

/* ---- Ambient field ------------------------------------------------------ */
#four-horsemen .hm-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
#four-horsemen .hm-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
#four-horsemen .hm-orb--a {
  width: 560px; height: 460px;
  left: -140px; top: 32%;
  background: radial-gradient(circle, rgba(56, 214, 245, 0.22), transparent 66%);
}
#four-horsemen .hm-orb--b {
  width: 620px; height: 520px;
  right: -180px; bottom: -80px;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.14), rgba(166, 140, 255, 0.1) 45%, transparent 70%);
}
#four-horsemen .hm-field {
  position: absolute;
  inset: 22% 0 0 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 10%, transparent 75%);
}

/* ---- Colour identities -------------------------------------------------- */
#four-horsemen .hm--coral  { --hm-c: #ff6b6b; --hm-t: #ff8f8f; --hm-rgb: 255, 107, 107; }
#four-horsemen .hm--violet { --hm-c: #a68cff; --hm-t: #c2b2ff; --hm-rgb: 166, 140, 255; }
#four-horsemen .hm--sky    { --hm-c: #6aa8ff; --hm-t: #9cc4ff; --hm-rgb: 106, 168, 255; }
#four-horsemen .hm--amber  { --hm-c: #ffc65c; --hm-t: #ffd07a; --hm-rgb: 255, 198, 92; }

/* ---- Bento grid --------------------------------------------------------- */
#four-horsemen .hm-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.875rem, 0.5rem + 0.8vw, 1.25rem);
  perspective: 1400px;
}
#four-horsemen .hm-lead { grid-column: span 5; }
#four-horsemen .hm-tile { grid-column: span 4; }
#four-horsemen .hm-tile--wide { grid-column: span 7; }

/* ---- Lead tile ---------------------------------------------------------- */
#four-horsemen .hm-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(70% 46% at 50% 36%, rgba(56, 214, 245, 0.14), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, rgba(60, 242, 180, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(22, 29, 46, 0.92) 0%, rgba(9, 12, 20, 0.96) 100%);
  box-shadow: var(--glass-highlight), var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
}
#four-horsemen .hm-lead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 62%);
}
#four-horsemen .hm-lead::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(60, 242, 180, 0.5), rgba(56, 214, 245, 0.12) 30%, rgba(255, 255, 255, 0.03) 60%, rgba(166, 140, 255, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
#four-horsemen .hm-lead-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
}
#four-horsemen .hm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
}
#four-horsemen .hm-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}
#four-horsemen .hm-eyebrow--dim { color: var(--tx-3); }
#four-horsemen .hm-eyebrow--dim::before { display: none; }

/* Ring */
#four-horsemen .hm-ring {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin-inline: auto;
}
#four-horsemen .hm-ring-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
#four-horsemen .hm-ring-ticks {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 5;
  stroke-dasharray: 0.22 2.28;
}
#four-horsemen .hm-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 12;
}
#four-horsemen .hm-ring-arc,
#four-horsemen .hm-ring-bloom {
  fill: none;
  stroke: url(#hm-ring-grad);
  stroke-linecap: round;
  stroke-dasharray: 80 100;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.8s var(--ease-out) 0.25s;
}
#four-horsemen .hm-ring-arc { stroke-width: 12; }
#four-horsemen .hm-ring-bloom { stroke-width: 16; opacity: 0.6; }
#four-horsemen .hm-ring-head {
  transition: opacity 0.6s var(--ease-out) 1.6s;
}
html.js #four-horsemen .hm-lead:not(.is-visible) .hm-ring-arc,
html.js #four-horsemen .hm-lead:not(.is-visible) .hm-ring-bloom { stroke-dashoffset: 80; }
html.js #four-horsemen .hm-lead:not(.is-visible) .hm-ring-head { opacity: 0; }
#four-horsemen .hm-ring-inner {
  fill: rgba(3, 5, 9, 0.55);
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}
#four-horsemen .hm-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
}
#four-horsemen .hm-ring-value {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 2.6rem + 2.2vw, 4.6rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  padding-right: 0.04em;
  background: linear-gradient(180deg, #ffffff 20%, #a9f5ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(56, 214, 245, 0.35));
}
#four-horsemen .hm-ring-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-2);
}

#four-horsemen .hm-lead-frame {
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--tx-1);
  text-wrap: balance;
}
#four-horsemen .hm-lead-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tx-2);
}

/* Legend */
#four-horsemen .hm-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  margin-top: auto;
  border-top: 1px solid var(--line-1);
}
#four-horsemen .hm-legend-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.8rem 0.25rem 0.1rem 0;
  font-size: var(--fs-sm);
  color: var(--tx-2);
}
#four-horsemen .hm-legend-dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 3px;
  background: var(--hm-c);
  box-shadow: 0 0 10px rgba(var(--hm-rgb), 0.8);
}
#four-horsemen .hm-legend-name {
  min-width: 0;
  line-height: 1.3;
}
#four-horsemen .hm-legend-idx {
  margin-left: auto;
  padding-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--tx-3);
}

/* ---- Disease tiles ------------------------------------------------------ */
#four-horsemen .hm-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  min-width: 0;
  --hm-pad: clamp(1.4rem, 1rem + 1vw, 2rem);
  padding: var(--hm-pad);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(90deg, transparent 8%, rgba(var(--hm-rgb), 0.7) 50%, transparent 92%) top / 100% 1px no-repeat,
    radial-gradient(90% 60% at 100% 0%, rgba(var(--hm-rgb), 0.16), transparent 62%),
    radial-gradient(70% 50% at 0% 100%, rgba(var(--hm-rgb), 0.05), transparent 70%),
    linear-gradient(180deg, rgba(20, 26, 41, 0.9) 0%, rgba(9, 12, 20, 0.94) 100%);
  box-shadow: var(--glass-highlight), var(--shadow-md);
  overflow: hidden;
  transition-property: opacity, translate, filter, transform, border-color, box-shadow;
  transition-duration: 0.9s, 1s, 0.9s, 0.5s, 0.35s, 0.45s;
  transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms), calc(var(--d, 0) * 70ms), calc(var(--d, 0) * 70ms), 0s, 0s, 0s;
}
#four-horsemen .hm-tile.is-tilting {
  transition-duration: 0.9s, 1s, 0.9s, 0.12s, 0.35s, 0.45s;
}
#four-horsemen .hm-tile:hover,
#four-horsemen .hm-tile:focus-within {
  border-color: rgba(var(--hm-rgb), 0.32);
  box-shadow: var(--glass-highlight), 0 30px 70px -34px rgba(var(--hm-rgb), 0.55), var(--shadow-md);
}
#four-horsemen .hm-tile.spotlight::before {
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--hm-rgb), 0.13), transparent 45%);
}
#four-horsemen .hm-tile.spotlight::after {
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--hm-rgb), 0.85), rgba(var(--hm-rgb), 0.22) 32%, transparent 58%);
}

/* Giant index numeral */
#four-horsemen .hm-tile > .hm-index {
  position: absolute;
  z-index: 1;
  right: -0.04em;
  top: -0.04em;
  font-family: var(--font-display);
  font-size: clamp(6rem, 4.5rem + 3vw, 8rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  background: linear-gradient(195deg, rgba(var(--hm-rgb), 0.26) 0%, rgba(var(--hm-rgb), 0.1) 38%, rgba(var(--hm-rgb), 0) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  transition: translate 0.8s var(--ease-out), opacity 0.6s ease;
  opacity: 0.9;
}
#four-horsemen .hm-tile:hover > .hm-index {
  translate: -6px 4px;
  opacity: 1;
}

/* ECG trace (wide tile only, decorative) */
#four-horsemen .hm-tile > .hm-trace { display: none; }
#four-horsemen .hm-trace-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#four-horsemen .hm-trace-scan {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 28%;
  background: radial-gradient(closest-side, rgba(255, 143, 143, 0.32), rgba(255, 107, 107, 0.08) 55%, transparent);
  mix-blend-mode: screen;
  transform: translateX(-100%);
  animation: hm-scan 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}
@keyframes hm-scan {
  0% { transform: translateX(-100%); }
  70%, 100% { transform: translateX(360%); }
}
#four-horsemen .hm-trace path { fill: none; vector-effect: non-scaling-stroke; }
#four-horsemen .hm-trace-grid { stroke: rgba(255, 107, 107, 0.1); stroke-width: 1; stroke-dasharray: 2 6; }
#four-horsemen .hm-trace-line {
  stroke: url(#hm-trace-grad);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 107, 107, 0.7));
}

/* Top row: icon + category + rank chip */
#four-horsemen .horseman-top {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  justify-items: start;
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 0.4rem;
  padding-right: 4.5rem;
}
#four-horsemen .horseman-top > .hm-icon { grid-row: 1 / 3; }
#four-horsemen .horseman-top > .horseman-badge { align-self: end; }
#four-horsemen .horseman-top > .horseman-impact { align-self: start; }
#four-horsemen .hm-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 56px; height: 56px;
  border-radius: 15px;
  color: var(--hm-c);
  background: linear-gradient(160deg, rgba(var(--hm-rgb), 0.22), rgba(var(--hm-rgb), 0.04));
  border: 1px solid rgba(var(--hm-rgb), 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 26px -12px rgba(var(--hm-rgb), 0.7);
  transition: box-shadow var(--dur-3) var(--ease-out);
}
#four-horsemen .hm-icon .i {
  width: 26px; height: 26px;
  filter: drop-shadow(0 0 6px rgba(var(--hm-rgb), 0.55));
}
#four-horsemen .hm-tile:hover .hm-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 4px rgba(var(--hm-rgb), 0.08), 0 12px 32px -10px rgba(var(--hm-rgb), 0.9);
}
#four-horsemen .horseman-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hm-t);
}
#four-horsemen .horseman-impact {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 26px;
  padding: 0.28rem 0.7rem 0.28rem 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 550;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--hm-t);
  background: linear-gradient(rgba(var(--hm-rgb), 0.12), rgba(var(--hm-rgb), 0.12)), #0e1321;
  border: 1px solid rgba(var(--hm-rgb), 0.34);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#four-horsemen .hm-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hm-c);
  box-shadow: 0 0 8px var(--hm-c);
}

/* Title + copy */
#four-horsemen .hm-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1 1 auto;
}
#four-horsemen .horseman-title {
  max-width: 17ch;
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tx-1);
}
#four-horsemen .hm-abbr {
  display: inline-block;
  font-weight: 400;
  color: var(--tx-3);
}
#four-horsemen .horseman-desc {
  max-width: 52ch;
  font-size: 0.94rem;
  line-height: 1.66;
  color: var(--tx-2);
}

/* Data footer */
#four-horsemen .horseman-strategy {
  display: grid;
  margin-top: auto;
  border-radius: var(--radius-md);
  background: rgba(3, 5, 9, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
#four-horsemen .strategy-row {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1rem 0.9rem;
}
#four-horsemen .strategy-row + .strategy-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(90deg, rgba(60, 242, 180, 0.07), rgba(60, 242, 180, 0) 70%);
}
#four-horsemen .strat-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#four-horsemen .strat-label .i {
  width: 13px; height: 13px;
  color: var(--hm-t);
}
#four-horsemen .strategy-row + .strategy-row .strat-label .i { color: var(--mint); }
#four-horsemen .strat-val {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--tx-1);
}
#four-horsemen .strat-val.highlight {
  font-weight: 600;
  color: var(--mint);
  text-shadow: 0 0 18px rgba(60, 242, 180, 0.35);
}

/* Wide tile (ASCVD): numeral fills the open right field, data footer runs side by side */
@media (min-width: 1101px) {
  #four-horsemen .hm-tile--wide .horseman-title { max-width: 20ch; font-size: clamp(1.9rem, 1.3rem + 1vw, 2.35rem); }
  #four-horsemen .hm-tile--wide .horseman-desc { max-width: 36ch; }
  #four-horsemen .hm-tile--wide { gap: 1.1rem; }
  #four-horsemen .hm-tile--wide > .hm-index {
    top: 2.1rem;
    right: 1.5rem;
    font-size: 14.5rem;
  }
  #four-horsemen .hm-tile--wide .hm-body { flex: none; }
  #four-horsemen .hm-tile--wide > .hm-trace {
    display: block;
    position: relative;
    z-index: 1;
    order: 1;
    flex: 1 1 96px;
    min-height: 96px;
    max-height: 170px;
    margin-inline: calc(-1 * var(--hm-pad));
    overflow: hidden;
    pointer-events: none;
  }
  #four-horsemen .hm-tile--wide > .horseman-strategy { order: 2; }
  #four-horsemen .hm-tile--wide > .horseman-strategy { grid-template-columns: 1fr 1fr; }
  #four-horsemen .hm-tile--wide .strategy-row { padding: 1rem 1.25rem 1.1rem; }
  #four-horsemen .hm-tile--wide .strategy-row + .strategy-row { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.06); }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  #four-horsemen .hm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #four-horsemen .hm-lead,
  #four-horsemen .hm-tile--wide { grid-column: auto; }
  #four-horsemen .hm-tile { grid-column: auto; }
  #four-horsemen .hm-lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    row-gap: 1.25rem;
    align-items: center;
  }
  #four-horsemen .hm-lead-head { grid-column: 1 / -1; }
  #four-horsemen .hm-ring { grid-column: 1; grid-row: 2 / 4; }
  #four-horsemen .hm-lead-frame { grid-column: 2; grid-row: 2; align-self: end; }
  #four-horsemen .hm-legend { grid-column: 2; grid-row: 3; align-self: start; margin-top: 0; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  #four-horsemen .hm-legend-idx { display: none; }
  #four-horsemen .hm-legend-name { white-space: nowrap; }
}

@media (max-width: 640px) {
  #four-horsemen .hm-bento { grid-template-columns: minmax(0, 1fr); }
  #four-horsemen .hm-lead {
    display: flex;
    align-items: stretch;
    gap: 1.35rem;
  }
  #four-horsemen .hm-ring { width: min(100%, 250px); }
  #four-horsemen .hm-lead-frame { text-align: center; }
  #four-horsemen .hm-lead-frame,
  #four-horsemen .hm-legend { align-self: stretch; margin-top: 0; }
  #four-horsemen .hm-tile > .hm-index { font-size: 6.25rem; }
  #four-horsemen .hm-legend { grid-template-columns: 1fr; }
  #four-horsemen .horseman-title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  #four-horsemen .hm-ring-arc,
  #four-horsemen .hm-ring-bloom,
  #four-horsemen .hm-ring-head { transition: none; }
  #four-horsemen .hm-trace-scan { animation: none; opacity: 0; }
  html.js #four-horsemen .hm-lead:not(.is-visible) .hm-ring-arc,
  html.js #four-horsemen .hm-lead:not(.is-visible) .hm-ring-bloom { stroke-dashoffset: 0; }
  html.js #four-horsemen .hm-lead:not(.is-visible) .hm-ring-head { opacity: 1; }
}

@media print {
  #four-horsemen .hm-ambient { display: none; }
}

/* ---- 40-morbidity.css ---- */
/* ==========================================================================
   03 · Compression of Morbidity simulator (owner: morbidity)
   Everything is scoped under #morbidity-simulator.
   ========================================================================== */


/* Ambient light ------------------------------------------------------------ */
#morbidity-simulator .mb-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#morbidity-simulator .mb-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
#morbidity-simulator .mb-orb-a {
  width: 620px; height: 520px;
  right: -140px; top: 22%;
  background: radial-gradient(circle, rgba(56, 214, 245, 0.22), transparent 65%);
}
#morbidity-simulator .mb-orb-b {
  width: 520px; height: 520px;
  left: -180px; bottom: 4%;
  background: radial-gradient(circle, rgba(60, 242, 180, 0.16), transparent 65%);
}

/* Shared micro label -------------------------------------------------------- */
#morbidity-simulator .mb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#morbidity-simulator .mb-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
  animation: mb-pulse 2.4s ease-in-out infinite;
}
@keyframes mb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

/* Layout -------------------------------------------------------------------- */
#morbidity-simulator .morbidity-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: stretch;
}

/* Controls panel ------------------------------------------------------------ */
#morbidity-simulator .morbidity-controls-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(60, 242, 180, 0.07), transparent 60%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-highlight), var(--shadow-lg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
#morbidity-simulator .morbidity-controls-head {
  padding-bottom: 22px;
}
#morbidity-simulator .control-panel-title {
  margin-top: 0.7rem;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--tx-1);
}
#morbidity-simulator .control-panel-desc {
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--tx-2);
}

/* Presets: segmented control with a sliding pill */
#morbidity-simulator .morbidity-presets {
  display: grid;
  gap: 10px;
  padding: 16px 0 10px;
  border-top: 1px solid var(--line-1);
}
#morbidity-simulator .preset-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#morbidity-simulator .mb-preset-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
}
#morbidity-simulator .mb-preset-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #c2b2ff;
  background: rgba(166, 140, 255, 0.1);
  border: 1px solid rgba(166, 140, 255, 0.28);
  border-radius: var(--radius-pill);
}
#morbidity-simulator .mb-preset-state .i { width: 12px; height: 12px; }
#morbidity-simulator .mb-seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(3, 5, 9, 0.5);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
#morbidity-simulator .mb-seg-thumb {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  width: 0; height: 0;
  opacity: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(60, 242, 180, 0.2), rgba(56, 214, 245, 0.08));
  border: 1px solid rgba(60, 242, 180, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 24px -10px rgba(60, 242, 180, 0.55);
  transition: transform 0.55s var(--ease-out), width 0.55s var(--ease-out), height 0.55s var(--ease-out), opacity var(--dur-2) ease;
  pointer-events: none;
}
#morbidity-simulator .mb-seg .btn-preset {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0.45rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 550;
  line-height: 1.2;
  text-align: center;
  color: var(--tx-3);
  border-radius: 12px;
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, transform var(--dur-1) ease;
}
#morbidity-simulator .mb-seg .btn-preset:hover { color: var(--tx-1); background: rgba(255, 255, 255, 0.04); }
#morbidity-simulator .mb-seg .btn-preset:active { transform: scale(0.97); }
#morbidity-simulator .mb-seg .btn-preset.active { color: var(--tx-1); }
#morbidity-simulator .mb-seg.has-thumb .btn-preset.active {
  background: transparent;
  box-shadow: none;
}

/* Levers */
#morbidity-simulator .mb-levers {
  display: grid;
  flex: 1;
  align-content: space-between;
}
#morbidity-simulator .mb-lever {
  --lever-c: var(--mint);
  padding-block: 18px;
  border-bottom: 1px solid var(--line-1);
}
#morbidity-simulator .mb-lever:last-child { border-bottom: 0; padding-bottom: 4px; }
#morbidity-simulator .mb-lever .slider-labels {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
#morbidity-simulator .mb-lever-icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  color: var(--lever-c);
  background: linear-gradient(160deg, color-mix(in srgb, var(--lever-c) 20%, transparent), color-mix(in srgb, var(--lever-c) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--lever-c) 30%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px -12px var(--lever-c);
}
#morbidity-simulator .mb-lever-icon .i { width: 18px; height: 18px; }
#morbidity-simulator .mb-lever .slider-title {
  text-wrap: balance;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tx-1);
}
#morbidity-simulator .mb-lever .slider-display {
  min-width: 5.6rem;
  text-align: center;
  color: var(--tx-1);
  background: color-mix(in srgb, var(--lever-c) 10%, rgba(3, 5, 9, 0.6));
  border-color: color-mix(in srgb, var(--lever-c) 34%, transparent);
  border-radius: 10px;
}
#morbidity-simulator .mb-lever .clean-slider::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--lever-c) 45%, transparent), var(--lever-c)) 0 0 / var(--p) 100% no-repeat,
    rgba(255, 255, 255, 0.07);
}
#morbidity-simulator .mb-lever .clean-slider::-webkit-slider-thumb {
  border-color: var(--lever-c);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--lever-c) 12%, transparent), 0 4px 14px rgba(0, 0, 0, 0.55);
}
#morbidity-simulator .mb-lever .clean-slider:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--lever-c) 16%, transparent), 0 0 24px color-mix(in srgb, var(--lever-c) 50%, transparent);
}
#morbidity-simulator .mb-lever .clean-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #03050a, 0 0 0 5px var(--lever-c), 0 0 24px color-mix(in srgb, var(--lever-c) 50%, transparent);
}
#morbidity-simulator .mb-lever .clean-slider::-moz-range-progress { background: var(--lever-c); }
#morbidity-simulator .mb-lever .clean-slider::-moz-range-thumb { border-color: var(--lever-c); }
#morbidity-simulator .mb-lever .slider-note {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--tx-3);
}

/* Visual panel -------------------------------------------------------------- */
#morbidity-simulator .morbidity-visual-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-highlight), var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
#morbidity-simulator .morbidity-visual-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(60, 242, 180, 0.4), rgba(56, 214, 245, 0.08) 30%, rgba(255, 255, 255, 0.02) 60%, rgba(166, 140, 255, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* KPI bento */
#morbidity-simulator .morbidity-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
#morbidity-simulator .mb-kpi {
  --kpi-c: var(--tx-1);
  --kpi-glow: rgba(255, 255, 255, 0.0);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 18px 20px 18px;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--kpi-glow), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color var(--dur-3) ease, background-color var(--dur-3) ease;
}
#morbidity-simulator .mb-kpi::after {
  content: "";
  position: absolute;
  left: 20px; right: 20px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kpi-c), transparent);
  opacity: 0.7;
}
#morbidity-simulator .mb-kpi-life { --kpi-c: var(--violet); --kpi-glow: rgba(166, 140, 255, 0.14); }
#morbidity-simulator .mb-kpi-health { --kpi-c: var(--mint); --kpi-glow: rgba(60, 242, 180, 0.14); }
#morbidity-simulator .mb-kpi-health[data-status="warn"] { --kpi-c: var(--amber); --kpi-glow: rgba(255, 198, 92, 0.12); }
#morbidity-simulator .mb-kpi-health[data-status="risk"] { --kpi-c: var(--coral); --kpi-glow: rgba(255, 107, 107, 0.12); }
#morbidity-simulator .mb-kpi-health[data-status="warn"] .metric-value.success { color: var(--amber); text-shadow: 0 0 28px rgba(255, 198, 92, 0.3); }
#morbidity-simulator .mb-kpi-health[data-status="risk"] .metric-value.success { color: #ff8f8f; text-shadow: 0 0 28px rgba(255, 107, 107, 0.3); }
#morbidity-simulator .mb-kpi-morb[data-status="good"] { --kpi-c: var(--mint); --kpi-glow: rgba(60, 242, 180, 0.1); }
#morbidity-simulator .mb-kpi-morb[data-status="warn"] { --kpi-c: var(--amber); --kpi-glow: rgba(255, 198, 92, 0.14); border-color: rgba(255, 198, 92, 0.2); }
#morbidity-simulator .mb-kpi-morb[data-status="risk"] { --kpi-c: var(--coral); --kpi-glow: rgba(255, 107, 107, 0.18); border-color: rgba(255, 107, 107, 0.26); }

#morbidity-simulator .metric-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-2);
}
#morbidity-simulator .metric-label .i {
  width: 15px; height: 15px;
  color: var(--kpi-c);
}
#morbidity-simulator .metric-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.3rem + 1.9vw, 3.1rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tx-1);
}
#morbidity-simulator .metric-value.success {
  transition: color var(--dur-3) ease;
  color: var(--mint);
  text-shadow: 0 0 28px rgba(60, 242, 180, 0.35);
}
#morbidity-simulator .mb-kpi-morb .metric-value {
  color: var(--kpi-c);
  text-shadow: 0 0 28px color-mix(in srgb, var(--kpi-c) 35%, transparent);
  transition: color var(--dur-3) ease;
}
#morbidity-simulator .mb-kpi-morb[data-status="risk"] .metric-value { color: #ff8f8f; }
#morbidity-simulator .metric-value .mb-unit {
  margin-left: 0.08em;
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tx-3);
  text-shadow: none;
}
#morbidity-simulator .mb-kpi-foot {
  margin-top: auto;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--tx-3);
}
#morbidity-simulator .metric-sub {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0.25rem 0.65rem;
  font-size: var(--fs-xs);
  font-weight: 550;
  line-height: 1.15;
  color: var(--mint);
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: var(--radius-pill);
}
#morbidity-simulator .metric-sub::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* Chart instrument */
#morbidity-simulator .mb-chart-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 14px;
  border-radius: 22px;
  background:
    radial-gradient(90% 70% at 30% 0%, rgba(60, 242, 180, 0.05), transparent 70%),
    rgba(3, 5, 9, 0.55);
  border: 1px solid var(--line-1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
#morbidity-simulator .mb-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 22px;
}
#morbidity-simulator .mb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
}
#morbidity-simulator .mb-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  line-height: 1.2;
  color: var(--tx-2);
}
#morbidity-simulator .mb-legend-item.is-protocol { color: var(--tx-1); font-weight: 550; }
#morbidity-simulator .mb-swatch {
  width: 22px;
  height: 0;
  flex: none;
  border-top: 2px dashed currentColor;
}
#morbidity-simulator .is-protocol .mb-swatch {
  height: 3px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #5bf7c2, #38d6f5, #a68cff);
  box-shadow: 0 0 10px rgba(60, 242, 180, 0.6);
}
#morbidity-simulator .is-conventional .mb-swatch { border-top-color: #8591a7; border-top-style: dotted; }
#morbidity-simulator .is-untreated .mb-swatch { border-top-color: #ff6b6b; }
#morbidity-simulator .mb-legend-item.is-threshold { display: none; color: var(--amber); }
#morbidity-simulator .is-threshold .mb-swatch { border-top-color: var(--amber); }

#morbidity-simulator .morbidity-chart-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}
#morbidity-simulator .mb-plot {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 320px;
}
#morbidity-simulator #morbidity-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#morbidity-simulator #morbidity-svg line,
#morbidity-simulator #morbidity-svg path,
#morbidity-simulator #morbidity-svg rect {
  vector-effect: non-scaling-stroke;
}
#morbidity-simulator .mb-grid line {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}
#morbidity-simulator .mb-grid .mb-grid-v {
  stroke: rgba(255, 255, 255, 0.045);
  stroke-dasharray: 2 5;
}
#morbidity-simulator .mb-axis {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
}
#morbidity-simulator .mb-threshold {
  stroke: var(--amber);
  stroke-width: 1.5;
  stroke-dasharray: 7 6;
  opacity: 0.95;
}
#morbidity-simulator .mb-threshold-glow {
  stroke: var(--amber);
  stroke-width: 7;
  opacity: 0.16;
  filter: blur(3px);
}
#morbidity-simulator .mb-curve-untreated {
  stroke: #ff6b6b;
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  opacity: 0.6;
}
#morbidity-simulator .mb-curve-conventional {
  stroke: #8591a7;
  stroke-width: 1.5;
  stroke-dasharray: 2 4;
  stroke-linecap: round;
  opacity: 0.85;
}
#morbidity-simulator #curve-protocol {
  stroke-width: 3;
}
#morbidity-simulator .mb-curve-glow {
  stroke: url(#mb-grad-stroke);
  stroke-width: 12;
  stroke-linecap: round;
  opacity: 0.4;
  filter: blur(5px);
}
#morbidity-simulator .mb-band {
  opacity: 0.9;
}

/* Overlay labels (positioned in viewBox units via --x / --y) */
#morbidity-simulator .mb-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#morbidity-simulator .mb-ylab {
  position: absolute;
  left: 8px;
  top: calc((var(--y) - 20) / 260 * 100%);
  transform: translateY(calc(-100% - 4px));
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--tx-3);
}
#morbidity-simulator .mb-thresh-label {
  position: absolute;
  left: 8px;
  top: calc((var(--y) - 20) / 260 * 100%);
  max-width: calc(100% - 16px);
  transform: translateY(8px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  font-size: 0.72rem;
  font-weight: 550;
  line-height: 1.2;
  color: var(--amber);
  background: rgba(10, 9, 6, 0.82);
  border: 1px solid rgba(255, 198, 92, 0.34);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 22px -6px rgba(255, 198, 92, 0.45);
}
#morbidity-simulator .mb-thresh-val {
  flex: none;
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: #1a1204;
  background: var(--amber);
  border-radius: var(--radius-pill);
}

/* Morbidity window bracket on the age axis */
#morbidity-simulator .mb-window {
  position: absolute;
  left: calc((var(--x1) - 50) / 520 * 100%);
  width: calc((var(--x2) - var(--x1)) / 520 * 100%);
  top: calc(250 / 260 * 100%);
  height: 3px;
  margin-top: -1px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--amber), var(--coral));
  box-shadow: 0 0 12px rgba(255, 107, 107, 0.7);
  opacity: 0;
  transition: opacity 0.5s ease;
}
#morbidity-simulator .mb-window::before,
#morbidity-simulator .mb-window::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px;
  height: 9px;
  background: currentColor;
}
#morbidity-simulator .mb-window::before { left: 0; color: var(--amber); }
#morbidity-simulator .mb-window::after { right: 0; color: var(--coral); }
#morbidity-simulator.mb-drawn .mb-window,
#morbidity-simulator:not(.mb-armed) .mb-window { opacity: 1; }

/* Live markers */
#morbidity-simulator .mb-marker {
  position: absolute;
  left: calc((var(--x) - 50) / 520 * 100%);
  top: calc((var(--y) - 20) / 260 * 100%);
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 198, 92, 0.18), 0 0 18px rgba(255, 198, 92, 0.7);
  opacity: 0;
  transition: opacity 0.5s ease;
}
#morbidity-simulator .mb-marker::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 198, 92, 0.6);
  animation: mb-halo 2.2s var(--ease-out) infinite;
}
#morbidity-simulator .mb-marker-end {
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--violet);
  border: 2px solid #0b0f18;
  box-shadow: 0 0 0 3px rgba(166, 140, 255, 0.3), 0 0 14px rgba(166, 140, 255, 0.8);
}
#morbidity-simulator .mb-marker-end::after { display: none; }
@keyframes mb-halo {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}
#morbidity-simulator .mb-marker-tag {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--tx-1);
  background: rgba(11, 15, 24, 0.9);
  border: 1px solid var(--line-2);
  border-radius: 8px;
}
#morbidity-simulator.mb-drawn .mb-marker,
#morbidity-simulator:not(.mb-armed) .mb-marker { opacity: 1; }

/* X axis */
#morbidity-simulator .mb-xaxis {
  position: relative;
  height: 28px;
}
#morbidity-simulator .mb-xaxis span {
  position: absolute;
  left: calc((var(--x) - 50) / 520 * 100%);
  top: 10px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--tx-3);
}
#morbidity-simulator .mb-xaxis span:first-child { transform: none; }
#morbidity-simulator .mb-xaxis span:last-child { transform: translateX(-100%); }

/* Insight callout */
#morbidity-simulator .morbidity-insight {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 22px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(166, 140, 255, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(166, 140, 255, 0.22);
}
#morbidity-simulator .mb-insight-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  color: #c2b2ff;
  background: linear-gradient(160deg, rgba(166, 140, 255, 0.24), rgba(166, 140, 255, 0.04));
  border: 1px solid rgba(166, 140, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 26px -12px rgba(166, 140, 255, 0.8);
}
#morbidity-simulator .mb-insight-icon .i { width: 20px; height: 20px; }
#morbidity-simulator .mb-insight-body { min-width: 0; }
#morbidity-simulator .insight-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #c2b2ff;
}
#morbidity-simulator .insight-copy {
  margin-top: 6px;
  text-wrap: pretty;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tx-2);
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1180px) {
  #morbidity-simulator .metric-value { font-size: clamp(1.9rem, 1rem + 1.7vw, 2.5rem); }
}
@media (max-width: 1080px) {
  #morbidity-simulator .morbidity-grid { grid-template-columns: minmax(0, 1fr); }
  #morbidity-simulator .mb-plot { flex: none; min-height: 0; aspect-ratio: 2 / 1; }
  #morbidity-simulator .mb-levers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
  #morbidity-simulator .mb-lever:nth-last-child(2) { border-bottom: 0; padding-bottom: 4px; }
  #morbidity-simulator .morbidity-presets {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }
  #morbidity-simulator .metric-value { font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3rem); }
}
@media (max-width: 768px) {
  #morbidity-simulator .morbidity-controls-card { padding: 22px; border-radius: var(--radius-lg); }
  #morbidity-simulator .morbidity-visual-card { padding: 12px; border-radius: var(--radius-lg); }
  #morbidity-simulator .mb-levers { grid-template-columns: minmax(0, 1fr); }
  #morbidity-simulator .mb-lever:nth-last-child(2) { border-bottom: 1px solid var(--line-1); padding-bottom: 18px; }
  #morbidity-simulator .morbidity-presets { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #morbidity-simulator .mb-plot { aspect-ratio: 1.6 / 1; }
}
@media (max-width: 640px) {
  #morbidity-simulator .morbidity-metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #morbidity-simulator .mb-kpi-morb { grid-column: 1 / -1; }
  #morbidity-simulator .mb-kpi { padding: 16px; border-radius: 16px; }
  #morbidity-simulator .metric-value { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.2rem); }
  #morbidity-simulator .mb-kpi-morb .metric-value { font-size: 2.4rem; }
  #morbidity-simulator .mb-kpi-morb {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 12px;
  }
  #morbidity-simulator .mb-kpi-morb .metric-label { grid-column: 1 / -1; }
  #morbidity-simulator .mb-kpi-morb .metric-sub { align-self: end; margin-bottom: 2px; }
  #morbidity-simulator .morbidity-visual-card { padding: 8px; gap: 8px; }
  #morbidity-simulator .mb-chart-card { padding: 18px 14px 8px; border-radius: 18px; }
  #morbidity-simulator .mb-chart-head { margin-bottom: 18px; }
  #morbidity-simulator .mb-legend { flex-direction: column; gap: 9px; }
  #morbidity-simulator .mb-legend-item.is-threshold { display: inline-flex; }
  #morbidity-simulator .mb-legend-item.is-threshold .mb-thresh-val { padding: 2px 6px; font-size: 0.62rem; }
  #morbidity-simulator .mb-thresh-label {
    left: auto;
    right: 4px;
    padding: 0;
    gap: 0;
    font-size: 0;
    background: none;
    border: 0;
    box-shadow: 0 0 16px -2px rgba(255, 198, 92, 0.55);
    border-radius: var(--radius-pill);
    transform: translateY(-50%);
  }
  #morbidity-simulator .mb-thresh-label .mb-thresh-val { font-size: 0.62rem; padding: 2px 6px; }
  #morbidity-simulator .mb-plot { aspect-ratio: 1.12 / 1; }
  #morbidity-simulator .mb-xaxis span { font-size: 0.62rem; letter-spacing: 0; }
  #morbidity-simulator .mb-lever .slider-labels { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  #morbidity-simulator .mb-lever .slider-display { grid-column: 2; justify-self: start; }
  #morbidity-simulator .mb-seg .btn-preset { font-size: 0.78rem; padding-inline: 0.3rem; }
  #morbidity-simulator .morbidity-insight {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
  }
  #morbidity-simulator .mb-insight-body { display: contents; }
  #morbidity-simulator .mb-insight-icon { width: 34px; height: 34px; border-radius: 10px; }
  #morbidity-simulator .mb-insight-icon .i { width: 17px; height: 17px; }
  #morbidity-simulator .insight-copy { grid-column: 1 / -1; margin-top: 0; font-size: 0.92rem; }
  #morbidity-simulator .mb-orb { opacity: 0.3; }
}

@media (max-width: 480px) {
  #morbidity-simulator .mb-kpi-foot { display: none; }
  #morbidity-simulator .mb-kpi { gap: 12px; }
  #morbidity-simulator .metric-label { letter-spacing: 0.1em; align-items: flex-start; }
  #morbidity-simulator .metric-label .i { margin-top: -1px; flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  #morbidity-simulator .mb-marker::after,
  #morbidity-simulator .mb-live-dot { animation: none; }
}

/* ---- 50-vo2max.css ---- */
/* ==========================================================================
   04 · VO2 MAX — hazard curve, cohort ladder, prescription
   Everything scoped under #vo2max.
   ========================================================================== */

#vo2max {
  --vo2-low: #ff8f8f;
  --vo2-low-c: var(--coral);
  --vo2-below: var(--amber);
  --vo2-above: var(--cyan);
  --vo2-high: var(--mint);
  --vo2-elite: #c2b2ff;
  --vo2-elite-c: var(--violet);
  --vo2-pad: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  overflow: clip;
}

/* ---------- Atmosphere ---------- */
#vo2max .vo2-atmos {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Soft light pools: plain radial gradients (no blur filter, so no raster seams) */
#vo2max .vo2-orb {
  position: absolute;
  border-radius: 50%;
}
#vo2max .vo2-orb-a {
  width: 1000px; height: 1000px;
  right: -380px; top: 8%;
  background: radial-gradient(closest-side, rgba(56, 214, 245, 0.11), rgba(56, 214, 245, 0.04) 45%, transparent);
}
#vo2max .vo2-orb-b {
  width: 900px; height: 900px;
  left: -420px; bottom: -6%;
  background: radial-gradient(closest-side, rgba(255, 107, 107, 0.07), rgba(255, 107, 107, 0.025) 45%, transparent);
}
#vo2max .vo2-gridfield {
  position: absolute;
  inset: 0;
  opacity: 0.7;
  -webkit-mask-image: radial-gradient(closest-side at 62% 52%, #000 30%, transparent);
  mask-image: radial-gradient(closest-side at 62% 52%, #000 30%, transparent);
}

/* ---------- Head ---------- */
#vo2max .vo2-head { max-width: 980px; }
#vo2max .badge-pill .i { width: 14px; height: 14px; }

/* ---------- Bento ---------- */
#vo2max .vo2-card-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.9rem, 0.5rem + 1vw, 1.25rem);
  align-items: stretch;
}
#vo2max .vo2-controls-card { grid-column: 1 / span 4; }
#vo2max .vo2-analytics-card { grid-column: 5 / span 8; }
#vo2max .fitness-tier-box { grid-column: 1 / span 7; }
#vo2max .vo2-protocol-box { grid-column: 8 / span 5; }

#vo2max .vo2-tile {
  min-width: 0;
  padding: var(--vo2-pad);
  border-radius: var(--radius-xl);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#vo2max .vo2-analytics-card {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(56, 214, 245, 0.07), transparent 55%),
    var(--glass-bg-strong);
}
#vo2max .vo2-tile-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}
#vo2max .vo2-tile-head .eyebrow { margin: 0; }
#vo2max .vo2-tile-title {
  margin-top: 0.2rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tx-1);
}

/* ---------- Controls ---------- */
#vo2max .vo2-controls-card {
  display: flex;
  flex-direction: column;
}
#vo2max .vo2-sex-group {
  display: grid;
  gap: 0.6rem;
  padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--line-1);
}
#vo2max .control-label { display: block; }
#vo2max .vo2-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex-wrap: nowrap;
  width: 100%;
  background: rgba(3, 5, 9, 0.55);
  border-color: var(--line-2);
  isolation: isolate;
}
#vo2max .vo2-seg-thumb {
  position: absolute;
  z-index: 0;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 6px);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(56, 214, 245, 0.22), rgba(60, 242, 180, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(56, 214, 245, 0.35), 0 6px 18px -8px rgba(56, 214, 245, 0.6);
  transition: transform var(--dur-3) var(--ease-spring);
}
#vo2max .vo2-seg[data-active="female"] .vo2-seg-thumb { transform: translateX(calc(100% + 4px)); }
#vo2max .vo2-seg .seg-btn {
  position: relative;
  z-index: 1;
  min-height: 44px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
#vo2max .vo2-seg .seg-btn.active {
  background: none;
  box-shadow: none;
  color: var(--tx-1);
}
#vo2max .vo2-seg .seg-btn:active { transform: scale(0.97); }
#vo2max .vo2-seg .seg-btn:focus-visible { outline-offset: -2px; }

#vo2max .vo2-nw { white-space: nowrap; }
#vo2max .vo2-controls-card .slider-labels { gap: 0.75rem; }
#vo2max .vo2-controls-card .slider-group:last-of-type { border-bottom: 1px solid var(--line-1); }
#vo2max .slider-helper-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}
#vo2max .helper-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--tx-3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
}
#vo2max .helper-badge .i { width: 13px; height: 13px; color: var(--cyan); }

#vo2max .vo2-cooper {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
}
#vo2max .vo2-controls-card .vo2-cooper { margin-top: auto; }
#vo2max .vo2-cooper-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 14px;
  color: var(--amber);
  background: linear-gradient(160deg, rgba(255, 198, 92, 0.16), rgba(255, 198, 92, 0.03));
  border: 1px solid rgba(255, 198, 92, 0.24);
}
#vo2max .vo2-cooper-icon .i { width: 22px; height: 22px; }
#vo2max .vo2-cooper-body { min-width: 0; display: grid; gap: 0.2rem; }
#vo2max .vo2-cooper-line {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  line-height: 1;
}
#vo2max .vo2-cooper-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--tx-1);
}
#vo2max .vo2-unit {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--tx-3);
}

/* ---------- Analytics: KPI ---------- */
#vo2max .vo2-analytics-card {
  display: flex;
  flex-direction: column;
}
#vo2max .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
#vo2max .chart-kicker { display: block; margin-bottom: 0.7rem; }
#vo2max .hazard-stat-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
}
#vo2max .hazard-val {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 2.2rem + 4vw, 5.6rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  color: var(--tx-1);
  background: linear-gradient(180deg, #ffffff 10%, var(--vo2-kpi, var(--tx-1)) 140%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px var(--vo2-kpi-glow, transparent));
  transition: filter var(--dur-3) ease;
}
#vo2max .hazard-val.is-good { --vo2-kpi: var(--mint); --vo2-kpi-glow: rgba(60, 242, 180, 0.28); }
#vo2max .hazard-val.is-warn { --vo2-kpi: var(--amber); --vo2-kpi-glow: rgba(255, 198, 92, 0.24); }
#vo2max .hazard-val.is-risk { --vo2-kpi: var(--coral); --vo2-kpi-glow: rgba(255, 107, 107, 0.3); }
#vo2max .vo2-kpi-side {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  min-width: 0;
}
#vo2max .vo2-hazard-chip { font-weight: 600; }
#vo2max .hazard-label {
  max-width: 26ch;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--tx-2);
}
#vo2max .vo2-legend {
  display: flex;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#vo2max .vo2-legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }
#vo2max .vo2-swatch { display: inline-block; flex: none; }
#vo2max .vo2-swatch.is-curve {
  width: 22px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--coral), var(--amber), var(--cyan), var(--mint));
}
#vo2max .vo2-swatch.is-you {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(56, 214, 245, 0.35), 0 0 10px rgba(56, 214, 245, 0.8);
}

/* ---------- Analytics: chart ---------- */
#vo2max .chart-viewport {
  position: relative;
  margin-inline: calc(var(--vo2-pad) * -0.35);
  flex: 1;
}
#vo2max .curve-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
#vo2max .curve-svg text {
  font-family: var(--font-mono);
  fill: var(--viz-label);
}
#vo2max .chart-axis-text { font-size: 11px; letter-spacing: 0.02em; }
#vo2max .chart-label-sub { font-size: 11px; }
#vo2max .vo2-gridline { stroke: var(--viz-grid); stroke-dasharray: 2 5; }
#vo2max .vo2-axisline { stroke: rgba(255, 255, 255, 0.22); }
#vo2max .vo2-tick { stroke: rgba(255, 255, 255, 0.2); }
#vo2max .curve-svg .vo2-baseline-text {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--tx-3);
  paint-order: stroke;
  stroke: #0d121d;
  stroke-width: 5px;
  stroke-linejoin: round;
}

#vo2max .vo2-band { fill: rgba(255, 255, 255, 0.012); transition: fill var(--dur-3) ease; }
#vo2max .vo2-band.is-low.is-current { fill: rgba(255, 107, 107, 0.07); }
#vo2max .vo2-band.is-below.is-current { fill: rgba(255, 198, 92, 0.065); }
#vo2max .vo2-band.is-above.is-current { fill: rgba(56, 214, 245, 0.07); }
#vo2max .vo2-band.is-high.is-current { fill: rgba(60, 242, 180, 0.07); }
#vo2max .vo2-band.is-elite.is-current { fill: rgba(166, 140, 255, 0.08); }
#vo2max .curve-svg .vo2-band-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--tx-3);
}
/* Chart annotations never render below 11px; a touch larger on narrow (phone) charts. */
#vo2max .curve-svg.is-narrow .vo2-band-label { font-size: 11.5px; letter-spacing: 0.04em; }
#vo2max .curve-svg .vo2-band-label.is-current { font-weight: 600; }
#vo2max .curve-svg .vo2-band-label.is-low.is-current { fill: var(--vo2-low); }
#vo2max .curve-svg .vo2-band-label.is-below.is-current { fill: var(--vo2-below); }
#vo2max .curve-svg .vo2-band-label.is-above.is-current { fill: var(--vo2-above); }
#vo2max .curve-svg .vo2-band-label.is-high.is-current { fill: var(--vo2-high); }
#vo2max .curve-svg .vo2-band-label.is-elite.is-current { fill: var(--vo2-elite); }

#vo2max .vo2-divider { stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.55; }
#vo2max .vo2-divider.is-low { stroke: var(--coral); }
#vo2max .vo2-divider.is-avg { stroke: var(--amber); }
#vo2max .vo2-divider.is-high { stroke: var(--cyan); }

#vo2max .curve-area { opacity: 0.95; }
#vo2max .curve-stroke {
  fill: none;
  stroke: url(#vo2-stroke-grad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#vo2max .curve-glow {
  fill: none;
  stroke: url(#vo2-stroke-grad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

/* Draw-in on first view (JS adds the classes only when motion is allowed) */
#vo2max .vo2-draw-pending .curve-stroke,
#vo2max .vo2-draw-pending .curve-glow { stroke-dasharray: 1; stroke-dashoffset: 1; }
#vo2max .vo2-draw-pending .curve-area,
#vo2max .vo2-draw-pending .vo2-marker,
#vo2max .vo2-draw-pending .vo2-hguide { opacity: 0; }
#vo2max .vo2-drawn .curve-stroke,
#vo2max .vo2-drawn .curve-glow {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s var(--ease-out);
}
#vo2max .vo2-drawn .curve-area { transition: opacity 1.2s ease 0.5s; }
#vo2max .vo2-drawn .vo2-hguide { transition: opacity 0.6s ease 0.9s, transform var(--dur-3) var(--ease-out); }
#vo2max .vo2-drawn .vo2-marker { transition: opacity 0.6s ease 0.9s, transform var(--dur-3) var(--ease-out); }

/* Crosshair + marker */
#vo2max .vo2-crosshair,
#vo2max .vo2-hguide {
  transition: transform var(--dur-3) var(--ease-out);
}
#vo2max .vo2-hguide { transform-origin: 0 0; }
#vo2max .vo2-marker {
  transition: transform var(--dur-3) var(--ease-out);
  --mk: var(--cyan);
}
#vo2max .vo2-marker.is-good { --mk: var(--mint); }
#vo2max .vo2-marker.is-warn { --mk: var(--amber); }
#vo2max .vo2-marker.is-risk { --mk: var(--coral); }
#vo2max.vo2-no-anim .vo2-marker,
#vo2max.vo2-no-anim .vo2-crosshair,
#vo2max.vo2-no-anim .vo2-hguide { transition: none; }
#vo2max .marker-halo { opacity: 0.9; }
#vo2max .marker-pulse {
  fill: none;
  stroke: var(--mk);
  stroke-width: 1.5;
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: center;
  animation: vo2-ping 2.4s var(--ease-out) infinite;
}
#vo2max .marker-dot {
  fill: #fff;
  stroke: var(--mk);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px var(--mk));
  transition: stroke var(--dur-2) ease;
}
#vo2max .marker-tag-box {
  fill: rgba(7, 10, 17, 0.9);
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
}
#vo2max .curve-svg .marker-tag-text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--tx-1);
}
#vo2max .curve-svg .marker-tag-sub {
  font-size: 11px;
  letter-spacing: 0.04em;
  fill: var(--mk);
}
#vo2max .curve-svg.is-narrow .marker-tag-sub { font-size: 11.5px; letter-spacing: 0.02em; }
#vo2max .vo2-marker.is-risk .marker-tag-sub { fill: var(--vo2-low); }
@keyframes vo2-ping {
  0% { transform: scale(1); opacity: 0.6; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}

#vo2max .vo2-axis-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-1);
}
#vo2max .vo2-axis-note { font-size: var(--fs-xs); color: var(--tx-3); }

/* ---------- Tier ladder ---------- */
#vo2max .fitness-tier-box {
  --tc: var(--vo2-above);
  --tc-raw: var(--cyan);
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
#vo2max .fitness-tier-box[data-tier="tier-low"] { --tc: var(--vo2-low); --tc-raw: var(--coral); }
#vo2max .fitness-tier-box[data-tier="tier-below-avg"] { --tc: var(--vo2-below); --tc-raw: var(--amber); }
#vo2max .fitness-tier-box[data-tier="tier-high"] { --tc: var(--vo2-high); --tc-raw: var(--mint); }
#vo2max .fitness-tier-box[data-tier="tier-elite"] { --tc: var(--vo2-elite); --tc-raw: var(--violet); }
#vo2max .fitness-tier-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--tc-raw) 12%, transparent), transparent 60%);
  transition: background var(--dur-3) ease;
}
#vo2max .fitness-tier-box > * { position: relative; }
#vo2max .tier-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
#vo2max .vo2-tier-id { display: grid; gap: 0.5rem; }
#vo2max .tier-percentile {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--tx-1);
}
#vo2max .tier-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 30px;
  padding: 0.35rem 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.1;
  border-radius: var(--radius-pill);
  border: 1px solid;
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, border-color var(--dur-2) ease;
}
#vo2max .tier-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
#vo2max .tier-low { color: var(--vo2-low); background: var(--coral-soft); border-color: rgba(255, 107, 107, 0.32); }
#vo2max .tier-below-avg { color: var(--vo2-below); background: var(--amber-soft); border-color: rgba(255, 198, 92, 0.3); }
#vo2max .tier-above-avg { color: var(--vo2-above); background: var(--cyan-soft); border-color: rgba(56, 214, 245, 0.3); }
#vo2max .tier-high { color: var(--vo2-high); background: var(--mint-soft); border-color: rgba(60, 242, 180, 0.3); }
#vo2max .tier-elite { color: var(--vo2-elite); background: var(--violet-soft); border-color: rgba(166, 140, 255, 0.32); }

/* Percentile gauge: segment widths follow the percentile cut-points */
#vo2max .vo2-gauge {
  position: relative;
  padding-block: 10px;
}
#vo2max .vo2-gauge-track {
  display: grid;
  grid-template-columns: 25fr 25fr 25fr 22.5fr 2.5fr;
  gap: 3px;
  height: 10px;
}
#vo2max .vo2-gauge-seg {
  border-radius: 3px;
  opacity: 0.2;
  transition: opacity var(--dur-3) ease;
}
#vo2max .vo2-gauge-seg:first-child { border-radius: 99px 3px 3px 99px; }
#vo2max .vo2-gauge-seg:last-child { border-radius: 3px 99px 99px 3px; }
#vo2max .vo2-gauge-seg.is-low { background: var(--coral); }
#vo2max .vo2-gauge-seg.is-below { background: var(--amber); }
#vo2max .vo2-gauge-seg.is-above { background: var(--cyan); }
#vo2max .vo2-gauge-seg.is-high { background: var(--mint); }
#vo2max .vo2-gauge-seg.is-elite { background: var(--violet); }
#vo2max [data-tier="tier-low"] .vo2-gauge-seg.is-low,
#vo2max [data-tier="tier-below-avg"] .vo2-gauge-seg.is-below,
#vo2max [data-tier="tier-above-avg"] .vo2-gauge-seg.is-above,
#vo2max [data-tier="tier-high"] .vo2-gauge-seg.is-high,
#vo2max [data-tier="tier-elite"] .vo2-gauge-seg.is-elite {
  opacity: 1;
  box-shadow: 0 0 16px -2px var(--tc-raw);
}
#vo2max .vo2-gauge-pin {
  --pct: 50;
  position: absolute;
  top: 15px;
  left: 0;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 4px, var(--ink-1) 4.5px);
  border: 2px solid var(--tc-raw);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tc-raw) 18%, transparent), 0 0 18px var(--tc-raw);
  left: calc(var(--pct) * 1%);
  transition: left var(--dur-3) var(--ease-out), border-color var(--dur-2) ease;
}

#vo2max .vo2-gauge-ticks {
  position: relative;
  height: 14px;
  margin-top: 12px;
}
#vo2max .vo2-gauge-ticks > span {
  position: absolute;
  top: 0;
  left: calc(var(--at) * 1%);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1;
  color: var(--tx-3);
}
#vo2max .vo2-gauge-ticks > span:first-child { transform: none; }
#vo2max .vo2-gauge-ticks > span.is-end { transform: translateX(-80%); }
#vo2max .vo2-gauge-ticks > span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 1px;
  height: 5px;
  background: var(--line-3);
}
#vo2max .vo2-gauge-ticks > span:first-child::before { left: 0; }

/* Ladder */
#vo2max .vo2-ladder {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  counter-reset: none;
}
#vo2max .vo2-rung {
  --rc: var(--tx-3);
  --rc-raw: rgba(255, 255, 255, 0.2);
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-height: 96px;
  padding: 1rem 0.9rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--line-1);
  background: rgba(255, 255, 255, 0.02);
  transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-3) var(--ease-out);
}
#vo2max .vo2-rung.is-low { --rc: var(--vo2-low); --rc-raw: var(--coral); }
#vo2max .vo2-rung.is-below { --rc: var(--vo2-below); --rc-raw: var(--amber); }
#vo2max .vo2-rung.is-above { --rc: var(--vo2-above); --rc-raw: var(--cyan); }
#vo2max .vo2-rung.is-high { --rc: var(--vo2-high); --rc-raw: var(--mint); }
#vo2max .vo2-rung.is-elite { --rc: var(--vo2-elite); --rc-raw: var(--violet); }
#vo2max .vo2-rung-bar {
  display: block;
  width: 100%;
  height: 3px;
  margin-bottom: 0.35rem;
  border-radius: 3px;
  background: var(--rc-raw);
  opacity: 0.35;
}
#vo2max .vo2-rung-name {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tx-2);
}
#vo2max .vo2-rung-range {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--tx-3);
}
#vo2max .vo2-rung.is-current {
  border-color: color-mix(in srgb, var(--rc-raw) 50%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc-raw) 16%, transparent), color-mix(in srgb, var(--rc-raw) 3%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px -16px var(--rc-raw);
  transform: translateY(-3px);
}
#vo2max .vo2-rung.is-current .vo2-rung-bar { opacity: 1; box-shadow: 0 0 10px var(--rc-raw); }
#vo2max .vo2-rung.is-current .vo2-rung-name { color: var(--tx-1); }
#vo2max .vo2-rung.is-current .vo2-rung-range { color: var(--rc); }
#vo2max .vo2-rung.is-current::after {
  content: "You";
  position: absolute;
  top: -9px; right: 0.7rem;
  line-height: 1.3;
  box-shadow: 0 0 0 3px var(--ink-2), 0 0 14px -2px var(--rc-raw);
  padding: 0.1rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-0);
  background: var(--rc-raw);
  border-radius: 99px;
}
#vo2max .tier-desc {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-1);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--tx-2);
  /* Hairline spans the card; the text itself keeps a readable measure. */
  padding-right: max(0px, 100% - 68ch);
}

/* ---------- Protocol ---------- */
#vo2max .vo2-protocol-box {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
#vo2max .vo2-protocol-box .vo2-tile-head { margin-bottom: 0; }
#vo2max .protocol-kicker {
  display: block;
  line-height: 1.5;
  color: #c2b2ff;
}
#vo2max .protocol-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--tx-2);
}
#vo2max .protocol-text strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--tx-1);
}
#vo2max .vo2-structure {
  margin: auto 0 0;
  padding: 1rem 1.1rem 0.95rem;
  border-radius: var(--radius-md);
  background: rgba(3, 5, 9, 0.5);
  border: 1px solid var(--line-1);
}
#vo2max .vo2-structure-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-bottom: 0.85rem;
}
#vo2max .vo2-structure-sum {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--tx-1);
}
#vo2max .vo2-blocks {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 56px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--line-2);
}
#vo2max .vo2-block {
  flex: var(--w, 1) 1 0;
  min-width: 3px;
  border-radius: 6px 6px 2px 2px;
  transform-origin: 50% 100%;
}
/* Work intervals: warm effort amber (coral stays reserved for hazard). */
#vo2max .vo2-block.is-work {
  height: 100%;
  background: linear-gradient(180deg, #ffe2a6, var(--amber) 55%, #f0a93a);
  box-shadow: 0 0 18px -6px rgba(255, 198, 92, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
#vo2max .vo2-block.is-rest {
  height: 34%;
  background: linear-gradient(180deg, rgba(56, 214, 245, 0.7), rgba(56, 214, 245, 0.35));
}
#vo2max .vo2-block.is-zone {
  height: 52%;
  background: linear-gradient(180deg, var(--mint), rgba(60, 242, 180, 0.45));
  box-shadow: 0 0 18px -8px rgba(60, 242, 180, 0.8);
}
#vo2max .vo2-blocks.is-built .vo2-block {
  animation: vo2-rise 0.7s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes vo2-rise {
  from { transform: scaleY(0.05); opacity: 0; }
}
#vo2max .vo2-block-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: 0.7rem;
  font-size: var(--fs-xs);
  color: var(--tx-3);
}
#vo2max .vo2-block-legend > span { display: inline-flex; align-items: center; gap: 0.45rem; }
#vo2max .vo2-key { width: 10px; height: 10px; border-radius: 3px; flex: none; }
#vo2max .vo2-key.is-work { background: var(--amber); }
#vo2max .vo2-key.is-rest { background: rgba(56, 214, 245, 0.7); }
#vo2max .vo2-key.is-zone { background: var(--mint); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  #vo2max .vo2-controls-card { grid-column: 1 / span 5; }
  #vo2max .vo2-analytics-card { grid-column: 6 / span 7; }
  #vo2max .fitness-tier-box { grid-column: 1 / -1; }
  #vo2max .vo2-protocol-box { grid-column: 1 / -1; }
  #vo2max .vo2-legend { display: none; }
}
@media (max-width: 1024px) {
  #vo2max .vo2-controls-card,
  #vo2max .vo2-analytics-card,
  #vo2max .fitness-tier-box,
  #vo2max .vo2-protocol-box { grid-column: 1 / -1; }
  #vo2max .vo2-controls-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  #vo2max .vo2-controls-card .vo2-tile-head,
  #vo2max .vo2-controls-card .vo2-sex-group { grid-column: 1 / -1; }
  #vo2max .vo2-controls-card .vo2-cooper { grid-column: 1 / -1; }
  #vo2max .vo2-legend { display: flex; }
}
@media (max-width: 680px) {
  #vo2max .vo2-controls-card { display: flex; }
  #vo2max .vo2-legend { display: none; }
  #vo2max .vo2-ladder { grid-template-columns: 1fr; gap: 0.4rem; }
  #vo2max .vo2-rung {
    grid-template-columns: 4px 1fr auto auto;
    align-items: center;
    column-gap: 0.8rem;
    padding: 0.7rem 0.85rem;
  }
  #vo2max .vo2-rung-bar { width: 4px; height: 100%; min-height: 22px; margin: 0; }
  #vo2max .vo2-rung.is-current { transform: translateX(4px); }
  #vo2max .vo2-rung { min-height: 0; }
  #vo2max .vo2-rung.is-current::after { position: static; grid-column: 4; grid-row: 1; box-shadow: none; }
  #vo2max .vo2-rung > * { grid-row: 1; }
  #vo2max .vo2-rung-range { text-align: right; }
  #vo2max .chart-viewport { margin-inline: -0.35rem; }
  #vo2max .vo2-gauge-ticks > span.is-end { display: none; }
}
@media (max-width: 480px) {
  #vo2max .vo2-tile { border-radius: var(--radius-lg); }
  #vo2max .hazard-stat-row { gap: 0.75rem 1rem; }
  #vo2max .vo2-orb-a { width: 380px; height: 380px; }
  #vo2max .vo2-orb-b { width: 320px; height: 320px; }
}

@media print {
  #vo2max .vo2-atmos { display: none; }
}

/* ---- 60-apob.css ---- */
/* ==========================================================================
   05 · APOB LIFETIME AUC PROJECTOR  (owner: apob)
   Everything scoped under #apob-auc.
   ========================================================================== */

#apob-auc {
  --apob-warm: linear-gradient(90deg, #ffc65c 0%, #ff9a62 45%, #ff6b6b 100%);
  --apob-cool: linear-gradient(90deg, #3cf2b4 0%, #2fe3d0 50%, #38d6f5 100%);
  --apob-thresh: #ff8f8f;
  --apob-panel-pad: clamp(1.25rem, 0.9rem + 1.2vw, 1.9rem);
  overflow: clip;
}

/* ---------- Ambient light ---------- */
#apob-auc .apob-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
#apob-auc .apob-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
#apob-auc .apob-orb-warm {
  width: 520px; height: 420px;
  left: -180px; bottom: 6%;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.28), rgba(255, 198, 92, 0.1) 45%, transparent 70%);
}
#apob-auc .apob-orb-cool {
  width: 640px; height: 520px;
  right: -200px; top: 22%;
  background: radial-gradient(circle, rgba(60, 242, 180, 0.22), rgba(56, 214, 245, 0.1) 45%, transparent 70%);
}

/* ---------- Section head extras ---------- */
#apob-auc .section-head { max-width: 1040px; }
#apob-auc .section-desc { max-width: 64ch; }
#apob-auc .formula {
  display: inline-block;
  padding: 0.05em 0.5em;
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--mint);
  white-space: nowrap;
  background: var(--mint-soft);
  border: 1px solid rgba(60, 242, 180, 0.22);
  border-radius: 8px;
}

#apob-auc .apob-nowrap { white-space: nowrap; }

/* ---------- Bento grid ---------- */
#apob-auc .apob-card-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "ctrl ctrl ctrl ctrl chart chart chart chart chart chart chart chart"
    "ctrl ctrl ctrl ctrl burden burden burden burden thresh thresh thresh thresh"
    "meter meter meter meter meter meter meter meter note note note note";
  gap: 20px;
  align-items: stretch;
}
#apob-auc .apob-controls-card { grid-area: ctrl; }
#apob-auc .apob-chart-card { grid-area: chart; }
#apob-auc .auc-stat-box { grid-area: burden; }
#apob-auc .threshold-status-box { grid-area: thresh; }
#apob-auc .trajectory-visualizer { grid-area: meter; }
#apob-auc .apob-clinical-takeaway { grid-area: note; }

/* ---------- Panels ---------- */
#apob-auc .apob-panel {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: var(--apob-panel-pad);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.016) 100%),
    rgba(7, 10, 17, 0.62);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-highlight), var(--shadow-md);
}
#apob-auc .apob-eyebrow,
#apob-auc .auc-kicker,
#apob-auc .thresh-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#apob-auc .apob-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--tx-3);
}

/* ---------- Controls ---------- */
#apob-auc .apob-controls-card {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(106, 168, 255, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.058) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(7, 10, 17, 0.7);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
#apob-auc .apob-panel-head,
#apob-auc .apob-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--line-1);
}
#apob-auc .apob-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
  animation: apob-pulse 2.6s ease-in-out infinite;
}
@keyframes apob-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}
#apob-auc .apob-ctl {
  padding-block: 1.25rem 1.1rem;
}
#apob-auc .apob-ctl .slider-labels {
  align-items: center;
  margin-bottom: 0.85rem;
}
#apob-auc .apob-ctl-name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
#apob-auc .apob-ctl-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
}
#apob-auc .apob-ctl-icon .i { width: 18px; height: 18px; }
#apob-auc .apob-ctl .slider-title {
  font-size: 0.9rem;
  line-height: 1.3;
}
#apob-auc .apob-ctl .slider-display {
  padding: 0.45rem 0.65rem;
  font-size: 0.9rem;
}
#apob-auc .apob-range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}
#apob-auc .apob-ctl .slider-note {
  margin-top: 0.6rem;
  font-size: 0.8rem;
}
#apob-auc .apob-formula-foot {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  justify-content: center;
}
#apob-auc .apob-formula-chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--tx-2);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--line-2);
}

/* Sticky mini readout: only on stacked layouts, where the chart sits below the sliders */
#apob-auc .apob-mini { display: none; }
@media (max-width: 899px) {
  #apob-auc .apob-mini {
    --st: var(--mint);
    --st-rgb: 60, 242, 180;
    position: sticky;
    top: calc(var(--header-h) + 10px);
    z-index: 6;
    display: flex;
    justify-content: center;
    height: 0;
    overflow: visible;
    pointer-events: none;
  }
  #apob-auc .apob-mini.is-delayed { --st: var(--amber); --st-rgb: 255, 198, 92; }
  #apob-auc .apob-mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding-inline: 14px 16px;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    background: rgba(11, 15, 24, 0.95);
    border: 1px solid rgba(var(--st-rgb), 0.32);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.85), 0 0 22px -10px rgba(var(--st-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
  }
  #apob-auc .apob-mini.is-on .apob-mini-pill { opacity: 1; transform: none; }
  #apob-auc .apob-mini-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--st);
    box-shadow: 0 0 10px var(--st);
  }
  #apob-auc .apob-mini-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tx-3);
  }
  #apob-auc .apob-mini-val {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--tx-3);
    font-variant-numeric: tabular-nums;
  }
  #apob-auc .apob-mini-val b {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--tx-1);
  }
  #apob-auc .apob-mini-val b.apob-mini-reduc { color: var(--st); }
  #apob-auc .apob-mini-sep { width: 1px; height: 16px; background: var(--line-2); }
}
@media (max-width: 360px) {
  #apob-auc .apob-mini-label { display: none; }
}

/* ---------- Hero chart ---------- */
#apob-auc .apob-chart-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 85% 0%, rgba(56, 214, 245, 0.08), transparent 60%),
    radial-gradient(60% 60% at 10% 100%, rgba(255, 107, 107, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(5, 8, 14, 0.78);
}
#apob-auc .apob-chart-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(60, 242, 180, 0.45), rgba(56, 214, 245, 0.1) 35%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 107, 107, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
#apob-auc .apob-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
#apob-auc .apob-chart-title {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
#apob-auc .apob-chart-sub {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tx-1);
}
#apob-auc .apob-unit-inline {
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--tx-3);
}
#apob-auc .apob-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding-top: 0.15rem;
}
#apob-auc .apob-key {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  color: var(--tx-2);
}
#apob-auc .apob-key-swatch {
  display: inline-block;
  width: 18px; height: 3px;
  border-radius: 3px;
  flex: none;
}
#apob-auc .is-untreated .apob-key-swatch { background: var(--apob-warm); box-shadow: 0 0 8px rgba(255, 107, 107, 0.7); }
#apob-auc .is-treated .apob-key-swatch { background: var(--apob-cool); box-shadow: 0 0 8px rgba(60, 242, 180, 0.7); }
#apob-auc .is-thresh .apob-key-swatch {
  background: repeating-linear-gradient(90deg, var(--apob-thresh) 0 4px, transparent 4px 7px);
  box-shadow: none;
  height: 2px;
}
#apob-auc .apob-chart-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}
#apob-auc .apob-chart {
  display: block;
  width: 100%;
  height: clamp(270px, 20vw + 60px, 360px);
  overflow: visible;
}
#apob-auc .apob-c-grid line { stroke: var(--viz-grid); stroke-width: 1; }
#apob-auc .apob-c-grid line.is-v { stroke-dasharray: 2 4; stroke: rgba(255, 255, 255, 0.045); }
#apob-auc .apob-c-grid line.is-base { stroke: var(--viz-axis); }
#apob-auc .apob-c-axis text {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--tx-3);
  font-variant-numeric: tabular-nums;
}
#apob-auc .apob-c-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#apob-auc .apob-c-line-u { stroke-width: 2.5; }
#apob-auc .apob-c-avoided-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--mint);
  paint-order: stroke;
  stroke: rgba(5, 8, 14, 0.85);
  stroke-width: 4px;
  transition: opacity var(--dur-2) ease;
}
#apob-auc .apob-c-thresh-line {
  stroke: var(--apob-thresh);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}
#apob-auc .apob-c-thresh-glow {
  stroke: rgba(255, 107, 107, 0.45);
  stroke-width: 6;
  filter: blur(4px);
}
#apob-auc .apob-c-thresh-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  fill: var(--apob-thresh);
  paint-order: stroke;
  stroke: rgba(5, 8, 14, 0.9);
  stroke-width: 4px;
}
#apob-auc .apob-c-start-line {
  stroke: rgba(106, 168, 255, 0.55);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
#apob-auc .apob-c-start-pill {
  fill: rgba(106, 168, 255, 0.14);
  stroke: rgba(106, 168, 255, 0.45);
  stroke-width: 1;
}
#apob-auc .apob-c-start-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  fill: #cfe0ff;
}
#apob-auc .apob-c-dot { fill: #ffffff; stroke: var(--mint); stroke-width: 3; }
#apob-auc .apob-c-halo {
  fill: rgba(60, 242, 180, 0.22);
  transform-box: fill-box;
  transform-origin: center;
  animation: apob-halo 2.4s var(--ease-out) infinite;
}
@keyframes apob-halo {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}
#apob-auc .apob-c-end circle { stroke: #05080e; stroke-width: 2.5; }
#apob-auc .apob-c-end-u circle { fill: #ff6b6b; }
#apob-auc .apob-c-end-t circle { fill: #38d6f5; }
#apob-auc .apob-c-end text {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: rgba(5, 8, 14, 0.9);
  stroke-width: 4px;
}
#apob-auc .apob-c-end-u text { fill: #ff9a8a; }
#apob-auc .apob-c-end-t text { fill: var(--mint); }
#apob-auc .apob-c-cross { transition: opacity var(--dur-2) ease; }
#apob-auc .apob-c-cross-ring { fill: rgba(5, 8, 14, 0.9); stroke-width: 1.5; }
#apob-auc .apob-c-cross-u .apob-c-cross-ring { stroke: #ff8f8f; }
#apob-auc .apob-c-cross-u .apob-c-cross-core { fill: #ff8f8f; }
#apob-auc .apob-c-cross-t .apob-c-cross-ring { stroke: var(--amber); }
#apob-auc .apob-c-cross-t .apob-c-cross-core { fill: var(--amber); }
#apob-auc .apob-c-cross-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: rgba(5, 8, 14, 0.9);
  stroke-width: 4px;
}
#apob-auc .apob-c-cross-u .apob-c-cross-text { fill: #ff8f8f; }
#apob-auc .apob-c-cross-t .apob-c-cross-text { fill: var(--amber); }

/* Scrub read-out */
#apob-auc .apob-chart { touch-action: pan-y; }
#apob-auc .apob-c-hit { cursor: crosshair; }
#apob-auc .apob-c-scrub {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) ease;
}
#apob-auc .apob-c-scrub.is-on { opacity: 1; }
#apob-auc .apob-c-scrub-line { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
#apob-auc .apob-c-scrub-dot { stroke: #05080e; stroke-width: 2; }
#apob-auc .apob-c-scrub-dot.is-u, #apob-auc .apob-c-tip-key.is-u { fill: #ff8f8f; }
#apob-auc .apob-c-scrub-dot.is-t, #apob-auc .apob-c-tip-key.is-t { fill: var(--mint); }
#apob-auc .apob-c-tip-bg {
  fill: rgba(11, 15, 24, 0.94);
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
}
#apob-auc .apob-c-tip-age {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--tx-3);
}
#apob-auc .apob-c-tip-name { font-family: var(--font-sans); font-size: 12px; fill: var(--tx-2); }
#apob-auc .apob-c-tip-val {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#apob-auc .apob-c-tip-val.is-u { fill: #ff9a8a; }
#apob-auc .apob-c-tip-val.is-t { fill: var(--mint); }

/* Draw-in on reveal (JS only adds .apob-will-draw when motion is allowed) */
#apob-auc .apob-will-draw .apob-c-line {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
#apob-auc .apob-will-draw .apob-c-line-t { transition-delay: 0.15s; }
#apob-auc .apob-will-draw .apob-c-area-u,
#apob-auc .apob-will-draw .apob-c-area-t,
#apob-auc .apob-will-draw .apob-c-avoided,
#apob-auc .apob-will-draw .apob-c-end,
#apob-auc .apob-will-draw .apob-c-kink {
  opacity: 0;
  transition: opacity 0.6s ease 0.45s;
}
#apob-auc .apob-will-draw.apob-drawn .apob-c-line { stroke-dashoffset: 0; }
#apob-auc .apob-will-draw.apob-drawn .apob-c-area-u,
#apob-auc .apob-will-draw.apob-drawn .apob-c-area-t,
#apob-auc .apob-will-draw.apob-drawn .apob-c-avoided,
#apob-auc .apob-will-draw.apob-drawn .apob-c-end,
#apob-auc .apob-will-draw.apob-drawn .apob-c-kink { opacity: 1; }

/* ---------- KPI tiles ---------- */
#apob-auc .apob-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
#apob-auc .apob-kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
#apob-auc .apob-kpi-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
}
#apob-auc .auc-val-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
#apob-auc .auc-val {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 1.6rem + 2.6vw, 4.1rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 10%, #a8fbe0 70%, #5ff0c6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(60, 242, 180, 0.28));
}
#apob-auc .auc-unit {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--tx-3);
}
#apob-auc .apob-ring-wrap {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 92px; height: 92px;
}
#apob-auc .apob-ring {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
#apob-auc .apob-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#apob-auc #apob-ring-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tx-1);
}
#apob-auc .apob-ring-cap {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#apob-auc .apob-ring circle { fill: none; stroke-width: 5; }
#apob-auc .apob-ring-track { stroke: rgba(255, 255, 255, 0.07); }
#apob-auc .apob-ring-fill {
  stroke: url(#apob-ring-grad);
  stroke-linecap: round;
  stroke-dasharray: 30.6 100;
  filter: drop-shadow(0 0 5px rgba(60, 242, 180, 0.6));
  transition: stroke-dasharray var(--dur-3) var(--ease-out);
}
#apob-auc .apob-reduction-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  min-height: 32px;
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  color: var(--mint);
  background: var(--mint-soft);
  border: 1px solid rgba(60, 242, 180, 0.28);
  border-radius: var(--radius-pill);
}
#apob-auc .apob-reduction-chip .i { width: 16px; height: 16px; }
#apob-auc .auc-badge {
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--mint);
}

/* Threshold status tile */
#apob-auc .threshold-status-box {
  --st-c: var(--mint);
  --st-bg: var(--mint-soft);
  --st-bd: rgba(60, 242, 180, 0.28);
  overflow: hidden;
}
#apob-auc .threshold-status-box.is-delayed {
  --st-c: var(--amber);
  --st-bg: var(--amber-soft);
  --st-bd: rgba(255, 198, 92, 0.3);
}
#apob-auc .threshold-status-box::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -80px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--st-bg), transparent 70%);
  opacity: 0.9;
  pointer-events: none;
}
#apob-auc .apob-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  min-height: 28px;
  padding: 0.25rem 0.65rem 0.25rem 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  color: var(--st-c);
  background: var(--st-bg);
  border: 1px solid var(--st-bd);
  border-radius: var(--radius-pill);
}
#apob-auc .apob-status-chip .i { width: 15px; height: 15px; }
#apob-auc .apob-status-icon { display: inline-flex; }
#apob-auc .threshold-status-box .apob-status-icon.is-alert,
#apob-auc .threshold-status-box.is-delayed .apob-status-icon.is-ok { display: none; }
#apob-auc .threshold-status-box.is-delayed .apob-status-icon.is-alert { display: inline-flex; }
#apob-auc .thresh-val {
  display: block;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 0.9vw, 1.9rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  position: relative;
}
#apob-auc .thresh-sub {
  position: relative;
  display: block;
  padding-top: 0.85rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--tx-2);
  border-top: 1px solid var(--line-1);
}

/* ---------- Signature: capsule meters ---------- */
#apob-auc .trajectory-visualizer {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  background:
    radial-gradient(90% 80% at 75% 50%, rgba(255, 107, 107, 0.05), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(5, 8, 14, 0.75);
}
#apob-auc .traj-label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin-bottom: 0.7rem;
}
#apob-auc .traj-name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tx-1);
}
#apob-auc .traj-number {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tx-2);
}
#apob-auc .traj-num-val {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
#apob-auc .traj-number.danger .traj-num-val { color: #ff9a8a; }
#apob-auc .traj-number.success .traj-num-val { color: var(--mint); }
#apob-auc .traj-number.success.is-crossed .traj-num-val { color: var(--amber); }
#apob-auc .traj-num-unit { color: var(--tx-3); }
#apob-auc .traj-num-status { color: var(--tx-2); }
#apob-auc .traj-number.danger.is-crossed .traj-num-status { color: #ff8f8f; }

#apob-auc .traj-track {
  position: relative;
  height: 22px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
#apob-auc .traj-bar {
  position: relative;
  height: 100%;
  max-width: 100%;
  min-width: 14px;
  border-radius: var(--radius-pill);
  transition: width 0.6s var(--ease-out);
}
#apob-auc .traj-bar::after {
  content: "";
  position: absolute;
  right: 1px; top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ffffff;
  transform: translateY(-50%);
  box-shadow: 0 0 10px 2px currentColor;
}
#apob-auc .traj-bar::before {
  content: "";
  position: absolute;
  inset: 1px 6px auto 6px;
  height: 35%;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
}
#apob-auc .bar-danger {
  color: #ff6b6b;
  background: var(--apob-warm);
  box-shadow: 0 0 18px -2px rgba(255, 107, 107, 0.65), 0 0 40px -8px rgba(255, 154, 98, 0.5);
}
#apob-auc .bar-success {
  color: #38d6f5;
  background: var(--apob-cool);
  box-shadow: 0 0 18px -2px rgba(60, 242, 180, 0.6), 0 0 40px -8px rgba(56, 214, 245, 0.5);
}
/* Threshold at 9,000 of a 12,000 scale = 75% of the inner track */
#apob-auc .apob-thresh-tick {
  position: absolute;
  left: calc(4px + (100% - 8px) * 0.75);
  top: -7px; bottom: -7px;
  width: 0;
  border-left: 2px dashed var(--apob-thresh);
  filter: drop-shadow(0 0 4px rgba(255, 107, 107, 0.9));
  z-index: 2;
  pointer-events: none;
}
#apob-auc .apob-axis {
  position: relative;
  height: 44px;
  margin-inline: 4px;
  border-top: 1px solid var(--line-2);
}
#apob-auc .apob-axis-ticks { position: absolute; inset: 0; }
#apob-auc .apob-axis-tick {
  position: absolute;
  top: 0;
  height: 6px;
  border-left: 1px solid var(--viz-axis);
}
#apob-auc .apob-axis-tick > span {
  position: absolute;
  top: 9px;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}
#apob-auc .apob-axis-tick:first-child > span { transform: none; }
#apob-auc .apob-axis-tick:last-child > span { transform: translateX(-100%); }
#apob-auc .apob-axis-tick.is-thresh > span { visibility: hidden; }
#apob-auc .thresh-marker {
  position: absolute;
  left: 75%;
  top: -1px;
  height: 8px;
  width: 0;
  border-left: 2px dashed var(--apob-thresh);
}
#apob-auc .thresh-marker-label {
  position: absolute;
  top: 12px;
  left: 0;
  transform: translateX(-50%);
  padding: 0.2rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--apob-thresh);
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.35);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 18px -4px rgba(255, 107, 107, 0.6);
}

/* ---------- Clinical takeaway callout ---------- */
#apob-auc .apob-clinical-takeaway {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  overflow: hidden;
  background:
    radial-gradient(100% 80% at 0% 0%, rgba(56, 214, 245, 0.1), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(5, 8, 14, 0.75);
}
#apob-auc .apob-clinical-takeaway::before {
  content: "";
  position: absolute;
  left: 0; top: 22px; bottom: 22px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--mint), var(--cyan));
  box-shadow: 0 0 14px rgba(60, 242, 180, 0.7);
}
#apob-auc .apob-takeaway-body > strong {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}
#apob-auc #apob-clinical-text {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--tx-2);
  text-wrap: pretty;
}
#apob-auc #apob-clinical-text strong {
  color: var(--mint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #apob-auc .apob-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Inputs first, then their effect (same input-then-output order as the other engines) */
    grid-template-areas:
      "ctrl ctrl"
      "chart chart"
      "burden thresh"
      "meter meter"
      "note note";
  }
}
@media (min-width: 900px) and (max-width: 1100px) {
  #apob-auc .apob-controls-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.75rem;
  }
  #apob-auc .apob-controls-card .apob-panel-head { grid-column: 1 / -1; }
  #apob-auc .apob-controls-card .apob-ctl { border-bottom: 0; }
  #apob-auc .apob-controls-card .apob-ctl .slider-labels { flex-wrap: wrap; }
  #apob-auc .apob-formula-foot { display: none; }
}
@media (max-width: 1100px) {
  #apob-auc .apob-kpi .thresh-val { margin-top: 0.2rem; }
}
@media (max-width: 720px) {
  #apob-auc .apob-card-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ctrl" "chart" "burden" "thresh" "meter" "note";
    gap: 14px;
  }
  #apob-auc .apob-panel { border-radius: 20px; }
  #apob-auc .apob-chart { height: 260px; }
  #apob-auc .apob-legend { gap: 0.35rem 0.8rem; }
  #apob-auc .apob-ring-wrap { width: 84px; height: 84px; }
}
@media (max-width: 480px) {
  #apob-auc .apob-ctl .slider-labels { align-items: flex-start; }
  #apob-auc .apob-ctl-icon { width: 32px; height: 32px; border-radius: 10px; }
  #apob-auc .apob-kpi-top { flex-wrap: wrap; }
  #apob-auc .apob-clinical-takeaway { flex-direction: column; gap: 0.8rem; }
  #apob-auc .apob-clinical-takeaway::before { display: none; }
  #apob-auc .apob-orb { display: none; }
  #apob-auc .apob-axis { height: 66px; }
  #apob-auc .apob-c-end text { font-size: 13px; }
  #apob-auc .traj-number { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.4rem; }
  #apob-auc .thresh-marker { height: 34px; }
  #apob-auc .thresh-marker-label { top: 36px; }
}
@media print {
  #apob-auc .apob-ambient { display: none; }
}

/* Phones: keep chart annotations at a readable size. */
@media (max-width: 480px) {
  #apob-auc .apob-c-avoided-label,
  #apob-auc .apob-c-start-text,
  #apob-auc .apob-c-cross-text { font-size: 11.5px; }
}

/* ---- 70-protocol.css ---- */
/* ==========================================================================
   06 · PROTOCOL BUILDER — 24-hour chronobiology experience
   Everything is scoped under #protocol-builder.
   Phase tints: dawn amber -> day mint -> late cyan -> dusk violet -> night indigo
   ========================================================================== */

#protocol-builder {
  --pb-dawn: 255 198 92;
  --pb-day: 60 242 180;
  --pb-late: 56 214 245;
  --pb-dusk: 166 140 255;
  --pb-night: 111 123 255;
  --pb-rail-x: 132px;          /* centre of the time rail inside the schedule */
  --pb-node: 34px;
  overflow: clip;
}

/* ---------- Atmosphere ---------- */
#protocol-builder .proto-atmos {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
#protocol-builder .proto-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.32;
}
#protocol-builder .proto-orb--dawn {
  width: 520px; height: 420px;
  top: 4%; left: -180px;
  background: radial-gradient(circle, rgb(var(--pb-dawn) / 0.55), transparent 65%);
  opacity: 0.22;
}
#protocol-builder .proto-orb--day {
  width: 620px; height: 520px;
  top: 38%; right: -240px;
  background: radial-gradient(circle, rgb(var(--pb-late) / 0.5), transparent 65%);
  opacity: 0.18;
}
#protocol-builder .proto-orb--dusk {
  width: 700px; height: 560px;
  bottom: -160px; left: 18%;
  background: radial-gradient(circle, rgb(var(--pb-night) / 0.6), transparent 65%);
  opacity: 0.26;
}

/* ---------- Shared micro type ---------- */
#protocol-builder .proto-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#protocol-builder .proto-kicker::before {
  content: "";
  width: 18px; height: 1px;
  background: linear-gradient(90deg, rgb(var(--pb-dawn)), rgb(var(--pb-dusk)));
}
#protocol-builder .proto-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---------- Archetype picker ---------- */
#protocol-builder .proto-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
#protocol-builder .proto-picker-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  color: var(--tx-3);
}
#protocol-builder .proto-picker-hint > span { margin-left: 0.35rem; }
#protocol-builder .proto-picker-hint kbd .i { width: 0.95em; height: 0.95em; }
#protocol-builder .proto-flip { transform: rotate(180deg); }

#protocol-builder .archetype-selector {
  counter-reset: pb-arch;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
#protocol-builder .archetype-tab {
  --t: var(--pb-dusk);
  counter-increment: pb-arch;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.1rem;
  min-height: 176px;
  padding: 18px 18px 20px;
  text-align: left;
  color: var(--tx-2);
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(var(--t) / 0.07), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line-1);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform var(--dur-2) var(--ease-out),
    border-color var(--dur-2) ease,
    background-color var(--dur-2) ease,
    box-shadow var(--dur-3) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
#protocol-builder .archetype-tab.arch--amber { --t: var(--pb-dawn); }
#protocol-builder .archetype-tab.arch--cyan { --t: var(--pb-late); }
#protocol-builder .archetype-tab.arch--mint { --t: var(--pb-day); }
#protocol-builder .archetype-tab::before {
  /* gradient hairline, visible when selected */
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgb(var(--t) / 0.9), rgb(var(--t) / 0.15) 40%, rgba(255, 255, 255, 0.04) 65%, rgb(var(--t) / 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
#protocol-builder .archetype-tab::after {
  /* soft bloom beneath the selected card */
  content: "";
  position: absolute;
  inset: auto 12% -18px;
  height: 36px;
  z-index: -2;
  border-radius: 50%;
  background: rgb(var(--t) / 0.4);
  filter: blur(22px);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
#protocol-builder .archetype-tab:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  color: var(--tx-1);
}
#protocol-builder .archetype-tab:active { transform: translateY(-1px) scale(0.985); }
#protocol-builder .archetype-tab.active {
  color: var(--tx-1);
  border-color: transparent;
  background:
    radial-gradient(130% 100% at 0% 0%, rgb(var(--t) / 0.2), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 50px -30px rgb(var(--t) / 0.7);
}
#protocol-builder .archetype-tab.active::before,
#protocol-builder .archetype-tab.active::after { opacity: 1; }
#protocol-builder .archetype-tab:focus-visible {
  outline: 2px solid rgb(var(--t));
  outline-offset: 3px;
  border-radius: 22px;
}

#protocol-builder .arch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
#protocol-builder .arch-icon {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  color: rgb(var(--t));
  background: linear-gradient(160deg, rgb(var(--t) / 0.2), rgb(var(--t) / 0.03));
  border: 1px solid rgb(var(--t) / 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-spring);
}
#protocol-builder .arch-icon .i { width: 22px; height: 22px; }
#protocol-builder .archetype-tab.active .arch-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 28px -10px rgb(var(--t) / 0.8);
  transform: scale(1.04);
}
#protocol-builder .arch-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--tx-3);
}
#protocol-builder .arch-check::before {
  content: counter(pb-arch, decimal-leading-zero);
}
#protocol-builder .arch-check .i {
  width: 24px; height: 24px;
  padding: 5px;
  border-radius: 50%;
  stroke-width: 2.6;
  color: transparent;
  border: 1px solid var(--line-2);
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-3) var(--ease-spring);
}
#protocol-builder .archetype-tab.active .arch-check { color: var(--tx-2); }
#protocol-builder .archetype-tab.active .arch-check .i {
  color: #06101a;
  background: rgb(var(--t));
  border-color: rgb(var(--t));
  box-shadow: 0 0 16px rgb(var(--t) / 0.6);
  transform: scale(1.06);
}
#protocol-builder .arch-text-stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: auto;
}
#protocol-builder .arch-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--tx-1);
}
#protocol-builder .arch-desc {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--tx-3);
}
#protocol-builder .archetype-tab.active .arch-desc { color: var(--tx-2); }

/* ---------- The panel ---------- */
#protocol-builder .protocol-container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 368px) minmax(0, 1fr);
  gap: clamp(1.25rem, 0.5rem + 2vw, 2.25rem);
  align-items: start;
  padding: clamp(1rem, 0.4rem + 2vw, 2rem);
  background:
    radial-gradient(80% 60% at 100% 0%, rgb(var(--pb-late) / 0.05), transparent 60%),
    radial-gradient(70% 50% at 0% 100%, rgb(var(--pb-night) / 0.08), transparent 60%),
    var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-highlight), var(--shadow-lg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
#protocol-builder .protocol-container::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--pb-dawn) / 0.55), rgb(var(--pb-day) / 0.55), rgb(var(--pb-late) / 0.5), rgb(var(--pb-dusk) / 0.55), transparent);
  pointer-events: none;
}

/* ----- Aside: dial + KPI tiles ----- */
#protocol-builder .proto-aside {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#protocol-builder .proto-dial-card {
  padding: 18px 18px 16px;
  background: rgba(3, 5, 9, 0.42);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#protocol-builder .proto-active-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--tx-2);
  text-align: right;
}
#protocol-builder .proto-dial {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin: 10px auto 6px;
  container: pb-dial / inline-size;
}
/* The SVG scales with the dial (viewBox is 284 units wide), so dial text is
   sized in user units times --pd-k, a counter-scale stepped by container
   width: rendered text stays >= 11px (labels) and >= 12px (phase readout). */
#protocol-builder .pd-svg { --pd-k: 1; width: 100%; height: 100%; overflow: visible; }
@container pb-dial (width < 284px) { #protocol-builder .pd-svg { --pd-k: 1.052; } }
@container pb-dial (width < 270px) { #protocol-builder .pd-svg { --pd-k: 1.11; } }
@container pb-dial (width < 256px) { #protocol-builder .pd-svg { --pd-k: 1.174; } }
@container pb-dial (width < 242px) { #protocol-builder .pd-svg { --pd-k: 1.246; } }
@container pb-dial (width < 228px) { #protocol-builder .pd-svg { --pd-k: 1.328; } }
@container pb-dial (width < 214px) { #protocol-builder .pd-svg { --pd-k: 1.42; } }
/* On the smallest dials the enlarged centre text moves toward the middle,
   where the core is widest, so the longest phase name stays inside it. */
@container pb-dial (width < 242px) {
  #protocol-builder .pd-center-label { transform: translateY(2px); }
  #protocol-builder .pd-center-sub { transform: translateY(-3px); letter-spacing: -0.01em; }
}
#protocol-builder .pd-face { fill: rgba(255, 255, 255, 0.015); stroke: var(--line-1); stroke-width: 1; }
#protocol-builder .pd-track { fill: none; stroke: rgba(255, 255, 255, 0.055); stroke-width: 13; }
#protocol-builder .pd-track--inner { stroke-width: 5; stroke: rgba(255, 255, 255, 0.04); }
#protocol-builder .pd-tick { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; stroke-linecap: round; }
#protocol-builder .pd-tick.is-major { stroke: rgba(255, 255, 255, 0.42); stroke-width: 1.5; }
#protocol-builder .pd-hour {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--pd-k));
  letter-spacing: 0.06em;
  fill: var(--tx-3);
}
#protocol-builder .pd-phase { fill: none; stroke-width: 13; stroke-linecap: butt; transition: stroke-width var(--dur-3) var(--ease-out); }
#protocol-builder .pd-phase.is-now { stroke-width: 16; }
#protocol-builder .pd-sleep { fill: none; stroke-width: 13; opacity: 0.55; }
#protocol-builder .pd-phase-dot { opacity: 0.9; }
#protocol-builder .pd-feed {
  fill: none;
  stroke: rgba(244, 247, 251, 0.78);
  stroke-width: 3;
  stroke-dasharray: 1.5 4.5;
  stroke-linecap: round;
}
#protocol-builder .pd-feed-cap { fill: var(--ink-1); stroke: var(--tx-1); stroke-width: 1.5; }
#protocol-builder .pd-core { stroke: var(--line-2); stroke-width: 1; }
#protocol-builder .pd-now-hand { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 3; }
#protocol-builder .pd-now-dot { fill: #ffffff; stroke: var(--ink-1); stroke-width: 1.5; }
#protocol-builder .pd-now-halo {
  fill: rgba(255, 255, 255, 0.16);
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: pb-halo 2.8s ease-in-out infinite;
}
#protocol-builder .pd-center-label {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--pd-k));
  letter-spacing: 0.12em;
  fill: var(--tx-3);
}
#protocol-builder .pd-center-time {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  fill: var(--tx-1);
}
#protocol-builder .pd-center-sub {
  font-family: var(--font-sans);
  font-size: calc(12px * var(--pd-k));
  font-weight: 500;
  fill: var(--mint);
}
#protocol-builder .pd-anim {
  transform-box: view-box;
  transform-origin: 120px 120px;
}
#protocol-builder .proto-dial.is-entering .pd-anim {
  animation: pb-dial-in 0.9s var(--ease-out) both;
}
@keyframes pb-dial-in {
  from { opacity: 0; transform: rotate(-28deg) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes pb-halo {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.45); opacity: 0.35; }
}

#protocol-builder .proto-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--tx-3);
}
#protocol-builder .proto-legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
#protocol-builder .proto-swatch { width: 16px; height: 6px; border-radius: 3px; flex: none; }
#protocol-builder .proto-swatch--phases {
  background: linear-gradient(90deg, rgb(var(--pb-dawn)), rgb(var(--pb-day)) 35%, rgb(var(--pb-late)) 65%, rgb(var(--pb-dusk)));
}
#protocol-builder .proto-swatch--feed {
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--tx-1) 0 2px, transparent 2px 5px);
}
#protocol-builder .proto-swatch--sleep { background: rgb(var(--pb-night) / 0.6); }

/* KPI glass tiles */
#protocol-builder .protocol-meta-bar {
  display: grid;
  gap: 10px;
}
#protocol-builder .meta-item {
  --k: var(--pb-dusk);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 15px 16px;
  background:
    radial-gradient(90% 120% at 0% 0%, rgb(var(--k) / 0.09), transparent 60%),
    rgba(255, 255, 255, 0.028);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#protocol-builder .meta-item--anchor { --k: var(--pb-dawn); }
#protocol-builder .meta-item--window { --k: var(--pb-day); }
#protocol-builder .meta-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  color: rgb(var(--k));
  background: rgb(var(--k) / 0.1);
  border: 1px solid rgb(var(--k) / 0.24);
}
#protocol-builder .meta-icon .i { width: 19px; height: 19px; }
#protocol-builder .meta-stack { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
#protocol-builder .meta-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#protocol-builder .meta-value {
  display: block;
  font-size: 0.98rem;
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--tx-1);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
#protocol-builder .meta-item--goal .meta-value {
  font-size: 1.12rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
#protocol-builder .is-swapping { animation: pb-swap 0.6s var(--ease-out) both; }
@keyframes pb-swap {
  from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ----- Schedule: vertical time rail ----- */
#protocol-builder .proto-schedule { min-width: 0; }
#protocol-builder .proto-schedule-head { margin: 4px 0 18px; }
#protocol-builder .proto-schedule-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#protocol-builder .proto-legend-word:first-child { color: var(--amber); }
#protocol-builder .proto-legend-word:last-child { color: #b3b9ff; }
#protocol-builder .proto-spectrum {
  width: 96px; height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--pb-dawn)), rgb(var(--pb-day)) 30%, rgb(var(--pb-late)) 55%, rgb(var(--pb-dusk)) 80%, rgb(var(--pb-night)));
  box-shadow: 0 0 12px rgb(var(--pb-late) / 0.35);
}

#protocol-builder .chronological-grid {
  position: relative;
  display: grid;
  gap: 14px;
}
#protocol-builder .chronological-grid::before {
  /* the rail itself */
  content: "";
  position: absolute;
  top: 18px; bottom: 18px;
  left: calc(var(--pb-rail-x) - 1px);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgb(var(--pb-dawn)) 0%,
    rgb(var(--pb-day)) 32%,
    rgb(var(--pb-late)) 58%,
    rgb(var(--pb-dusk)) 82%,
    rgb(var(--pb-night)) 100%);
  opacity: 0.55;
  box-shadow: 0 0 14px rgb(var(--pb-late) / 0.35);
}

#protocol-builder .chrono-card,
#protocol-builder .chrono-cap {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--pb-rail-x) - var(--pb-node) / 2 - 16px) var(--pb-node) minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}

/* Rail caps (wake / sleep anchor) */
#protocol-builder .chrono-cap { align-items: center; }
#protocol-builder .chrono-cap-time {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tx-2);
}
#protocol-builder .chrono-cap-node {
  display: grid;
  place-items: center;
  width: var(--pb-node); height: var(--pb-node);
  border-radius: 50%;
  background: var(--ink-1);
  border: 1px solid rgb(var(--c) / 0.5);
  color: rgb(var(--c));
  box-shadow: 0 0 0 5px var(--ink-1), 0 0 20px rgb(var(--c) / 0.35);
}
#protocol-builder .chrono-cap-node .i { width: 16px; height: 16px; }
#protocol-builder .chrono-cap--start { --c: var(--pb-dawn); }
#protocol-builder .chrono-cap--end { --c: var(--pb-night); }
#protocol-builder .chrono-cap-text {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#protocol-builder .chrono-cap--end .chrono-cap-text { color: #b3b9ff; }
#protocol-builder .chrono-cap--start .chrono-cap-text { color: var(--amber); }

/* Phase cards */
#protocol-builder .chrono-card { --ph: var(--pb-day); }
#protocol-builder .chrono-card.phase-morning { --ph: var(--pb-dawn); }
#protocol-builder .chrono-card.phase-midday { --ph: var(--pb-day); }
#protocol-builder .chrono-card.phase-afternoon { --ph: var(--pb-late); }
#protocol-builder .chrono-card.phase-evening { --ph: var(--pb-dusk); }

#protocol-builder .chrono-time-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  padding-top: 20px;
  text-align: right;
}
#protocol-builder .chrono-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#protocol-builder .chrono-time-start {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--tx-1);
}
#protocol-builder .chrono-time-sep {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#protocol-builder .chrono-time-end {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--tx-3);
}
#protocol-builder .chrono-time-end::before { content: "to "; color: var(--tx-3); }
#protocol-builder .chrono-dur {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgb(var(--ph));
  background: rgb(var(--ph) / 0.08);
  border: 1px solid rgb(var(--ph) / 0.2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
#protocol-builder .chrono-dur .i { width: 12px; height: 12px; }

#protocol-builder .chrono-node {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--pb-node); height: var(--pb-node);
  margin-top: 22px;
  border-radius: 50%;
  background: var(--ink-1);
  border: 1px solid rgb(var(--ph) / 0.55);
  box-shadow: 0 0 0 5px var(--ink-1), 0 0 26px rgb(var(--ph) / 0.45), inset 0 0 12px rgb(var(--ph) / 0.25);
}
#protocol-builder .chrono-node::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgb(var(--ph) / 0.25);
}
#protocol-builder .chrono-node-core {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, rgb(var(--ph)) 60%);
  box-shadow: 0 0 12px rgb(var(--ph)), 0 0 3px rgb(var(--ph));
}

#protocol-builder .chrono-body {
  position: relative;
  min-width: 0;
  padding: 20px 24px 20px;
  background:
    radial-gradient(90% 80% at 0% 0%, rgb(var(--ph) / 0.1), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid rgb(var(--ph) / 0.16);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-2) ease, box-shadow var(--dur-3) var(--ease-out);
}
#protocol-builder .chrono-body::before {
  /* pointer toward the rail */
  content: "";
  position: absolute;
  top: 38px; left: -9px;
  width: 9px; height: 1px;
  background: rgb(var(--ph) / 0.45);
}
#protocol-builder .chrono-card:hover .chrono-body {
  transform: translateX(3px);
  border-color: rgb(var(--ph) / 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 50px -30px rgb(var(--ph) / 0.55);
}

#protocol-builder .chrono-card-top { display: grid; gap: 0.6rem; }
#protocol-builder .chrono-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}
#protocol-builder .chrono-step { margin-left: auto; }
#protocol-builder .chrono-now {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 26px;
  padding: 0.2rem 0.65rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #06101a;
  background: rgb(var(--ph));
  border-radius: var(--radius-pill);
  box-shadow: 0 0 18px rgb(var(--ph) / 0.55);
}
#protocol-builder .chrono-now[hidden] { display: none; }
#protocol-builder .chrono-now-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #06101a;
  animation: pb-blink 1.8s ease-in-out infinite;
}
@keyframes pb-blink { 50% { opacity: 0.25; } }
#protocol-builder .chrono-card.is-now .chrono-body {
  border-color: rgb(var(--ph) / 0.5);
  background:
    radial-gradient(100% 90% at 0% 0%, rgb(var(--ph) / 0.18), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 28px 60px -34px rgb(var(--ph) / 0.8);
}
#protocol-builder .chrono-card.is-now .chrono-node::after {
  border-color: rgb(var(--ph) / 0.6);
  animation: pb-ring 2.4s var(--ease-out) infinite;
}
@keyframes pb-ring {
  from { transform: scale(0.85); opacity: 1; }
  to { transform: scale(1.7); opacity: 0; }
}
#protocol-builder .chrono-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 26px;
  padding: 0.2rem 0.65rem 0.2rem 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--ph));
  background: rgb(var(--ph) / 0.1);
  border: 1px solid rgb(var(--ph) / 0.26);
  border-radius: var(--radius-pill);
}
#protocol-builder .chrono-phase-badge .i { width: 14px; height: 14px; }
#protocol-builder .chrono-step {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--tx-4);
}
#protocol-builder .chrono-title {
  font-size: clamp(1.2rem, 1.02rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--tx-1);
}

#protocol-builder .chrono-action-list {
  display: grid;
  gap: 0;
  margin-top: 0.9rem;
}
#protocol-builder .chrono-action-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.62rem;
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--tx-2);
  border-top: 1px solid var(--line-1);
}
#protocol-builder .chrono-li-mark {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: 0.08rem;
  border-radius: 7px;
  color: rgb(var(--ph));
  background: rgb(var(--ph) / 0.1);
  border: 1px solid rgb(var(--ph) / 0.2);
}
#protocol-builder .chrono-li-mark .i { width: 12px; height: 12px; stroke-width: 2.4; }

#protocol-builder .chrono-evidence {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.55rem;
  max-width: 100%;
  margin-top: 0.7rem;
  padding: 0.38rem 0.8rem 0.38rem 0.4rem;
  font-size: var(--fs-xs);
  line-height: 1.35;
  background: rgba(3, 5, 9, 0.45);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
}
#protocol-builder .chrono-evidence-icon {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #c2b2ff;
  background: var(--violet-soft);
}
#protocol-builder .chrono-evidence-icon .i { width: 13px; height: 13px; }
#protocol-builder .chrono-evidence-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#protocol-builder .chrono-evidence-text { font-weight: 500; color: var(--tx-1); }

/* Staggered entrance when an archetype is chosen */
#protocol-builder .chronological-grid.is-entering > * {
  animation: pb-card-in 0.75s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 85ms + 60ms);
}
#protocol-builder .chronological-grid.is-entering > .chrono-cap--start { --i: -0.7; }
#protocol-builder .chronological-grid.is-entering > .chrono-cap--end { --i: 4.2; }
#protocol-builder .chronological-grid.is-entering .chrono-node {
  animation: pb-node-in 0.8s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 85ms + 120ms);
}
@keyframes pb-card-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes pb-node-in {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #protocol-builder .protocol-container { grid-template-columns: 1fr; }
  #protocol-builder .proto-aside {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: stretch;
  }
  #protocol-builder .protocol-meta-bar { grid-auto-rows: 1fr; }
  #protocol-builder .meta-item { align-items: center; }
  #protocol-builder .meta-item--goal .meta-value { font-size: 1.25rem; }
}
@media (max-width: 1024px) {
  #protocol-builder .archetype-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #protocol-builder .archetype-tab { min-height: 150px; }
}
@media (max-width: 720px) {
  #protocol-builder { --pb-rail-x: 17px; --pb-node: 34px; }
  #protocol-builder .proto-picker-hint { display: none; }
  #protocol-builder .proto-aside { grid-template-columns: 1fr; }
  #protocol-builder .proto-dial { width: min(100%, 272px); }
  #protocol-builder .archetype-selector { grid-template-columns: 1fr; gap: 10px; }
  #protocol-builder .archetype-tab {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 0;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
  }
  #protocol-builder .archetype-tab:focus-visible { border-radius: 18px; }
  #protocol-builder .arch-top { display: contents; }
  #protocol-builder .arch-icon { grid-row: 1; grid-column: 1; width: 42px; height: 42px; }
  #protocol-builder .arch-check { position: absolute; top: 12px; right: 12px; }
  #protocol-builder .arch-check::before { display: none; }
  #protocol-builder .arch-text-stack { grid-row: 1; grid-column: 2; margin-top: 0; padding-right: 30px; gap: 0.2rem; }
  #protocol-builder .arch-title { font-size: 1rem; }
  #protocol-builder .arch-desc { font-size: 0.8rem; }

  #protocol-builder .chrono-card,
  #protocol-builder .chrono-cap {
    grid-template-columns: var(--pb-node) minmax(0, 1fr);
    column-gap: 12px;
  }
  #protocol-builder .chrono-cap { grid-template-columns: var(--pb-node) auto minmax(0, 1fr); }
  #protocol-builder .chrono-cap-node {
    grid-column: 1; grid-row: 1;
    justify-self: center;
    width: 26px; height: 26px;
    box-shadow: 0 0 0 4px var(--ink-1), 0 0 16px rgb(var(--c) / 0.35);
  }
  #protocol-builder .chrono-cap-node .i { width: 13px; height: 13px; }
  #protocol-builder .chrono-cap--start { margin-bottom: 6px; }
  #protocol-builder .chrono-cap--end { margin-top: 4px; }
  #protocol-builder .chrono-cap-time { grid-column: 2; grid-row: 1; justify-self: start; font-size: 0.88rem; }
  #protocol-builder .chrono-cap-text { grid-column: 3; grid-row: 1; }
  #protocol-builder .chrono-card { grid-template-rows: auto auto; row-gap: 8px; }
  #protocol-builder .chrono-node { grid-column: 1; grid-row: 1; margin-top: 0; }
  #protocol-builder .chrono-time-col {
    grid-column: 2; grid-row: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    min-height: var(--pb-node);
  }
  #protocol-builder .chrono-time { flex-direction: row; align-items: baseline; gap: 0.5rem; }
  #protocol-builder .chrono-time-start { font-size: 1.45rem; }
  #protocol-builder .chrono-time-end { margin-top: 0; }
  #protocol-builder .chrono-body { grid-column: 2; grid-row: 2; padding: 16px 16px 16px; border-radius: 18px; }
  #protocol-builder .chrono-body::before { display: none; }
  #protocol-builder .chrono-card:hover .chrono-body { transform: none; }
  #protocol-builder .chrono-action-list li { font-size: 0.9rem; }
  #protocol-builder .chrono-evidence { border-radius: 14px; }
}
@media (max-width: 480px) {
  #protocol-builder .protocol-container { padding: 12px; border-radius: var(--radius-lg); }
  #protocol-builder .proto-dial-card { padding: 16px 14px 14px; }
  #protocol-builder .meta-item { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 13px 14px; }
  #protocol-builder .meta-icon { width: 36px; height: 36px; }
  #protocol-builder .proto-schedule-legend { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #protocol-builder .pd-now-halo,
  #protocol-builder .chrono-now-dot,
  #protocol-builder .chrono-card.is-now .chrono-node::after { animation: none; }
  #protocol-builder .chronological-grid.is-entering > *,
  #protocol-builder .chronological-grid.is-entering .chrono-node,
  #protocol-builder .proto-dial.is-entering .pd-anim,
  #protocol-builder .is-swapping { animation: none; }
}

@media print {
  #protocol-builder .proto-atmos { display: none; }
}

/* ---- 80-calculator.css ---- */
/* ==========================================================================
   07 — PHENOTYPIC BIOLOGICAL AGE CALCULATOR  (owner: calculator)
   Glass input form + "readout" panel: dual-ring age gauge, pace dial,
   healthspan KPI and priority callout. Everything scoped under #calculator.
   State: .calc-output.is-good | .is-risk (set by initPhenotypicCalculator).
   ========================================================================== */

#calculator { --calc-r-panel: 28px; --calc-r-tile: 20px; }

/* ---- Atmosphere --------------------------------------------------------- */
#calculator .calc-atmos {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#calculator .calc-atmos-grid {
  position: absolute;
  inset: 12% 0 0 30%;
  opacity: 0.8;
}
#calculator .calc-atmos-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
#calculator .calc-atmos-orb--a {
  width: 560px; height: 560px;
  right: -140px; top: 22%;
  background: radial-gradient(circle, rgba(56, 214, 245, 0.2), transparent 65%);
}
#calculator .calc-atmos-orb--b {
  width: 460px; height: 460px;
  right: 18%; bottom: -120px;
  background: radial-gradient(circle, rgba(166, 140, 255, 0.16), transparent 65%);
}

/* ---- Layout --------------------------------------------------------------- */
#calculator .calc-box {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

#calculator .calc-inputs,
#calculator .calc-output {
  border-radius: var(--calc-r-panel);
  padding: clamp(20px, 2.4vw, 32px);
}

/* Panel heads (shared by both panels) */
#calculator .calc-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-1);
}
#calculator .calc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-2);
}
#calculator .calc-eyebrow .i { width: 16px; height: 16px; color: var(--mint); }
#calculator .calc-hint-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 11px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.025);
}
#calculator .calc-hint-chip .i { width: 13px; height: 13px; color: var(--cyan); }
#calculator .calc-model-chip { color: #c2b2ff; border-color: rgba(166, 140, 255, 0.28); background: var(--violet-soft); }
#calculator .calc-model-chip .i { color: #c2b2ff; }

/* ---- Mini readout (small screens only) -------------------------------- */
#calculator .calc-mini { display: none; }
@media (max-width: 1024px) {
  #calculator .calc-mini {
    --st: var(--mint);
    --st-rgb: 60, 242, 180;
    position: sticky;
    top: calc(var(--header-h) + 28px);
    z-index: 5;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 0;
    overflow: visible;
    pointer-events: none;
  }
  #calculator .calc-mini > * { translate: 0 -8px; }
  #calculator .calc-mini::before {
    content: "";
    position: absolute;
    left: -16px; right: -16px;
    top: -30px; height: 44px;
    border-radius: var(--radius-pill);
    background: rgba(11, 15, 24, 0.94);
    border: 1px solid rgba(var(--st-rgb), 0.3);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    z-index: -1;
  }
  #calculator .calc-mini { opacity: 0; transform: translateY(-8px) scale(0.96); transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out); }
  #calculator .calc-mini.is-on { opacity: 1; transform: none; }
  #calculator .calc-mini.is-risk { --st: var(--coral); --st-rgb: 255, 107, 107; }
  #calculator .calc-mini-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st); box-shadow: 0 0 10px var(--st); }
  #calculator .calc-mini-label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
  #calculator .calc-mini-val { font-family: var(--font-mono); font-size: 0.74rem; color: var(--tx-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
  #calculator .calc-mini-val b { font-size: 0.98rem; font-weight: 600; color: var(--tx-1); }
  #calculator .calc-mini-sep { width: 1px; height: 16px; background: var(--line-2); }
}

/* ---- Input form ----------------------------------------------------------- */
#calculator .calc-inputs {
  display: flex;
  flex-direction: column;
}
#calculator .calc-field {
  --acc: var(--mint);
  --acc-2: var(--cyan);
  --acc-text: var(--mint);
  --acc-rgb: 60, 242, 180;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: center;
  gap: 18px;
  padding-block: 22px;
}
#calculator .calc-field--strength { border-bottom: 1px solid var(--line-1); }
@media (min-width: 1025px) {
  #calculator .calc-field { flex: 1 1 auto; max-height: 172px; }
  #calculator .calc-output .output-metrics-grid { flex: 1 1 auto; }
}
#calculator .calc-field--age { --acc: #5b8dff; --acc-2: var(--sky); --acc-text: #9cc4ff; --acc-rgb: 106, 168, 255; }
#calculator .calc-field--sleep { --acc: #7f6bff; --acc-2: var(--violet); --acc-text: #c2b2ff; --acc-rgb: 166, 140, 255; }
#calculator .calc-field--strength { --acc: var(--cyan); --acc-2: #7fe6ff; --acc-text: var(--cyan); --acc-rgb: 56, 214, 245; }
#calculator .calc-field-icon { margin-top: 1px; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease; }
#calculator .calc-field:focus-within .calc-field-icon,
#calculator .calc-field:hover .calc-field-icon { transform: translateY(-2px) scale(1.04); }

#calculator .calc-field .slider-labels { align-items: flex-start; margin-bottom: 8px; }
#calculator .calc-field .slider-title {
  font-size: 0.98rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  padding-top: 3px;
}
#calculator .calc-field .slider-display {
  min-width: 5.5rem;
  text-align: center;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  color: var(--acc-text);
  background: rgba(var(--acc-rgb), 0.09);
  border-color: rgba(var(--acc-rgb), 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px -10px rgba(var(--acc-rgb), 0.6);
}
#calculator .calc-field .slider-note { font-size: 0.82rem; margin-top: 6px; }

/* Per-field slider accent */
#calculator .calc-field .clean-slider::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, var(--acc), var(--acc-2)) 0 0 / var(--p) 100% no-repeat,
    rgba(255, 255, 255, 0.08);
}
#calculator .calc-field .clean-slider::-webkit-slider-thumb {
  border-color: var(--acc-2);
  box-shadow: 0 0 0 6px rgba(var(--acc-rgb), 0.12), 0 4px 14px rgba(0, 0, 0, 0.55);
}
#calculator .calc-field .clean-slider:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 9px rgba(var(--acc-rgb), 0.16), 0 0 24px rgba(var(--acc-rgb), 0.5);
}
#calculator .calc-field .clean-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #03050a, 0 0 0 5px var(--acc-2), 0 0 24px rgba(var(--acc-rgb), 0.55);
}
#calculator .calc-field .clean-slider::-moz-range-progress { background: linear-gradient(90deg, var(--acc), var(--acc-2)); }
#calculator .calc-field .clean-slider::-moz-range-thumb { border-color: var(--acc-2); }

/* ---- Per-habit impact (diverging bars) ---------------------------------- */
#calculator .calc-offsets {
  margin-top: auto;
  padding-top: 22px;
}
#calculator .calc-offsets-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
}
#calculator .calc-offsets-axis {
  display: inline-flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#calculator .calc-offsets-axis span { display: inline-flex; align-items: center; gap: 6px; }
#calculator .calc-offsets-axis span::before { content: ""; width: 10px; height: 4px; border-radius: 2px; background: currentColor; }
#calculator .calc-offsets-axis .is-good { color: var(--mint); }
#calculator .calc-offsets-axis .is-risk { color: #ff8f8f; }
#calculator .calc-offsets-list {
  list-style: none;
  display: grid;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 16px;
  background: rgba(3, 5, 9, 0.4);
  border: 1px solid var(--line-1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
#calculator .calc-off {
  --oc: var(--mint);
  --oc-rgb: 60, 242, 180;
  display: grid;
  grid-template-columns: 128px minmax(0, 420px) 64px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 34px;
}
#calculator .calc-off.is-risk { --oc: #ff8f8f; --oc-rgb: 255, 107, 107; }
#calculator .calc-off-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--tx-2);
  white-space: nowrap;
}
#calculator .calc-off-name .i { width: 15px; height: 15px; color: var(--tx-3); }
#calculator .calc-off-bar {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
}
#calculator .calc-off-bar::after {
  content: "";
  position: absolute;
  left: 50%; top: -5px; bottom: -5px;
  width: 1px;
  background: rgba(255, 255, 255, 0.34);
}
#calculator .calc-off-fill {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  left: 0;
  border-radius: 99px 0 0 99px;
  transform-origin: 100% 50%;
  transform: scaleX(var(--w, 0));
  background: linear-gradient(270deg, rgba(var(--oc-rgb), 0.35), var(--oc));
  box-shadow: 0 0 12px rgba(var(--oc-rgb), 0.45);
  transition: transform var(--dur-3) var(--ease-out), background var(--dur-2) ease;
}
#calculator .calc-off.is-risk .calc-off-fill {
  left: 50%;
  border-radius: 0 99px 99px 0;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(var(--oc-rgb), 0.35), var(--oc));
}
#calculator .calc-off-val {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--oc);
}

/* ---- Readout panel -------------------------------------------------------- */
#calculator .calc-output {
  --st: var(--mint);
  --st-2: var(--cyan);
  --st-text: var(--mint);
  --st-rgb: 60, 242, 180;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 18% 0%, rgba(var(--st-rgb), 0.10), transparent 60%),
    radial-gradient(70% 50% at 100% 100%, rgba(166, 140, 255, 0.08), transparent 60%),
    var(--glass-bg-strong);
  transition: box-shadow var(--dur-3) ease;
}
#calculator .calc-output.is-risk {
  --st: var(--coral);
  --st-2: var(--amber);
  --st-text: #ff8f8f;
  --st-rgb: 255, 107, 107;
}
/* gradient hairline border */
#calculator .calc-output::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(var(--st-rgb), 0.55), rgba(255, 255, 255, 0.06) 32%, rgba(255, 255, 255, 0.03) 62%, rgba(166, 140, 255, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
#calculator .calc-output > * { position: relative; }

#calculator .calc-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--st);
  box-shadow: 0 0 0 3px rgba(var(--st-rgb), 0.16), 0 0 12px var(--st);
  animation: calc-live 2.4s ease-in-out infinite;
}
@keyframes calc-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Hero row: ring + summary */
#calculator .calc-hero {
  display: grid;
  grid-template-columns: minmax(0, 296px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 2.6vw, 36px);
  padding-block: 24px 10px;
}

/* ---- Dual ring gauge ------------------------------------------------------ */
#calculator .calc-ring {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin-inline: auto;
}
#calculator .calc-ring::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--st-rgb), 0.22), transparent 70%);
  filter: blur(24px);
  transition: background var(--dur-3) ease;
}
#calculator .calc-ring-svg { position: relative; width: 100%; height: 100%; overflow: visible; }
#calculator .calc-ring-core { transition: opacity var(--dur-3) ease; }
#calculator .calc-output.is-risk .calc-ring-core { opacity: 0.35; }

#calculator .calc-ring-ticks line { stroke: rgba(255, 255, 255, 0.13); stroke-width: 1.2; stroke-linecap: round; }
#calculator .calc-ring-ticks line.is-major { stroke: rgba(255, 255, 255, 0.36); stroke-width: 1.6; }

#calculator .calc-arc-track,
#calculator .calc-arc { fill: none; stroke-linecap: round; }
#calculator .calc-arc-track { stroke: rgba(255, 255, 255, 0.055); }
#calculator .calc-arc-track--chrono { stroke-width: 7; }
#calculator .calc-arc-track--bio { stroke-width: 15; stroke: rgba(255, 255, 255, 0.045); }

#calculator .calc-arc {
  transition:
    stroke-dasharray 1.1s var(--ease-out),
    stroke-dashoffset 1.1s var(--ease-out),
    opacity var(--dur-2) ease;
}
#calculator .calc-arc.is-empty { opacity: 0; }
#calculator .calc-arc-chrono {
  stroke: rgba(226, 233, 244, 0.78);
  stroke-width: 7;
  stroke-dasharray: 38 200;
}
#calculator .calc-arc-bio {
  stroke: url(#calc-grad-good);
  stroke-width: 15;
  stroke-dasharray: 31.8 200;
  filter: drop-shadow(0 0 7px rgba(60, 242, 180, 0.5));
}
#calculator .calc-output.is-risk .calc-arc-bio {
  stroke: url(#calc-grad-risk);
  filter: drop-shadow(0 0 7px rgba(255, 107, 107, 0.5));
}
#calculator .calc-arc-delta {
  stroke: var(--st);
  stroke-width: 2.5;
  stroke-dasharray: 6.2 200;
  stroke-dashoffset: -31.8;
  opacity: 0.95;
  filter: drop-shadow(0 0 4px rgba(var(--st-rgb), 0.8));
}

#calculator .calc-ring-marker {
  transform-box: view-box;
  transform-origin: 120px 120px;
  transform: rotate(var(--a, 135deg));
  transition: transform 1.1s var(--ease-out);
}
#calculator .calc-ring-marker--chrono circle { fill: #eef3fa; stroke: var(--ink-1); stroke-width: 2; }
#calculator .calc-ring-marker--bio circle { fill: #ffffff; stroke: var(--st); stroke-width: 3; }
#calculator .calc-ring-marker--bio .calc-marker-halo {
  fill: rgba(var(--st-rgb), 0.28);
  stroke: none;
  animation: calc-halo 2.6s ease-in-out infinite;
}
@keyframes calc-halo {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.25; }
}

#calculator .calc-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 2%;
  pointer-events: none;
}
#calculator .calc-ring-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* --tx-2: the ring's core glow lightens the ground behind the centre text */
  color: var(--tx-2);
}
#calculator .output-age-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}
#calculator .output-number {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.9rem + 2vw, 3.4rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, #ffffff 20%, #a6fbe0 60%, #6fe3f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#calculator .calc-output.is-risk .output-number {
  background-image: linear-gradient(160deg, #ffffff 20%, #ffd79a 60%, #ff9a9a);
}
#calculator .output-unit {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--tx-2);
}
#calculator .calc-ring-sub {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--tx-2);
}
#calculator .calc-ring-sub b { color: var(--tx-1); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Summary column ------------------------------------------------------- */
#calculator .calc-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
#calculator .calc-summary-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#calculator .calc-delta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.14rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--tx-1);
  border-radius: 16px;
  border: 1px solid rgba(60, 242, 180, 0.28);
  background: linear-gradient(135deg, rgba(60, 242, 180, 0.13), rgba(56, 214, 245, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 30px -18px rgba(60, 242, 180, 0.6);
  transition: background var(--dur-3) ease, border-color var(--dur-3) ease, box-shadow var(--dur-3) ease;
}
#calculator .calc-delta .i {
  width: 30px; height: 30px;
  padding: 6px;
  margin-top: 2px;
  border-radius: 9px;
  color: #02130c;
  background: var(--mint);
  box-shadow: 0 0 16px rgba(60, 242, 180, 0.55);
  stroke-width: 2.2;
}
#calculator .calc-delta-text {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--tx-2);
  text-wrap: balance;
}
#calculator .calc-delta-num {
  display: block;
  margin-bottom: 3px;
  font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.8rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--mint);
}
#calculator .calc-delta.is-risk .calc-delta-num { color: #ff8f8f; }
#calculator .calc-delta.is-risk {
  border-color: rgba(255, 107, 107, 0.34);
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(255, 198, 92, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 30px -18px rgba(255, 107, 107, 0.6);
}
#calculator .calc-delta.is-risk .i {
  color: #1d0707;
  background: #ff8f8f;
  box-shadow: 0 0 16px rgba(255, 107, 107, 0.55);
}

#calculator .calc-legend { list-style: none; display: grid; }
#calculator .calc-legend-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-block: 11px;
  border-top: 1px solid var(--line-1);
}
#calculator .calc-legend-item:last-child { border-bottom: 1px solid var(--line-1); }
#calculator .calc-swatch { height: 6px; border-radius: 99px; }
#calculator .calc-legend-item--chrono .calc-swatch { height: 4px; background: rgba(226, 233, 244, 0.78); }
#calculator .calc-legend-item--bio .calc-swatch { background: linear-gradient(90deg, #5bf7c2, #38d6f5, #a68cff); box-shadow: 0 0 10px rgba(60, 242, 180, 0.5); }
#calculator .calc-output.is-risk .calc-legend-item--bio .calc-swatch { background: linear-gradient(90deg, #ffc65c, #ff6b6b, #ff7eb6); box-shadow: 0 0 10px rgba(255, 107, 107, 0.5); }
#calculator .calc-legend-name { font-size: var(--fs-sm); color: var(--tx-2); }
#calculator .calc-legend-val {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}
#calculator .calc-legend-val b { font-size: 1.1rem; font-weight: 600; color: var(--tx-1); margin-right: 2px; }

/* ---- Metric tiles --------------------------------------------------------- */
#calculator .output-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
#calculator .calc-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 18px 20px 20px;
  border-radius: var(--calc-r-tile);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(3, 5, 9, 0.35));
  border: 1px solid var(--line-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
#calculator .calc-tile:hover { border-color: var(--line-2); transform: translateY(-2px); }
#calculator .metric-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-2);
}
#calculator .metric-kicker .i { width: 15px; height: 15px; color: var(--cyan); }
#calculator .calc-tile--span .metric-kicker .i { color: var(--rose); }
#calculator .metric-hint {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--tx-3);
}

/* Pace dial */
#calculator .calc-dial {
  width: 100%;
  max-width: 250px;
  margin: 4px auto 0;
}
#calculator .calc-dial-svg { width: 100%; height: auto; overflow: visible; }
#calculator .calc-dial-track,
#calculator .calc-dial-arc {
  fill: none;
  stroke: url(#calc-grad-pace);
  stroke-width: 10;
  stroke-linecap: round;
}
#calculator .calc-dial-track { opacity: 0.16; }
#calculator .calc-dial-arc {
  stroke-dasharray: 30 200;
  filter: drop-shadow(0 0 5px rgba(56, 214, 245, 0.45));
  transition: stroke-dasharray 1.1s var(--ease-out), opacity var(--dur-2) ease;
}
#calculator .calc-dial-arc.is-empty { opacity: 0; }
#calculator .calc-dial-ticks line { stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.3; stroke-linecap: round; }
#calculator .calc-dial-ticks line.is-major { stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.8; }
#calculator .calc-dial-needle {
  transform-box: view-box;
  transform-origin: 110px 110px;
  transform: rotate(var(--a, -34deg));
  transition: transform 1.2s var(--ease-spring);
}
#calculator .calc-dial-needle path {
  fill: #f4f7fb;
  filter: drop-shadow(0 0 6px rgba(var(--st-rgb), 0.7));
}
#calculator .calc-dial-hub { fill: var(--ink-2); stroke: rgba(255, 255, 255, 0.22); stroke-width: 2; }
#calculator .calc-dial-hub-dot { fill: var(--st); }
#calculator .calc-dial-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  padding-inline: 2px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#calculator .calc-dial-scale span:nth-child(2) { color: var(--tx-2); }

#calculator .calc-tile--pace { align-items: stretch; }
#calculator .calc-tile--span .metric-hint { margin-top: auto; }
#calculator .calc-tile--pace .metric-value,
#calculator .calc-tile--pace .metric-hint { text-align: center; }
#calculator #output-rate {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--tx-1);
  transition: color var(--dur-2) ease;
}
#calculator #output-rate.is-good { color: var(--mint); }
#calculator #output-rate.is-risk { color: #ff8f8f; }

/* Healthspan KPI */
#calculator .calc-kpi {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.2rem + 2.4vw, 4.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  color: var(--tx-1);
}
#calculator .calc-kpi-unit {
  margin-left: 2px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tx-3);
}
#calculator .calc-span-track {
  position: relative;
  height: 8px;
  margin: 20px 0 34px;
  border-radius: 99px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, 0.1) calc(10% - 1px) 10%),
    rgba(255, 255, 255, 0.06);
}
#calculator .calc-span-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: 0 50%;
  transform: scaleX(var(--f, 0.91));
  background: linear-gradient(90deg, #5bf7c2, #38d6f5 60%, #a68cff);
  box-shadow: 0 0 14px rgba(56, 214, 245, 0.45);
  transition: transform 1.1s var(--ease-out);
}
#calculator .calc-output.is-risk .calc-span-fill {
  background: linear-gradient(90deg, #ffc65c, #ff6b6b 70%, #ff7eb6);
  box-shadow: 0 0 14px rgba(255, 107, 107, 0.45);
}
#calculator .calc-span-lived {
  position: absolute;
  left: 0; top: -1px; bottom: -1px;
  width: calc(var(--now, 0.38) * 100%);
  border-radius: 99px 0 0 99px;
  background: repeating-linear-gradient(135deg, rgba(7, 10, 17, 0.72) 0 3px, rgba(7, 10, 17, 0.5) 3px 6px);
  transition: width 1.1s var(--ease-out);
}
#calculator .calc-span-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: -8px;
  font-size: 0.76rem;
  color: var(--tx-3);
}
#calculator .calc-span-key-item { display: inline-flex; align-items: center; gap: 7px; }
#calculator .calc-span-key-item::before { content: ""; width: 14px; height: 6px; border-radius: 3px; }
#calculator .calc-span-key-item--lived::before { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.28) 0 2px, rgba(255,255,255,0.1) 2px 4px); }
#calculator .calc-span-key-item--ahead::before { background: linear-gradient(90deg, #38d6f5, #a68cff); box-shadow: 0 0 8px rgba(56, 214, 245, 0.5); }
#calculator .calc-output.is-risk .calc-span-key-item--ahead::before { background: linear-gradient(90deg, #ff6b6b, #ff7eb6); box-shadow: 0 0 8px rgba(255, 107, 107, 0.5); }
#calculator .calc-span-now {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: calc(var(--f, 0.38) * 100%);
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 0 0 2px var(--ink-2), 0 0 10px rgba(255, 255, 255, 0.7);
  transition: left 1.1s var(--ease-out);
}
#calculator .calc-span-now span {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-2);
  white-space: nowrap;
}

/* ---- Priority callout ----------------------------------------------------- */
#calculator .calc-tip {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  margin-top: 14px;
  padding: 20px 22px 20px 20px;
  border-radius: var(--calc-r-tile);
  border: 1px solid rgba(var(--st-rgb), 0.2);
  background: linear-gradient(110deg, rgba(var(--st-rgb), 0.1), rgba(56, 214, 245, 0.035) 55%, rgba(166, 140, 255, 0.05));
  overflow: hidden;
  transition: background var(--dur-3) ease, border-color var(--dur-3) ease;
}
#calculator .calc-tip::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--st), var(--st-2));
  box-shadow: 0 0 12px rgba(var(--st-rgb), 0.7);
}
#calculator .calc-output.is-risk .calc-tip-icon {
  color: var(--amber);
  background: linear-gradient(160deg, rgba(255, 198, 92, 0.18), rgba(255, 198, 92, 0.03));
  border-color: rgba(255, 198, 92, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px -12px rgba(255, 198, 92, 0.5);
}
#calculator .rec-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--st-text);
}
#calculator .rec-text {
  margin-top: 6px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--tx-1);
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1180px) {
  #calculator .calc-hero { grid-template-columns: minmax(0, 244px) minmax(0, 1fr); }
  #calculator .calc-off { grid-template-columns: 116px minmax(0, 1fr) 60px; gap: 10px; }
}
@media (max-width: 1024px) {
  #calculator .calc-box { grid-template-columns: minmax(0, 1fr); }
  #calculator .calc-hero { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); }
  #calculator .calc-atmos-grid { inset: 30% 0 0 0; }
}
@media (max-width: 640px) {
  #calculator .calc-hero { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
  #calculator .calc-ring { max-width: 290px; }
  #calculator .output-metrics-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  #calculator { --calc-r-panel: 24px; --calc-r-tile: 18px; }
  #calculator .calc-inputs,
  #calculator .calc-output { padding: 18px; }
  #calculator .calc-field { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-block: 20px; }
  #calculator .calc-field-icon { width: 36px; height: 36px; border-radius: 11px; }
  #calculator .calc-field-icon .i { width: 18px; height: 18px; }
  #calculator .calc-field .slider-labels { flex-wrap: wrap; gap: 8px 12px; }
  #calculator .calc-field .slider-display { min-width: 0; }
  #calculator .calc-hint-chip:not(.calc-model-chip) { display: none; }
  #calculator .calc-tip { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; }
  #calculator .calc-tile { padding: 16px 16px 18px; }
  #calculator .calc-offsets-list { padding: 8px 12px; }
  #calculator .calc-off { grid-template-columns: 96px minmax(0, 1fr) 58px; gap: 10px; }
  #calculator .calc-off-name .i { display: none; }
  #calculator .calc-atmos-orb--a { width: 360px; height: 360px; right: -160px; }
}

/* Touch: bigger thumbs */
@media (pointer: coarse) {
  #calculator .calc-field .clean-slider { --thumb: 28px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  #calculator .calc-live-dot,
  #calculator .calc-marker-halo { animation: none; }
}

@media print {
  #calculator .calc-atmos { display: none; }
}

/* ---- 90-checklist.css ---- */
/* ==========================================================================
   08 · DOCTOR'S LAB CHECKLIST — "Lab requisition"
   Everything scoped under #lab-checklist / .lbc-*.
   Print rules (at the bottom) are scoped under body:not(.printing-dossier).
   ========================================================================== */

#lab-checklist {
  --lbc-pad-x: clamp(1.1rem, 0.6rem + 1.6vw, 1.9rem);
  --lbc-radius: 28px;
  overflow-x: clip;
}

/* ---------- ambient field ---------- */
#lab-checklist .lbc-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
#lab-checklist .lbc-ambient-grid {
  position: absolute;
  inset: 18% 0 0;
  opacity: 0.7;
}
#lab-checklist .lbc-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
#lab-checklist .lbc-orb-a {
  width: 560px; height: 420px;
  top: 30%; left: -180px;
  background: radial-gradient(circle, rgba(60, 242, 180, 0.16), transparent 65%);
}
#lab-checklist .lbc-orb-b {
  width: 620px; height: 480px;
  bottom: 4%; right: -220px;
  background: radial-gradient(circle, rgba(166, 140, 255, 0.16), transparent 65%);
}

/* ---------- intro: head + how-to rail ---------- */
#lab-checklist .lbc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: end;
  gap: 2rem clamp(2rem, 4vw, 4.5rem);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.25rem);
}
#lab-checklist .lbc-intro .section-head { margin-bottom: 0; }
#lab-checklist .lbc-steps {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0 0 0.35rem;
  padding: 0;
  list-style: none;
  counter-reset: lbc-step;
}
/* dashed spine that links the three step icons */
#lab-checklist .lbc-steps::before {
  content: "";
  position: absolute;
  top: 22px; bottom: 22px; left: 19px;
  border-left: 1px dashed rgba(60, 242, 180, 0.3);
}
#lab-checklist .lbc-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0;
  counter-increment: lbc-step;
}
#lab-checklist .lbc-step-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 12px;
  color: var(--mint);
  background: linear-gradient(160deg, rgba(60, 242, 180, 0.16), rgba(8, 12, 20, 0.95) 70%);
  border: 1px solid rgba(60, 242, 180, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 22px -12px rgba(60, 242, 180, 0.55);
}
#lab-checklist .lbc-step:nth-child(2) .lbc-step-ico { color: var(--cyan); border-color: rgba(56, 214, 245, 0.26); background: linear-gradient(160deg, rgba(56, 214, 245, 0.16), rgba(8, 12, 20, 0.95) 70%); }
#lab-checklist .lbc-step:nth-child(3) .lbc-step-ico { color: #c2b2ff; border-color: rgba(166, 140, 255, 0.28); background: linear-gradient(160deg, rgba(166, 140, 255, 0.18), rgba(8, 12, 20, 0.95) 70%); }
#lab-checklist .lbc-step-ico .i { width: 18px; height: 18px; }
#lab-checklist .lbc-step-text {
  display: grid;
  gap: 0.15rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tx-1);
}
#lab-checklist .lbc-step-k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#lab-checklist .lbc-step-k::before { content: "Step " counter(lbc-step, decimal-leading-zero); }

#lab-checklist .print-only-sheet-header,
#lab-checklist .print-doctor-notes { display: none; }

#lab-checklist .badge-pill .i { width: 14px; height: 14px; }

/* ---------- the requisition card ---------- */
#lab-checklist .lbc-card {
  position: relative;
  border-radius: var(--lbc-radius);
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(60, 242, 180, 0.07), transparent 70%),
    radial-gradient(700px 240px at 100% 0%, rgba(166, 140, 255, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(20, 27, 43, 0.82) 0%, rgba(9, 12, 20, 0.9) 100%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 50px 120px -50px rgba(0, 0, 0, 0.95),
    0 30px 80px -60px rgba(60, 242, 180, 0.35);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  overflow: clip;
}
/* luminous top edge */
#lab-checklist .lbc-card::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(60, 242, 180, 0.7) 30%, rgba(56, 214, 245, 0.6) 55%, rgba(166, 140, 255, 0.6) 75%, transparent);
  pointer-events: none;
}

/* form strip */
#lab-checklist .lbc-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.05rem var(--lbc-pad-x);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
#lab-checklist .lbc-form-id {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
#lab-checklist .lbc-form-tile {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 12px;
  color: var(--mint);
  background: linear-gradient(160deg, rgba(60, 242, 180, 0.2), rgba(60, 242, 180, 0.03));
  border: 1px solid rgba(60, 242, 180, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px -12px rgba(60, 242, 180, 0.6);
}
#lab-checklist .lbc-form-tile .i { width: 20px; height: 20px; }
#lab-checklist .lbc-form-text { display: grid; gap: 0.15rem; }
#lab-checklist .lbc-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
#lab-checklist .lbc-form-title {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tx-1);
}
#lab-checklist .lbc-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 30px;
  padding: 0.3rem 0.8rem 0.3rem 0.65rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  color: var(--tx-2);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
}
#lab-checklist .lbc-saved .i { width: 15px; height: 15px; color: var(--mint); }

/* ---------- action bar ---------- */
#lab-checklist .lbc-actions {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1.25rem clamp(1.25rem, 2.5vw, 2.5rem);
  padding: 1.5rem var(--lbc-pad-x);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  border-bottom: 1px solid var(--line-2);
}
/* ticket notches on the dashed tear line */
#lab-checklist .lbc-actions::before,
#lab-checklist .lbc-actions::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink-1);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
#lab-checklist .lbc-actions::before { left: -11px; }
#lab-checklist .lbc-actions::after { right: -11px; }

#lab-checklist .lbc-status {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}
#lab-checklist .lbc-status-text { display: grid; gap: 0.35rem; min-width: 0; }
#lab-checklist .checklist-status {
  display: block;
  max-width: 24ch;
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem);
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--tx-1);
  transition: color var(--dur-2) ease;
}
#lab-checklist .lbc-card[data-state="complete"] .checklist-status { color: var(--mint); }

/* progress ring */
#lab-checklist .lbc-ring {
  position: relative;
  width: 92px; height: 92px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(60, 242, 180, 0.1), rgba(3, 5, 9, 0.55) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 30px -14px rgba(0, 0, 0, 0.8);
}
#lab-checklist .lbc-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
#lab-checklist .lbc-ring-svg circle { fill: none; }
#lab-checklist .lbc-ring-track {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 7;
}
@property --lbc-pct {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
#lab-checklist .lbc-ring-glow {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 6px rgba(60, 242, 180, 0.5));
}
#lab-checklist .lbc-ring-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #5bf7c2 0%, #38d6f5 58%, #a68cff 100%);
  -webkit-mask:
    radial-gradient(closest-side, transparent calc(77% - 0.5px), #000 77%, #000 91%, transparent calc(91% + 0.5px)),
    conic-gradient(#000 var(--lbc-pct), transparent 0);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(closest-side, transparent calc(77% - 0.5px), #000 77%, #000 91%, transparent calc(91% + 0.5px)) intersect,
    conic-gradient(#000 var(--lbc-pct), transparent 0);
  transition: --lbc-pct 0.9s var(--ease-out);
}
#lab-checklist .lbc-card[data-state="complete"] .lbc-ring-glow { filter: drop-shadow(0 0 10px rgba(60, 242, 180, 0.7)); }
/* 7 segment separators */
#lab-checklist .lbc-ring-ticks {
  stroke: #0c111c;
  stroke-width: 9;
  stroke-dasharray: 0.05 0.95;
  stroke-dashoffset: 0.025;
}
#lab-checklist .lbc-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-top: 28px;
  font-variant-numeric: tabular-nums;
}
#lab-checklist .lbc-ring-num {
  display: inline-block;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--tx-1);
}
#lab-checklist .lbc-ring-num.is-bump { animation: lbc-bump 0.5s var(--ease-out); }
@keyframes lbc-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); color: var(--mint); }
  100% { transform: scale(1); }
}
#lab-checklist .lbc-ring-den {
  margin-left: 2px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--tx-3);
}

/* specimen tube rack */
#lab-checklist .lbc-rack {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 0.6rem 0.9rem 0.45rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(3, 5, 9, 0.2), rgba(3, 5, 9, 0.55));
  border: 1px solid var(--line-1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* front plate of the rack: tubes sit behind it */
#lab-checklist .lbc-rack::after {
  content: "";
  position: absolute;
  left: 0.6rem; right: 0.6rem;
  top: 2.15rem;
  height: 14px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px -8px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
#lab-checklist .lbc-tube {
  --cap: var(--mint);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 46px;
  padding: 2px 0 0;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#lab-checklist .lbc-tube:nth-child(7n + 1) { --cap: #ffc65c; }
#lab-checklist .lbc-tube:nth-child(7n + 2) { --cap: #ffc65c; }
#lab-checklist .lbc-tube:nth-child(7n + 3) { --cap: #ff7eb6; }
#lab-checklist .lbc-tube:nth-child(7n + 4) { --cap: #ffc65c; }
#lab-checklist .lbc-tube:nth-child(7n + 5) { --cap: #a68cff; }
#lab-checklist .lbc-tube:nth-child(7n + 6) { --cap: #6aa8ff; }
#lab-checklist .lbc-tube:nth-child(7n + 7) { --cap: #ff6b6b; }
#lab-checklist .lbc-tube-cap {
  width: 22px; height: 9px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cap) 70%, #fff 30%), var(--cap));
  filter: saturate(0.25) brightness(0.7);
  opacity: 0.6;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  transition: opacity var(--dur-2) ease, filter var(--dur-2) ease, transform var(--dur-3) var(--ease-spring);
}
#lab-checklist .lbc-tube-body {
  position: relative;
  width: 18px; height: 52px;
  margin-top: 1px;
  border-radius: 2px 2px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 60%, rgba(255, 255, 255, 0.06));
  overflow: hidden;
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-3) ease;
}
#lab-checklist .lbc-tube-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80%;
  background: linear-gradient(0deg, #12d99b 0%, #3cf2b4 55%, #7ff8e0 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45);
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 0.75s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 25ms);
}
#lab-checklist .lbc-tube-shine {
  position: absolute;
  top: 4px; bottom: 6px; left: 3px;
  width: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}
#lab-checklist .lbc-tube-label {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--tx-3);
  transition: color var(--dur-2) ease;
}
#lab-checklist .lbc-tube:hover .lbc-tube-body { border-color: rgba(60, 242, 180, 0.45); }
#lab-checklist .lbc-tube:hover .lbc-tube-cap { transform: translateY(-2px); }
#lab-checklist .lbc-tube.is-filled .lbc-tube-fill { transform: scaleY(1); }
#lab-checklist .lbc-tube.is-filled .lbc-tube-cap { opacity: 1; filter: none; }
#lab-checklist .lbc-tube.is-filled .lbc-tube-body {
  border-color: rgba(60, 242, 180, 0.5);
  box-shadow: 0 0 18px -2px rgba(60, 242, 180, 0.45);
}
#lab-checklist .lbc-tube.is-filled .lbc-tube-label { color: var(--mint); }

/* buttons */
#lab-checklist .lbc-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}
#lab-checklist .lbc-buttons .btn { min-height: 42px; justify-content: center; }
#lab-checklist .lbc-print .i { width: 17px; height: 17px; }
#lab-checklist .lbc-reset {
  border-color: var(--line-1);
}
#lab-checklist .lbc-reset .i { width: 15px; height: 15px; transition: transform var(--dur-3) var(--ease-out); }
#lab-checklist .lbc-reset:hover .i { transform: rotate(-200deg); }

/* ---------- table ---------- */
#lab-checklist .lbc-table-wrap { width: 100%; }
#lab-checklist .lbc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
/* Sticky column header: pinned flush under the scrolled nav pill
   (pill = 10px offset + 54px tall = 64px = header-h - 8px) and fully opaque,
   so rows never show through it or through a gap above it. */
#lab-checklist .lbc-table thead th {
  position: sticky;
  top: calc(var(--header-h) - 8px);
  z-index: 3;
  padding: 0.95rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tx-3);
  background: linear-gradient(180deg, #111724 0%, #0d121c 100%);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 14px 22px -16px rgba(0, 0, 0, 0.95);
}
#lab-checklist .lbc-table th:first-child,
#lab-checklist .lbc-table .lbc-row > td:first-child { padding-left: var(--lbc-pad-x); }
#lab-checklist .lbc-table th:last-child,
#lab-checklist .lbc-table .lbc-row > td:last-child { padding-right: var(--lbc-pad-x); text-align: right; }
#lab-checklist .lbc-th-check { width: 88px; }
#lab-checklist .lbc-th-name { width: 25%; }
#lab-checklist .lbc-th-std { width: 13%; }
#lab-checklist .lbc-th-target { width: 17%; }
#lab-checklist .lbc-th-guide { width: 140px; }

#lab-checklist .lbc-row > td {
  position: relative;
  padding: 1.35rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--line-1);
  transition: background-color var(--dur-2) ease, box-shadow var(--dur-3) var(--ease-out);
}
#lab-checklist .lbc-row { cursor: pointer; }
#lab-checklist .lbc-row:hover > td { background-color: rgba(255, 255, 255, 0.022); }

/* selected rows glow */
#lab-checklist .lbc-row.checked-row > td {
  background-color: rgba(60, 242, 180, 0.045);
}
#lab-checklist .lbc-row.checked-row > td:first-child {
  box-shadow: inset 3px 0 0 var(--mint), inset 60px 0 60px -40px rgba(60, 242, 180, 0.14);
}
#lab-checklist .lbc-row.checked-row .lab-name { color: #ffffff; }
#lab-checklist .lbc-row.checked-row .target-chip {
  color: #04150e;
  background: linear-gradient(135deg, #6bf8c9, #3cf2b4 55%, #2adfd3);
  border-color: transparent;
  box-shadow: 0 6px 20px -8px rgba(60, 242, 180, 0.8);
}
#lab-checklist .lbc-row.checked-row .target-chip::before { background: #04150e; box-shadow: none; }

/* custom checkbox */
#lab-checklist .lab-check {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  margin: 0;
  border-radius: 9px;
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(3, 5, 9, 0.5));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease, box-shadow var(--dur-3) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
#lab-checklist .lab-check::before {
  content: "";
  width: 17px; height: 17px;
  background: #03140d;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.36s var(--ease-out) 0.06s;
}
#lab-checklist .lab-check:hover {
  border-color: rgba(60, 242, 180, 0.65);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(60, 242, 180, 0.08);
}
#lab-checklist .lab-check:active { transform: scale(0.9); }
#lab-checklist .lab-check:checked {
  border-color: transparent;
  background: linear-gradient(135deg, #7ff8cd 0%, #3cf2b4 45%, #2adfd3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 4px rgba(60, 242, 180, 0.14), 0 8px 22px -6px rgba(60, 242, 180, 0.75);
  animation: lbc-pop 0.45s var(--ease-out);
}
#lab-checklist .lab-check:checked::before { clip-path: inset(0 0 0 0); }
#lab-checklist .lab-check:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}
@keyframes lbc-pop {
  0% { transform: scale(0.82); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* biomarker cell */
#lab-checklist .lbc-idx {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--tx-4);
}
#lab-checklist .lab-name {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--tx-1);
  cursor: pointer;
}
#lab-checklist .lab-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--tx-3);
}
#lab-checklist .lbc-std {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tx-2);
}
#lab-checklist .target-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.75rem 0.38rem 0.62rem;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--mint);
  background: rgba(60, 242, 180, 0.09);
  border: 1px solid rgba(60, 242, 180, 0.3);
  border-radius: var(--radius-pill);
  transition: color var(--dur-2) ease, background var(--dur-2) ease, box-shadow var(--dur-3) ease;
}
#lab-checklist .target-chip::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
}
#lab-checklist .lbc-td-sig {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--tx-2);
}

/* guide toggle */
#lab-checklist .btn-guide-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0 0.8rem 0 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tx-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, border-color var(--dur-2) ease, box-shadow var(--dur-3) ease;
}
#lab-checklist .btn-guide-toggle:hover {
  color: var(--tx-1);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-3);
}
#lab-checklist .lbc-guide-chev {
  width: 15px; height: 15px;
  transition: transform var(--dur-3) var(--ease-out);
}
#lab-checklist .btn-guide-toggle[aria-expanded="true"] {
  color: var(--cyan);
  background: rgba(56, 214, 245, 0.1);
  border-color: rgba(56, 214, 245, 0.42);
  box-shadow: 0 0 0 4px rgba(56, 214, 245, 0.07);
}
#lab-checklist .btn-guide-toggle[aria-expanded="true"] .lbc-guide-chev { transform: rotate(180deg); }

/* ---------- expandable guide rows ---------- */
#lab-checklist .lbc-row.is-guide-open > td {
  border-bottom-color: transparent;
  background-color: rgba(56, 214, 245, 0.03);
}
#lab-checklist .lbc-row.is-guide-open.checked-row > td { background-color: rgba(60, 242, 180, 0.05); }
#lab-checklist .lbc-detail-row > td {
  padding: 0;
  background: linear-gradient(180deg, rgba(56, 214, 245, 0.03), rgba(3, 5, 9, 0.25));
  border-bottom: 1px solid var(--line-1);
}
#lab-checklist .lbc-row.checked-row + .lbc-detail-row > td {
  box-shadow: inset 3px 0 0 var(--mint);
  background: linear-gradient(180deg, rgba(60, 242, 180, 0.05), rgba(3, 5, 9, 0.25));
}
#lab-checklist .lbc-detail-clip {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}
#lab-checklist .lbc-detail-row.is-open .lbc-detail-clip { grid-template-rows: 1fr; }
#lab-checklist .lbc-detail-inner {
  min-height: 0;
  overflow: hidden;
}
#lab-checklist .biomarker-detail-pane {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 0.25rem var(--lbc-pad-x) 1.6rem calc(var(--lbc-pad-x) + 88px - 1rem);
  opacity: 0;
  translate: 0 -8px;
  transition: opacity 0.4s ease 0.08s, translate 0.5s var(--ease-out) 0.05s;
}
#lab-checklist .lbc-detail-row.is-open .biomarker-detail-pane { opacity: 1; translate: none; }
#lab-checklist .detail-col {
  padding: 1.05rem 1.1rem 1.15rem;
  background: rgba(3, 5, 9, 0.42);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
#lab-checklist .lbc-detail-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}
#lab-checklist .lbc-detail-ico {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 9px;
  color: var(--mint);
  background: rgba(60, 242, 180, 0.1);
  border: 1px solid rgba(60, 242, 180, 0.22);
}
#lab-checklist .lbc-detail-ico.is-violet { color: #c2b2ff; background: rgba(166, 140, 255, 0.12); border-color: rgba(166, 140, 255, 0.28); }
#lab-checklist .lbc-detail-ico.is-cyan { color: var(--cyan); background: rgba(56, 214, 245, 0.1); border-color: rgba(56, 214, 245, 0.26); }
#lab-checklist .lbc-detail-ico .i { width: 16px; height: 16px; }
#lab-checklist .detail-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-1);
}
#lab-checklist .detail-col p {
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--tx-2);
}

/* ---------- card foot ---------- */
#lab-checklist .lbc-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding: 1rem var(--lbc-pad-x) 1.15rem;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--tx-3);
}
#lab-checklist .lbc-foot-note { display: inline-flex; align-items: flex-start; gap: 0.5rem; }
#lab-checklist .lbc-foot-note .i { width: 15px; height: 15px; margin-top: 0.1em; color: var(--sky); }
#lab-checklist .lbc-foot-kbd { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); letter-spacing: 0.04em; }

/* ==========================================================================
   Responsive (screen only, so print layout stays tabular)
   ========================================================================== */
@media screen and (max-width: 1100px) {
  #lab-checklist .lbc-intro { grid-template-columns: minmax(0, 1fr); }
  #lab-checklist .lbc-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
  }
  #lab-checklist .lbc-steps::before {
    top: 20px; bottom: auto; left: 40px; right: 33%;
    border-left: 0;
    border-top: 1px dashed rgba(60, 242, 180, 0.3);
  }
  #lab-checklist .lbc-step { flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: 0; }
}

@media screen and (max-width: 1180px) {
  #lab-checklist .lbc-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "status buttons" "rack rack";
  }
  #lab-checklist .lbc-status { grid-area: status; }
  #lab-checklist .lbc-buttons { grid-area: buttons; flex-direction: row; }
  #lab-checklist .lbc-rack { grid-area: rack; justify-content: space-evenly; padding-inline: 1.5rem; }
  #lab-checklist .lbc-rack::after { left: 1rem; right: 1rem; }
  #lab-checklist .lbc-th-guide { width: 120px; }
  #lab-checklist .lbc-th-check { width: 72px; }
  #lab-checklist .biomarker-detail-pane { padding-left: var(--lbc-pad-x); }
}

@media screen and (max-width: 900px) {
  #lab-checklist .lbc-table,
  #lab-checklist .lbc-table tbody { display: block; }
  #lab-checklist .lbc-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #lab-checklist .lbc-table tbody { padding: 0.9rem 0.9rem 0.2rem; }
  #lab-checklist .lbc-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 0.95rem;
    margin-bottom: 0.7rem;
    padding: 1.05rem 1.05rem 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid var(--line-1);
    transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, box-shadow var(--dur-3) ease;
  }
  #lab-checklist .lbc-row > td,
  #lab-checklist .lbc-table .lbc-row > td:first-child,
  #lab-checklist .lbc-table .lbc-row > td:last-child {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: left;
  }
  #lab-checklist .lbc-row:hover > td,
  #lab-checklist .lbc-row.checked-row > td,
  #lab-checklist .lbc-row.is-guide-open > td,
  #lab-checklist .lbc-row.is-guide-open.checked-row > td,
  #lab-checklist .lbc-table .lbc-row.checked-row > td:first-child,
  #lab-checklist .lbc-row.checked-row + .lbc-detail-row > td { background: none; box-shadow: none; }
  #lab-checklist .lbc-row > .lbc-td-check { grid-column: 1; grid-row: 1; padding-top: 0.15rem; }
  #lab-checklist .lbc-row > .lbc-td-name { grid-column: 2; grid-row: 1; margin-bottom: 0.75rem; }
  #lab-checklist .lbc-row > td[data-label] {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
  }
  #lab-checklist .lbc-row > td[data-label]::before {
    content: attr(data-label);
    flex: none;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tx-3);
  }
  #lab-checklist .lbc-row > .lbc-td-sig {
    grid-column: 2;
    padding-top: 0.8rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
  }
  #lab-checklist .lbc-row > .lbc-td-guide { grid-column: 2; padding-top: 0.85rem; }
  #lab-checklist .btn-guide-toggle { min-height: 40px; }
  #lab-checklist .lbc-row.checked-row {
    background: linear-gradient(160deg, rgba(60, 242, 180, 0.1), rgba(60, 242, 180, 0.02) 60%);
    border-color: rgba(60, 242, 180, 0.34);
    box-shadow: 0 16px 40px -26px rgba(60, 242, 180, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  #lab-checklist .lbc-row.is-guide-open {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
  }
  #lab-checklist .lbc-detail-row {
    display: block;
    margin-bottom: 0.7rem;
    border: 1px solid var(--line-1);
    border-top: 0;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
  }
  #lab-checklist .lbc-row.checked-row + .lbc-detail-row { border-color: rgba(60, 242, 180, 0.34); }
  #lab-checklist .lbc-detail-row > td { display: block; border: 0; }
  #lab-checklist .biomarker-detail-pane {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.2rem 0.9rem 0.95rem;
  }
}

@media screen and (min-width: 641px) and (max-width: 900px) {
  #lab-checklist .lbc-row {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 104px;
    column-gap: 1rem;
    padding: 1.2rem 1.25rem 1.15rem;
  }
  #lab-checklist .lbc-row > .lbc-td-name { grid-column: 2 / 4; margin-bottom: 0.95rem; }
  #lab-checklist .lbc-row > .lbc-td-guide { grid-column: 4; grid-row: 1; padding-top: 0; align-self: start; justify-self: end; }
  #lab-checklist .lbc-row > td[data-label] {
    grid-row: 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.8rem 0 0.85rem;
  }
  #lab-checklist .lbc-row > td.lbc-td-std[data-label] { grid-column: 2; }
  #lab-checklist .lbc-row > td.lbc-td-target[data-label] { grid-column: 3 / 5; padding-left: 1rem; border-left: 1px dashed rgba(255, 255, 255, 0.08); }
  #lab-checklist .lbc-row > .lbc-td-sig { grid-column: 2 / 5; }
  #lab-checklist .lbc-row .lbc-std { font-size: 0.95rem; color: var(--tx-1); }
  #lab-checklist .biomarker-detail-pane { padding-inline: calc(1.25rem + 30px + 1rem) 1.25rem; }
}

@media screen and (max-width: 640px) {
  #lab-checklist { --lbc-radius: 24px; }
  #lab-checklist .lbc-actions {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "status" "rack" "buttons";
    padding-block: 1.25rem;
  }
  #lab-checklist .lbc-buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  #lab-checklist .lbc-buttons .btn { min-height: 46px; }
  #lab-checklist .lbc-ring { width: 80px; height: 80px; }
  #lab-checklist .lbc-ring-center { padding-top: 24px; }
  #lab-checklist .lbc-ring-num { font-size: 1.75rem; }
  #lab-checklist .lbc-rack { gap: 0; padding-inline: 0.3rem; justify-content: space-between; }
  #lab-checklist .lbc-rack::after { left: 0.5rem; right: 0.5rem; }
  #lab-checklist .lbc-tube { width: 40px; }
  #lab-checklist .lbc-tube-label { font-size: 0.6rem; }
  #lab-checklist .lbc-saved { display: none; }
  #lab-checklist .lbc-steps { display: none; }
  #lab-checklist .lbc-table tbody { padding-inline: 0.6rem; }
  #lab-checklist .lbc-foot-kbd { display: none; }
}

@media (pointer: coarse) {
  #lab-checklist .lbc-foot-kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #lab-checklist .lab-check:checked,
  #lab-checklist .lbc-ring-num.is-bump { animation: none; }
}

/* ==========================================================================
   PRINT — clean black-on-white clinical sheet (not used for the dossier)
   ========================================================================== */
@media print {
  body:not(.printing-dossier) .skip-link,
  body:not(.printing-dossier) .site-header,
  body:not(.printing-dossier) #top-header,
  body:not(.printing-dossier) #mobile-drawer,
  body:not(.printing-dossier) .mobile-drawer,
  body:not(.printing-dossier) #toast,
  body:not(.printing-dossier) .toast,
  body:not(.printing-dossier) #hero,
  body:not(.printing-dossier) #overview,
  body:not(.printing-dossier) main > section:not(#lab-checklist),
  body:not(.printing-dossier) main > :not(section),
  body:not(.printing-dossier) .site-footer,
  body:not(.printing-dossier) footer,
  body:not(.printing-dossier) .citations-modal-backdrop,
  body:not(.printing-dossier) [role="dialog"],
  body:not(.printing-dossier) #back-to-top,
  body:not(.printing-dossier) .back-to-top,
  body:not(.printing-dossier) .scroll-progress,
  body:not(.printing-dossier) canvas {
    display: none !important;
  }

  body:not(.printing-dossier) #lab-checklist {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    color: #0f172a !important;
    font-size: 10pt;
  }
  body:not(.printing-dossier) #lab-checklist::before,
  body:not(.printing-dossier) #lab-checklist .lbc-ambient,
  body:not(.printing-dossier) #lab-checklist .section-tag-row,
  body:not(.printing-dossier) #lab-checklist .section-desc,
  body:not(.printing-dossier) #lab-checklist .lbc-steps,
  body:not(.printing-dossier) #lab-checklist .lbc-card-top,
  body:not(.printing-dossier) #lab-checklist .table-actions,
  body:not(.printing-dossier) #lab-checklist .lbc-card-foot,
  body:not(.printing-dossier) #lab-checklist .lbc-idx,
  body:not(.printing-dossier) #lab-checklist .lbc-th-guide,
  body:not(.printing-dossier) #lab-checklist .lbc-td-guide,
  body:not(.printing-dossier) #lab-checklist .biomarker-detail-row {
    display: none !important;
  }
  body:not(.printing-dossier) #lab-checklist .container {
    max-width: none !important;
    padding: 0 !important;
  }

  /* sheet header */
  body:not(.printing-dossier) #lab-checklist .print-only-sheet-header {
    display: block !important;
    padding-bottom: 10pt;
    margin-bottom: 12pt;
    border-bottom: 2pt solid #0f172a;
  }
  body:not(.printing-dossier) #lab-checklist .print-brand-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16pt;
  }
  body:not(.printing-dossier) #lab-checklist .print-title {
    margin: 0 0 3pt;
    font-family: var(--font-sans);
    font-size: 15pt;
    font-weight: 700;
    letter-spacing: 0;
    color: #0f172a !important;
  }
  body:not(.printing-dossier) #lab-checklist .print-url {
    font-family: var(--font-mono);
    font-size: 8.5pt;
    color: #475569 !important;
  }
  body:not(.printing-dossier) #lab-checklist .print-meta-box {
    font-size: 9.5pt;
    line-height: 1.75;
    white-space: nowrap;
    color: #334155 !important;
  }
  body:not(.printing-dossier) #lab-checklist .print-meta-box strong,
  body:not(.printing-dossier) #lab-checklist .print-doctor-notes h4 { color: #0f172a !important; }
  body:not(.printing-dossier) #lab-checklist .print-sub {
    margin-top: 8pt;
    font-size: 9.5pt;
    font-style: italic;
    color: #475569 !important;
  }

  /* title */
  body:not(.printing-dossier) #lab-checklist .lbc-intro { display: block !important; margin: 0 !important; }
  body:not(.printing-dossier) #lab-checklist .section-head {
    max-width: none;
    margin: 0 0 10pt !important;
  }
  body:not(.printing-dossier) #lab-checklist .section-title {
    margin: 0 !important;
    font-size: 17pt !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: #0f172a !important;
  }
  body:not(.printing-dossier) #lab-checklist .section-title em {
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
    background: none !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a;
  }

  /* card becomes plain paper */
  body:not(.printing-dossier) #lab-checklist .lbc-card {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
  }
  body:not(.printing-dossier) #lab-checklist .lbc-card::before { display: none !important; }

  /* table */
  body:not(.printing-dossier) #lab-checklist .lbc-table {
    border-collapse: collapse !important;
    width: 100% !important;
  }
  body:not(.printing-dossier) #lab-checklist .lbc-table thead { display: table-header-group; }
  body:not(.printing-dossier) #lab-checklist .lbc-table th,
  body:not(.printing-dossier) #lab-checklist .lbc-table td {
    position: static !important;
    padding: 6pt 7pt !important;
    font-size: 9pt !important;
    line-height: 1.35 !important;
    color: #0f172a !important;
    background: transparent !important;
    border: 0.75pt solid #94a3b8 !important;
    box-shadow: none !important;
    text-align: left !important;
    vertical-align: middle !important;
  }
  body:not(.printing-dossier) #lab-checklist .lbc-table th {
    font-size: 7.5pt !important;
    letter-spacing: 0.08em;
    white-space: normal;
    background: #eef2f6 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body:not(.printing-dossier) #lab-checklist .lbc-th-check { width: 36pt; }
  body:not(.printing-dossier) #lab-checklist .lbc-td-check { text-align: center !important; }
  body:not(.printing-dossier) #lab-checklist .lbc-row {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  body:not(.printing-dossier) #lab-checklist .lab-name { font-size: 10pt; color: #0f172a !important; }
  body:not(.printing-dossier) #lab-checklist .lab-sub { font-size: 8pt; color: #475569 !important; }
  body:not(.printing-dossier) #lab-checklist .lbc-std { font-size: 9pt; color: #334155 !important; }
  body:not(.printing-dossier) #lab-checklist .lbc-td-sig { font-size: 8.5pt !important; color: #1e293b !important; }
  body:not(.printing-dossier) #lab-checklist .target-chip,
  body:not(.printing-dossier) #lab-checklist .lbc-row.checked-row .target-chip {
    padding: 1.5pt 5pt !important;
    font-size: 9pt;
    color: #0f172a !important;
    background: none !important;
    border: 0.75pt solid #475569 !important;
    border-radius: 3pt !important;
    box-shadow: none !important;
  }
  body:not(.printing-dossier) #lab-checklist .target-chip::before { display: none !important; }

  /* checkboxes print as real boxes with visible ticks */
  body:not(.printing-dossier) #lab-checklist .lab-check {
    display: inline-grid !important;
    width: 13pt !important;
    height: 13pt !important;
    border: 1.2pt solid #0f172a !important;
    border-radius: 2pt !important;
    background: #ffffff !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body:not(.printing-dossier) #lab-checklist .lab-check::before {
    width: 9pt;
    height: 9pt;
    background: #0f172a !important;
    transition: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* notes */
  body:not(.printing-dossier) #lab-checklist .print-doctor-notes {
    display: block !important;
    margin-top: 18pt;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  body:not(.printing-dossier) #lab-checklist .print-notes-heading {
    margin-bottom: 6pt;
    font-size: 10.5pt;
    font-weight: 700;
  }
  body:not(.printing-dossier) #lab-checklist .print-notes-lines {
    height: 24pt;
    border-bottom: 0.75pt dotted #64748b;
  }
}

/* --------------------------------------------------------------------------
   Final homepage pass — quiet, editorial, and deliberately spare.
   Kept at the end of the cascade so the atlas tools stay intact.
   -------------------------------------------------------------------------- */
#hero .hero-eyebrow { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#hero .hero-title,
#hero .hero-lead,
#hero .hero-buttons { animation: none !important; }
.site-header { padding-block: 0 !important; }
.site-header::before { display: none; }
.site-header .header-inner {
  min-height: 64px;
  border-radius: 0;
  background: rgba(3, 5, 9, 0.96);
  border: 0;
  border-bottom: 1px solid var(--line-1);
  box-shadow: none;
  backdrop-filter: none;
}
.site-header .header-inner::before { display: none; }
.site-header .nav { background: transparent; box-shadow: none; }
.site-header .nav-indicator { display: none; }
.site-header .nav-link { padding-inline: 0.7rem; }
.site-header .nav-link.active,
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible { color: var(--mint); }
.site-header .header-cta { --btn-h: 36px; padding-inline: 0.9rem; border-radius: 5px; box-shadow: none; }
.site-header .brand-logo-frame { box-shadow: none; }
#hero .hero-title { font-size: clamp(3.25rem, 6.2vw, 5.8rem); }
#hero { background: transparent; }
#hero .hero-bg {
  z-index: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
#hero .hero-content { z-index: 2; }
#hero .hero-scrim {
  background: linear-gradient(90deg, rgba(3, 5, 9, 0.98) 0%, rgba(3, 5, 9, 0.91) 42%, rgba(3, 5, 9, 0.44) 63%, rgba(3, 5, 9, 0.12) 100%);
}

@media (max-width: 768px) {
  .site-header .header-inner { min-height: 60px; }
  .site-header .nav { display: none; }
}