:root{color-scheme:light dark;--bg:#f4f6f9;--panel:#fff;--ink:#18202b;--mute:#667085;--line:#dde2ea;--hall:#e6ecf3;--wall:#1f2937;--L:#1d4ed8;--R:#38bdf8;--ok:#15803d;--rope:#c2410c;--area:#0f766e;--robot:#dc2626;--ray:#16a34a}
@media(prefers-color-scheme:dark){:root{--bg:#0f1318;--panel:#181e26;--ink:#e6eaf0;--mute:#93a0b3;--line:#2a3340;--hall:#212a36;--wall:#cbd5e1;--L:#3b82f6;--R:#7dd3fc;--ok:#4ade80;--rope:#fbbf24;--area:#5eead4;--robot:#f87171;--ray:#4ade80}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.app{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;padding:16px;max-width:1500px;margin:0 auto}
@media(max-width:920px){.app{grid-template-columns:1fr}}
@media(min-width:921px){.app{min-height:100vh;min-height:100dvh}}   /* page fills the screen height; the simulation card stretches with it */
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:16px}
aside{display:flex;flex-direction:column}
aside .card:last-child{margin-bottom:0;flex:1}   /* the stats card takes all the space left under the controls */
h2{font-size:14px;margin:0 0 10px;font-weight:600}
canvas{display:block;width:100%}
.legend{display:flex;gap:16px;color:var(--mute);margin-top:10px;font-size:13px;flex-wrap:wrap}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.row{margin-bottom:12px}
.row label{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.row label b{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
input[type=range]{width:100%;accent-color:var(--L)}
select,input[type=number]{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:4px 6px;width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btns{display:flex;gap:8px;flex-wrap:wrap}
button{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px 12px;cursor:pointer}
button.primary{background:var(--L);border-color:var(--L);color:#fff}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--L);outline-offset:2px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat span{display:block;color:var(--mute);font-size:12px}
.stat b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.stat small{display:block;color:var(--mute);font-size:12px}
main.card{display:flex;flex-direction:column;margin-bottom:0}
#sim{flex:none}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:auto;padding:16px 0 12px}   /* margin-top:auto pushes the charts to the bottom of the card */
.charts small{display:block;color:var(--mute);margin:0 0 2px;font-size:12px}
.charts canvas{height:64px}
#banner{margin-top:8px;color:var(--ok);font-weight:600;min-height:1.4em}
.note{color:var(--mute);font-size:12px;margin:8px 0 0}

.toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.toolbar button{padding:5px 10px}
.toolbar button[aria-pressed=true]{background:var(--L);border-color:var(--L);color:#fff}
.toolbar.off button{opacity:.45;pointer-events:none}
.toolhint{color:var(--mute);font-size:12px;min-height:1.4em;margin-bottom:8px}

/* Floating robot / system view: fixed to the screen, so it never moves the page layout */
.viewbox{position:fixed;right:16px;bottom:16px;width:min(440px,42vw);z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.viewhead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.viewhead select{width:auto;flex:none}
.vinfo{flex:1;color:var(--mute);font-size:12px}
.viewhead button{padding:2px 9px}
#adv .row:last-child{margin-bottom:12px}
#advBtn{width:100%}

.viewhead{cursor:grab;touch-action:none}
.viewhead select,.viewhead button{cursor:pointer}
.viewhead button[aria-pressed=true]{background:var(--L);border-color:var(--L);color:#fff}