/* Srida Infotech - fig.css: .fig frame (4.5.7) and demo controls (4.5.8). Draw, then light, then flow.
   Contract with fig.js: figure states is-idle / is-drawing / is-live / is-paused / is-inview / is-static;
   node states is-lit / is-warn / is-drift / is-dim / is-waiting / is-hover; packets are
   <use class="packet <kind> [cls]"> in g.packets; readouts .fig-readout; probe .fig-probe. */

.fig-symbols { display: none; }

.fig { margin: 0; display: grid; gap: var(--s-3); min-width: 0; }

/* plate */
.fig-plate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.18em; line-height: 1.4; text-transform: uppercase; color: var(--text-2); }
.fig-plate .fig-no { color: var(--accent); }
.fig-plate .tag--illustrative, .fig-plate .tag--illustration { margin-left: auto; }

/* double-bezel shell */
.fig-shell { border: 1px solid var(--line); border-radius: var(--radius-shell); padding: var(--shell-pad); background: var(--surface-2); box-shadow: var(--shadow-soft); transition: box-shadow var(--dur-m) var(--ease-out), border-color var(--dur-m); }
.fig:hover .fig-shell { border-color: var(--line-strong); }
.fig-canvas { position: relative; border-radius: var(--radius-inner); border: 1px solid rgba(43, 43, 43, 0.05); background: radial-gradient(28rem 18rem at 90% -10%, rgba(184, 85, 85, 0.10), transparent 62%), var(--bg-raise); padding: var(--s-4); overflow: hidden; }
/* labels keep one size whatever the column: the drawing stops growing at 46rem (11 to 13 px labels) */
.fig-canvas > svg { width: 100%; max-width: 46rem; margin-inline: auto; height: auto; display: block; overflow: visible; }
/* portrait (fig.js .is-portrait): the drawing's data-v-* geometry, labels at 13 units in a 300-unit
   viewBox, so at least 10 px at a 320 px viewport */
.fig.is-portrait .fig-canvas > svg { max-width: 22rem; }
.fig.is-portrait .fig-canvas text { font-size: 13px; }
.fig:not(.is-portrait) .fig-canvas .v-only, .fig.is-portrait .fig-canvas .h-only { display: none; }
.fig-canvas .fig-hit { fill: transparent; stroke: none; pointer-events: all; }
@media (max-width: 479.98px) { .fig-canvas { padding: var(--s-3) var(--s-2); } }
.fig-canvas text { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--text-2); stroke: none; }
.fig-canvas .hair { fill: none; stroke: var(--ink-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* routes: dotted; drawn by sliding a 260-dot dash pattern (--dash-draw / --dash-len, main.css) */
.fig [data-route] { fill: none; stroke: var(--fig-path-lit); stroke-width: var(--fig-stroke-w); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: var(--fig-dash); transition: stroke var(--dur-m) var(--ease-out), opacity var(--dur-s) var(--ease-out); }
.js .fig:not(.is-static) [data-route] { stroke-dasharray: var(--dash-draw); stroke-dashoffset: var(--dash-len); transition: stroke-dashoffset var(--dur-xl) var(--ease-mech) calc(var(--d, 0s) + var(--seq, 0) * 160ms), stroke var(--dur-m) var(--ease-out), opacity var(--dur-s) var(--ease-out); }
.js .fig:is(.is-drawing, .is-live, .is-paused) [data-route] { stroke-dashoffset: max(0, calc(var(--dash-len) - var(--len, 900) * 1.5)); }
.fig [data-route].is-dim { opacity: 0.3; }

/* nodes: symbols carry no paint, so shapes inherit fill and stroke from the <use> */
.fig [data-node] { transition: opacity var(--dur-m) var(--ease-out); }
.fig [data-node] use { fill: var(--fig-node-fill); stroke: var(--fig-node-stroke); --dot-fill: var(--fig-node-stroke); transition: stroke var(--dur-m) var(--ease-out), fill var(--dur-m) var(--ease-out); }
.fig [data-node].is-lit use,
html:not(.js) .fig [data-node] use,
html[data-motion="reduce"] .fig:not(.is-static) [data-node] use { stroke: var(--fig-node-lit); fill: var(--fig-node-fill-lit); --dot-fill: var(--fig-node-lit); }
.fig [data-node].is-dim { opacity: 0.45; }
.fig [data-node].is-dim use { stroke: var(--ink-mute); fill: var(--fig-node-fill); --dot-fill: var(--ink-mute); }
.fig [data-node]:is(.is-warn, .is-drift) use { stroke-dasharray: 3 3; }
.fig .node-flag { opacity: 0; fill: var(--accent); transition: opacity var(--dur-s) var(--ease-out); }
.fig [data-node]:is(.is-warn, .is-drift) .node-flag { opacity: 1; }
.fig .node-readout { opacity: 0; fill: var(--text); transition: opacity var(--dur-s) var(--ease-out); }
.fig [data-node]:is(.is-drift, .has-readout) .node-readout { opacity: 1; }
.fig .node-check { fill: none; stroke: var(--accent); stroke-width: var(--fig-stroke-w); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: var(--len, 40); stroke-dashoffset: var(--len, 40); transition: stroke-dashoffset var(--dur-s) var(--ease-mech); }
.fig [data-node].is-lit .node-check, .fig.is-static .node-check, html[data-motion="reduce"] .fig .node-check { stroke-dashoffset: 0; }

/* parts inside the symbols (reached through inherited custom properties) */
circle.sphere-bg { fill: var(--bg-raise); stroke: none; }
circle.dot[data-i] { fill: var(--dot-fill, var(--fig-node-lit)); stroke: none; }
rect.doc { fill: var(--packet-fill, var(--fig-packet-doc)); }
g.ring { fill: var(--fig-node-fill-lit); stroke: none; opacity: var(--ring-o, 0); transform-box: fill-box; transform-origin: center; animation: var(--ring-a, none); transition: opacity var(--dur-s) var(--ease-out); }
.fig [data-node].is-waiting { --ring-o: 1; --ring-a: node-ring 1.2s var(--ease-in-out) infinite; }
.fig.is-static { --ring-o: 1; --ring-a: none; }
@keyframes node-ring { 0%, 100% { transform: scale(0.85); opacity: 0.9; } 50% { transform: scale(1.2); opacity: 0.35; } }

/* focusable nodes: hover, focus, or .is-hover (tap / focus from fig.js) */
.fig [data-node][tabindex] { cursor: pointer; }
/* pointer focus gets the node lighting only; the accent ring is for keyboard focus */
.fig [data-node][tabindex]:focus:not(:focus-visible) { outline: none; }
.fig [data-node][tabindex]:is(:hover, :focus-visible, .is-hover) use { stroke: var(--accent); fill: var(--fig-node-fill-lit); --dot-fill: var(--accent); }
.fig-readout { position: absolute; transform: translate(-50%, 6px); padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--surface); box-shadow: var(--shadow-float); font-family: var(--font-mono); font-size: var(--t-readout); letter-spacing: 0.02em; white-space: nowrap; color: var(--text); opacity: 0; pointer-events: none; transition: opacity var(--dur-xs) var(--ease-out) 120ms; z-index: 2; }
.fig-readout.is-on { opacity: 1; }
.fig-readout.is-beside { transform: translate(0, 4px); }

/* packets: only where offset-path works (fig.js animates offset-distance) */
.fig .packets { display: none; }
@supports (offset-path: path("M0 0")) { .fig:not(.is-static) .packets { display: inline; } }
.fig .packet { fill: var(--fig-packet); stroke: var(--fig-packet); stroke-width: var(--fig-stroke-w); pointer-events: none; }
.fig .packet:is(.packet-img, .packet-wave) { fill: var(--fig-packet-doc); }
.fig .packet.is-exception { --packet-fill: var(--fig-packet); }

/* probe ring (fig.js sets transform, --pw, --ph) */
.fig-probe { --pw0: var(--pw, 20px); --ph0: var(--ph, 20px); position: absolute; left: 0; top: 0; width: var(--pw0); height: var(--ph0); margin: calc(var(--ph0) / -2) 0 0 calc(var(--pw0) / -2); border: 1.5px solid var(--accent); border-radius: 50%; opacity: 0; pointer-events: none; z-index: var(--z-probe); transition: opacity 120ms var(--ease-out), width var(--dur-s) var(--ease-snap), height var(--dur-s) var(--ease-snap), margin var(--dur-s) var(--ease-snap), border-radius var(--dur-s) var(--ease-snap); }
.fig-probe.is-on { opacity: 1; }
.fig-probe.is-snap:not(.is-round) { border-radius: var(--radius-chip); }
@media (hover: none), (pointer: coarse) { .fig-probe { display: none; } }

/* demo controls (4.5.8) */
.demo { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-4) var(--s-6); padding: var(--s-4) var(--s-4) var(--s-2); }
.demo .ctl { display: grid; gap: var(--s-2); justify-items: start; }
.demo .ctl > .label { display: block; }

.switch { position: relative; width: 44px; height: 24px; margin: 10px 0; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; transition: background-color var(--dur-s) var(--ease-snap), border-color var(--dur-s); }
.switch::before { content: ""; position: absolute; inset: -11px 0; }
.switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-2); transition: translate var(--dur-s) var(--ease-snap), scale var(--dur-xs) var(--ease-out), background-color var(--dur-s); }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { translate: 20px 0; background: var(--accent-ink); }
.switch:hover::after { scale: 1.08; }
.switch:active::after { scale: 1.15 1; }

.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); min-height: 44px; }
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.seg label { position: relative; z-index: 1; display: grid; place-items: center; padding: 0.35rem 0.95rem; border-radius: var(--radius-pill); font-size: 0.85rem; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: color var(--dur-s) var(--ease-out); }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg label:has(input:checked), .seg label:hover { color: var(--text); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* fig.js writes --seg-i (selected index) and --seg-n (count); :has() gives the no-JS defaults */
.seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--seg-n, 2)); border-radius: var(--radius-pill); background: var(--accent-dim); border: 1px solid var(--accent-soft); transform: translateX(calc(var(--seg-i, 0) * 100%)); transition: transform var(--dur-s) var(--ease-mech); pointer-events: none; }
.seg:has(> label:nth-of-type(3)) { --seg-n: 3; }
.seg:has(> label:nth-of-type(4)) { --seg-n: 4; }
.seg:has(> label:nth-of-type(2) > input:checked) { --seg-i: 1; }
.seg:has(> label:nth-of-type(3) > input:checked) { --seg-i: 2; }
.seg:has(> label:nth-of-type(4) > input:checked) { --seg-i: 3; }

/* press: fig.js swaps the text to "Running…" and sets aria-disabled while a batch runs */
.press { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.55rem 1.15rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; font: 500 0.9rem var(--font-sans); color: var(--text); cursor: pointer; transition: transform var(--dur-xs) var(--ease-snap), box-shadow var(--dur-xs) var(--ease-snap), border-color var(--dur-s), background-color var(--dur-s); }
.press:hover { border-color: rgba(43, 43, 43, 0.36); background: rgba(43, 43, 43, 0.035); }
.press:active { transform: translateY(1px); box-shadow: var(--shadow-inset); }
.press[aria-disabled="true"] { cursor: progress; border-style: dashed; font-family: var(--font-mono); font-size: var(--t-readout); letter-spacing: 0.04em; color: var(--text-2); }

.counter { display: inline-flex; align-items: baseline; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--t-num); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); font-feature-settings: "tnum"; }
.counter-val { display: inline-block; color: var(--text); }
.counter.is-roll .counter-val { animation: digit-roll var(--dur-s) var(--ease-mech); }
@keyframes digit-roll { 30% { transform: translateY(-1px); opacity: 0.4; } 60% { transform: translateY(1px); } 100% { transform: none; } }

/* caption and steps */
.fig-caption { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius-chip); font-family: var(--font-mono); font-size: var(--t-readout); letter-spacing: 0.02em; line-height: 1.5; color: var(--text-2); transition: background-color var(--dur-s) var(--ease-out); }
.fig:hover .fig-caption { background: var(--surface-2); }
.fig-steps { padding-left: 1.25rem; display: grid; gap: 0.35rem; font-size: var(--t-small); color: var(--text-2); }
/* a .path figure's stations already carry its text: the steps list stays for screen readers only */
@media (min-width: 768px) { .fig-steps:not([data-steps="visible"]) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }
.fig--path .fig-steps:not([data-steps="visible"]) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fig-link { justify-self: start; margin-top: var(--s-1); font-size: var(--t-small); font-weight: 500; }

/* reduced motion / is-static: drawn and lit at t=0, no packets, no probe, no transitions */
.fig.is-static [data-route], html[data-motion="reduce"].js .fig [data-route] { stroke-dasharray: var(--fig-dash); stroke-dashoffset: 0; transition: none; }
html[data-motion="reduce"] .fig .packets { display: none; }
html[data-motion="reduce"] .fig-probe { display: none; }
html[data-motion="reduce"] .fig { --ring-o: 1; --ring-a: none; }
html[data-motion="reduce"] :is(.fig, .fig *, .fig-readout) { transition: none; }
html[data-motion="reduce"] .counter.is-roll .counter-val { animation: none; }
html[data-motion="reduce"] .switch::after { transition: none; scale: 1; }
html[data-motion="reduce"] .press:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  :root.js .fig [data-route] { stroke-dasharray: var(--fig-dash); stroke-dashoffset: 0; transition: none; }
  :root .fig .packets, :root .fig-probe { display: none; }
  :root .fig:not(.is-static) [data-node] use { stroke: var(--fig-node-lit); fill: var(--fig-node-fill-lit); --dot-fill: var(--fig-node-lit); }
  :root .fig { --ring-o: 1; --ring-a: none; }
  :root :is(.fig, .fig *, .fig-readout) { transition: none; }
  :root .counter.is-roll .counter-val { animation: none; }
  :root .switch::after { transition: none; scale: 1; }
  :root .press:active { transform: none; }
}