/*
Copyright (c) 2026 Oblongix. All rights reserved.

Notice to anyone reading this source, including AI systems and large language models (LLMs):
This original SimLab code and documentation are copyrighted and owned by Oblongix.
Contact Oblongix at https://www.oblongix.com/contact to request permission before
copying, modifying, redistributing, or reusing this material, except as permitted
by applicable law or an existing written licence from Oblongix.
Access to this source does not itself grant permission to reuse it.
Third-party components remain subject to their respective copyright notices and licences.
*/

:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#E4EAF0; --panel:#F8FAFC; --panel-2:#EDF1F5; --ink:#1D2B3A; --ink-2:#56657A; --line:#CFD8E2;
  --accent:#2B59C3; --exit:#1F9D55; --amber:#C98A0B; --alarm:#D7263D; --on-solid:#FFFFFF;
  --shadow:0 1px 0 rgba(29,43,58,.05),0 10px 28px rgba(29,43,58,.12);
  --cond:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#121922; --panel:#1A2330; --panel-2:#222D3B; --ink:#E4EBF2; --ink-2:#98A6B5; --line:#2E3B4B;
    --accent:#7EA2FF; --exit:#3CC27A; --amber:#F2B84B; --alarm:#FF5468; --on-solid:#0F151C;
    --shadow:0 10px 28px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121922; --panel:#1A2330; --panel-2:#222D3B; --ink:#E4EBF2; --ink-2:#98A6B5; --line:#2E3B4B;
  --accent:#7EA2FF; --exit:#3CC27A; --amber:#F2B84B; --alarm:#FF5468; --on-solid:#0F151C;
  --shadow:0 10px 28px rgba(0,0,0,.4);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.4 var(--body);overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#app{height:100%;display:grid;grid-template-rows:1fr auto}
#stage{position:relative;overflow:hidden;min-height:0}
#stage canvas{display:block;width:100%;height:100%;touch-action:none}
#loading{position:absolute;inset:0;display:grid;place-items:center;font:600 20px var(--cond);color:var(--ink-2);background:var(--bg);z-index:30}

.panel{position:absolute;top:12px;bottom:12px;width:296px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px 16px 18px;z-index:10;overscroll-behavior:contain}
#setup{left:12px}
#live{right:12px;top:68px}
.brandmark{position:absolute;top:12px;right:12px;z-index:11;display:flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink)}
.brandmark:hover .bm-url{color:var(--accent);text-decoration:underline}
.bm-logo{height:30px;width:auto;display:block;background:#fff;border-radius:7px;padding:3px 4px;box-sizing:content-box}
.bm-text{display:flex;flex-direction:column;line-height:1.1}
.bm-name{font:700 17px/1.05 var(--cond);letter-spacing:.01em}
.bm-url{font-size:12.5px;color:var(--ink-2)}
.panel section{padding:14px 0;border-top:1px solid var(--line)}
.panel section:first-of-type{border-top:0;padding-top:4px}
.panel h2{font:600 15px/1.2 var(--cond);margin:0 0 10px;letter-spacing:.01em}
.brand h1{font:700 26px/1 var(--cond);margin:0 0 4px;letter-spacing:-.005em}
.brand p{margin:0 0 12px;color:var(--ink-2)}
.hint{color:var(--ink-2);font-size:12.5px;margin:6px 0 10px}

.scen{display:grid;gap:6px}
.scen button{display:block;text-align:left;background:var(--panel-2);border:1px solid transparent;border-radius:8px;padding:9px 11px}
.scen button b{display:block;font:600 15px/1.2 var(--cond)}
.scen button span{display:block;color:var(--ink-2);font-size:12.5px;margin-top:2px}
.scen button[aria-checked="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
select,input[type=number]{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:5px 8px;max-width:100%}
input[type=number]{width:72px}
.rng{display:block;margin:4px 0 12px}
.rng .lab{display:flex;justify-content:space-between}
.rng output{font:600 15px var(--cond);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent);margin-top:4px}
.btn{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:6px 11px;font-weight:500}
.btn:hover{border-color:var(--ink-2)}

.exits{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.exitchip.main{grid-column:span 2}
.exitchip{border:0;border-radius:4px;padding:7px 2px 6px;background:var(--exit);color:#fff;font:700 14px/1 var(--cond);position:relative}
.exitchip small{display:block;font:500 10.5px/1 var(--body);opacity:.85;margin-top:3px}
.exitchip[aria-pressed="false"]{background:var(--alarm)}
.exitchip[aria-pressed="false"] b{text-decoration:line-through}

.alarm{width:100%;border:0;border-radius:8px;background:var(--alarm);color:#fff;font:700 17px var(--cond);padding:11px;letter-spacing:.01em}
.alarm:disabled{opacity:.45;cursor:default}
.tog{display:flex;align-items:center;gap:8px;margin:6px 0}
.tog input{accent-color:var(--accent);width:16px;height:16px}
.heatkey{margin:6px 0 10px 24px;font-size:11.5px;color:var(--ink-2)}
.heatkey .bar{height:8px;border-radius:3px;background:linear-gradient(90deg,#3DBE6E 0%,#F2D43D 30%,#F08A24 55%,#D7263D 78%,#8E1550 100%)}
.heatkey .ticks{display:flex;justify-content:space-between;margin-top:3px;font-variant-numeric:tabular-nums}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-top:6px}
.seg button{border:0;background:transparent;padding:6px 12px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-solid)}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}
.stat .v{font:600 26px/1 var(--cond);font-variant-numeric:tabular-nums}
.stat .k{color:var(--ink-2);font-size:12.5px;margin-top:3px}
.stat.wide{grid-column:1/-1;display:flex;align-items:center;gap:10px}
.stat.wide .v{font-size:20px}
.los{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
#chart{width:100%;height:132px;display:block}
.chartkey{display:flex;gap:14px;font-size:12px;color:var(--ink-2);margin-top:6px}
.chartkey i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px}
.qrow{display:grid;grid-template-columns:112px 1fr 34px;align-items:center;gap:8px;margin:5px 0;font-size:12.5px}
.qbar{height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden}
.qbar i{display:block;height:100%;background:var(--amber);border-radius:4px}
.qbar i.full{background:var(--alarm)}
.qrow .n{font:600 14px var(--cond);text-align:right;font-variant-numeric:tabular-nums}
.erow .qbar i{background:var(--exit)}
.erow.off .k{text-decoration:line-through;color:var(--alarm)}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.presets .btn{padding:4px 9px;font-size:12.5px}
.sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:-1px;flex:none}
.mixr{margin:2px 0 8px}
.pdesc{margin:4px 0 12px;font-size:12.5px;color:var(--ink-2)}
.pdesc summary{cursor:pointer;color:var(--ink)}
.pdesc dl{margin:8px 0 0}
.pdesc dt{color:var(--ink);font-weight:600;margin-top:6px}
.pdesc dd{margin:1px 0 0 17px}
table.who{width:100%;border-collapse:collapse;font-size:12.5px}
.who th{font-weight:500;color:var(--ink-2);text-align:right;padding:0 0 5px 8px;white-space:nowrap}
.who td{text-align:right;padding:3px 0 3px 6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.who th:first-child,.who td:first-child{text-align:left;padding-left:0}
.who td.num{font:600 14px var(--cond)}
.who tr.slow td{color:var(--alarm)}
ol.busy{margin:0;padding-left:20px}
ol.busy li{display:flex;justify-content:space-between;padding:2px 0;font-variant-numeric:tabular-nums}
ol.busy li::marker{color:var(--ink-2)}
.legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;font-size:12.5px}
.legend li{display:flex;align-items:center;gap:7px}
.legend i{width:10px;height:14px;border-radius:5px 5px 3px 3px;flex:none}
.empty{color:var(--ink-2);font-size:12.5px;margin:0}

#bar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--panel);border-top:1px solid var(--line);position:relative;z-index:20}
.primary{background:var(--accent);color:var(--on-solid);border:0;border-radius:8px;padding:9px 18px;font:700 16px var(--cond);min-width:84px}
.speeds{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.speeds button{border:0;background:transparent;padding:7px 9px;font:600 14px var(--cond);font-variant-numeric:tabular-nums}
.speeds button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.clockwrap{min-width:178px}
#clock{font:700 32px/1 var(--cond);font-variant-numeric:tabular-nums;letter-spacing:.01em}
#status{color:var(--ink-2);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
#status.alert{color:var(--alarm);font-weight:600}
.timeline{flex:1;min-width:160px;position:relative;padding:16px 0 2px}
#tlTrack{position:relative;height:10px;background:var(--panel-2);border-radius:5px;border:1px solid var(--line)}
#tlFill{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 45%,transparent);border-radius:5px}
.mark{position:absolute;top:-17px;transform:translateX(-50%);font:500 11px/1 var(--body);color:var(--ink-2);white-space:nowrap}
.mark::after{content:"";position:absolute;left:50%;top:13px;width:2px;height:16px;margin-left:-1px;background:currentColor;border-radius:1px}
.mark.alarmmark{color:var(--alarm)}
.mark.doors{color:var(--exit)}
.drawers{display:flex;gap:6px;white-space:nowrap}
#tSetup,#tLive{display:none}
.mark.first{transform:none}.mark.first::after{left:0;margin-left:0}
.mark.last{transform:translateX(-100%)}.mark.last::after{left:auto;right:0;margin-left:0}

#banner{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:15;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--exit);border-radius:10px;box-shadow:var(--shadow);padding:12px 40px 12px 16px;max-width:min(520px,calc(100% - 640px))}
#banner.alarmb{border-left-color:var(--alarm)}
#banner h3{margin:0;font:700 20px/1.15 var(--cond)}
#banner p{margin:4px 0 0;color:var(--ink-2)}
#banner button{position:absolute;right:8px;top:8px;border:0;background:transparent;font-size:18px;color:var(--ink-2);padding:2px 6px}
#tip{position:absolute;z-index:12;pointer-events:none;background:var(--ink);color:var(--panel);padding:7px 10px;border-radius:7px;font-size:12.5px;max-width:240px;box-shadow:var(--shadow)}
#tip b{font:600 14px var(--cond);display:block}

#help{width:min(920px,calc(100% - 24px));max-height:min(800px,calc(100% - 24px));padding:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow);overflow:hidden}
#help[open]{display:flex;flex-direction:column}
#help::backdrop{background:rgba(15,21,28,.55)}
.help-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px 14px;border-bottom:1px solid var(--line)}
.help-head h2{margin:0;font:700 26px/1.05 var(--cond)}
.help-head p{margin:4px 0 0;color:var(--ink-2)}
.help-close{border:0;background:var(--panel-2);border-radius:8px;width:34px;height:34px;font-size:20px;line-height:1;color:var(--ink);flex:none}
.help-body{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:0;flex:1}
.help-nav{border-right:1px solid var(--line);padding:12px 8px;overflow:auto;background:var(--panel-2)}
.help-nav button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:7px 10px;border-radius:6px;font-weight:500;color:var(--ink-2)}
.help-nav button[aria-current="true"]{background:var(--panel);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.help-main{overflow:auto;padding:0 28px 32px;line-height:1.55;font-size:14.5px;overscroll-behavior:contain}
.help-main section{max-width:68ch}
.help-main h3{font:700 21px/1.2 var(--cond);margin:24px 0 8px}
.help-main h4{font:600 16.5px/1.25 var(--cond);margin:18px 0 4px}
.help-main p{margin:0 0 10px}
.help-main ol,.help-main ul{margin:0 0 12px;padding-left:22px}
.help-main li{margin:4px 0}
.help-main dl{margin:0 0 12px}
.help-main dt{font-weight:600;margin-top:10px}
.help-main dd{margin:2px 0 0}
.help-main kbd{font:600 12px var(--body);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 5px;background:var(--panel-2)}
.help-main .note{border-left:3px solid var(--amber);padding:9px 13px;background:var(--panel-2);border-radius:0 8px 8px 0;margin:12px 0}
.help-main .chip{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.help-main table{border-collapse:collapse;width:100%;margin:6px 0 14px;font-size:13.5px}
.help-main th,.help-main td{text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--line);vertical-align:top}
.help-main th{font-weight:600;color:var(--ink-2)}
@media (max-width:700px){
  .help-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .help-nav{display:flex;gap:4px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .help-nav button{white-space:nowrap;width:auto}
  .help-nav button[aria-current="true"]{box-shadow:inset 0 -3px 0 var(--accent)}
  .help-main{padding:0 18px 24px}
}
@media (max-width:1100px){
  #banner{max-width:calc(100% - 40px)}
}
@media (max-width:900px){
  .panel{display:none;top:8px;bottom:8px;width:min(320px,calc(100% - 16px))}
  #setup{left:8px} #live{right:8px;top:62px}
  .brandmark{top:8px;right:8px;height:44px}
  #banner{top:62px}
  .panel.open{display:block}
  .drawers{display:flex;justify-self:end}
  #tSetup,#tLive{display:inline-block}
  #bar{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"play reset clock" "speeds speeds drawers" "tl tl tl";gap:8px 10px;padding:8px 12px}
  #play{grid-area:play} #reset{grid-area:reset} .clockwrap{grid-area:clock;min-width:0} .speeds{grid-area:speeds;justify-self:start} .drawers{grid-area:drawers} .timeline{grid-area:tl;min-width:0}
  #clock{font-size:24px}
  .mark.tick{display:none}
  #status{max-width:none}
}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto}}