/* ─────────────────────────────────────────────────────────────────────────
   Pokémon Card Screener — refined editorial dark theme.

   Design system
     · Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48        (--s-1…--s-7)
     · Type scale:    11 / 12 / 13 / 15 / 17 / 22 / 28      (--t-1…--t-7)
     · Radii:         6 / 12 / 16                           (--r-sm/md/lg)
     · Mobile bp:     ≤768px (single breakpoint, no 600/700/800/920 churn)
     · Display font:  ui-serif stack (brand + view titles)
     · Body font:     system sans
   Premium feel comes from typographic rhythm, color discipline, and
   restraint — not from new colors or shadows.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Existing palette (kept intentionally — see CLAUDE.md) */
  --bg: #0e1014;
  --bg-elev: #161a22;
  --bg-elev-2: #1d222c;
  --border: #262b36;
  --border-strong: #353c4a;
  --text: #e6e8ee;
  --text-dim: #a0a6b4;
  --text-faint: #6c7384;
  --accent: #7ab8ff;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.5);

  --no:    #ef4444;  --no-hover:    #dc2626;
  --maybe: #eab308;  --maybe-hover: #ca8a04;
  --yes:   #22c55e;  --yes-hover:   #16a34a;
  --owned: #3b82f6;  --owned-hover: #2563eb;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* Type */
  --t-1: 11px; --t-2: 12px; --t-3: 13px; --t-4: 15px;
  --t-5: 17px; --t-6: 22px; --t-7: 28px;

  /* Radii */
  --r-sm: 6px; --r-md: 12px; --r-lg: 16px;

  /* Fonts — single sans stack throughout. The platform-native UI faces
     (SF Pro Display on Apple, Segoe UI Variable on Windows) supply the
     premium feel; we just lean on weight + tracking + size for hierarchy
     instead of a serif/sans contrast. */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-4);
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

::selection { background: rgba(122,184,255,0.30); color: var(--text); }

/* Subtle ambient gradient — gives the page atmosphere without competing
   with the cards. Anchored to the top, fades out by ~60vh. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 60vh;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(122,184,255,0.06), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 0%, rgba(255,203,5,0.04), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.topbar, main, .action-bar, .modal, .toast, .undo-hint, #view-auth { position: relative; z-index: 1; }

/* ── Topbar ────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: rgba(14, 16, 20, 0.78);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-section--brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
  min-width: 0;
}
.topbar-section--brand h1 {
  font-size: var(--t-5);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.topbar-spacer { flex: 1; }
.topbar-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

/* The drawer-header markup exists but is desktop-hidden — only the mobile
   media query reveals it as a real row. */
.drawer-header { display: none; }

/* ── Brand mark + wordmark ─────────────────────────────────────────
   Replaces the radial-gradient logo-dot + italic serif wordmark with a
   small inline SVG card-stack icon and a confident sans wordmark.
   "Card" sits at semibold for emphasis; "Screener" relaxes to medium with
   a subtle separator dot, giving the wordmark personality without italics. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 1;
  min-width: 0;
}
.brand-mark { color: var(--text-dim); flex-shrink: 0; display: block; }
.brand-mark--lg { width: 32px; height: 32px; }
.brand-name {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  font-size: var(--t-4);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.brand-name-1 { color: var(--text); }
.brand-name-2 {
  color: var(--text-dim);
  font-weight: 500;
  position: relative;
  padding-left: 0.34em;
}
.brand-name-2::before {
  content: "";
  position: absolute;
  left: -0.04em;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffcb05;
}
.brand:hover .brand-name-2 { color: var(--text); }
.brand:hover .brand-mark { color: var(--text); }

/* Legacy logo-dot — kept for any place still referencing it; defaults to
   transparent so it doesn't paint where the new mark replaces it. */
.logo-dot { display: none; }

/* ── Tabs ──────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-elev-2);
  border-radius: 999px;
}
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px var(--s-3);
  font-size: var(--t-3);
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: 999px;
  transition: color 160ms ease, background 160ms ease;
  letter-spacing: 0.01em;
}
.tab:hover { color: var(--text); }
.tab.is-active {
  color: var(--text);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 0 0 1px var(--border);
}

/* ── Buttons ───────────────────────────────────────────────────── */

.btn-ghost,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  color: var(--text);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--t-3);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease, color 140ms ease;
  text-align: center;
  text-decoration: none;     /* anchors styled as buttons shouldn't underline */
}
.btn-ghost:hover { background: #232936; border-color: #444c5e; }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: #0b1220;
  border-color: transparent;
  font-weight: 600;
}
.btn-primary:hover { background: #94c8ff; }

.btn-sm {
  padding: 5px 10px;
  font-size: var(--t-2);
  border-radius: var(--r-sm);
  letter-spacing: 0.01em;
}
.btn-sm:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-danger {
  color: var(--no);
  border-color: rgba(239, 68, 68, 0.35);
}
.btn-danger:hover:not(:disabled) {
  color: #fff;
  background: rgba(239, 68, 68, 0.20);
  border-color: var(--no);
}

/* ── Icon buttons ─────────────────────────────────────────────── */

.icon-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border-strong);
}
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.icon-btn .icon-btn-glyph { display: inline-block; }
.icon-btn:disabled .icon-btn-glyph { display: none; }
.icon-btn:disabled .spinner { display: inline-block; }

/* ── Status pill ─────────────────────────────────────────────── */

.status-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 34px;
  padding: 0 var(--s-3);
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: inherit;
  font-size: var(--t-2);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.status-pill:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg); }
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}
.status-dot[data-status="ok"]   { background: var(--yes); box-shadow: 0 0 8px rgba(34, 197, 94, 0.55); }
.status-dot[data-status="warn"] { background: var(--maybe); box-shadow: 0 0 8px rgba(234, 179, 8, 0.55); }
.status-dot[data-status="fail"] { background: var(--no);    box-shadow: 0 0 8px rgba(239, 68, 68, 0.55); }

.status-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: var(--s-5);
  z-index: 20;
  min-width: 280px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  padding: var(--s-4);
  animation: pop-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.status-popover dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  font-size: var(--t-2);
}
.status-popover dt {
  color: var(--text-faint);
  font-weight: 500;
}
.status-popover dd {
  margin: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Pokémon search box ─────────────────────────────────────── */

.pokemon-search {
  display: inline-flex;
  align-items: stretch;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  /* overflow:visible so the autocomplete dropdown can render outside. The
     children (icon, input, submit) inherit the rounded shape via their
     own border-radius below. */
  position: relative;
  transition: border-color 140ms ease;
  height: 34px;
}
.pokemon-search:focus-within { border-color: var(--accent); }
.pokemon-search-icon {
  display: inline-flex;
  align-items: center;
  padding-left: 10px;
  color: var(--text-faint);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.pokemon-search-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: var(--t-3);
  padding: 0 10px;
  width: 180px;
}
.pokemon-search-input::placeholder { color: var(--text-faint); }
.pokemon-search-submit {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 0 12px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.pokemon-search-submit:hover:not(:disabled) {
  background: var(--accent);
  color: var(--bg);
}
.pokemon-search-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Autocomplete suggestions — anchored below the search form. */
.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 40;
  max-height: 360px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: search-suggest-in 140ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes search-suggest-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--t-3);
  color: var(--text);
  transition: background 100ms ease, color 100ms ease;
}
.search-suggestion.is-active,
.search-suggestion:hover {
  background: var(--bg-elev-2);
}
.search-suggestion.is-active {
  background: rgba(122, 184, 255, 0.10);
  color: var(--text);
}
.search-suggestion-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggestion-hit {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}
.search-suggestion-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  padding: 2px 7px;
  background: var(--bg);
  border-radius: 999px;
  border: 1px solid var(--border);
}
.search-suggestion.is-active .search-suggestion-count {
  color: var(--text-dim);
  border-color: var(--border-strong);
}
.search-suggestion-empty {
  padding: 10px;
  font-size: var(--t-2);
  color: var(--text-faint);
  text-align: center;
}

/* ── Queue picker ────────────────────────────────────────────── */

.queue-cluster {
  display: inline-flex;
  align-items: stretch;
  height: 34px;
  /* min-width:0 lets the picker actually shrink in a flex context — without
     this, the toolbar's outer flexbox refuses to compress us below the
     longest <option>'s intrinsic width and the + button gets pushed off-screen
     when the active queue name is long. */
  min-width: 0;
  max-width: 100%;
}
.queue-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  border-right: 0;
  transition: border-color 140ms ease;
  min-width: 0;
  /* The picker is the *flexible* half of the cluster — it absorbs the
     queue-cluster's available space and lets the select inside it
     truncate. flex: 1 1 auto allows shrinking; the icon-btn at the end
     stays at its fixed width. */
  flex: 1 1 auto;
  overflow: hidden;
}
.queue-picker:hover { border-color: var(--border-strong); }
.queue-picker-label {
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-shrink: 0;
}
.queue-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--text);
  border: none;
  outline: none;
  font: inherit;
  font-size: var(--t-3);
  font-weight: 500;
  padding: 4px 22px 4px 4px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--text-dim) 50%);
  background-position: calc(100% - 10px) center, calc(100% - 5px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  /* min-width:0 + max-width allow the select to actually shrink in flex
     layouts. Without min-width:0 the select would refuse to compress
     below its longest option's width. */
  min-width: 0;
  max-width: 220px;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.queue-select:focus { outline: none; }
.queue-select option {
  background: var(--bg-elev);
  color: var(--text);
  padding: 6px 8px;
}
.queue-cluster .icon-btn {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  width: 34px;
  height: 34px;
  align-self: stretch;
  flex-shrink: 0;             /* never compress the + button — keep it tappable */
}

/* ── User menu ────────────────────────────────────────────────── */

.user-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-left: var(--s-3);
  margin-left: var(--s-2);
  border-left: 1px solid var(--border);
}
.user-menu-email {
  font-size: var(--t-2);
  color: var(--text-dim);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-auth-view .tabs { display: none; }
body.is-auth-view .topbar-toolbar { display: none; }
body.is-auth-view .topbar-burger { display: none; }
body.is-auth-view .topbar-spacer { display: none; }

/* ── Main / view container ────────────────────────────────────── */

main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ── Progress ──────────────────────────────────────────────────── */

.progress {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-2);
  color: var(--text-dim);
  flex-wrap: wrap;
}
.progress-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 100%;
  font-variant-numeric: tabular-nums;
}
.progress-track {
  flex: 1 1 100%;
  height: 3px;
  background: var(--bg-elev-2);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #c79bff);
  width: 0%;
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.queue-actions {
  display: flex;
  gap: var(--s-1);
  margin-left: auto;
}

/* Queue chip — visible queue indicator on mobile, also a tap-to-switch
   shortcut into the drawer. Hidden on desktop where the queue picker is
   always visible in the topbar. */
.queue-chip {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: inherit;
  font-size: var(--t-2);
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 120ms ease, border-color 120ms ease;
}
.queue-chip:hover { background: var(--bg-elev-2); border-color: var(--border-strong); }
.queue-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.queue-chip-caret {
  flex-shrink: 0;
  color: var(--text-faint);
}

/* ── Card stage (swipe view) ──────────────────────────────────── */

.card-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-6);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow);
  position: relative;
}

.card-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, rgba(122,184,255,0.08), transparent 60%);
  border-radius: var(--r-md);
  min-height: 360px;
  cursor: pointer;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card-image-wrap:hover { transform: translateY(-2px); }

#card-image {
  max-height: 520px;
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65), 0 2px 4px rgba(0,0,0,0.4);
  background: var(--bg-elev-2);
  -webkit-user-drag: none;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.card-header { display: flex; flex-direction: column; gap: var(--s-2); }
.card-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.card-header h2 {
  font-family: var(--font-display);
  font-size: var(--t-7);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
  word-wrap: break-word;
  flex: 1;
}

.card-sub {
  font-size: var(--t-3);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.card-sub .dot-sep {
  color: var(--text-faint);
  margin: 0 var(--s-2);
}
.rarity {
  font-size: var(--t-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffcb05;
  font-weight: 600;
}

/* Overall score pill — tight, premium, sits in the header. */
.overall-pill {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(122,184,255,0.10), rgba(199,155,255,0.06));
  border: 1px solid rgba(122,184,255,0.25);
  border-radius: 999px;
  flex-shrink: 0;
}
.overall-pill-label {
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.overall-pill-value {
  font-size: var(--t-5);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  letter-spacing: -0.01em;
}

/* Variant chip */
.variant-chip {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-1);
  padding: 2px 8px;
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffcb05;
  background: rgba(255, 203, 5, 0.10);
  border: 1px solid rgba(255, 203, 5, 0.35);
  border-radius: 4px;
  white-space: nowrap;
}
.variant-chip--mini {
  font-size: 9.5px;
  padding: 1px 6px;
  margin-left: 0;
}

/* Metric tiles */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
.metric {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.metric-label {
  font-size: var(--t-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: var(--s-1);
}
.metric-value {
  font-size: var(--t-5);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* Score bars */
.score-bars {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.score-row {
  display: grid;
  grid-template-columns: 80px 1fr 56px;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-3);
}
.score-label {
  color: var(--text-dim);
  font-size: var(--t-2);
  letter-spacing: 0.02em;
}
.score-bar {
  height: 5px;
  background: var(--bg-elev-2);
  border-radius: 999px;
  overflow: hidden;
}
.score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #c79bff);
  width: 0%;
  transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.score-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: var(--t-3);
}

.card-links { margin-top: var(--s-1); }
.card-links a {
  font-size: var(--t-3);
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.card-links a:hover { text-decoration: underline; }

/* Inline condition row (swipe view, desktop). Single-line tile strip.
   No outer card frame — that was extra visual noise. */
.condition-row-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}
.cond-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2) 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-width: 0;
}
.cond-tile-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.cond-tile-value {
  font-size: var(--t-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.cond-tile--strong {
  border-color: rgba(122, 184, 255, 0.35);
  background: rgba(122, 184, 255, 0.06);
}
.cond-tile--strong .cond-tile-value { color: var(--accent); }

/* Other-printings disclosure */
.variants-detail {
  font-size: var(--t-2);
  color: var(--text-dim);
}
.variants-detail summary {
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  transition: background 140ms ease, border-color 140ms ease;
}
.variants-detail summary::-webkit-details-marker { display: none; }
.variants-detail summary::before {
  content: '▸';
  font-size: 9px;
  color: var(--text-faint);
  transition: transform 160ms ease;
}
.variants-detail[open] summary::before { transform: rotate(90deg); }
.variants-detail summary:hover { background: var(--bg-elev-2); border-color: var(--border-strong); }
.variants-body { margin-top: var(--s-2); }

.variants-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-2);
}
.variants-table td {
  padding: 6px 10px;
  /* Replaced individual border-tops with grouped row separators below. */
}
.variants-price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}
.variants-soft {
  color: var(--text-faint);
  text-align: right;
  white-space: nowrap;
}
.variants-loading, .variants-empty {
  padding: var(--s-2) 10px;
  font-size: var(--t-2);
  color: var(--text-faint);
}
.variant-tag {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 3px;
  vertical-align: 1px;
}
.variant-tag--pc  { color: #ff9d4a; background: rgba(255, 157, 74, 0.12); border: 1px solid rgba(255, 157, 74, 0.30); }
.variant-tag--tcg { color: #7ab8ff; background: rgba(122, 184, 255, 0.10); border: 1px solid rgba(122, 184, 255, 0.30); }

/* Condition × variant matrix */
.condition-matrix {
  margin-top: var(--s-3);
  overflow-x: auto;
}
.condition-matrix:first-child { margin-top: 0; }

.cm-source {
  font-size: var(--t-1);
  color: var(--text-faint);
  margin-bottom: var(--s-1);
  letter-spacing: 0.03em;
}

.cm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-2);
  font-variant-numeric: tabular-nums;
}
.cm-table th {
  padding: 6px 10px;
  text-align: right;
  color: var(--text-faint);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cm-table th.cm-variant,
.cm-table td.cm-variant {
  text-align: left;
  color: var(--text);
  font-weight: 600;
  font-size: var(--t-2);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.cm-table tbody tr:not(:first-child) td {
  border-top: 1px solid rgba(255,255,255,0.03);
}
.cm-table td {
  padding: 6px 10px;
  text-align: right;
  white-space: nowrap;
}
.cm-cell { color: var(--text); }
.cm-cell--strong { color: var(--text); font-weight: 600; }
.cm-cell--strong:first-of-type { color: var(--accent); }
.cm-soft { color: var(--text-faint); font-size: var(--t-1); text-align: right; }
.cm-table th.cm-soft { color: var(--text-faint); }

/* ── Empty state ──────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 80px var(--s-5);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.empty-state h2 {
  font-family: var(--font-display);
  font-size: var(--t-6);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: var(--s-4) 0 var(--s-2);
}
.empty-state p { color: var(--text-dim); margin: 0 0 var(--s-5); }
.empty-actions {
  display: inline-flex;
  gap: var(--s-2);
}
.empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  color: var(--yes);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-7);
  font-weight: 700;
}

/* ── Loading ──────────────────────────────────────────────────── */

.loading-state {
  text-align: center;
  padding: 80px var(--s-5);
  color: var(--text-dim);
}
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
.spinner.large { width: 32px; height: 32px; border-width: 3px; margin-bottom: var(--s-4); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Action bar ───────────────────────────────────────────────── */

.action-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5) var(--s-4);
  background: linear-gradient(180deg, rgba(14,16,20,0.0), var(--bg-elev) 60%);
  position: sticky;
  bottom: 0;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  /* No border-top — the gradient does the separation more elegantly. */
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--s-3) 10px;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  color: white;
  transition: filter 140ms ease, transform 80ms ease, box-shadow 160ms ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  letter-spacing: 0.02em;
}
.action-btn:hover { filter: brightness(1.10); transform: translateY(-1px); }
.action-btn:active { transform: translateY(1px); }
.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.action-label {
  font-size: var(--t-5);
  letter-spacing: 0.04em;
}
.action-hint {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.04em;
}

.action-no    { background: var(--no); }
.action-no:hover    { background: var(--no-hover); }
.action-maybe { background: var(--maybe); color: #1a1500; }
.action-maybe:hover { background: var(--maybe-hover); }
.action-yes   { background: var(--yes); }
.action-yes:hover   { background: var(--yes-hover); }
.action-owned { background: var(--owned); }
.action-owned:hover { background: var(--owned-hover); }

/* Action button flash — keyboard activations need feedback. */
.action-btn.is-flashing { animation: action-flash 280ms ease-out; }
@keyframes action-flash {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 currentColor; }
  35%  { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(255,255,255,0.10); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 currentColor; }
}
.action-no.is-flashing    { box-shadow: 0 0 0 2px var(--no),    0 0 24px rgba(239, 68, 68, 0.45) !important; }
.action-maybe.is-flashing { box-shadow: 0 0 0 2px var(--maybe), 0 0 24px rgba(234, 179, 8, 0.45) !important; }
.action-yes.is-flashing   { box-shadow: 0 0 0 2px var(--yes),   0 0 24px rgba(34, 197, 94, 0.45) !important; }
.action-owned.is-flashing { box-shadow: 0 0 0 2px var(--owned), 0 0 24px rgba(59, 130, 246, 0.45) !important; }

/* Decision animations — the card slides off in the direction matching the
   keyboard mapping (NO ←, MAYBE ↓, YES →, OWNED ↑). */
@keyframes card-swipe-right {
  0%   { transform: translateX(0)     rotate(0)    scale(1);    opacity: 1; }
  100% { transform: translateX(110%)  rotate(8deg) scale(0.94); opacity: 0; }
}
@keyframes card-swipe-left {
  0%   { transform: translateX(0)     rotate(0)     scale(1);    opacity: 1; }
  100% { transform: translateX(-110%) rotate(-8deg) scale(0.94); opacity: 0; }
}
@keyframes card-swipe-down {
  0%   { transform: translateY(0)    rotate(0) scale(1);    opacity: 1; }
  100% { transform: translateY(40%)  rotate(0) scale(0.92); opacity: 0; }
}
@keyframes card-swipe-up {
  0%   { transform: translateY(0)    rotate(0) scale(1);    opacity: 1; }
  100% { transform: translateY(-40%) rotate(0) scale(0.94); opacity: 0; }
}
@keyframes card-enter {
  0%   { transform: translateY(10px) scale(0.985); opacity: 0; }
  100% { transform: translateY(0)    scale(1);     opacity: 1; }
}
@keyframes card-rewind {
  0%   { transform: translateX(-12px) scale(0.985); opacity: 0.6; }
  60%  { transform: translateX(2px)   scale(1.005); opacity: 1; }
  100% { transform: translateX(0)     scale(1);     opacity: 1; }
}
.card-stage.is-swiping        { pointer-events: none; }
.card-stage.is-swiping-yes    { animation: card-swipe-right 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards; filter: drop-shadow(0 0 18px rgba(34, 197, 94, 0.55)); }
.card-stage.is-swiping-no     { animation: card-swipe-left  260ms cubic-bezier(0.4, 0, 0.2, 1) forwards; filter: drop-shadow(0 0 18px rgba(239, 68, 68, 0.55)); }
.card-stage.is-swiping-maybe  { animation: card-swipe-down  260ms cubic-bezier(0.4, 0, 0.2, 1) forwards; filter: drop-shadow(0 0 18px rgba(234, 179, 8, 0.55)); }
.card-stage.is-swiping-owned  { animation: card-swipe-up    260ms cubic-bezier(0.4, 0, 0.2, 1) forwards; filter: drop-shadow(0 0 18px rgba(59, 130, 246, 0.55)); }
.card-stage.is-entering       { animation: card-enter 200ms ease-out; }
.card-stage.is-rewinding      { animation: card-rewind 280ms cubic-bezier(0.4, 0, 0.2, 1); }
.card-stage.is-rewinding .card-image-wrap { box-shadow: 0 0 0 1px var(--accent), 0 12px 28px rgba(122, 184, 255, 0.25); transition: box-shadow 240ms ease; }

@media (prefers-reduced-motion: reduce) {
  .card-stage.is-swiping-yes,
  .card-stage.is-swiping-no,
  .card-stage.is-swiping-maybe,
  .card-stage.is-swiping-owned,
  .card-stage.is-entering,
  .card-stage.is-rewinding { animation: none; }
}

/* ── Toast ────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  background: #2a1414;
  color: #ffd5d5;
  border: 1px solid #5a2828;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: var(--t-3);
  box-shadow: var(--shadow);
  z-index: 50;
  max-width: 80vw;
}
.toast.success {
  background: #0f2519;
  color: #c5f1d4;
  border-color: #1f5a37;
}

/* ── Undo hint ─────────────────────────────────────────────────── */

.undo-hint {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 8px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--s-2) 14px;
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 12;
  letter-spacing: 0.01em;
}
.undo-hint.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.undo-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #0e1014;
  background: var(--accent);
}
.undo-hint-decision {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--t-1);
}
.undo-hint-sep { color: var(--text-faint); }
.undo-hint-card {
  color: var(--text-dim);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.undo-hint-shortcut {
  margin-left: var(--s-1);
  font-size: var(--t-1);
  color: var(--text-faint);
}
.undo-hint-shortcut kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.undo-hint[data-decision="yes"]   .undo-hint-icon { background: var(--yes); }
.undo-hint[data-decision="no"]    .undo-hint-icon { background: var(--no);    color: #fff; }
.undo-hint[data-decision="maybe"] .undo-hint-icon { background: var(--maybe); }
.undo-hint[data-decision="owned"] .undo-hint-icon { background: var(--owned); color: #fff; }
.undo-hint[data-decision="yes"]   .undo-hint-decision { color: var(--yes); }
.undo-hint[data-decision="no"]    .undo-hint-decision { color: var(--no); }
.undo-hint[data-decision="maybe"] .undo-hint-decision { color: var(--maybe); }
.undo-hint[data-decision="owned"] .undo-hint-decision { color: var(--owned); }
.undo-hint.is-rewound .undo-hint-icon     { background: var(--text-faint); color: var(--bg); }
.undo-hint.is-rewound .undo-hint-decision { color: var(--text-dim); }

/* ─────────────────────────────────────────────────────────────────────────
   Decisions view
   ───────────────────────────────────────────────────────────────────────── */

#view-decisions {
  padding: var(--s-5) var(--s-6) 80px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.dec-header {
  margin-bottom: var(--s-4);
}
.dec-title {
  font-family: var(--font-display);
  font-size: var(--t-7);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-1);
  line-height: 1.1;
}
.dec-sub {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--t-3);
}

.dec-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.dec-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  width: fit-content;
}
.dec-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px;
  font-size: var(--t-3);
  font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  letter-spacing: 0.01em;
}
.dec-chip:hover { color: var(--text); }
.dec-chip.is-active {
  color: var(--text);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border);
}
.dec-chip.is-yes.is-active   { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.40); }
.dec-chip.is-maybe.is-active { box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.40); }
.dec-chip.is-owned.is-active { box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.40); }
.dec-chip.is-no.is-active    { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.40); }

.chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  background: var(--bg);
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}
.dec-chip.is-active .chip-count { color: var(--text); background: var(--bg-elev); }

.dec-queue-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 10px;
  height: 34px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-left: auto;
}
.dec-queue-filter-label {
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.dec-queue-filter .queue-select {
  background: transparent;
  max-width: 200px;
}

.dec-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-4);
}

.dec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.dec-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
}

.dec-card-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  border-radius: 4px;
  color: #0e1014;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.dec-card-tag--yes   { background: var(--yes); }
.dec-card-tag--maybe { background: var(--maybe); }
.dec-card-tag--owned { background: var(--owned); color: #fff; }
.dec-card-tag--no    { background: var(--no);   color: #fff; }

.dec-card-image-wrap {
  background: linear-gradient(180deg, #0a0c10, #14181f);
  aspect-ratio: 245 / 342;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dec-card-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.dec-card-img--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: var(--t-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dec-card-body {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.dec-card-name {
  font-size: var(--t-3);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dec-card-meta {
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: var(--s-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dec-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-1);
}
.dec-card-label {
  font-size: var(--t-1);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dec-card-value {
  font-size: var(--t-3);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dec-card-row--soft {
  font-size: var(--t-2);
  color: var(--text-faint);
  margin-top: var(--s-1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
}
.dec-card-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.dec-card-link:hover { text-decoration: underline; }

.dec-card-note {
  margin-top: var(--s-1);
  padding: 6px 10px;
  background: var(--bg);
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
  font-size: var(--t-2);
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dec-card-queue {
  display: inline-block;
  padding: 0 6px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(122, 184, 255, 0.10);
  border-radius: 3px;
}

/* Inline re-decide buttons on each decision card. */
.dec-card-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: var(--s-2);
  padding-top: var(--s-2);
}
.dec-card-action {
  appearance: none;
  background: transparent;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 4px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.dec-card-action:hover { color: var(--text); border-color: var(--border-strong); }
.dec-card-action:active { transform: scale(0.96); }
.dec-card-action--yes.is-current   { color: #0e1014; background: var(--yes);   border-color: var(--yes); }
.dec-card-action--maybe.is-current { color: #0e1014; background: var(--maybe); border-color: var(--maybe); }
.dec-card-action--owned.is-current { color: #fff;    background: var(--owned); border-color: var(--owned); }
.dec-card-action--no.is-current    { color: #fff;    background: var(--no);    border-color: var(--no); }
.dec-card-action--yes:not(.is-current):hover   { color: var(--yes);   border-color: var(--yes); }
.dec-card-action--maybe:not(.is-current):hover { color: var(--maybe); border-color: var(--maybe); }
.dec-card-action--owned:not(.is-current):hover { color: var(--owned); border-color: var(--owned); }
.dec-card-action--no:not(.is-current):hover    { color: var(--no);    border-color: var(--no); }

@keyframes redecide-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(122, 184, 255, 0); }
  35%  { box-shadow: 0 0 0 2px rgba(122, 184, 255, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(122, 184, 255, 0); }
}
.dec-card.is-redecided { animation: redecide-pulse 600ms ease-out; }

/* ─────────────────────────────────────────────────────────────────────────
   Modals
   ───────────────────────────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modal-fade 160ms ease-out;
}
.modal-card {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  /* Card itself doesn't scroll on desktop — the inner .modal-body does.
     This keeps the header + footer in fixed position even when content
     overflows. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: modal-pop 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Single scrollable region between header and footer — wraps the form
   and any sibling sections (default-queues list, your-queues list, the
   card-detail body+section). */
.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.modal-card > .modal-header { flex-shrink: 0; }
.modal-card > .modal-footer { flex-shrink: 0; }
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-3);
}
.modal-title {
  font-family: var(--font-display);
  margin: 0;
  font-size: var(--t-6);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.modal-close {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  transition: background 140ms ease, color 140ms ease;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--bg-elev-2); color: var(--text); }
.modal-footer {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-3);
}

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Builder form */
.builder-form { padding: 0 var(--s-5); }

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 140px;
}
.form-label {
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.form-hint {
  font-size: var(--t-1);
  color: var(--text-faint);
  line-height: 1.4;
}
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: inherit;
  font-size: var(--t-3);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(122, 184, 255, 0.12);
}
.form-field input[type="text"]:disabled { color: var(--text-dim); background: var(--bg-elev-2); }

.form-fieldset {
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.form-fieldset legend {
  padding: 0 6px;
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.form-advanced {
  margin: 0 0 var(--s-1);
  padding: 10px var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.15);
}
.form-advanced summary {
  cursor: pointer;
  font-size: var(--t-2);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-transform: uppercase;
  user-select: none;
  list-style: none;
}
.form-advanced summary::-webkit-details-marker { display: none; }
.form-advanced summary::before {
  content: '▸ ';
  color: var(--text-faint);
  font-size: 10px;
  transition: transform 160ms ease;
  display: inline-block;
}
.form-advanced[open] summary::before { transform: rotate(90deg); }
.form-advanced .form-row { margin-top: var(--s-3); margin-bottom: var(--s-2); }

/* Existing-queues lists inside builder. */
.builder-existing {
  padding: var(--s-4) var(--s-5);
  background: rgba(0,0,0,0.18);
  margin-top: var(--s-4);
}
.builder-existing-title {
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: center;
}
.builder-existing-hint {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0;
  text-transform: none;
  margin-left: var(--s-2);
}
.builder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.builder-list-empty {
  font-size: var(--t-2);
  color: var(--text-faint);
  padding: 6px 4px;
}
.builder-list-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.builder-list-info { flex: 1; min-width: 0; }
.builder-list-name {
  font-size: var(--t-3);
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-mono);
}
.builder-list-desc {
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.builder-list-actions { display: flex; gap: 4px; }

/* Set picker */
.form-legend-count {
  font-size: var(--t-1);
  font-weight: 500;
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}
.set-picker-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--s-2);
}
.set-picker-quick button {
  appearance: none;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.set-picker-quick button:hover {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--border-strong);
}
.set-picker-quick .set-picker-clear {
  margin-left: auto;
  color: var(--text-faint);
}
.set-picker-quick .set-picker-clear:hover {
  color: var(--no);
  border-color: var(--no);
}
.set-picker-filter {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: inherit;
  font-size: var(--t-3);
  outline: none;
  margin-bottom: var(--s-2);
}
.set-picker-filter:focus { border-color: var(--accent); }
.set-picker-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.set-picker-item { margin: 0; }
.set-picker-item label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--t-2);
  color: var(--text);
  transition: background 80ms ease;
}
.set-picker-item label:hover { background: var(--bg-elev); }
.set-picker-item.is-checked label { background: rgba(122, 184, 255, 0.10); }
.set-picker-item input[type="checkbox"] { margin: 0; cursor: pointer; flex-shrink: 0; }
.set-picker-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.set-picker-meta {
  font-size: 10.5px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  white-space: nowrap;
  flex-shrink: 0;
}
.set-picker-loading,
.set-picker-empty {
  padding: 10px 12px;
  font-size: var(--t-2);
  color: var(--text-faint);
}

/* ─────────────────────────────────────────────────────────────────────────
   Card detail modal
   ───────────────────────────────────────────────────────────────────────── */

.card-modal-card { width: min(820px, 100%); }
.card-modal-titles { min-width: 0; flex: 1; }
.card-modal-subtitle {
  font-size: var(--t-3);
  color: var(--text-dim);
  margin-top: var(--s-1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.card-modal-body {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: var(--s-5);
  padding: 0 var(--s-5) var(--s-4);
}
.card-modal-image-wrap {
  background: linear-gradient(180deg, #0a0c10, #14181f);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 245 / 342;
  overflow: hidden;
}
.card-modal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.card-modal-meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.card-modal-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s-2);
}
.card-modal-stat {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px var(--s-3);
}
.card-modal-stat-label {
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.card-modal-stat-value {
  font-size: var(--t-5);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.005em;
}

.card-modal-decision {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-3);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--t-2);
  align-self: flex-start;
}
.card-modal-decision .dec-card-tag {
  position: static;
  padding: 3px 8px;
  font-size: 10px;
  box-shadow: none;
}
.card-modal-soft { color: var(--text-dim); }
.card-modal-note {
  padding: 10px var(--s-3);
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-3);
  color: var(--text-dim);
}

.card-modal-section {
  padding: var(--s-4) var(--s-5) 0;
}

.card-modal-footer {
  margin-top: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.card-modal-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.cm-action {
  appearance: none;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 14px;
  font: inherit;
  font-size: var(--t-2);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.cm-action:hover { color: var(--text); border-color: var(--border-strong); }
.cm-action--yes.is-current   { color: #0e1014; background: var(--yes);   border-color: var(--yes); }
.cm-action--maybe.is-current { color: #0e1014; background: var(--maybe); border-color: var(--maybe); }
.cm-action--owned.is-current { color: #fff;    background: var(--owned); border-color: var(--owned); }
.cm-action--no.is-current    { color: #fff;    background: var(--no);    border-color: var(--no); }
.cm-action--yes:not(.is-current):hover   { color: var(--yes);   border-color: var(--yes); }
.cm-action--maybe:not(.is-current):hover { color: var(--maybe); border-color: var(--maybe); }
.cm-action--owned:not(.is-current):hover { color: var(--owned); border-color: var(--owned); }
.cm-action--no:not(.is-current):hover    { color: var(--no);    border-color: var(--no); }

/* ─────────────────────────────────────────────────────────────────────────
   Auth view
   ───────────────────────────────────────────────────────────────────────── */

.view-auth {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-2);
}
.auth-brand .brand-name {
  font-size: var(--t-6);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
}
.auth-brand .brand-name-2 { font-weight: 500; }
.auth-brand .brand-name-2::before { width: 4px; height: 4px; }
.auth-tagline {
  margin: 0 0 var(--s-5);
  font-size: var(--t-3);
  color: var(--text-dim);
  line-height: 1.5;
}
.auth-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 var(--s-4);
  padding: 3px;
  background: var(--bg-elev-2);
  border-radius: 999px;
  width: fit-content;
}
.auth-tab {
  padding: 7px 16px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: var(--t-3);
  font-weight: 500;
  cursor: pointer;
  border-radius: 999px;
  transition: color 160ms ease, background 160ms ease;
  font-family: inherit;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.is-active {
  color: var(--text);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-field input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  color: var(--text);
  font-size: var(--t-4);
  font-family: inherit;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(122, 184, 255, 0.12);
}
.auth-error {
  background: rgba(255, 90, 90, 0.10);
  border: 1px solid rgba(255, 90, 90, 0.30);
  color: #ffb3b3;
  border-radius: var(--r-sm);
  padding: var(--s-2) 10px;
  font-size: var(--t-3);
}
.auth-submit { padding: 12px 16px; font-size: var(--t-4); margin-top: var(--s-1); }

/* ─────────────────────────────────────────────────────────────────────────
   Toggle switch (admin queue management)
   ───────────────────────────────────────────────────────────────────────── */

.toggle {
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.toggle input { display: none; }
.toggle-track {
  display: inline-block;
  width: 38px;
  height: 22px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  position: relative;
  transition: background 160ms ease, border-color 160ms ease;
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-faint);
  border-radius: 50%;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background 160ms ease;
}
.toggle input:checked + .toggle-track {
  background: rgba(34, 197, 94, 0.20);
  border-color: rgba(34, 197, 94, 0.55);
}
.toggle input:checked + .toggle-track .toggle-thumb {
  transform: translateX(16px);
  background: var(--yes);
}
.toggle input:disabled + .toggle-track { opacity: 0.5; }

/* Promote toggle — compact inline switch on user-queue list rows. */
.promote-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: var(--t-2);
  color: var(--text-faint);
  font-weight: 500;
}
.promote-toggle input { display: none; }
.promote-toggle-track {
  display: inline-block;
  width: 32px;
  height: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  position: relative;
  transition: background 160ms ease, border-color 160ms ease;
}
.promote-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--text-faint);
  border-radius: 50%;
  transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background 160ms ease;
}
.promote-toggle input:checked + .promote-toggle-track {
  background: rgba(122, 184, 255, 0.18);
  border-color: rgba(122, 184, 255, 0.55);
}
.promote-toggle input:checked + .promote-toggle-track .promote-toggle-thumb {
  transform: translateX(14px);
  background: var(--accent);
}
.promote-toggle input:checked ~ .promote-toggle-label { color: var(--accent); }
.promote-toggle input:disabled + .promote-toggle-track { opacity: 0.5; }

.promoted-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(122, 184, 255, 0.12);
  border: 1px solid rgba(122, 184, 255, 0.35);
  border-radius: 4px;
  vertical-align: 2px;
}
.builder-list-item.is-promoted {
  border-color: rgba(122, 184, 255, 0.30);
  background: linear-gradient(180deg, rgba(122,184,255,0.04), transparent);
}

/* ─────────────────────────────────────────────────────────────────────────
   Topbar burger / drawer (mobile-only — desktop hides them)
   ───────────────────────────────────────────────────────────────────────── */

.topbar-burger {
  display: none;
  appearance: none;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  transition: background 140ms ease;
}
.topbar-burger:hover { background: var(--bg); }
.topbar-burger span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text-dim);
  border-radius: 1px;
  transition: transform 200ms ease, opacity 160ms ease, background 160ms ease;
}

.drawer-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-faint);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.drawer-close:hover { background: var(--bg-elev-2); color: var(--text); }
.drawer-title {
  font-family: var(--font-display);
  font-size: var(--t-5);
  font-weight: 500;
  color: var(--text);
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE — single breakpoint
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  body.is-drawer-open { overflow: hidden; }

  /* Topbar — two slim rows: brand+burger, tabs. No toolbar visible until
     drawer opens. */
  .topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    padding-top: max(var(--s-2), env(safe-area-inset-top));
    z-index: 25;
  }
  .topbar-section--brand { gap: 8px; }
  .brand-mark { width: 20px; height: 20px; }
  .brand-name { font-size: var(--t-3); }
  .topbar-spacer { display: none; }

  .topbar-burger { display: inline-flex; margin-left: auto; width: 38px; height: 38px; position: relative; z-index: 6; }

  /* Tabs — full-bleed slim row */
  .tabs {
    order: 99;
    flex-basis: 100%;
    display: flex;
    gap: 0;
    padding: 0;
    margin: 4px 0 0;
    background: transparent;
    border-radius: 0;
    border-top: 1px solid var(--border);
  }
  .tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: var(--t-3);
    border-radius: 0;
  }
  .tab.is-active {
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--accent);
  }

  /* Drawer (slide-down panel from top) — properly headed so the close
     button sits above all inputs in its OWN row, not overlaying anything. */
  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--s-1);
  }
  .topbar-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;                  /* above the body backdrop */
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border-strong);
    padding: var(--s-4);
    padding-top: max(var(--s-4), env(safe-area-inset-top));
    box-shadow: 0 12px 32px rgba(0,0,0,0.55);
    transform: translateY(-105%);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .topbar-toolbar.is-open { transform: translateY(0); }
  .topbar-toolbar > * { width: 100%; }
  /* Hide the desktop hamburger when drawer is open — its own X is the
     close affordance now. Keeps screen-readers clean too. */
  body.is-drawer-open .topbar-burger { visibility: hidden; }

  .pokemon-search { display: flex; height: auto; min-height: 48px; }
  .pokemon-search-input { flex: 1; width: auto; min-height: 48px; font-size: 16px; padding: 0 12px; }
  .pokemon-search-submit { min-width: 48px; }
  .queue-cluster { width: 100%; height: auto; }
  .queue-picker { flex: 1; padding: 10px 12px; }
  .queue-picker-label { display: inline; font-size: var(--t-1); color: var(--text-faint); }
  .queue-select { font-size: 16px; padding: 0 22px 0 4px; min-height: auto; max-width: none; }
  .queue-cluster .icon-btn { width: 48px; height: auto; }
  .icon-btn { width: 44px; height: 44px; font-size: 18px; }
  .status-pill {
    padding: 0 14px;
    height: 48px;
    justify-content: center;
    width: 100%;
    border-radius: var(--r-sm);
  }
  .user-menu {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    padding: var(--s-3) 0 0;
    border-left: none;
    border-top: 1px solid var(--border);
    margin: var(--s-1) 0 0;
  }
  .user-menu-email { max-width: 100%; font-size: var(--t-3); color: var(--text-dim); }
  #logout-btn { width: 100%; min-height: 44px; }

  /* Body backdrop while drawer open. Must sit BELOW the topbar (z=25) so
     the drawer (which lives inside the topbar's stacking context) renders
     above this dimmer. Same-z-index ties resolve to "later in source"
     wins, and ::after paints after .topbar — so the backdrop's z-index
     has to be strictly less than the topbar's, not equal. */
  body.is-drawer-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 20;
    animation: drawer-fade 200ms ease-out;
  }
  @keyframes drawer-fade { from { opacity: 0; } to { opacity: 1; } }

  /* ── Single-screen swipe layout — NO scrolling on iPhone 16 Pro Max.
     The image grows to fill remaining vertical space; fixed-size info
     blocks below sit above the action bar. */
  main {
    padding: var(--s-2) var(--s-3) calc(80px + env(safe-area-inset-bottom));
    gap: var(--s-2);
  }
  #view-swipe { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); min-height: 0; }

  .progress { padding: 4px 6px; gap: 6px; font-size: var(--t-2); }
  .progress-meta { gap: var(--s-2); flex: 1 1 100%; align-items: center; }
  .progress-track { height: 3px; }
  /* Queue chip: visible on mobile only; takes priority position in the
     progress row. The rank label sits to its right, queue actions to the
     end (margin-left: auto). */
  .queue-chip { display: inline-flex; }
  #progress-label { font-size: var(--t-2); color: var(--text-dim); }
  .queue-actions { gap: 4px; flex-wrap: nowrap; }
  .btn-sm { font-size: 11.5px; padding: 4px 8px; min-height: 28px; }

  .card-stage {
    flex: 1;
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    padding: var(--s-2) var(--s-2) var(--s-3);
    gap: var(--s-2);
    border-radius: var(--r-md);
    min-height: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  }
  .card-image-wrap {
    flex: 1 1 auto;
    min-height: 120px;
    padding: 0;
    background: radial-gradient(circle at 50% 30%, rgba(122,184,255,0.10), transparent 65%);
    border-radius: var(--r-sm);
  }
  #card-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  }

  .card-info { gap: 6px; flex-shrink: 0; }
  .card-header { gap: 2px; }
  .card-header-top { align-items: center; gap: var(--s-2); }
  .card-header h2 {
    font-size: var(--t-5);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card-sub { font-size: 11.5px; line-height: 1.3; }
  .card-sub .dot-sep { margin: 0 4px; }
  .rarity { font-size: 10px; }
  .variant-chip { font-size: 9.5px; padding: 1px 5px; }

  /* Hide on-card disclosures + extras on mobile — full breakdown lives
     in the detail modal (tap the card image). */
  .variants-detail { display: none; }
  .condition-row { display: none; }
  /* Show TCGPlayer as a compact inline link on its own slim row so the user
     can buy without leaving the swipe view. Stays subtle so it doesn't
     compete with the metrics. */
  .card-links {
    display: flex;
    justify-content: center;
    margin-top: 0;
    padding: 2px 0;
  }
  .card-links a {
    font-size: 11.5px;
    color: var(--text-dim);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    line-height: 1.2;
  }
  .card-links a:hover { color: var(--accent); border-color: var(--accent); }

  .overall-pill { padding: 4px 10px; }
  .overall-pill-label { font-size: 9.5px; letter-spacing: 0.08em; }
  .overall-pill-value { font-size: var(--t-4); }

  /* Metrics — tight 4-column row instead of 2x2. */
  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
  .metric { padding: 6px 7px; border-radius: var(--r-sm); min-width: 0; }
  .metric-label {
    font-size: 9px;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .metric-value { font-size: var(--t-3); }

  /* Score bars — 4-column horizontal strip; tight, premium, no labels */
  .score-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
  .score-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
    grid-template-columns: none;
  }
  .score-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    text-align: center;
    white-space: nowrap;
  }
  .score-bar { height: 4px; width: 100%; }
  .score-num {
    font-size: 10px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* Action bar — fixed, full-bleed, safe-area aware */
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    margin: 0;
    padding: 8px 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    gap: 6px;
    background: linear-gradient(180deg, rgba(14,16,20,0.0), var(--bg-elev) 36%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9;
  }
  .action-btn {
    padding: var(--s-3) 4px;
    min-height: 56px;
    border-radius: var(--r-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.10);
    gap: 2px;
  }
  .action-label { font-size: var(--t-3); letter-spacing: 0.05em; }
  .action-hint { display: none; }

  /* Modals — full-screen on mobile. 100dvh tracks the iOS dynamic viewport
     so the URL bar collapsing doesn't leave a strip of bg showing. */
  .modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    inset: 0;
  }
  .modal-backdrop { display: none; }       /* the card itself fills the screen */
  .modal-card {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    animation: modal-slide-up 260ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .modal-header {
    padding: var(--s-3) var(--s-4);
    padding-top: max(var(--s-3), env(safe-area-inset-top));
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
  }
  .modal-title { font-size: var(--t-5); }
  /* The inner .modal-body keeps doing the scrolling — no override needed. */
  .modal-footer {
    padding: var(--s-3) var(--s-4);
    padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
  }
  .modal-footer button { min-height: 44px; flex: 1 1 auto; }
  .modal-close { width: 44px; height: 44px; }

  /* Builder form — stacked, comfortable touch targets */
  .builder-form { padding: var(--s-3) var(--s-4) 0; }
  .form-row { flex-direction: column; gap: 10px; }
  .form-field { width: 100% !important; flex: 1 1 100% !important; }
  .form-field input,
  .form-field select,
  .auth-field input {
    font-size: 16px;
    padding: 12px 14px;
    min-height: 44px;
  }
  .form-fieldset { padding: var(--s-3); }
  .set-picker-list { max-height: 35vh; }
  .set-picker-quick { gap: 6px; flex-wrap: wrap; }
  .set-picker-quick button { min-height: 36px; padding: 6px 10px; font-size: var(--t-2); }
  .builder-existing { padding: var(--s-3) var(--s-4); margin-top: var(--s-3); }

  /* Card-detail modal — image + meta stack */
  .card-modal-body {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: 0 var(--s-4) var(--s-3);
  }
  .card-modal-image-wrap {
    max-width: 240px;
    margin: 0 auto;
    aspect-ratio: 245 / 342;
  }
  .card-modal-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .card-modal-section { padding: var(--s-3) var(--s-4) 0; }
  .cm-action { padding: 10px 12px; font-size: var(--t-2); min-height: 44px; flex: 1; }
  .card-modal-actions { gap: 6px; flex: 1 1 100%; margin-left: 0; }

  /* ── Decisions view — high-density, single-column horizontal cards.
     The user wants to see the most info per scroll — image + name + meta
     + market + decision + queue all visible without an expand action. */
  #view-decisions { padding: var(--s-3) var(--s-3) calc(40px + env(safe-area-inset-bottom)); }
  .dec-header { padding-top: 0; margin-bottom: var(--s-3); }
  .dec-title { font-size: var(--t-6); }
  .dec-sub { font-size: 12px; }
  .dec-filter-row { flex-direction: column; align-items: stretch; gap: var(--s-2); margin-bottom: var(--s-3); }
  .dec-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  .dec-filters::-webkit-scrollbar { display: none; }
  .dec-chip { white-space: nowrap; min-height: 36px; padding: 7px 14px; flex-shrink: 0; }
  .dec-queue-filter { width: 100%; margin-left: 0; padding: 0 12px; height: 44px; }
  .dec-queue-filter .queue-select { max-width: none; flex: 1; padding: 6px 22px 6px 4px; font-size: var(--t-3); }
  .dec-grid { grid-template-columns: 1fr; gap: var(--s-2); }
  .dec-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: var(--s-3);
    padding: var(--s-2);
    align-items: stretch;
  }
  .dec-card-image-wrap { width: 88px; height: 122px; border-radius: var(--r-sm); }
  .dec-card-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); }
  .dec-card-body { padding: 0; gap: 4px; min-width: 0; }
  .dec-card-name { font-size: var(--t-3); }
  .dec-card-tag { font-size: 9px; padding: 2px 6px; }
  .dec-card-meta { font-size: 11.5px; }
  .dec-card-row { font-size: 11.5px; }
  /* Hide the inline 4-button re-decide row on mobile cards — open the
     detail modal for changes. The row was extra noise + a stray separator. */
  .dec-card-actions { display: none; }

  /* Auth view — full-bleed card */
  .auth-card {
    max-width: 100%;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    padding: var(--s-6) var(--s-5);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .auth-field input { font-size: 16px; }
  .auth-submit { padding: 14px 16px; font-size: var(--t-4); min-height: 48px; }

  /* Toast / undo hint — sit above action bar */
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); max-width: 90vw; }
  .undo-hint { bottom: calc(96px + env(safe-area-inset-bottom)) !important; font-size: 11.5px; padding: 6px 12px; }
  .undo-hint-card { max-width: 120px; }

  /* Empty state — tighter on mobile */
  .empty-state { padding: var(--s-7) var(--s-4); border-radius: var(--r-md); }
  .empty-state h2 { font-size: var(--t-5); margin: var(--s-3) 0 var(--s-1); }
  .empty-state p { margin: 0 0 var(--s-4); font-size: var(--t-3); }
  .empty-icon { width: 52px; height: 52px; font-size: var(--t-6); }

  /* Status popover — anchor near the (now-fullwidth) status pill */
  .status-popover { right: var(--s-3); left: var(--s-3); min-width: 0; }
}

/* Slide-up animation for modals on mobile. */
@keyframes modal-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Standalone PWA */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
}