/* SVA thread view (tools/templates/v3/threads-svg.mjs, player assets/v3/threads.mjs).
   The figure shell, controls and note panel reuse diagrams.css; the waveform rows reuse the
   trace classes (.tr-*) from signal.css. Every colour is a theme token: verdicts map onto the
   state and flow tokens so each of the six themes keeps its own palette, and
   tools/check-themes.mjs checks the pairs used here. Shape carries each end's meaning
   (check circle, cross square, open circle, slashed circle, octagon, triangle, tick); colour
   only repeats it. */
.threads-figure {
  --th-pass: var(--good);
  --th-fail: var(--bad);
  --th-vacuous: var(--muted);
  --th-disabled: var(--flow-return);
  --th-aborted: var(--flow-resource);
  --th-pending: var(--flow-call);
  --th-line: var(--ink-2);
  --th-cursor: var(--accent);
}
.threads-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.threads-property { padding: 3px 8px; border: 1px solid var(--rule-strong); border-radius: var(--r-chip); background: var(--paper); color: var(--ink); font: 500 14px var(--mono); }
.threads-badge { font: 500 13px/1.4 var(--sans); color: var(--ink-2); }
.threads-badge.measured::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--good); vertical-align: 1px; }
.threads-badge.standard { padding: 2px 9px; border: 1px dashed var(--warn); border-radius: var(--r-chip); color: var(--warn); font-weight: 600; }
.threads-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 20px; border-bottom: 1px solid var(--rule); color: var(--ink-2); font: 400 13px/1.4 var(--sans); }
.threads-legend span { display: inline-flex; align-items: center; gap: 6px; }
.th-key-icon { flex: none; overflow: visible; }

/* ---- the SVG ---- */
.threads-svg { font-family: var(--mono); }
.th-wave-bg { fill: var(--wave-bg); }
.th-band { fill: var(--paper-2); }
.th-grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.th-endline { stroke: var(--rule-strong); stroke-width: 1.5; stroke-dasharray: 6 3; }
.th-head-label { fill: var(--muted); font: 400 11.5px var(--mono); }
.th-edge-num { fill: var(--ink); font: 600 13px var(--mono); }
.th-edge-time { fill: var(--muted); font: 400 11.5px var(--mono); }
.th-edge-head[data-th-active] .th-edge-num { fill: var(--th-cursor); }
.th-section { fill: var(--muted); font: italic 400 12px var(--sans); }
.th-sample { fill: var(--wave-text); }
.th-sample.x { fill: var(--wave-x); } .th-sample.z { fill: var(--wave-z); }
.th-lane-label { fill: var(--ink); font: 500 12.5px var(--mono); }
.th-line { fill: none; stroke: var(--th-line); stroke-width: 2.2; stroke-linecap: round; }
.th-ghost { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 1 5; stroke-linecap: round; }
.th-thread-note { fill: var(--ink-2); font: 400 11.5px var(--sans); }
.th-local rect { fill: var(--accent-soft); stroke: var(--th-cursor); stroke-width: 1; }
.th-local text { fill: var(--ink); font: 600 11.5px var(--mono); }
.th-glyph { stroke-linecap: round; stroke-linejoin: round; }
.th-glyph .th-mark { fill: none; stroke: var(--card); stroke-width: 2.2; }
.th-start circle { fill: var(--ink); }
.th-pass circle { fill: var(--th-pass); }
.th-fail rect { fill: var(--th-fail); }
.th-vacuous circle { fill: var(--card); stroke: var(--th-vacuous); stroke-width: 2.2; }
.th-disabled circle { fill: var(--card); stroke: var(--th-disabled); stroke-width: 2.2; }
.th-disabled .th-slash { stroke: var(--th-disabled); stroke-width: 2.2; }
.th-aborted polygon { fill: var(--th-aborted); }
.th-pending path { fill: var(--card); stroke: var(--th-pending); stroke-width: 2.2; }
.th-pending.th-strong path { fill: var(--th-fail); stroke: var(--th-fail); }
.th-pending.th-strong .th-bar { stroke-width: 2.6; }
.th-dies path { stroke: var(--th-vacuous); stroke-width: 2.6; }
.th-dies .th-halo { stroke: var(--card); stroke-width: 7; }
.th-live { display: none; fill: var(--card); stroke: var(--th-line); stroke-width: 2; }
.threads-figure[data-diagram-focused] .th-live[data-th-on] { display: inline; }
.th-cursor, .th-cursor-band { display: none; }
.th-cursor-wave { stroke: var(--wave-cursor); stroke-width: 2; }
.th-cursor-line { stroke: var(--th-cursor); stroke-width: 2; }
.th-cursor-tip { fill: var(--th-cursor); }
.th-cursor-band rect { fill: var(--accent-soft); }
.th-future { fill: var(--wave-bg); opacity: 0; pointer-events: none; }

/* Pinned label column while a full-size view pans (assets/v3/threads.mjs). */
.threads-figure .diagram-stage { position: relative; }
.threads-pin[hidden] { display: none; }
.threads-pin { position: absolute; z-index: 2; pointer-events: none; background: var(--card); border-right: 1px solid var(--rule-strong); box-shadow: 6px 0 10px -8px rgb(0 0 0 / .5); }
.threads-pin .th-local, .threads-pin [data-th-edge], .threads-pin .th-live { display: none; }

/* ---- stepping (assets/v3/threads.mjs) ---- */
.threads-figure[data-diagram-focused] .th-cursor, .threads-figure[data-diagram-focused] .th-cursor-band { display: inline; }
.th-cursor, .th-cursor-band, .th-future, .th-live { transition: transform .45s var(--ease), opacity var(--dur-2); }
.threads-figure[data-diagram-focused] .th-future { opacity: .62; }
[data-th-edge] { transition: opacity var(--dur-2); }
.threads-figure [data-th-hidden] { opacity: 0; }
.threads-figure [data-th-new] { animation: th-arrive .5s var(--ease) both; }
@keyframes th-arrive { from { opacity: 0; } to { opacity: 1; } }
.threads-figure path[data-th-new].th-line { stroke-dasharray: 80; animation: th-draw .55s var(--ease) both; }
@keyframes th-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .th-cursor, .th-cursor-band, .th-future, .th-live, [data-th-edge] { transition: none; }
  .threads-figure [data-th-new], .threads-figure path[data-th-new].th-line { animation: none; stroke-dasharray: none; }
}
.threads-text-signals { margin: 0 0 8px; font: 400 13px/1.55 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.threads-program p { margin: 10px 0; }
.threads-program pre.code { max-height: 24rem; overflow: auto; }
@media (max-width: 520px) {
  .threads-legend { padding: 10px 15px; gap: 6px 12px; }
  .threads-property { font-size: 13px; overflow-wrap: anywhere; }
}
@media (forced-colors: active) {
  .threads-figure { --th-pass: CanvasText; --th-fail: CanvasText; --th-vacuous: CanvasText; --th-disabled: CanvasText; --th-aborted: CanvasText; --th-pending: CanvasText; --th-line: CanvasText; --th-cursor: Highlight; }
  .th-glyph .th-mark, .th-dies .th-halo { stroke: Canvas; }
  .th-wave-bg, .th-band, .th-cursor-band rect { fill: Canvas; }
}