/* 4 · SIGNATURE — model spectrum: sheet with morphing nodes + control panel */
.cba-spec__app{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--bdh-gap);align-items:stretch}
.cba-spec__stage{display:flex;flex-direction:column;padding:18px 20px 20px;box-shadow:var(--sh-2);min-width:0}
.cba-spec__cap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:var(--cba-hair)}
.cba-spec__cap b{font-weight:500;color:var(--blue)}
.cba-spec__plot{position:relative;flex:1;min-height:420px;margin:12px 0;background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:20px 20px}
.cba-spec__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;clip-path:inset(0 0 0 0);transition:clip-path .9s var(--e-io)}
.cba-spec__app.is-redraw .cba-spec__lines{clip-path:inset(0 0 100% 0);transition-duration:.25s}
.cba-spec__lines path{fill:none;stroke:var(--ink);stroke-width:1.25;vector-effect:non-scaling-stroke}
.cba-spec__lines path.is-dash{stroke-dasharray:5 4;stroke:var(--muted)}
.cba-spec__lines path.is-faint{stroke-dasharray:1 4;stroke:var(--faint)}
.cba-spec__lines path.is-new{stroke:var(--blue)}

/* nodes: full-size boxes translated by % of the plot, so the move is transform-only */
.cba-snode{position:absolute;inset:0;pointer-events:none;transform:translate(var(--x,50%),var(--y,50%));transition:transform 1s var(--e)}
.cba-snode i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border:1.5px solid var(--ink);border-radius:2px;background:var(--paper);transform:scale(var(--k,1));transition:transform .8s var(--e),background .4s var(--e),border-color .4s var(--e)}
.cba-snode b,.cba-snode small{position:absolute;left:0;transform:translateX(-50%);white-space:nowrap;padding:1px 4px;background:var(--paper);text-align:center;transition:opacity .4s var(--e)}
.cba-snode b{top:14px;font-family:var(--f-h);font-size:.875rem;font-weight:500;letter-spacing:-.012em;color:var(--ink);line-height:1.15}
.cba-snode small{top:34px;font-family:var(--f);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);line-height:1}
.cba-snode--mb i{background:var(--ink);border-radius:3px}
.cba-snode--mb b{top:-58px}.cba-snode--mb small{top:-37px}
.cba-snode--nw i{border-color:var(--blue);background:var(--blue);border-radius:50%;box-shadow:0 0 0 6px var(--blue-wash-2)}
.cba-snode--nw b{color:var(--blue-d)}
/* the master brand shrinks as the spectrum moves away from it; siblings grow */
.cba-spec__app[data-model="0"] .cba-snode--mb{--k:2.2}
.cba-spec__app[data-model="1"] .cba-snode--mb{--k:1.8}
.cba-spec__app[data-model="2"] .cba-snode--mb{--k:1.3}
.cba-spec__app[data-model="3"] .cba-snode--mb{--k:.9}
.cba-spec__app[data-model="3"] .cba-snode--mb i{background:var(--paper);border-style:dashed}
.cba-spec__app[data-model="0"] .cba-snode:not(.cba-snode--mb):not(.cba-snode--nw) i{--k:.7;border-radius:50%}
.cba-spec__app[data-model="3"] .cba-snode:not(.cba-snode--mb) i{--k:1.4}
.cba-spec__def{padding-top:14px;border-top:var(--cba-hair);font-size:var(--t-sm);line-height:1.55;color:var(--txt)}

/* panel */
.cba-spec__panel{display:flex;flex-direction:column;gap:22px;padding:clamp(20px,2.4vw,30px);border:var(--cba-ink-hair);border-radius:var(--r-sm);background:var(--paper);min-width:0}
.cba-spec__block{display:flex;flex-direction:column;gap:12px}
.cba-spec__range{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:4px 0 0;background:linear-gradient(var(--ink),var(--ink)) 0 50%/100% 1px no-repeat;cursor:pointer}
.cba-spec__range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border:2px solid var(--paper);border-radius:4px;background:var(--blue);box-shadow:0 0 0 1px var(--blue),0 6px 14px -6px rgba(0,130,251,.6);transition:transform var(--d2) var(--e)}
.cba-spec__range::-moz-range-thumb{width:18px;height:18px;border:2px solid var(--paper);border-radius:4px;background:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.cba-spec__range:active::-webkit-slider-thumb{transform:scale(1.1)}
.cba-spec__ticks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
.cba-spec__ticks li{position:relative;padding-top:10px;font-family:var(--f-b);font-size:11px;font-weight:500;line-height:1.25;color:var(--faint);transition:color var(--d2) var(--e)}
.cba-spec__ticks li::before{content:"";position:absolute;left:0;top:0;width:1px;height:6px;background:var(--ink)}
.cba-spec__ticks li:nth-child(2){text-align:center}.cba-spec__ticks li:nth-child(2)::before{left:33%}
.cba-spec__ticks li:nth-child(3){text-align:center}.cba-spec__ticks li:nth-child(3)::before{left:66%}
.cba-spec__ticks li:nth-child(4){text-align:right}.cba-spec__ticks li:nth-child(4)::before{left:auto;right:0}
.cba-spec__ticks li.is-on{color:var(--ink)}
.cba-spec__scen{display:flex;flex-wrap:wrap;gap:8px}

.cba-spec__agent{padding:18px;background:var(--blue-wash);border-left:2px solid var(--blue)}
.cba-spec__who{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cba-spec__pulse{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.cba-spec__app.is-live .cba-spec__pulse{animation:cba-spec-pulse 1.6s var(--e) infinite}
@keyframes cba-spec-pulse{0%{box-shadow:0 0 0 0 var(--blue-line)}100%{box-shadow:0 0 0 8px transparent}}
.cba-spec__rec{margin:10px 0 6px;font-family:var(--f-h);font-size:1.5rem;font-weight:500;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.cba-spec__why{font-size:var(--t-sm);line-height:1.6;color:var(--txt);min-height:4.8em}
.cba-spec__viewing{margin:14px 0 8px}.cba-spec__viewing b{font-weight:500;color:var(--ink)}
.cba-spec__meters{display:grid;gap:8px}
.cba-spec__meters>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.cba-spec__meters dt{font-size:var(--t-sm);font-weight:500;color:var(--ink)}
.cba-spec__meters dd{display:flex;align-items:center;gap:10px}
.cba-spec__meters dd b{width:3ch;font-family:var(--f);font-size:var(--t-xs);font-weight:500;color:var(--ink);text-align:right}
.cba-spec__bar{display:grid;grid-template-columns:repeat(5,14px);gap:3px}
.cba-spec__bar i{height:10px;border:1px solid var(--blue-line);background:var(--paper);transition:background .3s var(--e),border-color .3s var(--e)}
.cba-spec__bar[style*="--v:1"] i:nth-child(-n+1),.cba-spec__bar[style*="--v:2"] i:nth-child(-n+2),.cba-spec__bar[style*="--v:3"] i:nth-child(-n+3),.cba-spec__bar[style*="--v:4"] i:nth-child(-n+4),.cba-spec__bar[style*="--v:5"] i{background:var(--blue);border-color:var(--blue)}

.cba-spec__decide{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:auto;padding-top:18px;border-top:var(--cba-hair)}
.cba-spec__record{font-size:var(--t-sm);line-height:1.55;color:var(--muted)}
.cba-spec__record b{font-family:var(--f);font-size:var(--t-xs);font-weight:500;color:var(--ink);letter-spacing:.02em}
.cba-spec__record.is-set{padding:12px 14px;border:1px solid var(--ink);color:var(--txt);width:100%}

@media (max-width:1024px){.cba-spec__app{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .cba-spec__stage{padding:14px 12px 16px}
  .cba-spec__plot{min-height:340px}
  .cba-snode b{font-size:.66rem;white-space:normal;width:9ch;line-height:1.05}
  .cba-snode small{display:none}
  .cba-snode--mb b{top:-40px}
  .cba-spec__ticks li{font-size:10px}
}
@media (prefers-reduced-motion:reduce){.cba-snode,.cba-snode i,.cba-spec__lines{transition:none}.cba-spec__app.is-live .cba-spec__pulse{animation:none}}