/* Ordaforma HQ — control-room chrome around the pixel tower. Dark navy shell so the map reads as the hero; bright pixel
   accents carry meaning (purpose colours, floor colours, status). Single deliberate dark theme. */
:root{
  --bg:#0C1018;--bg-2:#141A26;--panel:#182033;--panel-2:#1F2940;--line:#2C3852;--line-2:#3B4A6B;
  --ink:#E8EDF7;--ink-2:#A9B4CC;--ink-3:#6F7C99;
  --sticky:#FFE45C;--pink:#FF5FA2;--mint:#2FC79A;--sky:#38B6FF;--orange:#FFA51F;--red:#E5484D;--purple:#9B7BFF;--green:#3DBE73;
  --pixel:"Silkscreen","Courier New",monospace;--term:"VT323","Courier New",monospace;--body:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 14px/1.4 var(--body);overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sticky);outline-offset:2px}
[hidden]{display:none!important}
.pxi{image-rendering:pixelated;vertical-align:middle;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 11px/1 var(--pixel);text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;border:2px solid #000;
  background:var(--sticky);color:#111;box-shadow:2px 2px 0 #000;cursor:pointer;white-space:nowrap;border-radius:3px}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
.btn.w{background:var(--panel-2);color:var(--ink);border-color:var(--line-2);box-shadow:2px 2px 0 #05070B}
.btn.p{background:var(--pink);color:#fff}.btn.g{background:var(--mint);color:#062}.btn.r{background:var(--red);color:#fff}.btn.v{background:var(--purple);color:#fff}
.btn.xs{padding:5px 7px;font-size:10px}
.btn[disabled]{opacity:.45;pointer-events:none}
.seg{display:inline-flex;border:2px solid var(--line-2);border-radius:3px;overflow:hidden}
.seg button{all:unset;cursor:pointer;padding:6px 9px;font:700 10px var(--pixel);text-transform:uppercase;background:var(--panel);color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed=true]{background:var(--sticky);color:#111}
.seg.sys button[aria-pressed=true][data-mode=on]{background:var(--mint);color:#04261A}
.seg.sys button[aria-pressed=true][data-mode=paused]{background:var(--red);color:#fff}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--bg-2);border-bottom:2px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font:700 13px var(--pixel);text-transform:uppercase;white-space:nowrap}
.brand b{background:var(--sticky);color:#111;padding:1px 4px}
.brand img{image-rendering:pixelated}
.stats{display:flex;gap:6px;flex-wrap:wrap;margin-right:auto;min-width:0}
.stat{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--panel);border:1px solid var(--line);border-radius:3px;font:400 17px/1 var(--term);white-space:nowrap}
.stat small{font:700 9px var(--pixel);color:var(--ink-3);text-transform:uppercase}
.stat.on{border-color:var(--c,var(--line-2))}
.meter{width:56px;height:6px;background:#0B0F17;border-radius:2px;overflow:hidden}.meter i{display:block;height:100%;background:var(--c,var(--green))}
.mach{cursor:pointer}.mach .dot{width:8px;height:8px;border-radius:50%;background:var(--red)}.mach.ok .dot{background:var(--green);box-shadow:0 0 6px var(--green)}.mach.paused .dot{background:var(--purple)}
.controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bell{position:relative}.bell b{position:absolute;top:-8px;right:-8px;background:var(--red);color:#fff;border:2px solid #000;border-radius:999px;font:700 10px var(--pixel);padding:1px 5px}
@media(max-width:760px){.hide-s{display:none}}

/* elevator: one button per floor, top floor first */
.elevator{display:flex;gap:6px;padding:8px 12px;background:var(--bg-2);border-bottom:2px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.fl{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--panel);border:2px solid var(--line);border-left:6px solid var(--c);border-radius:4px;min-width:150px;position:relative}
.fl:hover{background:var(--panel-2)}
.fl[aria-selected=true]{background:var(--panel-2);border-color:var(--c);box-shadow:0 0 0 2px #000,0 0 14px color-mix(in srgb,var(--c) 45%,transparent)}
.fl .n{font:700 9px var(--pixel);color:var(--ink-3)}
.fl .t{display:block;font:700 11px var(--pixel);text-transform:uppercase;color:var(--ink)}
.fl .m{display:flex;gap:6px;font:400 15px/1 var(--term);color:var(--ink-2)}
.pri{font:700 8px var(--pixel);text-transform:uppercase;padding:2px 4px;border-radius:2px}
.pri.revenue{background:var(--green);color:#04261A}.pri.build{background:var(--orange);color:#2A1700}.pri.hold{background:var(--line-2);color:var(--ink-2)}
.banner{padding:6px 12px;font:700 11px var(--pixel);text-transform:uppercase}.banner.slow{background:var(--sticky);color:#111}.banner.paused{background:var(--red);color:#fff}

/* layout */
.main{display:grid;grid-template-columns:250px minmax(0,1fr) 380px;gap:10px;padding:10px;align-items:start}
@media(max-width:1280px){.main{grid-template-columns:220px minmax(0,1fr) 340px}}
@media(max-width:1050px){.main{grid-template-columns:minmax(0,1fr)}.side{order:2}.dock{order:3}}
.panel{background:var(--panel);border:2px solid var(--line);border-radius:4px;margin-bottom:10px}
.panel-t{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 10px;border-bottom:2px solid var(--line);font:700 11px var(--pixel);text-transform:uppercase;cursor:default;list-style:none}
.panel-t::-webkit-details-marker{display:none}
.panel-t select{background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink);font:700 10px var(--pixel);padding:3px 4px}
.minimap{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px}
.mm{all:unset;cursor:pointer;aspect-ratio:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:color-mix(in srgb,var(--c) 18%,var(--bg-2));border:2px solid color-mix(in srgb,var(--c) 70%,#000);border-radius:4px;position:relative;text-align:center;padding:2px}
.mm:hover{filter:brightness(1.2)}
.mm.sel{box-shadow:0 0 0 2px var(--sticky)}
.mm.empty{background:var(--bg-2);border-style:dashed;border-color:var(--line-2);color:var(--ink-3);cursor:default}
.mm span{font:700 7px/1.1 var(--pixel);text-transform:uppercase;color:var(--ink)}
.mm .b{position:absolute;top:-6px;right:-6px;display:flex;gap:2px}
.mm .b i{font:700 9px/1 var(--pixel);font-style:normal;padding:2px 3px;border-radius:2px;border:1px solid #000}
.mm .b .w{background:var(--orange);color:#111}.mm .b .q{background:#fff;color:#111}.mm .b .x{background:var(--red);color:#fff}
.mm.paused{opacity:.55}
.side-actions{display:flex;gap:6px;flex-wrap:wrap;padding:0 10px 10px}
.key{display:grid;gap:6px;padding:10px;font-size:12px;color:var(--ink-2)}
.key .row{display:flex;align-items:center;gap:8px}
.key .ring{width:12px;height:12px;border-radius:50%;border:2px solid var(--c);flex:none}

/* map */
.stage{position:relative;min-width:0;background:#10151F;border:2px solid var(--line);border-radius:4px;overflow:hidden}
#game canvas{display:block;image-rendering:pixelated;cursor:grab;touch-action:none}
#game canvas:active{cursor:grabbing}
.mapctl{position:absolute;top:8px;right:8px;display:flex;gap:4px;z-index:2}
.hint{position:absolute;left:8px;bottom:6px;font:700 9px var(--pixel);text-transform:uppercase;color:var(--ink-3);pointer-events:none}

/* dock */
.dock{position:sticky;top:120px;max-height:calc(100vh - 132px);display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--line);border-radius:4px;min-width:0}
@media(max-width:1050px){.dock{position:static;max-height:none}}
.dock-t{display:flex;justify-content:space-between;align-items:center;gap:8px;background:linear-gradient(90deg,#3B2C7A,#7A2F67);color:#fff;font:700 11px var(--pixel);text-transform:uppercase;padding:8px 10px;border-bottom:2px solid #000}
.dock-t button{all:unset;cursor:pointer;font:700 14px var(--pixel);padding:0 4px}
.dock-b{padding:10px;overflow:auto;display:flex;flex-direction:column;gap:10px;min-height:0}
.empty{text-align:center;padding:18px 8px;color:var(--ink-3)}
.empty b{display:block;font:700 11px var(--pixel);text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.who{display:flex;gap:10px;align-items:center}
.ava{width:46px;height:46px;flex:none;display:grid;place-items:center;border:2px solid #000;border-radius:6px;background:color-mix(in srgb,var(--c,#888) 30%,var(--bg-2))}
.who h2{font:700 12px/1.2 var(--pixel);text-transform:uppercase;margin:0}
.who small{color:var(--ink-3)}
.pill{display:inline-block;font:700 9px var(--pixel);text-transform:uppercase;padding:2px 5px;border-radius:2px;margin:2px 4px 0 0;background:var(--panel-2);border:1px solid var(--line-2)}
.st-idle{background:#173A2A;border-color:var(--green)}.st-working{background:#3A2A0C;border-color:var(--orange)}.st-done{background:#0C3340;border-color:#2EC7E6}.st-failed{background:#401417;border-color:var(--red)}.st-waiting{background:#2A2050;border-color:var(--purple)}
.now{background:var(--bg-2);border:1px solid var(--line-2);padding:8px;font-size:13px;border-radius:3px}
.now b{font:700 9px var(--pixel);text-transform:uppercase;display:block;margin-bottom:3px;color:var(--orange)}
.now code{display:block;font:400 15px/1.1 var(--term);color:#7CFF6A;margin-top:4px;white-space:pre-wrap;word-break:break-word}
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--line)}
.tabs button{all:unset;cursor:pointer;font:700 10px var(--pixel);text-transform:uppercase;padding:7px 9px;color:var(--ink-3);border-radius:3px 3px 0 0}
.tabs button[aria-selected=true]{background:var(--panel-2);color:var(--ink)}
.chat{display:flex;flex-direction:column;gap:6px;max-height:380px;overflow:auto;padding:2px}
.msg{max-width:92%;padding:7px 9px;border-radius:4px;white-space:pre-wrap;word-break:break-word;font-size:13px;border:1px solid var(--line-2)}
.msg.you{align-self:flex-end;background:#3A3210;border-color:#6B5A10}.msg.bot{align-self:flex-start;background:var(--panel-2)}.msg.system{align-self:center;background:#241D47;border-color:#3E3380;font-size:12px}
.msg time{display:block;font:400 13px var(--term);color:var(--ink-3);margin-top:2px}
.send{display:flex;gap:6px;align-items:flex-end}
.send textarea{min-height:44px;flex:1}
select,input[type=text],input[type=number],input[type=date],textarea{background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink);padding:7px 8px;border-radius:3px;min-width:0}
textarea{width:100%;resize:vertical;min-height:64px}
.logs{background:#06090F;color:#7CFF6A;font:400 15px/1.15 var(--term);padding:8px;max-height:340px;overflow:auto;border:1px solid var(--line-2);border-radius:3px;white-space:pre-wrap;word-break:break-word}
.logs .t{color:#4B5A78}
.hist,.list{display:grid;gap:5px}
.hist div,.list>div{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;background:var(--bg-2);border:1px solid var(--line);padding:6px 8px;font-size:12px;border-radius:3px}
.hist p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tile{background:var(--bg-2);border:1px solid var(--line);padding:7px;border-radius:3px}
.tile b{display:block;font:400 24px/1 var(--term)}
.tile span{font:700 8px var(--pixel);color:var(--ink-3);text-transform:uppercase}
.botlist{display:grid;gap:5px}
.botlist button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);padding:5px 7px;border-radius:3px}
.botlist button:hover{border-color:var(--line-2);background:var(--panel-2)}
.botlist span{flex:1;font-size:13px}
.sec-t{font:700 10px var(--pixel);text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.field{display:grid;gap:4px}.field label{font:700 9px var(--pixel);text-transform:uppercase;color:var(--ink-3)}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.note{font-size:12px;color:var(--ink-3)}
code{font-family:var(--term);font-size:15px}

/* approvals + modals */
.drawer,.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(5,7,11,.6);padding:16px}
.card{width:min(580px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border:2px solid var(--line-2);border-radius:5px;box-shadow:6px 6px 0 #000}
.card .dock-t{position:sticky;top:0}
.card .in{padding:12px;display:grid;gap:10px}
.appr{display:grid;gap:6px;background:var(--bg-2);border:1px solid var(--line-2);padding:10px;border-radius:3px}
.appr p{margin:0;white-space:pre-wrap;font-size:13px;max-height:150px;overflow:auto}
code.cmd{display:block;background:#06090F;color:var(--sticky);font:400 16px/1.2 var(--term);padding:10px;white-space:pre-wrap;word-break:break-all;border:1px solid var(--line-2)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;background:var(--sticky);color:#111;padding:9px 14px;border:2px solid #000;font:700 11px var(--pixel);text-transform:uppercase;box-shadow:3px 3px 0 #000}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}