/* What we do: the iso-glow figures (js/iso-what.js). Hairlines in the site's
   greys, one light on what is live: white in the dark theme, near-black in
   the light one, where nothing glows. Only these tokens colour a figure. */
.kiso {
  --k-body: #f7f7f6; --k-deck: #ffffff; --k-side: #ececeb;
  --k-line: color-mix(in srgb, var(--nix-text) 62%, transparent);
  --k-detail: color-mix(in srgb, var(--nix-text) 18%, transparent);
  --k-ink: color-mix(in srgb, var(--nix-text) 60%, transparent);
  --k-ink-hi: var(--nix-text);
  --k-glass: #f0efee; --k-glass-on: color-mix(in srgb, #101010 20%, transparent);
  --k-accent: #101010; --k-accent-dim: color-mix(in srgb, #101010 12%, transparent);
  --k-paper: #ffffff;
  display: block; width: 100%; max-width: 560px; margin: 8px auto 22px; color: var(--nix-text);
}
html[data-theme="dark"] .kiso {
  --k-body: #151515; --k-deck: #1b1b1b; --k-side: #101010;
  --k-line: rgba(244, 243, 241, .5); --k-detail: rgba(244, 243, 241, .17);
  --k-ink: rgba(244, 243, 241, .55); --k-ink-hi: #f4f3f1;
  --k-glass: #0b0b0b; --k-glass-on: rgba(255, 255, 255, .22);
  --k-accent: #ffffff; --k-accent-dim: rgba(255, 255, 255, .16);
  --k-paper: #1e1e1e;
}
.kiso:not(.is-on) { min-height: 240px; }
.kiso__stage { display: block; width: 100%; height: auto; outline: none; overflow: visible; }
.kiso__stage:focus-visible { outline: 1px solid var(--k-line); outline-offset: 6px; border-radius: 4px; }
.kiso__cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 6px; font-size: 11px; letter-spacing: .04em; color: var(--k-ink); }
.kiso__read { font-variant-numeric: tabular-nums; text-transform: lowercase; text-align: right; }

.kiso .face, .kiso .glass, .kiso .paper, .kiso .chip, .kiso .level { stroke: var(--k-line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.kiso .face { fill: var(--k-body); }
.kiso .face.top { fill: var(--k-deck); }
.kiso .face.side { fill: var(--k-side); }
.kiso .face.hot { stroke: var(--k-accent); }
.kiso .face.top.hot { fill: color-mix(in srgb, var(--k-accent) 14%, var(--k-deck)); }  /* opaque: wires run under it */
.kiso .detail { fill: none; stroke: var(--k-detail); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kiso .glass { fill: var(--k-glass); }
.kiso .glass.hot { fill: var(--k-glass-on); stroke: var(--k-accent); }
.kiso .paper { fill: var(--k-paper); }
.kiso .paper.hot { stroke: var(--k-accent); }
.kiso .chip { fill: var(--k-glass); }
.kiso .chip.hot { fill: var(--k-accent); stroke: var(--k-accent); }
.kiso .level { fill: var(--k-detail); }
.kiso .level.hot { fill: var(--k-accent); stroke: var(--k-accent); }
.kiso .label { fill: var(--k-ink); font-family: inherit; letter-spacing: .06em; }
.kiso .scr { fill: var(--k-ink-hi); font-family: inherit; }
.kiso .scr-accent { fill: var(--k-accent); font-family: inherit; font-weight: 500; }
.kiso .chip-ink { fill: var(--k-glass); font-family: inherit; font-weight: 500; letter-spacing: .04em; }
.kiso .scr-line { fill: none; stroke: var(--k-ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.kiso .scr-line.hot { stroke: var(--k-accent); }
.kiso .wire { fill: none; stroke: var(--k-detail); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.kiso .wire.hot { stroke: color-mix(in srgb, var(--k-accent) 55%, transparent); }
.kiso .pulse { fill: none; stroke: var(--k-accent); stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 70 930; stroke-dashoffset: 1000; opacity: 0; }
.kiso .pulse.go { animation: kiso-run .9s ease-out; }
@keyframes kiso-run { 0% { stroke-dashoffset: 1000; opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.kiso .halo { fill: var(--k-accent); opacity: 0; }
.kiso .halo.hot { opacity: .32; }
.kiso .press { cursor: pointer; }
.kiso .press:hover .face, .kiso .press:hover .glass:not(.hot) { stroke: var(--k-ink-hi); }

/* The light theme keeps the lit fills and drops every glow. */
html:not([data-theme="dark"]) .kiso [filter] { filter: none; }
html:not([data-theme="dark"]) .kiso .halo { display: none; }
@media (prefers-reduced-motion: reduce) { .kiso .pulse.go { animation: none; } }

/* On the list, each case's row and its figure under it. */
.koeia-cases__case { flex-wrap: wrap; }
.koeia-cases__case > .kiso { flex: 1 0 100%; }
.koeia-case .kiso--lead { max-width: 620px; margin-top: 4px; }
.kiso-credit { margin: 4px 0 0; text-align: center; font-size: 11px; }
.kiso-credit a { color: var(--k-ink, var(--nix-text-soft)); text-decoration: none; opacity: .6; }
.kiso-credit a:hover { opacity: 1; }