/* Case figures: the approved diagram language (docs/previews/diagram-system.html) for case-figs.js.
   Three strokes, one node, bone is the only emphasis. Every class is cf- so nothing collides with case.css. */
.cf { --cf-ease: cubic-bezier(0.22, 1, 0.36, 1); margin: var(--gap-figure, 40px) 0; }
.cf-canvas { width: 100%; }
.cf-canvas svg { display: block; overflow: visible; }
.cf figcaption { margin-top: var(--gap-block, 40px); font: 400 var(--fs-meta, 13px)/1.5 var(--sans); color: var(--text-3); }
.cf figcaption .cf-once { display: block; }

/* strokes: rest, in use, lit */
.cf-rest { fill: none; stroke: var(--text-3); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.55; }
.cf-use { fill: none; stroke: var(--text-2); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.cf-lit { fill: none; stroke: var(--text); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.cf-dash { stroke-dasharray: 3 5; }
/* the lit route draws once (pathLength 1); at rest it is whole, so reduced motion and late scripts show the end */
.cf-route { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.cf-wait .cf-route { stroke-dashoffset: 1; }
.cf-wait .cf-fade { opacity: 0; }

/* the one node: 7px, hollow at rest, filled when lit */
.cf-node { fill: var(--bg); stroke: var(--text-2); stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: fill 320ms var(--cf-ease), stroke 320ms var(--cf-ease); }
.cf-node.on { fill: var(--text); stroke: var(--text); }
.cf-node.quiet { stroke: var(--text-3); }
.cf-wait .cf-node.on, .cf-wait .cf-step.is-on .cf-node { fill: var(--bg); stroke: var(--text-2); }
/* the ring round a node marks keyboard focus only (owner, 2026-10-01): the script parks it on the shown station,
   and it is drawn only while that station matches :focus-visible, never after a pointer hover or click. Browsers
   without :has() never draw it; the hit-rect stroke below still marks keyboard focus there. */
.cf-ring { opacity: 0; pointer-events: none; transition: opacity 320ms var(--cf-ease); }
.cf-canvas svg:has(.cf-st:focus-visible) .cf-ring.is-on { opacity: 1; }

/* text: Geist 14px, lit in bone; mono only for numbers */
.cf-t { font: 400 14px var(--sans); fill: var(--text-2); transition: fill 320ms var(--cf-ease); }
.cf-t-3 { fill: var(--text-3); }
.cf-t-name { fill: var(--text); font-weight: 500; }
.cf-t-num { font: 400 32px var(--mono); fill: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* engineering types (or, with no types row, the shown station) light their own stations and quiet the rest */
.cf-canvas [data-kind], .cf-canvas .cf-st { transition: opacity 320ms var(--cf-ease); }
.cf.is-focus .cf-canvas .dim { opacity: 0.38; }
.cf.is-focus .cf-canvas .hi .cf-node { fill: var(--text); stroke: var(--text); }
.cf.is-focus .cf-canvas .hi .cf-t { fill: var(--text); }
.cf.is-focus .cf-canvas .hi .cf-use, .cf.is-focus .cf-canvas .hi .cf-rest { stroke: var(--text); opacity: 1; }

.cf-types { list-style: none; margin: var(--gap-figure, 40px) 0 0; padding: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--split-gap, 48px); }
/* without the script: the name, then the definition */
.cf-types:not(.cf-ready) > li { padding: 24px 0 8px; font: 400 15px/1.55 var(--sans); color: var(--text-2); }
.cf-types:not(.cf-ready) > li::before { content: attr(data-name); display: block; margin-bottom: 6px; font-weight: 500; color: var(--text); }
.cf-type { all: unset; box-sizing: border-box; display: block; width: 100%; min-height: 44px; padding: 24px 0 8px; cursor: pointer; }
.cf-type .cf-kn { display: block; font: 500 15px/1.4 var(--sans); color: var(--text); transition: color 320ms var(--cf-ease); }
.cf-type .cf-kd { display: block; margin-top: 6px; font: 400 15px/1.55 var(--sans); color: var(--text-2); transition: color 320ms var(--cf-ease); }
.cf-types.is-focus .cf-type:not(.is-on) .cf-kn, .cf-types.is-focus .cf-type:not(.is-on) .cf-kd { color: var(--text-3); }
.cf-type:focus-visible { outline: 1px solid var(--text); outline-offset: 6px; border-radius: 2px; }

/* stations you can choose */
.cf-st { cursor: pointer; outline: none; }
.cf-hit { fill: transparent; stroke: none; }
.cf-st:focus-visible .cf-hit { stroke: var(--text); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* the note line: one sentence at a time, every sentence in one cell so the height never jumps */
.cf-note { display: grid; margin-top: 32px; min-height: 24px; }
.cf-note > p { grid-area: 1 / 1; margin: 0; font: 400 16px/1.5 var(--sans); color: var(--text); visibility: hidden; opacity: 0; transition: opacity 320ms var(--cf-ease); max-width: var(--measure, 38em); }
.cf-note > p.is-on { visibility: visible; opacity: 1; }
.cf-note > p span { color: var(--text-3); }

/* layers: hairline floors over a whisper of bone; the shown floor brightens */
.cf-plane { fill: var(--text); fill-opacity: 0.02; stroke: var(--text-2); stroke-width: 1; stroke-opacity: 0.55; vector-effect: non-scaling-stroke; transition: stroke-opacity 320ms var(--cf-ease), fill-opacity 320ms var(--cf-ease), stroke 320ms var(--cf-ease); }
.cf-row.is-on .cf-plane { stroke: var(--text); stroke-opacity: 1; fill-opacity: 0.05; }
.cf-row:focus-visible .cf-plane { stroke-width: 1.5; }
.cf-row.is-on .cf-t { fill: var(--text); }

/* ladder steps: three faces, each a shade of the same bone; the lit step's tread brightens */
.cf-face { stroke: var(--text-2); stroke-width: 1; stroke-opacity: 0.55; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke-opacity 320ms var(--cf-ease), fill 320ms var(--cf-ease); }
.cf-face-top { fill: #1e1e1d; }
.cf-face-front { fill: #141414; }
.cf-face-side { fill: #181817; }
.cf-step .cf-node { stroke: var(--text-3); }
.cf-step.is-on .cf-face-top { stroke: var(--text); stroke-opacity: 1; fill: #242423; }
.cf-step.is-on .cf-node { fill: var(--text); stroke: var(--text); }
.cf-step.is-on .cf-t { fill: var(--text); }
.cf-step:focus-visible .cf-face { stroke: var(--text); stroke-opacity: 1; }

/* the source lists: the drawing's content, shown as a plain list only without the script */
.cf-src { margin: 0; padding: 0 0 0 1.25em; font: 400 15px/1.55 var(--sans); color: var(--text-2); }
.cf-src > li + li { margin-top: var(--gap-list, 12px); }
.cf-src > li[data-num]::after { content: " " attr(data-num) " " attr(data-unit); color: var(--text); }
.cf > .cf-return, .cf > .cf-foot { margin: var(--gap-list, 12px) 0 0; font: 400 15px/1.55 var(--sans); color: var(--text-3); }
.cf-src[hidden], .cf > [hidden] { display: none; }

/* what's built: a status dot before each item, two columns, one rule above the group, a key once */
.cf-built-key { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: var(--gap-block, 40px) 0 0; font: 400 14px var(--sans); color: var(--text-3); }
.cf-built-key span { display: inline-flex; align-items: center; gap: 10px; }
.cf-built { list-style: none; margin: 16px 0 0; padding: var(--gap-list, 12px) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-list, 12px) var(--split-gap, 48px); }
.cf-built > li { display: flex; align-items: baseline; gap: 14px; padding-top: 4px; font: 400 15px/1.5 var(--sans); color: var(--text-2); }
.cf-built > li::before, .cf-dot { content: ""; flex: none; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text); transform: translateY(-2px); }
.cf-built > li[data-state="ring"]::before, .cf-dot--ring { background: none; box-shadow: inset 0 0 0 1px var(--text-2); }
.cf-built > li[data-state="dashed"]::before, .cf-dot--dashed { background: none; border: 1px dashed var(--text-2); width: 4px; height: 4px; }
.cf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 820px) {
  .cf-types { grid-template-columns: 1fr; }
  .cf-built { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-node, .cf-t, .cf-canvas [data-kind], .cf-canvas .cf-st, .cf-note > p, .cf-plane, .cf-face, .cf-ring, .cf-type .cf-kn, .cf-type .cf-kd { transition: none !important; }
}
@media print {
  .cf-wait .cf-route { stroke-dashoffset: 0; }
  .cf-wait .cf-fade { opacity: 1; }
  .cf-face-top, .cf-face-front, .cf-face-side, .cf-step.is-on .cf-face-top { fill: none; }
}