/* static/css/scan.css: the scan result card (#card) + the reticle lock, owned by Task 6.
   Port of design-language/redesign.html .card .chero .need .reveal and .ret.lock. The card rises 420 ms on
   --ease-sheet (exit 260 ms), no grip, no drag; content fades up in sequence (kit .k-reveal, --i).
   Only transform / opacity animate. */

/* ── reticle lock: corners snap in and turn green for ~180 ms when a code is confirmed (scan.js lockReticle) ── */
.reticle .frame{transition:width .3s var(--ease-out),height .3s var(--ease-out),transform 180ms var(--ease-out),opacity 200ms ease}
.reticle .frame.lock{transform:scale(.94)}
.reticle .frame.lock b{border-color:#4ecb81;transition-duration:160ms}
.reticle .frame.lock .sweep{opacity:0}
/* the reticle steps back while a card is up (prototype .ret.dim), the hint fades */
.reticle .hint{transition:color .2s,opacity 200ms ease}
body.carded .reticle .frame{opacity:.35}
body.carded .reticle .hint{opacity:0}

/* ── the card ── */
#card{position:absolute;left:8px;right:8px;bottom:calc(var(--sab) + 8px);z-index:10;background:var(--canvas);color:var(--ink);
  border-radius:36px;padding:20px 18px 18px;box-shadow:0 20px 60px rgba(0,0,0,.45);
  transform:translateY(calc(100% + 28px + var(--sab)));transition:transform 420ms var(--ease-sheet);will-change:transform;contain:layout paint}
#card.show{transform:translateY(0)}
#card.out{transition-duration:260ms}
#card:not(.show){pointer-events:none}
#card>.k-reveal{display:flex;flex-direction:column;min-width:0}
.sc-step{min-width:0}
#card .k-hero{margin-bottom:14px}
#card .k-rows{margin-bottom:12px}
#card .k-shots{margin-bottom:14px}
#card .k-hline{margin-top:3px}

/* ×N re-scan counter on the status line */
.sc-x{flex:none;font:700 11px/1.35 var(--mono);padding:2px 8px;border-radius:99px;background:var(--ink);color:var(--canvas)}

/* new / not found: "Four photos build it" + red count pill */
.sc-need{display:flex;align-items:center;gap:8px;font:600 14px var(--disp);color:var(--ink);margin:0 2px 10px}
.sc-n{font:700 11px/1.35 var(--body);padding:2px 7px;border-radius:99px;background:var(--red);color:var(--on-red)}

/* ── type the code ── */
.sc-keys{background:var(--red-wash);color:var(--red);box-shadow:none}
.sc-sub{font-size:13.5px;color:var(--mute)}
.sc-field{display:flex;align-items:center;height:64px;padding:0 18px;border-radius:20px;background:var(--surface);border:1.5px solid var(--hairline);
  transition:border-color 160ms ease,box-shadow 160ms ease;min-width:0;cursor:text}
.sc-field:focus-within{border-color:var(--red);box-shadow:0 0 0 4px var(--red-wash)}
.sc-field.ok,.sc-field.ok:focus-within{border-color:var(--ok);box-shadow:0 0 0 4px var(--ok-wash)}
.sc-field input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;font:500 24px var(--mono);letter-spacing:.08em;color:var(--ink);padding:0}
.sc-field input::placeholder{color:var(--hairline-strong);letter-spacing:.08em}
.sc-valid{display:flex;align-items:center;gap:6px;min-height:20px;margin:8px 4px 14px;font-size:13px;color:var(--faint);min-width:0}
.sc-valid.ok{color:var(--ok);font-weight:600}
.sc-valid.bad{color:var(--warn)}
#card .k-btn:disabled{opacity:.45;box-shadow:none;cursor:default}
#card .k-btn:disabled:active{transform:none}
@media (max-width:374px){ .sc-field input{font-size:21px;letter-spacing:.06em} }

@media (prefers-reduced-motion:reduce){
  #card{transform:none;opacity:0;transition:opacity 200ms ease}
  #card.show{opacity:1}
  .reticle .frame.lock{transform:none}
}