/* ============================================================
   07-scanner.css
   Fullscreen scanning on phones: no sidebar, no page chrome, camera only.
   ------------------------------------------------------------
   Load order matters — see index.html. These files are the old
   app.css split at section boundaries, in the original order, so
   the cascade is unchanged.
   ============================================================ */
/* ============================================================
   FULLSCREEN SCANNER
   On a phone the scanner is the whole screen: no sidebar, no page
   chrome, camera edge to edge, controls floating over the feed.
   ============================================================ */
.scan-exit{display:none;}

body.scan-full{overflow:hidden;}
body.scan-full .topbar,
body.scan-full .mobile-head,
body.scan-full #view-scan .view-head,
body.scan-full #scanNotice:empty{display:none !important;}

/* the bottom tab bar stays visible during scanning, so the camera view
   stops short of the screen edge instead of running full-bleed under it */
body.scan-full .rail{z-index:76;}

body.scan-full .main{padding:0; max-width:none;}
body.scan-full #view-scan{
  position:fixed; top:0; left:0; right:0; bottom:calc(76px + env(safe-area-inset-bottom));
  z-index:75; background:#000; display:block;
  /* The result sheet parks itself below this box with translateY(100%). While
     this box still ran to the bottom of the screen that put it out of sight;
     now that it stops short of the tab bar, the parked sheet showed as a strip
     along the bottom edge unless it is clipped here. */
  overflow:hidden;
}
body.scan-full .scan-wrap{
  display:block; height:100%; gap:0;
}
body.scan-full .scan-stage{
  position:absolute; inset:0; padding:0; border:none; border-radius:0; background:#000;
}
body.scan-full .video-box{
  position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0;
}
body.scan-full .video-box video{width:100%; height:100%; object-fit:cover;}
body.scan-full .crop-preview{display:none !important;}

/* The text buttons are a desktop affordance; on the phone they crowded into
   each other. In fullscreen the camera itself is the shutter — a tap anywhere
   on the picture captures, which is how the reference app behaves. */
body.scan-full .scan-controls{display:none;}
body.scan-full .guide{display:none;}
body.scan-full .crop-preview{display:none !important;}
body.scan-full .video-box{cursor:pointer;}

/* the right-hand column becomes a sheet that slides up over the camera */
body.scan-full .scan-wrap > div:last-child{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  max-height:62vh; overflow-y:auto;
  padding:12px 12px calc(76px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(9,13,21,.98) 70%,rgba(9,13,21,.85));
  border-top:1px solid var(--line-2); border-radius:var(--r3) var(--r3) 0 0;
  transform:translateY(100%); transition:transform .28s ease;
}
body.scan-full.sheet-open .scan-wrap > div:last-child{transform:translateY(0);}
/* The sheet scrolls up and down only. With overflow-y:auto the browser makes
   the other axis scrollable too, and on iOS one element a few pixels too
   wide (a set dropdown with long edition names) let a diagonal swipe slide
   the whole sheet sideways. Nothing in it may be wider than the sheet. */
body.scan-full .scan-wrap > div:last-child{
  overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y;
}
body.scan-full #scanSheet .match-card,
body.scan-full #scanSheet .queue-panel,
body.scan-full #scanSheet .match-body,
body.scan-full #scanSheet .qedit-row,
body.scan-full #scanSheet .manual-row,
body.scan-full #scanSheet select,
body.scan-full #scanSheet input{min-width:0; max-width:100%;}
/* With the sheet up, the icon column turns into a row along the top, so the
   two never overlap; the sheet may grow up to just below it. */
body.scan-full.sheet-open .hud-stack{flex-direction:row; border-radius:26px;}
body.scan-full .scan-wrap > div:last-child{max-height:min(70vh, calc(100% - 76px - env(safe-area-inset-top)));}
/* the grip: drag the sheet down to put it away */
.sheet-grab{display:none;}
body.scan-full .sheet-grab{
  display:block; width:44px; height:5px; border-radius:3px; background:rgba(255,255,255,.28);
  margin:-2px auto 10px;
}
body.scan-full .scan-wrap > div:last-child.dragging{transition:none;}
/* a bigger target than the bar itself: a tap on the grip closes the sheet */
body.scan-full .sheet-grab{box-sizing:content-box; padding:10px 40px 12px; margin:-12px auto 0; background-clip:content-box; cursor:pointer;}

/* The scan list as the sheet, the way the reference app shows it: no card
   around it, the match panel only while a card waits for a yes or no, and
   the two buttons pinned to the bottom edge while the list scrolls. */
body.scan-full.sheet-list #scanSheet .match-card{display:none;}
/* The option pill floats over the camera; the sheet kept 76px free at its
   foot for it. The list covers it instead and gets that room back, solid,
   so the camera hints do not shine through the rows. */
body.scan-full.sheet-open.sheet-list .scan-optbar{display:none;}
body.scan-full.sheet-list .scan-wrap > div:last-child{
  padding-bottom:10px; background:rgb(9,13,21);
  max-height:calc(100% - 68px - env(safe-area-inset-top));
  /* a fixed height, so the sheet does not jump while the list is searched
     or a card is taken off; the buttons stay at its foot */
  height:calc(100% - 68px - env(safe-area-inset-top));
  display:flex; flex-direction:column;
}
body.scan-full.sheet-list #scanSheet .queue-panel{flex:1 0 auto; display:flex; flex-direction:column;}
body.scan-full.sheet-list #scanSheet .qfoot{margin-top:auto;}
body.scan-full #scanSheet .queue-panel{background:none; border:none; border-radius:0; padding:0 4px; margin-top:12px;}
body.scan-full.sheet-list #scanSheet .queue-panel{margin-top:0;}
body.scan-full #scanSheet .queue-list{max-height:none; overflow:visible;}
body.scan-full #scanSheet .qfoot{
  position:sticky; bottom:0; z-index:2; margin:4px -4px 0; padding:14px 4px 4px;
  background:linear-gradient(180deg, rgba(9,13,21,0), rgba(9,13,21,.97) 26%);
}

body.scan-full .scan-exit{
  display:flex; position:absolute; z-index:6;
  top:calc(10px + env(safe-area-inset-top)); right:12px;
  width:38px; height:38px; border-radius:50%;
  align-items:center; justify-content:center;
  background:rgba(4,6,10,.72); border:1px solid var(--line-2); color:var(--text);
  font-size:16px; backdrop-filter:blur(6px);
}
body.scan-full #toastHost{bottom:calc(88px + env(safe-area-inset-bottom));}

/* ---------- foils ---------- */
.card-tile.is-foil{border-color:rgba(160,200,255,.32);}
.foil-sheen{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.5;
  background:linear-gradient(115deg,
    transparent 18%, rgba(255,120,190,.38) 30%, rgba(120,220,255,.40) 42%,
    rgba(150,255,190,.34) 52%, rgba(255,225,120,.34) 62%, transparent 76%);
}
.foil-badge{
  position:absolute; top:7px; left:7px; z-index:3;
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,12,20,.78); border:1px solid rgba(160,200,255,.45);
  color:#9fd4ff; backdrop-filter:blur(4px);
}
.foil-badge svg{width:13px; height:13px; display:block;}
.price .foil-mark{color:#9fd4ff;}

/* ---------- card detail ---------- */
.detail-art{position:relative; border-radius:var(--r2); overflow:hidden;}
.detail-art img{width:100%; display:block; border-radius:var(--r2); border:1px solid var(--line-2);}
.detail-art.is-foil{box-shadow:0 0 0 1px rgba(160,200,255,.35), 0 8px 26px rgba(80,140,220,.22);}
.detail-manage{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r2);
  padding:12px 14px; margin-bottom:14px;
}
.dm-title{
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-label); margin-bottom:9px;
}
.dm-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.printings{margin-top:4px;}
.print-list{display:flex; flex-direction:column; gap:1px; max-height:300px; overflow-y:auto; border-radius:var(--r1);}
.print-row{display:flex; align-items:center; gap:11px; padding:8px 10px; background:var(--bg-2); font-size:13px;}
.print-row:hover{background:var(--surface-2);}
.print-row.on{background:var(--accent-soft); border-left:2px solid var(--accent);}
.print-row img{width:46px; height:64px; object-fit:cover; border-radius:5px; flex:0 0 46px; background:var(--surface-3);}
.pr-text{flex:1 1 0; min-width:0; overflow:hidden;}
/* The set name is the first thing to truncate — the price and the add button
   must never be pushed off the row. */
.pr-set{font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.pr-sub{font-size:10.5px; color:var(--text-faint); text-transform:capitalize;}
.pr-sub .badge{margin-left:8px; font-size:9px; padding:1px 6px; vertical-align:1px;}
.pr-price{font-size:12px; font-variant-numeric:tabular-nums; color:var(--text-dim); white-space:nowrap; flex:0 0 auto;}