/*
 * Anatomy figures: isometric machines drawn from solids (kit: public/assets/js/anatomy/iso-kit.mjs, after the "anatomy" skill).
 * The kit's tone variables are mapped onto the site's tokens so every machine is graphite and bone, with the three domain hues as its only colours
 * (tone "green" = emerald/Mathematics, "red" = rose/Physics, "blue" = orchid/AI&ML; the kit's names are fixed, the colours are ours).
 */
.iso {
  --anatomy-paper: var(--surface); --anatomy-card: var(--surface); --anatomy-text: var(--text-2); --anatomy-strong: var(--text); --anatomy-muted: var(--text-3);
  --anatomy-face: color-mix(in srgb, var(--surface) 80%, var(--text)); --anatomy-top: color-mix(in srgb, var(--surface) 70%, var(--text));
  --anatomy-shade-0: color-mix(in srgb, var(--surface) 82%, var(--bg)); --anatomy-shade-1: color-mix(in srgb, var(--surface) 90%, var(--text));
  --anatomy-shade-2: color-mix(in srgb, var(--surface) 84%, var(--text)); --anatomy-shade-3: color-mix(in srgb, var(--surface) 76%, var(--text));
  --anatomy-lit-top: color-mix(in srgb, var(--surface) 46%, var(--text)); --anatomy-lit-shade: color-mix(in srgb, var(--surface) 62%, var(--text));
  --anatomy-hi: var(--text); --anatomy-mid: color-mix(in srgb, var(--text-3) 88%, var(--surface)); --anatomy-lo: color-mix(in srgb, var(--text-3) 52%, var(--surface)); --anatomy-faint: color-mix(in srgb, var(--text-3) 26%, var(--surface));
  --anatomy-lit: var(--bone); --anatomy-halo: var(--bg); --anatomy-halo-opacity: .9; --anatomy-dot: var(--text);
  --anatomy-red: var(--dom-phy); --anatomy-green: var(--dom-mth); --anatomy-blue: var(--dom-aiml);
  --anatomy-weight: .6px; --anatomy-ease: cubic-bezier(.32,.72,0,1); --anatomy-mono: var(--font-mono);
}
:root[data-theme="light"] .iso { --anatomy-halo: var(--line-strong); --anatomy-halo-opacity: .3; --anatomy-lit: var(--bone); }

/* The frame around a figure: a tonal card, a readout and a caption. No outline, no uppercase labels. */
.fig { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4) var(--sp-4); overflow: hidden; }
.fig__stage { position: relative; outline-offset: 4px; }
.fig__readout { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); font: 500 .9rem/1.3 var(--font-ui); color: var(--text-2); }
.fig__readout output { font-family: var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.fig__caption { margin: var(--sp-2) 0 0; color: var(--text-3); font-size: .9rem; max-width: 62ch; }
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}

/* A machine on a page: the figure in a tonal card with one line under it. */
.machine { display: grid; gap: var(--sp-3); margin: 0; color: var(--text); text-decoration: none; }
.machine[hidden] { display: none; }
.machine__stage { display: block; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); transition: background .2s var(--ease); }
a.machine:hover .machine__stage, a.machine:focus-visible .machine__stage { background: var(--surface-2); }
.machine .fig__stage { display: block; aspect-ratio: 5 / 4; }
.machine:not([data-mounted]) .machine__cap { opacity: .0; }
.machine .fig__stage svg { width: 100%; height: 100%; }
.machine__cap { font: 500 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.2 var(--font-display); letter-spacing: -.01em; padding: 0 var(--sp-2); }
.machine[data-dom="mth"] .machine__cap { color: var(--dom-mth); } .machine[data-dom="phy"] .machine__cap { color: var(--dom-phy); } .machine[data-dom="aiml"] .machine__cap { color: var(--dom-aiml); }
.topic-page > .machine, .tp > .machine { max-width: 560px; margin: var(--sp-5) 0; }