/* garlicoin.org: big-number figures (stat-hero, stat-value) shared by the data pages and the faucet.
   Loaded after /assets/site.css by the pages that need it (their <head> links it). Split out of site.css on
   2026-10-21: keep a rule here only if just these pages use it; anything shared goes in site.css. */

.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-hero { grid-row: span 2; justify-content: center; background: var(--hero-grad); border: 2px solid rgba(184, 122, 12, .25); }
.stat-hero .label { color: #8a5a00; }
.stat-value { font-family: var(--font-fun); font-weight: 600; font-size: 1.7rem; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-hero .stat-value { font-size: clamp(1.9rem, 3.2vw, 2.9rem); white-space: nowrap; overflow-wrap: normal; }
.stat-sub { font-size: .9rem; color: var(--muted); }
.stat-hero .stat-sub { color: var(--ink); opacity: .78; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat-hero .label { color: var(--gold-text); }
}
@media (max-width: 860px) {
  .stat-hero { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  .figures .stat-value { font-size: 1.3rem; }
  .figures .stat-hero .stat-value { font-size: 1.9rem; }
}
/* hero figure scales with its own panel, not the viewport */
.stat-hero { container-type: inline-size; }
.stat-hero .stat-value, .figures .stat-hero .stat-value { font-size: clamp(1.4rem, 13.5cqi, 2.9rem); }
:root[data-theme="dark"] .stat-hero .label { color: var(--gold-text); }
/* long unbroken values (e.g. "GarlicoinCore:0.18.0") wrap instead of widening small screens */
.stat-sub, .stat-value { overflow-wrap: anywhere; }
.price-head, .mk-cur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.price-cur { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; }
.price-cur select { font: inherit; font-size: .85rem; padding: 3px 6px; line-height: 1.2; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
