/* components.css
   Vzhled jednotlivých bodů, aktivních stavů a výstupních "kódových" prvků. */
.node{
  position:relative; display:grid; place-items:center; border-radius:50%;
  outline:2px solid var(--ring); box-shadow:inset 0 0 0 4px rgba(255,255,255,.03);
  transition:transform .12s ease, outline-color .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.node::before{
  content:"";
  width:clamp(var(--node-size-min), var(--node-size-clamp), var(--node-size-max));
  height:clamp(var(--node-size-min), var(--node-size-clamp), var(--node-size-max));
  border-radius:50%; background:rgba(255,255,255,.06);
  box-shadow:0 0 0 2px rgba(255,255,255,.03) inset;
  transition:background .2s ease, transform .12s ease;
}
.node .badge{
  position:absolute; inset:auto auto -10px -10px;
  font:600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--muted);
  background:#0c0f1d; border:1px solid #2b3250; border-radius:8px; padding:4px 6px;
  box-shadow:0 8px 20px rgba(0,0,0,.35); opacity:.9; pointer-events:none;
}
.node:hover{ transform:scale(1.03) }
.node.active{
  outline-color: color-mix(in oklab, var(--accent) 60%, white 10%);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.06),
    0 0 0 4px color-mix(in oklab, var(--accent) 35%, transparent);
}
.node.active::before{
  background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent));
  transform:scale(1.15);
}

.out{
  display:grid; gap:8px; font:600 16px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  padding:12px 14px; border-radius:12px;
}
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.row .label{color:var(--muted); font-weight:600; font-family:system-ui; font-size:13px}
.code{
  padding:8px 10px; border-radius:8px; background:#0c0f1d; border:1px solid #2b3250; min-width:130px;
  word-break: break-all;
}