/* VELOCITY — the body: the anatomical figure (js/ui/anatomy-art.js), the
 * dashboard's body panel, the Body view and its organ pages.
 * Organs are shaded tissue lit by their band: a soft mint aura while
 * strong, amber when impaired, a restless red when failing. Animation
 * periods come from state (resting heart rate, breathing), set inline.
 */

/* ============ the figure ============ */
.anat { display: block; overflow: visible; width: 100%; height: 100%; }
.anat-wrap { position: relative; }
.anat-wrap > svg.anat, .anat-wrap > canvas.anat-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.anat-wrap > .anat-layer { pointer-events: none; }
.anat-wrap > .anat-layer .org { pointer-events: auto; }
.anat-wrap > canvas.anat-fx { pointer-events: none; }
/* motion that reports state: the heart beats at the resting rate, the
   lungs breathe at the breathing rate — each its own composited layer */
.anat-wrap > .anat-heart.beating { animation: a-beat var(--beat, 0.9s) cubic-bezier(0.2, 0.7, 0.3, 1) infinite; animation-delay: var(--beat-phase, 0s); will-change: transform; }
.anat-wrap > .anat-lungs { animation: a-breathe var(--breath, 4.6s) ease-in-out infinite; animation-delay: var(--breath-phase, 0s); will-change: transform; }
.anat .a-aura { fill: none; stroke: rgba(110, 210, 255, 0.2); stroke-width: 3.4; stroke-linejoin: round; }
.anat .a-aura.a-aura-w { stroke: rgba(90, 200, 255, 0.07); stroke-width: 8; }
.anat .a-skin { stroke: none; }
.anat .a-rim { fill: none; stroke: rgba(170, 230, 255, 0.5); stroke-width: 0.55; stroke-linejoin: round; pointer-events: none; }
.anat .a-grid { pointer-events: none; }
.anat .a-context { pointer-events: none; opacity: 0.9; }
.anat .c-organ { fill: rgba(225, 170, 160, 0.09); stroke: rgba(225, 175, 165, 0.2); stroke-width: 0.35; }
.anat .c-tube { fill: none; stroke: rgba(225, 175, 165, 0.12); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.anat .c-thin { stroke-width: 1.7; stroke: rgba(225, 175, 165, 0.1); }

/* skeleton */
.anat .s-skull { fill: rgba(236, 226, 205, 0.05); stroke: var(--tf); stroke-width: 0.8; opacity: 0.5; }
.anat .s-orbit { fill: rgba(0, 5, 12, 0.45); stroke: none; }
.anat .s-line { fill: none; stroke: var(--tf); stroke-width: 0.6; opacity: 0.45; }
.anat .s-bone { fill: none; stroke: var(--tf); stroke-width: 1.7; stroke-linecap: round; opacity: 0.5; }
.anat .s-rib { fill: none; stroke: var(--tf); stroke-width: 1.35; stroke-linecap: round; opacity: 0.26; }
.anat .s-vert { fill: var(--tf); opacity: 0.34; }
.anat .s-flat { fill: var(--tf); opacity: 0.3; }
.anat .s-flat.s-deep { fill: var(--td); }
.anat .s-hole { fill: rgba(0, 5, 12, 0.5); }
.anat .s-long { fill: none; stroke: var(--tf); stroke-width: 2.7; stroke-linecap: round; opacity: 0.4; }
.anat .s-joint { fill: var(--tl); opacity: 0.42; }
.anat .s-finger { fill: none; stroke: var(--tf); stroke-width: 0.75; stroke-linecap: round; opacity: 0.36; }
.anat .s-porous { fill: none; stroke: rgba(0, 0, 0, 0.55); stroke-width: 1.2; stroke-dasharray: 0.5 1.6; stroke-linecap: round; }

/* organs */
.anat .org { cursor: pointer; transition: opacity 260ms var(--ease-out), filter 260ms var(--ease-out); }
.anat .o-hit { fill: transparent; stroke: none; }
.anat .o-glow { fill: none; stroke: var(--og); stroke-width: 2.6; stroke-linejoin: round; opacity: 0.2; pointer-events: none; }
.anat .o-glow.o-glow-w { stroke-width: 6; opacity: 0.08; }
.anat .o-shade, .anat .o-tex, .anat .o-ktex, .anat .o-damage, .anat .o-hi, .anat .o-detail { pointer-events: none; }
.anat .o-base { fill: var(--tf); }
.anat .o-metal { fill: url(#ag-metal); }
.anat .o-edge { fill: none; stroke: var(--tl); stroke-width: 0.42; stroke-opacity: 0.75; stroke-linejoin: round; pointer-events: none; }
.anat .o-detail { fill: none; stroke: var(--td); stroke-width: 0.5; stroke-linecap: round; opacity: 0.7; }
.anat .o-hi { opacity: 0.55; }
.anat .o-ktex { opacity: 1; }
.anat .o-damage { opacity: var(--dm, 0); }
.anat .o-steel { stroke: #DCEBFA; }
.anat .i-spleen { --tf: var(--sf); --td: var(--sd); --tl: var(--sl); }
.anat .i-thymus { --tf: var(--hf); --td: var(--hd); --tl: var(--hl); }
.anat .b-spark { fill: #FFFFFF; opacity: 0; pointer-events: none; }
.anat .b-stem { opacity: 0.8; }

/* lungs */
.anat .l-trachea { fill: rgba(236, 200, 200, 0.32); stroke: rgba(255, 225, 225, 0.5); stroke-width: 0.35; }
.anat .l-bronchus { fill: none; stroke: rgba(255, 230, 230, 0.4); stroke-width: 0.8; stroke-linecap: round; pointer-events: none; }
.anat .l-gall { fill: #5C8F4E; stroke: rgba(200, 255, 190, 0.45); stroke-width: 0.3; opacity: 0.85; pointer-events: none; }

/* heart vessels */
.anat .o-vein { fill: #3F6FB8; opacity: 0.8; stroke: rgba(170, 205, 255, 0.5); stroke-width: 0.3; }
.anat .o-pulm { fill: #6F63C4; opacity: 0.85; stroke: rgba(210, 200, 255, 0.5); stroke-width: 0.3; }
.anat .h-led { fill: #7FE9FF; stroke: rgba(127, 233, 255, 0.35); stroke-width: 2; }
.anat-wrap > .anat-heart.humming { animation: glow-pulse 2.4s ease-in-out infinite; --gp-lo: 0.82; --gp-hi: 1; will-change: opacity; }

/* kidneys & the urinary tract */
.anat .k-ureter { fill: none; stroke: rgba(245, 220, 150, 0.35); stroke-width: 0.8; stroke-linecap: round; pointer-events: none; }
.anat .k-bladder { fill: rgba(245, 220, 150, 0.14); stroke: rgba(245, 220, 150, 0.4); stroke-width: 0.35; pointer-events: none; }
.anat .k-adrenal { fill: rgba(250, 196, 90, 0.5); stroke: none; pointer-events: none; }

/* arteries */
.anat .v-bed { fill: none; stroke: rgba(3, 7, 13, 0.55); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.anat .v-glow { fill: none; stroke: var(--og); stroke-width: 3.4; opacity: 0.12; stroke-linecap: round; stroke-linejoin: round; }
.anat .v-wall { fill: none; stroke: var(--td); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.anat .v-lumen { fill: none; stroke: var(--tf); stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }
.anat .v-bead { fill: #FFF1F2; stroke: rgba(255, 90, 110, 0.45); stroke-width: 1.4; paint-order: stroke; pointer-events: none; }
.anat .org-arteries.k-mechanical .v-bead { fill: #CFF6FF; stroke: rgba(127, 233, 255, 0.45); }
.anat .org-arteries.b-failing .v-bead, .anat .org-arteries.b-failed .v-bead { opacity: 0.55; }
.anat .v-print { fill: none; stroke: rgba(210, 255, 248, 0.6); stroke-width: 1.2; stroke-dasharray: 0.4 1.2; }
.anat .v-steel { stroke: #9FB6CC; }
.anat .v-plaque { opacity: min(1, calc(var(--dm) * 1.3)); fill: none; stroke: #E8C35A; stroke-width: 1.6; stroke-dasharray: 1.4 9 0.8 12; stroke-linecap: round; }
@keyframes v-flow { to { stroke-dashoffset: -16; } }

/* immune */
.anat .i-vessel { fill: none; stroke: rgba(180, 240, 140, 0.18); stroke-width: 0.45; stroke-dasharray: 1 1.4; pointer-events: none; }
.anat .i-node { fill: var(--tl, #CFF5A8); stroke: rgba(240, 255, 220, 0.6); stroke-width: 0.3; }
.anat .i-node { stroke: rgba(210, 255, 180, 0.35); stroke-width: 1.2; paint-order: stroke; }

/* the scanner */
.anat .a-scanwrap { pointer-events: none; }
.anat .a-scan { animation: a-scan 9s steps(110) infinite; animation-delay: var(--scan-phase, 0s); }
@keyframes a-scan { 0% { transform: translateY(0); } 50%, 100% { transform: translateY(470px); } }

/* band: how the tissue is lit */
.anat .org.b-strong .o-glow { opacity: 0.16; }
.anat .org.b-fair .o-glow { opacity: 0.24; }
.anat .org.b-impaired .o-glow { opacity: 0.3; }
.anat .org.b-failing .o-glow { opacity: 0.4; }
.anat .org.b-failed .o-glow { opacity: 0.5; }
.anat .org-arteries.b-impaired .v-glow, .anat .org-arteries.b-failing .v-glow, .anat .org-arteries.b-failed .v-glow { opacity: 0.4; }
@keyframes glow-flicker { 0% { opacity: 0.9; } 18% { opacity: 0.3; } 22% { opacity: 0.85; } 55% { opacity: 0.45; } 60% { opacity: 0.95; } 100% { opacity: 0.6; } }

/* kinds: what the organ now is */
.anat .org.k-mechanical .o-edge { stroke: #DCEBFA; stroke-dasharray: 1.2 0.8; }
.anat .org.k-transplant .o-edge, .anat .org.k-xeno .o-edge { stroke: #F4F7FB; stroke-width: 0.7; stroke-dasharray: 0.35 0.9; stroke-opacity: 0.9; }
.anat .org.k-bioprinted .o-edge { stroke: #9FFFF0; stroke-opacity: 0.9; }
.anat .org.k-regenerative .o-hi { opacity: 0.85; }

/* motion that reports state: beat, breath */
@keyframes a-beat { 0% { transform: scale(1); } 9% { transform: scale(1.075); } 20% { transform: scale(0.985); } 30% { transform: scale(1.035); } 46%, 100% { transform: scale(1); } }
.anat .org-heart.humming .o-glow { opacity: 0.4; }
@keyframes a-breathe { 0%, 100% { transform: scale(1, 1); } 42% { transform: scale(1.022, 1.036); } }


/* hover & selection: the rest of the body steps back */
.anat.has-sel .org:not(.sel) { opacity: 0.42; }
.anat.zoomed.has-sel .org:not(.sel) { opacity: 0.22; }
.anat .org.sel .o-glow, .anat .org.hl .o-glow { opacity: 0.7 !important; animation: none; }
.anat .org.sel .o-glow.o-glow-w, .anat .org.hl .o-glow.o-glow-w { opacity: 0.3 !important; }
.anat.zoomed .org.sel .o-edge { vector-effect: non-scaling-stroke; stroke-width: 1.6px; }
.anat .org.sel .o-edge, .anat .org.hl .o-edge { stroke: #FFFFFF; stroke-opacity: 1; stroke-width: 0.6; }
.anat .org.hl { opacity: 1 !important; }
.anat.has-hl .org:not(.hl) { opacity: 0.42; }

/* health view: tissue painted in its band colour */
.anat.mode-health .o-base { fill: var(--og); }
.anat.mode-health .o-shade { opacity: 0.85; }
.anat.mode-health .o-tex, .anat.mode-health .o-damage { opacity: 0.35; }
.anat.mode-health .v-lumen, .anat.mode-health .v-wall { stroke: var(--og); }
.anat.mode-health .s-long, .anat.mode-health .s-bone, .anat.mode-health .s-rib, .anat.mode-health .s-skull, .anat.mode-health .s-line, .anat.mode-health .s-finger { stroke: var(--og); }
.anat.mode-health .s-vert, .anat.mode-health .s-flat, .anat.mode-health .s-joint { fill: var(--og); }
.anat.mode-health .i-spleen, .anat.mode-health .i-thymus { --tf: var(--og); }
.anat.mode-health .i-node { fill: var(--og); }
.anat.mode-health .a-context { opacity: 0.3; }

/* x-ray view: bones and the silhouette, organs as outlines */
.anat.mode-xray .o-base, .anat.mode-xray .o-metal { fill: rgba(170, 225, 255, 0.08); }
.anat.mode-xray .o-shade, .anat.mode-xray .o-tex, .anat.mode-xray .o-ktex, .anat.mode-xray .o-damage, .anat.mode-xray .o-hi, .anat.mode-xray .a-context, .anat.mode-xray .o-detail { opacity: 0; }
.anat.mode-xray .o-edge { stroke: rgba(190, 235, 255, 0.85); stroke-width: 0.5; }
.anat.mode-xray .s-long, .anat.mode-xray .s-bone, .anat.mode-xray .s-rib, .anat.mode-xray .s-skull, .anat.mode-xray .s-line, .anat.mode-xray .s-finger { opacity: 0.9; stroke: #EAF7FF; }
.anat.mode-xray .s-vert, .anat.mode-xray .s-flat, .anat.mode-xray .s-joint { opacity: 0.8; fill: #EAF7FF; }
.anat.mode-xray .org-muscle .o-base { fill: rgba(170, 225, 255, 0.05); }
.anat.mode-xray .v-lumen, .anat.mode-xray .v-wall { stroke: rgba(190, 235, 255, 0.5); }

/* glyphs */
.anat-glyph { width: auto; height: auto; display: inline-block; vertical-align: middle; }
.anat-glyph .org { cursor: inherit; }
.anat-glyph .o-glow { opacity: 0.3; }

/* reduced motion: a still body */
body.reduce-motion .anat *, body.reduce-motion .anat { animation: none !important; }
body.reduce-motion .anat .b-spark { opacity: 0; }
.anat .org-muscle .o-base { opacity: 0.62; }
.anat .org-muscle .o-edge { stroke-opacity: 0.45; }

/* the hologram pedestal */
.anat .a-pedestal { pointer-events: none; }
.anat .a-ped-ring { fill: none; stroke: rgba(140, 230, 255, 0.45); stroke-width: 0.5; }
.anat .a-ped-ring.a-r2 { stroke: rgba(140, 230, 255, 0.3); stroke-dasharray: 2 3; }
.anat .a-ped-pulse { display: none; }

/* ============ the dashboard's body panel ============ */
.col-body .body-panel { flex: none; }
.col-body .bio-panel { flex: 1 1 auto; }
.body-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-bottom: 12px;
  background:
    radial-gradient(120% 60% at 50% 58%, rgba(40, 110, 160, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(21, 32, 50, 0.84) 0%, rgba(10, 17, 28, 0.9) 100%); }
.bp-open { gap: 6px; }
.ecg { display: block; flex: 1 1 auto; min-width: 0; height: 38px; } /* the procedure moment's trace */
.bp-stats { display: flex; flex-wrap: wrap; gap: 5px; }
.bp-stats:empty { display: none; }
.bp-stat { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgba(4, 9, 16, 0.45); border: 1px solid var(--line-soft); cursor: default; }
.bp-stat small { font: 600 calc(9.5px * var(--text-scale))/1 var(--font-sans); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }
.bp-stat b { font: 650 calc(12px * var(--text-scale))/1 var(--font-mono); color: #fff; }
.bp-stat .bp-typ { text-transform: none; letter-spacing: 0; color: var(--text-4); }
.bp-stat.bp-repl b { color: var(--c-tech-ink); }
.bp-stat.bp-warn { border-color: rgba(245, 181, 68, 0.4); background: rgba(245, 181, 68, 0.08); color: var(--amber-ink); align-items: center; }
.bp-stat.bp-warn b { color: var(--amber-ink); }
.bp-stat.bp-warn small { color: var(--amber-ink); text-transform: none; letter-spacing: 0; }
/* the figure on the dashboard is a preview: the Body view has it in full */
.bp-stage { position: relative; flex: none; height: clamp(140px, 24vh, 280px); margin: 6px -8px 6px; }
.bp-stage .anat-wrap { position: absolute; inset: 0; }
.bp-stage .anat { width: 100%; height: 100%; }
.body-panel.no-figure .organ-list { margin-top: 8px; }
.body-panel.year-sweep .bp-stage::after { /* the year's scan passes over the body */
  content: ''; position: absolute; left: 6%; right: 6%; top: 0; height: 22%;
  background: linear-gradient(180deg, transparent, rgba(127, 243, 226, 0.12) 70%, rgba(200, 255, 248, 0.5) 97%, transparent);
  border-bottom: 1px solid rgba(200, 255, 248, 0.7);
  box-shadow: 0 6px 20px rgba(127, 243, 226, 0.35);
  opacity: 0; pointer-events: none;
  animation: bp-sweep 1300ms var(--ease-in-out) var(--fx-delay, 0ms) both;
}
@keyframes bp-sweep { 0% { transform: translateY(-20%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(460%); opacity: 0; } }

.organ-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; flex: none; }
.orl-item {
  appearance: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 3px;
  column-gap: 4px; row-gap: 5px; align-items: center;
  padding: 6px 7px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font: 550 calc(12px * var(--text-scale))/1.2 var(--font-sans);
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
/* the organ by its icon, in its band's colour (the name is its tooltip) */
.orl-ico { display: flex; color: var(--og); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--og) 55%, transparent)); }
.orl-ico .ico { width: calc(21px * var(--text-scale)); height: calc(21px * var(--text-scale)); }
.orl-pct { justify-self: end; font: 650 calc(11px * var(--text-scale))/1 var(--font-mono); color: #fff; font-variant-numeric: tabular-nums; }
.orl-bar { grid-column: 1 / -1; position: relative; height: 3px; background: var(--track); border-radius: 2px; }
.orl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--og); box-shadow: 0 0 6px var(--og); }
.orl-typ { position: absolute; top: -2px; bottom: -2px; width: 1.5px; margin-left: -0.75px; background: rgba(255, 255, 255, 0.7); border-radius: 1px; }
.orl-item:hover, .orl-item.hl, .orl-item.focused { border-color: color-mix(in srgb, var(--og) 55%, transparent); background: color-mix(in srgb, var(--og) 9%, transparent); transform: translateY(-1px); }
.orl-item.focused { box-shadow: 0 0 0 2px var(--accent-glow); }
.orl-item.b-impaired .orl-pct, .orl-item.b-failing .orl-pct, .orl-item.b-failed .orl-pct { color: var(--og); }
.orl-item.b-failing, .orl-item.b-failed { border-color: color-mix(in srgb, var(--og) 40%, transparent); background: color-mix(in srgb, var(--og) 7%, transparent); }
.orl-item.b-failed .orl-ico { animation: glow-flicker 1.2s steps(1, end) infinite; }
.orl-item.k-mechanical .orl-ico { color: var(--c-tech); }

/* ============ the Body view ============ */
.modal-anatomy { width: min(1360px, 96vw); height: min(920px, 94vh); max-height: 94vh; display: flex; flex-direction: column; padding: 18px 20px 18px; overflow: hidden; }
.anat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex: none; }
.anat-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; align-items: center; }
.as-chip { display: inline-flex; align-items: center; gap: 5px; font: 500 calc(11.5px * var(--text-scale))/1 var(--font-sans); color: var(--text-2); background: var(--well); border: 1px solid var(--line-soft); border-radius: 999px; padding: 6px 10px; }
.as-chip b { font: 650 calc(12px * var(--text-scale))/1 var(--font-mono); color: #fff; }
.as-chip .ico { color: var(--danger-ink); }
.anat-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr); gap: 16px; flex: 1 1 auto; min-height: 0; }
.anat-left { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.anat-stage {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(46, 110, 158, 0.28), transparent 70%),
    repeating-linear-gradient(0deg, rgba(120, 200, 255, 0.025) 0 1px, transparent 1px 4px),
    rgba(2, 7, 13, 0.7);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5);
}
.anat-stage::before, .anat-stage::after { /* scanner brackets in the corners */
  content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none; z-index: 2;
  border: 2px solid rgba(127, 243, 226, 0.45);
}
.anat-stage::before { top: 10px; right: 10px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.anat-stage::after { bottom: 10px; left: 10px; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.anat-stage .anat-wrap { position: absolute; inset: 0; }
.anat-crumbs { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; align-items: center; z-index: 3; }
.crumb { appearance: none; display: inline-flex; align-items: center; gap: 6px; font: 600 calc(12px * var(--text-scale))/1 var(--font-sans); color: var(--text-2); background: rgba(4, 9, 16, 0.7); border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; cursor: pointer; }
button.crumb:hover { color: #fff; border-color: var(--line-strong); }
.crumb.on { color: #fff; }
button.crumb.on { cursor: default; }
span.crumb.on { border-color: rgba(127, 243, 226, 0.5); color: var(--teal-ink); cursor: default; }
.crumb-sep { color: var(--text-4); }
.anat.zoomed .anat-callouts { opacity: 0; pointer-events: none; }
.anat .anat-callouts { transition: opacity 400ms var(--ease-out); }
.anat-callouts .co-line { fill: none; stroke: rgba(170, 225, 255, 0.32); stroke-width: 0.5; }
.anat-callouts .co-dot { fill: #fff; filter: drop-shadow(0 0 1.5px rgba(127, 243, 226, 0.9)); }
.anat-co { cursor: pointer; }
.anat-co .co-hit { fill: transparent; }
.anat-co:hover .co-hit, .anat-co.hl .co-hit { fill: rgba(127, 200, 255, 0.06); }
.anat-co.sel .co-hit { fill: rgba(127, 243, 226, 0.08); stroke: rgba(127, 243, 226, 0.4); stroke-width: 0.4; }
.co-name { font: 600 7.6px var(--font-sans); fill: #E8F0F9; }
.co-pct { font: 700 6.6px var(--font-mono); fill: var(--og); }
.co-track { fill: rgba(255, 255, 255, 0.1); }
.co-fill { fill: var(--og); }
.co-typ { stroke: #fff; stroke-width: 0.6; }
.co-kind { font: 700 4.4px var(--font-sans); letter-spacing: 0.1em; fill: var(--c-tech-ink); }
.anat-co.hl .co-line, .anat-co:hover .co-line, .anat-co.sel .co-line { stroke: var(--og); stroke-width: 0.8; }
.anat-co.b-impaired .co-name, .anat-co.b-failing .co-name, .anat-co.b-failed .co-name { fill: var(--og); }
.anat-detail { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow-y: auto; padding: 16px 18px 20px; background: linear-gradient(180deg, rgba(4, 9, 16, 0.55), rgba(4, 9, 16, 0.3)); border: 1px solid var(--line-soft); border-radius: 14px; }
.anat-detail.ad-in > * { animation: rise-in 420ms var(--ease-out) backwards; }
.anat-detail.ad-in > :nth-child(2) { animation-delay: 40ms; } .anat-detail.ad-in > :nth-child(3) { animation-delay: 80ms; }
.anat-detail.ad-in > :nth-child(4) { animation-delay: 110ms; } .anat-detail.ad-in > :nth-child(n+5) { animation-delay: 140ms; }
.ad-kicker { display: flex; align-items: center; gap: 8px; font: 650 calc(10.5px * var(--text-scale))/1.4 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.td-path { width: 8px; height: 8px; border-radius: 50%; background: var(--oc, var(--pc)); box-shadow: 0 0 8px var(--oc, var(--pc)); }
.ad-title { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px; }
.ad-name { font: 700 calc(28px * var(--text-scale))/1.15 var(--font-display); color: #fff; letter-spacing: -0.02em; }
.ad-band { margin-left: auto; font: 700 calc(10.5px * var(--text-scale))/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; color: var(--bc); background: color-mix(in srgb, var(--bc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 40%, transparent), 0 0 16px color-mix(in srgb, var(--bc) 20%, transparent); --bc: var(--org-strong); }
.ad-band.b-fair { --bc: var(--org-fair); } .ad-band.b-impaired { --bc: var(--org-impaired); } .ad-band.b-failing { --bc: var(--org-failing); } .ad-band.b-failed { --bc: var(--org-failed); }
.ad-hero { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 18px; margin: 12px 0 8px; }
.ad-step { display: inline-flex; gap: 3px; flex: none; padding: 2px; border-radius: 10px; border: 1px solid transparent; }
.ad-step.focused { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.ad-step-btn {
  appearance: none; cursor: pointer; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font: 500 18px/1 var(--font-sans); color: var(--text-2);
  background: var(--well); border: 1px solid var(--line-soft);
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.ad-step-btn:hover { color: #fff; background: var(--hover-2); border-color: var(--line-strong); }
.ad-ring { display: grid; place-items: center; }
.org-ring { display: block; overflow: visible; }
.org-ring .rg-track { fill: none; stroke: var(--track); }
.org-ring .rg-band { fill: none; opacity: 0.55; }
.rg-strong { stroke: var(--org-strong); } .rg-fair { stroke: var(--org-fair); } .rg-impaired { stroke: var(--org-impaired); } .rg-failing { stroke: var(--org-failing); } .rg-failed { stroke: var(--org-failed); }
.org-ring .rg-val { fill: none; stroke-linecap: round; stroke: var(--rc, var(--org-strong)); filter: drop-shadow(0 0 5px var(--rc, var(--org-strong))); }
.org-ring.b-fair { --rc: var(--org-fair); } .org-ring.b-impaired { --rc: var(--org-impaired); } .org-ring.b-failing { --rc: var(--org-failing); } .org-ring.b-failed { --rc: var(--org-failed); }
.org-ring .rg-typ { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.org-ring .rg-num { font: 700 24px var(--font-display); fill: #fff; letter-spacing: -0.02em; }
.org-ring .rg-lab { font: 700 7.5px var(--font-sans); fill: var(--text-3); letter-spacing: 0.18em; }
.ad-stats { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ad-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-soft); }
.ad-stat .caps { font-size: calc(9px * var(--text-scale)); }
.ad-stat b { font: 650 calc(14px * var(--text-scale))/1 var(--font-mono); color: #fff; }
.ad-stat.pos b { color: var(--c-body-ink); }
.ad-stat.neg b { color: var(--amber-ink); }
.ad-gauge { margin: 14px 0 2px; }
.ad-proj { margin: 10px 0 2px; font: 450 calc(12.5px * var(--text-scale))/1.5 var(--font-sans); color: var(--text-2); }
/* what would wear the organ down, and does not yet */
.watch-list { display: flex; flex-direction: column; gap: 2px; }
.watch-row {
  appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto; align-items: baseline; gap: 10px;
  padding: 6px 8px; border-radius: 8px; background: none; border: 1px solid transparent; border-bottom-color: var(--line-soft);
  font: 450 calc(12px * var(--text-scale))/1.4 var(--font-sans); color: var(--text-2);
  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.watch-row:hover { background: var(--hover); }
.watch-row.focused { border-color: var(--accent); }
.wr-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.wr-name .ico { color: var(--text-3); }
.wr-when { color: var(--text-3); }
.wr-now { color: var(--text-3); white-space: nowrap; }
/* what the organ's state puts at risk: the yearly chance of each life event
   read at its age, then the clock it starts if it fails */
.risk-list { display: flex; flex-direction: column; gap: 2px; }
.risk-row {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto; align-items: baseline; gap: 10px;
  padding: 6px 8px; border-bottom: 1px solid var(--line-soft);
  font: 450 calc(12px * var(--text-scale))/1.4 var(--font-sans); color: var(--text-2);
}
.rk-name { font-weight: 600; color: var(--text); }
.rk-basis { color: var(--text-3); }
.rk-p { font: 600 calc(11.5px * var(--text-scale))/1.4 var(--font-mono); color: var(--text); white-space: nowrap; }
.risk-row.shut .rk-name, .risk-row.shut .rk-p { color: var(--text-3); font-weight: 450; }
/* red is for a clock that is running, and only that */
.risk-row.fail.now .rk-name, .risk-row.fail.now .rk-p { color: var(--danger-ink); }
.ad-h { margin: 20px 0 8px; font-size: calc(9.5px * var(--text-scale)); display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.ad-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.ad-prose { font: 400 calc(13.5px * var(--text-scale))/1.62 var(--font-sans); color: var(--text-2); margin: 0 0 8px; }
.ad-cites { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; }
.ad-cites .cite { font: 400 calc(10.5px * var(--text-scale))/1.4 var(--font-mono); color: var(--text-3); text-decoration: none; border-bottom: 1px dotted var(--line-strong); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-cites .cite:hover { color: var(--teal-ink); }
.ad-hist { background: rgba(2, 7, 13, 0.4); border: 1px solid var(--line-soft); border-radius: 10px; padding: 6px; }
.org-hist { display: block; width: 100%; height: 70px; }
.oh-floor { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.oh-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke: var(--org-strong); }
.oh-line.b-fair, .oh-end.b-fair { stroke: var(--org-fair); } .oh-line.b-impaired, .oh-end.b-impaired { stroke: var(--org-impaired); }
.oh-line.b-failing, .oh-end.b-failing { stroke: var(--org-failing); } .oh-line.b-failed, .oh-end.b-failed { stroke: var(--org-failed); }
.oh-end { fill: #fff; stroke: var(--org-strong); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* reserve gauge */
.org-gauge { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--track); margin-top: 12px; }
.og-seg { position: absolute; top: 0; bottom: 0; }
.og-seg.failed { background: rgba(255, 77, 94, 0.3); border-radius: 4px 0 0 4px; }
.og-seg.failing { background: rgba(255, 138, 61, 0.3); }
.og-seg.impaired { background: rgba(245, 181, 68, 0.28); }
.og-seg.fair { background: rgba(181, 227, 91, 0.26); }
.og-seg.strong { background: rgba(61, 220, 151, 0.32); border-radius: 0 4px 4px 0; }
.og-typ { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; transform: translateX(-50%); border-radius: 1px; }
.og-ghost { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); border: 1.5px dashed var(--text-3); }
.og-mark { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--org-strong); border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px var(--org-strong); }
.og-mark.b-fair { background: var(--org-fair); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px var(--org-fair); }
.og-mark.b-impaired { background: var(--org-impaired); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px var(--org-impaired); }
.og-mark.b-failing { background: var(--org-failing); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px var(--org-failing); }
.og-mark.b-failed { background: var(--org-failed); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px var(--org-failed); }

/* the organ's year, itemised (diverging bars) */
.org-ledger { display: flex; flex-direction: column; gap: 2px; }
.ol-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 84px 50px; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--line-soft); }
.ol-ico { color: var(--text-3); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--well-2); }
.ol-row.k-lifestyle .ol-ico { color: var(--c-body-ink); }
.ol-row.k-exposure .ol-ico { color: var(--amber-ink); }
.ol-row.k-wear .ol-ico { color: var(--c-tech-ink); }
.ol-label { font: 450 calc(12px * var(--text-scale))/1.35 var(--font-sans); color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.ol-bm { font: 600 calc(10.5px * var(--text-scale))/1 var(--font-mono); padding: 3px 6px; border-radius: 6px; background: var(--well-2); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.ol-bm.st-warning { border-color: rgba(245, 181, 68, 0.5); color: var(--amber-ink); }
.ol-bm.st-critical { border-color: var(--orange); color: var(--orange); background: rgba(255, 138, 61, 0.1); }
.ol-track, .op-track { position: relative; height: 8px; display: block; }
.ol-axis { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-strong); }
.ol-bar { position: absolute; top: 1px; bottom: 1px; border-radius: 3px; transform-origin: var(--from, left); animation: ol-grow 700ms var(--ease-out) calc(var(--i, 0) * 60ms) backwards; }
.ol-bar.neg { background: linear-gradient(270deg, rgba(245, 181, 68, 0.95), rgba(255, 138, 61, 0.7)); box-shadow: 0 0 8px rgba(245, 181, 68, 0.4); --from: right; }
.ol-bar.pos { background: linear-gradient(90deg, rgba(61, 220, 151, 0.95), rgba(61, 220, 151, 0.6)); box-shadow: 0 0 8px rgba(61, 220, 151, 0.4); --from: left; }
@keyframes ol-grow { from { transform: scaleX(0); } to { transform: none; } }
.ol-amt { text-align: right; }
.ol-amt.neg, .op-v.neg, .ol-net .neg { color: var(--amber-ink); }
.ol-amt.pos, .op-v.pos, .ol-net .pos { color: var(--c-body-ink); }
.ol-net { display: flex; justify-content: space-between; padding: 8px 4px 0; font: 650 calc(12px * var(--text-scale))/1.3 var(--font-sans); color: #fff; }

/* biomarkers the organ is read through */
.read-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.read-chip { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: 550 calc(11.5px * var(--text-scale))/1.2 var(--font-sans); color: var(--text); padding: 6px 10px; border-radius: 999px; background: var(--well); border: 1px solid var(--line); transition: border-color 160ms var(--ease-out); }
.read-chip:hover { border-color: var(--line-strong); }
.rc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-body); box-shadow: 0 0 6px var(--c-body); }
.read-chip.st-warning .rc-dot { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.read-chip.st-critical .rc-dot { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.read-chip.st-terminal .rc-dot { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.read-chip.st-unknown .rc-dot { background: var(--text-4); box-shadow: none; }
.read-chip.st-unknown { border-style: dashed; color: var(--text-3); }

/* the replacement path */
.proc-card { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--kc) 8%, transparent), rgba(255, 255, 255, 0.02) 40%); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 12px 10px; margin-bottom: 8px; transition: border-color 200ms var(--ease-out); }
.proc-card::before { content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--kc); box-shadow: 0 0 10px var(--kc); }
.proc-card:hover { border-color: color-mix(in srgb, var(--kc) 45%, transparent); }
.pc-pic { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: rgba(2, 7, 13, 0.55); border: 1px solid var(--line-soft); }
.pc-main { min-width: 0; }
.proc-card.blocked { opacity: 0.78; }
.proc-card.blocked .pc-name { color: var(--text-2); }
.proc-card.is-installed { box-shadow: 0 0 0 1px color-mix(in srgb, var(--kc) 45%, transparent) inset, 0 0 22px color-mix(in srgb, var(--kc) 14%, transparent); }
.pc-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pc-kind { font: 700 calc(9px * var(--text-scale))/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--kc); }
.pc-name { font: 650 calc(14.5px * var(--text-scale))/1.3 var(--font-display); color: #fff; }
.pc-status { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: 600 calc(10.5px * var(--text-scale))/1.2 var(--font-sans); color: var(--text-3); }
.pc-status.installed { color: var(--kc); }
.pc-status.locked { color: var(--c-tech-ink); }
.pc-body { margin: 6px 0 8px; font-size: calc(12px * var(--text-scale)); line-height: 1.5; color: var(--text-2); }
.pc-facts { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-fact { font: 500 calc(10.5px * var(--text-scale))/1 var(--font-mono); color: var(--text-2); background: var(--well-2); border-radius: 6px; padding: 4px 7px; }
.pc-act { margin-top: 10px; display: flex; }
.node-chip.proc { border-color: rgba(61, 220, 151, 0.4); }

/* routine modal: organ preview */
.org-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 8px; }
.op-row { display: grid; grid-template-columns: calc(66px * var(--text-scale)) minmax(0, 1fr) 40px 48px; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font: 550 calc(12px * var(--text-scale))/1.2 var(--font-sans); color: var(--text-2); }
.op-v { text-align: right; }
.op-row .ol-bar { animation: none; }

/* reader: organ datum */
.organ-datum { grid-template-columns: auto minmax(0, 1fr) auto; }
.od-glyph { grid-row: span 2; display: flex; align-items: center; }
.od-before { color: var(--text-3); font-size: calc(13px * var(--text-scale)); }
.orl-item.orl-down { animation: orl-flash-down 1600ms var(--ease-out) var(--fx-delay, 0ms) backwards; }
.orl-item.orl-up { animation: orl-flash-up 1600ms var(--ease-out) var(--fx-delay, 0ms) backwards; }
@keyframes orl-flash-down { 0% { box-shadow: 0 0 0 0 transparent; } 20% { box-shadow: 0 0 0 2px var(--og), 0 0 24px var(--og); transform: scale(1.04); } 100% { box-shadow: 0 0 0 0 transparent; transform: none; } }
@keyframes orl-flash-up { 0% { box-shadow: 0 0 0 0 transparent; } 20% { box-shadow: 0 0 0 2px var(--og), 0 0 24px var(--og); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* a shorter desktop window: the body panel tightens so the figure keeps its room */
@media (min-width: 1024px) and (max-height: 880px) {
  .orl-item { padding: 4px 8px 5px; row-gap: 3px; }
  .organ-list { gap: 4px; }
}
.bp-stat.bp-oage.young b { color: var(--c-body-ink); }
.bp-stat.bp-pace.slow b { color: var(--c-body-ink); }
.bp-stat.bp-pace.fast b { color: var(--amber-ink); }
.bp-stat.bp-pace.escape { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, rgba(4, 9, 16, 0.45)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 25%, transparent); }
.bp-stat.bp-pace.escape b, .bp-stat.bp-pace.escape small { color: var(--teal-ink); }
.bp-stat.bp-oage.old b { color: var(--amber-ink); }
/* until the figure is measured, the moving layers hold still (their pivot is set in px) */
.anat-wrap > .anat-layer.anat-pending { animation: none !important; }

/* aging you can see: an older body stands a little shorter, its skin less luminous */
.anat-wrap { --age-k: 0; }
.anat-wrap.anat-m, .anat-wrap.anat-l { transform: scaleY(calc(1 - 0.04 * var(--age-k))); transform-origin: 50% 97%; }
.anat-wrap > svg.anat .a-skin { opacity: calc(1 - 0.45 * var(--age-k)); }
.anat-wrap > svg.anat .a-skin-side { opacity: calc(1 - 0.6 * var(--age-k)); }
.anat-wrap > svg.anat .a-rim { stroke: color-mix(in srgb, rgba(170, 230, 255, 0.5), rgba(205, 195, 185, 0.45) calc(var(--age-k) * 100%)); }
.anat-wrap > svg.anat .a-aura { opacity: calc(1 - 0.5 * var(--age-k)); }

/* your life, replayed */
.anat-replay { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--well); border: 1px solid var(--line-soft); flex: none; }
.ar-play { gap: 6px; flex: none; }
.ar-play.on { border-color: var(--accent); color: var(--teal-ink); box-shadow: 0 0 14px var(--accent-glow); }
.ar-track { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.ar-range { width: 100%; position: relative; z-index: 1; }
.ar-ticks { position: absolute; left: 9px; right: 9px; top: 50%; display: flex; justify-content: space-between; pointer-events: none; transform: translateY(6px); }
.ar-tick { width: 1px; height: 4px; background: var(--line-strong); }
.ar-tick.dec { height: 7px; background: var(--text-3); }
.ar-label { flex: none; min-width: 110px; text-align: right; color: var(--text-2); }
.anat-stage.replaying { box-shadow: inset 0 0 0 1px rgba(245, 181, 68, 0.45), inset 0 0 60px rgba(0, 0, 0, 0.5); }
.anat-stage.replaying::before, .anat-stage.replaying::after { border-color: rgba(245, 181, 68, 0.6); }
.anat-stage.replaying .anat-wrap { filter: sepia(0.25) saturate(0.9); }

/* your routine, on an organ's page: what of it reaches this organ, applied at once */
.ad-h.or-h::after { order: 1; }
.ad-h.or-h .or-edit { order: 2; }
.or-edit { padding: 3px 8px; gap: 5px; font-size: calc(11px * var(--text-scale)); letter-spacing: 0; text-transform: none; }
.or-box { display: grid; gap: 2px; margin: 2px 0 12px; }
.or-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 76px; align-items: center; gap: 2px 14px; padding: 3px 0; }
.or-row > .set-fx { grid-column: 2 / -1; margin-bottom: 4px; }
.or-l { display: flex; color: var(--text-2); }
.or-l .ico { width: calc(22px * var(--text-scale)); height: calc(22px * var(--text-scale)); }
.or-v { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.or-select { justify-self: start; }
.or-togs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.or-tag { font: 600 calc(9.5px * var(--text-scale))/1 var(--font-mono); color: var(--text-3); margin-left: 2px; }
.anat-body.pocket .or-row { grid-template-columns: auto minmax(0, 1fr) 64px; gap: 2px 10px; }
.org-ledger.no-anim .ol-bar { animation: none; transition: width 260ms var(--ease-out); } /* updated in place on a routine change: no regrowing */
.org-ledger.no-anim .ol-new .ol-bar { animation: ol-grow 520ms var(--ease-out) backwards; }