/* Warehouse Twin — no external requests, so it works on an isolated network. */

:root{
  --ground:#F1EFEA; --surface:#FFFFFF; --surface-2:#E7E3DC;
  --ink:#191C1F; --ink-2:#5C6268; --ink-3:#8A9096;
  --line:#D6D1C9; --line-strong:#B9B2A7;
  --accent:#D4551A; --hivis:#8A9B00; --pink:#C8286A; --good:#1C6B3F;
  --sky-1:#DFE3E6; --sky-2:#F1EFEA; --floor:#9C9B96; --floor-line:#8A8984;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#141719; --surface:#1C2023; --surface-2:#262B2F;
    --ink:#EDEAE5; --ink-2:#9AA1A7; --ink-3:#727980;
    --line:#31373C; --line-strong:#454C52;
    --accent:#FF7C3C; --hivis:#C7DC1E; --pink:#F26098; --good:#5FBE8A;
    --sky-1:#1A1E21; --sky-2:#101315; --floor:#3A3E41; --floor-line:#4A4F53;
  }
}

*{box-sizing:border-box}
/* an explicit display: on .asat / .vp-empty beats the UA [hidden] rule,
   which left an invisible overlay swallowing clicks on the canvas. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:14px/1.5 "Segoe UI", -apple-system, system-ui, Roboto, Arial, sans-serif;
  display:flex; flex-direction:column;
}
h1{margin:0; font-size:17px; letter-spacing:-.01em}

.top{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:9px 16px; border-bottom:2px solid var(--ink); background:var(--surface);
}
.brand{display:flex; align-items:center; gap:9px}
.chev{
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:9px solid var(--accent); margin-right:-6px;
}
.chev:last-of-type{margin-right:3px}
.spacer{flex:1}

/* the as-at date is load-bearing: this is a daily snapshot, never live */
.asat{
  display:flex; align-items:baseline; gap:7px;
  background:var(--surface-2); border:1px solid var(--line-strong);
  padding:3px 10px; border-radius:2px;
}
.asat-k{font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.asat strong{font-size:13px; font-variant-numeric:tabular-nums}

.mode{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 9px; border:1px solid var(--line-strong); color:var(--ink-2);
}
.mode.ok{border-color:var(--good); color:var(--good)}
.mode.bad{border-color:var(--pink); color:var(--pink)}
.mode.demo{border-color:var(--accent); color:var(--accent)}

.banner{
  padding:9px 16px; font-size:13px; line-height:1.45;
  background:#fdf2f4; color:#8a1f1f; border-bottom:1px solid #e8c3cd;
}
.banner.warn{background:#fdf7ec; color:#8a5c12; border-bottom-color:#ecd9b4}
.banner code{font-family:Consolas,monospace; font-size:12px}

.app{flex:1; display:grid; grid-template-columns:210px minmax(0,1fr) 290px; gap:12px; padding:12px; min-height:0}
/* A drawer 92vw wide covers its own toggle button, and leaves only a sliver
   of scrim to tap. Without this the only way out is the Escape key, which a
   phone does not have. */
.rail-close{display:none}

.rail-tabs{display:none; gap:6px}
.rail-tab{
  font:inherit; font-size:12px; letter-spacing:.02em; padding:5px 12px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong);
  border-radius:2px; cursor:pointer;
}
.rail-tab[aria-expanded="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}

.scrim{
  position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.38);
  animation:scrim-in .18s ease;
}
@keyframes scrim-in{from{opacity:0}to{opacity:1}}

@media (max-width:1100px){
  .app{grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); padding:8px; gap:8px}
  .rail-tabs{display:flex}

  .rail{
    position:fixed; top:0; bottom:0; z-index:40;
    width:min(330px, 88vw); padding:10px;
    background:var(--surface); border:0; border-right:1px solid var(--line-strong);
    box-shadow:0 0 44px rgba(0,0,0,.28);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transition:transform .2s ease;
  }
  /* Parked off the edge rather than hidden: a display:none panel cannot
     animate, and it also loses its scroll position every time it opens. */
  .rail:not(.right){left:0; transform:translateX(-101%)}
  .rail.right{right:0; left:auto; border-right:0; border-left:1px solid var(--line-strong);
               transform:translateX(101%)}
  .rail.open{transform:none}

  .rail-close{
    display:block; position:sticky; top:0; z-index:1; align-self:flex-end;
    width:38px; height:38px; margin:-10px -10px 2px 0; flex:none;
    font:inherit; font-size:17px; line-height:1; cursor:pointer;
    background:var(--surface); color:var(--ink-2); border:0;
  }

  /* The model is the whole screen now, so it needs room to be one. */
  .viewport{min-height:0}
  .vp-help{display:none}          /* mouse instructions, on a touch screen */
}

/* A finger is about 9 mm across; 30 px buttons are a miss waiting to happen. */
@media (pointer:coarse){
  .mapctl{right:10px; bottom:12px; gap:8px}
  .mapctl .icon-btn{width:42px; height:42px; font-size:19px}
  .rail-tab{padding:8px 14px; font-size:13px}
  select, input[type="search"], input[type="text"]{font-size:16px}
}

/* Phones: the header keeps only what earns its place, and the drawer fills
   nearly the whole width because 330 px of a 360 px screen is not a drawer. */
@media (max-width:560px){
  .top{gap:8px; padding:7px 10px}
  .brand h1{font-size:15px}
  .asat{display:none}
  .app{padding:6px; gap:6px}
  .rail{width:92vw}
  .vp-tags{left:6px; top:6px}
}

.rail{display:flex; flex-direction:column; gap:12px; min-width:0; overflow:auto}
.panel{background:var(--surface); border:1px solid var(--line)}
.panel-h{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  padding:7px 11px; background:var(--surface-2); border-bottom:1px solid var(--line);
}
.panel-b{padding:10px}

select{
  width:100%; padding:6px 7px; font:inherit; font-size:13px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong);
}
select + select{margin-top:7px}

.seg{display:flex; border:1px solid var(--line-strong)}
.seg button{
  flex:1; border:0; background:var(--surface); color:var(--ink-2);
  font:inherit; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 4px; cursor:pointer;
}
.seg button+button{border-left:1px solid var(--line-strong)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}

.radios{display:flex; flex-direction:column; gap:1px; padding:5px}
.radios button{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  border:0; background:transparent; cursor:pointer; padding:6px 7px;
  font:inherit; font-size:12.5px; color:var(--ink-2);
}
.radios button:hover{background:var(--surface-2); color:var(--ink)}
.radios button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}
.dot{width:9px;height:9px;flex:none;border:1px solid rgba(0,0,0,.25)}

.run-row{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  border:0; background:transparent; cursor:pointer; padding:5px 7px; font:inherit; color:var(--ink-2);
}
.run-row:hover{background:var(--surface-2)}
.run-cb{width:14px; height:14px; flex:none; margin:0; cursor:pointer;
  accent-color:var(--accent)}
.run-name{flex:1; min-width:0; display:flex; align-items:center; gap:8px;
  border:0; background:transparent; font:inherit; color:inherit;
  text-align:left; padding:0; cursor:pointer}
.run-row .nm{flex:1; font-size:12.5px; color:var(--ink)}
.run-row .ct{font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.run-row[data-on="false"]{opacity:.4}
.run-row[data-on="false"] .nm{text-decoration:line-through}
.run-row[data-dim="true"]{opacity:.45}
.run-row[data-solo="true"]{background:var(--ink)}
.run-row[data-solo="true"] .nm,
.run-row[data-solo="true"] .ct{color:var(--ground)}
.run-all{border-bottom:1px solid var(--line-strong); margin-bottom:2px}
.run-all .nm{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.run-all[data-active="true"] .nm{color:var(--accent); font-weight:600}
.run-row .syn{font-size:9.5px; letter-spacing:.06em; color:var(--accent); text-transform:uppercase}

.viewport{position:relative; background:var(--surface); border:1px solid var(--line); min-height:340px; overflow:hidden}
#cv{display:block; width:100%; height:100%; cursor:grab; touch-action:none}
#cv.dragging{cursor:grabbing}
.vp-tags{position:absolute; left:10px; top:10px; display:flex; gap:6px; pointer-events:none}
.tag{background:var(--ink); color:var(--ground); font-family:Consolas,monospace; font-size:10.5px; padding:3px 7px}
.tag.ghost{background:var(--surface); color:var(--ink-2); border:1px solid var(--line-strong)}
.vp-help{position:absolute; right:10px; bottom:10px; font-size:11px; color:var(--ink-3);
  background:var(--surface); border:1px solid var(--line); padding:4px 8px; pointer-events:none}
.vp-empty{position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:30px; color:var(--ink-3); font-size:13px; line-height:1.6}

.muted{color:var(--ink-3); font-size:12.5px; margin:0}
.code-big{font-family:Consolas,monospace; font-weight:600; font-size:18px; word-break:break-all; line-height:1.2}
.code-sub{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 10px; margin:11px 0 0; font-size:12.5px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0; text-align:right; font-family:Consolas,monospace; font-variant-numeric:tabular-nums}
.meter{height:7px; background:var(--surface-2); border:1px solid var(--line); margin-top:10px}
.meter i{display:block; height:100%; background:var(--accent)}
.chip{display:inline-block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  padding:2px 7px; border:1px solid currentColor; margin-top:10px}
.chip.bad{color:var(--pink)} .chip.ok{color:var(--ink-2)}
.lines{margin:11px 0 0; border-top:1px solid var(--line); max-height:210px; overflow:auto}
.line{display:flex; justify-content:space-between; gap:8px; padding:5px 0; border-bottom:1px solid var(--line); font-size:12px}
.line .p{min-width:0}
.line .p b{display:block; font-family:Consolas,monospace; font-size:11.5px}
.line .p span{color:var(--ink-3); font-size:11px}
.line .p span.hier{display:block; font-size:10px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); opacity:.8; margin-top:1px}
.line .q{font-family:Consolas,monospace; font-variant-numeric:tabular-nums; white-space:nowrap}

.diag{display:grid; grid-template-columns:1fr auto; gap:3px 10px; font-size:12px}
.diag dt{color:var(--ink-3)}
.diag dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.diag dd.warn{color:var(--pink); font-weight:600}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- all-lines modal ---------------------------------------------------- */
.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center;
  justify-content:center; background:rgba(12,14,16,.55); padding:24px}
.modal[hidden]{display:none}
.modal-card{background:var(--ground); border:1px solid var(--line-strong);
  width:min(760px,100%); max-height:min(80vh,760px); display:flex; flex-direction:column;
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.modal-h{display:flex; align-items:flex-start; gap:12px; padding:12px 14px;
  border-bottom:1px solid var(--line)}
.modal-t{flex:1; min-width:0}
.modal-t strong{font-family:Consolas,monospace; font-size:16px; word-break:break-all}
.modal-sub{display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); margin-top:2px}
.modal-x{border:0; background:transparent; font-size:24px; line-height:1; cursor:pointer;
  color:var(--ink-3); padding:0 4px}
.modal-x:hover{color:var(--ink)}
.modal-s{padding:10px 14px; border-bottom:1px solid var(--line)}
.modal-s input{width:100%; font:inherit; font-size:13px; padding:7px 9px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink)}
.modal-s input:focus{outline:2px solid var(--accent); outline-offset:-2px}
.modal-b{flex:1; overflow:auto; padding:0 14px}
.modal-b .line{padding:7px 0}
.modal-f{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; border-top:1px solid var(--line)}
.btn{font:inherit; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  padding:6px 12px; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink); cursor:pointer}
.btn:hover{background:var(--ink); color:var(--ground)}
.btn[hidden]{display:none}
.more-link{font:inherit; font-size:12px; padding:6px 10px; margin-top:8px; width:100%;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer}
.more-link:hover{background:var(--ink); color:var(--ground)}
.chk{display:flex; align-items:center; gap:7px; margin-top:8px;
  font-size:12.5px; color:var(--ink-2); cursor:pointer; user-select:none}
.chk input{width:14px; height:14px; accent-color:var(--accent); cursor:pointer; margin:0}
.mv-status{margin:7px 0 0; font-size:11.5px; font-family:Consolas,monospace;
  color:var(--ink-2); min-height:1em; word-break:break-all}
.mv-status[data-bad="true"]{color:var(--pink)}
.run-row .plc{font-size:9.5px; letter-spacing:.06em; color:var(--pink);
  text-transform:uppercase}
#binSearch{width:100%; font:inherit; font-size:13px; padding:6px 8px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink)}
#binSearch:focus{outline:2px solid var(--accent); outline-offset:-2px}
.modal-btns{display:flex; gap:8px; align-items:center}
:root{ --rack-post:#3A5C9A; --rack-beam:#D08A2C; }
@media (prefers-color-scheme: dark){ :root{ --rack-post:#5C7FC4; --rack-beam:#E0A050; } }
:root{ --door:#7A5230; --stair:#6E7478; }
@media (prefers-color-scheme: dark){ :root{ --door:#A87A4A; --stair:#8B9196; } }

/* A walkway bridge: the deck you cross, and the handrail either side. */
:root{ --deck:#8C8378; --rail:#5E6B75; }
@media (prefers-color-scheme: dark){ :root{ --deck:#6A6259; --rail:#7E8B95; } }

/* Who is signed in, and the way out. */
.who { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.who-name {
  font-size: 12px; font-weight: 600; letter-spacing: .2px;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: inherit;
}
.icon-btn:hover { background: var(--line); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Map controls, bottom right of the viewport. */
.mapctl {
  position: absolute; right: 12px; bottom: 34px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
}
.mapctl .icon-btn {
  width: 30px; height: 30px; font-size: 16px; font-weight: 600; line-height: 1;
  background: var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.mapctl .icon-btn:hover { background: var(--line); }

/* Search highlights. Cyan for a product, magenta for the bin you looked up -
   neither appears among the browns, greys and greens the bins themselves use. */
:root{ --found:#00A6D6; --picked:#D6006B; }
@media (prefers-color-scheme: dark){ :root{ --found:#3FC9F0; --picked:#FF4D96; } }

/* Walk-mode head-up display. Only shown while walking, so the model is
   uncluttered the rest of the time. */
.wk{position:absolute; pointer-events:none; z-index:4}
#reticle{left:50%; top:50%; transform:translate(-50%,-50%); color:var(--found)}
#mini{right:12px; top:12px; border:1px solid var(--line); border-radius:5px;
  background:var(--panel); opacity:.94; box-shadow:0 2px 8px rgba(0,0,0,.12)}
#wkRead{left:10px; bottom:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:5px; padding:6px 10px; font-size:11.5px; max-width:60%;
  font-family:Consolas,'Courier New',monospace; color:var(--ink)}
#wkRead b{color:var(--found); font-weight:600}
#wkRead .dim{color:var(--ink-3)}