/* AQJ Field Portal — mobile first. Brand per AQJ design system. */
:root{
  --navy:#0C2942; --navy-deep:#071D2F; --blue:#087FBA; --btn:#006FAE;
  --ink:#162A39; --slate:#526473; --bg:#EEF2F4; --marble:#F4F5F4;
  --border:#D8E0E4; --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;color:var(--ink);background:var(--bg);
  -webkit-text-size-adjust:100%;
}
.bar{background:var(--navy);color:#fff}
.bar-in{max-width:720px;margin:0 auto;padding:14px 16px;display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:600;letter-spacing:.01em}
.out{color:#cfe3f0;text-decoration:none;font-size:15px;padding:6px 2px}
.out:active{opacity:.6}
.wrap{max-width:720px;margin:0 auto;padding:16px 16px 40px}
h1{font-size:21px;font-weight:600;margin:4px 0 2px;color:var(--navy)}
.sub{color:var(--slate);font-size:15px;margin:0 0 18px}

.card{background:var(--white);border:1px solid var(--border);border-radius:10px;
  padding:14px 15px;margin-bottom:12px}
.card a{text-decoration:none;color:inherit;display:block}
.ref{font-size:13px;color:var(--slate);font-weight:600;letter-spacing:.04em}
.cust{font-size:17px;font-weight:600;color:var(--navy);margin:3px 0 4px}
.addr{font-size:15px;color:var(--slate);line-height:1.4}
.items{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.item{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding:3px 0}
.item .q{font-weight:600;white-space:nowrap}
.chip{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--btn);border:1px solid var(--blue);
  border-radius:999px;padding:2px 9px;margin-top:10px}

label{display:block;font-size:15px;font-weight:600;margin:0 0 6px}
input[type=text],input[type=password]{
  width:100%;font:inherit;font-size:17px;padding:13px 12px;
  border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink)}
input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.field{margin-bottom:16px}
button{width:100%;font:inherit;font-size:17px;font-weight:600;color:#fff;
  background:var(--btn);border:0;border-radius:8px;padding:14px;cursor:pointer}
button:active{background:var(--navy)}
.err{background:#fdeced;border:1px solid #f3c2c6;color:#8a1c24;
  padding:11px 12px;border-radius:8px;margin-bottom:16px;font-size:15px}
.note{background:var(--marble);border:1px solid var(--border);color:var(--slate);
  padding:11px 12px;border-radius:8px;margin-bottom:16px;font-size:14px}
.empty{background:#fff;border:1px dashed var(--border);border-radius:10px;
  padding:26px 16px;text-align:center;color:var(--slate)}
.foot{max-width:720px;margin:0 auto;padding:18px 16px 28px;
  color:var(--slate);font-size:13px;text-align:center}

/* ---------- delivery detail and proof of delivery ---------- */

/* label{display:block} above would otherwise beat the hidden attribute. */
[hidden]{display:none !important}

.back{display:inline-block;color:var(--btn);text-decoration:none;font-size:15px;
  font-weight:600;padding:6px 0;margin-bottom:4px}
.goto{display:block;margin-top:10px;font-size:14px;font-weight:600;color:var(--btn)}
.maplink{display:inline-block;margin-top:4px;color:var(--btn);font-weight:600;
  text-decoration:none;font-size:15px}

.pod h2{font-size:15px;font-weight:600;color:var(--navy);letter-spacing:.03em;
  text-transform:uppercase;margin:26px 0 10px;padding-bottom:6px;
  border-bottom:1px solid var(--border)}

.line{background:var(--white);border:1px solid var(--border);border-radius:10px;
  padding:13px 14px;margin-bottom:10px}
.line.isshort{border-color:#d9a441;background:#fffaf0}
.prod{font-size:16px;font-weight:600;color:var(--navy);line-height:1.35}
.qrow{display:flex;gap:12px;margin-top:10px}
.qrow label{flex:1;margin:0}
.qrow span{display:block;font-size:13px;font-weight:600;color:var(--slate);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.qrow .exp{display:inline-block;font-size:19px;font-weight:600;color:var(--ink);
  padding:11px 0}
.qrow .uom{font-style:normal;font-size:14px;color:var(--slate);margin-left:6px}
.qty{width:100%;font:inherit;font-size:19px;font-weight:600;padding:11px 12px;
  border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink)}
.reason{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.reason span{font-size:13px;font-weight:600;color:var(--slate);
  text-transform:uppercase;letter-spacing:.04em}
select,textarea,input[type=file]{width:100%;font:inherit;font-size:17px;
  padding:12px;border:1px solid var(--border);border-radius:8px;background:#fff;
  color:var(--ink)}
textarea{resize:vertical}
.rother{margin-top:10px}
.rtxt{width:100%;font:inherit;font-size:17px;padding:12px;
  border:1px solid var(--border);border-radius:8px}

.block{margin-bottom:16px}
.hint{display:block;font-size:14px;font-weight:400;color:var(--slate);margin-bottom:6px}
.hint.small{font-size:13px;margin-top:12px;text-align:center}
.notice{background:var(--marble);border:1px solid var(--border);color:var(--slate);
  padding:11px 12px;border-radius:8px;font-size:14px;line-height:1.45;margin:0 0 14px}
.check{display:flex;align-items:center;gap:10px;font-weight:400;font-size:16px;
  margin-bottom:16px}
.check input{width:22px;height:22px;flex:none}

.sig{display:block;width:100%;height:190px;background:#fff;
  border:1px solid var(--border);border-radius:10px;touch-action:none;
  cursor:crosshair}
.ghost{background:#fff;color:var(--btn);border:1px solid var(--border);
  margin-top:8px;font-size:15px;padding:11px}
.ghost:active{background:var(--marble)}

.go{margin-top:22px;padding:17px}
.go:disabled{background:var(--slate);opacity:.7}

.podmsg{margin-top:16px;padding:12px 13px;border-radius:8px;font-size:15px;
  line-height:1.45;border:1px solid}
.podmsg.ok{background:#eaf6ee;border-color:#b6ddc3;color:#14512b}
.podmsg.err{background:#fdeced;border-color:#f3c2c6;color:#8a1c24}
.podmsg.wait{background:var(--marble);border-color:var(--border);color:var(--slate)}

/* A delivery that is already signed: visible, but plainly not actionable. */
.card.done{background:var(--marble);border-style:dashed;opacity:.72}
.card.done .cust{color:var(--slate)}
.chip.waiting{color:var(--slate);border-color:var(--border);background:#fff}