/* MyPhatshala: Cluster Playground (assets/js/cluster-sim.js) */
.csim{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);padding:16px;margin:22px 0;max-width:100%;overflow:hidden}
.csim__title{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.csim__title b{font-family:var(--font-head);font-size:1.15rem}
.csim__title span{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--track,var(--saffron))}
.csim__intro{font-size:.95rem;color:var(--ink-2);margin-bottom:8px}
.csim__intro p{margin:0 0 6px}
.csim__tasks{margin:6px 0 12px;padding:10px 12px 10px 34px;background:var(--paper-2);border-radius:10px;font-size:.92rem;counter-reset:t}
.csim__tasks li{margin:3px 0;padding-left:4px}
.csim__tasks li.done{color:var(--green);text-decoration:line-through;text-decoration-thickness:1px}
.csim__tasks li.done::marker{content:"✓  "}
.csim__bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.86rem}
.csim__grp{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.csim__grp--end{margin-left:auto}
.csim__lbl{font-weight:700;color:var(--ink-2)}
.csim select{font:inherit;padding:3px 4px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
.csim label{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2)}
.csim__chk input{accent-color:var(--track,var(--saffron))}
.csim__btn{font:inherit;font-weight:700;padding:6px 11px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;min-height:34px}
.csim__btn:hover{border-color:var(--ink-3)}
.csim__btn--go{background:var(--board);color:var(--chalk);border-color:var(--board)}
.csim__btn--go:hover{background:var(--saffron);border-color:var(--saffron)}
.csim__btn--warn{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.csim__clock{font-family:var(--font-code);font-size:.85rem;color:var(--ink-2)}
.csim__hint{font-size:.85rem;color:var(--ink-3);margin:8px 0 0}
.csim__main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;margin-top:10px}
@media (max-width:980px){.csim__main{grid-template-columns:minmax(0,1fr)}}
.csim__stage{min-width:0;background:var(--paper);border-radius:10px;border:1px solid var(--line)}
.csim__svg{display:block;width:100%;height:auto}
.csim__side{min-width:0;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;max-height:520px}
.csim__tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
.csim__tabs button{flex:1;font:inherit;font-size:.8rem;font-weight:700;padding:8px 6px;border:0;background:none;color:var(--ink-3);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent}
.csim__tabs button.on{color:var(--ink);border-bottom-color:var(--track,var(--saffron))}
.csim__pane{padding:10px;overflow:auto;font-size:.8rem;min-height:120px}
.csim__pane[hidden]{display:none}
.csim__pane table{width:100%;border-collapse:collapse;margin-top:4px}
.csim__pane th,.csim__pane td{text-align:left;padding:3px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.csim__pane th{color:var(--ink-3);font-weight:700}
.csim__pane code{font-size:.74rem}
.csim__pane small{color:var(--ink-3)}
.csim__file{margin-bottom:12px}
.csim__sum{margin:0 0 8px}
.csim__empty,.csim__down{color:var(--ink-3);margin:0}
.csim__down{color:var(--red);font-weight:700}
.csim__log{list-style:none;margin:0;padding:0}
.csim__log li{padding:4px 0;border-bottom:1px dashed var(--line);line-height:1.35}
.csim__log time{font-family:var(--font-code);font-size:.7rem;color:var(--ink-3);margin-right:6px}
.csim__log li.bad{color:var(--red)}
.csim__log li.ok{color:var(--green)}
.csim__log li.info{color:var(--blue)}
.csim__runs td,.csim__runs th{white-space:nowrap}
.csim__foot{font-size:.75rem;color:var(--ink-3);margin:10px 0 0}
.cs-bad-t{color:var(--red);font-weight:700}
.cs-warn-t{color:#B7791F;font-weight:700}
/* svg */
.csim svg text{font-family:var(--font-body)}
.cs-wire{stroke:var(--ink-3);stroke-width:1.4;opacity:.55;pointer-events:none;fill:none}
.cs-bus{stroke-width:1.2;opacity:.45}
.cs-core{stroke-width:3;opacity:.7}
.cs-thin{stroke-width:1}
.cs-rack{fill:var(--paper-2);stroke:var(--line);stroke-width:1.2}
.cs-tor{fill:var(--board)}

.cs-m--master .cs-mbox{fill:var(--board);stroke:var(--board)}
.cs-m--client .cs-mbox{fill:var(--blue-soft);stroke:var(--blue);stroke-width:1.2}
.cs-m.cs-down{opacity:.5}
.cs-m.cs-down .cs-mbox{stroke:var(--red);stroke-width:2;stroke-dasharray:4 3}
.cs-mlabel{font-size:12px;font-weight:700}
.cs-msub{font-size:10px}
.cs-m--master text{fill:var(--chalk)}
.cs-m--master .cs-msub{fill:#B9C4BE}
.cs-m--client text{fill:var(--ink)}
.cs-small{font-size:10px;fill:var(--ink-2)}
.cs-b{font-weight:700;fill:var(--ink)}
.cs-tiny{font-size:9px;fill:var(--ink-2)}
.cs-muted{fill:var(--ink-3)}
.cs-ok{fill:#7EE0A8 !important;font-weight:700}
.cs-acc{fill:#F5C77E !important;font-weight:700}
.cs-bad{fill:var(--red);font-weight:700}
.cs-warn{fill:#B7791F;font-weight:700}
.cs-node{cursor:pointer}
.cs-node:focus{outline:none}
.cs-node:focus .cs-nbox,.cs-node:hover .cs-nbox{stroke:var(--track,var(--saffron));stroke-width:2}
.cs-nbox{fill:var(--card);stroke:var(--line);stroke-width:1.2}
.cs-node.is-off .cs-nbox{fill:var(--paper-2);stroke:#E0A100;stroke-dasharray:5 3}
.cs-node.is-dead .cs-nbox{stroke:var(--red);stroke-dasharray:5 3}
.cs-node.is-off .cs-chip{opacity:.4}
.cs-node.is-dead .cs-chip{opacity:.18}
.cs-nlabel{font-size:11px;font-weight:700;fill:var(--ink)}
.cs-dot-ok{fill:var(--green)}
.cs-dot-warn{fill:#E0A100}
.cs-dot-dead{fill:var(--red)}
.cs-chiptxt{font-size:8.5px;font-weight:700;fill:#fff;pointer-events:none}
.cs-slot{fill:var(--paper-2);stroke:var(--line)}
.cs-fill-m{fill:#2F7D5B}
.cs-fill-rk{fill:#B7791F}
.cs-fill-off{fill:#D64545}
.cs-fill-r{fill:#8B5CF6}
.cs-ontask{fill:#fff;font-weight:700}
.cs-packet{stroke:var(--card);stroke-width:1.5}
.cs-pklabel{font-weight:700;fill:var(--ink)}
.s-wm-text{opacity:.6}
@media (max-width:640px){.csim{padding:12px}.csim__grp--end{margin-left:0}.csim__side{max-height:380px}}

.csim svg .cs-onboard{fill:var(--chalk);font-weight:700}
.csim__main{align-items:start}
.csim__tabs button{line-height:1.3;padding:10px 6px 8px}
.csim__tabs{flex:none}
.csim__btn--go{border-color:color-mix(in srgb,var(--chalk) 25%,var(--board))}