/* Live waveform viewer (assets/wave.js): lessons, playground and the problem workspace.
   wave.js also injects this file on pages that do not link it.

   Colours come only from the --wave-* tokens in assets/v3/tokens.css (one set per theme):

     --wave-bg, --wave-alt        canvas; side column, ruler and the banded rows (groups of three)
     --wave-grid                  ticks, separators, row rules
     --wave-text, --wave-muted    values and names; time labels
     --wave-signal                1-bit traces and known bus outlines
     --wave-bus-fill              inside a bus segment
     --wave-x, --wave-x-bg        unknown (x): stroke/text and hatch fill
     --wave-z, --wave-z-bg        high impedance (z): stroke/text and hatch fill
     --wave-dontcare, --wave-weak, --wave-event   reserved for '-', weak drive and events
     --wave-cursor, --wave-marker cursor (click) and marker (Shift+click / M) lines and flags
     --wave-mismatch, --wave-mismatch-bg          a sample that differs from the expected value
     --wave-expected              expected rows, and the expected trace in overlay mode
   Optional, derived when unset: --wave-signal-fill (under a high level), --wave-select
   (selected row), --wave-case (test-case labels), --wave-hover, --wave-window (overview
   viewport), --wave-focus, --wave-font.

   The canvas reads the resolved --svw-* values below through getComputedStyle, so every
   token must be a colour (any CSS colour syntax, color-mix included). Each falls back to
   the older --trace-* / --screen* variables, then to a literal, so pages without
   tokens.css still render. */
.svw {
  --svw-bg: var(--wave-bg, var(--trace-bg, var(--screen, #15231c)));
  --svw-panel: var(--wave-alt, var(--trace-2, var(--screen-2, #1c2e25)));
  --svw-grid: var(--wave-grid, var(--trace-line, var(--screen-rule, #2f463a)));
  --svw-ink: var(--wave-text, var(--trace-fg, var(--screen-ink, #d4e6c4)));
  --svw-muted: var(--wave-muted, var(--trace-muted, var(--screen-muted, #93b18f)));
  --svw-signal: var(--wave-signal, var(--trace-sig, #7fd0ff));
  --svw-signal-fill: var(--wave-signal-fill, color-mix(in srgb, var(--svw-signal) 13%, transparent));
  --svw-bus-fill: var(--wave-bus-fill, var(--svw-panel));
  --svw-x: var(--wave-x, var(--trace-x, var(--x, #efb363)));
  --svw-x-bg: var(--wave-x-bg, var(--trace-x-bg, var(--x-bg, #3d3020)));
  --svw-z: var(--wave-z, var(--trace-z, var(--z, #9fb6ec)));
  --svw-z-bg: var(--wave-z-bg, var(--trace-z-bg, #1d2540));
  --svw-cursor: var(--wave-cursor, var(--svw-ink));
  --svw-marker: var(--wave-marker, #ffcf7a);
  --svw-mismatch: var(--wave-mismatch, var(--trace-bad, var(--hot, #ff8a65)));
  --svw-mismatch-bg: var(--wave-mismatch-bg, color-mix(in srgb, var(--svw-mismatch) 17%, transparent));
  --svw-expected: var(--wave-expected, var(--trace-ok, var(--ok, #8ad79a)));
  --svw-select: var(--wave-select, color-mix(in srgb, var(--svw-signal) 11%, transparent));
  --svw-case: var(--wave-case, var(--svw-ink));
  --svw-hover: var(--wave-hover, color-mix(in srgb, var(--svw-ink) 35%, transparent));
  --svw-window: var(--wave-window, color-mix(in srgb, var(--svw-ink) 16%, transparent));
  --svw-band: var(--wave-alt, color-mix(in srgb, var(--svw-ink) 4%, var(--svw-bg)));
  --svw-focus: var(--wave-focus, var(--focus, var(--accent, #f08a5d)));
  --svw-font: var(--wave-font, var(--mono, var(--font-mono, ui-monospace, Menlo, Consolas, monospace)));
  --svw-ui-font: var(--sans, var(--font-body, system-ui, sans-serif));
  --svw-radius: var(--r-ctl, 5px);

  display: block;
  min-width: 0;
  max-width: 100%;
  background: var(--svw-bg);
  color: var(--svw-ink);
  font: 12px/1.3 var(--svw-ui-font);
  -webkit-tap-highlight-color: transparent;
}
.svw *, .svw *::before, .svw *::after { box-sizing: border-box; }

/* toolbar */
.svw-bar { background: var(--svw-bg); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 7px 10px 7px 12px; border-bottom: 1px solid var(--svw-grid); font: 12px var(--svw-font); color: var(--svw-muted); }
.svw-title { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.svw-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--svw-signal); }
.svw-readout { flex: 1 1 110px; min-width: 0; color: var(--svw-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.svw-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.svw-group { display: inline-flex; }
.svw-group > .svw-btn + .svw-btn { margin-left: -1px; }
.svw-group > .svw-btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.svw-group > .svw-btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.svw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; height: 30px; padding: 0 9px; border: 1px solid var(--svw-grid); border-radius: var(--svw-radius); background: var(--svw-panel); color: var(--svw-ink); font: 500 12px var(--svw-ui-font); cursor: pointer; position: relative; }
.svw-btn:hover:not(:disabled) { border-color: var(--svw-muted); z-index: 1; }
.svw-btn:focus-visible { outline: 2px solid var(--svw-focus); outline-offset: 1px; z-index: 2; }
.svw-btn:disabled { opacity: .45; cursor: default; }
.svw-btn[aria-pressed="true"] { background: var(--svw-grid); border-color: var(--svw-muted); }
.svw-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svw-mark[aria-pressed="true"] { color: var(--svw-marker); }
.svw-bad-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--svw-mismatch); }
.svw-short { display: none; }
.svw-help { background: var(--svw-bg); display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 7px 12px; border-bottom: 1px solid var(--svw-grid); font: 11px/1.5 var(--svw-font); color: var(--svw-muted); }
.svw-help[hidden] { display: none; }
.svw-help b { color: var(--svw-ink); font-weight: 600; }

/* layout: a sticky signal/value column beside the canvas */
.svw-grid { display: grid; grid-template-columns: var(--svw-side, 200px) minmax(0, 1fr); }
.svw-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; height: var(--svw-ruler, 24px); padding: 0 10px 5px; background: var(--svw-panel); border-right: 1px solid var(--svw-grid); border-bottom: 1px solid var(--svw-grid); font: 10.5px var(--svw-font); letter-spacing: .04em; text-transform: uppercase; color: var(--svw-muted); }
.svw-ruler, .svw-over { min-width: 0; overflow: hidden; background: var(--svw-panel); }
.svw-ruler { cursor: pointer; }
.svw-ruler canvas, .svw-plot canvas, .svw-over canvas { display: block; }
.svw-scroll { grid-column: 1 / -1; display: grid; grid-template-columns: var(--svw-side, 200px) minmax(0, 1fr); max-height: min(62vh, 560px); overflow-y: auto; overflow-x: hidden; overscroll-behavior-x: contain; }
.svw-side { border-right: 1px solid var(--svw-grid); background: var(--svw-panel); min-width: 0; }
.svw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; height: var(--svw-row, 28px); padding: 0 10px 0 8px; border-left: 2px solid transparent; border-bottom: 1px solid color-mix(in srgb, var(--svw-grid) 60%, transparent); font: 12px var(--svw-font); color: var(--svw-muted); cursor: pointer; white-space: nowrap; }
.svw-row:hover { color: var(--svw-ink); }
.svw-row.svw-sel { background: var(--svw-select); color: var(--svw-ink); border-left-color: var(--svw-signal); }
.svw-row.svw-exp .svw-name { color: var(--svw-expected); }
.svw-row.svw-act { box-shadow: inset 0 -1px 0 var(--svw-grid); }
.svw-row.svw-bad { border-left-color: var(--svw-mismatch); }
.svw-row.svw-bad .svw-val { color: var(--svw-mismatch); }
.svw-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.svw-val { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; color: var(--svw-signal); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.svw-val.svw-x { color: var(--svw-x); }
.svw-val.svw-z { color: var(--svw-z); }
.svw-plot { position: relative; min-width: 0; overflow: hidden; cursor: crosshair; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; }
.svw-plot.svw-dragging { cursor: grabbing; }
.svw-plot:focus-visible::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--svw-focus); pointer-events: none; }
.svw-foot { display: flex; align-items: center; height: 18px; padding: 0 10px; overflow: hidden; background: var(--svw-panel); border-right: 1px solid var(--svw-grid); border-top: 1px solid var(--svw-grid); font: 10px var(--svw-font); color: var(--svw-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.svw-over { border-top: 1px solid var(--svw-grid); cursor: ew-resize; touch-action: none; }
.svw-probe { position: absolute; width: 0; height: 0; overflow: hidden; }

/* compact hosts: the readout gets its own line under the tools */
.svw-compact .svw-readout { order: 3; flex-basis: 100%; }

/* narrow hosts (phones, split panes): stacked name/value, compact toolbar */
.svw-narrow .svw-bar { padding: 6px 8px; gap: 6px; }
.svw-narrow .svw-title { display: none; }
.svw-narrow .svw-readout { flex-basis: 100%; order: 2; font-size: 11px; }
.svw-narrow .svw-tools { margin-left: 0; gap: 5px; }
.svw-narrow .svw-btn { min-width: 34px; height: 34px; padding: 0 8px; }
.svw-narrow .svw-long { display: none; }
.svw-narrow .svw-short { display: inline; }
.svw-narrow .svw-help-btn, .svw-narrow .svw-help { display: none; }
.svw-narrow .svw-btn { min-width: 32px; padding: 0 7px; }
.svw-narrow .svw-head { grid-template-columns: 1fr; padding: 0 6px 5px; font-size: 9px; letter-spacing: .02em; }
.svw-narrow .svw-head-val { display: none; }
.svw-narrow .svw-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 0; padding: 0 6px; align-content: center; font-size: 11px; line-height: 1.25; }
.svw-narrow .svw-val { text-align: left; max-width: 100%; font-size: 10.5px; }
.svw-narrow .svw-foot { padding: 0 6px; font-size: 9px; }

@media (prefers-reduced-motion: reduce) {
  .svw * { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .svw-btn { border-color: ButtonText; }
  .svw-plot:focus-visible { outline: 2px solid Highlight; }
}

/* problem workspace host */
#challenge-wave { border: var(--bw, 1px) solid var(--svw-grid); border-radius: var(--svw-radius); overflow: hidden; }