/* Interaction states only: original colors, typography, layout and spacing remain in style.css. */
.interactive { cursor: pointer; }
.interactive:hover { background-color: var(--raise); }
.interactive:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible { outline: 1px solid var(--active); outline-offset: 2px; }
.interactive:active, button:active, a:active { opacity: .8; }
.REFUSED { color: var(--bad); }
.FLOW { color: var(--dim); }
.TRACE { color: var(--active); }
.wl .v { overflow-wrap: anywhere; }
.receipt .kv b { overflow-wrap: anywhere; text-align: right; }
.picker a { font-size: 11.5px; }
.ws [hidden] { display: none; }

/* Additive state and feedback layer; the original design sheet is unchanged. */
[hidden] { display: none !important; }
button, input[type="range"] { cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed !important; opacity: .45; }
button, a, .interactive { transition: color .16s ease, border-color .16s ease, background-color .16s ease, opacity .16s ease; }
.nav nav a { position: relative; }
.nav nav a[aria-current="location"] { color: var(--active); }
.nav nav a[aria-current="location"]::after { content: ""; position: absolute; height: 1px; background: var(--active); left: 0; right: 0; bottom: -4px; }
.nav nav a:hover, footer nav a:hover { color: var(--glow); }
section[id] { scroll-margin-top: 72px; }
.status-cursor { color: var(--lime); animation: status-blink 1.15s steps(2) infinite; }
@keyframes status-blink { 50% { opacity: 0; } }
.pool-switch { display: inline-flex; gap: 3px; margin-left: auto; }
#pool-label { white-space: nowrap; }
.pool-switch button, .pool-actions button, .export-toolbar button { background: none; color: var(--dim); border: 1px solid var(--line-2); font: 400 10.5px/1 var(--mono); padding: 5px 6px; letter-spacing: .06em; }
.pool-switch button:hover, .pool-actions button:hover, .export-toolbar button:hover { color: var(--active); border-color: var(--active); }
.pool-switch button[aria-pressed="true"], .export-toolbar button[aria-pressed="true"] { color: var(--active); background: var(--raise); }
.panel-head:has(.pool-switch) .tag { margin-left: 0; white-space: nowrap; }
.panel-body:has(#pool-head) { overflow-x: auto; }
.panel-body:has(#pool-head) table { min-width: 340px; }
#sleepers tr.interactive:hover, #desk tr.interactive:hover { background: var(--raise); }
#sleepers tr[aria-selected="true"] { color: var(--active); background: var(--raise); }
.pool-detail { border-top: 1px solid var(--line-2); margin-top: 12px; padding-top: 12px; font-size: 11.5px; }
.pool-detail h4 { color: var(--lime); font: 400 11px/1.4 var(--mono); letter-spacing: .08em; margin: 0 0 8px; }
.pool-detail .receipt { font-size: 11.5px; }
.pool-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.pool-event { color: var(--lime); padding: 6px 0; }
.pool-trace { color: var(--dim); font-size: 11px; margin: 8px 0; }
.pool-trace > div { border-bottom: 1px dotted var(--line); padding: 3px 0; }
.pool-detail .wl { font-size: 11px; grid-template-columns: 15px 45px 1fr auto; gap: 4px; }
.pool-detail .wl .dim { overflow-wrap: anywhere; }
.wl.waiting { opacity: .25; }
.info-tip { position: relative; }
.info-tip::after, .pipeline-hit::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 4px); width: max-content; max-width: min(270px, 70vw); white-space: normal; color: var(--bone); background: var(--ink); border: 1px solid var(--line-2); padding: 5px 7px; font: 400 10.5px/1.45 var(--mono); letter-spacing: 0; text-transform: none; opacity: 0; visibility: hidden; pointer-events: none; z-index: 50; }
.info-tip:hover::after, .info-tip:focus-visible::after, .pipeline-hit:hover::after, .pipeline-hit:focus-visible::after { opacity: 1; visibility: visible; }
.wl:hover { background: var(--raise); }
.export-panel { border-top: 1px solid var(--line); }
.export-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--dim); font-size: 10.5px; }
.export-toolbar > span { margin-right: auto; }
.export-toolbar b { color: var(--lime); font-weight: 400; }
.export-panel pre { max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.steps > div { position: relative; }
.steps > div:hover, .steps > div:focus-visible { background: var(--raise); }
.steps > div::after { content: "READY"; position: absolute; right: 18px; top: 18px; color: var(--lime); font-size: 10px; opacity: 0; }
.steps > div:hover::after, .steps > div:focus-visible::after { opacity: 1; }
.steps pre { position: relative; padding-right: 50px; }
.step-copy { position: absolute; right: 5px; top: 5px; background: var(--panel); border: 1px solid var(--line-2); color: var(--dim); font: 400 10px/1 var(--mono); padding: 4px 5px; opacity: 0; }
.steps pre:hover .step-copy, .step-copy:focus-visible, .steps > div:hover .step-copy { opacity: 1; }
.step-copy:hover { color: var(--active); border-color: var(--active); }
.cards a { position: relative; }
.cards a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--lime); opacity: 0; }
.cards a:hover::before, .cards a:focus-visible::before { opacity: 1; }
.pipeline-body { position: relative; }
.pipeline-hit { position: absolute; display: block; background: transparent; }
.pipeline-hit.walls { padding: 0; }
.pipeline-hit:hover { outline: 1px solid var(--line-2); outline-offset: -1px; }
.pipeline-hit.pool { left: 3.4%; top: 18%; width: 19.6%; height: 14.7%; }
.pipeline-hit.candidate { left: 29.2%; top: 39%; width: 15%; height: 14.7%; }
.pipeline-hit.walls { left: 48.8%; top: 21%; width: 17.6%; height: 56%; }
.pipeline-hit.flow { left: 72.2%; top: 50%; width: 24.4%; height: 14.7%; }
.pipeline-hit.roost { left: 3.4%; top: 60%; width: 19.6%; height: 15%; }
.pipeline-hit.record { left: 72.2%; top: 75%; width: 24.4%; height: 14.7%; }
.pipeline-hit:nth-of-type(n+4)::after { left: auto; right: 0; }
.reveal-pending { opacity: .94; transform: translateY(3px); transition: opacity .2s ease, transform .2s ease; }
.reveal-pending.reveal-visible { opacity: 1; transform: none; }
.copyable-pre { position: relative; padding-right: 54px; }
.doc-copy { position: absolute; right: 6px; top: 6px; background: var(--panel); border: 1px solid var(--line-2); color: var(--dim); font: 400 10px/1 var(--mono); padding: 5px 6px; opacity: 0; }
.copyable-pre:hover .doc-copy, .doc-copy:focus-visible { opacity: 1; }
.doc-copy:hover { color: var(--active); border-color: var(--active); }
@media (max-width: 620px) { .panel-head:has(.pool-switch) { flex-wrap: wrap; } .panel-head:has(.pool-switch) .tag { margin-left: auto; } .pool-switch { order: 3; margin-left: 0; width: 100%; } .pool-switch button { flex: 1; } .panel-body:has(#pool-head) table:has(th:nth-child(5)) { min-width: 440px; } }
@media (prefers-reduced-motion: reduce) { .status-cursor { animation: none; } .reveal-pending { opacity: 1; transform: none; } }