/* ============================================================
   TRUMPONI — Stats: THE KITCHEN IS OPEN
   Real (demo-sourced) metrics + clearly-segregated fiction zone
   ============================================================ */

.stats {
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(227, 179, 65, .06), transparent 60%),
    var(--c-ink);
}

.stats__badges {
  margin-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}

.stats__grid {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr));
  gap: .9rem;
}

.stat-card {
  padding: 1.15rem 1.15rem 1.05rem;
  display: grid;
  gap: .55rem;
  align-content: start;
  min-height: 128px;
}
.stat-card__top {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.stat-card__icon {
  width: 21px;
  height: 21px;
  color: var(--c-gold);
  opacity: .85;
  flex: none;
}
.stat-card__label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--c-cream-faint);
  text-transform: uppercase;
}
.stat-card__value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: .01em;
  color: var(--c-cream);
  font-variant-numeric: tabular-nums;
  min-height: 1.4em;
}
.stat-card__note {
  font-size: .68rem;
  color: var(--c-cream-faint);
  letter-spacing: .05em;
}
.stat-card--up .stat-card__value { color: var(--c-pump); }
.stat-card--down .stat-card__value { color: var(--c-red); }

/* states */
.stat-card.is-error .stat-card__value,
.stat-card.is-na .stat-card__value { color: var(--c-cream-faint); font-size: 1.15rem; }
.stat-card.is-error .stat-card__icon { color: var(--c-red); opacity: .9; }
.stat-card.is-stale .stat-card__note { color: var(--c-gold); opacity: .85; }

.stats__footnote {
  margin-top: 1.3rem;
  text-align: center;
  font-size: .78rem;
  color: var(--c-cream-faint);
}

/* ---------- FICTION ZONE — unmistakably jokes ---------- */
.jokes {
  margin-top: clamp(2.6rem, 6vw, 3.6rem);
  position: relative;
  border: 2px dashed rgba(160, 48, 70, .55);
  border-radius: var(--radius);
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(110, 20, 35, .18), transparent 70%),
    rgba(74, 13, 24, .16);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  padding-top: clamp(2.4rem, 5vw, 3rem);
}
.jokes__stamp {
  position: absolute;
  top: -34px;
  right: clamp(.6rem, 4vw, 2.2rem);
}
.jokes__head { text-align: center; display: grid; justify-items: center; gap: .4rem; }
.jokes__kicker {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--c-wine-bright);
  text-transform: uppercase;
}
.jokes__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  color: var(--c-cream);
}
.jokes__note { font-size: .78rem; color: var(--c-cream-faint); max-width: 46ch; }

.jokes__grid {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: .9rem;
}
.joke-card {
  border: 1px solid rgba(160, 48, 70, .4);
  border-radius: var(--radius-sm);
  background: rgba(13, 10, 7, .5);
  padding: 1.05rem 1.1rem;
  display: grid;
  gap: .7rem;
}
.joke-card__top { display: flex; align-items: center; gap: .55rem; }
.joke-card__icon { width: 20px; height: 20px; color: var(--c-wine-bright); flex: none; }
.joke-card__label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-cream-faint);
}
.joke-card__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--c-gold-bright);
  letter-spacing: .04em;
}
.joke-bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(13, 10, 7, .8);
  border: 1px solid rgba(160, 48, 70, .4);
  overflow: hidden;
}
.joke-bar__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-wine-bright), var(--c-gold));
  transition: width 1.1s var(--ease-out) .25s;
}
.jokes.is-visible .joke-bar__fill { width: var(--val, 50%); }
.joke-card__scale {
  display: flex;
  justify-content: space-between;
  font-size: .58rem;
  letter-spacing: .12em;
  color: var(--c-cream-faint);
  text-transform: uppercase;
}