/* Styles for the interactive drawings. Shared pieces (chips, tray, codestrip) are in viki.css. */
.host{display:flex;flex-direction:column;gap:12px}
/* HTML drawings are built small; on a wide page, scale them up to fill it (the chart already does) */
@media (min-width:1200px){.host:not([data-dia="fit-line"]){zoom:1.22} .host[data-dia="ai-rings"]{zoom:1.04}}
.dmsg{font:600 21px/1.15 var(--hand);color:var(--pencil);min-height:26px}
.dmsg.bad{color:var(--err)} .dmsg.good{color:var(--good)}
.codestrip .ln{display:block;padding:0 6px;border-radius:4px;border-left:3px solid transparent}
.codestrip .ln.act{background:rgba(255,229,102,.22);border-left-color:var(--hl)}
.codestrip .ln.off{opacity:.35}
.codestrip .v{color:var(--hl);font-weight:700}

/* ai-rings */
.ring{border:2.5px solid var(--ink);border-radius:var(--wob);padding:8px 12px 10px;background:rgba(255,255,255,.75);transition:opacity .4s,background .3s,box-shadow .3s}
.ring>b{font:700 23px/1 var(--hand)} .ring>small{display:block;font-size:14px;line-height:1.25;color:var(--pencil);margin-bottom:6px}
.ring .ring{margin-top:8px}
.ring.dim>b,.ring.dim>small{opacity:.35} .ring.hid{display:none}
.ring.lit{box-shadow:0 0 0 4px var(--hl)}
.r-ai{background:#F2F4FB} .r-ml{background:#E3EBFF} .r-dl{background:#D3F2E3} .r-gen{background:#FFF3C4}
.put{display:flex;flex-wrap:wrap;gap:6px} .put .chip.fact{font-size:13px;padding:3px 8px;cursor:default;box-shadow:none;max-width:none}

/* fit-line */
.pt{fill:var(--data-s);stroke:var(--data);stroke-width:3;cursor:grab}
.sq{fill:url(#hatch);stroke:var(--err);stroke-width:2}
.fit{stroke:var(--model);stroke-width:6;stroke-linecap:round;opacity:.9}
.hd{fill:#fff;stroke:var(--model);stroke-width:4;cursor:grab}
.land{position:relative} .land canvas{display:block;width:100%;aspect-ratio:300/200}
.land svg{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
.land text{font:700 10px var(--mono);fill:var(--ink)}
.trail{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:1 5;stroke-linecap:round}
.ball{fill:var(--model);stroke:var(--ink);stroke-width:2.5;cursor:grab}
.gauge{display:flex;align-items:center;gap:12px}
.gauge .v{font:700 40px/1 var(--hand);color:var(--err);min-width:2.6em} .gauge.ok .v{color:var(--good)}
.bar{flex:1;height:16px;border:2px solid var(--ink);border-radius:var(--wob);overflow:hidden;background:#fff}
.bar b{display:block;height:100%;background:repeating-linear-gradient(60deg,var(--err) 0 3px,transparent 3px 6px)} .gauge.ok .bar b{background:var(--good)}

/* boxes, plus, machine, drawers: things that hold values */
.shelf{display:flex;flex-wrap:wrap;gap:26px 18px;padding:18px 6px 6px}
.vbox{position:relative;width:128px;min-height:92px;border:3px solid var(--data);border-top-style:dashed;border-radius:6px 6px 14px 14px;background:#fff;display:grid;place-items:center;padding:16px 6px 8px;transition:background .3s}
.vbox .tag{position:absolute;top:-14px;left:10px;font:700 22px/1 var(--hand);padding:2px 10px;background:rgba(255,229,102,.95);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.vbox .val{font:700 22px var(--mono)} .vbox .val:empty::before{content:'empty';font:600 20px var(--hand);color:var(--rule)}
.vbox.flash{background:#FFF8DC}
.fall{position:absolute;font:700 20px var(--mono);color:var(--err);animation:fall .8s ease-in forwards;pointer-events:none}
@keyframes fall{to{transform:translateY(90px) rotate(40deg);opacity:0}}
.sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:700 34px var(--hand)}
.pslot{width:150px;min-height:76px;border:3px dashed var(--pencil);border-radius:var(--wob);display:grid;place-items:center;gap:4px;padding:6px;background:#fff}
.pslot .conv{display:flex;gap:4px} .conv button{white-space:nowrap;font:700 12px var(--mono);border:1.5px solid var(--ink);background:#fff;border-radius:6px;cursor:pointer;padding:1px 5px}
.conv button.on{background:var(--hl)}
.pres{min-width:118px;min-height:76px;border:3px solid var(--ink);border-radius:var(--wob);display:grid;place-items:center;padding:6px 12px;background:#fff;font:700 22px var(--mono)}
.pres.err{border-color:var(--err);color:var(--err);font:700 14px/1.3 var(--mono);max-width:240px;background:var(--err-s)}
.pres.txtv{border-color:var(--good)} .pres.num{border-color:var(--data)}
.machines{display:flex;flex-wrap:wrap;gap:16px}
.machine{flex:1;min-width:200px;border:3px solid var(--ink);border-radius:14px;background:#fff;padding:10px;text-align:center;position:relative}
.machine pre{margin:0 0 8px;font:700 14px/1.5 var(--mono);text-align:left;background:var(--ink);color:#E6E9FF;padding:8px 10px;border-radius:6px}
.hopper{border:3px dashed var(--model);border-radius:var(--wob);padding:12px 6px;font:600 20px var(--hand);color:var(--pencil);background:#FFFBEA}
.machine.work{animation:shake .35s}
.chute{font:600 19px var(--hand);color:var(--pencil);margin-top:6px}
.drawers{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.drawer{position:relative;min-width:76px;border:3px solid var(--ink);border-radius:6px;background:#EEF1FA;padding:16px 8px 8px;text-align:center;cursor:pointer;font:700 20px var(--mono);transition:transform .2s var(--pop),background .2s}
.drawer::before{content:'';position:absolute;top:6px;left:50%;width:22px;height:5px;margin-left:-11px;border-radius:3px;background:var(--ink)}
.drawer .val{visibility:hidden} .drawer.open{transform:translateY(8px);background:#fff} .drawer.open .val{visibility:visible}
.drawer .ix{display:block;font:700 19px var(--hand);color:var(--data);margin-top:4px}
.addzone{min-width:76px;min-height:72px;border:3px dashed var(--rule);border-radius:6px;display:grid;place-items:center;font:600 18px/1.1 var(--hand);color:var(--pencil);padding:4px;text-align:center}
.bag{min-height:86px;border:3px solid var(--good);border-radius:20px 20px 60px 60px;background:#F1FBF5;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:12px}
.bag::before{content:'a set';font:700 20px var(--hand);color:var(--good);width:100%;text-align:center}

/* branch + loop */
.tickets{display:flex;gap:12px;flex-wrap:wrap}
.ticket{flex:1;min-width:110px;border:2.5px dashed var(--rule);border-radius:10px;padding:8px 10px;text-align:center;opacity:.45;transition:all .25s var(--pop);background:#fff}
.ticket b{display:block;font:700 30px/1 var(--hand)} .ticket span{font-size:14px;color:var(--pencil)}
.ticket.on{opacity:1;border-style:solid;border-color:var(--ink);transform:scale(1.06) rotate(-1deg);box-shadow:3px 5px 0 rgba(27,30,46,.2);background:#FFF3A3}
.nl .zone{opacity:.5} .nl .mk{cursor:grab} .nl text{font:700 15px var(--hand);fill:var(--pencil)}
.beads{display:flex;flex-wrap:wrap;gap:8px;min-height:52px}
.bead{width:46px;height:46px;border-radius:50%;border:3px solid var(--data);background:#fff;display:grid;place-items:center;font:700 18px var(--mono);animation:pop .3s var(--pop);transition:all .2s}
.bead.past{background:var(--data-s);opacity:.6} .bead.now{background:var(--hl);border-color:var(--ink);transform:scale(1.2)}
.stepper{display:flex;align-items:center;gap:10px;font:700 22px var(--hand)}
.stepper input{flex:1;max-width:220px;accent-color:var(--model)}
.mini{display:flex;gap:26px;padding-top:12px}

/* traceback */
.tb{background:var(--ink);color:#E6E9FF;font:400 14.5px/1.75 var(--mono);padding:14px 16px;border-radius:6px;white-space:pre-wrap;box-shadow:3px 6px 16px rgba(0,0,0,.3)}
.tb button{font:inherit;color:inherit;background:none;border:0;border-bottom:2px dashed var(--hl);cursor:pointer;padding:0 1px;border-radius:3px}
.tb button.seen{background:rgba(255,229,102,.25);border-bottom-style:solid}
.tb .srcln{display:block;cursor:pointer;border-radius:4px;padding:0 4px} .tb .srcln:hover{background:rgba(255,255,255,.08)}
.tb .srcln.bad{background:rgba(229,56,79,.35)} .tb .srcln.fixed{background:rgba(18,165,107,.35)}
.tb .no{color:#5B6090;margin-right:12px}
.expl{border:2px solid var(--ink);border-radius:var(--wob);background:#fff;padding:10px 14px;min-height:64px}
.expl>b:first-child{font:700 22px var(--hand);display:block}

@media (max-width:820px){ .vbox{width:104px} .machine{min-width:100%} }