/* CARDBX — palette pulled off a 1970s card back:
   pale green stock, dark ink, one red accent. */
:root{
  --ink:#16211A;
  --ink-2:#3D4C42;
  --stock:#E3E7DA;
  --paper:#F8F9F3;
  --line:#C2CBB4;
  --red:#BE3227;
  --red-dk:#8C2119;
  --amber:#B5822C;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
/* An ID or class selector that sets `display` will otherwise beat the browser's
   built-in [hidden] rule, leaving "hidden" elements visible. This guarantees it. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--stock);
  color:var(--ink);
  font:400 16px/1.45 "Barlow", system-ui, -apple-system, sans-serif;
  padding-bottom:48px;
}
a{color:var(--ink)}
h1,h2,h3,.cond{font-family:"Barlow Condensed", "Barlow", sans-serif;text-transform:uppercase;letter-spacing:.045em;margin:0}
main{max-width:720px;margin:0 auto;padding:14px 14px 0}

/* ---------- top bar ---------- */
.bar{
  position:sticky;top:0;z-index:20;
  background:var(--ink);color:var(--paper);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0)*0);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;
  letter-spacing:.14em;color:var(--paper);text-decoration:none;
  display:flex;align-items:center;gap:8px;
}
.pip{width:11px;height:11px;background:var(--red);display:inline-block}
.bar nav{display:flex;gap:4px}
.bar nav a{
  color:#B9C4BB;text-decoration:none;font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;letter-spacing:.08em;font-size:15px;
  padding:8px 9px;border-radius:3px;min-height:38px;display:flex;align-items:center;
}
.bar nav a.on{color:var(--paper);background:rgba(255,255,255,.12)}

/* ---------- search ---------- */
.hunt{margin:4px 0 18px}
.hunt label{display:block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:14px;color:var(--ink-2);margin-bottom:6px}
.hunt-row{display:flex;gap:8px}
/* Style by exclusion, not by enumeration. Listing types individually meant
   password fields were silently missed and fell back to browser defaults —
   and it would have happened again with email, tel, url... */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]),
select,
textarea{
  width:100%;font:500 17px/1.2 "Barlow",sans-serif;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);border-radius:3px;
  padding:13px 12px;min-height:50px;   /* 17px+ stops iOS zoom-on-focus */
}
textarea{min-height:80px;font-weight:400}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 22px,calc(100% - 12px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
:focus-visible{outline:3px solid var(--amber);outline-offset:1px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 18px;border:2px solid var(--ink);border-radius:3px;
  background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;
  text-transform:uppercase;letter-spacing:.08em;
}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);border-color:var(--red)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-sm{min-height:40px;font-size:15px;padding:0 12px}
.btn-full{width:100%}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ---------- result rows ---------- */
.hit{
  display:flex;align-items:stretch;gap:0;background:var(--paper);
  border:1.5px solid var(--line);border-radius:3px;margin-bottom:9px;
  text-decoration:none;overflow:hidden;
}
.hit-num{
  flex:0 0 54px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;
  letter-spacing:.02em;padding:6px 3px;line-height:1.1;
  overflow-wrap:anywhere;   /* break-all split "CPAESS" into "CPAES / S" */
}
/* Long insert numbers (SMLBC-13, CPAESS) need to shrink rather than wrap badly */
.hit-num.long{font-size:12.5px;letter-spacing:0}

/* Thumbnail column, sitting between the number and the name.
   aspect-ratio keeps it card-shaped whatever the row height. */
.hit-pic{
  flex:0 0 52px;
  display:flex;align-items:center;justify-content:center;
  padding:8px 0 8px 8px;
}
.hit-pic img,
.hit-pic .nopic{
  width:100%;aspect-ratio:5/7;display:block;border-radius:2px;
}
.hit-pic img{object-fit:cover;border:1px solid var(--line);background:#fff}
.hit-pic .nopic{
  border:1px dashed var(--line);background:var(--stock);opacity:.55;
}
.hit-body{padding:11px 12px;flex:1;min-width:0}
.hit-name{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:21px;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.hit-set{font-size:14px;color:var(--ink-2);margin-top:2px}
.hit-tags{margin-top:7px;display:flex;gap:5px;flex-wrap:wrap}

/* the answer you actually need at a show */
.stamp{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.12em;padding:4px 8px;border-radius:2px;
  border:1.5px dashed var(--red);color:var(--red);white-space:nowrap;
}
.stamp.own{border-style:solid;background:var(--red);color:var(--paper);border-color:var(--red)}
.stamp.none{border-color:var(--line);color:var(--ink-2)}
.tag{
  font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 7px;border:1px solid var(--line);
  border-radius:2px;color:var(--ink-2);background:#fff;white-space:nowrap;
}
.tag.rc{border-color:var(--amber);color:var(--amber);font-weight:700}

/* ---------- panels ---------- */
.panel{background:var(--paper);border:1.5px solid var(--line);border-radius:3px;padding:14px;margin-bottom:14px}
.panel h2{font-size:16px;color:var(--ink-2);margin-bottom:10px}
.rule{height:0;border-top:1.5px dashed var(--line);margin:12px 0}

/* card header on detail page */
.sheet{background:var(--ink);color:var(--paper);border-radius:3px;padding:16px;margin-bottom:14px}
.sheet .yr{font-family:"Barlow Condensed",sans-serif;letter-spacing:.14em;font-size:14px;color:#9FB0A3;text-transform:uppercase}
.sheet h1{font-size:30px;line-height:1;margin:4px 0 6px}
.sheet .sub{font-size:15px;color:#C6D0C8}

/* ---------- the comp query strip (the whole point) ---------- */
.tabs{display:flex;gap:0;margin-bottom:10px;border:2px solid var(--ink);border-radius:3px;overflow:hidden}
.tabs button{
  flex:1;min-height:44px;border:0;background:var(--paper);color:var(--ink);cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.07em;border-right:2px solid var(--ink);
}
.tabs button:last-child{border-right:0}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}

.qbox{
  background:#fff;border:1.5px dashed var(--line);border-radius:3px;
  padding:12px;font-family:var(--mono);font-size:13px;line-height:1.5;
  word-break:break-word;user-select:all;
}
.qhint{font-size:13px;color:var(--ink-2);margin-top:8px}

/* ---------- copies list ---------- */
.copy{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:11px 0;border-top:1.5px dashed var(--line)}
.copy:first-of-type{border-top:0}
.copy-grade{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.04em}
.copy-meta{font-size:13.5px;color:var(--ink-2);margin-top:3px}
.copy-loc{display:inline-block;background:var(--stock);border:1px solid var(--line);
  border-radius:2px;padding:2px 6px;font-size:12.5px;margin-top:5px}

/* ---------- forms ---------- */
.field{margin-bottom:13px}
.field label{display:block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.09em;font-size:14px;color:var(--ink-2);margin-bottom:5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.checks{display:flex;gap:8px;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:7px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:3px;padding:11px 12px;min-height:46px;cursor:pointer;font-size:15px}
.check input{width:20px;height:20px;accent-color:var(--red);margin:0}

.note{font-size:13.5px;color:var(--ink-2);margin-top:5px}
.empty{text-align:center;padding:34px 16px;color:var(--ink-2)}
.empty p{margin:0 0 14px}
.flash{background:var(--ink);color:var(--paper);padding:11px 13px;border-radius:3px;margin-bottom:14px;font-size:15px}
.err{background:var(--red);color:#fff;padding:11px 13px;border-radius:3px;margin-bottom:14px;font-size:15px}

/* ---------- toast ---------- */
/* Don't rely on the transform distance to hide this: a percentage translate is
   relative to the toast's own height, and an EMPTY toast is short enough that
   120% leaves a sliver poking above the bottom edge. visibility guarantees it's
   gone, and pointer-events stops it swallowing taps at the bottom of the screen. */
.toast{
  position:fixed;left:50%;bottom:22px;
  transform:translate(-50%,140%);
  opacity:0;visibility:hidden;pointer-events:none;
  background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:3px;
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.09em;
  font-size:15px;z-index:50;box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .22s ease, opacity .22s ease, visibility 0s linear .22s;
}
.toast.show{
  transform:translate(-50%,0);
  opacity:1;visibility:visible;
  transition:transform .22s ease, opacity .22s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

@media (min-width:600px){
  main{padding-top:20px}
  .sheet h1{font-size:38px}
  .hit-num{flex-basis:62px}
  .hit-pic{flex-basis:62px;padding:9px 0 9px 9px}
}

/* ---------- multi-user ---------- */
.bar nav a.who{
  background:rgba(255,255,255,.14);color:var(--paper);
  border-radius:999px;padding:7px 12px;max-width:110px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tag.group{border-color:var(--ink-2);color:var(--ink-2);background:var(--stock)}
.stamp{background:#fff}
details summary::-webkit-details-marker{color:var(--ink-2)}

/* ---------- photos ---------- */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.shot{
  position:relative;aspect-ratio:5/7;                 /* card proportions */
  background:var(--stock);border:1.5px solid var(--line);border-radius:3px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.shot.empty{border-style:dashed}
.shot [data-slot-img]{position:absolute;inset:0}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .lab{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:rgba(22,33,26,.82);color:var(--paper);
  font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;padding:5px 7px;text-align:center;
}
.shot .pick{
  position:absolute;inset:0;z-index:3;opacity:0;cursor:pointer;
  width:100%;height:100%;
}
/* Once there's a photo, the input must stop covering the tile — otherwise every
   tap opens the file picker and the photo can never be enlarged. Collapse it to
   nothing and let the Replace label trigger it instead. */
.shot:not(.empty) .pick{
  inset:auto;top:0;left:0;width:1px;height:1px;
  pointer-events:none;z-index:0;
}
.shot .rep{
  position:absolute;top:5px;left:5px;z-index:4;
  background:var(--ink);color:var(--paper);border-radius:2px;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;padding:6px 8px;min-height:30px;
  display:flex;align-items:center;
}
.shot.empty .rep,
.shot.empty .view{display:none}
.shot.empty .lab{background:transparent;color:var(--ink-2);bottom:auto;top:50%;transform:translateY(-50%)}
.shot .rm{
  position:absolute;top:5px;right:5px;z-index:4;
  background:var(--red);color:#fff;border:0;border-radius:2px;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;padding:6px 8px;min-height:30px;
}
.shot.busy{opacity:.55}
.shot .view{position:absolute;inset:0;z-index:2;cursor:zoom-in}
.shot.empty .view{cursor:default}

/* read-only view of someone else's photos */
.shots-ro{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.shots-ro a{
  width:74px;aspect-ratio:5/7;border:1.5px solid var(--line);border-radius:3px;
  overflow:hidden;display:block;cursor:zoom-in;
}
.shots-ro img{width:100%;height:100%;object-fit:cover;display:block}

#lightbox[hidden]{display:none}
#lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(10,16,12,.94);
  display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out;
}
#lightbox img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:3px}
#lightbox .lb-close{
  position:absolute;top:14px;right:14px;background:var(--paper);color:var(--ink);
  border:0;border-radius:3px;padding:11px 15px;min-height:44px;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.08em;
}


/* ---------- SportsCardsPro ---------- */
#scp-results{margin-top:10px}
.scp-hit{
  background:#fff;border:1.5px solid var(--line);border-radius:3px;
  padding:11px 12px;margin-bottom:7px;cursor:pointer;
}
.scp-hit:active{background:var(--stock)}
.scp-name{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18px;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.1}
.scp-set{font-size:13.5px;color:var(--ink-2);margin-top:2px}
.scp-have{font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);margin-top:5px}

/* price ladder */
.ladder{width:100%;border-collapse:collapse}
.ladder th,.ladder td{padding:9px 0;border-top:1.5px dashed var(--line);text-align:left;vertical-align:baseline}
.ladder tr:first-child th,.ladder tr:first-child td{border-top:0}
.ladder th{
  font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:15px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);
}
.ladder .val{
  text-align:right;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:19px;letter-spacing:.02em;white-space:nowrap;
}
.ladder .chg{text-align:right;width:56px;font-size:13px;white-space:nowrap;padding-left:8px}
.ladder tr.owned th,.ladder tr.owned .val{color:var(--red)}
.ladder tr.owned th .tag{border-color:var(--red);color:var(--red);margin-left:6px}
.up{color:#2E6B3E}
.down{color:var(--red)}

/* per-copy comp search */
.btn-comp{
  margin-top:9px;background:var(--paper);color:var(--ink);
  border:1.5px solid var(--ink);font-size:14px;min-height:42px;
}
.copy{align-items:flex-start}
.copy > div:first-child{min-width:0;flex:1}

/* ---------- list row with a comps button ----------
   A link can't nest inside a link, so the row is a container: .hit-link takes
   the card, .hit-comp takes eBay. Both stay full-height tap targets. */
.hit-link{
  display:flex;align-items:stretch;flex:1;min-width:0;
  text-decoration:none;color:inherit;
}
.hit-comp{
  flex:0 0 62px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
  background:var(--stock);border-left:1.5px dashed var(--line);
  text-decoration:none;color:var(--ink);text-align:center;padding:6px 4px;
  font-family:"Barlow Condensed",sans-serif;
}
.hit-comp span{
  font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--red);line-height:1;
}
.hit-comp small{
  font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);line-height:1.1;overflow-wrap:anywhere;
}
.hit-comp:active{background:#fff}
@media (min-width:600px){ .hit-comp{flex-basis:74px} }

/* ---------- slab scanner ---------- */
#psa-cam{margin-top:10px}
#psa-video{
  width:100%;max-height:260px;object-fit:cover;background:#000;
  border:1.5px solid var(--ink);border-radius:3px;display:block;margin-bottom:8px;
}
#psa-results{margin-top:10px}

/* ---------- barcode camera ---------- */
.cam-wrap{position:relative;margin-bottom:8px}
.cam-wrap video{
  width:100%;max-height:300px;object-fit:cover;background:#000;
  border:1.5px solid var(--ink);border-radius:3px;display:block;
}
/* Aiming box: hold the label's barcode inside it */
.cam-guide{
  position:absolute;left:12%;right:12%;top:34%;height:32%;
  border:2px solid var(--red);border-radius:3px;pointer-events:none;
  box-shadow:0 0 0 2000px rgba(10,16,12,.35);
}
#psa-status{margin:0 0 10px}
#psa-status.found{color:#2E6B3E;font-weight:600}
#psa-status.miss{color:var(--red)}