/* =============================================================================
   collstats.css — the per-collection STATS tab of gifts.wtf, built into a real
   stats PAGE (not a giant map with a thin row of tiles under it).

   Loaded AFTER theme.css + market.css, so every rule here refines what those
   sheets already establish. It touches ONLY the collection-detail Stats surface:
     · #cvMap        — the Intel Maps holder map (KEPT; given a bounded height)
     · #cvStatCards  — a prominent responsive grid of labelled metric tiles
     · #cvForensic   — the HOLDER FORENSICS panel (the getgems-less differentiator)

   All colour comes from the shared theme vars (theme.css), so the page reads
   correctly in dark / light / hashtag with no per-mode overrides needed. Unknown
   values are rendered by market.js as a dim em-dash (.st-miss); this sheet only
   makes that dimness intentional, never hides it.
   ========================================================================== */

/* ---- overall Stats stack — a touch more breathing room between the map, the
   tile grid and the forensics panel than the base 18px, so each reads as its
   own section of the page. ---------------------------------------------------- */
#cvStats {
  gap: 22px;
}

/* =============================================================================
   1 · THE HOLDER MAP — bounded, tasteful height.
   market.css frames it 16:9, which on a wide page makes the map tower over the
   stats. Cap it to a responsive band so the map is a strong HEADER, not the whole
   page. Higher specificity (#cvMap .cvmap-frame) wins regardless of load order.
   ========================================================================== */
#cvMap .cvmap-frame {
  aspect-ratio: auto;
  height: clamp(340px, 44vh, 460px);
}

/* =============================================================================
   2 · METRIC TILE GRID — the heart of the stats page.
   A polished, auto-fitting grid of labelled tiles. Each tile leads with a big
   value and carries a small uppercase label beneath it. Denser than the base so
   ten fields read as one coherent board.
   ========================================================================== */
#cvStatCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
}

#cvStatCards .cvstat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 16px 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background:
    linear-gradient(180deg, var(--raised) 0%, var(--panel) 100%);
  box-shadow: 0 1px 0 var(--hairline) inset;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#cvStatCards .cvstat-card:hover {
  border-color: var(--hairline-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* value first (the headline) — clamp for a big, responsive figure */
#cvStatCards .cvstat-card .cvc-v {
  order: 0;
  color: var(--ink-hi);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.05;
  letter-spacing: -.01em;
}
/* the small unit ("GRAM") rides quietly beside the number */
#cvStatCards .cvstat-card .cvc-v .cvc-cur,
#cvStatCards .cvstat-card .cvc-v .st-unit {
  color: var(--ink-lo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-left: 4px;
}
/* label beneath, small + uppercase */
#cvStatCards .cvstat-card .cvc-k {
  order: 1;
  color: var(--ink-lo);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
/* honest unknown — dim but present, never hidden, never zeroed */
#cvStatCards .cvstat-card .cvc-v.is-unknown,
#cvStatCards .cvstat-card .cvc-v .st-miss {
  color: var(--ink-faint);
  font-weight: 500;
}

/* =============================================================================
   3 · HOLDER FORENSICS — the headed differentiator panel.
   Overrides market.css's inline-facts layout into a proper titled card: a header
   row, an honest caption framing the map above, and (only when derivable) a small
   grid of clearly-labelled derived facts.
   ========================================================================== */
#cvForensic {
  display: block;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(77, 169, 238, .10) 0%, transparent 46%),
    linear-gradient(180deg, var(--raised) 0%, var(--panel) 100%);
  box-shadow: 0 1px 0 var(--hairline) inset;
}

.cvf-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.cvf-dot {
  width: 8px; height: 8px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--p400);
  box-shadow: 0 0 10px rgba(77, 169, 238, .8);
}
.cvf-title {
  margin: 0;
  color: var(--ink-hi);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cvf-via {
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.cvf-via::before {
  content: "\2014";           /* em-dash separator: "HOLDER FORENSICS — via Intel Maps" */
  margin-right: 6px;
  color: var(--ink-faint);
}

.cvf-cap {
  margin: 0;
  max-width: 68ch;
  color: var(--ink-mid);
  font-size: 12.5px;
  line-height: 1.55;
}

/* derived-facts grid — real ratios only (market.js only appends what it can
   honestly compute), so this row is present exactly when there is data. */
.cvf-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.cvf-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--panel);
}
.cvf-v {
  color: var(--ink-hi);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.cvf-v .cvf-unit {
  color: var(--ink-lo);
  font-size: 12px;
  font-weight: 600;
  margin-left: 3px;
}
.cvf-k {
  color: var(--ink-lo);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.cvf-note {
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.45;
}

/* honest "nothing derivable" line — the framing still stands */
.cvf-none {
  margin: 14px 0 0;
  max-width: 68ch;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.55;
}

/* =============================================================================
   4 · RESPONSIVE — tighten the tile grid on narrow screens so figures never
   crush. Mirrors market.css's own 2-up fallback but keeps our sizing.
   ========================================================================== */
@media (max-width: 560px) {
  #cvStatCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #cvStatCards .cvstat-card .cvc-v {
    font-size: clamp(18px, 6vw, 22px);
  }
  .cvf-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  #cvMap .cvmap-frame {
    height: clamp(280px, 52vw, 360px);
  }
}

/* =============================================================================
   5 · KOL INTEREST — the "only we track" panel. Intel Maps TonKOL wallets that
   actually hold this collection, cross-referenced against real holders. Reuses
   the .cvf-head / .cvf-title / .cvf-via / .cvf-cap look; adds KOL chips.
   ========================================================================== */
.cvkol {
  margin-top: 14px;
  padding: 16px 18px 18px;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}
.cvkol .cvf-head { margin-bottom: 8px; }
.cvkol-body { margin-top: 6px; }
.cvkol-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.cvkol-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 12px;
  background: color-mix(in srgb, var(--p400) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--p400) 40%, var(--hairline));
  border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--ink-hi);
}
.cvkol-name { letter-spacing: .01em; }
.cvkol-n {
  min-width: 20px; text-align: center;
  padding: 1px 7px; border-radius: 999px;
  background: var(--p400); color: var(--on-accent);
  font-size: 12px; font-weight: 800;
}