/* Scan the microchip QR code (W03), transfer ownership step 1.

   Values follow the PCE Web design spec: 1176 content, 340 journey column,
   80 gap, 756 card with 32 padding and 28 between blocks, 36/41 card title,
   17/26 description, a 240 tall camera preview on #0B1B2E and a 48 tall
   secondary action.

   Page-specific only. Design tokens, base styles, header and footer live in
   pce-chrome.css; the journey column, card, buttons and steps come from
   pce-transfer.css. Both load before this file. */

.scan-card{display:flex;flex-direction:column;gap:28px}
.scan-card .tr-back{margin-bottom:0}

.scan-view{display:flex;flex-direction:column;gap:28px}
.scan-view .tr-h1:focus{outline:none}
/* The title and its description belong together, 12 apart per the spec. */
.scan-view .tr-h1+.tr-sub{margin-top:-16px}
.scan-view .tr-sub{margin-top:0}

.scan-notice{padding:20px;background:var(--paper)}
.scan-notice-title{font-weight:600;font-size:17px;line-height:26px;color:var(--ink)}
.scan-notice-text{margin-top:6px;font-weight:400;font-size:16px;line-height:24px;color:var(--ink-soft)}

.scan-card .scan-btn{margin-top:0}
.scan-card .tr-linkbtn{margin-top:0}
.scan-help{font-weight:400;font-size:13px;line-height:20px;color:var(--ink-soft)}

/* ---------- camera preview ---------- */
.scan-preview{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:240px;padding:24px;background:var(--ink);overflow:hidden}
.scan-preview-label{position:absolute;top:24px;left:24px;z-index:2;font-family:var(--f-mono);font-weight:500;font-size:11px;line-height:17px;letter-spacing:.06em;color:#fff}
.scan-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink)}

.scan-frame{position:relative;z-index:2;width:220px;height:130px}
.scan-corner{position:absolute;width:36px;height:36px;border:3px solid #fff}
.scan-corner-tl{top:0;left:0;border-right:0;border-bottom:0}
.scan-corner-tr{top:0;right:0;border-left:0;border-bottom:0}
.scan-corner-bl{bottom:0;left:0;border-right:0;border-top:0}
.scan-corner-br{bottom:0;right:0;border-left:0;border-top:0}
.scan-line{position:absolute;top:50%;left:5px;right:5px;height:1px;background:#fff;opacity:.55}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .scan-card{gap:24px}
  .scan-view{gap:24px}
  .scan-notice{padding:16px}
  .scan-preview{min-height:280px}
}