/* Kutup viz kit: charts, explainers, verdict cards, glossary, scenario cards, video box, FAQ. Colours come from tokens.css;
   each tool page sets --tc (fill) and --tt (text on paper) via its .tool-* class. Everything animates only when motion is allowed. */

/* ───────── charts ───────── */
.kv{position:relative;width:100%;min-width:0}
.kv-svg{display:block;width:100%;height:auto;overflow:visible}
.kv-tick{fill:var(--ink-3);font:500 11px var(--f-mono)}
.kv-axlabel{fill:var(--ink-3);font:600 11px var(--f-sans);letter-spacing:.02em}
.kv-rowlabel{fill:var(--ink-2);font:560 12.5px var(--f-sans)}
.kv-value{fill:var(--ink);font:700 12px var(--f-mono)}
.kv-celltext{fill:var(--ink);font:600 10.5px var(--f-mono);pointer-events:none}
.kv-grid line{stroke:var(--line);stroke-width:1}
.kv-axis{stroke:var(--line-2);stroke-width:1}
.kv-line{fill:none;stroke-linejoin:round;stroke-linecap:round}
.kv-area{stroke:none;fill:var(--tt);opacity:.18}
.kv-ref{stroke:var(--ink-3);stroke-width:1.4;stroke-dasharray:5 5;fill:none}
.kv-ref.bad{stroke:var(--bad)} .kv-ref.warn{stroke:var(--warn)} .kv-ref.ok{stroke:var(--ok)}
.kv-reflabel{fill:var(--ink-2);font:600 11px var(--f-mono)}
.kv-hband{fill:var(--tt);opacity:.08}
.kv-hband.bad{fill:var(--bad);opacity:.09} .kv-hband.warn{fill:var(--warn);opacity:.1} .kv-hband.ok{fill:var(--ok);opacity:.08}
.kv-vband{fill:var(--tt);opacity:.09}
.kv-bandlabel{fill:var(--tt);font:700 10.5px var(--f-mono);letter-spacing:.06em}
.kv-mark{fill:var(--bad);stroke:var(--paper);stroke-width:2}
.kv-badge{fill:var(--ink);} .kv-badge-t{fill:var(--bg);font:700 10px var(--f-mono);text-anchor:middle;pointer-events:none}
.kv-cursor{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3;pointer-events:none}
.kv-dot{stroke:var(--paper);stroke-width:2;pointer-events:none}
.kv-brush{fill:var(--tt);opacity:.16;stroke:var(--tt);stroke-width:1;pointer-events:none}
.kv-hit{cursor:crosshair;touch-action:pan-y}
.kv-bar{fill:var(--tt)} .kv-bar.neg{fill:var(--asp-blue)} .kv-bar.bad{fill:var(--bad)} .kv-bar.mute{fill:var(--line-2)} .kv-bar.ok{fill:var(--ok)}
.kv-track{fill:var(--line)}
.kv-pt{fill:var(--ink-3);opacity:.5;cursor:pointer}
.kv-pt-hot{fill:var(--bad);opacity:1;stroke:var(--paper);stroke-width:1.5}
.kv-pt-sel{stroke:var(--ink);stroke-width:2.2;opacity:1}
.kv-box{fill:var(--ok);fill-opacity:.07;stroke:var(--ok);stroke-opacity:.55;stroke-width:1.3;stroke-dasharray:5 4}
.kv-boxlabel{fill:var(--ok);font:700 10.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.kv-pt-train{fill:var(--glacier);opacity:.45}
.kv-ellipse{fill:none;stroke:var(--tt);stroke-width:1.4;stroke-dasharray:4 4;opacity:.75}
.kv-spec-line{fill:none;stroke:var(--tt);stroke-width:1.6;stroke-linejoin:round}
.kv-spec-fill{fill:var(--tt);opacity:.12}
.kv-marker{stroke:var(--tt);stroke-width:1.3;stroke-dasharray:3 4;opacity:.85}
.kv-markerlabel{fill:var(--ink-2);font:700 10px var(--f-mono)}
.kv-peak{fill:var(--paper);stroke:var(--tt);stroke-width:2;cursor:help}
.kv-peaklabel{fill:var(--ink);font:700 10.5px var(--f-mono);paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.kv-band-sel{fill:var(--tt);opacity:.12}
.kv-cell{stroke:none;cursor:default}
.kv-cell-best{stroke:var(--ink);stroke-width:2}
.kv-histbar{fill:var(--tt);opacity:.82} .kv-histbar-out{fill:var(--bad);opacity:.9}
.kv-curve{fill:none;stroke:var(--ink);stroke-width:1.8}
.kv-spec{stroke:var(--bad);stroke-width:2} .kv-spec-target{stroke:var(--ok)}
.kv-meanline{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:2 3}
.kv-zone{fill:var(--bad);opacity:.07}
.kv-dial{max-width:16rem;margin-inline:auto}
.kv-dial-track{fill:none;stroke:var(--line);stroke-width:14;stroke-linecap:round}
.kv-dial-zone{fill:none;stroke-width:14;opacity:.9}
.kv-needle-line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.kv-needle-hub{fill:var(--ink)}
.kv-dial-value{fill:var(--ink);font:800 26px var(--f-sans);font-stretch:112%}
.kv-stripwrap{position:relative}
.kv-strip,.kv-canvas{display:block;width:100%;border-radius:8px;background:var(--bg-2)}
.kv-strip{cursor:crosshair}
.kv-strip-mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);display:none;pointer-events:none;border-radius:1px}
.kv-spec-axis{display:flex;justify-content:space-between;gap:1rem;font:500 11px var(--f-mono);color:var(--ink-3);margin-top:.35rem}
.kv-tip{position:fixed;left:0;top:0;z-index:95;max-width:18rem;padding:.5rem .7rem;border-radius:8px;background:var(--ink);color:var(--bg);font:500 .8rem/1.35 var(--f-sans);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
.kv-tip.on{opacity:1;transform:none}
.kv-tip b{font:700 .78rem var(--f-mono);display:block;margin-bottom:.25rem}
.kv-tip-row{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.kv-tip-row i{width:.6rem;height:.6rem;border-radius:50%;flex:none}
.kv-tip-row em{font:700 .8rem var(--f-mono);font-style:normal;margin-left:auto;padding-left:.8rem}

/* ───────── motion ───────── */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* ───────── page furniture shared by the workbench tools ───────── */
.tool-sentinel{--tc:var(--sentinel);--tt:var(--sentinel-t)} .tool-spectra{--tc:var(--spectra);--tt:var(--spectra-t)} .tool-horizon{--tc:var(--horizon);--tt:var(--horizon-t)}
.tool-rail a[data-tool=sentinel]{--tc:var(--sentinel)} .tool-rail a[data-tool=spectra]{--tc:var(--spectra)} .tool-rail a[data-tool=horizon]{--tc:var(--horizon)}
.tool-rail{gap:.35rem}
.tool-rail a{padding:.36rem .75rem .36rem .42rem;font-size:.84rem}
.tool-hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.4rem}
.btn-watch{display:inline-flex;align-items:center;gap:.6rem;min-height:2.7rem;padding:.35rem 1.1rem .35rem .4rem;border-radius:999px;border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);font:640 .92rem var(--f-sans);cursor:pointer;text-decoration:none;transition:border-color .15s,transform .15s}
.btn-watch:hover{border-color:var(--tc);transform:translateY(-1px)}
.btn-watch .tri{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--tc);color:#fff}
.tool-forge .btn-watch .tri,.tool-flow .btn-watch .tri{color:var(--night)}
.btn-watch .tri svg{width:.85rem;height:.85rem;margin-left:.1rem}
.btn-watch small{font:500 .7rem var(--f-mono);color:var(--ink-3);margin-left:.2rem}

.vid-section{padding-block:clamp(1.6rem,3vw,2.4rem) 0}
.vid-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:center}
.vidbox{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--night);border:1px solid var(--line-2);box-shadow:var(--shadow)}
.vidbox video{display:block;width:100%;height:100%;object-fit:cover;background:var(--night)}
.vid-copy h2{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:.8rem}
.vid-copy p{color:var(--ink-2);margin:0 0 1rem}
.vid-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 .8rem}
.vid-actions .btn svg{width:1rem;height:1rem}
.vid-copy details{margin-top:.4rem;font-size:.92rem;color:var(--ink-2)}
.vid-copy summary{cursor:pointer;font-weight:620;color:var(--ink)}
.vid-copy details p{margin:.6rem 0 0;line-height:1.55}
@media (max-width:860px){.vid-grid{grid-template-columns:1fr}}

.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.how-card{position:relative;padding:1.15rem 1.2rem 1.25rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);display:grid;grid-template-rows:auto auto 1fr;gap:.5rem}
.how-head{display:flex;align-items:center;gap:.7rem}
.how-no{flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--tc);color:#fff;font:700 .76rem var(--f-mono)}
.tool-forge .how-no,.tool-flow .how-no{color:var(--night)}
.how-card h3{font-size:1.05rem;line-height:1.2}
.how-card p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.how-art{height:6.6rem;border-radius:var(--r);background:var(--bg-2);overflow:hidden;display:grid;place-items:center}
.how-art svg{width:100%;height:100%}
@media (max-width:860px){.how{grid-template-columns:1fr}.how-card{grid-template-columns:1fr}}

.wb{display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:1.1rem;align-items:start}
.wb>.panel+.panel{margin-top:0}
.wb-side{display:grid;gap:1rem}
@media (max-width:980px){.wb{grid-template-columns:minmax(0,1fr)}}
.field-row{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.field-row label{display:grid;gap:.35rem}
.seg{display:inline-flex;padding:.18rem;border:1px solid var(--line-2);border-radius:999px;background:var(--bg);max-width:100%;flex-wrap:wrap}
.seg button{min-height:2rem;padding:0 .85rem;border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;font:640 .82rem var(--f-sans)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.range-row{display:grid;gap:.3rem}
.range-row .lbl{display:flex;justify-content:space-between;gap:.6rem;font-size:.82rem;font-weight:620;color:var(--ink-2)}
.range-row output{font:700 .8rem var(--f-mono);color:var(--tt)}
.chk{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--ink-2);cursor:pointer}
.chk input{width:1.05rem;height:1.05rem;accent-color:var(--tc)}

.scn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:.7rem}
.scn{display:grid;gap:.45rem;text-align:left;padding:.85rem .95rem;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--bg);color:var(--ink);cursor:pointer;font-family:var(--f-sans);transition:border-color .15s,transform .15s,background .15s}
.scn:hover{border-color:var(--tc);transform:translateY(-2px)}
.scn[aria-pressed=true]{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 8%,var(--bg))}
.scn svg{width:100%;height:2.6rem;display:block}
.scn b{font-weight:700;font-stretch:104%;font-size:.95rem}
.scn span{font-size:.82rem;line-height:1.4;color:var(--ink-3)}
.scn-spark{fill:none;stroke:var(--tt);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.scn-spark-hot{fill:none;stroke:var(--bad);stroke-width:2.2;stroke-linecap:round}

.verdict{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem 1rem;align-items:center;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.verdict-ic{grid-row:span 2;display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:50%;background:color-mix(in srgb,var(--vc) 16%,var(--paper));color:var(--vc)}
.verdict-ic svg{width:1.6rem;height:1.6rem}
.verdict.ok{--vc:var(--ok)} .verdict.watch{--vc:var(--warn)} .verdict.alert{--vc:var(--bad)} .verdict.idle{--vc:var(--ink-3)}
.verdict-label{font:700 .72rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--vc)}
.verdict h3{font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.25;font-weight:700;font-stretch:104%}
.verdict p{margin:.25rem 0 0;grid-column:2;color:var(--ink-2);font-size:.94rem;line-height:1.5}
@media (max-width:520px){.verdict{grid-template-columns:1fr}.verdict-ic{grid-row:auto}.verdict p{grid-column:1}}

.kstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.6rem}
.kstats.k3{grid-template-columns:repeat(3,minmax(0,1fr))} .kstats.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:620px){.kstats.k3,.kstats.k4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kstat{padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.kstat strong{display:block;font:700 1.45rem/1.1 var(--f-sans);font-stretch:112%;letter-spacing:-.01em;color:var(--ink)}
.kstat strong small{font:500 .72rem var(--f-mono);color:var(--ink-3);margin-left:.25rem;letter-spacing:0}
.kstat span{display:block;margin-top:.3rem;font:500 .7rem/1.35 var(--f-mono);color:var(--ink-3)}
.kstat.bad strong{color:var(--bad)} .kstat.ok strong{color:var(--ok)} .kstat.warn strong{color:var(--warn)}

.chart-card{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);padding:.9rem 1rem 1rem}
.chart-card+.chart-card{margin-top:.9rem}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.5rem}
.chart-head h3{font-size:.98rem;font-weight:700;font-stretch:106%}
.chart-head p{margin:0;font-size:.8rem;color:var(--ink-3)}
.chart-tools{display:flex;gap:.4rem;flex-wrap:wrap}
.chart-tools button{min-height:1.9rem;padding:0 .7rem;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;font:600 .74rem var(--f-mono)}
.chart-tools button:hover{border-color:var(--ink);color:var(--ink)}

.guide{display:grid;gap:.7rem;margin:0;padding:0;list-style:none;counter-reset:g}
.guide li{display:grid;grid-template-columns:1.7rem minmax(0,1fr);gap:.2rem .7rem;font-size:.94rem;line-height:1.5;color:var(--ink-2)}
.guide .cn{width:1.55rem;height:1.55rem;border-radius:50%;background:var(--ink);color:var(--bg);font:700 .72rem var(--f-mono);display:grid;place-items:center;margin-top:.1rem}
.guide b{color:var(--ink)}

.term{all:unset;border-bottom:1.5px dotted var(--tt);cursor:help;color:inherit}
.term:focus-visible{outline:2px solid var(--asp-blue);outline-offset:2px;border-radius:2px}
.term-pop{position:fixed;z-index:96;max-width:19rem;padding:.7rem .85rem;border-radius:10px;background:var(--ink);color:var(--bg);font:500 .84rem/1.45 var(--f-sans);box-shadow:0 12px 30px -12px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .12s}
.term-pop.on{opacity:1}
.term-pop b{display:block;font:700 .74rem var(--f-mono);letter-spacing:.04em;margin-bottom:.25rem;color:var(--ice)}

.note{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.note svg{flex:none;width:1.15rem;height:1.15rem;margin-top:.1rem;color:var(--tt)}
.note.warn svg{color:var(--warn)}

.sticky-cta{display:none}
@media (max-width:720px){
  .sticky-cta{display:flex;position:sticky;bottom:0;z-index:30;gap:.6rem;padding:.65rem var(--gut);background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .sticky-cta .btn{flex:1}
  .panel-head{padding:.7rem .9rem}.panel-body{padding:.9rem}
  .tool-title{font-size:clamp(1.9rem,9vw,2.6rem)}
  .chart-card{padding:.7rem .7rem .8rem}
  .kstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  table{font-size:.86rem}
}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}