/* fig-circuits: four circuits over the same three models (assets/fig-circuits.js).
   Model blocks, wires and the prompt classifier icon are the shared kit in site.css. */

/* min-width 0: the picker's unbroken labels must not widen the page's one-column grid */
[data-fig="circuits"] { min-width: 0; }
/* drawn at one unit per pixel; a max-height would shrink its words */
[data-fig="circuits"] .fig-svg svg { max-height: none; }

/* the head: "Pick a circuit", the picker and Replay. cx-nolabel drops the label,
   cx-stack puts the picker on its own row, cx-grid makes it 2 x 2 */
[data-fig="circuits"] .fig-head { flex-wrap: wrap; row-gap: 10px; margin-bottom: 12px; }
[data-fig="circuits"] .fig-title { color: var(--ink-2); }
[data-fig="circuits"] .cx-seg { flex: none; margin-right: auto; display: inline-grid; grid-auto-flow: column; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
[data-fig="circuits"] .cx-seg button { font: 600 14px/1.2 var(--font-body); color: var(--ink-2); background: var(--paper-hi); border: 0; padding: 8px 13px; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; }
[data-fig="circuits"] .cx-seg button:hover { color: var(--ink); background: var(--surface-2); }
[data-fig="circuits"] .cx-seg button[aria-checked="true"] { background: var(--ink); color: #FFFFFF; }
[data-fig="circuits"] .cx-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 8px; }
[data-fig="circuits"].cx-nolabel .fig-title { display: none; }
[data-fig="circuits"].cx-stack .cx-seg { order: 2; flex: 1 1 100%; margin-right: 0; grid-auto-columns: 1fr; }
[data-fig="circuits"].cx-grid .cx-seg { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }

/* readouts: calls, cost and (cascade, LMCircuit) the chance harmful */
[data-fig="circuits"] .cx-read { display: flex; flex-wrap: wrap; gap: 2px 24px; margin: 0 2px 10px; }
[data-fig="circuits"] .cx-ro { white-space: nowrap; font: 600 15px/1.5 var(--font-display); color: var(--ink-2); }
[data-fig="circuits"] .cx-ro b { margin-left: 6px; font-weight: 800; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
[data-fig="circuits"] .cx-ro .u { margin-left: 5px; font-weight: 500; font-size: 14px; color: var(--muted); }

/* the drawing */
[data-fig="circuits"] .cx-pk { font-size: 14px; fill: var(--muted); }
[data-fig="circuits"] .cx-pk.on { fill: var(--ink); font-weight: 600; }
[data-fig="circuits"] .cx-pk { cursor: pointer; pointer-events: bounding-box; }
[data-fig="circuits"] .cx-pk:hover { fill: var(--ink); }
[data-fig="circuits"] .cx-pk:focus { outline: none; }
[data-fig="circuits"] .pulse { fill: var(--wire-live); }
/* a model the circuit did not ask: a pale block in its colour whose name and price stay readable
   (the shared dim state only lowers the opacity, which leaves white text on a faint fill) */
[data-fig="circuits"] .station.dim { opacity: 1; }
/* it switches at once: an eased change passes through mid tones where the text is unreadable */
[data-fig="circuits"] .station.dim .st-body { stroke-width: 1.5; }
[data-fig="circuits"] .station.t0.dim .st-body { fill: color-mix(in srgb, var(--cost-0) 8%, var(--paper-hi)); }
[data-fig="circuits"] .station.t1.dim .st-body { fill: color-mix(in srgb, var(--block-1) 8%, var(--paper-hi)); }
[data-fig="circuits"] .station.t2.dim .st-body { fill: color-mix(in srgb, var(--cost-2) 8%, var(--paper-hi)); }
[data-fig="circuits"] .station.t0.dim text { fill: var(--cost-0); }
[data-fig="circuits"] .station.t1.dim text { fill: var(--block-1); }
[data-fig="circuits"] .station.t2.dim text { fill: var(--cost-2); }
/* wires the circuit did not use fade; a model it did not ask sends nothing on, so that wire goes */
[data-fig="circuits"] .cw.off { opacity: .3; }
[data-fig="circuits"] .cw.gone { opacity: 0; }
[data-fig="circuits"].cx-paused .cw.live { animation-play-state: paused; }
[data-fig="circuits"] .cx-box-b { fill: var(--paper-hi); stroke: var(--wire); stroke-width: 1.5; transition: stroke .25s ease, filter .25s ease; }
[data-fig="circuits"] .cx-box.on .cx-box-b { stroke: var(--wire-live); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(49,85,235,.35)); }
[data-fig="circuits"] .cx-box-t { font-family: var(--font-display); font-size: 15px; font-weight: 700; fill: var(--ink); }
[data-fig="circuits"] .cx-hub-l { font-family: var(--font-display); font-size: 14px; font-weight: 600; fill: var(--ink-2); }
[data-fig="circuits"] .lc-net line { transition: stroke .25s ease; }
[data-fig="circuits"] .lc-net.on line { stroke: var(--wire-live); }
[data-fig="circuits"] .cx-slot { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
[data-fig="circuits"] .cx-pred-b { fill: var(--navy); }
[data-fig="circuits"] .cx-pred-t { font-size: 14px; fill: #C7D5FF; }
[data-fig="circuits"] .cx-pred-v { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: .03em; fill: #FFFFFF; }
[data-fig="circuits"] .cx-badge circle { stroke: var(--surface); stroke-width: 2.5; }
[data-fig="circuits"] .cx-badge.ok circle { fill: var(--confirm); }
[data-fig="circuits"] .cx-badge.bad circle { fill: var(--alert); }
[data-fig="circuits"] .cx-badge path { fill: none; stroke: #FFFFFF; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* the sentence and the scoreboard */
[data-fig="circuits"] .cx-say { font-size: 15.5px; line-height: 1.5; color: var(--ink); margin: 14px 2px 0; text-wrap: pretty; }
[data-fig="circuits"] .cx-board { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
[data-fig="circuits"] .cx-board svg { display: block; width: 100%; height: auto; }
[data-fig="circuits"] .cx-bhead { font-size: 14px; fill: var(--muted); }
[data-fig="circuits"] .cx-bname { font-size: 15px; fill: var(--ink-2); }
[data-fig="circuits"] .cx-bnum { font-family: var(--font-display); font-size: 15px; font-weight: 800; fill: var(--ink); font-variant-numeric: tabular-nums; }
[data-fig="circuits"] .cx-band { fill: transparent; stroke: none; }
[data-fig="circuits"] .cx-bar { fill: var(--navy); }
[data-fig="circuits"] .cx-row.cur .cx-band { fill: var(--paper-hi); stroke: var(--line-2); stroke-width: 1; }
[data-fig="circuits"] .cx-row.cur .cx-bname { fill: var(--ink); font-weight: 600; }