/* We Care · Dispense Check — a counter phone tool for Lifax Pharma (AIM pilot).
   Light and clinical, not a dark ops console: it lives on a phone at a bright
   billing counter and has to be read at a glance, one-handed.

   Colour discipline (learned from the Al Taza gold/red collision):
   - BRAND is teal  — structure and identity only, never a status.
   - PASS  is green — "all clear / confirmed / hand over".
   - CHECK is amber — "stop and verify this one".
   - WRONG is red   — reserved for a mismatch the staffer flags.
   Teal ≠ green so a healthy state never competes with the wordmark. */

:root{
  --brand:#0f766e; --brand-dk:#0b5a54; --brand-tint:#e6f3f1;
  --pass:#12a150; --pass-tint:#e7f6ec; --pass-dk:#0b7a3c;
  --check:#e8930c; --check-tint:#fdf1dc; --check-dk:#a9670a;
  --wrong:#e02424; --wrong-tint:#fdeaea;

  --bg:#eef1f4; --panel:#ffffff; --panel-2:#f7f9fb;
  --ink:#12212b; --muted:#5c7080; --faint:#8ea0ad; --line:#e2e8ee;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,sans-serif;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(18,33,43,.04),0 6px 20px rgba(18,33,43,.06);
  --shadow-lg:0 8px 40px rgba(18,33,43,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;margin:0}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;line-height:1.14;letter-spacing:-.02em;font-weight:700}
.mono{font-family:var(--mono)}
.hidden{display:none!important}

/* ---------- phone frame ---------- */
#phone{
  max-width:460px;margin:0 auto;min-height:100dvh;
  background:var(--bg);display:flex;flex-direction:column;position:relative;
}
@media(min-width:520px){
  body{padding:22px 0}
  #phone{min-height:calc(100dvh - 44px);border-radius:30px;overflow:hidden;
    box-shadow:var(--shadow-lg);border:1px solid var(--line)}
}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:.65rem;padding:.85rem 1.05rem;
  background:var(--brand);color:#fff;position:sticky;top:0;z-index:5;
}
.topbar .mark{
  width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:#fff;color:var(--brand);font-weight:800;font-size:15px;letter-spacing:-.04em;
}
.topbar .tt b{display:block;font-size:15px;letter-spacing:-.01em;line-height:1.1}
.topbar .tt span{font:600 9.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.topbar .spacer{flex:1}
.topbar .pill{
  font:700 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.16);padding:.4rem .55rem;border-radius:999px;
}

/* ---------- screen ---------- */
.screen{flex:1;padding:1.1rem 1.05rem 2rem;display:flex;flex-direction:column;gap:1rem;animation:rise .22s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- home ---------- */
.hero-copy h1{font-size:1.6rem}
.hero-copy p{margin:.4rem 0 0;color:var(--muted);font-size:.95rem}

.scan-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  background:var(--brand);color:#fff;border-radius:var(--r);padding:1.6rem 1rem;
  box-shadow:var(--shadow);transition:transform .1s ease,background .15s ease;
}
.scan-btn:active{transform:scale(.985);background:var(--brand-dk)}
.scan-btn svg{width:46px;height:46px}
.scan-btn b{font-size:1.18rem;letter-spacing:-.01em}
.scan-btn span{font-size:.82rem;opacity:.88}

.grp-label{font:700 10px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin:.3rem 0 -.2rem}

.demo-list{display:flex;flex-direction:column;gap:.6rem}
.demo-card{
  display:flex;align-items:center;gap:.8rem;text-align:left;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.85rem .9rem;box-shadow:var(--shadow);transition:border-color .12s,transform .1s}
.demo-card:active{transform:scale(.99)}
.demo-card .ic{width:38px;height:38px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:1.2rem}
.demo-card .ic.ok{background:var(--pass-tint)}
.demo-card .ic.one{background:var(--check-tint)}
.demo-card .ic.many{background:var(--wrong-tint)}
.demo-card .g{flex:1;min-width:0}
.demo-card .g b{display:block;font-size:.98rem}
.demo-card .g span{font-size:.8rem;color:var(--muted)}
.demo-card .chev{color:var(--faint);flex:none}
.demo-card .inv{font:600 11px var(--mono);color:var(--faint)}

.foot-note{color:var(--faint);font-size:.78rem;text-align:center;margin-top:.3rem;line-height:1.5}
.foot-note a{color:var(--brand);font-weight:600}

/* ---------- scanner ---------- */
#scanner{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;z-index:20}
#scanner video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.scan-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at center,transparent 34%,rgba(0,0,0,.55) 72%)}
.scan-frame{width:66vw;max-width:290px;aspect-ratio:1;border-radius:22px;position:relative}
.scan-frame::before,.scan-frame::after,.scan-frame i::before,.scan-frame i::after{
  content:"";position:absolute;width:34px;height:34px;border:3px solid #fff;border-radius:4px}
.scan-frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.scan-frame::after{top:-2px;right:-2px;border-left:0;border-bottom:0}
.scan-frame i::before{bottom:-2px;left:-2px;border-right:0;border-top:0}
.scan-frame i::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.scan-line{position:absolute;left:6%;right:6%;height:2px;background:var(--pass);box-shadow:0 0 12px var(--pass);
  border-radius:2px;animation:scan 2s ease-in-out infinite}
@keyframes scan{0%,100%{top:8%}50%{top:92%}}
.scan-hint{position:absolute;top:calc(50% + 175px);color:#fff;font-size:.9rem;text-align:center;padding:0 2rem;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
.scan-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:1rem;color:#fff;z-index:3}
.scan-top b{font-size:.95rem;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.scan-x{width:40px;height:40px;border-radius:999px;background:rgba(0,0,0,.4);display:grid;place-items:center;font-size:1.4rem;line-height:1}
.scan-fallback{position:absolute;bottom:1.1rem;left:1rem;right:1rem;z-index:3}
.scan-fallback button{width:100%;padding:.8rem;border-radius:10px;background:rgba(255,255,255,.14);
  color:#fff;font-weight:600;font-size:.88rem;border:1px solid rgba(255,255,255,.25)}
.cam-error{color:#fff;text-align:center;padding:2rem;max-width:320px;margin:auto;z-index:3}
.cam-error h3{margin-bottom:.5rem}
.cam-error p{color:#cdd5da;font-size:.9rem}

/* ---------- result verdict banner ---------- */
.verdict{border-radius:var(--r);padding:1.15rem 1.1rem;color:#fff;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:.9rem}
.verdict .vi{width:44px;height:44px;flex:none}
.verdict h2{font-size:1.28rem}
.verdict p{margin:.15rem 0 0;font-size:.88rem;opacity:.92}
.verdict.pass{background:linear-gradient(135deg,var(--pass),var(--pass-dk))}
.verdict.check{background:linear-gradient(135deg,var(--check),var(--check-dk))}

.billmeta{display:flex;gap:.5rem 1.1rem;flex-wrap:wrap;color:var(--muted);font-size:.8rem;padding:0 .15rem}
.billmeta b{color:var(--ink);font-weight:600}
.billmeta .mono{color:var(--ink)}

/* ---------- check card (the money shot) ---------- */
.check-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;border-top:4px solid var(--check)}
.check-card.done{border-top-color:var(--pass)}
.cc-head{display:flex;align-items:baseline;gap:.5rem;padding:.9rem 1rem .2rem;flex-wrap:wrap}
.cc-head .brand{font-size:1.15rem;font-weight:700}
.cc-head .mol{color:var(--muted);font-size:.82rem}
.cc-strength{padding:.15rem 1rem 0;display:flex;align-items:baseline;gap:.5rem}
.cc-strength .num{font-size:3.2rem;font-weight:800;letter-spacing:-.04em;line-height:.95}
.cc-strength .mg{font-size:1.1rem;font-weight:700;color:var(--muted)}
.cc-strength .band{margin-left:auto;align-self:center;font:700 11px var(--mono);letter-spacing:.06em;
  padding:.3rem .6rem;border-radius:999px;color:#fff}

.cc-photo{margin:.7rem 1rem 0;border-radius:var(--r-sm);overflow:hidden;background:var(--panel-2);border:1px solid var(--line)}
.cc-photo img{width:100%;height:210px;object-fit:cover;object-position:center 30%}

.cc-qty{margin:.7rem 1rem 0;background:var(--brand-tint);border-radius:var(--r-sm);padding:.6rem .8rem;
  display:flex;align-items:center;gap:.55rem;font-size:.92rem}
.cc-qty b{font-size:1.05rem}
.cc-instruct{margin:.7rem 1rem 0;font-size:.9rem;color:var(--ink);line-height:1.5}
.cc-instruct em{font-style:normal;font-weight:700;background:var(--check-tint);padding:0 .25rem;border-radius:4px}

/* not-these siblings */
.cc-not{margin:.85rem 1rem 0}
.cc-not .lab{font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--wrong);margin-bottom:.45rem}
.sibs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.3rem;-webkit-overflow-scrolling:touch}
.sib{flex:none;width:84px;text-align:center}
.sib .ph{width:84px;height:96px;border-radius:8px;overflow:hidden;border:1px solid var(--line);position:relative;background:var(--panel-2)}
.sib .ph img{width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:grayscale(.15)}
.sib .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px rgba(224,36,36,.0)}
.sib .cap{font-size:.72rem;color:var(--muted);margin-top:.28rem}
.sib .cap b{display:block;color:var(--ink);font-size:.86rem}

/* confirm controls */
.cc-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:1rem}
.cc-actions .confirm{background:var(--pass);color:#fff;padding:.95rem;border-radius:var(--r-sm);font-weight:700;font-size:1rem;
  display:flex;align-items:center;justify-content:center;gap:.4rem}
.cc-actions .confirm:active{background:var(--pass-dk)}
.cc-actions .flag{background:var(--panel);color:var(--wrong);border:1.5px solid var(--wrong-tint);padding:.95rem;border-radius:var(--r-sm);font-weight:600;font-size:.95rem}
.cc-actions .flag:active{background:var(--wrong-tint)}
.cc-confirmed{padding:1rem;display:flex;align-items:center;gap:.6rem;color:var(--pass-dk);font-weight:700}
.cc-confirmed .undo{margin-left:auto;color:var(--faint);font-weight:600;font-size:.82rem;text-decoration:underline}
.cc-flagged{padding:1rem;background:var(--wrong-tint);color:var(--wrong);font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.5rem}
.cc-flagged .undo{margin-left:auto;color:var(--wrong);font-weight:600;font-size:.82rem;text-decoration:underline}

/* ordinary items (all-clear list) */
.items{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.items .row{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.items .row:last-child{border-bottom:0}
.items .row .tick{color:var(--pass);flex:none}
.items .row .nm{flex:1;min-width:0}
.items .row .nm b{font-weight:600;font-size:.93rem}
.items .row .nm span{display:block;font-size:.76rem;color:var(--faint)}
.items .row .q{font:600 12px var(--mono);color:var(--muted)}

/* ---------- sticky footer action ---------- */
.footer{position:sticky;bottom:0;padding:.85rem 1.05rem calc(.85rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--bg) 62%,transparent);display:flex;flex-direction:column;gap:.55rem}
.hand-status{text-align:center;font-weight:700;font-size:.92rem;display:flex;align-items:center;justify-content:center;gap:.45rem}
.hand-status.wait{color:var(--check-dk)}
.hand-status.go{color:var(--pass-dk)}
.btn{width:100%;padding:1.05rem;border-radius:var(--r);font-weight:700;font-size:1.05rem;text-align:center;box-shadow:var(--shadow)}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:active{background:var(--brand-dk)}
.btn.go{background:var(--pass);color:#fff}
.btn.go:active{background:var(--pass-dk)}
.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:none;font-size:.95rem;padding:.85rem}
.btn:disabled{opacity:.5}

/* toast */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:999px;font-size:.85rem;font-weight:600;
  z-index:40;transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}