/* HoloInvestor · sidestil for body[data-page="scan"].
   Lenkes bare fra scan.html, rett etter style.css.
   Regler som flere sider bruker, ligger i components.css. */

/* ===== Skann (body[data-page="scan"]): kameraramme i blekk, søm bare ved treff ===== */

.scan-view { position: relative; width: 100%; max-width: 480px; aspect-ratio: 3 / 4; background: var(--ink-0); border: 1px solid var(--line-strong); border-radius: var(--r-2); overflow: hidden; }

.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }

.scan-frame { position: absolute; border: 2px solid var(--text); border-radius: var(--card-corners); outline: 9999px solid rgba(15, 16, 14, 0.55); pointer-events: none; }

.scan-frame.is-hit::after { content: ""; position: absolute; left: 8%; right: 8%; top: -2px; height: 2px; background: var(--holo); }

.scan-controls { margin-top: var(--s3); }

.scan-result-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: start; }

.scan-preview { width: 120px; border: 1px solid var(--line); border-radius: var(--card-corners); }

.scan-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s3); margin: var(--s4) 0; }

.scan-cand { display: grid; gap: var(--s1); padding: var(--s3); border: 1px solid var(--line); background: var(--ink-1); position: relative; }

.scan-cand.is-best { border-color: var(--line-strong); }

.scan-cand.is-best::before { content: ""; position: absolute; top: -1px; left: var(--s3); right: var(--s3); height: 2px; background: var(--holo); }

.scan-cand .thumb { aspect-ratio: 5 / 7; background: var(--ink-2); border-radius: var(--card-corners); overflow: hidden; display: flex; align-items: center; justify-content: center; }

.scan-cand .thumb img { width: 100%; height: 100%; object-fit: contain; }

.scan-cand .name { font-weight: 600; font-size: 0.9rem; }

.scan-cand .pct { color: var(--text-dim); font-size: 0.85rem; }

.scan-cand .price { font-weight: 500; }

.scan-cand .row { margin-top: var(--s1); }

.scan-confirm-card { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }

.scan-confirm-card .row-thumb { width: 56px; height: 78px; }