/* ── Font ────────────────────────────────────────────────────────────────── */
/* Inter (SIL OFL, see fonts/Inter-OFL.txt), served from this app so the page needs
   no third-party requests. The URL is relative to this stylesheet, so it follows
   wherever /static is mounted, including behind a path prefix such as /vault. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
}

/* ── Reset & tokens ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Two themes. Dark is the default (theme.js sets data-theme on <html> before the page is painted; with no script the
   page is simply dark). Everything that changes between them is a token here, or a rule in the "Light theme" block at
   the end of this file. */
:root {
  color-scheme: dark;
  --bg:       #0f1117;
  --surface:  #1a1d27;
  --surface2: #22263a;
  --border:   #2e3149;
  --text:     #e8e9f0;
  --muted:    #7b7ea0;
  --accent:   #6c63ff;
  --accent2:  #a78bfa;
  --good:     #34d399;
  --warn:     #fbbf24;
  --danger:   #f87171;
  --card-r:   12px;
  --border-hover: #4b4d70;            /* a border that has the mouse over it */
  --scrim:    rgba(0,0,0,.65);        /* behind a window */
  --ring:     #fff;                   /* the ring round a chosen color swatch */
  --on-warn:  #1a1500;                /* lettering on the --warn color */
  --pocket-bg: #12141d;               /* an empty pocket */
  --pocket-line: #3b3e5e;
  --shadow-pop: 0 14px 40px rgba(0,0,0,.62);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:       #f3f4fa;
  --surface:  #ffffff;
  --surface2: #e9ebf6;
  --border:   #d2d6e8;
  --text:     #1b1d2b;
  --muted:    #575b7d;
  --accent:   #5b52f0;
  --accent2:  #5a3fd6;
  --good:     #087652;
  --warn:     #9a5b06;
  --danger:   #c62828;
  --border-hover: #a3a8cf;
  --scrim:    rgba(24,26,48,.5);
  --ring:     #1b1d2b;
  --on-warn:  #fff;
  --pocket-bg: #e4e6f2;
  --pocket-line: #b4b8d6;
  --shadow-pop: 0 14px 40px rgba(24,26,48,.28);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; font-size: 15px; line-height: 1.55;
}
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── App shell ────────────────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; min-height: 100vh; }

header {
  display: flex; align-items: center; gap: 1rem;
  padding: .65rem 1.5rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.header-logo { font-size: 1.1rem; font-weight: 800; white-space: nowrap; }
.header-logo span { color: var(--accent2); }
.header-spacer { flex: 1; }
.header-user { display: flex; align-items: center; gap: .6rem; }
.header-user .display-name {
  background: none; border: none; font: inherit; font-size: .85rem; color: var(--muted);
  cursor: pointer; padding: .3rem .15rem; border-radius: 6px;
}
.header-user .display-name:hover { color: var(--text); text-decoration: underline; }
.header-user .display-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-user .btn-icon { line-height: 1.25; white-space: nowrap; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.header-share { font-size: .78rem; }

/* ── Nav tabs ─────────────────────────────────────────────────────────────── */
.nav-tabs { display: flex; gap: .2rem; }
.nav-tabs button {
  background: none; border: none; color: var(--muted);
  padding: .4rem .85rem; border-radius: 8px;
  cursor: pointer; font-size: .88rem;
  transition: background .12s, color .12s;
}
.nav-tabs button.active, .nav-tabs button:hover {
  background: var(--surface2); color: var(--text);
}

.btn-icon {
  background: none; border: 1px solid var(--border);
  border-radius: 8px; color: var(--muted);
  padding: .3rem .65rem; cursor: pointer;
  font-size: .82rem; transition: all .12s;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent2); }

/* ── Main content ─────────────────────────────────────────────────────────── */
main {
  flex: 1; padding: 1.5rem;
  max-width: 1280px; margin: 0 auto; width: 100%;
}

/* the running version, at the bottom of the page (the script fills it in) */
.app-version { text-align: center; font-size: .72rem; color: var(--muted); opacity: .75; padding: 0 1rem 1.1rem; }
.app-version:empty { display: none; }

/* page sections - only .active shows */
.page { display: none; }
.page.active { display: block; }

/* ── Page header row ──────────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.5rem;
}
.page-header h2 { font-size: 1.2rem; font-weight: 700; }
.page-header .back-btn {
  background: none; border: 1px solid var(--border);
  border-radius: 8px; color: var(--muted);
  padding: .3rem .7rem; cursor: pointer; font-size: .85rem;
}
.page-header .back-btn:hover { border-color: var(--accent); color: var(--accent2); }
.page-header .spacer { flex: 1; }
.page-header .bd-title { min-width: 0; }
.bd-sub { font-size: .8rem; color: var(--muted); }
.bd-sub:empty { display: none; }
@media (max-width: 600px) {          /* phones: the binder's buttons move under its name */
  .page-header { flex-wrap: wrap; row-gap: .6rem; }
  .page-header .bd-title { flex: 1 1 0; }
  .page-header .spacer { flex-basis: 100%; height: 0; }
}

/* ── Stats bar ────────────────────────────────────────────────────────────── */
.stats-bar {
  display: flex; gap: .85rem; margin-bottom: 1.4rem; flex-wrap: wrap;
}
.stat-pill {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .55rem 1rem;
  display: flex; flex-direction: column; gap: .1rem; min-width: 100px;
}
.stat-pill .label {
  font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.stat-pill .value { font-size: 1.25rem; font-weight: 700; }
/* Phones: the boxes share one row (four on the Collection page, three on a binder page) instead of wrapping onto a
   second row. A long label wraps to two lines; the numbers line up along the bottom. */
@media (max-width: 600px) {
  .stats-bar { flex-wrap: nowrap; gap: .4rem; margin-bottom: 1rem; }
  .stat-pill { flex: 1 1 0; min-width: 0; padding: .5rem .55rem; gap: .2rem; justify-content: space-between; }
  .stat-pill .label { font-size: .6rem; letter-spacing: .03em; line-height: 1.25; overflow-wrap: anywhere; }
  .stat-pill .value { font-size: 1.1rem; }
}

/* ── Version and language tags: what tells one print of a card from another ── */
.tag-row { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; min-width: 0; }
.version-tag, .lang-tag {
  font-size: .66rem; font-weight: 600; border-radius: 4px; padding: .1rem .38rem;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.version-tag { color: #f9a8d4; background: rgba(249,168,212,.08); border: 1px solid rgba(249,168,212,.3); }
.version-tag.custom-tag { color: var(--warn); background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.35); }
.lang-tag { color: #fca5a5; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.38); letter-spacing: .04em; }
.note-tag {
  font-size: .64rem; color: var(--muted); border: 1px dashed var(--border); border-radius: 4px; padding: .08rem .35rem;
  white-space: nowrap; cursor: help;
}
/* in place of a card picture nobody has yet */
.img-missing {
  width: 100%; aspect-ratio: 63 / 88; border-radius: 8px; border: 1px dashed var(--border);
  background: var(--surface2); color: var(--muted); font-size: .75rem;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: .5rem;
}
.modal .card-preview .img-missing { width: 100px; flex-shrink: 0; }

/* ── Filter / sort row ────────────────────────────────────────────────────── */
.filter-row {
  display: flex; gap: .65rem; margin-bottom: 1.2rem; flex-wrap: wrap;
}
.filter-row input, .filter-row select {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: .48rem .75rem;
  color: var(--text); font-size: .85rem; cursor: pointer;
}
.filter-row input { flex: 1; min-width: 160px; }
.filter-row input:focus, .filter-row select:focus {
  outline: none; border-color: var(--accent);
}
.filter-row .seg { align-self: center; }
.filter-row .seg button { padding: .32rem .8rem; }
/* the button after the sort menu: says the current order in words and reverses it (the width is fixed so the row
   does not shift when "A to Z" becomes "Newest first") */
.filter-row .sort-dir {
  display: inline-flex; align-items: center; gap: .45rem; min-width: 8.6rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .48rem .75rem;
  color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.filter-row .sort-dir svg { flex: none; color: var(--accent2); }
.filter-row .sort-dir:hover { border-color: var(--border-hover); }
.filter-row .sort-dir:focus-visible { outline: none; border-color: var(--accent); }

/* Phones: a bar above the filters shows or hides them (the Collection page). It says what is filtered while they are
   hidden. On wider screens the bar is not there and the filters always show. */
.filter-toggle { display: none; }
@media (max-width: 600px) {
  .filter-toggle {
    display: flex; align-items: center; gap: .55rem; width: 100%; margin-bottom: .8rem; padding: .6rem .8rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    color: var(--text); font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
  }
  .filter-toggle:focus-visible { outline: none; border-color: var(--accent); }
  .filter-toggle.open { border-color: var(--border-hover); }
  .ft-title { font-weight: 600; flex: none; }
  .ft-badge { flex: none; min-width: 1.3rem; padding: .05rem .4rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; text-align: center; }
  .ft-badge[hidden] { display: none; }
  .ft-summary { flex: 1; min-width: 0; color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ft-action { flex: none; color: var(--accent2); font-size: .8rem; }
  .ft-chev { flex: none; color: var(--accent2); font-size: .85rem; transition: transform .15s; }
  .filter-toggle.open .ft-chev { transform: rotate(180deg); }
  .filter-box.collapsed { display: none; }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  background: var(--accent); border: none; border-radius: 10px;
  color: #fff; padding: .6rem 1.2rem;
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: opacity .12s; white-space: nowrap;
}
.btn:hover { opacity: .85; }
.btn.secondary {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border);
}
.btn.danger { background: var(--danger); }
.btn.secondary.danger-text { color: var(--danger); }
.btn.secondary.danger-text:hover { border-color: var(--danger); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Card grid ────────────────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}

.col-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--card-r); padding: .8rem;
  display: flex; flex-direction: column; gap: .45rem;
  position: relative; transition: border-color .12s;
}
.col-card:hover { border-color: var(--border-hover); }

.col-card img {
  width: 100%; border-radius: 8px;
  aspect-ratio: 63/88; object-fit: cover;
  background: var(--surface2);
}
.col-card .card-name  { font-size: .85rem; font-weight: 600; }
.col-card .card-meta  { font-size: .73rem; color: var(--muted); }
.col-card .card-price { font-size: .92rem; font-weight: 700; color: var(--good); }
.col-card .card-price.loading { color: var(--muted); font-size: .78rem; font-weight: 400; }

.qty-badge {
  position: absolute; top: .55rem; right: .55rem;
  background: var(--accent); color: #fff;
  border-radius: 999px; font-size: .68rem; font-weight: 700;
  padding: .08rem .42rem; line-height: 1.5;
}
.subset-tag {
  font-size: .68rem; color: var(--muted);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; padding: .1rem .35rem;
  align-self: flex-start;
}

.col-card .actions {
  display: flex; gap: .4rem; margin-top: .2rem;
}
.col-card .actions button {
  flex: 1; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--muted);
  padding: .28rem .4rem; font-size: .72rem; cursor: pointer;
  transition: all .12s;
}
.col-card .actions button:hover { border-color: var(--accent); color: var(--accent2); }
.col-card .actions button.del:hover { border-color: var(--danger); color: var(--danger); }

/* ── Missing card (checklist) ─────────────────────────────────────────────── */
.missing-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--card-r); padding: .8rem;
  display: flex; flex-direction: column; gap: .45rem;
  position: relative; cursor: pointer;
  transition: border-color .15s;
}
.missing-card:hover { border-color: var(--accent2); }
/* only the picture is dimmed: the finish tag and price below it stay easy to read */
.missing-card img {
  width: 100%; border-radius: 8px;
  aspect-ratio: 63/88; object-fit: cover;
  background: var(--surface2); filter: grayscale(70%);
  opacity: .5; transition: opacity .15s;
}
.missing-card:hover img { opacity: .9; }
.missing-card .card-name { font-size: .85rem; font-weight: 600; }
.missing-card .card-meta { font-size: .73rem; color: var(--muted); }
.missing-card .add-badge {
  position: absolute; top: .55rem; right: .55rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; font-size: .65rem; color: var(--muted);
  padding: .08rem .4rem;
}

/* ── Rarity badge ─────────────────────────────────────────────────────────── */
.rarity {
  font-size: .66rem; font-weight: 600; padding: .15rem .4rem;
  border-radius: 4px; align-self: flex-start;
  background: var(--surface2); color: var(--muted); border: 1px solid var(--border);
}
.rarity.rare    { color: #60a5fa; border-color: #1e3a5f; background: #0f1e33; }
.rarity.ultra   { color: #c084fc; border-color: #3b1f5e; background: #1b0f30; }
.rarity.special { color: #fbbf24; border-color: #5e4300; background: #2d1f00; }

/* ── Binder grid: small binders ───────────────────────────────────────────── */
.binder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.7rem 1.2rem;
}
@media (max-width: 420px) {   /* two binders across even on the narrowest phones */
  .binder-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 1.5rem 1rem; }
}
.binder-grid > .empty { grid-column: 1 / -1; }

.binder-card {
  display: flex; flex-direction: column; gap: .75rem;
  width: 100%; max-width: 220px; justify-self: start;
  cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
}
.binder-card .binder-cover { transition: transform .15s, box-shadow .15s; }
.binder-card:hover .binder-cover, .binder-card:focus-visible .binder-cover {
  transform: translateY(-4px) rotate(-.5deg);
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 14px 24px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.4);
}
.binder-card:focus-visible .binder-cover { outline: 2px solid var(--accent2); outline-offset: 3px; }
/* the cover has only its picture, so the binder's name is not written on the screen: this copy is for screen readers (and keeps the name findable) */
.binder-card .binder-name {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.binder-card .binder-cap { display: flex; flex-direction: column; gap: .35rem; padding: 0 .1rem; flex: 1; }
.binder-card .binder-meta { font-size: .78rem; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
/* the foot of a binder: "123/194 cards" on the left, a ring with the percentage in it on the right (cover.js: binderFootHtml) */
.binder-card .binder-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; line-height: 1.25;
  margin-top: auto; /* the feet line up along the bottom of a row of binders, whatever the lines above them */
}
.binder-card .bf-count { min-width: 0; color: var(--muted); }
.binder-card .bf-count b { color: var(--text); font-weight: 600; white-space: nowrap; }
.binder-card .bf-ring { position: relative; flex: 0 0 auto; width: 2.7rem; height: 2.7rem; }
.binder-card .bf-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.binder-card .bf-ring circle { fill: none; stroke-width: 4; }
.binder-card .bf-track { stroke: var(--surface2); }
:root[data-theme="light"] .binder-card .bf-track { stroke: var(--border); }   /* on the pale page the lighter track hardly shows */
.binder-card .bf-arc { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray .4s; }
.binder-card .bf-pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: .66rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
@media (max-width: 420px) { .binder-card .bf-ring { width: 2.4rem; height: 2.4rem; } .binder-card .bf-pct { font-size: .6rem; } }
.binder-card .type-badge {
  align-self: flex-start; font-size: .68rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; padding: .1rem .45rem;
  color: var(--muted);
}
.binder-card .type-badge.set     { color: #60a5fa; border-color: #1e3a5f; background: #0f1e33; }
.binder-card .type-badge.pokedex { color: #34d399; border-color: #0f4030; background: #071f18; }
.binder-card .type-badge.pokemon { color: #f9a8d4; border-color: #5b2140; background: #2a0f1d; }
.binder-card .type-badge.region  { color: #fbbf24; border-color: #5b4412; background: #271d07; }

/* ── The binder itself ────────────────────────────────────────────────────── */
/* A leather cover in --cover: lighter at the top left, darker at the bottom right, a faint grain, a crease at the
   spine on the left, stitching along the other three edges. The front is only a picture (.has-art): a Pokémon's art,
   the Pokédex art or a set's logo, in the middle of the cover. A set or Pokémon binder also has a small EN / JP / ALL tag in
   the bottom left corner (.bc-lang). The name is embossed on the cover only while there is no picture for it (a cover
   without one would be blank). Everything is sized from the cover's own width (cqw), so the same cover works from a small
   card to the preview. */
.binder-cover {
  --cover: #38363F;
  position: relative; width: 100%; aspect-ratio: 5 / 7;
  container-type: inline-size; isolation: isolate; overflow: hidden;
  border-radius: 3px 14px 14px 3px;
  background: var(--cover);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cover) 84%, #fff) 0%, var(--cover) 55%, color-mix(in srgb, var(--cover) 84%, #000) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 18px rgba(0,0,0,.38), 0 2px 4px rgba(0,0,0,.4);
  --ink: #fff; --ink-soft: rgba(255,255,255,.55);
  user-select: none; -webkit-user-select: none;
}
.binder-cover.ink-dark { --ink: #1c1b20; --ink-soft: rgba(28,27,32,.55); }
.binder-cover .bc-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background-size: 96px 96px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.binder-cover .bc-spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 7%; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.06) 62%, rgba(255,255,255,.16) 86%, rgba(0,0,0,.2) 100%);
}
.binder-cover .bc-stitch {
  position: absolute; top: 3.6%; bottom: 3.6%; left: 0; right: 5%; pointer-events: none;
  border: max(1.5px, .9cqw) dashed var(--ink-soft); border-left: 0; border-radius: 0 9% 9% 0 / 0 6.5% 6.5% 0;
}
.binder-cover .bc-title {
  position: absolute; left: 13%; right: 10%; top: 0; bottom: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: var(--ink);
  /* --wl is the length of the longest word in the name (set by cover.js): a long word makes the name smaller instead of breaking */
  font-size: 1rem; font-size: clamp(.74rem, min(13cqw, calc(118cqw / var(--wl, 6))), 1.9rem);
  overflow-wrap: break-word; text-wrap: balance;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 0 .5em rgba(0,0,0,.28);
}
.binder-cover.ink-dark .bc-title { text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 0 .5em rgba(255,255,255,.25); }
.binder-cover .bc-title > span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
/* With a picture the name is not written on the cover (it is under the small binder on the Binders and Sets pages) */
.binder-cover.has-art .bc-title { display: none; }
/* The picture sits in a box in the middle of the cover (8% to 84% from the top, a little more room below for the tag),
   a tall Pokémon filling its height and a wide set logo its width. To move it, change the box's top and height. */
.binder-cover .bc-art {
  position: absolute; left: 50%; top: 8%; width: 80%; height: 76%; transform: translateX(-50%);
  object-fit: contain; object-position: center center; pointer-events: none;
  filter: drop-shadow(0 .35em .4em rgba(0,0,0,.45));
}
/* EN / JP / ALL: the red tag the collection shows under a Japanese card, on a dark backing so it reads on any cover color */
.binder-cover .bc-lang {
  position: absolute; left: 11%; bottom: 6.2%; pointer-events: none;
  font-size: .62rem; font-size: clamp(.55rem, 7cqw, 1.5rem); font-weight: 700; line-height: 1; letter-spacing: .05em;
  padding: .2em .45em; border-radius: .35em;
  color: #fca5a5; background: rgba(26,10,12,.82); border: 1px solid rgba(248,113,113,.6);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* ── Add binder form ──────────────────────────────────────────────────────── */
.add-binder-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.25rem; margin-bottom: 1.5rem;
  display: none;
}
.add-binder-panel.open { display: block; }
.add-binder-panel h3 { font-size: .95rem; font-weight: 600; margin-bottom: 1rem; }
.form-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.form-field { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 150px; }
.form-field label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: .5rem .75rem;
  color: var(--text); font-size: .88rem;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--accent); }
.lang-checks { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin-top: .45rem; font-size: .85rem; }
.lang-checks .lc-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lang-checks label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--text); }
.lang-checks input { accent-color: var(--accent); width: 1rem; height: 1rem; }
.lang-checks .lc-note { font-size: .78rem; color: var(--muted); }

/* ── New binder / new set / Edit window: the binder preview, the name, the color ───────────────────────── */
.nb-sheet { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.nb-preview { position: sticky; top: 4.5rem; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.nb-preview .cover-host { width: 100%; max-width: 190px; }   /* the cover has no width of its own (it is a size container) */
.nb-preview .cover-hint { font-size: .72rem; color: var(--muted); text-align: center; line-height: 1.35; min-height: 1em; overflow-wrap: anywhere; }
.nb-fields { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.nb-fields .form-row { align-items: flex-start; }
.nb-actions { display: flex; }
.nb-actions .btn { min-width: 11rem; }
@media (max-width: 640px) {
  .nb-sheet { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .nb-preview { position: static; }
  .nb-preview .cover-host { width: min(46%, 170px); }
  /* every field the full width of the form (the Type and Pokémon boxes have their own widths set in the page) */
  .nb-fields .form-row > .form-field { flex: 1 1 100% !important; min-width: 0 !important; }
  .nb-actions .btn { width: 100%; padding: .85rem 1rem; font-size: 1rem; border-radius: 999px; }
}

.color-picker { display: flex; flex-direction: column; gap: .8rem; }
.color-picker .cp-swatches { display: flex; flex-wrap: wrap; gap: .55rem; }
.color-picker .cp-sw {
  --sw: #38363F;
  position: relative; width: 2.1rem; height: 2.1rem; border-radius: 50%; padding: 0;
  background: var(--sw); border: 2px solid transparent; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset;
  transition: transform .1s, box-shadow .1s;
}
.color-picker .cp-sw:hover { transform: scale(1.08); }
.color-picker .cp-sw:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }
.color-picker .cp-sw.sel { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ring); }
.color-picker .cp-custom {
  display: inline-block; overflow: hidden;
  background: conic-gradient(from 0deg, #ff4d4d, #ffb84d, #f4f44d, #4dff6a, #4dd2ff, #6a4dff, #ff4de1, #ff4d4d);
}
.color-picker .cp-custom::after {      /* the custom color sits in the middle of the rainbow ring */
  content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--sw, #38363F);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset; pointer-events: none;
}
.color-picker .cp-native {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0;
}
.color-picker .cp-hex-row { display: flex; align-items: center; gap: .9rem; }
.color-picker .cp-hex {
  display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; max-width: 16rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0 .75rem;
}
.color-picker .cp-hex:focus-within { border-color: var(--accent); }
.color-picker .cp-hex span { color: var(--muted); font-weight: 600; }
.color-picker .cp-hex input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: .5rem 0;
  color: var(--text); font-size: .95rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-transform: uppercase;
}
.color-picker .cp-hex.bad { border-color: var(--danger); }
.color-picker .cp-clear { background: none; border: 0; color: var(--muted); font-size: .9rem; font-weight: 600; cursor: pointer; padding: .4rem .2rem; }
.color-picker .cp-clear:hover { color: var(--text); }
.cover-modal { max-width: 560px; }
.cover-modal .nb-sheet { grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); }
.cover-modal .nb-preview { position: static; }
@media (max-width: 640px) { .cover-modal .nb-sheet { grid-template-columns: minmax(0, 1fr); } }

/* ── Checklist tab toggles ────────────────────────────────────────────────── */
.checklist-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.checklist-tab {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--muted);
  padding: .38rem .85rem; cursor: pointer; font-size: .85rem;
  transition: all .12s;
}
.checklist-tab.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff;
}

/* ── Pokédex grid ─────────────────────────────────────────────────────────── */
.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: .5rem;
  align-items: start;      /* a tile with a picture is taller: the empty ones beside it stay small */
}
.dex-cell {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .55rem .4rem;
  cursor: pointer; text-align: center; transition: all .12s;
}
.dex-cell:hover { border-color: var(--accent); }
.dex-cell.have { border-color: var(--good); background: rgba(52,211,153,.07); }
.dex-cell .dex-num { font-size: .68rem; color: var(--muted); }
.dex-cell .dex-name { font-size: .78rem; font-weight: 600; margin-top: .1rem; }
.dex-cell .dex-check { font-size: .9rem; margin-top: .1rem; }
/* a Pokémon with a card in the binder: its picture, the card's name and set, and the tags (same size tiles) */
.dex-cell { min-width: 0; }
.dex-cell .dex-art { position: relative; margin-top: .4rem; }
.dex-cell .dex-art img, .dex-cell .dex-art .img-missing {
  display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 5px; background: var(--surface2);
}
.dex-cell .dex-art .img-missing { font-size: .55rem; color: var(--muted); display: flex; align-items: center; justify-content: center; text-align: center; padding: .2rem; }
.dex-cell .dex-more {
  position: absolute; top: .25rem; right: .25rem; padding: .05rem .32rem; border-radius: 999px;
  background: rgba(0, 0, 0, .75); color: #fff; font-size: .6rem; font-weight: 700;
}
.dex-cell .dex-card { margin-top: .35rem; font-size: .7rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dex-cell .dex-set { font-size: .6rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dex-cell .dex-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem; margin-top: .3rem; }
.dex-cell .dex-tags > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .55rem; padding: .02rem .3rem; }
/* a Pokémon with no card yet: its placeholder picture. Shown whole (never cropped), and a transparent one shows the tile behind it */
.dex-cell .dex-ph img { background: transparent; object-fit: contain; }
.filter-row .dex-ph-toggle { display: inline-flex; align-items: center; gap: .4rem; align-self: center; font-size: .85rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.filter-row .dex-ph-toggle input { flex: none; min-width: 0; width: auto; padding: 0; margin: 0; accent-color: var(--accent); }

/* ── Search tab ───────────────────────────────────────────────────────────── */
#search-bar { display: flex; gap: .65rem; margin-bottom: 1rem; }
#search-q-input { flex: 2; }
#search-rarity-input { flex: 1; min-width: 120px; }
#search-set-input  { flex: 1; min-width: 120px; }

.search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.search-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--card-r); padding: .75rem;
  display: flex; flex-direction: column; gap: .45rem;
  cursor: pointer; transition: border-color .12s, transform .1s;
}
.search-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.search-card img {
  width: 100%; border-radius: 8px;
  aspect-ratio: 63/88; object-fit: cover; background: var(--surface2);
}
.search-card .card-name { font-size: .83rem; font-weight: 600; }
.search-card .card-set  { font-size: .72rem; color: var(--muted); }

/* price per finish, shown on each search / Pokédex result card */
.price-list { display: flex; flex-direction: column; gap: 2px; margin-top: .15rem; }
.price-row  { display: flex; justify-content: space-between; gap: .5rem; font-size: .74rem; }
.price-row .pv { color: var(--muted); }
.price-row .pp { color: var(--good); font-weight: 700; }
.price-none { font-size: .72rem; color: var(--muted); }

/* ── Value page ───────────────────────────────────────────────────────────── */
.value-hero {
  text-align: center; padding: 2rem 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; margin-bottom: 1.5rem;
}
.value-hero .amount { font-size: 3rem; font-weight: 800; color: var(--good); }
.value-hero .sub { color: var(--muted); font-size: .85rem; margin-top: .4rem; }

.value-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.value-table th {
  text-align: left; color: var(--muted);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .4rem .75rem; border-bottom: 1px solid var(--border);
}
.value-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.value-table td.val { font-weight: 600; color: var(--good); text-align: right; }
.value-table tr:last-child td { border-bottom: none; }

/* ── Graded copies ────────────────────────────────────────────────────────── */
.subset-tag.graded-tag { color: var(--accent2); border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.1); font-weight: 600; }
.check-field .check-row { display: flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--text); text-transform: none; letter-spacing: 0; min-height: 2.5rem; }
@media (pointer: coarse) { .check-field .check-row { min-height: 2.75rem; } }
.check-field .check-row input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: 0 0 auto; margin: 0; }
#m-condition:disabled, #m-grade:disabled { opacity: .5; cursor: not-allowed; }
.form-field[hidden] { display: none; }

/* ── Grade worthy (Value page) ────────────────────────────────────────────── */
.grade-section { margin-top: 2.25rem; }
.grade-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.grade-head h2 { font-size: 1.2rem; font-weight: 700; }
.grade-how-btn { padding: .35rem .8rem; font-size: .8rem; }
.grade-sub { color: var(--muted); font-size: .86rem; margin: .35rem 0 .9rem; }
.grade-sub b { color: var(--good); font-weight: 700; }
.grade-note {
  margin: 0 0 .9rem; padding: .65rem .9rem; border-radius: 10px; font-size: .82rem; line-height: 1.5;
  color: var(--warn); background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.35);
}
.grade-how {
  margin: 0 0 1rem; padding: .85rem 1rem; border-radius: 12px; font-size: .84rem; line-height: 1.55;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.grade-how h3 { font-size: .9rem; margin-bottom: .4rem; }
.grade-how ul { margin: 0 0 .5rem 1.1rem; padding: 0; }
.grade-how li { margin: .25rem 0; }
.grade-how .fine { color: var(--muted); font-size: .78rem; margin: .5rem 0 0; }

.grade-list { display: flex; flex-direction: column; gap: .6rem; }
.grade-item {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: .5rem .9rem; align-items: center;
  padding: .7rem .85rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.grade-pic img, .grade-pic .img-missing { width: 72px; height: auto; border-radius: 6px; display: block; }
.grade-pic .img-missing { aspect-ratio: 5 / 7; font-size: .6rem; padding: .25rem; }
.grade-pic img.zoom-pic { cursor: zoom-in; }
.grade-main { min-width: 0; }
.grade-name { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.grade-qty { color: var(--muted); font-weight: 600; font-size: .8rem; margin-left: .25rem; }
.grade-meta { color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.grade-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0; }
.grade-tags .est-tag { color: var(--warn); border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.08); }
.grade-tags .live-tag { color: var(--good); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.grade-nums { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .78rem; color: var(--muted); }
.grade-nums b { color: var(--text); font-weight: 600; }
.grade-nums .est { color: var(--warn); font-size: .7rem; }
.grade-result { text-align: right; white-space: nowrap; }
.grade-profit { font-size: 1.35rem; font-weight: 800; color: var(--good); line-height: 1.1; }
.grade-result .lbl { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.grade-total { font-size: .76rem; color: var(--muted); }
.grade-win { font-size: .78rem; margin-top: .35rem; }
.grade-risk { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.grade-risk .neg { color: var(--danger); }
.grade-risk .pos { color: var(--good); }
.grade-empty { color: var(--muted); text-align: center; padding: 1.4rem 1rem; font-size: .88rem;
  background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; }
.grade-more { text-align: center; margin-top: .9rem; }

@media (max-width: 600px) {
  .grade-item { grid-template-columns: 56px minmax(0, 1fr); padding: .6rem; gap: .45rem .7rem; align-items: start; }
  .grade-pic img, .grade-pic .img-missing { width: 56px; }
  .grade-result {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: .15rem .75rem; text-align: left; white-space: normal; padding-top: .45rem; border-top: 1px solid var(--border);
  }
  .grade-profit { font-size: 1.2rem; }
  .grade-win, .grade-risk { margin-top: 0; }
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity .18s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.75rem;
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  transform: translateY(20px); transition: transform .18s;
}
.modal-overlay.open .modal { transform: none; }

.modal h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }
.modal .card-preview {
  display: flex; gap: 1rem; margin-bottom: 1.25rem; align-items: flex-start;
}
.modal .card-preview img {
  width: 100px; border-radius: 8px; flex-shrink: 0;
}
.modal .card-preview .info .name { font-size: .95rem; font-weight: 700; }
.modal .card-preview .info .set  { font-size: .78rem; color: var(--muted); margin-top: .2rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-field.full { grid-column: 1/-1; }

.modal label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.modal .lang-checks label { font-size: .85rem; text-transform: none; letter-spacing: 0; color: var(--text); }   /* a tick box inside a window reads like a tick box elsewhere, not like a field heading */
.modal select, .modal input[type=number], .modal textarea {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: .52rem .75rem; color: var(--text);
  font-size: .9rem; width: 100%;
}
.modal select:focus, .modal input:focus, .modal textarea:focus {
  outline: none; border-color: var(--accent);
}
.modal textarea { resize: vertical; min-height: 65px; }

.field-note { font-size: .72rem; color: var(--muted); }
.field-note:empty { display: none; }
.m-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; font-size: .85rem; min-height: 1.6rem; }
.m-price-main { font-size: 1.15rem; font-weight: 700; color: var(--good); }
.m-price .muted { font-size: .78rem; color: var(--muted); }
.m-price a { font-size: .78rem; }

.modal-actions { display: flex; gap: .65rem; justify-content: flex-end; margin-top: 1.2rem; }

/* ── Accounts (the admin's Users window) ──────────────────────────────────── */
.users-modal { max-width: 540px; }
.um-list { display: flex; flex-direction: column; gap: .4rem; }
.um-row {
  display: flex; align-items: center; gap: .5rem .65rem; flex-wrap: wrap;
  padding: .55rem .7rem; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 10px;
}
.um-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 7rem; }
.um-dn { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.um-un { font-size: .75rem; color: var(--muted); overflow-wrap: anywhere; }
.um-tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.um-tag {
  font-size: .68rem; padding: .12rem .45rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.um-tag.wait { border-color: rgba(251,191,36,.45); color: var(--warn); }
.um-reset { white-space: nowrap; }
.um-h { font-size: .9rem; font-weight: 700; margin-bottom: .75rem; }
.um-h-list { margin-top: 1.4rem; }
.um-add-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; }
.um-add-row .field-note { margin: 0; }
.um-pw-row { display: flex; gap: .5rem; }
.um-pw-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.um-note { margin-top: .6rem; }
.um-pics { font-size: .85rem; color: var(--muted); line-height: 1.5; }
.um-pics b { color: var(--text); font-weight: 600; }
.um-pics .warn { color: var(--warn); }
.um-bar { height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; margin: .35rem 0 .45rem; }
.um-bar > div { height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s; }
.users-modal .modal-actions { margin-top: 1rem; }
.um-done {
  margin-top: .9rem; padding: .75rem .85rem; border-radius: 10px; font-size: .85rem;
  background: rgba(108,99,255,.1); border: 1px solid rgba(108,99,255,.35);
}
.um-msg {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: .5rem 0 .6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.5;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .55rem .7rem;
}
@media (max-width: 520px) {
  .users-modal .form-grid { grid-template-columns: minmax(0, 1fr); }
  .um-add-row { flex-direction: column; align-items: stretch; }
}

/* subset selector inside modal */
.modal .subset-chips {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem;
}
.modal .subset-chip {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: .25rem .6rem; font-size: .78rem;
  color: var(--muted); cursor: pointer; transition: all .12s;
}
.modal .subset-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Empty states ─────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.empty .icon { font-size: 3rem; margin-bottom: .75rem; }
.empty p { max-width: 320px; margin: 0 auto; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: .65rem 1rem; font-size: .85rem;
  z-index: 500; animation: fadeup .22s ease;
}
.toast.error { border-color: var(--danger); color: var(--danger); }
@keyframes fadeup {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Spinner ──────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Set binder: finish tags, view switch, pages of pockets ───────────────── */
.slot-tags { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.slot-price { font-size: .8rem; font-weight: 700; color: var(--good); }
/* a graded copy counted at its graded sold price is purple, like its tag; counted at the Near Mint price it carries an NM mark */
.price-graded, .col-card .card-price.price-graded, .m-price-main.price-graded { color: var(--accent2); }
/* a graded price the service itself calls low confidence (few or old sales): dotted underline, details on hover */
.price-low { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.pb {
  display: inline-block; margin-left: .3rem; padding: 0 .3rem; border: 1px solid rgba(251,191,36,.45); border-radius: 4px;
  font-size: .6rem; font-weight: 700; line-height: 1.5; color: var(--warn); vertical-align: middle; cursor: help;
}
.ts-price-note { font-size: .72rem; line-height: 1.35; color: var(--muted); }
.ts-price-note.nm { color: var(--warn); }
.value-graded-note { margin: .6rem 0 0; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.subset-tag.flag-tag { color: var(--warn); border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.08); }

.binder-note {
  background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.3);
  border-radius: 10px; padding: .6rem .9rem; margin-bottom: 1.1rem;
  font-size: .82rem; color: var(--text); max-width: 860px;
}

.view-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.view-bar .spacer { flex: 1; }
.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.seg button {
  background: none; border: none; color: var(--muted);
  padding: .35rem 1rem; border-radius: 7px; font-size: .85rem; cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--accent); color: #fff; }
.jump { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--muted); }
.jump input {
  width: 4.2rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: .32rem .5rem; color: var(--text); font-size: .85rem;
}
.jump input:focus { outline: none; border-color: var(--accent); }

.binder-help { color: var(--muted); font-size: .85rem; max-width: 820px; margin-bottom: 1.1rem; }
/* the open binder: flipbook.js draws a book here (see "The flip-through binder" below) */
.bk-host { position: relative; }
.bk-host > .empty { padding: 2rem 1rem; }
.bk-host > .empty p { max-width: 460px; }

.bp-head {
  display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .85rem;
  font: 600 .7rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.bp-owned.done { color: var(--good); }
.bp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.bp-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bp-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.bp-grid.cols-4 .pocket-tag { font-size: .58rem; padding: .05rem .25rem; }
.bp-grid.cols-4 .pocket-ver { font-size: .55rem; padding: 0 .25rem; }
.seg.seg-layout button { padding: .35rem .7rem; font-variant-numeric: tabular-nums; }
/* the page size as a dropdown: phones only (the row of buttons is too wide there) */
.layout-select {
  display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-size: .85rem; padding: .5rem .65rem; cursor: pointer; min-width: 0;
}
.layout-select:focus { outline: none; border-color: var(--accent); }
@media (max-width: 600px) {
  .layout-select { display: inline-block; }
  #binderLayoutSeg { display: none; }
}

.pocket {
  position: relative; display: block; width: 100%; aspect-ratio: 63 / 88;
  padding: 0; overflow: hidden; cursor: pointer;
  background: var(--pocket-bg); border: 2px dotted var(--pocket-line); border-radius: 9px;
  color: inherit; font: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.pocket.blank { cursor: default; opacity: .35; }
.pocket img, .pocket .no-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.pocket .no-img {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: .5rem; font-size: .75rem; color: var(--muted); background: var(--surface2);
}
.pocket.missing img, .pocket.missing .no-img { filter: grayscale(1) brightness(.5) contrast(1.05); }
.pocket.missing:hover img, .pocket.missing:focus-visible img,
.pocket.missing:hover .no-img, .pocket.missing:focus-visible .no-img { filter: grayscale(1) brightness(.8); }
.pocket.missing:hover { border-color: var(--accent2); }
.pocket.owned {
  border: 2px solid var(--warn);
  box-shadow: 0 0 0 2px rgba(251,191,36,.22), 0 6px 18px rgba(251,191,36,.16);
}
.pocket:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.pocket-tag {
  position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px);
  background: rgba(10,11,16,.88); border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  padding: .1rem .35rem; text-align: left;
  font: 600 .66rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #e8e9f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pocket-tag .pf { color: #a78bfa; }
.pocket-tag .ck { color: #34d399; }
.pocket-tag .pj { color: #fca5a5; }
/* what sets this version apart, across the top of the pocket */
.pocket-ver {
  position: absolute; left: 4px; top: 4px; max-width: calc(100% - 8px);
  background: rgba(42,15,29,.92); border: 1px solid rgba(249,168,212,.4); border-radius: 6px;
  padding: .05rem .35rem; font-size: .62rem; font-weight: 600; line-height: 1.35; color: #f9a8d4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.pocket.has-qty .pocket-ver { max-width: calc(100% - 2.9rem); }
.pocket.custom.missing { border-color: rgba(251,191,36,.45); }
.pocket.custom .pocket-ver { color: #fbbf24; border-color: rgba(251,191,36,.45); background: rgba(45,31,0,.92); }
.pocket .qty-badge { top: 4px; right: 4px; }

/* ── Personal collection binder ───────────────────────────────────────────────
   A pocket there is one of three things. Owned: as in every binder (gold edge, a check, ×N for extra copies). Planned: you chose the card
   but do not have it. It stays in full color, because a binder like this is laid out by looking at it, and says MISSING across the
   middle (a dashed gold edge as well, so it does not rest on the banner alone). Empty: a sleeve with a +, where a card has not been chosen. */
.pocket.planned { border: 2px dashed rgba(251,191,36,.65); }
.pocket.planned:hover, .pocket-cell:hover .pocket.planned, .pocket.planned:focus-visible { border-color: var(--accent2); }
.pc-missing {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none;
  padding: .32em 0 .32em .22em; text-align: center; white-space: nowrap;
  background: rgba(8,9,14,.62); border-top: 1px solid rgba(251,191,36,.6); border-bottom: 1px solid rgba(251,191,36,.6);
  font: 800 clamp(.42rem, 11cqw, .8rem)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .22em; color: #fbbf24;
}
.pocket.pc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25em;
  color: var(--muted); background: var(--pocket-bg); border: 2px dotted var(--pocket-line);
}
.pocket.pc-empty .pc-plus { font-size: clamp(1.1rem, 24cqw, 2.4rem); line-height: 1; font-weight: 300; }
.pocket.pc-empty .pc-empty-text { font-size: clamp(.45rem, 8.5cqw, .74rem); letter-spacing: .03em; }
.pocket.pc-empty:hover, .pocket.pc-empty:focus-visible { border-color: var(--accent2); color: var(--accent2); }
.pc-tools { display: inline-flex; gap: .35rem; }
.pc-tools[hidden] { display: none; }
.pc-tools .btn-icon:disabled { opacity: .4; cursor: default; }
.pc-tools .btn-icon:disabled:hover { border-color: var(--border); color: var(--muted); }
/* moving a card (Move, for a finger): the book says what to do, and every pocket is a place to put it */
.pc-movebar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .6rem; padding: .5rem .8rem;
  border: 1px solid var(--accent); border-radius: 10px; background: var(--surface2); font-size: .85rem;
}
.pc-movebar[hidden] { display: none; }
.pc-movebar .btn { flex: none; padding: .3rem .8rem; font-size: .8rem; }
.pc-moving .pocket-cell { cursor: pointer; }
.pc-moving .pocket-cell:hover .pocket { outline: 3px solid var(--accent2); outline-offset: -3px; }
/* moving a card (dragging, for a mouse) */
.pc-cell[draggable="true"] { cursor: grab; }
.pc-cell.pc-dragging { opacity: .35; }
.pc-cell.pc-drop .pocket { outline: 3px solid var(--accent2); outline-offset: -3px; box-shadow: 0 0 0 3px rgba(129,140,248,.35); }
.pc-drag-on .bk-nav:not(:disabled) { border-color: var(--accent); color: var(--accent2); }       /* the arrows say they take a card */
.bk-nav.pc-hot { border-color: var(--accent2); color: var(--accent2); box-shadow: 0 0 0 5px rgba(129,140,248,.4), 0 2px 8px rgba(0,0,0,.25); }
/* choosing the card for a pocket */
.modal.pc-pick { max-width: 860px; }       /* wide enough for the name, set, language, Search and Scan a card on one row */
.pc-pick .filter-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
.pc-pick .filter-row input { flex: 1 1 170px; min-width: 0; }
.pc-pick .filter-row select { flex: 0 1 190px; min-width: 0; }
.pc-pick .filter-row .btn { flex: none; }
.pc-pick .filter-row .pc-pick-actions { display: flex; gap: .5rem; flex: none; }     /* Search and Scan a card stay side by side, as on the Add Cards page */
.pc-pick-grid { max-height: min(52vh, 480px); overflow-y: auto; margin-bottom: .5rem; padding: .15rem; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .7rem; }
.pc-pick-grid .search-card { padding: .55rem; }
.pc-pick-pager { display: flex; justify-content: center; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); min-height: 1.6rem; }
.pc-pick-pager .btn { padding: .3rem .75rem; font-size: .78rem; }
.pc-pick-chosen { display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: wrap; }
.pc-pick-chosen .form-field { flex: 1; min-width: 220px; }
.pc-pick-card { display: flex; gap: .8rem; align-items: flex-start; flex: 0 1 300px; }
.pc-pick-card > img, .pc-pick-card > .img-missing { width: 130px; flex: none; border-radius: 8px; aspect-ratio: 63/88; object-fit: cover; background: var(--surface2); }
.pc-pick-info { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.pc-pick-info .card-name { font-size: .95rem; font-weight: 700; }
.pc-pick-info .card-set { font-size: .78rem; color: var(--muted); }
/* the list view: a planned card keeps its color there too */
.pc-planned .missing-card img { filter: none; opacity: 1; }
/* The picker keeps its title and its buttons on the screen: the results are what scroll (a phone is short) */
.modal.pc-pick { display: flex; flex-direction: column; max-height: min(90vh, calc(100dvh - 1.5rem)); }
.modal.pc-pick > h2, .modal.pc-pick .modal-actions, .pc-pick .filter-row { flex: none; }
.pc-pick-find { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.pc-pick-find .pc-pick-grid { flex: 1 1 auto; min-height: 7rem; max-height: none; }
.pc-pick-pager { flex: none; }
@media (max-height: 720px) {                    /* a short screen: the search, the results and the pager scroll as one; the buttons stay */
  .pc-pick-find .pc-pick-grid { flex: none; overflow: visible; }
}
.pc-pick-chosen { overflow-y: auto; min-height: 0; }
/* The pocket window can have up to five buttons (empty, change, move, close, add): they wrap instead of running off the screen */
#pocketModal .modal-actions { flex-wrap: wrap; row-gap: .5rem; }
@media (max-width: 520px) {
  #pocketModal .modal-actions { justify-content: flex-end; }
  #pocketModal .modal-actions .btn { flex: 1 1 auto; }
  .modal.pc-pick { padding: 1.1rem; }
  .pc-pick-chosen { flex-direction: column; }
  .pc-pick-card { flex-basis: auto; width: 100%; }
}

/* Quick add on an empty pocket: the pocket sits in a cell, and the + Add button is the pocket's sibling. It shows
   in the top-right corner (not the middle, where a click opens the window) while the mouse is over the pocket,
   or while it has the keyboard focus. Touch screens have no hover, so there it is always shown, as a plain +. */
.pocket-cell { position: relative; min-width: 0; }
.pocket-cell:hover .pocket.missing img, .pocket-cell:hover .pocket.missing .no-img { filter: grayscale(1) brightness(.8); }
.pocket-cell:hover .pocket.missing { border-color: var(--accent2); }
.pocket-quick {
  position: absolute; top: 5px; right: 5px; z-index: 1;
  display: flex; align-items: center; gap: .2rem; height: 1.65rem; padding: 0 .6rem 0 .45rem;
  background: var(--accent); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  font-family: inherit; font-weight: 700; font-size: .72rem; line-height: 1; letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity .12s, transform .12s, background .12s;
}
.pocket-quick .pq-plus { font-size: 1.05rem; line-height: 1; font-weight: 600; }
.pocket-cell:hover .pocket-quick, .pocket-cell:focus-within .pocket-quick, .pocket-cell.menu-open .pocket-quick,
.pocket-quick.busy {
  opacity: 1; transform: none; pointer-events: auto;
}
.pocket-cell.menu-open .pocket.missing img, .pocket-cell.menu-open .pocket.missing .no-img { filter: grayscale(1) brightness(.8); }
.pocket-cell.menu-open .pocket.missing { border-color: var(--accent2); }
.pocket-quick .pq-caret { font-size: .6rem; opacity: .85; margin-left: .05rem; }
.pocket-quick:hover, .pocket-quick:focus-visible { background: #5a52e6; outline: 2px solid #fff; outline-offset: 1px; }
.pocket-quick:disabled { cursor: progress; }
.pocket-quick.busy .pq-text, .pocket-quick.busy .pq-caret { display: none; }
.pocket-quick.busy .pq-plus { animation: pq-pulse .7s ease-in-out infinite alternate; }
@keyframes pq-pulse { from { opacity: 1; } to { opacity: .35; } }
@media (hover: none) {
  .pocket-quick {
    opacity: .94; transform: none; pointer-events: auto; width: 1.85rem; height: 1.85rem; padding: 0; justify-content: center;
  }
  .pocket-quick .pq-text, .pocket-quick .pq-caret { display: none; }
  .pocket-quick .pq-plus { font-size: 1.25rem; }
  .pocket.has-quick .pocket-ver { max-width: calc(100% - 2.9rem); }    /* room for the + in the corner */
}
@media (max-width: 520px) {
  .bp-grid.cols-4 .pocket-quick { width: 1.55rem; height: 1.55rem; padding: 0; justify-content: center; top: 3px; right: 3px; }
  .bp-grid.cols-4 .pocket-quick .pq-text, .bp-grid.cols-4 .pocket-quick .pq-caret { display: none; }
}

/* the condition menu the + Add button opens: fixed on screen, placed by the script next to its button */
.quick-menu {
  position: fixed; z-index: 250; width: 13.75rem; padding: .35rem;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-pop); animation: fadeup .12s ease;
}
.quick-menu.qm-done { opacity: 0; transition: opacity .12s; animation: none; }
.qm-head { padding: .3rem .55rem .45rem; margin-bottom: .25rem; border-bottom: 1px solid var(--border);
  font-size: .72rem; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.qm-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 2.35rem;
  padding: .45rem .6rem; background: none; border: none; border-radius: 8px;
  color: var(--text); font: inherit; font-size: .86rem; text-align: left; cursor: pointer;
}
.qm-item:hover, .qm-item:focus-visible { background: rgba(108,99,255,.2); outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.qm-price { font-size: .78rem; color: var(--good); font-variant-numeric: tabular-nums; }
.toast .toast-action {
  margin-left: .9rem; background: none; border: none; padding: 0; color: var(--accent2); font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}
.toast .toast-action:hover { color: var(--text); }
@media (max-width: 520px) {
  .bp-grid { gap: .4rem; }
  .pocket-tag { font-size: .58rem; padding: .05rem .25rem; }
  .pocket-ver { font-size: .55rem; padding: 0 .25rem; }
  .bp-grid.cols-4 { gap: .3rem; }
  .bp-grid.cols-4 .pocket-tag { font-size: .5rem; }
  .bp-grid.cols-4 .pocket-ver { display: none; }        /* too small to read on a phone; the window shows it */
  .seg.seg-layout button { padding: .3rem .5rem; }
}

/* ── Collection, By Pokémon: one row per Pokémon, opened to show the cards ── */
.mon-list { display: flex; flex-direction: column; gap: .5rem; }
.mon-group { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.mon-group.open { border-color: var(--border-hover); }
.mon-row {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  background: none; border: none; color: inherit; font: inherit; text-align: left;
  padding: .7rem 1rem; cursor: pointer;
}
.mon-row:hover { background: var(--surface2); }
.mon-row:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
.mon-num { font: 600 .74rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); min-width: 2.6rem; }
.mon-title { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-count { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.mon-value { font-size: .85rem; font-weight: 700; color: var(--good); min-width: 4.5rem; text-align: right; white-space: nowrap; }
.mon-chev { color: var(--muted); transition: transform .15s; }
.mon-group.open .mon-chev { transform: rotate(90deg); }
.mon-body:empty { display: none; }
.mon-body { padding: .25rem 1rem 1rem; }
.mon-actions { display: flex; gap: .5rem; margin-bottom: .8rem; }
@media (max-width: 520px) {
  .mon-row { flex-wrap: wrap; gap: .2rem .6rem; padding: .6rem .8rem; }
  .mon-title { flex-basis: calc(100% - 4.5rem); }
  .mon-count { margin-left: 3.2rem; }
  .mon-value { margin-left: auto; min-width: 0; }
  .mon-body { padding: .25rem .6rem .8rem; }
}

/* the window that opens on a filled pocket */
/* ── The flip-through binder (flipbook.js) ────────────────────────────────────
   A set or Pokémon binder is a book: the cover as big as the screen allows, a click opens it, then each turn shows two pages
   (one on a narrow screen). The book is sized from the space left under the page's top bar (the script sets --bk-h), so nothing
   scrolls. A page's size is worked out from its pockets: everything inside one is measured in % of the page's width (cqw), and
   --ratio / --la are the book's and one page's width over height, so the pockets (63 x 88) exactly fill their page. */
.bk-stage {
  --bk-pad: 14px; --bk-ms: .62s;
  position: relative; height: var(--bk-h, 560px); min-height: 0;
  display: grid; column-gap: .4rem; align-items: stretch;
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "prev view next" ". status .";
}
.bk-stage:not(.bk-wide) { grid-template-areas: "view view view" "prev status next"; }
/* Wide: the arrows hug the book instead of the page's edges. The middle column is as wide as the book and its padding (the same sum
   the book's own width is worked out from, below), or the room left between the arrows when the screen is narrower than that; the
   three columns are centered. */
.bk-stage.bk-wide {
  grid-template-columns: auto min(calc(100% - 2 * (2.75rem + .4rem)), calc((var(--bk-h, 560px) - 2.9rem - 2 * var(--bk-pad)) * var(--ratio, 1.4) + 2 * var(--bk-pad))) auto;
  grid-template-areas: "prev view next" "status status status";
  justify-content: center;
}
.bk-view {
  grid-area: view; container-type: size; display: grid; place-items: center; overflow: hidden;
  outline: none; touch-action: pan-y pinch-zoom; border-radius: 14px;
}
.bk-book {
  position: relative; perspective: 3600px;
  width: min(calc(100cqw - 2 * var(--bk-pad)), calc((100cqh - 2 * var(--bk-pad)) * var(--ratio, 1.4)));
  aspect-ratio: var(--ratio, 1.4);
  transition: transform var(--bk-ms) cubic-bezier(.45, .05, .2, 1);
}
.bk-stage[data-mode="spread"] .bk-book[data-closed="1"] { transform: translateX(-25%); }   /* the closed cover sits in the middle */
.bk-still .bk-book { transition: none; }
.bk-slot { position: absolute; top: 0; height: 100%; width: 50%; }
.bk-left { left: 0; }
.bk-right { left: 50%; }
.bk-stage[data-mode="single"] .bk-left { display: none; }
.bk-stage[data-mode="single"] .bk-right { left: 0; width: 100%; }

/* a page, the inside of a cover, or the cover: all fill their half of the book */
.bk-leaf {
  position: absolute; inset: 0; width: 100%; height: 100%; container-type: inline-size; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 3px 9px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.2);     /* no bigger than the room round the book (--bk-pad), or the view cuts it off in a straight line */
}
.bk-leaf[data-side="R"] { border-radius: 3px 14px 14px 3px; }
.bk-leaf[data-side="L"] { border-radius: 14px 3px 3px 14px; }
.bk-leaf::after { content: ""; position: absolute; inset: 0; pointer-events: none; }          /* the shade where the page curves into the spine */
.bk-leaf[data-side="R"]::after { background: linear-gradient(90deg, rgba(0,0,0,.24), rgba(0,0,0,.06) 4%, transparent 10%); }
.bk-leaf[data-side="L"]::after { background: linear-gradient(270deg, rgba(0,0,0,.24), rgba(0,0,0,.06) 4%, transparent 10%); }
.bk-leaf-in { height: 100%; padding: 3.5cqw; display: flex; flex-direction: column; }
.bk-leaf .bp-head {
  flex: none; height: 5.5cqw; margin: 0; align-items: center; white-space: nowrap; overflow: hidden;
  font-size: clamp(.54rem, 2.7cqw, .74rem);
}
.bk-leaf .bp-grid, .bk-leaf .bp-grid.cols-2, .bk-leaf .bp-grid.cols-4 { gap: 1.8cqw; align-content: start; }
.bk-leaf .pocket-cell, .bk-leaf .pocket { container-type: inline-size; }       /* the lettering sizes itself from the pocket (cqw) */
/* lettering on a pocket grows and shrinks with the pocket, and a pocket too small to read a line on loses it */
.bk-leaf .pocket-tag { font-size: clamp(.38rem, 8.4cqw, .7rem); padding: .05em .32em; left: 3cqw; bottom: 3cqw; max-width: calc(100% - 6cqw); }
.bk-leaf .pocket-ver { font-size: clamp(.38rem, 8.4cqw, .64rem); padding: 0 .3em; left: 3cqw; top: 3cqw; max-width: calc(100% - 6cqw); }
.bk-leaf .pocket-cell:has(.has-qty) .pocket-ver, .bk-leaf .pocket.has-qty .pocket-ver { max-width: calc(100% - 3.4cqw - 2.6rem); }
@container (max-width: 66px) { .bk-leaf .pocket-ver { display: none; } }
@container (max-width: 100px) {
  .bk-leaf .pocket-quick { width: 1.5rem; height: 1.5rem; padding: 0; justify-content: center; top: 3px; right: 3px; }
  .bk-leaf .pocket-quick .pq-text, .bk-leaf .pocket-quick .pq-caret { display: none; }
  .bk-leaf .pocket-quick .pq-plus { font-size: 1.15rem; }
  .bk-leaf .pocket .qty-badge { top: 3px; right: 3px; }
}

/* the inside of the cover (left, when the book is first opened) and of the back cover (right, after an even last page) */
.bk-inside {
  --in: color-mix(in srgb, var(--cover, #38363F) 58%, #000);
  background: linear-gradient(135deg, var(--in), color-mix(in srgb, var(--cover, #38363F) 40%, #000));
  border-color: color-mix(in srgb, var(--cover, #38363F) 65%, #000);
}
.bk-inside .bk-grain {
  position: absolute; inset: 0; opacity: .45; mix-blend-mode: soft-light; background-size: 96px 96px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bk-inside .bk-stitch { position: absolute; top: 3.6%; bottom: 3.6%; border: max(1.5px, .6cqw) dashed rgba(255,255,255,.22); pointer-events: none; }
.bk-inside[data-side="L"] .bk-stitch { left: 5%; right: 0; border-right: 0; border-radius: 9% 0 0 9% / 6.5% 0 0 6.5%; }
.bk-inside[data-side="R"] .bk-stitch { left: 0; right: 5%; border-left: 0; border-radius: 0 9% 9% 0 / 0 6.5% 6.5% 0; }

/* the cover: the same drawing as the small binders, at the size of a page, and a button that opens the book */
.bk-cover { display: block; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; cursor: pointer; color: inherit; font: inherit; }
.bk-cover::after { display: none; }
.bk-cover .binder-cover { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transition: filter .15s; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 3px 9px rgba(0,0,0,.32); }
.bk-cover:hover .binder-cover { filter: brightness(1.06); }
.bk-cover:focus-visible { outline: 3px solid var(--accent2); outline-offset: 5px; border-radius: 6px; }

/* a leaf in the air: it turns on the spine, the front face going over and the back face landing on the other side */
.bk-turn {
  position: absolute; top: 0; height: 100%; width: 50%; z-index: 5; pointer-events: none;
  transform-style: preserve-3d; will-change: transform;
  transition: transform var(--bk-ms) cubic-bezier(.45, .05, .2, 1), opacity var(--bk-ms) ease;
}
.bk-turn.fwd { left: 50%; transform-origin: left center; }
.bk-turn.bwd { left: 0; transform-origin: right center; }
.bk-turn.fwd.go { transform: rotateY(-180deg); }
.bk-turn.bwd.go { transform: rotateY(180deg); }
.bk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk-back { transform: rotateY(180deg); }
.bk-face::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; border-radius: inherit; }
.bk-turn.go .bk-front::after { animation: bk-dim-in var(--bk-ms) ease-in forwards; }
.bk-turn.go .bk-back::after { animation: bk-dim-out var(--bk-ms) ease-out forwards; }
@keyframes bk-dim-in { to { opacity: .38; } }
@keyframes bk-dim-out { from { opacity: .38; } to { opacity: 0; } }
/* the page being uncovered starts in the leaf's shadow */
.turning-fwd .bk-right > .bk-leaf::before, .turning-bwd .bk-left > .bk-leaf::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; animation: bk-uncover var(--bk-ms) ease-out forwards;
}
.turning-fwd .bk-right > .bk-leaf::before { background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 70%); }
.turning-bwd .bk-left > .bk-leaf::before { background: linear-gradient(270deg, rgba(0,0,0,.45), transparent 70%); }
@keyframes bk-uncover { from { opacity: 1; } to { opacity: 0; } }
.bk-book.turning .bk-slot { pointer-events: none; }
/* one page at a time: the page lifts off its left edge and fades, or comes back down over the one under it */
.bk-stage[data-mode="single"] .bk-turn { left: 0; width: 100%; transform-origin: left center; }
.bk-stage[data-mode="single"] .bk-turn.fwd.go { transform: rotateY(-100deg); opacity: 0; }
.bk-stage[data-mode="single"] .bk-turn.bwd { transform: rotateY(-100deg); opacity: 0; }
.bk-stage[data-mode="single"] .bk-turn.bwd.go { transform: none; opacity: 1; }

.bk-nav {
  align-self: center; width: 2.75rem; height: 2.75rem; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: border-color .12s, color .12s, opacity .12s, transform var(--bk-ms, .62s) cubic-bezier(.45, .05, .2, 1);
}
.bk-still .bk-nav { transition: border-color .12s, color .12s, opacity .12s; }
.bk-prev { grid-area: prev; }
.bk-next { grid-area: next; }
/* a closed cover is one page wide, in the middle of the two-page space: its arrows come in to it (and go back out as it opens) */
.bk-stage.bk-wide[data-mode="spread"][data-open="0"] .bk-prev { transform: translateX(calc(var(--bk-bw, 0px) / 4)); }
.bk-stage.bk-wide[data-mode="spread"][data-open="0"] .bk-next { transform: translateX(calc(var(--bk-bw, 0px) / -4)); }
.bk-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent2); }
.bk-nav:disabled { opacity: .3; cursor: default; box-shadow: none; }
.bk-nav:focus-visible, .bk-closebtn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.bk-stage:not(.bk-wide) .bk-nav { width: 3.4rem; height: 2.75rem; border-radius: 12px; }
.bk-status { grid-area: status; display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 2.9rem; padding: 0 .25rem; font-size: .84rem; line-height: 1.3; color: var(--muted); text-align: center; }
.bk-closebtn { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); padding: .28rem .65rem; font-size: .78rem; cursor: pointer; }
.bk-closebtn:hover { border-color: var(--accent); color: var(--accent2); }

/* a binder shown as a book: the page's other furniture gets out of the way so the book has the room.
   The numbers and the note are folded behind a Details button under the binder's name (shut until it is pressed; flipbook.js
   remembers the choice). A dot on the button says there is a note in there. */
.bd-line { display: flex; align-items: center; flex-wrap: wrap; gap: .05rem .7rem; }
.bd-details-btn {
  display: none; align-items: center; gap: .4rem; margin: 0 0 0 -.4rem; padding: .22rem .4rem; border: 0; border-radius: 7px;
  background: none; color: var(--muted); font-size: .8rem; cursor: pointer;
}
.bd-details-btn:hover { color: var(--accent2); }
.bd-details-btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 1px; }
.flip-on .bd-details-btn { display: inline-flex; }
.bd-details-btn .bd-sum:not(:empty)::before { content: '\00b7'; margin-right: .4rem; }
.bd-details-btn .bd-chev { transition: transform .15s; }
.bd-open .bd-details-btn .bd-chev { transform: rotate(180deg); }
.bd-open .bd-details-btn .bd-sum { display: none; }
.bd-dot { display: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--warn); }
.bd-details-btn.has-note .bd-dot { display: inline-block; }
.bd-open .bd-details-btn .bd-dot { display: none; }
.flip-on:not(.bd-open) .bd-fold { display: none !important; }
.flip-on .page-header { margin-bottom: .6rem !important; }       /* !important: the shared page sets these inline */
.flip-on .stats-bar { margin-bottom: .6rem !important; gap: .5rem; }
.flip-on .stat-pill { flex-direction: row; align-items: baseline; gap: .5rem; padding: .28rem .8rem; min-width: 0; }
.flip-on .stat-pill .value { font-size: 1rem; }
.flip-on .binder-note { margin-bottom: .6rem; }
.flip-on .view-bar { margin-bottom: .4rem; position: relative; }
.help-btn { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; font-weight: 700; display: none; place-items: center; }
.flip-on .help-btn { display: inline-grid; }
.view-bar .binder-help { display: none; }
.flip-on .view-bar .binder-help.open {
  display: block; position: absolute; left: 0; top: calc(100% + .3rem); z-index: 40; max-width: min(560px, 94vw); margin: 0; padding: .8rem 1rem;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop); font-size: .82rem; line-height: 1.5; color: var(--text);
}
/* phones: the book needs the height, so the page's own furniture shrinks to a few lines: the buttons in one row, the numbers as
   one line of text, the view and page-size controls on one row */
@media (max-width: 600px) {
  .flip-on .page-header { row-gap: .4rem; margin-bottom: .5rem; }
  .flip-on .page-header .btn { font-size: .74rem !important; padding: .34rem .55rem; border-radius: 8px; }
  .flip-on .page-header .scan-btn { gap: .3rem; }
  .flip-on .stats-bar { flex-wrap: wrap; gap: .05rem .9rem; margin-bottom: .45rem; }
  .flip-on .stat-pill { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: .3rem; padding: 0; background: none; border: 0; }
  .flip-on .stat-pill .label { font-size: .58rem; letter-spacing: .04em; }
  .flip-on .stat-pill .value { font-size: .9rem; }
  .flip-on .view-bar { gap: .35rem .5rem; margin-bottom: .4rem; }
  .flip-on .seg button { padding: .3rem .65rem; font-size: .8rem; }
  .flip-on .layout-select { padding: .38rem .5rem; font-size: .8rem; }
  .flip-on .jump { font-size: .74rem; gap: .3rem; }
  .flip-on .jump input { width: 3.4rem; padding: .28rem .4rem; }
  .flip-on .view-bar .spacer { display: none; }
  .flip-on .view-bar .jump { margin-left: auto; }
  .bk-status { min-height: 2.75rem; }
  main:has(.page.active.flip-on) { padding: .75rem .75rem .5rem; }          /* the book gets the room: less margin round the page ... */
}
/* above 600px wide: less room above and below the page. At every size: no version line under a book (it is on every other page), so the book is as big as it can be */
@media (min-width: 601px) { main:has(.page.active.flip-on) { padding-top: .9rem; padding-bottom: .5rem; } }
#app:has(.page.active.flip-on) .app-version { display: none; }
@media (max-width: 380px) {
  .flip-on .page-header .btn { font-size: .7rem !important; padding: .3rem .45rem; }
  .flip-on .page-header { column-gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-book, .bk-turn { transition: none; }
}

.pocket-modal { max-width: 620px; }
.pm-body { display: flex; gap: 1.25rem; align-items: flex-start; }
.pm-body img { width: 200px; max-width: 42%; border-radius: 10px; flex-shrink: 0; background: var(--surface2); }
.pm-body .zoomable { width: 200px; max-width: 42%; }
.pm-body .zoomable img { width: 100%; max-width: none; }
.pm-info { flex: 1; min-width: 0; }
.pm-info h2 { margin-bottom: .15rem; }
.pm-sub { font-size: .8rem; color: var(--muted); }
.pm-list { margin-top: .9rem; display: flex; flex-direction: column; gap: .5rem; }
.pm-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: .45rem .6rem; font-size: .82rem;
}
.pm-row .grow { flex: 1; min-width: 110px; }
.pm-row .pm-notes { display: block; font-size: .72rem; color: var(--muted); }
.pm-row button {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); padding: .25rem .55rem; font-size: .72rem; cursor: pointer;
}
.pm-row button:hover { border-color: var(--accent); color: var(--accent2); }
.pm-row button.del:hover { border-color: var(--danger); color: var(--danger); }
@media (max-width: 520px) {
  .pm-body { flex-direction: column; align-items: center; }
  .pm-body img { width: 55%; max-width: none; }
  .pm-body .zoomable { width: 55%; max-width: none; }
  .pm-body .zoomable img { width: 100%; }
  .pm-info { width: 100%; }
}

/* Tablets and phones: the tabs drop to their own row, so the top bar fits instead of pushing every page sideways.
   (The admin's bar - logo, five tabs, name, Users, Share, Sign out, Feedback, the sun/moon button - needs about 880 px in one row.) */
@media (max-width: 920px) {
  header { flex-wrap: wrap; padding: .5rem 1rem; gap: .35rem .75rem; }
  .header-spacer { display: none; }       /* its two gaps would cost the account buttons their place */
  .header-user { margin-left: auto; }
  .nav-tabs { order: 3; flex: 0 0 100%; overflow-x: auto; }
  .nav-tabs button { padding: .4rem .7rem; white-space: nowrap; }
}
@media (max-width: 700px) {
  /* the account buttons and the two icon buttons stay on the logo's row down to 500 px (below that: see the three-row rule) */
  .header-user { gap: .35rem; }
  .header-user .btn-icon { padding: .3rem .5rem; }
  .header-user .display-name { max-width: 5.5rem; }
}
/* Phones held upright. Everything the header holds (the logo, the name, Share, Sign out, Feedback, the sun / moon button, and Users for an
   admin) goes on the logo's row when it fits, and the tabs get the row under it: two rows. app.js (fitHeader) measures the real buttons, so
   how much that takes depends on the name and on whether there is a Users button, and puts the class hdr-three on the header when the row
   would not fit. That is three rows: the logo with Feedback and the sun / moon button in the top right corner, then the account buttons,
   then the tabs. (Without the script, or with a phone's own text size making the row wider than measured, the buttons wrap under the logo
   instead of pushing the page sideways.) */
@media (max-width: 500px) {
  header { row-gap: 0; padding-top: .4rem; padding-bottom: .4rem; }
  .header-user { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .header-feedback, .theme-toggle { width: 1.9rem; height: 1.9rem; min-height: 0; }      /* a little smaller: this is a tall header already */
  .nav-tabs { margin-top: .25rem; }
  header.hdr-three { column-gap: .35rem; }                    /* the account buttons are close together, so an admin with a long name still fits one row at 320 */
  header.hdr-three .header-user { display: contents; }
  header.hdr-three::after { content: ''; flex: 0 0 100%; height: 0; order: 2; }          /* the break after the logo row */
  header.hdr-three .header-logo { order: 0; }
  header.hdr-three .header-feedback, header.hdr-three .theme-toggle { order: 1; }
  header.hdr-three .header-feedback { margin-left: auto; }
  header.hdr-three :is(#displayName, #usersBtn, #shareLink, #logoutBtn) { order: 3; margin-top: .25rem; }
  header.hdr-three #displayName { margin-left: auto; }
  header.hdr-three .nav-tabs { order: 4; }
}
/* Five tabs (Collection, Binders, Sets, Add Cards, Value): a little tighter on the smallest phones so they all show on 360 wide */
@media (max-width: 400px) {
  .nav-tabs { gap: .1rem; }
  .nav-tabs button { padding: .4rem .5rem; font-size: .84rem; }
}

/* scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Full-size picture ─────────────────────────────────────────────────────────
   A card's picture in a details window (the pocket window, the add/edit window) opens the full-size
   picture over everything: the picture itself or the small button on it. It closes with the X, a click
   outside the picture, or Esc. A click on the picture switches between fit-to-screen and actual size. */
.zoomable { position: relative; flex-shrink: 0; line-height: 0; }
.zoomable img, img.zoom-pic { cursor: zoom-in; }
.zoomable img { display: block; }
.zoom-btn {
  position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(15,17,23,.78); border: 1px solid rgba(255,255,255,.28); color: #fff;
  cursor: pointer; transition: background .12s, transform .12s;
}
.zoom-btn:hover, .zoom-btn:focus-visible { background: var(--accent); transform: scale(1.06); outline: none; }
.zoom-btn svg { width: 15px; height: 15px; }
.modal .card-preview .zoom-btn { width: 24px; height: 24px; right: 4px; bottom: 4px; }
.modal .card-preview .zoom-btn svg { width: 12px; height: 12px; }

.lightbox {
  position: fixed; inset: 0; z-index: 300; display: flex; overflow: auto;
  padding: 3.6rem 1rem 1.25rem; background: rgba(5,6,10,.93); overscroll-behavior: contain;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lb-fig { margin: auto; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.lb-fig img {
  display: block; width: auto; height: auto; max-width: 92vw;
  max-height: calc(100vh - 8rem); max-height: calc(100dvh - 8rem);
  border-radius: 3.6% / 2.6%; box-shadow: 0 12px 48px rgba(0,0,0,.65); cursor: zoom-in;
}
.lb-fig img.fits { cursor: default; }
.lb-fig img.actual { max-width: none; max-height: none; cursor: zoom-out; }
.lb-fig img.loading {
  width: min(62vw, 15rem); height: min(86vw, 21rem); max-height: none;
  background: rgba(255,255,255,.06); color: transparent; box-shadow: none;
}
.lb-cap { color: var(--text); font-size: .88rem; text-align: center; max-width: 34rem; line-height: 1.45; }
.lb-name, .lb-sub, .lb-note { display: block; }
.lb-name { font-weight: 700; }
.lb-sub { color: var(--muted); font-size: .8rem; }
.lb-note { color: var(--muted); font-size: .76rem; margin-top: .15rem; }
.lb-sub:empty, .lb-note:empty { display: none; }
.lb-close {
  position: fixed; top: .75rem; right: .75rem; z-index: 1; width: 2.6rem; height: 2.6rem; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lb-close:hover, .lb-close:focus-visible { border-color: var(--accent); color: var(--accent2); outline: none; }

/* ── Phones: how many tiles across the list pages show ────────────────────────────────────────────
   The Collection page (Cards and By Pokémon) and a binder's list view (Have, Missing, All) draw cards as
   tiles. On a phone one tile fills the screen, so a small setting puts 1 to 5 across. The script sets
   html[data-tiles] to the number and html[data-compact] to "yes" from 3 across; the share page does not
   set them, so it is not touched. A compact tile is the picture with a line or two, and a tap on it opens
   the tile window (details, Edit, Remove), so nothing is lost. */
.tile-bar { display: none; }
.col-card .col-tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.col-card .col-mini { display: none; }

/* the tile window */
.tile-sheet { padding: 1rem; }
.tile-modal { max-width: 380px; padding: 1.2rem; }
.ts-top { display: flex; gap: .95rem; align-items: flex-start; }
.ts-pic { width: 38%; max-width: 140px; flex-shrink: 0; }
.ts-pic .zoomable { width: 100%; }
.ts-pic img, .ts-pic .img-missing { width: 100%; border-radius: 8px; aspect-ratio: 63/88; object-fit: cover; background: var(--surface2); }
.ts-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.ts-name { font-size: 1.02rem; font-weight: 700; overflow-wrap: anywhere; }
.ts-set { font-size: .78rem; color: var(--muted); }
.ts-chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.ts-info .card-price { font-size: 1.05rem; }
.ts-note { font-size: .72rem; color: var(--warn); line-height: 1.35; }
.ts-notes { font-size: .75rem; color: var(--muted); overflow-wrap: anywhere; }
.ts-actions { display: flex; gap: .5rem; margin-top: 1.1rem; }
.ts-actions .btn { flex: 1 1 0; padding: .6rem .5rem; font-size: .86rem; }

@media (max-width: 600px) {
  .tile-bar { display: flex; align-items: center; gap: .6rem; flex: 1 0 100%; margin-bottom: .85rem; font-size: .8rem; color: var(--muted); }
  .tile-seg button { min-width: 2.2rem; padding: .32rem .55rem; font-variant-numeric: tabular-nums; }

  html[data-tiles="1"] .card-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-tiles="2"] .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  html[data-tiles="3"] .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  html[data-tiles="4"] .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  html[data-tiles="5"] .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
  /* a grid message ("Nothing here yet", the spinner) spans the whole row */
  html[data-tiles] .card-grid > .empty { grid-column: 1 / -1; padding: 2.5rem 1rem; }

  /* 2 across: everything still shows, just tighter */
  html[data-tiles="2"] .col-card, html[data-tiles="2"] .missing-card { padding: .5rem; gap: .35rem; }
  html[data-tiles="2"] .card-grid .card-name { font-size: .78rem; }
  html[data-tiles="2"] .card-grid .card-meta { font-size: .68rem; }
  html[data-tiles="2"] .col-card .actions button { padding: .28rem .2rem; font-size: .68rem; }
  html[data-tiles="2"] .qty-badge, html[data-tiles="2"] .missing-card .add-badge { top: .4rem; right: .4rem; }

  /* 3 to 5 across: the picture and a line or two */
  html[data-compact="yes"] .col-card, html[data-compact="yes"] .missing-card {
    padding: .3rem; gap: .2rem; border-radius: 9px; cursor: pointer; min-width: 0;
  }
  html[data-compact="yes"] .col-card img, html[data-compact="yes"] .missing-card img,
  html[data-compact="yes"] .card-grid .img-missing { border-radius: 5px; }
  html[data-compact="yes"] .card-grid .img-missing { font-size: .55rem; padding: .2rem; }
  html[data-compact="yes"] .col-card .card-meta, html[data-compact="yes"] .missing-card .card-meta,
  html[data-compact="yes"] .card-grid .tag-row, html[data-compact="yes"] .col-card .col-tags,
  html[data-compact="yes"] .col-card .actions { display: none; }
  html[data-compact="yes"] .card-grid .card-name {
    font-size: .62rem; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-compact="yes"] .col-card .col-mini {
    display: block; font-size: .56rem; line-height: 1.2; text-align: center; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-compact="yes"] .col-card .card-price { font-size: .68rem; line-height: 1.2; text-align: center; }
  html[data-compact="yes"] .col-card .card-price.loading { font-size: .6rem; }
  html[data-compact="yes"] .col-card .card-price .spinner { width: .7rem; height: .7rem; }
  html[data-compact="yes"] .col-card .card-price .pb { display: none; }      /* the tile window says it in words */
  html[data-compact="yes"] .qty-badge { top: .4rem; right: .4rem; font-size: .55rem; padding: 0 .3rem; line-height: 1.5; }
  html[data-compact="yes"] .col-card.flagged::before {
    content: '!'; position: absolute; top: .4rem; left: .4rem; z-index: 1; width: .95rem; height: .95rem;
    border-radius: 50%; background: var(--warn); color: var(--on-warn); font: 800 .65rem/.95rem system-ui, sans-serif; text-align: center;
  }
  /* an empty pocket: the finish and the price under the picture */
  html[data-compact="yes"] .missing-card .slot-tags { justify-content: center; gap: .15rem .25rem; }
  html[data-compact="yes"] .missing-card .subset-tag {
    font-size: .54rem; padding: 0 .22rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-compact="yes"] .missing-card .slot-price { font-size: .64rem; }
  html[data-compact="yes"] .missing-card .add-badge { top: .4rem; right: .4rem; font-size: .5rem; padding: 0 .25rem; border-radius: 4px; }

  /* 4 and 5 across: no name, and only the finish on the line under the picture */
  html[data-tiles="4"] .card-grid .card-name, html[data-tiles="5"] .card-grid .card-name,
  html[data-tiles="4"] .col-card .cm-cond, html[data-tiles="5"] .col-card .cm-cond,
  html[data-tiles="4"] .missing-card .add-badge, html[data-tiles="5"] .missing-card .add-badge { display: none; }
  html[data-tiles="4"] .col-card .col-mini, html[data-tiles="4"] .missing-card .subset-tag { font-size: .52rem; }
  html[data-tiles="5"] .col-card, html[data-tiles="5"] .missing-card { padding: .22rem; }
  html[data-tiles="5"] .col-card .col-mini, html[data-tiles="5"] .missing-card .subset-tag { font-size: .48rem; }
  html[data-tiles="5"] .col-card .card-price, html[data-tiles="5"] .missing-card .slot-price { font-size: .6rem; }
  html[data-tiles="5"] .qty-badge { font-size: .5rem; }

  .tile-modal { padding: 1rem; }
}

/* ── Scan a card ──────────────────────────────────────────────────────────── */
.scan-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.scan-btn .ico { width: 1.15em; height: 1.15em; flex: none; }

.scan-modal { max-width: 540px; padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; }
.scan-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; }
.scan-top h2 { margin: 0; }
.scan-where { margin-bottom: .6rem; }
.scan-stage { display: flex; flex-direction: column; gap: .8rem; min-height: 0; }
.scan-stage[hidden] { display: none; }

/* the camera */
.scan-view {
  position: relative; width: 100%; height: min(66vh, 600px); height: min(66dvh, 600px);
  background: #000; border-radius: 12px; overflow: hidden;
}
.scan-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.5); pointer-events: none;
}
.scan-frame i { position: absolute; width: 22px; height: 22px; border: 3px solid #fff; }
.scan-frame i:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.scan-frame i:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.scan-frame i:nth-child(3) { left: -2px; bottom: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.scan-frame i:nth-child(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.scan-cap {
  position: absolute; left: .6rem; right: .6rem; bottom: .6rem; text-align: center; font-size: .78rem;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); pointer-events: none;
}
.scan-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; }
.scan-side { justify-self: start; grid-column: 1; }
.scan-controls .scan-shutter { grid-column: 2; }
.scan-controls .scan-side:last-child { justify-self: end; grid-column: 3; }
.scan-shutter {
  width: 4.1rem; height: 4.1rem; border-radius: 50%; border: 4px solid var(--text); background: var(--text);
  box-shadow: inset 0 0 0 4px var(--surface); cursor: pointer; transition: transform .1s, opacity .15s;
}
.scan-shutter:active { transform: scale(.92); }
.scan-shutter:disabled { opacity: .35; cursor: default; }
.scan-torch-on { border-color: var(--warn); color: var(--warn); }

/* no live camera */
.scan-nocam-msg { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.scan-nocam-btns { display: flex; flex-direction: column; gap: .55rem; }

/* working */
.scan-still { position: relative; align-self: center; max-width: 100%; border-radius: 12px; overflow: hidden; background: #000; }
.scan-still img { display: block; max-width: 100%; max-height: 52vh; max-height: 52dvh; }
.scan-line {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent2);
  box-shadow: 0 0 14px 3px var(--accent); animation: scanline 1.6s ease-in-out infinite alternate;
}
@keyframes scanline { from { top: 0; } to { top: calc(100% - 3px); } }
.scan-working { text-align: center; color: var(--muted); font-size: .9rem; }

/* the answer */
.scan-verdict { display: flex; align-items: center; gap: .75rem; }
.scan-shot { width: 3.4rem; height: 4.6rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); flex: none; background: #000; }
.scan-verdict-text { min-width: 0; }
.scan-verdict-title { font-size: 1.02rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.scan-verdict-title::before { content: ''; width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); flex: none; }
.scan-verdict.certain .scan-verdict-title::before { background: var(--good); }
.scan-verdict.likely .scan-verdict-title::before { background: var(--warn); }
.scan-verdict.unsure .scan-verdict-title::before { background: var(--warn); }
.scan-verdict.none .scan-verdict-title::before { background: var(--danger); }
.scan-verdict-sub { font-size: .8rem; color: var(--muted); margin-top: .1rem; }

.scan-pick { display: flex; gap: 1rem; align-items: flex-start; }
.scan-pick .zoomable, .scan-pick > img, .scan-pick > .img-missing { width: 9.5rem; flex: none; }
.scan-pick img { width: 100%; border-radius: 10px; display: block; }
.scan-pick-info { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.scan-pick-info .name { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.scan-pick-info .set { font-size: .8rem; color: var(--muted); }
.scan-versions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.scan-versions .field-note { flex-basis: 100%; }
.scan-chip {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; color: var(--muted);
  padding: .25rem .7rem; font-size: .78rem; cursor: pointer; transition: all .12s;
}
.scan-chip:hover { border-color: var(--accent); color: var(--text); }
.scan-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.scan-note {
  font-size: .8rem; padding: .55rem .7rem; border-radius: 10px; line-height: 1.45;
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.35); color: var(--text);
}
.scan-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.scan-actions .btn { flex: 1 1 8rem; }
.scan-sub-h { font-size: .8rem; font-weight: 600; color: var(--muted); margin-top: .2rem; }
.scan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: .6rem; }
.scan-grid .search-card { position: relative; padding: .55rem; }
.scan-match {
  position: absolute; top: .9rem; left: .9rem; z-index: 1; font-size: .68rem; font-weight: 700;
  background: rgba(15,17,23,.82); border-radius: 999px; padding: .1rem .45rem; color: #e8e9f0;
}
.scan-lang {
  position: absolute; top: .9rem; right: .9rem; z-index: 1; font-size: .64rem; font-weight: 700; letter-spacing: .02em;
  background: var(--accent); border-radius: 999px; padding: .1rem .45rem; color: #fff;
}
.scan-grid .search-card.scan-twin { border-color: var(--accent); }
.scan-details { font-size: .8rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: .6rem; }
.scan-details summary { cursor: pointer; }
.scan-details .scan-read { display: grid; grid-template-columns: 5.5rem 1fr; gap: .25rem .6rem; margin-top: .55rem; }
.scan-details .scan-read b { color: var(--text); font-weight: 600; }
.scan-details img.scan-seen { width: 5.2rem; border-radius: 5px; border: 1px solid var(--border); display: block; }
.scan-foot { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; }

@media (max-width: 600px) {
  .scan-overlay-phone, #scanModal { align-items: stretch; }
  #scanModal .scan-modal {
    max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; padding: .8rem .85rem 1rem;
    height: 100dvh; overflow-y: auto;
  }
  .scan-view { height: min(72vh, 640px); height: min(72dvh, 640px); }
  .scan-pick .zoomable, .scan-pick > img, .scan-pick > .img-missing { width: 7.8rem; }
  .scan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Scan a card: several cards in a row */
.scan-mode { display: inline-flex; align-self: flex-start; padding: 3px; gap: 3px; margin-bottom: .55rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; }
.scan-mode[hidden] { display: none; }
.scan-mode button { background: none; border: 0; color: var(--muted); font: inherit; font-size: .82rem; padding: .3rem .85rem; border-radius: 999px; cursor: pointer; }
.scan-mode button.on { background: var(--accent); color: #fff; }
.scan-mode button:disabled { cursor: default; opacity: .6; }
.scan-mode button:disabled:not(.on) { opacity: .35; }
.scan-rescan-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; padding: .5rem .7rem;
  font-size: .85rem; border-radius: 10px; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.35);
}
.scan-rescan-bar[hidden] { display: none; }
.scan-many .scan-cap { bottom: 6.4rem; }
.scan-view.scan-flash::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.55); pointer-events: none; }
.scan-review { align-self: stretch; }
.scan-review[hidden] { display: none; }

/* the tray of scanned cards: along the bottom of the camera view */
.scan-tray {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: .45rem; overflow-x: auto; padding: .5rem .6rem .55rem;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.45)); -webkit-overflow-scrolling: touch;
}
.scan-tray[hidden] { display: none; }
.scan-tray.plain { position: static; background: none; padding: 0 0 .3rem; }
.scan-tile {
  position: relative; flex: none; width: 3.3rem; height: 4.6rem; padding: 0; border: 2px solid var(--border); border-radius: 7px;
  background: #111; overflow: hidden; cursor: pointer; color: #fff;
}
.scan-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-tile .n {
  position: absolute; left: 2px; top: 2px; min-width: 1.05rem; height: 1.05rem; line-height: 1.05rem; text-align: center; font-size: .66rem;
  font-weight: 700; background: rgba(0,0,0,.72); border-radius: 999px; padding: 0 .2rem; color: #fff;
}
.scan-tile .mk {
  position: absolute; right: 2px; bottom: 2px; width: 1.15rem; height: 1.15rem; line-height: 1.15rem; text-align: center; font-size: .72rem;
  font-weight: 800; border-radius: 50%; background: var(--muted); color: #000; display: flex; align-items: center; justify-content: center;
}
.scan-tile.good { border-color: var(--good); }
.scan-tile.good .mk { background: var(--good); }
.scan-tile.warn { border-color: var(--warn); }
.scan-tile.warn .mk { background: var(--warn); }
.scan-tile.bad { border-color: var(--danger); }
.scan-tile.bad .mk { background: var(--danger); }
.scan-tile.wait { border-style: dashed; border-color: var(--accent2); }
.scan-tile.wait img { opacity: .55; }
.scan-spin {
  display: block; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid rgba(0,0,0,.35); border-top-color: #000;
  animation: scanspin .8s linear infinite;
}
@keyframes scanspin { to { transform: rotate(360deg); } }

/* one card of the stack */
.scan-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.scan-bar-n { font-size: .8rem; color: var(--muted); }
.scan-find { display: flex; flex-direction: column; gap: .6rem; padding: .7rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); }
.scan-find-row { display: flex; gap: .5rem; }
.scan-find-row input { flex: 1; min-width: 0; }

.scan-done-list { margin: 0; padding-left: 1.1rem; font-size: .88rem; display: flex; flex-direction: column; gap: .2rem; }
.scan-done-fin { color: var(--muted); font-size: .78rem; }

@media (max-width: 600px) {
  .scan-many .scan-cap { bottom: 6.2rem; }
}

/* ── Theme button (sun / moon), top right of every page ───────────────────────────────────────────────────────────
   It shows the picture of the mode a click switches to: a sun while the page is dark, a moon while it is light. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.1rem; height: 2.1rem; padding: 0; line-height: 1;
}
.theme-toggle .tt-ico { width: 1.15rem; height: 1.15rem; display: block; }
:root[data-theme="light"] .theme-toggle .tt-sun { display: none; }
:root:not([data-theme="light"]) .theme-toggle .tt-moon { display: none; }
.theme-toggle:hover { color: var(--text); border-color: var(--border-hover); }
/* a short fade when the person switches (not on page load) */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after { transition: none !important; }
}

/* ── Light theme ──────────────────────────────────────────────────────────────────────────────────────────────────
   The colors every page shares are tokens at the top of this file. These are the places that had a color of their own
   (small tags and badges); lettering that sits on a card picture or on a dark chip keeps its colors in both themes. */
:root[data-theme="light"] .version-tag { color: #a21d63; background: rgba(190,24,93,.07); border-color: rgba(190,24,93,.35); }
:root[data-theme="light"] .version-tag.custom-tag { color: var(--warn); background: rgba(154,91,6,.08); border-color: rgba(154,91,6,.4); }
:root[data-theme="light"] .lang-tag { color: #b42318; background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.35); }
:root[data-theme="light"] .rarity.rare    { color: #1d4ed8; border-color: #bcd0fb; background: #eaf1ff; }
:root[data-theme="light"] .rarity.ultra   { color: #7e22ce; border-color: #dcc3f5; background: #f5ecff; }
:root[data-theme="light"] .rarity.special { color: #9a5b06; border-color: #f0d9a6; background: #fff6e1; }
:root[data-theme="light"] .binder-card .type-badge.set     { color: #1d4ed8; border-color: #bcd0fb; background: #eaf1ff; }
:root[data-theme="light"] .binder-card .type-badge.pokedex { color: #087652; border-color: #b3e3d0; background: #e6f7f0; }
:root[data-theme="light"] .binder-card .type-badge.pokemon { color: #a21d63; border-color: #f2bfd8; background: #fdebf4; }
:root[data-theme="light"] .binder-card .type-badge.region  { color: #9a5b06; border-color: #f0d9a6; background: #fff6e1; }


/* ── Report a bug / suggest a feature ─────────────────────────────────────── */
.header-feedback { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.1rem; flex: none; }
.header-feedback .hf-ico { width: 1.1rem; height: 1.1rem; display: block; flex: none; }
.header-feedback:hover { color: var(--text); border-color: var(--border-hover); }
@media (max-width: 1000px) { .header-feedback .hf-text { display: none; } .header-feedback { width: 2.1rem; padding: 0; } }     /* an icon only when the bar gets tight */
.feedback-modal { max-width: 520px; }
.feedback-modal .fb-kind { margin-bottom: .9rem; width: 100%; display: flex; }
.feedback-modal .fb-kind button { flex: 1; padding: .45rem .6rem; }
.feedback-modal textarea { min-height: 8.5rem; resize: vertical; font: inherit; }
.feedback-modal .fb-count { align-self: flex-end; font-size: .72rem; color: var(--muted); }
.feedback-modal .fb-count.near { color: var(--warn); }
.feedback-modal .fb-opt { text-transform: none; letter-spacing: 0; color: var(--muted); font-size: .72rem; }
.fb-what { margin-top: .6rem; font-size: .8rem; color: var(--muted); }
.fb-what summary { cursor: pointer; width: fit-content; }
.fb-what summary:hover { color: var(--text); }
.fb-what p { margin: .4rem 0 0; line-height: 1.45; }
.fb-result { margin-top: .8rem; padding: .6rem .8rem; border-radius: 8px; font-size: .86rem; line-height: 1.4; border: 1px solid var(--border); }
.fb-result.ok   { color: var(--good);   border-color: color-mix(in srgb, var(--good) 45%, transparent);   background: color-mix(in srgb, var(--good) 9%, transparent); }
.fb-result.warn { color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 45%, transparent);   background: color-mix(in srgb, var(--warn) 9%, transparent); }
.fb-result.err  { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 9%, transparent); }

/* the admin's Users window: email status, test button, newest reports */
.um-mail-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .55rem; }
.um-mail-result { font-size: .82rem; color: var(--muted); line-height: 1.4; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.um-mail-result.ok { color: var(--good); }
.um-mail-result.err { color: var(--danger); }
@media (max-width: 640px) { .um-mail-row .btn-icon, .um-fbrow .btn-icon { min-height: 40px; padding-inline: .9rem; } }   /* a fingertip, not a mouse */
.um-fb { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; }
.um-fbrow { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .55rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); font-size: .82rem; }
.um-fbrow .fb-subj { font-weight: 600; flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.um-fbrow .fb-meta { color: var(--muted); font-size: .74rem; }
.fb-tag, .fb-status { font-size: .66rem; font-weight: 700; letter-spacing: .03em; border-radius: 4px; padding: .08rem .4rem; border: 1px solid var(--border); }
.fb-tag.bug { color: #fb923c; border-color: color-mix(in srgb, #fb923c 45%, transparent); }
.fb-tag.feature { color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 45%, transparent); }
.fb-status.sent { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.fb-status.failed, .fb-status.pending { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.um-fbrow .fb-err { flex: 0 0 100%; color: var(--danger); font-size: .74rem; line-height: 1.4; overflow-wrap: anywhere; }
:root[data-theme="light"] .fb-tag.bug { color: #c2410c; }


/* ── Select mode (v0.21.0): tick several cards, then act on them together ── */
.sel-row { display: flex; justify-content: flex-end; align-items: center; gap: .7rem; margin: .1rem 0 .7rem; min-height: 2rem; }
.sel-hint { font-size: .78rem; color: var(--muted); text-align: right; }
.sel-tab-btn { margin-left: auto; }
.checklist-tabs { align-items: center; }
.sel-box {
  display: none; position: absolute; top: .55rem; left: .55rem; z-index: 3;
  width: 1.7rem; height: 1.7rem; padding: 0; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.9); border-radius: 7px; background: rgba(12,14,24,.6); color: #fff;
  font: 700 1.05rem/1 inherit; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.select-mode .sel-box { display: flex; }
.select-mode .col-card { cursor: pointer; user-select: none; -webkit-user-select: none; }
.select-mode .col-card .actions { display: none; }
.select-mode .col-card img { cursor: pointer; }
.select-mode .col-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); }
.select-mode .col-card.selected .sel-box { background: var(--accent); border-color: var(--accent); }
.sel-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; justify-content: space-between;
  padding: .7rem max(1rem, env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 24px rgba(0,0,0,.35);
}
.sel-bar[hidden] { display: none; }
.sel-count { font-weight: 700; font-size: .92rem; }
.sel-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.sel-actions .btn { padding: .45rem .9rem; font-size: .82rem; }
.sel-actions [hidden] { display: none; }
body.selecting main { padding-bottom: 7.5rem; }
@media (max-width: 520px) {
  .sel-actions { width: 100%; justify-content: stretch; }
  .sel-actions .btn { flex: 1 1 auto; }
  body.selecting main { padding-bottom: 12rem; }
  .sel-hint { text-align: left; flex: 1; }
}

/* Shared page: an empty sleeve of a personal collection binder is only a picture (nothing to click, so no hover change) */
.pocket.pc-empty.ro, .pocket.pc-empty.ro:hover { border-color: var(--pocket-line); color: var(--muted); cursor: default; opacity: .75; }