/* TradeBinder — application styles */

/* Fonts (self-hosted woff2, served by WhiteNoise; preloaded in base.html) ---- */
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cinzel-v26-latin-600.bd1fede05376.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/cinzel-v26-latin-700.82175d611596.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-sans-3-v19-latin-regular.27ab01c4cb50.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-sans-3-v19-latin-600.9a35cba76eda.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/source-sans-3-v19-latin-700.9b13bd3653e3.woff2") format("woff2");
}

/* Single dark theme — "dark TCG premium": warm near-black, gold & parchment. */
:root {
  color-scheme: dark;
  --bg: #131009;
  --surface: #1e1812;
  --surface-2: #292117;
  --surface-3: #0e0b07;
  --text: #e7dfd0;
  --muted: #a49786;
  --border: #3d2c18;
  --border-strong: #5a4426;
  --gold: #ecbe6e;
  --gold-bright: #f7d795;
  --gold-deep: #b98f47;
  --gold-faint: rgba(236, 190, 110, .12);
  --oxblood: #531e18;
  --oxblood-bright: #7a2e24;
  --primary: #ecbe6e;
  --primary-hover: #f7d795;
  --primary-contrast: #201505;
  --success: #86c28b;
  --success-bg: rgba(134, 194, 139, .12);
  --warning: #e0aa52;
  --warning-bg: rgba(224, 170, 82, .13);
  --danger: #e2745f;
  --danger-bg: rgba(226, 116, 95, .13);
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
  --ring: 0 0 0 3px rgba(236, 190, 110, .28);
  --font-display: "Cinzel", "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  font-family: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--gold-bright); }

h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; margin: 0 0 .25rem; letter-spacing: .01em; color: var(--gold); }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin: 1.5rem 0 .75rem; letter-spacing: .02em; color: var(--gold-deep); }
h3 { font-size: .95rem; margin: 0 0 .5rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* Inline SVG icons (symbols defined in base.html) */
.icon { width: 1em; height: 1em; vertical-align: -.13em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Layout ------------------------------------------------------------------ */
/* 68rem: wide enough that the search-results rows (one-line add controls) fit
   without the horizontal scrollbar; .table-scroll stays as the narrow-window
   fallback. */
.container { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* Top nav ----------------------------------------------------------------- */
.topnav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .7rem 1.25rem;
  background: color-mix(in srgb, var(--surface-3) 90%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--gold-faint);
}
.topnav .brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: .06em; color: var(--gold);
  display: inline-flex; align-items: center; gap: .45rem;
}
.topnav .brand .icon { width: 1.15em; height: 1.15em; stroke: var(--gold-deep); }
.topnav .brand:hover { text-decoration: none; color: var(--gold-bright); }
.topnav .spacer { flex: 1; }
.topnav a:not(.brand) {
  color: var(--muted); font-weight: 600; padding: .3rem .1rem;
  border-bottom: 2px solid transparent;
}
.topnav a:not(.brand):hover { color: var(--gold-bright); text-decoration: none; }
.topnav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold-deep); }
.topnav .who { color: var(--muted); font-size: .9rem; }
@media (max-width: 40rem) {
  .topnav { flex-wrap: wrap; gap: .4rem .9rem; row-gap: .15rem; padding: .55rem .9rem; }
  .topnav .who { display: none; }  /* email crowds phones; Log out still shows */
}

/* Buttons ----------------------------------------------------------------- */
.btn, button {
  font: inherit; font-weight: 600;
  padding: .45rem .9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
  transition: background .12s, border-color .12s, transform .04s;
}
.btn:hover, button:hover { background: var(--surface-2); border-color: var(--border-strong); text-decoration: none; }
.btn:active, button:active { transform: translateY(1px); }
.btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--ring); border-color: var(--primary);
}
.btn-primary, button.btn-primary {
  background: var(--primary); border-color: var(--primary); color: var(--primary-contrast);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover, button.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.btn-sm { padding: .25rem .55rem; font-size: .82rem; }
button:disabled { opacity: .5; cursor: not-allowed; }
.linkbtn { background: none; border: none; padding: 0; color: var(--muted); font: inherit; font-weight: 500; }
.linkbtn:hover { background: none; color: var(--text); text-decoration: underline; }

/* Panels & sections ------------------------------------------------------- */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-top-color: var(--border-strong);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
}
.page-actions { display: flex; gap: 1rem; margin: .25rem 0 1.5rem; font-weight: 500; flex-wrap: wrap; }
.toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.muted, .helptext { color: var(--muted); font-size: .88rem; }
.errorlist { color: var(--danger); list-style: none; padding: 0; margin: .5rem 0; }

/* Inputs ------------------------------------------------------------------ */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=file], select, textarea {
  font: inherit; color: var(--text); background: var(--surface-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .45rem .6rem;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
textarea { width: 100%; }
.search-input {
  width: 100%; max-width: 32rem; padding: .6rem .8rem; font-size: 1rem;
}
.form p { margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; }
.form label { min-width: 8rem; color: var(--muted); font-weight: 500; }

/* Tables ------------------------------------------------------------------ */
/* On phones the tables keep their natural width and swipe inside this wrapper
   instead of crushing their columns (or panning the whole page). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 44rem) {
  .table-scroll > .data-table { min-width: 42rem; }
  .table-scroll > .cardgroup-table { min-width: 48rem; }  /* room for the add-a-copy form */
  /* Trades rows carry 9 columns (Market + the Traded ✓ count box) — they
     need a wider swipe canvas than the other tables. */
  .table-scroll > .data-table--trades { min-width: 54rem; }
  /* Wishlist rows carry the Got ✓ count box + two buttons in the actions cell. */
  .table-scroll > .data-table--wishlist { min-width: 52rem; }
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--gold-deep); font-weight: 700; padding: .5rem .6rem; border-bottom: 1px solid var(--border);
}
.data-table tbody td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table .actions { white-space: nowrap; text-align: right; }
.num { font-variant-numeric: tabular-nums; }

/* Inline row editing ------------------------------------------------------ */
/* Fixed column widths (set via <colgroup>) so a row entering edit mode can't
   re-balance the table — keeps everything from shifting horizontally. */
.data-table--fixed { table-layout: fixed; }
.data-table--fixed td, .data-table--fixed th { overflow: hidden; text-overflow: ellipsis; }
.data-table tr.editing { background: var(--surface-2); }
/* Compact controls sized to their (fixed) cell so the row height barely changes. */
.data-table tr.editing select,
.data-table tr.editing input[type="number"] {
  width: 100%; padding: .2rem .3rem; margin: 0; line-height: 1.3; box-sizing: border-box;
}
.field-error { color: var(--danger); font-size: .8rem; margin-top: .25rem; }

/* Badges ------------------------------------------------------------------ */
.badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; border: 1px solid var(--border); color: var(--muted);
}
.badge--mutual { color: var(--success); background: var(--success-bg); border-color: transparent; }
.badge--ok { color: var(--success); background: var(--success-bg); border-color: transparent; }
.badge--warn { color: var(--warning); background: var(--warning-bg); border-color: transparent; }
.badge--err { color: var(--danger); background: var(--danger-bg); border-color: transparent; }

/* Search results ---------------------------------------------------------- */
.results { list-style: none; padding: 0; margin: .75rem 0 0; max-width: 42rem; }
.results li { border-bottom: 1px solid var(--border); padding: .5rem 0; }
.result-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.result-form .grow { flex: 1; min-width: 12rem; }
/* Fixed-width controls so dropdown vs fixed-language rows align cleanly. */
.result-form .finish-sel { width: 9rem; }
.result-form .lang-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 3.75rem; }
.result-form .lang-cell select { width: 100%; }
.result-form .qty { width: 4rem; }

/* Messages ---------------------------------------------------------------- */
.messages { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.messages li {
  padding: .6rem .85rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: .5rem;
  background: var(--success-bg); color: var(--success); font-weight: 500;
  border-left: 3px solid var(--success);
}
.messages li.error { background: var(--danger-bg); color: var(--danger); border-left-color: var(--danger); }

/* Matches ----------------------------------------------------------------- */
.match-grid { display: flex; gap: 2rem; flex-wrap: wrap; padding: .25rem 1rem 1rem; }
.match-col { flex: 1; min-width: 16rem; }
.match-list { list-style: none; margin: .25rem 0 0; padding: 0; }
.match-list li {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.match-list li:last-child { border-bottom: none; }
.match-list li > span { display: flex; flex-direction: column; gap: .05rem; font-size: .9rem; }
.match-qty { color: var(--gold-deep); font-size: .82rem; font-weight: 600; }

/* Empty state ------------------------------------------------------------- */
.empty { color: var(--muted); padding: 1rem .25rem; }

/* Code/format help -------------------------------------------------------- */
pre.help { background: var(--surface-2); padding: .8rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); overflow-x: auto; font-size: .85rem; }
code { background: var(--surface-2); padding: .05rem .3rem; border-radius: 4px; font-size: .9em; }

/* Pitch badge (FAB: 1=red, 2=yellow, 3=blue) ------------------------------ */
.pitch {
  display: inline-block; min-width: 1.15rem; text-align: center;
  padding: .02rem .32rem; border-radius: 5px; font-size: .72rem; font-weight: 800;
  color: #fff; vertical-align: middle;
}
.pitch--1 { background: #cf4c3c; }
.pitch--2 { background: #c9941a; }
.pitch--3 { background: #3d7dc9; }
.cardno { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Set list ---------------------------------------------------------------- */
.set-list { columns: 2; column-gap: 2rem; max-width: 52rem; padding-left: 1.1rem; }
@media (max-width: 40rem) { .set-list { columns: 1; } }
.set-list li { margin: .15rem 0; break-inside: avoid; }

/* Catalogue search (ported look from fab-collection-ui) -------------------- */
.htmx-indicator { opacity: 0; transition: opacity .15s; margin-left: .5rem; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Label stays in its own column; the chips wrap to the right of it. */
.chip-group { display: flex; gap: .4rem; align-items: flex-start; margin-top: .6rem; }
.chip-group .chips { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; }
.chip-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; min-width: 5.2rem; flex: none; padding-top: .3rem; }
@media (max-width: 40rem) {
  /* Phones: label above full-width chips — halves the chip rows. */
  .chip-group { flex-direction: column; gap: .3rem; }
  .chip-label { padding-top: 0; }
}
.filter-chip { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.filter-chip input { position: absolute; opacity: 0; pointer-events: none; }
.filter-chip span {
  display: inline-block; padding: .22rem .6rem; border-radius: 999px; font-size: .82rem;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  transition: background .12s, color .12s, border-color .12s;
}
.filter-chip:hover span { background: var(--surface-2); }
.filter-chip input:checked + span {
  background: var(--primary); border-color: var(--primary);
  color: var(--primary-contrast); font-weight: 600;
}
.filter-chip input:focus-visible + span { box-shadow: var(--ring); }

/* Grouped results */
details.cardgroup {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin: .5rem 0; box-shadow: var(--shadow);
}
details.cardgroup > summary {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .7rem 1rem; cursor: pointer; list-style: none; user-select: none;
}
details.cardgroup > summary::-webkit-details-marker { display: none; }
.group-thumb {
  width: 34px; height: 48px; border-radius: 3px; object-fit: cover; flex: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5); border: 1px solid var(--border);
}
.group-thumb--none {
  display: inline-block;
  background: linear-gradient(150deg, var(--oxblood) 0%, var(--surface-3) 85%);
}
details.cardgroup > summary::after {
  content: "▸"; margin-left: auto; color: var(--gold-deep); font-size: .85rem;
  transition: transform .15s;
}
details.cardgroup > summary:hover { background: var(--surface-2); border-radius: var(--radius); }
details.cardgroup > summary > strong {
  font-family: var(--font-display); font-weight: 600; font-size: .92rem; letter-spacing: .02em;
}
details.cardgroup[open] > summary::after { transform: rotate(90deg); }
details.cardgroup[open] { border-color: var(--gold-deep); }
details.cardgroup[open] > summary:hover { border-radius: var(--radius) var(--radius) 0 0; }
.cardgroup-table { margin: 0 0 .25rem; }
.cardgroup-table td { font-size: .9rem; }
/* Long set names clamp with an ellipsis (full name in the title tooltip) so the
   row stays one line; the add-a-copy controls likewise never wrap. */
.cardgroup-table .set-cell {
  max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Flat (card-# sorted) results share the grouped view's chrome: same gilded box,
   and each row carries the summary-style thumbnail + Cinzel name. */
.flat-results {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin: .5rem 0; padding: .35rem .5rem;
}
/* Flat rows stack the set (muted) under the card name in one cell — one fewer
   column, so the add-a-copy controls stay on screen without horizontal scroll. */
.flat-name { max-width: 17rem; }
.flat-name-wrap { display: flex; align-items: center; gap: .55rem; }
.flat-name-wrap .group-thumb { flex: none; }
.flat-name-stack { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.flat-name-stack > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flat-name strong {
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  letter-spacing: .02em;
}
.flat-set { font-size: .8rem; }
.cardgroup-table .result-form { flex-wrap: nowrap; }
.cardgroup-table .result-form button { white-space: nowrap; flex: none; }

/* Rarity badges (palette from the old app) */
.rarity-badge {
  display: inline-block; padding: .1rem .5rem; border-radius: 5px;
  font-size: .74rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.rarity-common { background: #64748b; }
.rarity-rare { background: #06b6d4; }
.rarity-super-rare { background: #3b62d9; }
.rarity-majestic { background: #db2777; }
.rarity-legendary { background: #f97316; }
.rarity-fabled { background: #dc2626; }
.rarity-marvel { background: #0aa173; }
.rarity-promo { background: #7c3aed; }
.rarity-promo-marvel { background: #6d3fd1; }
.rarity-gold { background: #facc15; color: #201505; }
.rarity-gold-marvel { background: #f59e0b; }
.rarity-token { background: #14b8a6; }
.rarity-basic { background: #94a3b8; color: #201505; }

/* Pitch row tints (translucent — work in light & dark) */
.pitch-row-1 { background: rgba(239, 68, 68, .07); }
.pitch-row-2 { background: rgba(234, 179, 8, .09); }
.pitch-row-3 { background: rgba(59, 130, 246, .08); }

/* Empty / prompt state */
.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--muted); }
.empty-state-icon { font-size: 2.6rem; margin-bottom: .6rem; color: var(--gold-deep); }
.empty-state-icon .icon { width: 1.2em; height: 1.2em; stroke-width: 1.2; }
.empty-state-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.1rem; color: var(--text);
}
.cardgroup-table .result-form { display: inline-flex; }

/* Hover card-image previews (hotlinked from the official CDN) ----------------
   position:fixed keeps the popover unclippable; the small script in base.html
   places it next to the hovered link, clamped inside the viewport. Without JS
   these offsets pin it centre-right as a fallback. */
.card-preview {
  display: none; position: fixed; z-index: 40;
  top: 50%; right: 1.25rem; transform: translateY(-50%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .4rem; box-shadow: var(--shadow);
}
.card-preview:empty { display: none !important; }  /* nothing to show pre-fetch */
td.preview-anchor:hover .card-preview { display: block; }
td.preview-anchor .cell-clip {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-preview-imgs { display: flex; gap: .4rem; }
.card-preview-imgs img {
  width: 240px; height: auto; display: block; border-radius: 10px;
  aspect-ratio: 376 / 526;  /* card faces' CDN dimensions — sizes the popover pre-load */
}
/* Sideways/split cards (Burn Up||Shock) ship as portrait scans meant to be read
   landscape — rotate them. 240px-wide portrait ≈ 336px tall → rotated box 336×240. */
.card-preview-imgs.horizontal { position: relative; width: 336px; height: 240px; }
.card-preview-imgs.horizontal img {
  width: 240px; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
/* A few CDN scans are rotated the opposite way (MISROTATED_SCANS in cardnums.py). */
.card-preview-imgs.horizontal.flip img { transform: translate(-50%, -50%) rotate(-90deg); }
/* Popover with no loadable image (missing CDN file) — hidden by the base.html script. */
.card-preview.preview-broken { display: none !important; }
/* Foil shine (cardvault-style): a gradient layered over the scan with
   mix-blend-mode color-dodge, masked to a soft spotlight. --fx/--fy are unitless
   0–100 cursor coordinates set by base.html; without JS it sits at the centre. */
.card-preview-imgs.foil {
  position: relative;
  transform: perspective(900px)
    rotateY(calc((var(--fx, 50) - 50) * 0.1deg))
    rotateX(calc((50 - var(--fy, 50)) * 0.1deg));
  transition: transform .15s ease-out;
}
.foil-shine {
  position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  mix-blend-mode: color-dodge; opacity: .75;
  background-size: 220% 220%;
  background-position: calc(var(--fx, 50) * 1%) calc(var(--fy, 50) * 1%);
  -webkit-mask-image: radial-gradient(circle at calc(var(--fx, 50) * 1%) calc(var(--fy, 50) * 1%),
      rgba(255, 255, 255, .9) 12%, rgba(255, 255, 255, 0) 55%);
  mask-image: radial-gradient(circle at calc(var(--fx, 50) * 1%) calc(var(--fy, 50) * 1%),
      rgba(255, 255, 255, .9) 12%, rgba(255, 255, 255, 0) 55%);
}
.foil--rainbow .foil-shine {
  background-image: repeating-linear-gradient(130deg,
    hsla(283, 49%, 60%, 1), hsla(2, 74%, 59%, 1), hsla(75, 60%, 50%, .7),
    hsla(93, 56%, 52%, 1), hsla(176, 38%, 50%, 1), hsla(228, 100%, 77%, 1),
    hsla(283, 49%, 61%, 1));
}
.foil--cold .foil-shine {
  opacity: .55;
  background-image: repeating-linear-gradient(130deg,
    hsla(210, 15%, 65%, 1), hsla(200, 30%, 85%, 1), hsla(220, 10%, 55%, .8),
    hsla(190, 25%, 80%, 1), hsla(210, 15%, 65%, 1));
}
.foil--gold .foil-shine {
  opacity: .55;
  background-image: repeating-linear-gradient(130deg,
    hsla(40, 65%, 55%, 1), hsla(48, 90%, 75%, 1), hsla(35, 50%, 45%, .8),
    hsla(45, 85%, 70%, 1), hsla(40, 65%, 55%, 1));
}
.trade-cell { white-space: nowrap; }
.trade-cell input[type=number] { width: 3.6rem; padding: .2rem .3rem; }
.trade-cell .muted { font-size: .8rem; }
/* Inline quantity inputs inside tables (wishlist Qty) match the trade input. */
.data-table td.num input.qty { width: 3.6rem; padding: .2rem .3rem; }
/* The Traded ✓ count box lives in the actions cell — same compact sizing,
   or it renders at the browser's default width and bursts the column. */
.data-table .actions input.qty { width: 3.6rem; padding: .2rem .3rem; }
/* "Got [n] ✓" / "Traded [n] ✓" read as one labeled phrase, not two stray
   number boxes (owner: which qty box is which?). */
.count-action { display: inline-flex; gap: .3rem; align-items: center; white-space: nowrap; }
/* Per-finish owned breakdown next to the Search page's owned count. */
.owned-breakdown { font-size: .76rem; white-space: nowrap; }

/* Binder grid view (?view=grid) --------------------------------------------- */
.view-toggle { display: inline-flex; margin-left: auto; }
.view-toggle .btn { border-radius: 0; margin-left: -1px; }
.view-toggle .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.view-toggle .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.view-toggle .btn.active {
  background: var(--gold-faint); color: var(--gold); border-color: var(--border-strong);
  position: relative; z-index: 1;
}
.binder-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem; padding: 1.1rem; margin-top: 1rem;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius);
}
.card-tile {
  position: relative; display: block; border-radius: 8px;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.card-tile img, .card-tile-back {
  display: block; width: 100%; aspect-ratio: 376 / 526; border-radius: 8px;
  border: 1px solid var(--border); object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.card-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .55), 0 0 0 1px var(--gold-deep);
  text-decoration: none;
}
.card-tile-back {
  background: linear-gradient(150deg, var(--oxblood) 0%, var(--surface-3) 90%);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: .75rem;
}
.card-tile-name {
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  color: var(--gold-deep); line-height: 1.3; overflow-wrap: anywhere;
}
.tile-qty {
  position: absolute; right: .4rem; bottom: .45rem;
  background: rgba(14, 11, 7, .88); color: var(--gold);
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--border-strong);
}
.tile-price {
  position: absolute; left: .4rem; top: .45rem;
  background: rgba(14, 11, 7, .88); color: var(--text);
  font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: .05rem .4rem; border-radius: 999px; border: 1px solid var(--border-strong);
}
.tile-dots { position: absolute; right: .45rem; top: .45rem; display: flex; gap: .3rem; }
.tile-dot {
  width: .62rem; height: .62rem; border-radius: 50%;
  border: 1px solid rgba(14, 11, 7, .8); box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.tile-dot--trade { background: var(--success); }
.tile-chip {
  position: absolute; left: .4rem; bottom: .45rem; max-width: calc(100% - 3.4rem);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(14, 11, 7, .88); color: var(--gold-bright);
  font-size: .72rem; font-weight: 600;
  padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--gold-deep);
}
.tile-dot--foil {
  background: conic-gradient(#c96ee0, #e05a52, #a4c94a, #52b8a4, #7d95e8, #c96ee0);
}

/* Friends --------------------------------------------------------------------- */
.friend-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.friend-list li {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .65rem .9rem; margin: .4rem 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.friend-list .friend-name { font-weight: 600; }
.friend-list .friend-actions { margin-left: auto; display: flex; gap: .4rem; align-items: center; }

/* Auth entrance & landing --------------------------------------------------- */
body.auth-page {
  background:
    radial-gradient(60rem 40rem at 50% -10rem, color-mix(in srgb, var(--oxblood) 55%, transparent), transparent 70%),
    var(--bg);
  min-height: 100vh;
}
.auth-card {
  max-width: 26rem; margin: 9vh auto 0;
  border-top: 2px solid var(--gold-deep);
  padding: 1.6rem 1.75rem 1.25rem;
}
.auth-card h1 { margin-bottom: .1rem; }
.auth-card .form label { min-width: 100%; margin-bottom: -.25rem; }
.auth-card .form input { width: 100%; }
.auth-submit { width: 100%; justify-content: center; padding: .6rem; }
.auth-foot { border-top: 1px solid var(--border); padding-top: .8rem; margin-bottom: 0; }

.hero { display: flex; gap: 3rem; align-items: center; padding: 3rem 0 1rem; flex-wrap: wrap; }
.hero-copy { flex: 1; min-width: 18rem; }
.hero-copy h1 { font-size: 2.1rem; line-height: 1.2; }
.hero-copy p { max-width: 34rem; font-size: 1.05rem; }
.hero-fan { position: relative; width: 21rem; height: 17rem; flex: none; margin: 0 auto; }
.hero-fan img {
  position: absolute; width: 11rem; aspect-ratio: 376 / 526; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  border: 1px solid var(--border-strong);
}
.hero-fan img:nth-child(1) { left: 0; top: 2.2rem; transform: rotate(-9deg); }
.hero-fan img:nth-child(2) { left: 5rem; top: .6rem; z-index: 1; }
.hero-fan img:nth-child(3) { left: 10rem; top: 2.2rem; transform: rotate(9deg); }

.home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.home-tile { display: flex; flex-direction: column; gap: .15rem; margin: 0; }
.home-tile:hover { text-decoration: none; border-color: var(--gold-deep); }
.home-tile .icon { width: 1.6rem; height: 1.6rem; stroke: var(--gold-deep); margin-bottom: .35rem; }
.home-tile-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: .02em; color: var(--gold);
}

/* Set filter box + its clear button (see binder/_set_filter.html). */
/* One clear affordance per field: the native search-cancel ✕ is hidden
   app-wide (it doubled up with ours and doesn't exist on iOS anyway). */
input[type="search"]::-webkit-search-cancel-button { display: none; }

.set-filter { display: inline-flex; gap: .35rem; align-items: center; position: relative; }
.set-filter input { padding-right: 2.2rem; }
.set-filter .set-clear {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; box-shadow: none;
  color: var(--muted); font-size: 1rem; line-height: 1; padding: .3rem .5rem; cursor: pointer;
}
.set-filter .set-clear:hover { color: var(--text); background: none; border: none; }
/* The ✕s appear only when there's something to clear (mirrors native behavior). */
.set-filter input:placeholder-shown ~ .set-clear,
.find-box input:placeholder-shown ~ .q-clear { display: none; }
/* Our filterable dropdown replacing <datalist> (invisible on iOS — it only
   feeds the keyboard suggestion bar there). */
.set-suggest {
  position: absolute; top: calc(100% + .3rem); left: 0; z-index: 40;
  min-width: 100%; max-width: 22rem; max-height: 14rem; overflow-y: auto;
  /* Touch-scrollable: momentum scrolling, vertical pans stay in the list
     instead of chaining to (or panning) the page. */
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  margin: 0; padding: .25rem; list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.set-suggest li {
  padding: .4rem .6rem; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.set-suggest li:hover, .set-suggest li.active { background: var(--surface-3); }

/* Collapsible "More filters" row (class/talent/type/cost/format dropdowns). */
.more-filters { margin-top: .6rem; }
.more-toggle { color: var(--muted); }
.more-toggle::after { content: " ▾"; font-size: .8em; }
.more-toggle[aria-expanded="true"]::after { content: " ▴"; }
.more-dot {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--primary); vertical-align: middle; margin-left: .15rem;
}
.more-panel { margin-top: .5rem; }
/* The hidden attribute's UA display:none loses to the author .toolbar
   display:flex rule — restate it so the collapse actually collapses. */
.more-panel[hidden] { display: none; }

/* Main search box with the clear-everything ✕ tucked inside its right edge. */
.find-box { position: relative; display: inline-block; width: 100%; max-width: 32rem; vertical-align: middle; }
.find-box .search-input { max-width: none; padding-right: 2.4rem; }
.q-clear {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; box-shadow: none;
  color: var(--muted); font-size: 1rem; line-height: 1; padding: .3rem .5rem; cursor: pointer;
}
.q-clear:hover { color: var(--text); background: none; border: none; }