/* Binder — mobile card scanner. Dark, one-thumb, 375px first. */

:root{
  --bg:#0e1017; --bg-2:#151824; --bg-3:#1d2130; --line:#2a3044;
  --ink:#eef1f8; --ink-2:#a4adc4; --ink-3:#6f7a95;
  --accent:#5b8cff; --accent-ink:#fff;
  --green:#2fbf71; --green-bg:#10301f; --green-line:#1f6b42;
  --amber:#f0a836; --amber-bg:#33260c; --amber-line:#8a6318;
  --grey:#59627c; --grey-bg:#1a1e2b;
  --red:#f2555a;
  --r:14px; --r-sm:9px;
  --tap:48px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box}
/* Our own display rules outrank the UA's [hidden] by source order, so say it
   once, loudly, for everything this app toggles. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3,p{margin:0}
button,input,label{font:inherit}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.dim{color:var(--ink-3)}
.center{text-align:center}
.micro{font-size:13px;line-height:1.4;color:var(--ink-2)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* focus — always visible, never colour-only */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ─── layout ─── */
#app{display:flex;flex-direction:column;height:100dvh}
#app[inert]{opacity:.5}
.startup-status{
  position:fixed;z-index:100;left:16px;right:16px;bottom:calc(var(--safe-b) + 84px);
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
}
.screen{display:flex;flex-direction:column;flex:1;min-height:0}
.screen[hidden]{display:none}
.topbar{
  padding:calc(var(--safe-t) + 12px) 16px 10px;
  display:flex;align-items:baseline;gap:10px;
  border-bottom:1px solid var(--line);background:var(--bg);
}
.topbar h1{font-size:20px;font-weight:650;letter-spacing:-.01em}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 26px}

/* ─── buttons ─── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:12px 18px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-3);color:var(--ink);
  font-weight:560;text-align:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .08s,filter .12s;
}
.btn:active{transform:scale(.985);filter:brightness(1.18)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-huge{min-height:76px;font-size:18px;font-weight:640;border-radius:18px}
.btn-huge .ico{width:26px;height:26px}
.btn-ghost{background:var(--bg-2)}
.btn-amber{background:var(--amber);border-color:var(--amber);color:#231704;font-weight:650}
.btn-danger{background:transparent;border-color:var(--red);color:var(--red)}
.btn-sm{min-height:40px;padding:8px 14px;font-size:14px;white-space:nowrap}
.btn-wide{width:100%;margin-top:14px}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon-btn{
  min-width:40px;min-height:40px;border:0;border-radius:50%;
  background:var(--bg-3);color:var(--ink-2);font-size:16px;cursor:pointer;
}

/* ─── capture ─── */
.capture-card{display:flex;flex-direction:column;gap:10px}
.meta-details{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);padding:2px 14px}
.meta-details summary{
  min-height:var(--tap);display:flex;align-items:center;gap:8px;
  font-size:14px;color:var(--ink-2);cursor:pointer;list-style:none;
}
.meta-details summary::-webkit-details-marker{display:none}
.meta-details summary::after{content:"⌄";margin-left:auto;font-size:16px}
.meta-details[open] summary::after{content:"⌃"}
.hint{color:var(--accent);font-family:ui-monospace,monospace;font-size:12px}
.field-row{display:flex;gap:10px;padding-bottom:6px}
.field{flex:1}
.field label{display:block;font-size:12px;color:var(--ink-3);margin-bottom:4px}
.field input,.search-row input{
  width:100%;min-height:var(--tap);padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);color:var(--ink);
  font-size:16px; /* ≥16px or iOS zooms on focus */
}
.badge{
  font-size:11px;font-weight:640;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;background:var(--amber-bg);
  color:var(--amber);border:1px solid var(--amber-line);
}

/* ─── progress ─── */
.progress-card,.err-card,.panel{
  margin-top:14px;padding:14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg-2);
}
.err-card{border-color:var(--red);color:#ffc9cb;background:#2a1114;font-size:14px}
.prog-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;font-weight:560}
.bar{height:8px;border-radius:8px;background:var(--bg-3);overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:8px;transition:width .18s ease-out}
.bar-fill.indet{
  width:38% !important;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:sweep 1.15s ease-in-out infinite;
}
@keyframes sweep{0%{margin-left:-38%}100%{margin-left:100%}}
.progress-card .micro{margin-top:8px}
.progress-card .btn{margin-top:10px}

/* ─── result grid ─── */
.result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin:18px 0 10px}
.result-head h2{font-size:17px;font-weight:640}
.tally{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.tally span{
  font-size:12.5px;font-weight:560;padding:4px 9px;border-radius:20px;
  border:1px solid var(--line);background:var(--bg-2);color:var(--ink-2);
}
.tally .t-green{color:var(--green);border-color:var(--green-line);background:var(--green-bg)}
.tally .t-amber{color:var(--amber);border-color:var(--amber-line);background:var(--amber-bg)}

/* a page the server had to stretch: why some pockets are waiting on the owner */
.note-dark{
  font-size:12.5px;line-height:1.45;margin-bottom:12px;padding:8px 10px;
  border:1px solid var(--amber-line);border-radius:var(--r-sm);
  background:var(--amber-bg);color:var(--amber);
}

.page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cell{
  position:relative;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg-2);overflow:hidden;text-align:left;
  padding:0;color:inherit;cursor:pointer;
  display:flex;flex-direction:column;
  -webkit-tap-highlight-color:transparent;
}
.cell:active{filter:brightness(1.2)}
.cell.s-added{border-color:var(--green-line)}
.cell.s-question{border-color:var(--amber-line)}
.cell.s-empty{border-color:var(--line);opacity:.62}
.cell.s-unreadable{border-color:var(--amber-line)}
.cell.s-dropped{opacity:.4}
.cell-img{position:relative;width:100%;aspect-ratio:.72;background:var(--bg-3);overflow:hidden}
.cell-img img{width:100%;height:100%;object-fit:cover;display:block}
.cell-img .ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:11px;text-align:center;padding:6px;
}
.cell-scan{
  position:absolute;right:3px;bottom:3px;width:34%;
  border-radius:3px;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 2px 7px rgba(0,0,0,.6);background:var(--bg-3);
}
.cell-flag{
  position:absolute;top:4px;left:4px;
  display:flex;align-items:center;gap:3px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:2.5px 6px;border-radius:20px;
  background:rgba(6,8,14,.82);backdrop-filter:blur(3px);
}
.f-added{color:var(--green)} .f-question{color:var(--amber)} .f-empty{color:var(--ink-2)}
.f-unreadable{color:var(--amber)}

/* Device engine: a pocket that has been cut and is still being worked on. The
   pulse is the only moving thing on the grid, so "not finished yet" reads
   without a word. */
.cell.s-working{border-color:var(--accent);animation:cell-work 1.4s ease-in-out infinite}
.f-working{color:var(--accent)}
.tally .t-work{color:var(--accent);border-color:var(--accent);background:rgba(91,140,255,.12)}
@keyframes cell-work{0%,100%{opacity:1}50%{opacity:.68}}
@media (prefers-reduced-motion:reduce){
  .cell.s-working{animation:none}
  .bar-fill.indet{animation:none}
}
.badge-engine{
  background:rgba(91,140,255,.14);color:var(--accent);border-color:var(--accent);
}
.cell-body{padding:6px 7px 8px}
.cell-name{font-size:12.5px;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cell-set{font-size:10.5px;color:var(--ink-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-p{font-size:10px;color:var(--ink-3);font-family:ui-monospace,monospace;margin-top:1px}

/* ─── collection ─── */
.portfolio{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);padding:14px;margin-bottom:12px}
.pf-row{display:flex;gap:8px}
.pf-stat{flex:1;text-align:center}
.pf-n{display:block;font-size:24px;font-weight:680;letter-spacing:-.02em}
.pf-l{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.pf-value{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
.pf-coming{
  font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px;
  background:var(--bg-3);color:var(--ink-2);border:1px dashed var(--ink-3);
}
.search-row{margin-bottom:10px}
.chips{display:flex;gap:7px;margin-bottom:14px}
.chip{
  min-height:36px;padding:6px 13px;border-radius:20px;
  border:1px solid var(--line);background:var(--bg-2);color:var(--ink-2);
  font-size:13.5px;cursor:pointer;
}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:560}

.set-group{margin-bottom:20px}
.set-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.set-name{font-size:14.5px;font-weight:620}
.set-count{font-size:12px;color:var(--ink-3);font-family:ui-monospace,monospace;flex:none}
.set-bar{height:3px;background:var(--bg-3);border-radius:3px;margin-bottom:9px;overflow:hidden}
.set-bar i{display:block;height:100%;background:var(--accent);border-radius:3px}

.row{
  display:flex;gap:11px;align-items:center;width:100%;
  padding:8px;margin-bottom:6px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg-2);color:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;min-height:var(--tap);
}
.row:active{filter:brightness(1.2)}
.row-img{width:42px;height:58px;flex:none;border-radius:4px;object-fit:cover;background:var(--bg-3)}
.row-ph{width:42px;height:58px;flex:none;border-radius:4px;background:var(--bg-3);
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:9px}
.row-main{flex:1;min-width:0}
.row-name{font-size:14.5px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-sub{font-size:12px;color:var(--ink-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-qty{
  flex:none;min-width:34px;text-align:center;font-weight:660;font-size:15px;
  padding:5px 8px;border-radius:8px;background:var(--bg-3);
}
.tag-unconf{
  display:inline-flex;align-items:center;gap:3px;margin-top:3px;
  font-size:10.5px;font-weight:640;padding:1.5px 6px;border-radius:20px;
  background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-line);
}
.empty-state{text-align:center;padding:44px 20px;color:var(--ink-3)}
.empty-state .big{font-size:17px;color:var(--ink-2);margin-bottom:6px}

/* ─── tab bar ─── */
.tabbar{
  display:flex;border-top:1px solid var(--line);background:var(--bg-2);
  padding-bottom:var(--safe-b);flex:none;
}
.tab{
  flex:1;min-height:56px;padding:8px 4px;border:0;background:none;
  color:var(--ink-3);font-size:11px;font-weight:560;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  -webkit-tap-highlight-color:transparent;
}
.tab.is-on{color:var(--accent)}
.tab .ico{width:22px;height:22px}
.tab b{font-weight:660}

/* ─── sheets ─── */
.sheet-scrim{position:fixed;inset:0;background:rgba(4,6,11,.72);z-index:40;backdrop-filter:blur(2px)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  max-height:92dvh;background:var(--bg-2);
  border-top:1px solid var(--line);border-radius:20px 20px 0 0;
  display:flex;flex-direction:column;
  animation:rise .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-inner{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 16px calc(20px + var(--safe-b))}
.sheet-head{display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;background:var(--bg-2);padding:4px 0 10px;z-index:2}

/* resolve */
.rs-prompt{font-size:19px;font-weight:640;line-height:1.3;margin-bottom:4px;letter-spacing:-.01em}
.rs-why{font-size:13px;color:var(--ink-2);margin-bottom:12px}
/* The options are the point of this sheet, so the reference image is capped to
   keep them above the fold on a 375x812 phone. A real crop_url is a wide strip
   and lands well under this; the whole-card fallback is what needs the ceiling. */
.rs-crop{
  width:100%;max-height:190px;object-fit:contain;
  border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--bg-3);display:block;margin-bottom:6px;
}
.rs-croplabel{font-size:11.5px;color:var(--ink-3);text-align:center;margin-bottom:14px}
.rs-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.opt{
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--bg-3);
  padding:8px;cursor:pointer;color:inherit;text-align:center;
  display:flex;flex-direction:column;gap:7px;
  -webkit-tap-highlight-color:transparent;
}
.opt:active{border-color:var(--accent);filter:brightness(1.2)}
.opt-crop{width:100%;border-radius:5px;background:var(--bg);border:1px solid var(--line);
  aspect-ratio:2.6;object-fit:cover;object-position:center}
.opt-scan{width:100%;border-radius:6px;background:var(--bg);aspect-ratio:.72;object-fit:contain}
.opt-ph{width:100%;aspect-ratio:.72;border-radius:6px;background:var(--bg);
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:11px;padding:8px}
.opt-label{font-size:13px;font-weight:600;line-height:1.25}
.opt-sub{font-size:11px;color:var(--ink-3)}
.rs-actions{display:flex;gap:10px;margin-top:16px}
.rs-actions .btn{flex:1;font-size:14px}

/* The one plain sentence under the question. `why` is the operator's string and
   is carried as a tooltip, never as prose. */
.rs-because{font-size:13px;color:var(--ink-2);margin-bottom:12px}

/* A set's own mark, from the offline bundle: a 64x64 white-on-black mask, so it
   sits on the card background rather than in a frame of its own. */
/* The bundle's mask is a white glyph on a black square. `screen` against the
   app's dark ground drops the black and leaves the glyph. */
.opt-sym{width:100%;max-width:76px;margin:0 auto;display:block;
  aspect-ratio:1;object-fit:contain;mix-blend-mode:screen}
.opt-sym-ph{width:76px;height:76px;margin:0 auto;border-radius:8px;background:var(--bg);
  border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:11px}

/* Two answers about one detail, side by side and thumb-sized. */
.rs-twoup{grid-template-columns:1fr 1fr}
.opt-answer{justify-content:center;min-height:var(--tap);padding:12px 10px}

/* "Which set" is a list, not a grid: the name is settled, so there is nothing
   to compare pictures of. */
.rs-sets{grid-template-columns:1fr;gap:8px}
.opt-set{
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--bg-3);
  padding:8px 12px;cursor:pointer;color:inherit;text-align:left;
  display:flex;align-items:center;gap:12px;min-height:var(--tap);
  -webkit-tap-highlight-color:transparent;
}
.opt-set:active{border-color:var(--accent);filter:brightness(1.2)}
.opt-set .opt-sym,.opt-set .opt-sym-ph{width:38px;height:38px;max-width:38px;margin:0;flex:none}
.opt-set-main{min-width:0}

/* card detail */
.cd-top{display:flex;gap:14px;margin-bottom:14px}
.cd-img{width:112px;flex:none;border-radius:8px;background:var(--bg-3);aspect-ratio:.72;object-fit:contain}
.cd-name{font-size:20px;font-weight:660;line-height:1.2;letter-spacing:-.01em}
.cd-set{font-size:13.5px;color:var(--ink-2);margin-top:4px}
.cd-meta{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.6}
.qty-row{display:flex;align-items:center;gap:12px;margin:14px 0;
  padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3)}
.qty-row .lbl{flex:1;font-size:14px}
.qty-btn{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--ink);font-size:21px;font-weight:600;cursor:pointer}
.qty-val{min-width:34px;text-align:center;font-size:18px;font-weight:680}
.prov{border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.prov h3{font-size:13px;font-weight:640;color:var(--ink-2);margin-bottom:7px}
.prov-item{font-size:12px;color:var(--ink-3);line-height:1.6;
  padding:6px 0;border-bottom:1px solid var(--bg-3)}
.tcg-link{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--tap);border-radius:var(--r);margin-top:12px;
  border:1px solid var(--line);background:var(--bg-3);color:var(--ink);
  text-decoration:none;font-size:14px;font-weight:560;
}
.price-row{display:flex;justify-content:space-between;align-items:center;
  padding:11px;border:1px dashed var(--ink-3);border-radius:var(--r);margin-top:12px;font-size:14px}

/* ─── toast ─── */
.toast-wrap{position:fixed;left:12px;right:12px;bottom:calc(70px + var(--safe-b));z-index:60;
  display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-radius:var(--r);
  background:#252b3d;border:1px solid var(--line);
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  font-size:14px;pointer-events:auto;
  animation:pop .2s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast.out{opacity:0;transform:translateY(8px);transition:.2s}
.toast .t-txt{flex:1;min-width:0}
.toast .t-act{
  flex:none;padding:7px 12px;min-height:36px;border-radius:8px;
  border:1px solid var(--accent);background:transparent;color:var(--accent);
  font-size:13.5px;font-weight:620;cursor:pointer;
}

/* ─── a2hs ─── */
.a2hs{
  position:fixed;left:12px;right:12px;bottom:calc(70px + var(--safe-b));z-index:55;
  padding:13px;border-radius:var(--r);background:var(--bg-3);
  border:1px solid var(--accent);box-shadow:0 8px 26px rgba(0,0,0,.5);
}
.a2hs p{font-size:13.5px;margin-bottom:9px;line-height:1.45}

/* ─── backup nag ───
   One line, once per session that added cards. Sits where the install box sits,
   and never both at once: the gate runs before any card is added. */
.nag{
  position:fixed;left:12px;right:12px;bottom:calc(70px + var(--safe-b));z-index:56;
  padding:13px;border-radius:var(--r);background:var(--bg-3);
  border:1px solid var(--line);box-shadow:0 8px 26px rgba(0,0,0,.5);
}
.nag p{font-size:13.5px;line-height:1.45;margin-bottom:10px}
.nag-acts{display:flex;gap:8px}
.nag-acts .btn{flex:1}
/* The toast and the nag both live above the tab bar, and "Page done." landed on
   top of the nag's own buttons. The toast moves up while the nag is there. */
body.has-nag .toast-wrap{bottom:calc(196px + var(--safe-b))}

/* ─── install gate ───
   The first screen in Safari on iOS. It covers the app, tab bar included: a
   collection built in the tab does not follow the tester into the installed
   app, so scanning here is work that gets thrown away. */
.gate{
  position:fixed;inset:0;z-index:70;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--safe-t) + 24px) 22px calc(var(--safe-b) + 24px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
body.is-gated{overflow:hidden}
.gate-inner{max-width:420px;width:100%}
.gate-icon{width:64px;height:64px;border-radius:15px;display:block;margin-bottom:18px}
.gate h1{font-size:23px;font-weight:660;line-height:1.25;letter-spacing:-.015em;margin-bottom:12px}
.gate p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.gate-steps{margin:18px 0 12px;padding:0;list-style:none;counter-reset:step}
.gate-steps li{
  counter-increment:step;position:relative;padding:11px 12px 11px 44px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  font-size:14.5px;line-height:1.4;
}
.gate-steps li::before{
  content:counter(step);position:absolute;left:12px;top:11px;
  width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.ico-inline{width:16px;height:16px;vertical-align:-3px;fill:none;stroke:var(--ink);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.gate-skip{
  display:block;margin-top:22px;text-align:center;min-height:var(--tap);line-height:var(--tap);
  color:var(--ink-3);font-size:14px;text-decoration:underline;text-underline-offset:3px;
}

/* ─── set browse ───
   The catalogue is on the server and the collection is in this browser, so the
   owned counts are worked out here and the server never sees them. */
.set-row{
  width:100%;display:flex;align-items:center;gap:12px;margin-bottom:8px;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2);color:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.set-row:active{filter:brightness(1.2)}
.set-row.has-some{border-color:var(--green-line)}
.set-row-main{flex:1;min-width:0}
.set-sym{width:34px;height:34px;flex:none;object-fit:contain;mix-blend-mode:screen}
.set-sym-ph{width:34px;height:34px;flex:none;border-radius:8px;background:var(--bg-3)}
.set-have{font-size:12.5px;font-weight:640;color:var(--ink-3);font-variant-numeric:tabular-nums}
.set-have.is-on{color:var(--green)}
.set-row .set-bar{margin-top:6px}

.setp-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.setp-head .set-sym{width:48px;height:48px}
.setp-name{font-size:17px;font-weight:650;line-height:1.2}
.setp-count{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.setp-have{font-size:26px;font-weight:700;line-height:1}
.setp-list{margin-top:16px}
.setp-row{
  width:100%;display:flex;align-items:center;gap:10px;
  min-height:42px;padding:7px 10px;border:0;border-bottom:1px solid var(--line);
  background:none;color:var(--ink-3);text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.setp-row:active{background:var(--bg-2)}
.setp-row.is-owned{color:var(--ink)}
.setp-num{width:42px;flex:none;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.setp-tick{width:14px;flex:none;color:var(--green);font-weight:700;font-size:13px}
.setp-name-c{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setp-rarity{font-size:11.5px;color:var(--ink-3);flex:none}

.panel h2{font-size:15px;font-weight:640;margin-bottom:7px}
.panel .btn{margin-top:10px}
.panel.danger{border-color:#4a2226}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* finish (reverse holo / holo / 1st edition) -- owner-set, shown only when not normal */
.tag-finish{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:12px;
  background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-line)}
/* a grade that is not the default; near mint says nothing and is not shown */
.tag-cond{display:inline-block;margin:4px 0 0 6px;padding:2px 8px;border-radius:999px;font-size:12px;
  background:var(--grey-bg);color:var(--ink-2);border:1px solid var(--line)}

/* ─── condition ───
   No machine reads condition off a photograph. The scan screen sets one for the
   page about to be scanned; the card sheet overrides one card. */
.cond-row{display:flex;align-items:center;gap:10px;min-height:var(--tap);
  padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.cond-row label{flex:1;font-size:14px;color:var(--ink-2)}
.cond-row select{
  min-height:38px;padding:6px 8px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font-size:16px; /* ≥16px or iOS zooms on focus */
}
.cd-cond{margin:12px 0}
.finish-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.finish-btn{font:600 14px/1 -apple-system,system-ui,sans-serif;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line,#c8c8c8);background:transparent;color:inherit}
.finish-btn.is-on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.cell-finish{font-size:11px;font-weight:600;color:var(--amber,#f2b84b);margin-top:2px}

/* "Not this card": the owner names what they are holding */
.cd-acts{margin-top:12px;flex-wrap:wrap}
.cd-acts .btn{flex:1 1 auto}
.swap{margin-top:12px}
.swap-q{width:100%;min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);color:inherit;font:inherit;font-size:16px}
.swap-note{font-size:12.5px;color:var(--ink-3);margin:8px 0}
.swap-results{margin-top:4px}

/* the finish the identifier could not settle (holo rare: holo or reverse holo).
   The question, then why it is being asked, then the zoom that answers it. */
.finish-note{font-size:14px;color:var(--ink);margin:4px 0 0;line-height:1.4}
.finish-note .micro{margin:4px 0 8px}
.finish-note .rs-crop{max-height:150px}
.swap-cands { margin-bottom: 6px; }

/* the access key, pasted when a link arrived without it */
.key-box{display:flex;gap:8px;margin:8px 0;align-items:center}
.key-q{flex:1;min-width:0;font:14px/1.3 -apple-system,system-ui,monospace;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg-2);color:var(--ink)}

/* "Your card": the pocket this copy came out of, in three views.
   The picture is capped by height rather than width, so a portrait card and the
   warped one it is compared with sit at the same size at 375px. */
.yc{margin:4px 0 16px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3)}
.yc-h{font-size:13px;font-weight:640;color:var(--ink-2);margin-bottom:9px}
.yc-img{display:block;margin:0 auto;max-width:100%;max-height:46vh;
  border-radius:8px;background:var(--bg-2);object-fit:contain}
.yc-views{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:11px}
.yc-view{min-height:36px;padding:6px 12px;border-radius:20px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--ink-2);font-size:12.5px;cursor:pointer}
.yc-view.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff);font-weight:560}
.yc-view:disabled{opacity:.4;cursor:default}
.yc-note{font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.5;margin-top:9px}

/* The same panel inside a question: smaller, since the candidates are the point. */
.rs-aligned{margin-bottom:10px}
.rs-aligned .yc-img{max-height:32vh}
.rs-aligned .yc-h{text-align:center}

/* ─── the timing panel ───
   Opened from the version line. A table, because every row is a name and a
   number and the numbers have to line up to be read against each other. */
.linkish{
  display:block;margin-top:4px;padding:0;border:0;background:none;text-align:left;
  color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer;
  min-height:24px;
}
.tm-table{width:100%;border-collapse:collapse;font-size:13px}
.tm-table td{padding:4px 0;color:var(--ink-2);vertical-align:baseline}
.tm-table td:last-child{text-align:right;white-space:nowrap;color:var(--ink)}
.tm-table tr.tm-head td{font-weight:640;color:var(--ink);padding-top:10px;
  border-top:1px solid var(--line)}
.tm-table tr:first-child.tm-head td{border-top:0;padding-top:0}
#tm-body .micro{margin-top:14px}