/* 3D explorer (explore-ui.js). Traffic-class colors are validated as a categorical set on the card surface in both
   themes (CVD ΔE ≥ 12, contrast ≥ 3:1); the scene reads them from these tokens. */
:root{--x-human:#d97706;--x-automation:#4f6bd8;--x-server:#0f9a8a}
@media(prefers-color-scheme:dark){:root{--x-automation:#5f78e0;--x-server:#129d8c}}
/* Flow layers (Paths, Journeys, Model tree). Outcome: goal amber, earlier members violet, the rest neutral (all-pairs
   validated, ΔE ≥ 27 both themes). Channels: the reference categorical order (adjacent-validated; slots 1–3 all-pairs),
   Direct / unknown neutral. Light slots 3–5 sit under 3:1 on white: labels and the table twin carry the values. */
:root{--x-goal:#d97706;--x-member:#4a3aa7;--x-rest:#a3a29b;--x-ch1:#2a78d6;--x-ch2:#eb6834;--x-ch3:#1baf7a;--x-ch4:#eda100;--x-ch5:#e87ba4;--x-ch6:#008300;--x-ch7:#4a3aa7}
@media(prefers-color-scheme:dark){:root{--x-member:#9085e9;--x-rest:#6c6b65;--x-ch1:#3987e5;--x-ch2:#d95926;--x-ch3:#199e70;--x-ch4:#c98500;--x-ch5:#d55181;--x-ch6:#008300;--x-ch7:#9085e9}}
.ex-intro{max-width:760px}
.ex-alert{border:1px solid var(--line);border-left:3px solid var(--x-automation);background:var(--card);border-radius:8px;padding:12px 14px;margin:14px 0;max-width:900px}
.ex-alert p{margin:4px 0}
.ex-classes{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
.ex-chip{display:flex;align-items:flex-start;gap:9px;min-width:190px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer}
.ex-chip:hover{border-color:var(--mut)}
.ex-chip input{margin:3px 0 0;accent-color:var(--acc)}
.ex-chip .sw{width:10px;height:10px;border-radius:3px;margin-top:4px;flex:none}
.ex-chip b{display:block;font-size:20px;font-weight:650;line-height:1.2}
.ex-chip small{color:var(--mut);font-size:12px}
.ex-chip:has(input:not(:checked)){opacity:.6}
.ex-chip:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
.ex-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:6px 0 10px}
.ex-controls label{font-size:12px;color:var(--mut)}
.ex-controls .tog a{text-decoration:none}
.ex-play{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}
.ex-play input[type=range]{width:180px;accent-color:var(--acc)}
.ex-play output{min-width:84px;font-variant-numeric:tabular-nums;color:var(--fg)}
.ex-stage{position:relative;height:min(66vh,600px);min-height:340px;border:1px solid var(--line);border-radius:8px;background:var(--card);overflow:hidden;user-select:none}
.ex-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.ex-canvas.drag{cursor:grabbing}
.ex-empty{padding:40px 20px;text-align:center;color:var(--mut)}
.ex-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* JS sets transform to the projected point; translate anchors the box (centre, right edge or bottom centre) */
.ex-label{position:absolute;left:0;top:0;translate:-50% -50%;white-space:nowrap;font-size:11px;line-height:1.25;color:var(--mut);will-change:transform}
.ex-label.end{translate:-100% -50%;text-align:right}
.ex-label.axis{font-style:italic}
.ex-label.note{translate:-50% -100%;padding:2px 7px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--fg);box-shadow:0 1px 4px #0001}
.ex-label.head{translate:-50% 0;text-align:center;color:var(--fg)}
.ex-label.head b{display:block;font-size:12px}
.ex-label.head span{color:var(--mut)}
.ex-label.lane{color:var(--fg);font-size:12px}
.ex-label.lane b{font-weight:650;margin-left:4px}
.ex-label.disc{translate:-50% 0;color:var(--fg);font-size:12px;text-align:center}
.ex-label.disc b{font-weight:650;margin-left:3px}
.ex-label.disc.dim{opacity:.45}
.ex-label.node{translate:0 -50%;padding-left:10px;color:var(--fg);font-size:12px}
.ex-label.node b{display:block;font-size:13px}
.ex-label.node span{display:block;color:var(--mut);font-size:11px}
.ex-label.outside{translate:-50% 0;font-style:italic}
.ex-legend{display:inline-flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--mut)}
.ex-legend span{display:inline-flex;align-items:center;gap:6px}
.ex-legend .dot{width:10px;height:10px;border-radius:50%;background:var(--x-human)}
.ex-legend .dot.hollow{background:transparent;box-shadow:inset 0 0 0 2px var(--x-human)}
.ex-legend .dot.grey{background:var(--mut)}
.ex-tip i.hollow{background:transparent;border:2px solid;border-radius:50%;width:9px;height:9px;box-sizing:border-box}
.ex-label.colhead{translate:-50% -100%;text-align:center;color:var(--fg)}
.ex-label.colhead b{display:block;font-size:12px}
.ex-label.colhead span{color:var(--mut)}
.ex-label.nlab{translate:0 -50%;max-width:220px;overflow:hidden;text-overflow:ellipsis;padding:1px 6px;border-radius:4px;background:color-mix(in srgb,var(--card) 84%,transparent);color:var(--fg);font-size:11.5px}
.ex-label.nlab b{font-weight:650;font-variant-numeric:tabular-nums}
.ex-label.nlab em{font-style:normal;color:var(--mut)}
.ex-label.nlab em i{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 3px 1px 1px;vertical-align:middle}
.ex-label.nlab.dim{opacity:.35}
.ex-label.xlab{translate:0 0;font-style:italic}
.ex-label.xlab.mid{translate:0 -50%}
.ex-label.xlab b{font-style:normal;color:var(--fg)}
.ex-legend-row{margin:2px 0 10px}
.ex-legend b{color:var(--fg);font-weight:650;font-variant-numeric:tabular-nums}
.ex-legend small{color:var(--mut)}
.ex-alert-goal{border-left-color:var(--x-goal)}
.ex-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;font-size:12px;color:var(--mut)}
.ex-steps input{font:inherit;color:var(--fg);max-width:100%}
.ex-steps small{flex-basis:100%}
.ex-label.count{translate:-50% -100%;padding:0 4px;border-radius:3px;background:color-mix(in srgb,var(--card) 82%,transparent);color:var(--fg);font-weight:650;font-variant-numeric:tabular-nums}
.ex-tip{position:absolute;left:0;top:0;z-index:2;max-width:320px;padding:9px 11px;border-radius:6px;background:var(--fg);color:var(--bg);font-size:12px;line-height:1.45;pointer-events:none;box-shadow:0 6px 20px #0003}
.ex-tip strong{display:block;margin-bottom:4px}
.ex-tip .row{display:flex;align-items:center;gap:7px}
.ex-tip .row span{flex:1}
.ex-tip .row b{font-variant-numeric:tabular-nums}
.ex-tip i{width:9px;height:9px;border-radius:2px;flex:none;box-shadow:0 0 0 1px #fff6}
.ex-tip em{opacity:.7}
.ex-tip .sub{opacity:.75;font-size:11px;margin:1px 0 3px 16px}
.ex-tip.pinned{outline:2px solid var(--acc)}
.ex-caption{font-size:12px;margin:8px 0 0;max-width:900px}
.ex-pick{margin-top:14px}
.ex-pick ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:8px 0}
.ex-pick li a{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-family:ui-monospace,monospace;color:var(--fg);text-decoration:none}
.ex-pick li a:hover{border-color:var(--acc);color:var(--acc)}
.ex-tables details{margin-top:16px}
.ex-tables td.sw-cell{white-space:nowrap}
.ex-tables td.sw-cell i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
@media(max-width:760px){.ex-stage{height:56vh;min-height:300px}.ex-chip{min-width:0;flex:1 1 140px}.ex-play input[type=range]{width:120px}}
/* Time to value (Lifelines) and Page galaxy */
.ex-label.gate{translate:-50% -100%;text-align:center;color:var(--fg)}
.ex-label.gate b{display:block;font-size:12px}
.ex-label.gate span{display:block;color:var(--mut)}
.ex-label.gate.start b{color:var(--fg)}
.ex-label.disc .sub{display:block;color:var(--mut);font-size:11px}
.ex-legend .chip{cursor:pointer;padding:2px 8px;border:1px solid transparent;border-radius:999px;background:none;font:inherit;color:inherit;display:inline-flex;align-items:center;gap:6px}
.ex-legend .chip:hover{border-color:var(--line)}
.ex-legend .chip[aria-pressed=true]{border-color:var(--fg);color:var(--fg)}
.ex-legend .chip:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.ex-tables tr.clk{cursor:pointer}
.ex-label.gate.below{translate:-50% 0}
/* Lab pages (public/lab-ui.js) */
.lab-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 12px;font-size:13px}
.lab-nav a{text-decoration:none;color:var(--fg);padding:3px 10px;border:1px solid var(--line);border-radius:999px}
.lab-nav a.on{border-color:var(--fg);font-weight:600}
.lab-nav a:hover{border-color:var(--acc)}
.lab-nav span{font-size:12px}
.lab-stage{height:min(74vh,720px)}
.lab-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:14px}
.lab-card{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);text-decoration:none}
.lab-card:hover{border-color:var(--acc)}
.lab-card span{color:var(--mut);font-size:13px}
.lab-clock{font-variant-numeric:tabular-nums;font-size:12px;color:var(--mut)}
.lab-clock.on{color:var(--x-goal);font-weight:600}
.ex-legend .dot.sq{border-radius:2px}