/* Hylē v4 · app-core lane · figure frames and the three native study figures (assets/app-core/figures.js). */
.cf-svg { display: block; overflow: visible; }
.cf-grid { stroke: var(--hairline, rgba(20,20,19,.08)); stroke-width: 1; }
.cf-axis { stroke: var(--ink-4); stroke-width: 1; }
.cf-null { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.cf-tick { font: 400 12px/1 var(--font-mono, ui-monospace, monospace); fill: var(--ink-2); letter-spacing: .02em; }
.cf-lab { font: 500 13px/1 var(--font-sans, Inter, sans-serif); fill: var(--ink); }
.cf-note { font: 500 13px/1 var(--font-sans, Inter, sans-serif); fill: var(--ink-2); }
/* forest · R-042 (bio) */
.cf-ci { stroke: var(--field-bio); stroke-width: 2; stroke-linecap: round; }
.cf-pt { fill: var(--field-bio); }
.cf-ci.is-gap { stroke: var(--brand-orange, #e0912f); stroke-dasharray: 4 3; }
.cf-pt.is-gap { fill: var(--brand-orange, #e0912f); }
/* drawdown · R-043 (quant) */
.cf-line { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linejoin: round; }
.cf-peak { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.cf-under { fill: color-mix(in srgb, var(--danger) 16%, transparent); stroke: var(--danger); stroke-width: 1.25; stroke-linejoin: round; }
.cf-mark { fill: var(--danger); stroke: var(--raised); stroke-width: 1.5; }
/* did · R-041 (policy) */
.cf-post { fill: var(--sunken); }
.cf-l1 { fill: none; stroke: var(--field-policy); stroke-width: 2; stroke-linejoin: round; }
.cf-l2 { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linejoin: round; }
.cf-cf { fill: none; stroke: var(--field-policy); stroke-width: 1.25; stroke-dasharray: 4 3; opacity: .7; }
.cf-p1 { fill: var(--field-policy); stroke: var(--raised); stroke-width: 1.2; }

/* Real figure images: always on white (the renders are white-ground), framed by a hairline, never cropped. */
.cf-frame { position: relative; display: block; background: #fff; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--hairline, rgba(20,20,19,.08)); overflow: hidden; }
.cf-frame > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cf-thumb { display: block; flex: none; width: 96px; aspect-ratio: 3 / 2; background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--hairline, rgba(20,20,19,.08)); overflow: hidden; }
.cf-thumb > img, .cf-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf-thumb > .fig-thumb { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }