/* ============================================================
   08-filters.css
   Filters behind an icon on phones, where the screen cannot spare a panel.
   ------------------------------------------------------------
   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.
   ============================================================ */
/* ============================================================
   FILTERS BEHIND AN ICON ON PHONES
   Desktop keeps the filters in view; a phone screen cannot spare
   the space, so they collapse behind a funnel button.
   ============================================================ */
.filter-btn{display:none;}
.mobile-filter-row{display:none;}

.filter-btn{
  position:relative; width:40px; height:40px; flex:0 0 40px;
  border-radius:var(--r1); border:1px solid var(--line-2); background:var(--surface);
  color:var(--text-dim); align-items:center; justify-content:center;
}
.filter-btn svg{width:18px;height:18px;display:block;}
.filter-btn.wide{width:auto; flex:1; gap:9px; padding:0 15px; height:42px;}
.filter-btn:hover{color:var(--accent-hi); border-color:var(--line-3);}
.filter-btn.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.fb-dot{
  display:none; position:absolute; top:6px; right:7px;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  border:2px solid var(--surface);
}
.filter-btn.has-filters .fb-dot{display:block;}
.filter-btn.on .fb-dot{background:var(--on-accent); border-color:var(--accent);}

@media(max-width:960px){
  .filter-btn{display:flex;}
  .mobile-filter-row{display:flex; margin-bottom:14px;}

  /* hidden by default, revealed as a sheet when the funnel is tapped */
  .filter-group{display:none !important;}
  body.filters-open .filter-group{display:flex !important;}
  #searchFilters{display:none;}
  body.filters-open #searchFilters{display:block;}

  body.filters-open .filter-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:78;
    max-height:78vh; overflow-y:auto;
    background:var(--surface); border-top:1px solid var(--line-2);
    border-radius:var(--r3) var(--r3) 0 0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -14px 40px rgba(0,0,0,.6);
  }
  .filter-backdrop{
    position:fixed; inset:0; z-index:77; background:rgba(4,6,10,.6);
  }
  .sheet-head{
    display:flex; align-items:center; gap:10px; margin-bottom:14px;
    padding-bottom:12px; border-bottom:1px solid var(--line);
  }
  .sheet-head h3{
    flex:1; font-family:'Barlow Condensed',sans-serif; font-size:19px;
    text-transform:uppercase; letter-spacing:.06em;
  }
  .sheet-foot{display:flex; gap:9px; margin-top:16px;}
  .sheet-foot .btn{flex:1;}
}

/* The collection's filter panel — the search's filters for the cards you own.
   On a wide screen it folds open under the toolbar from the funnel, which is
   shown there too; on a phone it rides in the filter sheet with the pips and
   the sort bar. */
#collFilterBtn{display:flex;}
.coll-filters{display:none; margin:0 0 18px;}
.coll-filters.open{display:block;}
.cf-note{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--text-dim);}
.cf-note:empty{display:none;}
@media(max-width:960px){
  .coll-filters:not(.in-sheet){display:none !important;}
  .coll-filters.in-sheet{display:block; margin:14px 0;}
}

/* ---------- scanner HUD ----------
   Laid out like the reference app: one rounded pill holding the icon stack at
   the top right, and a single option bar at the bottom. No status banner —
   messages about framing were shouting at the user during every sweep. */
.scan-hud{display:none;}
body.scan-full .scan-hud{
  display:flex; position:absolute; z-index:6;
  top:calc(10px + env(safe-area-inset-top)); right:12px;
  justify-content:flex-end; pointer-events:none;
}
body.scan-full .scan-hud > *{pointer-events:auto;}
.hud-stack{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(10,14,22,.62); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:28px; padding:6px;
}
.hud-btn{
  position:relative; width:44px; height:44px; border-radius:50%;
  background:transparent; border:none; color:var(--text);
  display:flex; align-items:center; justify-content:center;
}
.hud-btn svg{width:21px; height:21px; display:block;}
.hud-btn:active{transform:scale(.92);}
.hud-btn.on{background:var(--accent); color:var(--on-accent);}
.hud-count{
  position:absolute; bottom:4px; right:2px; min-width:18px; height:18px;
  border-radius:20px; background:var(--accent); color:var(--on-accent);
  font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
  padding:0 5px; border:2px solid #0a0e16;
}

/* bottom option bar: condition, language, quantity */
.scan-optbar{display:none;}
body.scan-full .scan-optbar{
  display:flex; position:absolute; z-index:6;
  left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom));
  align-items:stretch; gap:0;
  background:rgba(10,14,22,.62); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:26px; padding:4px;
  max-width:calc(100vw - 32px);
}
.scan-optbar .opt{
  background:transparent; border:none; color:var(--text);
  padding:9px 20px; border-radius:22px; font-size:13.5px; font-weight:600;
  white-space:nowrap;
}
.scan-optbar .opt:active{background:rgba(255,255,255,.08);}
.scan-optbar .opt .ov{color:var(--text);}
.opt-sep{width:1px; background:var(--line-2); margin:7px 0;}
body.scan-full #ocrOut{display:none;}

/* the last scanned card, above the option bar: picture, set symbol, name,
   price — tap to edit it. Hidden while the sheet is up. */
.scan-last{display:none;}
body.scan-full .scan-last:not([hidden]){
  display:flex; position:absolute; z-index:6;
  left:12px; right:12px; margin:0 auto; max-width:520px;
  bottom:calc(74px + env(safe-area-inset-bottom));
  align-items:center; gap:12px; padding:8px 8px 8px 8px;
  background:rgba(10,14,22,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-2); border-radius:18px;
  color:var(--text); font:inherit; text-align:left; cursor:pointer;
}
body.scan-full.sheet-open .scan-last{display:none;}
.scan-last:active{background:rgba(22,30,44,.82);}
.scan-last.pop{animation:sl-pop .35s ease;}
@keyframes sl-pop{0%{transform:scale(.96); border-color:rgba(var(--accent-rgb),.8);} 100%{transform:none;}}
.sl-art{position:relative; flex:0 0 42px; width:42px; height:58px; border-radius:4px; overflow:hidden; background:var(--surface-3);}
.sl-art.is-foil{box-shadow:0 0 0 1px rgba(160,200,255,.4);}
.sl-art img{width:100%; height:100%; object-fit:cover; display:block;}
.sl-mid{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px;}
.sl-top{display:flex; align-items:center; gap:8px; min-width:0;}
.sl-set{width:18px; height:18px; flex:0 0 18px; filter:invert(88%);}
.sl-name{font-size:15.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.sl-sub{display:flex; align-items:baseline; gap:7px; min-width:0; overflow:hidden; white-space:nowrap;
  font-size:14.5px; font-variant-numeric:tabular-nums;}
.sl-feed{font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent);}
.sl-qty{font-weight:700; color:var(--text-dim);}
.sl-noprice{color:var(--text-faint); font-size:13px;}
.sl-loading{display:inline-flex; align-items:center; gap:6px;}
.sl-loading .spinner{width:11px; height:11px; border-width:1.5px;}
.sl-check{font-size:11.5px; font-weight:600; color:var(--warn); background:rgba(var(--warn-rgb),.14);
  padding:2px 7px; border-radius:20px; align-self:center;}
.sl-chev{flex:0 0 auto; color:var(--text-dim); display:flex; padding-right:2px;}
.sl-chev svg{width:18px; height:18px; display:block;}

/* ---------- settings sections ---------- */
.settings-nav{
  display:flex; gap:7px; flex-wrap:wrap; margin-bottom:24px;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}

/* ---------- a card is its own button ---------- */
.card-tile.clickable{cursor:pointer;}
.card-tile.clickable:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 10px 26px rgba(0,0,0,.5);
}
.card-tile.clickable:focus-visible{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent);
}
/* the action buttons sit above the tile's own click target */
.card-tile .tile-actions, .card-tile .pick-btn{z-index:4;}

/* every dialog carries its own way out */
.modal{position:relative;}
.modal-x{
  position:absolute; top:12px; right:12px; z-index:3;
  width:34px; height:34px; border-radius:50%;
  background:var(--surface-3); border:1px solid var(--line-2); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1;
}
.modal-x:hover{color:var(--text); border-color:var(--line-3);}
.modal > h3{padding-right:44px;}
@media(max-width:960px){
  .modal-x{width:38px; height:38px; top:14px; right:14px;}
}

/* Swipe affordance on a phone: a cropped sliver of the neighbouring cards at
   both screen edges, plus the position in the list. Desktop keeps the chevrons
   below, which say the same thing with a mouse. */
.detail-figure{flex:0 0 230px;}
.detail-peek, .detail-pos{display:none;}

/* The figure is the swipe surface. pan-y hands the vertical axis to the
   browser's own scrolling and keeps the horizontal one for the gesture, so the
   two never compete for the same drag — that competition was the wobble.
   Reserving the transform on its own layer keeps the drag off the main thread. */
.detail-figure{
  touch-action:pan-y;
  will-change:transform;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.detail-figure img{-webkit-user-drag:none; user-drag:none; pointer-events:none;}
/* While a finger is down the card tracks it exactly; no easing in the way. */
.detail-figure.is-swiping{transition:none !important; cursor:grabbing;}
@media(prefers-reduced-motion:reduce){
  .detail-figure{transition:none !important;}
}
@media(max-width:960px){
  /* full width, so the slivers below can sit at the sheet's edges rather than
     on top of the card itself */
  .detail-figure{flex:1 1 auto; width:100%;}
  .detail .has-peek{position:relative; padding-bottom:4px;}
  .detail-peek{
    display:block; position:absolute; top:46%; transform:translateY(-50%);
    width:44px; height:98px; padding:0; border:none; background:none;
    overflow:hidden; border-radius:var(--r1); opacity:.5; z-index:2;
  }
  .detail-peek:active{opacity:.85;}
  .detail-peek img{width:100%; height:100%; object-fit:cover; display:block;}
  .detail-peek.prev{left:-18px;}
  .detail-peek.prev img{object-position:right center;}
  .detail-peek.next{right:-18px;}
  .detail-peek.next img{object-position:left center;}
  .detail-pos{
    display:block; text-align:center; margin-top:9px;
    font-size:11px; letter-spacing:.09em; color:var(--text-faint);
    font-variant-numeric:tabular-nums;
  }
}

/* step to the next/previous card without closing the detail modal */
.detail-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%;
  background:var(--surface-3); border:1px solid var(--line-2); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1;
}
.detail-nav:hover{color:var(--text); border-color:var(--line-3);}
.detail-nav.prev{left:-19px;}
.detail-nav.next{right:-19px;}
@media(max-width:960px){
  /* the sheet runs edge to edge on a phone, and touch already has the swipe */
  .detail-nav{display:none;}
}