/* Animated figures for the homepage's guiding-hypothesis cards, drawn by
   assets/js/hypothesis-figures.20260925.js. Every colour is a site theme token, so the light
   (sage and coral) and dark (graphite and chalk) themes both work. */

/* With no label row above it, each figure sits centred in its box: the top and bottom padding are
   evened out, keeping the box height and the drawing size. */
.hypothesis-figure { padding-block:30px; }
@media (max-width:760px) { .hypothesis-figure { padding-block:27px; } }

.hypothesis-figure .hf-svg { display: block; width: 100%; height: 100%; overflow: visible; color: var(--ink); }

/* The search space, drawn as a forest: branches thin and fade as they reach outward. */
.hf-tw { fill: none; stroke: var(--ink); }
.hf-tw--1 { stroke-opacity: .7; stroke-width: 1.25; }
.hf-tw--2 { stroke-opacity: .58; stroke-width: 1.05; }
.hf-tw--3 { stroke-opacity: .45; stroke-width: .85; }
.hf-tw--4 { stroke-opacity: .34; stroke-width: .7; }
.hf-knot { fill: var(--ink); fill-opacity: .6; }
.hf-node { fill: var(--paper); stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.15; }
.hf-node--root { fill: var(--ink); stroke: none; }

/* Explicit search: the selected path, in accent green. */
.hf-sel { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.hf-sel-node { fill: var(--accent); stroke: var(--paper); stroke-width: 1.4; }
.hf-goal circle { fill: var(--paper); stroke: var(--accent); stroke-width: 1.5; }
.hf-goal path { fill: none; stroke: var(--accent); stroke-width: 1.7; }
.hf-x { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.hf-pulse { fill: none; stroke: var(--ink); stroke-width: 1; }

/* Episodic memory, in coral. */
.hf-mem { fill: none; stroke: var(--coral); stroke-width: 2.2; }
.hf-mem-node { fill: var(--coral); stroke: var(--paper); stroke-width: 1.4; }
/* Small joints along a selected or recalled route. */
.hf-sel-node--sm, .hf-mem-node--sm { stroke-width: .8; }

/* Learned priors: the rays that bound the sage wedge. */
.hf-ray { stroke: rgb(var(--field-glow-rgb)); stroke-width: .9; stroke-opacity: .55; }

/* Cognition: an ink ring whose arcs light for learned priors, memory, and search. */
.hf-ring { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.hf-ring-core { fill: var(--ink); }
.hf-arc { fill: none; stroke-width: 3; }
.hf-arc--weights { stroke: rgb(var(--field-glow-rgb)); }
.hf-arc--memory { stroke: var(--coral); }
.hf-arc--search { stroke: var(--accent); }

.hf-label { font: 9px/1 var(--mono); letter-spacing: .9px; text-transform: uppercase; fill: var(--muted); }