:root{
  --bg:#0b1220; --panel:#151d2e; --panel2:#1d2639; --line:#2a3549;
  --ink:#eef2f8; --dim:#93a0b8; --accent:#3b82f6; --ok:#22c55e; --warn:#f59e0b;
  --r:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display:flex; flex-direction:column;
}
button,input,textarea{font:inherit;color:inherit}

/* ---- status strip ---- */
.strip{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
.store{flex:1;min-width:0;text-align:left;background:none;border:0;padding:4px 2px;display:flex;flex-direction:column}
.store span:first-child{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.method{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.strip-right{display:flex;align-items:center;gap:10px}
.pending{background:var(--warn);color:#2b1a00;font-weight:700;font-size:12px;
  min-width:22px;text-align:center;border-radius:11px;padding:2px 6px}
.dot{width:10px;height:10px;border-radius:50%;background:#64748b}
.dot.on{background:var(--ok)}
.gear{background:none;border:0;font-size:20px;color:var(--dim);padding:2px 4px}

/* ---- camera ---- */
main{flex:1;display:flex;flex-direction:column;gap:10px;padding:10px;overflow-y:auto}
.shoot{
  flex:1 1 42vh; min-height:200px; position:relative; display:block;
  border:2px dashed var(--line); border-radius:var(--r); background:var(--panel);
  overflow:hidden; -webkit-tap-highlight-color:transparent;
}
.shoot-idle{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;color:var(--dim)}
.shoot-idle svg{width:64px;height:64px;fill:currentColor;opacity:.75}
.shoot-done{position:absolute;inset:0}
.shoot-done img{width:100%;height:100%;object-fit:cover;display:block}
.retake{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.65);
  padding:5px 11px;border-radius:999px;font-size:13px}

/* ---- dept ---- */
.depts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.depts button{
  padding:15px 4px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);font-weight:600;
}
.depts button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- fields ---- */
.field{width:100%;padding:13px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);outline:none}
.field:focus{border-color:var(--accent)}
.recents{display:flex;flex-wrap:wrap;gap:6px}
.recents button{background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-size:14px;color:var(--dim)}
.note-toggle{align-self:flex-start;background:none;border:0;color:var(--dim);
  font-size:14px;padding:2px 0;text-decoration:underline}

/* ---- send ---- */
.send{
  width:100%;padding:19px;border:0;border-radius:var(--r);background:var(--accent);
  color:#fff;font-size:19px;font-weight:700;margin-top:2px;
}
.send:disabled{background:var(--panel2);color:#5b6880}
.flash{min-height:18px;margin:2px 0 0;text-align:center;font-size:14px;color:var(--ok)}
.flash.err{color:#f87171}

/* ---- sheets ---- */
.sheet{position:fixed;inset:0;background:rgba(3,7,16,.72);display:flex;
  align-items:flex-end;z-index:20}
/* `display:flex` above beats the UA rule for [hidden], so a closed sheet would
   stay an invisible full-screen tap blocker without this. */
.sheet[hidden]{display:none}
.sheet-body{background:var(--bg);border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;padding:16px 14px calc(16px + env(safe-area-inset-bottom));
  width:100%;max-height:88vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.sheet-body h2{margin:0;font-size:18px}
.sheet-body h3{margin:10px 0 0;font-size:14px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.picker-list{display:flex;flex-direction:column;gap:7px}
.picker-list button{text-align:left;padding:15px 13px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);display:flex;justify-content:space-between;gap:10px}
.picker-list.small button{padding:11px 12px;font-size:14px}
.picker-list .dist{color:var(--dim);font-size:13px;white-space:nowrap}
.sheet-close{margin-top:6px;padding:15px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel2)}
.lbl{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--dim)}
.hint{color:var(--dim);font-size:12px;font-weight:400;margin:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{padding:13px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);font-size:14px}
.failed-list{display:flex;flex-direction:column;gap:6px;font-size:13px}
.failed-list .item{border:1px solid var(--line);border-radius:10px;padding:9px 10px;color:var(--dim)}
.ver{text-align:center;color:var(--dim);font-size:12px;margin:4px 0 0}

/* First run shows only what the driver must fill in. Everything operational
   (retry, lot calibration, failed items, version) appears once he is set up,
   so the screen he meets on day one is two fields and a button. */
.sheet-body.first-run .after-setup{display:none}
.sheet-body:not(.first-run) .setup-only{display:none}
.setup-hint{background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:10px 11px;line-height:1.45}