/* Collection panel — private PRO-only inventory. */

.collection-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- Collection intelligence dashboard --- */
.collection-stats-dashboard { width: 100%; padding-bottom: 18px; }
.collection-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.collection-kpi { position: relative; min-height: 126px; padding: 16px; border: 1px solid var(--border-color); border-radius: 12px; background: color-mix(in srgb, var(--widget-bg) 94%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; overflow: hidden; }
.collection-kpi-label { color: var(--chart-title-color); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.collection-kpi-value { color: var(--accent-color); font-size: clamp(24px, 2.2vw, 34px); font-weight: 750; font-variant-numeric: tabular-nums; }
.collection-kpi-value.positive { color: var(--success-color, #45bd79); }
.collection-kpi-value.negative { color: var(--danger-color, #f06a70); }
.collection-kpi-detail { color: var(--text-muted); font-size: 11px; line-height: 1.3; }
.collection-dashboard-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.collection-dashboard-grid--ranked, .collection-dashboard-grid--charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.collection-dashboard-card { min-width: 0; padding: 14px; border: 1px solid var(--border-color); border-radius: 12px; background: color-mix(in srgb, var(--widget-bg) 94%, transparent); }
.collection-dashboard-card > header { margin-bottom: 12px; text-align: center; }
.collection-dashboard-card h3 { margin: 0; color: var(--text-primary); font-size: 14px; }
.collection-dashboard-card header p { margin: 4px 0 0; color: var(--text-muted); font-size: 11px; font-style: italic; }
.collection-ranked-row { display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 56px; padding: 7px 4px; border-top: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent); }
.collection-ranked-thumb { padding: 0; border: 0; background: transparent; cursor: pointer; width: 52px; aspect-ratio: 63/88; border-radius: 6px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.collection-ranked-thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.collection-ranked-row img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; object-position: top; }
.collection-ranked-position { color: var(--accent-color); font-size: 12px; font-weight: 800; text-align: center; }
.collection-ranked-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.collection-ranked-copy strong { overflow: hidden; color: var(--text-primary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.collection-ranked-copy span { color: var(--text-muted); font-size: 10px; }
.collection-ranked-metric { color: var(--text-primary); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Fanned "hand" preview panels — Most Owned / Expensive / Deck Favorites /
   Hidden Gems / price movers. Card images overlap like a held hand; each entry's
   data sits straight in an arc above its card, always visible and never
   overlapping (label width is kept below the card spacing at every size).
   All sizing is fluid off the panel width via container queries so the cards
   grow to use the available space; hovering straightens and lifts a card for
   extra emphasis, but no hover is required to read any entry. */
/* The panel is the query container so all `cqw` below resolve against the panel
   width. (An element with `container-type` queries its ancestor container, not
   itself, so the fan's own height must be measured from the panel, not here.) */
/* The fan carries its own query container (`CardFan` renders it), so `cqw`
   always resolves against the width the fan actually has rather than the
   viewport. `.collection-fan-panel` is kept because the Collection panel sizes
   other things against it, but the fan no longer depends on a caller providing
   one — without it the cards sized to the whole window and overflowed any
   narrower column. */
.card-fan-host { container-type: inline-size; }
.collection-fan-panel { container-type: inline-size; }
.collection-fan {
  position: relative;
  width: 100%;
  /* Definite height (absolute children can't size it) — just tall enough for the
     fan, scaling with the panel width, with a floor so it never collapses. */
  height: max(248px, 52cqw);
  margin-top: 4px;
}
.collection-fan-card {
  /* Signed offset from the middle card, e.g. -2,-1,0,1,2 for five cards. */
  --o: calc(var(--i) - (var(--fan-n) - 1) / 2);
  --dx: calc(var(--o) * 18cqw);                       /* horizontal spread */
  --dip: calc(var(--o) * var(--o) * 1.8cqw);          /* outer cards dip down (arc) */
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: var(--i);
  width: 23cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transform: translateX(calc(-50% + var(--dx))) translateY(var(--dip));
  transition: transform .18s ease;
}
.collection-fan-card:hover {
  z-index: 30;
  transform: translateX(calc(-50% + var(--dx))) translateY(calc(var(--dip) - 20px));
}
.collection-fan-label {
  width: 16.5cqw;                                      /* < 18cqw spread → never overlaps */
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 5px 3px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
  background: color-mix(in srgb, var(--widget-bg) 90%, #000);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
.collection-fan-label strong { max-width: 100%; overflow: hidden; color: var(--text-primary); font-size: clamp(9px, 1.95cqw, 12px); text-overflow: ellipsis; white-space: nowrap; }
.collection-fan-label span { max-width: 100%; overflow: hidden; color: var(--text-muted); font-size: clamp(8px, 1.55cqw, 10px); text-overflow: ellipsis; white-space: nowrap; }
.collection-fan-metric { color: var(--accent-color); font-size: clamp(9px, 1.9cqw, 12px); font-weight: 800; font-variant-numeric: tabular-nums; }
.collection-fan-metric.positive { color: var(--success-color, #45bd79); }
.collection-fan-metric.negative { color: var(--danger-color, #f06a70); }
.collection-fan-thumb {
  width: 100%;
  aspect-ratio: 63/88;
  overflow: hidden;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  background: color-mix(in srgb, var(--widget-bg) 90%, #000);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
  /* Only the image fans (angled); the label above stays perfectly straight. */
  transform: rotate(calc(var(--o) * 6deg));
  transform-origin: center top;
  transition: transform .18s ease, box-shadow .18s ease;
}
.collection-fan-card:hover .collection-fan-thumb { transform: rotate(0deg) scale(1.04); box-shadow: 0 16px 34px rgba(0, 0, 0, .6); }
.collection-fan-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.collection-fan-thumb > .deck-card-preview-image,
.collection-fan-thumb .card-image-container { width: 100%; height: 100%; }
.collection-fan-placeholder { width: 100%; height: 100%; }

/* One or two cards leave most of the panel empty at the shared 23cqw size, and
   with no crowding to design around the art can simply be bigger. The label
   keeps sitting directly above its own card. */
.collection-fan--one { height: max(268px, calc(56cqw + 70px)); }
.collection-fan--one .collection-fan-card { width: 40cqw; gap: 5px; }
.collection-fan--one .collection-fan-label { width: 40cqw; }

.collection-fan--two { height: max(252px, calc(48cqw + 70px)); }
.collection-fan--two .collection-fan-card { width: 34cqw; --dx: calc(var(--o) * 40cqw); }
.collection-fan--two .collection-fan-label { width: 36cqw; }

/* Narrow panels can't fit five single-row labels side by side, so the names get
   crushed. Below ~480px of panel width, stack the labels into a two-row zig-zag
   arc above the fan: same-row labels are two card-slots apart, so each label can
   be ~double the width and show the full name without a hover. Container-query
   based, so it only applies to genuinely narrow panels (mobile, or a cramped
   2-column layout) and leaves the desktop single-row arc alone. */
@container (max-width: 480px) {
  /* One tunable label height drives the row offset and the thumb's top padding,
     so the two rows never overlap and nothing clips. --label-h must fit three
     single lines (name, set/number, metric) plus the label's own padding. */
  .collection-fan { --label-h: 48px; --label-gap: 6px; height: max(268px, 76cqw); }
  .collection-fan-card {
    width: 24cqw;
    --dx: calc(var(--o) * 19cqw);
    --dip: 0px;                 /* flat rows read cleaner than an arc at this size */
    /* Reserve both label rows (+ the gap between them and the thumb). */
    padding-top: calc(var(--label-h) * 2 + var(--label-gap) + 6px);
    gap: 0;
  }
  .collection-fan-thumb { transform: rotate(calc(var(--o) * 5deg)); }
  .collection-fan-card:hover .collection-fan-thumb { transform: rotate(0deg) scale(1.04); }
  .collection-fan-label {
    position: absolute;         /* out of flow so its width can exceed the card */
    left: 50%;
    top: calc(var(--label-h) + var(--label-gap));   /* lower row (even slots) */
    transform: translateX(-50%);
    width: 30cqw;
    height: var(--label-h);
    justify-content: center;
    padding: 3px 5px;
    line-height: 1.2;
  }
  .collection-fan-card:nth-child(odd) .collection-fan-label { top: 0; }   /* upper row */
  .collection-fan-label strong { font-size: 10px; }
  .collection-fan-label span { font-size: 8px; }
  .collection-fan-metric { font-size: 10px; white-space: nowrap; }

  /* The zig-zag only exists to buy label width when five labels share a row.
     With one or two there is width to spare, so collapse back to a single
     label row sitting right above the art — and reclaim the freed vertical
     space for a larger card. */
  .collection-fan--one,
  .collection-fan--two { --label-h: 44px; }

  .collection-fan--one { height: max(292px, calc(74cqw + 64px)); }
  .collection-fan--two { height: max(258px, calc(59cqw + 64px)); }

  .collection-fan--one .collection-fan-card,
  .collection-fan--two .collection-fan-card {
    padding-top: calc(var(--label-h) + var(--label-gap));
  }

  .collection-fan--one .collection-fan-label,
  .collection-fan--two .collection-fan-label,
  .collection-fan--one .collection-fan-card:nth-child(odd) .collection-fan-label,
  .collection-fan--two .collection-fan-card:nth-child(odd) .collection-fan-label {
    top: 0;
  }

  .collection-fan--one .collection-fan-card { width: 52cqw; }
  .collection-fan--one .collection-fan-label { width: 52cqw; }

  .collection-fan--two .collection-fan-card { width: 42cqw; --dx: calc(var(--o) * 48cqw); }
  .collection-fan--two .collection-fan-label { width: 46cqw; }
}

.collection-widget-empty { min-height: 180px; display: grid; place-items: center; padding: 20px; color: var(--text-muted); font-size: 12px; text-align: center; }
.collection-chart-panel { min-height: 260px; }
.collection-bar-list { display: flex; flex-direction: column; gap: 9px; }
.collection-bar-list--compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.collection-bar-row { display: grid; grid-template-columns: 48px minmax(50px, 1fr) 34px; gap: 8px; align-items: center; min-height: 17px; color: var(--text-muted); font-size: 11px; }
.collection-bar-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-bar-row > b { color: var(--text-primary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.collection-bar-track { height: 8px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--border-color) 75%, transparent); }
.collection-bar-track i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, var(--accent-color), var(--accent-hover)); }

/* Mana / generic symbols used as chart keys. */
.collection-mana-symbol { width: 15px; height: 15px; vertical-align: middle; }
.collection-mana-generic { display: inline-flex; align-items: center; gap: 1px; color: var(--text-muted); font-size: 11px; }
.collection-card-type-symbol { display: inline-block; font-size: 15px; line-height: 1; vertical-align: middle; }

/* Donut pie charts (Color Identity, Rarity, Condition, Finish) now render via
   the shared DonutChart component — ring/legend styles live in components.css
   (.donut-*). Only the collection-specific legend width remains here. */
.collection-pie-panel .donut-legend { min-width: 172px; }
.collection-tag-panel { grid-column: 1 / -1; min-height: 210px; }
.collection-tag-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 9px; min-height: 145px; }
.collection-tag-cloud span { padding: 7px 10px; border: 1px solid var(--accent-color); border-radius: 10px; color: var(--accent-color); font-size: 12px; }
.collection-tag-cloud b { display: inline-grid; min-width: 20px; height: 20px; margin-left: 4px; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--accent-color) 16%, transparent); font-size: 10px; }
.collection-stats-empty { min-height: 380px; }
.collection-stats-empty h3 { margin: 12px 0 0; color: var(--text-primary); }
.collection-dashboard-grid--market { grid-template-columns: repeat(2,minmax(0,1fr)); }
.collection-market-arrow { font-size: 18px; font-weight: 900; text-align: center; }
.collection-market-arrow.positive,.collection-market-metric .positive { color: var(--success-color,#45bd79); }
.collection-market-arrow.negative,.collection-market-metric .negative { color: var(--danger-color,#f06a70); }
.collection-market-metric { display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-variant-numeric:tabular-nums; }
.collection-market-metric b { font-size:12px; }
.collection-market-metric span { color:var(--text-muted); font-size:10px; }
/* Fills the Completion subtab: minimum height, but grows to use the space. */
.collection-set-completion { flex:1; display:flex; flex-direction:column; min-height:0; margin-top:4px; padding:16px; border:1px solid var(--border-color); border-radius:14px; background:color-mix(in srgb,var(--widget-bg) 94%,transparent); }
.collection-section-heading { display:flex; justify-content:space-between; align-items:end; margin:0 0 14px; }
.collection-section-heading h2 { margin:0; color:var(--text-primary); font-size:18px; }
.collection-section-heading p { margin:4px 0 0; color:var(--text-muted); font-size:12px; }
.collection-completion-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:0; }
/* One row that fills the widget and can shrink (minmax 0) so the two columns
   scroll internally instead of stretching the widget to fit their content. */
.collection-set-layout { flex:1; display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); grid-template-rows:minmax(0,1fr); min-height:520px; overflow:hidden; border:1px solid var(--border-color); border-radius:12px; background:color-mix(in srgb,var(--panel-bg,#0d1117) 40%,transparent); }
.collection-set-list { min-height:0; overflow-y:auto; border-right:1px solid var(--border-color); }

/* Collapsible release-year sections */
.collection-year-group { border-bottom:1px solid color-mix(in srgb,var(--border-color) 55%,transparent); }
/* Tinted with the accent color so year headers read as distinct bands above the set rows. */
.collection-year-header { position:sticky; top:0; z-index:1; width:100%; display:grid; grid-template-columns:14px minmax(0,1fr) auto; align-items:center; gap:3px 8px; padding:9px 10px; border:0; background:color-mix(in srgb,var(--accent-color) 16%,var(--widget-bg)); color:var(--text-primary); text-align:left; cursor:pointer; }
.collection-year-header:hover { background:color-mix(in srgb,var(--accent-color) 24%,var(--widget-bg)); }
.collection-year-chevron { color:var(--text-muted); font-size:11px; line-height:1; transition:transform .15s ease; }
.collection-year-group.collapsed .collection-year-chevron { transform:rotate(-90deg); }
.collection-year-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700; }
.collection-year-title em { margin-left:6px; color:var(--text-muted); font-style:normal; font-weight:500; font-size:10px; }
.collection-year-header b { color:var(--accent-color); font-size:11px; font-variant-numeric:tabular-nums; }
.collection-year-header > i { grid-column:2/-1; height:4px; overflow:hidden; border-radius:99px; background:var(--border-color); }
.collection-year-header > i em { display:block; height:100%; border-radius:inherit; background:var(--accent-gradient); }
.collection-year-sets { display:flex; flex-direction:column; padding:2px 6px 6px; }
.collection-year-group.collapsed .collection-year-sets { display:none; }

.collection-year-sets button { width:100%; display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:center; gap:4px 8px; padding:9px 10px; border:0; border-radius:8px; background:transparent; color:var(--text-primary); text-align:left; cursor:pointer; }
.collection-year-sets button:hover,.collection-year-sets button.active { background:color-mix(in srgb,var(--accent-color) 13%,transparent); }
.collection-year-sets button div { min-width:0; display:flex; flex-direction:column; gap:3px; }
/* Masked set symbol (Scryfall icon SVG) in the theme text color; empty variant
   keeps the column width so set names stay aligned when a symbol is missing. */
.collection-set-symbol { width:16px; height:16px; background-color:var(--text-muted); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.collection-set-symbol--empty { background:none; }
.collection-year-sets button strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.collection-year-sets button span { color:var(--text-muted); font-size:10px; }
.collection-year-sets button b { color:var(--accent-color); font-size:11px; }
.collection-year-sets button > i { grid-column:1/-1; height:4px; overflow:hidden; border-radius:99px; background:var(--border-color); }
.collection-year-sets button > i em { display:block; height:100%; border-radius:inherit; background:var(--accent-gradient); }
.collection-binder-host { min-width:0; min-height:0; overflow-y:auto; padding:14px; }
.collection-binder-empty { min-height:480px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--text-muted); }
.collection-binder > header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.collection-binder > header h3 { margin:0; color:var(--text-primary); font-size:16px; }
.collection-binder > header span { color:var(--text-muted); font-size:11px; }
.collection-binder > header b { color:var(--accent-color); font-size:18px; }
.collection-binder-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; padding-right:4px; }
.collection-binder-card { min-width:0; cursor:pointer; }
.collection-binder-card .card-image-container { transition:transform .15s ease, box-shadow .15s ease; }
.collection-binder-card:hover .card-image-container { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.4); }
.collection-binder-card .card-image-container { position:relative; width:100%; aspect-ratio:63/88; border-radius:8px; }
.collection-binder-card .card-image-wrapper { position:relative; width:100%; height:100%; }
.collection-binder-card img { width:100%; height:100%; border-radius:8px; object-fit:cover; }
.collection-binder-card > strong { display:block; margin-top:5px; overflow:hidden; color:var(--text-primary); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.collection-binder-card > span { color:var(--text-muted); font-size:9px; }
.collection-binder-card.unowned { opacity:.3; filter:grayscale(1); }
.collection-binder-card.unowned:hover { opacity:.65; }
.collection-binder-count { position:absolute; right:5px; bottom:5px; z-index:4; padding:3px 6px; border-radius:9px; background:rgba(7,12,18,.88); color:#fff; font-size:10px; font-weight:800; }

@media (max-width: 1100px) {
    .collection-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
    .collection-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .collection-kpi { min-height: 105px; padding: 11px 8px; }
    .collection-kpi-value { font-size: 22px; }
    .collection-dashboard-grid--ranked, .collection-dashboard-grid--charts { grid-template-columns: 1fr; }
    .collection-tag-panel { grid-column: auto; }
    .collection-ranked-row { grid-template-columns: 18px 44px minmax(0, 1fr) auto; gap: 7px; }
    .collection-ranked-thumb { width: 44px; }
    .collection-bar-list--compact { grid-template-columns: 1fr; }
    .collection-dashboard-grid--market { grid-template-columns:1fr; }
    .collection-set-layout { grid-template-columns:1fr; min-height:0; }
    .collection-set-list { max-height:46vh; overflow-y:auto; border-right:0; border-bottom:1px solid var(--border-color); }
    .collection-completion-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .collection-binder-host { padding:10px; }
    .collection-binder-grid { grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); max-height:none; }
}

.collection-workspace {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.collection-subtab-wrapper {
    /* Pin the subtabs to the top of the scrolling panel, matching every other
       tab. `.collection-panel` is the scroll container; the opaque bg-color
       matches the panel's solid top strip so scrolled content is hidden behind. */
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg-color);
    padding: 8px 0 0;
    flex-shrink: 0;
}

.collection-subtab-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 12px 0;
}

/* The same full-content loading mask used by Builder. Keeping it in a relative shell lets the
   cards, dashboards, and history render underneath while the mask waits for their images. */
.collection-subtab-shell {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

/* --- Cards toolbar (Import/Export actions) --- */
.collection-export-btn,
.collection-import-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: var(--widget-bg);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.collection-import-btn {
    background: var(--accent-gradient);
    color: var(--button-primary-text, #fff);
}

.collection-export-btn:hover,
.collection-import-btn:hover {
    filter: brightness(1.08);
}

/* Actions hamburger menu — the toggle reuses the deck's .deck-control-btn so
   it looks identical. */
.collection-menu-backdrop { position: fixed; inset: 0; z-index: 150; background: transparent; }
.dropdown-content .menu-item--danger { color: var(--danger-color, #e05252); }
.dropdown-content .menu-item--danger:hover { background: color-mix(in srgb, var(--danger-color, #e05252) 14%, transparent); }

/* --- Deck-style browse (reused deck views inside the Collection panel) --- */

/* The flat Name view uses VirtualList, which virtualizes against its own
   scrollport and therefore needs a height-constrained host. Grouped modes
   scroll within the same host so List mode behaves consistently. */
.collection-list-host {
    min-height: 320px;
    overflow: visible;
}

@media (max-width: 768px) {}

/* Shared card metadata cluster — used by the grid footer and by both the
   collection and deck list rows (see `CardMetaCluster`). Base = a compact
   inline row: #NUM SET [set symbol] [price]. */
.card-meta-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 11px;
    color: var(--text-muted);
}

.card-meta-owner {
    flex: 1 1 120px;
    min-width: 0;
    max-width: 180px;
    overflow: hidden;
    color: var(--accent-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-meta-owner-link {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.card-meta-owner-link:hover,
.card-meta-owner-link:focus-visible {
    color: var(--text-primary);
    outline: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.card-meta-cluster--grid .card-meta-owner {
    max-width: none;
}

.card-meta-symbol {
    width: 18px;
    flex: 0 0 18px;
    display: flex;
    justify-content: center;
}

/* Masked so the glyph inherits the theme text color instead of the symbol's
   shipped fill (contrast on any background). */
.card-meta-set-symbol {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--text-muted);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.card-meta-set {
    min-width: 30px;
    text-align: left;
    white-space: nowrap;
}

.card-meta-number {
    width: 12ch;
    min-width: 12ch;
    text-align: right;
    white-space: nowrap;
}

.card-meta-condition {
    min-width: 34px;
    text-align: left;
    white-space: nowrap;
}

.card-meta-foil {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    color: #8fd8ff;
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 0 4px rgba(90, 205, 255, 0.85), 0 0 7px rgba(220, 120, 255, 0.55);
}

.entry-name .card-meta-foil,
.card-widget-name .card-meta-foil,
.entry-name .card-meta-proxy,
.card-widget-name .card-meta-proxy {
    display: inline-flex;
    margin-left: 5px;
    vertical-align: -1px;
}

.entry-name .card-entry-name-trade {
    display: inline-flex;
    margin-left: 5px;
    vertical-align: -2px;
}

.card-meta-price {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
}

/* List context: sits between the (flex:1) name and the row controls. */
.card-meta-cluster--list {
    flex: 0 0 auto;
}

.card-meta-cluster--list .card-meta-owner {
    order: -1;
}

/* Grid context: a full-width metadata line beneath the card name; price is
   pushed to the far right. */
.card-meta-cluster--grid {
    width: 100%;
    margin-top: 4px;
    gap: 6px;
    flex-wrap: wrap;
}

.card-meta-cluster--grid .card-meta-owner {
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 1px;
}

.card-meta-cluster--grid .card-meta-number {
    width: auto;
    min-width: 0;
    text-align: left;
}

/* The set code must be able to give ground; without this it keeps its
   min-width and spills over the set symbol in narrow grid tiles. */
.card-meta-cluster--grid .card-meta-set {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-meta-cluster--grid .card-meta-price {
    margin-left: auto;
}

.card-widget-row-condition {
    margin-left: auto;
    min-width: 34px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: right;
    white-space: nowrap;
}

.collection-entry-adjustment {
    flex: 0 0 auto;
}

/* Price as its own list cell (kept out of the cluster so condition can sit
   closest to the count controls). */
.card-entry-price {
    flex: 0 0 auto;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
    font-size: 11px;
}

.card-entry-trade-slot {
    flex: 0 0 18px;
    width: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-entry-trade,
.card-entry-condition {
    flex: 0 0 auto;
}

.card-widget-row-trade.collection-trade-badge {
    margin-left: 0;
}

/* Line-break helper: hidden on wide layouts, forces a wrap on narrow ones. */
.card-list-break {
    display: none;
}

/* Narrow widths: two-row list rows shared by the Deck and Cards subtabs —
   card name, price, and trade on top; set info, condition, and controls below. */
@media (max-width: 768px) {
    /* Three columns: flexible name/meta on the left, optional top-row actions
       in the middle, and price/count controls flush to the right edge. */
    .card-list-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        column-gap: 6px;
        row-gap: 6px;
        align-items: center;
    }

    .card-list-row > .entry-name {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .card-list-row > .card-entry-price {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        min-width: 6ch;
    }

    .card-list-row > .card-entry-condition {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .card-list-row > .card-list-break {
        display: none;
    }

    .card-list-row > .card-meta-cluster {
        grid-column: 1;
        grid-row: 2;
        gap: 4px;
        min-width: 0;
    }

    /* Deck rows split role buttons to the title line while the count widget
       remains on the lower row. */
    .card-list-row > .entry-controls {
        display: contents;
    }

    /* Role buttons (commander/companion) sit immediately left of the count widget. */
    .card-list-row > .entry-controls > .entry-role-controls {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        flex: 0 0 auto;
        width: auto;
        gap: 4px;
    }

    .card-list-row > .entry-controls > .entry-role-controls .companion-placeholder,
    .card-list-row > .entry-controls > .entry-role-controls .crown-placeholder {
        display: none;
    }

    .card-list-row > .entry-controls > .card-widget-controls {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    /* Push collection count widgets to the right edge of the second row. */
    .card-list-row > .collection-entry-adjustment {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    .card-list-row .card-meta-symbol {
        width: 16px;
        flex-basis: 16px;
    }

    .card-list-row .card-meta-set {
        min-width: 26px;
    }

    .card-list-row .card-meta-number {
        width: 10ch;
        min-width: 10ch;
        font-size: 10px;
    }

    .card-list-row .card-meta-condition {
        min-width: 28px;
    }

    .card-list-row .card-meta-foil {
        flex-basis: 14px;
        width: 14px;
    }
}

@media (max-width: 768px) {
    .collection-grid-host .card-widget-footer {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: repeat(4, auto);
        gap: 5px 6px;
    }

    .collection-grid-host .card-widget-info,
    .collection-grid-host .card-meta-cluster--grid,
    .collection-grid-host .card-widget-actions-row {
        display: contents;
    }

    .collection-grid-host .card-widget-name {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .collection-grid-host .card-meta-number {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        width: auto;
        justify-self: start;
    }

    .collection-grid-host .card-meta-set {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .collection-grid-host .card-meta-symbol {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    /* Owner gets its own full-width row; auto-placement would otherwise drop it
       into the narrow first column and truncate the name almost immediately. */
    .collection-grid-host .card-meta-owner {
        grid-column: 1 / -1;
        grid-row: 5;
        justify-self: start;
        max-width: 100%;
    }

    .collection-grid-host .card-widget-row-condition {
        grid-column: 1 / 3;
        grid-row: 3;
        justify-self: start;
        margin-left: 0;
        min-width: 0;
    }

    .collection-grid-host .card-meta-price {
        grid-column: 3;
        grid-row: 3;
        justify-self: end;
        margin-left: 0;
        min-width: 0;
    }

    .collection-grid-host .card-widget-controls {
        grid-column: 1 / 3;
        grid-row: 4;
        justify-self: start;
    }

    .collection-grid-host .card-widget-row-trade {
        grid-column: 3;
        grid-row: 4;
        justify-self: end;
        align-self: center;
    }
}

/* Condition-specific physical wear, modelled on how real cards actually wear:
   soft rounded corner/edge scuffs (whitening) escalating to a blotchy worn
   border, then creases, then water damage. No colour tinting — the marks convey
   the grade. Mint/NM show nothing at all.

   The wear layers are held in custom properties (percentage-based, so identical
   on list/grid/preview and stack) and composed per grade. Layer roles on the
   list/grid/preview surfaces:
     ::before  = corner scuffs / worn border — screen-blended so whitening reads
                 like exposed cardstock at the edges.
     ::after   = creases (HP+) and the water stain (DMG) — normal blend so the
                 darker fold lines actually show.
   Stack cards only have ::before free (::after is the foil shimmer), so their
   marks are all composed into ::before with a normal blend. */

/* Blotchy worn border (MP+): soft dabs of varying depth all the way around the
   perimeter — never a solid frame. Corners wear hardest. */
.collection-condition-moderate,
.collection-condition-heavy,
.collection-condition-damaged {
    --wear-border:
        radial-gradient(circle at 2% 2.5%, rgba(255,255,255,.5) 0, transparent 4.4%),
        radial-gradient(circle at 98% 2%, rgba(255,255,255,.4) 0, transparent 4%),
        radial-gradient(circle at 1.5% 98%, rgba(255,255,255,.46) 0, transparent 4.4%),
        radial-gradient(circle at 99% 99%, rgba(255,255,255,.42) 0, transparent 4%),
        radial-gradient(circle at 33% 0.8%, rgba(255,255,255,.3) 0, transparent 3%),
        radial-gradient(circle at 64% 1.6%, rgba(255,255,255,.19) 0, transparent 2.4%),
        radial-gradient(circle at 26% 99.2%, rgba(255,255,255,.32) 0, transparent 3%),
        radial-gradient(circle at 61% 98.6%, rgba(255,255,255,.2) 0, transparent 2.4%),
        radial-gradient(circle at 0.8% 31%, rgba(255,255,255,.3) 0, transparent 3%),
        radial-gradient(circle at 1.8% 72%, rgba(255,255,255,.19) 0, transparent 2.4%),
        radial-gradient(circle at 99.2% 43%, rgba(255,255,255,.3) 0, transparent 3%),
        radial-gradient(circle at 98.4% 78%, rgba(255,255,255,.2) 0, transparent 2.4%);
}

/* Crease "/" running lower-left → upper-right (HP+). */
.collection-condition-heavy,
.collection-condition-damaged {
    --crease-a: linear-gradient(125deg, transparent 43.8%, rgba(255,255,255,.4) 45.1%, rgba(45,28,18,.46) 46.4%, transparent 47.7%);
}

/* Second crease "\" running upper-left → lower-right, plus an off-centre,
   irregular water stain (DMG). */
.collection-condition-damaged {
    --crease-b: linear-gradient(46deg, transparent 55.3%, rgba(255,255,255,.36) 56.5%, rgba(45,26,15,.42) 57.8%, transparent 59.1%);
    --water:
        radial-gradient(ellipse 30% 23% at 62% 63%, rgba(96,84,54,.32) 0, rgba(86,74,48,.13) 56%, transparent 80%),
        radial-gradient(ellipse 15% 12% at 71% 57%, rgba(92,80,52,.26) 0, transparent 72%),
        radial-gradient(ellipse 34% 27% at 61% 63%, transparent 62%, rgba(58,48,28,.25) 71%, transparent 82%);
}

/* ── Lightly played: a couple of small, soft, rounded corner scuffs — minimal
   intrusion. The top-left one is always present so wear reads in a Stack pile. */
.collection-condition-lightly .card-image-wrapper::before,
.collection-condition-moderate .card-image-wrapper::before,
.collection-condition-heavy .card-image-wrapper::before,
.collection-condition-damaged .card-image-wrapper::before,
.card-preview-image-wrapper.collection-condition-lightly::before,
.card-preview-image-wrapper.collection-condition-moderate::before,
.card-preview-image-wrapper.collection-condition-heavy::before,
.card-preview-image-wrapper.collection-condition-damaged::before {
    content: "";
    position: absolute;
    inset: 1%;
    z-index: 7;
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 3.5% 4%, rgba(255,255,255,.4) 0, transparent 3.6%),
        radial-gradient(circle at 96.5% 8.5%, rgba(255,255,255,.28) 0, transparent 2.8%),
        radial-gradient(circle at 3% 96.5%, rgba(255,255,255,.32) 0, transparent 3.4%);
}

/* ── Moderately played and up: swap the corner scuffs for the blotchy worn
   border. */
.collection-condition-moderate .card-image-wrapper::before,
.collection-condition-heavy .card-image-wrapper::before,
.collection-condition-damaged .card-image-wrapper::before,
.card-preview-image-wrapper.collection-condition-moderate::before,
.card-preview-image-wrapper.collection-condition-heavy::before,
.card-preview-image-wrapper.collection-condition-damaged::before {
    background: var(--wear-border);
}

/* ── Heavily played: one diagonal crease. */
.collection-condition-heavy .card-image-wrapper::after,
.card-preview-image-wrapper.collection-condition-heavy::after,
.collection-condition-damaged .card-image-wrapper::after,
.card-preview-image-wrapper.collection-condition-damaged::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    border-radius: inherit;
    background: var(--crease-a);
}

/* ── Damaged: two crossing creases + off-centre water stain. */
.collection-condition-damaged .card-image-wrapper::after,
.card-preview-image-wrapper.collection-condition-damaged::after {
    background: var(--crease-a), var(--crease-b), var(--water);
}

/* ── Stack cards: everything composed into ::before, normal blend. */
.stack-card.collection-condition-lightly::before,
.stack-card.collection-condition-moderate::before,
.stack-card.collection-condition-heavy::before,
.stack-card.collection-condition-damaged::before {
    content: "";
    position: absolute;
    inset: 1%;
    z-index: 4;
    pointer-events: none;
    border-radius: 9px;
    background:
        radial-gradient(circle at 3.5% 4%, rgba(255,255,255,.34) 0, transparent 3.6%),
        radial-gradient(circle at 96.5% 8.5%, rgba(255,255,255,.24) 0, transparent 2.8%),
        radial-gradient(circle at 3% 96.5%, rgba(255,255,255,.28) 0, transparent 3.4%);
}

.stack-card.collection-condition-moderate::before {
    background: var(--wear-border);
}

.stack-card.collection-condition-heavy::before {
    background: var(--crease-a), var(--wear-border);
}

.stack-card.collection-condition-damaged::before {
    background: var(--crease-a), var(--crease-b), var(--water), var(--wear-border);
}

.collection-load-sentinel {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-load-more {
    padding: 8px 18px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--widget-bg);
    color: var(--text-primary);
    cursor: pointer;
}

/* --- Stats --- */
.collection-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.collection-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 10px;
    background: var(--widget-bg);
}

.collection-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.collection-stat-value.positive { color: var(--success, #4caf82); }
.collection-stat-value.negative { color: var(--danger, #e05252); }

.collection-stat-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- History widget --- */
.collection-history-dashboard { width: 100%; padding: 4px 0 18px; }
.collection-history-widget { padding: 16px; }
.collection-history-widget > header { margin-bottom: 12px; text-align: left; }
.collection-history-list { display: flex; flex-direction: column; gap: 5px; }

.collection-history-entry { border: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent); border-radius: 9px; overflow: hidden; background: color-mix(in srgb, var(--widget-bg) 92%, transparent); }
/* Grid so every entry's columns line up like the List-view rows: chevron,
   a fixed-width type/source column, the card name (flexes), then the count
   delta and timestamp pinned right. */
.collection-history-head { width: 100%; display: grid; grid-template-columns: 14px 104px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; font-size: 13px; }
.collection-history-head:hover { background: color-mix(in srgb, var(--accent-color) 8%, transparent); }
.collection-history-chevron { color: var(--text-muted); font-size: 11px; line-height: 1; transition: transform .15s ease; }
.collection-history-entry:not(.expanded) .collection-history-chevron { transform: rotate(-90deg); }
/* Type + optional source stack in one fixed-width column so the card names to
   their right always start at the same x regardless of whether a source shows. */
.collection-history-typecol { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.collection-history-type { font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.collection-history-source { align-self: flex-start; max-width: 100%; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--border-color) 50%, transparent); color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.collection-history-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.collection-history-delta { flex: 0 0 auto; min-width: 44px; font-weight: 700; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.collection-history-delta.positive { color: var(--success-color, #4caf82); }
.collection-history-delta.negative { color: var(--danger-color, #e05252); }
.collection-history-time { flex: 0 0 auto; min-width: 116px; color: var(--text-muted); text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.collection-history-detail { display: none; flex-wrap: wrap; gap: 16px; padding: 14px 12px; border-top: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent); background: color-mix(in srgb, var(--panel-bg, #0d1117) 30%, transparent); }
.collection-history-entry.expanded .collection-history-detail { display: flex; }
.collection-history-transition { display: flex; align-items: center; gap: 10px; }
.collection-history-arrow { color: var(--text-muted); font-size: 18px; font-weight: 800; }

.collection-history-card { width: 104px; display: flex; flex-direction: column; gap: 2px; }
/* position:relative + overflow:hidden keep the foil shimmer / condition overlays
   (absolutely-positioned pseudo-elements) clipped to the card, not the viewport. */
.collection-history-thumb { position: relative; overflow: hidden; width: 104px; aspect-ratio: 63/88; border-radius: 8px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.collection-history-thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.collection-history-thumb .card-image-wrapper { width: 100%; height: 100%; }
.collection-history-thumb img { display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; object-position: top; }
.collection-history-card strong { overflow: hidden; color: var(--text-primary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.collection-history-card > span { color: var(--text-muted); font-size: 10px; }
.collection-history-card .collection-history-tag { color: var(--accent-color); font-weight: 700; }

/* Action bar pinned at the top of an expanded entry. */
.collection-history-actionbar { flex: 1 1 100%; display: flex; justify-content: flex-end; margin-bottom: 4px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent); }
.collection-history-revert { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid color-mix(in srgb, var(--danger-color, #e05252) 55%, var(--border-color)); border-radius: 7px; background: color-mix(in srgb, var(--danger-color, #e05252) 12%, transparent); color: var(--danger-color, #e05252); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.collection-history-revert:hover { background: color-mix(in srgb, var(--danger-color, #e05252) 22%, transparent); }

/* Location manager modal */
.collection-locations-modal { max-width: 520px; width: 92%; }
.collection-locations-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.collection-locations-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-primary); }
.collection-locations-close { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 2px; line-height: 1; }
.collection-locations-close:hover { color: var(--text-primary); }
.collection-locations-hint { margin: 0 0 12px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.collection-locations-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 8px; padding: 4px; margin-bottom: 12px; }
.collection-locations-empty { padding: 18px; text-align: center; color: var(--text-muted); font-size: 12px; }
.collection-location-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: var(--text-primary); font-size: 13px; }
.collection-location-row:hover { background: color-mix(in srgb, var(--accent-color) 8%, transparent); }
.collection-location-row > svg { color: var(--text-muted); flex: 0 0 auto; }
.collection-location-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-location-del { flex: 0 0 auto; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.collection-location-del:hover { color: var(--danger-color, #e05252); background: color-mix(in srgb, var(--danger-color, #e05252) 12%, transparent); }
.collection-location-create { display: flex; flex-direction: column; gap: 8px; }
.collection-location-parent { width: 100%; }
.collection-location-create-row { display: flex; gap: 8px; align-items: center; }
.collection-location-input { flex: 1 1 auto; min-width: 0; }
.collection-location-create-row .action-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }

/* Revert confirmation modal */
.collection-revert-modal { max-width: 440px; width: 90%; text-align: center; }
.collection-revert-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; color: var(--danger-color, #e05252); }
.collection-revert-modal p { margin: 0 0 10px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.collection-revert-warning { color: var(--danger-color, #e05252) !important; font-weight: 700; }
.collection-revert-modal .modal-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }

/* Consolidated entry: final-state card + chronological action list. */
.collection-history-merged { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.collection-history-actions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.collection-history-actions li { position: relative; padding-left: 14px; color: var(--text-secondary, var(--text-muted)); font-size: 12px; }
.collection-history-actions li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-color); }

/* Mobile: collapse to a compact three-line grid so the name gets its own row
   and nothing clips. Type + count share the top line; time drops beneath. */
@media (max-width: 640px) {
    .collection-history-head { grid-template-columns: 14px minmax(0, 1fr) auto; row-gap: 3px; }
    .collection-history-typecol { grid-column: 2; grid-row: 1; flex-direction: row; align-items: center; gap: 6px; }
    .collection-history-summary { grid-column: 2 / 4; grid-row: 2; }
    .collection-history-delta { grid-column: 3; grid-row: 1; }
    .collection-history-time { grid-column: 2 / 4; grid-row: 3; min-width: 0; font-size: 10px; text-align: left; }
    .collection-history-widget { padding: 12px; }
}

/* --- Card Detail modal: collection lot editing (condition + quantity) --- */
.collection-edit-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Tradable markers + controls shared by grid and inline collection surfaces. */
.collection-trade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--accent-color) 90%, #000);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    vertical-align: middle;
}

button.collection-trade-badge {
    box-sizing: border-box;
    min-width: 18px;
    min-height: 18px;
    padding: 0;
    font: inherit;
    line-height: 1;
}

.collection-trade-badge svg {
    display: block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    color: currentColor;
    stroke: currentColor;
}

/* Inline (list) placement gets a little breathing room after the card name. */
.collection-trade-badge:not(.collection-trade-corner) {
    margin-left: 6px;
}

.card-widget-row-trade.collection-trade-badge,
.card-entry-trade.collection-trade-badge {
    margin-left: 0;
}

/* The list-row badge sits inside the name span, so preserve a visible gap
   between the final glyph and the trade marker. */
.entry-name .card-entry-name-trade.collection-trade-badge {
    margin-left: 6px;
}

/* Corner placement over a card image (grid + stack). */
.collection-trade-corner {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 4;
}

.collection-tradable-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--widget-bg);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.collection-tradable-toggle.active {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}

/* Location section header: label + inline "manage locations" shortcut. */
.collection-edit-location-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.collection-edit-location-manage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--widget-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.collection-edit-location-manage:hover { color: var(--accent-color); border-color: var(--accent-color); }

/* Location-sort ancestor "container" headers (a location with no direct cards)
   read as folder rows: accent-tinted, bolder, no count badge. */
.deck-group-header.collection-location-container,
.stack-header.collection-location-container {
    background: color-mix(in srgb, var(--accent-color) 13%, transparent);
    font-weight: 700;
    border-radius: 6px;
}

/* Wider actions dropdown so item labels stay on one line. */
.collection-actions-menu .dropdown-content { min-width: 210px; }
.collection-actions-menu .menu-item { white-space: nowrap; }

/* .collection-tradable-select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    padding: 0 8px;
    height: 34px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
} */

.collection-edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 140px;
}

.collection-edit-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.collection-count-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.collection-count-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--widget-bg);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.collection-count-btn:hover {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.collection-count-input {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg, var(--widget-bg));
    color: var(--text-primary);
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.collection-count-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

/* --- Empty / error --- */
.collection-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 16px;
    color: var(--text-muted);
    text-align: center;
}

.collection-error {
    padding: 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger, #e05252) 12%, transparent);
    color: var(--danger, #e05252);
    font-size: 13px;
}

/* --- Non-PRO upsell --- */
.collection-upsell-preview {
    display: flex;
    min-height: max(680px, calc(100vh - 170px));
    flex-direction: column;
    gap: 14px;
    padding: 18px 18px 0;
}

.collection-preview-tabs,
.collection-preview-toolbar {
    display: grid;
    gap: 10px;
    width: min(980px, 100%);
    margin: 0 auto;
}

.collection-preview-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.collection-preview-tabs span,
.collection-preview-toolbar span {
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--widget-bg) 78%, transparent);
}

.collection-preview-tabs span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.collection-preview-tabs span.is-active {
    color: var(--text-primary);
    background: var(--accent-gradient);
}

.collection-preview-toolbar {
    grid-template-columns: minmax(180px, 1fr) 110px 110px 46px;
}

.collection-preview-search {
    max-width: none;
}

.collection-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    width: min(980px, 100%);
    margin: 0 auto;
}

.collection-preview-card {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    gap: 9px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--widget-bg) 82%, transparent);
}

.collection-preview-card-art,
.collection-preview-card-title,
.collection-preview-card-meta,
.collection-preview-pill {
    display: block;
    border-radius: 7px;
    background: color-mix(in srgb, var(--border-color) 62%, transparent);
}

.collection-preview-card-art {
    aspect-ratio: 63 / 88;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 28%, transparent), transparent),
        color-mix(in srgb, var(--border-color) 54%, transparent);
}

.collection-preview-card-title {
    width: 82%;
    height: 12px;
}

.collection-preview-card-meta {
    width: 58%;
    height: 10px;
    opacity: 0.72;
}

.collection-preview-pill {
    width: 44px;
    height: 18px;
}

.collection-preview-pill.muted {
    opacity: 0.42;
}

@media (max-width: 640px) {
    .collection-upsell-preview {
        padding-inline: 10px;
    }

    .collection-preview-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collection-preview-toolbar {
        grid-template-columns: 1fr 44px 44px 44px;
    }

    .collection-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .collection-preview-card {
        min-height: 210px;
    }
}

/* ============================================================
   WISHLIST PURCHASE FLOW
   One modal, two phases: curate a purchase, then confirm what
   arrived. The line grid is the same in both, so it is styled
   once and the actions row changes around it.
   ============================================================ */

/* Sized and pinned like the card detail modal: anchored near the top and
   allowed to grow downward, rather than centred. A wantlist changes height as
   rows are filtered, and centring made the whole dialog — buttons included —
   jump every time.

   Takes as much of the viewport as it is given. A purchase list is a working
   surface: the more rows visible at once, the less scrolling between deciding
   what to buy and seeing what it costs. */
.wishlist-purchase-modal {
    width: min(96vw, 1400px);
    max-width: none;
    max-height: 92vh;
    margin-top: 3vh;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wishlist-purchase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wishlist-purchase-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 20px;
    color: var(--text-color);
}

.wishlist-purchase-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    line-height: 1;
}

.wishlist-purchase-intro {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
}

.wishlist-purchase-vendors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wishlist-vendor-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}

.wishlist-vendor-button img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.wishlist-purchase-search {
    width: 100%;
}

.wishlist-purchase-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* The scrolling region. A wantlist can run to hundreds of cards, so this is the
   only part that grows and the summary and actions stay in view.
   Vertical only — rows wrap rather than scrolling sideways. */
.wishlist-purchase-lines {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 4px;
}

/* Checkbox, art, identity, then the controls.

   Flex rather than grid, and wrapping rather than scrolling: a fixed set of
   grid tracks forces a horizontal scrollbar the moment the window is too
   narrow, which on a purchase list means the price — the thing being checked —
   scrolls out of sight. Wrapping instead spills the controls onto a second or
   third line and keeps every field visible at any width. */
.wishlist-purchase-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 8px 10px;
    background: var(--widget-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

/* The identity block takes the slack so the controls keep their natural size,
   and it is allowed to shrink to a readable minimum before anything wraps. */
.wishlist-purchase-name {
    flex: 1 1 12rem;
    min-width: 9rem;
}

.wishlist-purchase-line > input[type="checkbox"],
.wishlist-line-art {
    flex: none;
}

.wishlist-line-qty {
    flex: 0 0 4rem;
}

.wishlist-line-select {
    flex: 1 1 8rem;
    min-width: 7rem;
    max-width: 11rem;
}

/* Pushed to the end of whatever line it lands on, so the number stays in the
   same place whether the row wrapped or not. */
.wishlist-line-price {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 4.5rem;
}

/* Cropped to the art box rather than the whole card, so a 34px-wide thumbnail
   still shows something recognisable instead of an unreadable full frame. */
.wishlist-line-art {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    object-fit: cover;
    object-position: center 18%;
    background: var(--input-bg);
}

/* Deselected rows stay in place rather than disappearing, so the user can see
   what they chose to skip. */
.wishlist-purchase-line.deselected {
    opacity: 0.45;
}

.wishlist-purchase-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wishlist-line-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wishlist-line-printing {
    font-size: 11px;
    color: var(--text-muted);
}

.wishlist-line-qty,
.wishlist-line-select {
    padding: 4px 6px;
    font-size: 12px;
    font-family: inherit;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    color: var(--text-color);
}

.wishlist-line-price {
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.wishlist-purchase-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.wishlist-summary-figures {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wishlist-summary-line {
    font-size: 12px;
    color: var(--text-muted);
}

.wishlist-summary-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

/* The all-in figure is the one that includes shipping and fees, so it is the
   one worth drawing the eye to. */
.wishlist-summary-allin {
    color: var(--accent-color);
}

.wishlist-purchase-warnings {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

.wishlist-warning {
    font-size: 12px;
    color: var(--warning-color);
}

.wishlist-purchase-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.wishlist-purchase-actions .ui-button {
    padding: 8px 16px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

.wishlist-primary-action {
    font-weight: 600;
}

@media (max-width: 720px) {
    /* Wrapping already handles the narrow case; only the warning alignment
       needs adjusting. */
    .wishlist-purchase-warnings {
        text-align: left;
    }
}

/* Wishlist purchase flow on the BaseModal shell: the body becomes a column so
   the line list is the only region that grows and scrolls, keeping the summary
   in view while the actions live in the pinned footer. */
.base-modal.wishlist-purchase .base-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Proxy marker beside the card name: same trailing-slot treatment as the foil
   glyph and the trade badge, muted because a proxy is a note about the object,
   not a highlight. Shown wherever deck/collection rows and tiles render. */
.card-meta-proxy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    color: var(--text-muted);
    opacity: 0.85;
}