*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow:hidden; height:100vh;
  display:flex; flex-direction:column;
  background:var(--background); color:var(--foreground);
  font-family:var(--font-sans); font-size:15px; line-height:1.5;
}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; gap:18px;
  padding:13px 22px; border-bottom:1px solid var(--border);
  background:var(--card);
}
.brand{font-family:var(--font-serif); font-weight:600; font-size:18px; letter-spacing:-.2px; white-space:nowrap}
.brand b{color:var(--primary)}
.tabs{display:flex; gap:6px}
.tab{
  cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--muted-foreground);
  font-family:var(--font-mono); font-size:12px; padding:7px 15px; border-radius:999px; transition:.15s;
  letter-spacing:.02em;
}
.tab:hover{color:var(--foreground); border-color:var(--st-idle)}
.tab.on{background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); font-weight:600}
.spacer{flex:1}
.iconbtn{
  cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--muted-foreground);
  width:34px; height:34px; border-radius:10px; font-size:15px; transition:.15s;
}
.iconbtn:hover{color:var(--foreground); border-color:var(--st-idle)}

/* ── meta strip (per-machine title) ──────────────────────────────────────── */
.meta{padding:12px 22px 11px; border-bottom:1px solid var(--border)}
.meta .eyebrow{font-family:var(--font-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--primary); margin-bottom:4px}
.meta h1{font-family:var(--font-serif); font-weight:600; font-size:21px; margin:0; letter-spacing:-.3px}
.meta p{margin:4px 0 0; color:var(--muted-foreground); font-size:12.5px; max-width:820px}

/* ── app body ────────────────────────────────────────────────────────────── */
.app{display:flex; flex:1 1 auto; min-height:0}
.stage{flex:1 1 auto; position:relative; min-width:0; min-height:0}
svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.legend{
  position:absolute; left:18px; bottom:14px; display:flex; gap:15px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:10.5px; color:var(--muted-foreground);
}
.legend span{display:flex; align-items:center; gap:6px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}

.side{
  flex:0 0 338px; border-left:1px solid var(--border); background:var(--sidebar);
  padding:17px; display:flex; flex-direction:column; gap:13px; overflow:hidden;
}
.readout{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:13px 15px}
.readout .lbl{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-foreground)}
.readout .cur{font-family:var(--font-mono); font-size:20px; font-weight:600; color:var(--primary); margin-top:3px; word-break:break-word}
.readout .act{font-size:12.5px; color:var(--muted-foreground); margin-top:6px; min-height:18px}

.grp{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-foreground); margin:2px 0 -3px}
.triggers{display:flex; flex-direction:column; gap:7px; flex:1 1 auto; min-height:80px; overflow-y:auto; padding-right:3px}
.tgrp{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); opacity:.8; margin:8px 0 1px; padding-left:2px}
.tgrp:first-child{margin-top:0}
button.trig{
  text-align:left; cursor:pointer; border:1px solid var(--border); background:var(--card);
  color:var(--foreground); padding:9px 12px; border-radius:12px; font-size:12.6px; font-family:inherit;
  transition:.14s; display:flex; justify-content:space-between; align-items:center; gap:8px;
}
button.trig:hover{border-color:var(--primary); transform:translateX(2px)}
button.trig .to{font-family:var(--font-mono); font-size:10px; color:var(--muted-foreground); white-space:nowrap}
button.trig.k-export{border-left:3px solid var(--primary)}
button.trig.k-ok{border-left:3px solid var(--st-ok)}
button.trig.k-fail{border-left:3px solid var(--st-fail)}
button.trig.k-reset{border-left:3px solid var(--st-reset)}
button.trig.k-signal{border-left:3px solid var(--st-signal)}
button.trig.k-mut{border-left:3px solid var(--st-idle)}
button.trig.k-goto{border:1px solid var(--primary); background:color-mix(in srgb, var(--primary) 12%, var(--card)); font-weight:600}
button.trig.k-goto .to{color:var(--primary)}

.controls{display:flex; gap:8px}
.controls button{
  cursor:pointer; border:1px solid var(--border); background:var(--card); color:var(--foreground);
  padding:9px 12px; border-radius:12px; font-size:12.5px; font-family:inherit; transition:.14s; flex:1;
}
.controls button:hover{border-color:var(--primary)}
.controls button.primary{background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); font-weight:700}

.note{font-size:11.5px; color:var(--muted-foreground); background:var(--card); border:1px solid var(--border); border-left:3px solid var(--st-dead); border-radius:10px; padding:9px 11px}
.note b{color:var(--foreground)}

/* collapsible notes accordion */
.acc{cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-foreground); background:transparent; border:none; padding:2px 0; width:100%}
.acc:hover{color:var(--foreground)}
.acc .chev{transition:transform .18s}
.acc[aria-expanded="true"] .chev{transform:rotate(90deg)}
.acc-body{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.acc-body[hidden]{display:none}

/* floating transition-log drawer over the canvas */
.logdrawer{position:absolute; right:16px; bottom:14px; width:330px; z-index:5;
  background:color-mix(in srgb, var(--card) 92%, transparent); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.35); backdrop-filter:blur(8px); overflow:hidden}
.loghead{cursor:pointer; width:100%; display:flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--foreground);
  background:transparent; border:none; padding:11px 14px}
.loghead .badge{background:var(--primary); color:var(--primary-foreground); font-weight:700;
  border-radius:999px; padding:1px 8px; font-size:10px}
.loghead .chev{margin-left:auto; transition:transform .2s; color:var(--muted-foreground)}
.logdrawer.collapsed .chev{transform:rotate(180deg)}
.logdrawer.collapsed .log{display:none}
.log{max-height:230px; overflow-y:auto; padding:2px 14px 12px}
.log .row{font-family:var(--font-mono); font-size:10.6px; color:var(--muted-foreground); padding:4px 0; border-bottom:1px dashed var(--border)}
.log .row b{color:var(--primary); font-weight:600}
.log:empty::after{content:"no transitions yet"; color:var(--muted-foreground); font-size:11px; font-family:var(--font-mono)}
.term{font-size:12px; color:var(--st-fail); background:color-mix(in srgb, var(--st-fail) 10%, transparent); border:1px solid color-mix(in srgb, var(--st-fail) 35%, transparent); padding:8px 11px; border-radius:10px}

/* ── svg node + edge ─────────────────────────────────────────────────────── */
.node rect{transition:.25s}
.node .nm{font-family:var(--font-mono); font-weight:600; fill:var(--foreground); pointer-events:none}
.node .sub{font-family:var(--font-sans); font-weight:500; fill:var(--muted-foreground); font-size:11px}
/* idle edges recede so structure reads calm; the active edge pops on a run */
.edge{stroke:var(--st-idle); stroke-width:1.4; fill:none; opacity:.30}
.edge.ek-mut{opacity:.20}            /* self-loops + internal: quietest */
.edge.ek-reset{opacity:.16}          /* reset fans into CLEAN: keep faint */
.edge.ek-signal{stroke:var(--st-signal); opacity:.34}
.edge.ek-export,.edge.ek-ok{opacity:.34}
.edge.dead{stroke-dasharray:5 4; opacity:.26}
.edge.lit{stroke:var(--primary); stroke-width:2.7; opacity:1}
.arrow{fill:var(--st-idle); opacity:.30}
.arrow.ek-mut{opacity:.20}
.arrow.ek-reset{opacity:.16}
.arrow.ek-signal{fill:var(--st-signal); opacity:.34}
.arrow.ek-export,.arrow.ek-ok{opacity:.34}
.arrow.dead{opacity:.26}
.arrow.lit{fill:var(--primary); opacity:1}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 2px var(--glow))}50%{filter:drop-shadow(0 0 13px var(--glow))}}