/* =========================================================================
   TCGDash — Set Explorer styles.

   Companion stylesheet to product-explorer.css, which is loaded first by both
   the WordPress snippet and the local-preview HTML and provides the :root
   design tokens and the shared .tcgd-* component classes (buttons, tags,
   stripe, state, etc.). This file adds only the Set Explorer's own layout and
   components: the three-column shell, left set-browser rail, set hero, KPI
   cards, the normalized trend chart, chase/sealed grids, the structure grid,
   the right-rail panels, and the tracked-products table.

   "Bloomberg terminal for collectors" — calm, dense, analytical. Restrained
   accent usage, deep dark surfaces, strong hierarchy. No neon, no glass spam.

   Do NOT redeclare tokens here. When a shared layer is extracted, these rules
   move alongside the other dashboards'.
   ========================================================================= */

/* ---------- root container ---------- */

#tcgd-set-explorer,
#tcgd-set-explorer * { box-sizing: border-box; }

#tcgd-set-explorer {
  font-family: var(--tcgd-font);
  color: var(--tcgd-text);
  background: var(--tcgd-bg);
  font-size: 13.5px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Full-bleed. WordPress themes wrap page content in a narrow, centered
     column; a 3-column dashboard dropped inside that gets its flexible center
     crushed between two fixed rails. Break out to the real screen width — the
     block stays centered, so the negative margins are symmetric — then cap and
     re-center the inner shell. This is what makes the center column dominant. */
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* Respond to the dashboard's OWN width, not the viewport. The old layout
     used viewport media queries, but inside a narrow theme column the viewport
     is far wider than the space the dashboard actually has, so the breakpoints
     never fired and the center collapsed. A size-query container fixes that at
     the root. */
  container-type: inline-size;
  container-name: tcgdse;
}

[data-theme="dark"] #tcgd-set-explorer,
.dark #tcgd-set-explorer { color: var(--tcgd-text); background: var(--tcgd-bg); }
[data-theme="light"] #tcgd-set-explorer,
.light #tcgd-set-explorer { color: var(--tcgd-text); background: var(--tcgd-bg); }

/* Selector rail · dominant center · facts rail. The center is minmax(0,1fr)
   so it absorbs all spare width — the rails are fixed, the chart/grids breathe. */
.tcgd-se-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
  padding: 22px 28px 72px;
  /* Shared app-width cap (token in product-explorer.css). The root above
     already full-bleeds to the viewport; this caps + centers the grid. */
  max-width: var(--tcgd-app-max);
  margin: 0 auto;
}

/* Left + right rails ride along while the center column scrolls — the
   dashboard feel — but degrade to normal flow on small screens. */
.tcgd-se-sidebar,
.tcgd-se-right {
  position: sticky;
  top: 16px;
  align-self: start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.tcgd-se-main { min-width: 0; }

/* =========================================================================
   Left rail — set browser (game selector + search + set list)

   No in-dashboard navigation lives here: the WordPress site chrome already
   provides the top navbar (Home / Product Explorer / Set Explorer / …). This
   rail is purely a SET SELECTOR, so it stays dense and scannable rather than
   reading like a second site nav.
   ========================================================================= */

.tcgd-se-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* set picker */
.tcgd-se-picker { display: flex; flex-direction: column; gap: 8px; }
.tcgd-se-gamesel {
  position: relative;
}
.tcgd-se-gamesel select {
  width: 100%;
  height: 38px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--tcgd-border);
  border-radius: var(--tcgd-radius);
  background: var(--tcgd-surface-2);
  color: var(--tcgd-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
}
.tcgd-se-gamesel::after {
  content: "";
  position: absolute; right: 12px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--tcgd-text-muted);
  border-bottom: 1.5px solid var(--tcgd-text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.tcgd-se-gamesel select:focus { outline: none; border-color: var(--tcgd-accent); box-shadow: 0 0 0 3px var(--tcgd-accent-soft); }

.tcgd-se-setsearch { position: relative; }
.tcgd-se-setsearch input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--tcgd-border);
  border-radius: var(--tcgd-radius-sm);
  background: var(--tcgd-surface);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--tcgd-text);
  outline: none;
}
.tcgd-se-setsearch input:focus { border-color: var(--tcgd-accent); box-shadow: 0 0 0 3px var(--tcgd-accent-soft); }
.tcgd-se-setsearch::before {
  content: "";
  position: absolute; left: 11px; top: 50%;
  width: 13px; height: 13px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237c8493' stroke-width='1.5'><circle cx='7' cy='7' r='5'/><line x1='11' y1='11' x2='14.5' y2='14.5'/></svg>");
  background-size: contain; background-repeat: no-repeat;
}

/* Dense, scannable list — Steam-library / Spotify-playlist density, not a
   card feed. Compact rows, small consistent thumbnails, tight type. */
.tcgd-se-setlist {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tcgd-se-setcard {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--tcgd-radius-sm);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}
.tcgd-se-setcard:hover { background: var(--tcgd-surface-2); }
.tcgd-se-setcard:focus-visible { outline: 2px solid var(--tcgd-accent); outline-offset: 1px; }
/* Subtle selected state: a faint fill + a thin accent edge — no heavy wash. */
.tcgd-se-setcard.tcgd-se-active {
  background: var(--tcgd-surface-2);
  box-shadow: inset 2px 0 0 var(--tcgd-accent);
}
.tcgd-se-setcard-img {
  width: 36px; height: 36px;
  border-radius: var(--tcgd-radius-sm);
  background: var(--tcgd-surface-3);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tcgd-se-setcard-img img { width: 100%; height: 100%; object-fit: contain; }
.tcgd-se-setcard-img .tcgd-noimage { font-size: 9px; color: var(--tcgd-text-faint); }
.tcgd-se-setcard-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tcgd-se-setcard-code {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.1;
  color: var(--tcgd-accent-text);
}
.tcgd-se-setcard-name {
  font-size: 12px; font-weight: 600; color: var(--tcgd-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.tcgd-se-setcard-date { font-size: 10px; color: var(--tcgd-text-faint); font-variant-numeric: tabular-nums; line-height: 1.1; }
.tcgd-se-setlist-foot {
  font-size: 11.5px; color: var(--tcgd-text-muted);
  text-align: center; padding: 8px 4px 2px;
}

.tcgd-se-rail-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--tcgd-text-muted);
  margin: 2px 2px 0;
}

/* =========================================================================
   Center — hero, KPIs, sections
   ========================================================================= */

.tcgd-se-section { margin-top: 22px; }
.tcgd-se-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.tcgd-se-section-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tcgd-text);
}
.tcgd-se-section-sub { font-size: 11.5px; color: var(--tcgd-text-muted); font-weight: 500; }
.tcgd-se-section-link {
  font-size: 11.5px; font-weight: 600; color: var(--tcgd-accent-text);
  text-decoration: none;
}
.tcgd-se-section-link:hover { text-decoration: underline; }

/* hero */
.tcgd-se-hero {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--tcgd-border);
  border-radius: var(--tcgd-radius);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--tcgd-accent-soft), transparent 55%),
    var(--tcgd-surface);
}
.tcgd-se-hero-img {
  width: 104px; height: 104px;
  border-radius: var(--tcgd-radius);
  background: var(--tcgd-surface-2);
  border: 1px solid var(--tcgd-border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tcgd-se-hero-img img { width: 100%; height: 100%; object-fit: contain; }
.tcgd-se-hero-img .tcgd-noimage { font-size: 11px; color: var(--tcgd-text-faint); }
.tcgd-se-hero-body { min-width: 0; }
.tcgd-se-hero-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--tcgd-text);
}
.tcgd-se-hero-game { font-size: 13px; color: var(--tcgd-text-soft); margin-top: 3px; }
.tcgd-se-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tcgd-se-hero-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  background: var(--tcgd-tag-bg); color: var(--tcgd-tag-text);
  font-variant-numeric: tabular-nums;
}
.tcgd-se-hero-tag.tcgd-se-tag-code { background: var(--tcgd-accent-soft); color: var(--tcgd-accent-text); }
.tcgd-se-hero-tag .tcgd-se-tag-k { color: var(--tcgd-text-faint); font-weight: 600; }

/* KPI cards */
.tcgd-se-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.tcgd-se-kpi {
  border: 1px solid var(--tcgd-border);
  border-radius: var(--tcgd-radius);
  background: var(--tcgd-surface);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 78px;
}
.tcgd-se-kpi-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--tcgd-text-muted);
}
.tcgd-se-kpi-value {
  font-size: 24px; font-weight: 700; line-height: 1.05;
  color: var(--tcgd-text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.tcgd-se-kpi-hint { font-size: 11px; color: var(--tcgd-text-faint); }

/* =========================================================================
   Trend chart
   ========================================================================= */

.tcgd-se-chart-card {
  border: 1px solid var(--tcgd-border);
  border-radius: var(--tcgd-radius);
  background: var(--tcgd-surface);
  padding: 16px 18px 14px;
}
.tcgd-se-chart-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.tcgd-se-chart-title { font-size: 13px; font-weight: 700; }
.tcgd-se-chart-title small { font-weight: 500; color: var(--tcgd-text-muted); margin-left: 6px; }
.tcgd-se-windows {
  display: inline-flex; background: var(--tcgd-surface-2);
  border-radius: var(--tcgd-radius-sm); padding: 2px; gap: 0;
}
.tcgd-se-windows button {
  border: none; background: transparent; color: var(--tcgd-text-muted);
  font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 5px;
  cursor: pointer; font-family: inherit; letter-spacing: 0.02em;
}
.tcgd-se-windows button.tcgd-active {
  background: var(--tcgd-surface); color: var(--tcgd-text); box-shadow: var(--tcgd-shadow);
}
.tcgd-se-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 6px; }
.tcgd-se-legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--tcgd-text-soft);
}
.tcgd-se-legend-swatch { width: 11px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.tcgd-se-legend-chg { font-variant-numeric: tabular-nums; font-weight: 600; }
.tcgd-se-legend-chg.tcgd-pos { color: var(--tcgd-positive); }
.tcgd-se-legend-chg.tcgd-neg { color: var(--tcgd-negative); }

.tcgd-se-chart { width: 100%; position: relative; }
.tcgd-se-chart svg { display: block; width: 100%; height: 340px; overflow: visible; }
.tcgd-se-chart-grid { stroke: var(--tcgd-divider); stroke-width: 1; }
.tcgd-se-chart-base { stroke: var(--tcgd-border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.tcgd-se-chart-axis { font-size: 10px; fill: var(--tcgd-text-muted); font-family: var(--tcgd-mono); }
.tcgd-se-chart-line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.tcgd-se-chart-endchip { font-size: 10px; font-weight: 700; font-family: var(--tcgd-mono); }
.tcgd-se-chart-empty {
  display: flex; align-items: center; justify-content: center;
  height: 340px; color: var(--tcgd-text-faint); font-size: 13px;
}
.tcgd-se-chart-foot { font-size: 10.5px; color: var(--tcgd-text-faint); margin-top: 6px; }

/* Hover crosshair — dashed vertical line that follows the cursor across the
   plot, with one dot per series snapped to the nearest unified date.
   Mirrors the compare dashboard + product-explorer market tab pattern. */
.tcgd-se-chart-hit { cursor: crosshair; }
.tcgd-se-chart-cursor-line {
  stroke: var(--tcgd-text-muted);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  pointer-events: none;
}
.tcgd-se-chart-cursor-dot {
  stroke: var(--tcgd-surface);
  stroke-width: 2;
  pointer-events: none;
}
.tcgd-se-chart-tooltip {
  position: absolute;
  background: var(--tcgd-surface);
  border: 1px solid var(--tcgd-border-strong);
  border-radius: var(--tcgd-radius-sm);
  padding: 8px 11px 9px;
  box-shadow: var(--tcgd-shadow-hover);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
  transform: translateY(calc(-100% - 10px));
}
.tcgd-se-chart-tooltip.tcgd-se-chart-tooltip-below { transform: translateY(10px); }
.tcgd-se-chart-tooltip-date {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--tcgd-text-muted); font-variant-numeric: tabular-nums;
  text-transform: uppercase; margin-bottom: 6px;
}
.tcgd-se-chart-tooltip-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-variant-numeric: tabular-nums;
  padding: 2px 0;
}
.tcgd-se-chart-tooltip-swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tcgd-se-chart-tooltip-name {
  font-weight: 600; color: var(--tcgd-text);
  flex: 1 1 auto; min-width: 60px; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tcgd-se-chart-tooltip-idx { color: var(--tcgd-text-muted); font-weight: 600; }
.tcgd-se-chart-tooltip-raw { color: var(--tcgd-text); font-weight: 700; }

/* =========================================================================
   Chase cards grid
   ========================================================================= */

.tcgd-se-chase {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
  gap: 12px;
}
.tcgd-se-chasecard {
  border: 1px solid var(--tcgd-border);
  border-radius: var(--tcgd-radius);
  background: var(--tcgd-surface);
  padding: 9px;
  display: flex; flex-direction: column; gap: 7px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.tcgd-se-chasecard:hover { border-color: var(--tcgd-border-strong); box-shadow: var(--tcgd-shadow); }
.tcgd-se-chasecard-img {
  width: 100%; aspect-ratio: 5 / 7;
  background: var(--tcgd-surface-2);
  border-radius: var(--tcgd-radius-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tcgd-se-chasecard-img img { width: 100%; height: 100%; object-fit: contain; }
.tcgd-se-chasecard-img .tcgd-noimage { font-size: 10px; color: var(--tcgd-text-faint); }
.tcgd-se-chasecard-name {
  font-size: 11.5px; font-weight: 600; color: var(--tcgd-text); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em;
}
.tcgd-se-chasecard-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tcgd-se-chasecard-rar {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--tcgd-accent-text); background: var(--tcgd-accent-soft);
  padding: 1px 6px; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%;
}
.tcgd-se-chasecard-price { font-size: 13px; font-weight: 700; color: var(--tcgd-text); font-variant-numeric: tabular-nums; }

/* =========================================================================
   Sealed products highlight cards
   ========================================================================= */

.tcgd-se-sealed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.tcgd-se-sealedcard {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--tcgd-border);
  border-radius: var(--tcgd-radius);
  background: var(--tcgd-surface);
  padding: 12px;
}
.tcgd-se-sealedcard-img {
  width: 56px; height: 70px;
  background: var(--tcgd-surface-2);
  border-radius: var(--tcgd-radius-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tcgd-se-sealedcard-img img { width: 100%; height: 100%; object-fit: contain; }
.tcgd-se-sealedcard-kind {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--tcgd-text-muted);
}
.tcgd-se-sealedcard-name {
  font-size: 12px; font-weight: 600; color: var(--tcgd-text); line-height: 1.25;
  margin: 2px 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tcgd-se-sealedcard-price { font-size: 17px; font-weight: 700; color: var(--tcgd-text); font-variant-numeric: tabular-nums; }
.tcgd-se-sealedcard-sub { font-size: 11px; color: var(--tcgd-text-faint); margin-top: 2px; }

/* =========================================================================
   Structure metrics grid
   ========================================================================= */

.tcgd-se-structure {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 1px;
  background: var(--tcgd-border);
  border: 1px solid var(--tcgd-border);
  border-radius: var(--tcgd-radius);
  overflow: hidden;
}
.tcgd-se-metric {
  background: var(--tcgd-surface);
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 3px;
}
.tcgd-se-metric-label {
  font-size: 10.5px; color: var(--tcgd-text-muted); font-weight: 600;
  display: flex; align-items: center; gap: 5px;
}
.tcgd-se-metric-value {
  font-size: 16px; font-weight: 700; color: var(--tcgd-text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.tcgd-se-metric-value.tcgd-na { color: var(--tcgd-text-faint); font-weight: 500; font-size: 14px; }
.tcgd-se-metric-sub { font-size: 10.5px; color: var(--tcgd-text-faint); font-variant-numeric: tabular-nums; }
/* info dot with title tooltip */
.tcgd-se-info {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--tcgd-border-strong); color: var(--tcgd-text-muted);
  font-size: 9px; font-weight: 700; line-height: 11px; text-align: center;
  cursor: help; flex-shrink: 0;
}

/* =========================================================================
   Right rail panels
   ========================================================================= */

.tcgd-se-right { display: flex; flex-direction: column; gap: 12px; }
.tcgd-se-panel {
  border: 1px solid var(--tcgd-border);
  border-radius: var(--tcgd-radius);
  background: var(--tcgd-surface);
  padding: 13px 14px;
}
.tcgd-se-panel-head {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tcgd-text-muted);
}
.tcgd-se-panel-head .tcgd-se-info { margin-left: auto; }

/* coverage bars */
.tcgd-se-cov { display: flex; flex-direction: column; gap: 11px; }
.tcgd-se-cov-row { display: flex; flex-direction: column; gap: 5px; }
.tcgd-se-cov-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tcgd-se-cov-label { font-size: 12px; color: var(--tcgd-text-soft); display: flex; align-items: center; gap: 7px; }
.tcgd-se-cov-ico {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--tcgd-accent-soft); color: var(--tcgd-accent-text);
  font-size: 11px; font-weight: 700;
}
.tcgd-se-cov-val { font-size: 14px; font-weight: 700; color: var(--tcgd-text); font-variant-numeric: tabular-nums; }
.tcgd-se-cov-sub { font-size: 10.5px; color: var(--tcgd-text-faint); }
.tcgd-se-bar { height: 6px; border-radius: 999px; background: var(--tcgd-surface-3); overflow: hidden; }
.tcgd-se-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--tcgd-accent), var(--tcgd-violet-text)); }
.tcgd-se-cov-total {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--tcgd-divider);
  display: flex; align-items: baseline; justify-content: space-between;
}
.tcgd-se-cov-total .tcgd-se-cov-label { font-weight: 600; color: var(--tcgd-text); }
.tcgd-se-cov-total .tcgd-se-cov-val { font-size: 17px; color: var(--tcgd-accent-text); }
.tcgd-se-cov-research {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--tcgd-divider);
  font-size: 11.5px; color: var(--tcgd-text-muted); line-height: 1.5;
}
.tcgd-se-cov-research strong { color: var(--tcgd-text); font-variant-numeric: tabular-nums; }

/* fact rows */
.tcgd-se-facts { display: flex; flex-direction: column; }
.tcgd-se-fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--tcgd-divider);
}
.tcgd-se-fact:last-child { border-bottom: none; }
.tcgd-se-fact-k { font-size: 12px; color: var(--tcgd-text-muted); }
.tcgd-se-fact-v { font-size: 12.5px; font-weight: 600; color: var(--tcgd-text); text-align: right; font-variant-numeric: tabular-nums; }
.tcgd-se-fact-v.tcgd-se-mono { font-family: var(--tcgd-mono); font-size: 12px; }

/* price memory */
.tcgd-se-pm-name { font-size: 11px; color: var(--tcgd-text-muted); margin-bottom: 9px; }
.tcgd-se-pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tcgd-se-pm-cell { display: flex; flex-direction: column; gap: 2px; }
.tcgd-se-pm-cell.tcgd-se-pm-wide { grid-column: 1 / -1; }
.tcgd-se-pm-k { font-size: 10.5px; color: var(--tcgd-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.tcgd-se-pm-v { font-size: 17px; font-weight: 700; color: var(--tcgd-text); font-variant-numeric: tabular-nums; }
.tcgd-se-pm-date { font-size: 10.5px; color: var(--tcgd-text-faint); font-variant-numeric: tabular-nums; }

/* hit-tier breakdown */
.tcgd-se-tiers { display: flex; flex-direction: column; }
.tcgd-se-tier {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--tcgd-divider);
}
.tcgd-se-tier:last-child { border-bottom: none; }
.tcgd-se-tier-name { font-size: 12.5px; color: var(--tcgd-text); display: flex; align-items: center; gap: 7px; }
.tcgd-se-tier-secret {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--tcgd-warn); background: var(--tcgd-warn-soft); padding: 1px 5px; border-radius: 999px;
}
.tcgd-se-tier-count { font-size: 13px; font-weight: 700; color: var(--tcgd-text); font-variant-numeric: tabular-nums; }
.tcgd-se-tier-total {
  margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--tcgd-border-strong);
  display: flex; align-items: baseline; justify-content: space-between;
  font-weight: 700;
}
.tcgd-se-tier-total .tcgd-se-tier-name { font-weight: 700; }

/* =========================================================================
   Tracked products table
   ========================================================================= */

.tcgd-se-tablewrap {
  border: 1px solid var(--tcgd-border);
  border-radius: var(--tcgd-radius);
  background: var(--tcgd-surface);
  overflow-x: auto;
}
.tcgd-se-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; }
.tcgd-se-table th {
  text-align: left; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--tcgd-text-muted); font-weight: 700;
  padding: 9px 12px; border-bottom: 1px solid var(--tcgd-border);
  white-space: nowrap; background: var(--tcgd-surface);
}
.tcgd-se-table td {
  padding: 9px 12px; border-bottom: 1px solid var(--tcgd-divider); vertical-align: middle;
}
.tcgd-se-table tr:last-child td { border-bottom: none; }
.tcgd-se-table td.tcgd-num, .tcgd-se-table th.tcgd-num { text-align: right; font-variant-numeric: tabular-nums; }
.tcgd-se-table-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tcgd-se-table-thumb {
  width: 26px; height: 34px; border-radius: 3px; background: var(--tcgd-surface-2);
  object-fit: contain; flex-shrink: 0;
}
.tcgd-se-table-namecell { font-weight: 600; color: var(--tcgd-text); }
.tcgd-se-table-mono { font-family: var(--tcgd-mono); font-size: 11.5px; color: var(--tcgd-text-soft); }
.tcgd-se-kindtag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--tcgd-tag-bg); color: var(--tcgd-tag-text);
}
/* Badge palette is grouped by family so a row reads at a glance:
   - Box family (blue):    box, illustration-box
   - Pack family (green):  pack, sleeved-pack, double-pack
   - Case family (orange): case, tin
   - Neutral (gray):       display, deck, ancillary
   The label text disambiguates within each family. */
.tcgd-se-kindtag.k-box,
.tcgd-se-kindtag.k-illustration-box { background: var(--tcgd-accent-soft); color: var(--tcgd-accent-text); }
.tcgd-se-kindtag.k-case,
.tcgd-se-kindtag.k-tin              { background: var(--tcgd-warn-soft); color: var(--tcgd-warn); }
.tcgd-se-kindtag.k-pack,
.tcgd-se-kindtag.k-sleeved-pack,
.tcgd-se-kindtag.k-double-pack      { background: var(--tcgd-positive-soft); color: var(--tcgd-positive); }
.tcgd-se-kindtag.k-display          { background: var(--tcgd-tag-bg); color: var(--tcgd-text); }
.tcgd-se-kindtag.k-deck             { background: var(--tcgd-tag-bg); color: var(--tcgd-text-soft); }
.tcgd-se-kindtag.k-ancillary        { background: var(--tcgd-tag-bg); color: var(--tcgd-text-muted); }

/* =========================================================================
   State / loading
   ========================================================================= */

.tcgd-se-loading-block {
  border: 1px solid var(--tcgd-border); border-radius: var(--tcgd-radius);
  background: var(--tcgd-surface); padding: 28px 16px; text-align: center;
  color: var(--tcgd-text-muted); font-size: 13px;
}

/* =========================================================================
   Responsive — CONTAINER queries, not viewport queries.

   These break on the dashboard's OWN width (the #tcgd-set-explorer container),
   so the layout collapses correctly no matter how wide the browser is or how
   narrow the theme column is. Viewport media queries were the root cause of the
   crushed center: inside a narrow theme column the viewport stayed huge, the
   breakpoints never fired, and two fixed rails strangled the flexible center.
   ========================================================================= */

@container tcgdse (max-width: 1180px) {
  /* Facts rail drops below the main column as a wrapping row; selector stays. */
  .tcgd-se-shell { grid-template-columns: 280px minmax(0, 1fr); }
  .tcgd-se-right {
    grid-column: 1 / -1;
    position: static; max-height: none; overflow: visible;
    flex-direction: row; flex-wrap: wrap;
  }
  .tcgd-se-right .tcgd-se-panel { flex: 1 1 280px; }
}

@container tcgdse (max-width: 820px) {
  .tcgd-se-shell { grid-template-columns: 1fr; padding: 16px 16px 48px; gap: 16px; }
  /* Selector unsticks and stacks on top; the set list becomes a capped,
     scrollable strip so it doesn't dominate the small viewport. */
  .tcgd-se-sidebar { position: static; max-height: none; overflow: visible; }
  .tcgd-se-setlist { max-height: 300px; overflow-y: auto; }
  .tcgd-se-hero { grid-template-columns: 80px 1fr; padding: 14px; }
  .tcgd-se-hero-img { width: 80px; height: 80px; }
  .tcgd-se-hero-title { font-size: 20px; }
  .tcgd-se-right { flex-direction: column; }
  .tcgd-se-right .tcgd-se-panel { flex: 1 1 auto; }
}

/* Safety net for very old engines without @container support: if the viewport
   itself is narrow, collapse to a single column so the page is never unusable.
   Modern browsers honor the container queries above and ignore nothing here. */
@media (max-width: 700px) {
  .tcgd-se-shell { grid-template-columns: 1fr; }
}

/* =========================================================================
   Pull Rates section (ties back to the Research Dashboard)
   ========================================================================= */

/* Slot selector + subhead grouping in the Pull Rates section header. */
.tcgd-se-pr-headright {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.tcgd-se-pr-slot {
  height: 26px;
  padding: 0 26px 0 9px;
  border: 1px solid var(--tcgd-border);
  border-radius: var(--tcgd-radius-sm);
  background: var(--tcgd-surface);
  color: var(--tcgd-text);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tcgd-text-muted) 50%),
                    linear-gradient(135deg, var(--tcgd-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 11px, calc(100% - 9px) 11px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.tcgd-se-pr-slot:focus { outline: none; border-color: var(--tcgd-accent); box-shadow: 0 0 0 3px var(--tcgd-accent-soft); }

.tcgd-se-pr-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.tcgd-se-pr-subhead {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--tcgd-text-muted);
  margin-bottom: 8px;
}
/* When the subhead carries an inline toggle (hit slot only), lay heading
   and segmented control on one row with the heading staying left. */
.tcgd-se-pr-subhead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tcgd-se-pr-anchor { color: var(--tcgd-text-faint); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Per-rarity table — calm, dense, tabular-num. */
.tcgd-se-pr-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
  border: 1px solid var(--tcgd-border); border-radius: var(--tcgd-radius);
  overflow: hidden; background: var(--tcgd-surface);
}
.tcgd-se-pr-table th {
  text-align: left; font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--tcgd-text-muted); font-weight: 700;
  padding: 8px 11px; border-bottom: 1px solid var(--tcgd-border);
  white-space: nowrap;
}
.tcgd-se-pr-table td {
  padding: 7px 11px; border-bottom: 1px solid var(--tcgd-divider); vertical-align: middle;
  color: var(--tcgd-text);
}
.tcgd-se-pr-table tr:last-child td { border-bottom: none; }
.tcgd-se-pr-table td.tcgd-num,
.tcgd-se-pr-table th.tcgd-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Hit chip on breakdown rows — small uppercase pill, calm warn tone so it
   reads as "noteworthy" without screaming. */
.tcgd-se-pr-hitchip {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 999px;
  background: var(--tcgd-warn-soft); color: var(--tcgd-warn);
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  vertical-align: middle;
}
/* Subtle tint on hit rows so the chase categories anchor visually at the
   top of the breakdown table. */
.tcgd-se-pr-hitrow td { background: var(--tcgd-accent-soft); }
.tcgd-se-pr-hitrow td:first-child { color: var(--tcgd-text); font-weight: 600; }

/* Top-pulled cards grid — same visual rhythm as the chase cards grid, but
   with rate metadata instead of price. */
.tcgd-se-pr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.tcgd-se-pr-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--tcgd-border);
  border-radius: var(--tcgd-radius);
  background: var(--tcgd-surface);
  padding: 8px 10px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.tcgd-se-pr-card:hover { border-color: var(--tcgd-border-strong); box-shadow: var(--tcgd-shadow); }
.tcgd-se-pr-card-img {
  width: 42px; height: 56px;
  background: var(--tcgd-surface-2); border-radius: var(--tcgd-radius-sm);
  /* overflow: visible so the hover-enlarged preview escapes the 42×56 frame
     and floats over neighboring cards. The grid container is also
     overflow: visible by default, so the preview can extend out of the
     cards grid as well. */
  overflow: visible;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.tcgd-se-pr-card-img img {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: var(--tcgd-radius-sm);
  transition: transform 180ms ease, box-shadow 180ms ease;
  transform-origin: center center;
  position: relative;
  z-index: 1;
}
/* Hover-enlarge: scale the thumbnail to a readable preview (≈ 168×224)
   without affecting layout. Lift the whole card on hover so the preview
   floats above siblings; the inner img sits one layer higher still. */
.tcgd-se-pr-card:hover { z-index: 50; }
.tcgd-se-pr-card-img:hover img {
  transform: scale(4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  z-index: 60;
}
.tcgd-se-pr-card-img .tcgd-noimage { font-size: 10px; color: var(--tcgd-text-faint); }
.tcgd-se-pr-card-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tcgd-se-pr-card-name {
  font-size: 12px; font-weight: 600; color: var(--tcgd-text); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tcgd-se-pr-card-meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--tcgd-text-muted);
}
.tcgd-se-pr-card-rar {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--tcgd-accent-text); background: var(--tcgd-accent-soft);
  padding: 1px 5px; border-radius: 999px;
}
.tcgd-se-pr-card-num { font-variant-numeric: tabular-nums; }
.tcgd-se-pr-card-rate {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  margin-top: 1px;
}
.tcgd-se-pr-card-pulls {
  font-size: 11.5px; font-weight: 700; color: var(--tcgd-text);
  font-variant-numeric: tabular-nums;
}
.tcgd-se-pr-card-perpack {
  font-size: 10.5px; color: var(--tcgd-text-soft); font-variant-numeric: tabular-nums;
}

/* Card-grid pager — sits between the cards grid and the foot. Only renders
   when the filtered card count exceeds the page size. Prev / Next bookend
   a tabular position label so the row reads at a glance. */
.tcgd-se-pr-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--tcgd-text-muted);
}
.tcgd-se-pr-pager-btn {
  border: 1px solid var(--tcgd-border);
  background: var(--tcgd-surface);
  color: var(--tcgd-text);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--tcgd-radius-sm);
  cursor: pointer;
  transition: border-color 120ms ease;
}
.tcgd-se-pr-pager-btn:hover:not(:disabled) { border-color: var(--tcgd-border-strong); }
.tcgd-se-pr-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tcgd-se-pr-pager-pos { font-variant-numeric: tabular-nums; }

.tcgd-se-pr-foot {
  margin-top: 12px; font-size: 11px; color: var(--tcgd-text-faint);
  font-variant-numeric: tabular-nums;
}

/* Unexpanded-leaves callout — surfaces sealed products whose BOM is missing,
   so the user knows exactly what to fix to make rates more accurate. Calm
   warn-tone (not error red), no animation. */
.tcgd-se-pr-callout {
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid var(--tcgd-warn);
  border-radius: var(--tcgd-radius);
  background: var(--tcgd-warn-soft);
}
.tcgd-se-pr-callout-title {
  font-size: 12.5px; font-weight: 700; color: var(--tcgd-warn);
  margin-bottom: 4px;
}
.tcgd-se-pr-callout-body {
  font-size: 12px; color: var(--tcgd-text); line-height: 1.5;
}
.tcgd-se-pr-callout-list {
  margin: 6px 0 0; padding: 0 0 0 18px; font-size: 12px;
  color: var(--tcgd-text-soft); line-height: 1.5;
}
.tcgd-se-pr-callout-meta { color: var(--tcgd-text-faint); font-variant-numeric: tabular-nums; }

/* Stack the two halves under each other on narrow containers — same family of
   container queries the rest of the dashboard uses. */
@container tcgdse (max-width: 980px) {
  .tcgd-se-pr-grid { grid-template-columns: 1fr; }
}