/* ═══ Scanning: the header button, the camera sheet, scan feedback ═══ */

/* The one filled button in the header: scanning is the app's main verb. */
.icon-btn{flex:none;width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);
  transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.icon-btn:hover{background:var(--accent-strong)}
.icon-btn:active{transform:scale(.96)}
.icon-btn .icon{width:22px;height:22px}

.scan-stage{position:relative;aspect-ratio:4/3;background:#000;border-radius:var(--r-md);
  overflow:hidden;border:1px solid var(--border-strong)}
.scan-video{width:100%;height:100%;object-fit:cover;display:block}
/* The frame is a hint, not a limit: the whole image is decoded. */
.scan-reticle{position:absolute;inset:20% 9%;border:2px solid var(--accent);border-radius:var(--r-md);
  box-shadow:0 0 0 9999px rgba(0,0,0,.38);pointer-events:none}
.scan-status{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;text-align:center;
  background:rgba(6,9,14,.78);color:var(--text);font-size:var(--fs-meta)}
.scan-manual{display:flex;gap:8px;margin-top:12px}
.scan-manual input{flex:1;min-width:0}

/* A scanned line on the pick screen: the card pulses once so a picker's eye finds it. */
.scan-hit{animation:scanHit 1.8s var(--ease-out)}
@keyframes scanHit{
  0%,55%{box-shadow:0 0 0 3px var(--accent),0 0 26px var(--accent-t28)}
  100%{box-shadow:0 0 0 0 transparent}
}

/* Barcodes in the product sheet. */
.bc-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-faint)}
.bc-row:last-child{border-bottom:none}
.bc-row .mono{flex:1;min-width:0;word-break:break-all}
.bc-add{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}

/* ── scan-to-confirm on the pick screen ── */
.pickmode{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:14px;
  background:var(--surface-1);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r-md)}
.pickmode.tap{border-left-color:var(--border-strong)}
.pickmode-t{font-weight:700;font-size:var(--fs-body)}
.pickmode-s{font-size:var(--fs-meta);color:var(--text-sub)}

/* ── sharing one order: the team strip, the tabs and the Take lines sheet ──
   Type is the --fs-* scale. The strip is accent only: green, amber and red mean stock. */
.team{margin-top:12px}
.team-bar{display:flex;height:8px;border-radius:var(--r-pill);overflow:hidden;background:var(--border)}
.team-bar .seg{display:block;height:100%;min-width:2px}
.seg.me,.team-legend i.me{background:var(--accent)}
.seg.o1,.team-legend i.o1{background:var(--accent);opacity:.6}
.seg.o2,.team-legend i.o2{background:var(--accent);opacity:.38}
.seg.o3,.team-legend i.o3{background:var(--accent);opacity:.22}
.team-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:var(--fs-meta);color:var(--text-sub)}
.team-legend .who{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.team-legend .who b{font-family:var(--font-mono);font-weight:600;color:var(--text)}
.team-legend i{flex:none;width:10px;height:10px;border-radius:3px;background:var(--border-strong)}

.share-tabs{display:flex;gap:8px;margin-bottom:12px}
.share-tabs .btn{flex:1 1 0;min-width:0}
.share-tabs .n{font-family:var(--font-mono);font-size:var(--fs-label);opacity:.8}

.take-end{display:flex;gap:8px;margin-bottom:10px}
.take-end .btn{flex:1}
.take-amounts{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.take-pairs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.take-list{display:flex;flex-direction:column;gap:8px}
.take-list .btn{justify-content:space-between;text-align:left}
.sheet .dim{color:var(--text-sub);font-family:var(--font-mono);font-size:var(--fs-label);font-weight:400}

/* A wrong item is a hard stop, not a toast: red edge, has to be dismissed. */
.sheet.wrong{border-color:var(--danger);box-shadow:0 0 0 2px var(--danger-border),var(--shadow-pop)}
.sheet.wrong h3{color:var(--danger)}
.blk-line{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-faint);
  font-size:var(--fs-small)}
.blk-line:last-of-type{border-bottom:none}

.conf-qty{display:flex;flex-direction:column;align-items:center;padding:6px 0 12px}
.conf-qty .qty-big{font-size:var(--fs-hero)}

/* ═══ Add barcodes: the worklist and the capture screen ═══
   Type comes from the --fs-* scale; the action bar, loc-tag and card classes are the
   shared ones. Green/amber/red stay out of it: a read is accent, a warning is .card.warn
   and a block is .card.danger. */
.bc-cov .progress{margin:10px 0 8px}
.bc-filters{margin-bottom:14px}
.bc-filters .field{margin-bottom:10px}
.bc-item .loc-tag{flex:none;min-width:76px;justify-content:center}
.bc-product .row{flex-wrap:wrap}
.bc-product .bc-codes{margin-top:10px;border-top:1px solid var(--border-faint)}

/* What was read: the code itself, big, so it can be checked against the carton. */
.bc-read{border-left:3px solid var(--accent)}
.bc-read.waiting{border-left-color:var(--border-strong);border-style:dashed;background:var(--surface-1)}
.bc-read .bc-code{margin:6px 0 2px;word-break:break-all}
.bc-read .bc-hint{margin-top:8px}

/* Three answers to "what is the code on?": stacked, full width, glove-sized. */
.bc-choice{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.bc-choice .btn{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
  width:100%;min-height:var(--tap-min);height:auto;padding:10px 14px;text-align:left}
.bc-choice .btn[aria-pressed=true]{background:var(--accent-t18);border-color:var(--accent);color:var(--text)}
.bc-choice .t{font-weight:700;font-size:var(--fs-body)}
.bc-choice .s{font-weight:400;font-size:var(--fs-meta);color:var(--text-sub)}

/* An icon sitting inside a button: the svg fills its parent unless told otherwise. */
.action-bar .btn .icon{width:20px;height:20px;flex:none}