/* ── Pill ──────────────────────────────────────
   Shared rounded badge chrome. Used for the month total, streak stats, and
   cal timer. Composes with feature-specific blocks (`.streak-stats`,
   `.cal-timer`) that add their own elements (.streak-stats__fire, .cal-timer__dot). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: white;
  background: var(--glass-medium);
  border: 1px solid var(--glass-border-subtle);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.pill[hidden] { display: none; }

.pill--muted {
  color: var(--text-muted);
}

/* Project-tinted pill (streak/accent). Reads --accent / --accent-bg
   from body[data-color]. */
.pill--accent {
  font-weight: var(--font-extrabold);
  color: var(--accent, var(--text));
  background: var(--accent-bg, var(--surface));
  border-color: var(--accent, var(--border));
}

.streak-stats {
  margin-left: auto;
}

.streak-stats__fire {
  width: 16px;
  height: 19px;
  display: inline-block;
  vertical-align: -4px;
  overflow: visible;
  transform-origin: 50% 90%;
  animation: fire-sway 2.4s ease-in-out infinite;
}

.streak-stats__fire .flame-glow {
  fill: var(--accent, currentColor);
  opacity: 0.25;
  filter: blur(2px);
  transform-origin: 50% 90%;
  animation: fire-glow 1.6s ease-in-out infinite;
}

.streak-stats__fire .flame-outer {
  fill: var(--accent, currentColor);
  transform-origin: 50% 90%;
  animation: fire-flicker-outer 0.55s ease-in-out infinite alternate;
}

.streak-stats__fire .flame-inner {
  fill: #ffd24a;
  transform-origin: 50% 90%;
  animation: fire-flicker-inner 0.38s ease-in-out infinite alternate;
}

.streak-stats__fire .flame-spark {
  fill: #fff4b8;
  transform-origin: 50% 90%;
  animation: fire-spark 0.6s ease-in-out infinite alternate;
}

.streak-stats__fire.is-out {
  animation: none;
  opacity: 0.45;
  filter: grayscale(0.7);
}
.streak-stats__fire.is-out .flame-glow,
.streak-stats__fire.is-out .flame-outer,
.streak-stats__fire.is-out .flame-inner,
.streak-stats__fire.is-out .flame-spark {
  animation: none;
}

@keyframes fire-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}

@keyframes fire-glow {
  0%, 100% { transform: scale(1);    opacity: 0.22; }
  50%      { transform: scale(1.15); opacity: 0.35; }
}

@keyframes fire-flicker-outer {
  0%   { transform: scaleY(1)    scaleX(1)    translateY(0); }
  100% { transform: scaleY(1.06) scaleX(0.96) translateY(-0.4px); }
}

@keyframes fire-flicker-inner {
  0%   { transform: scaleY(0.92) scaleX(1.04) translateY(1px); opacity: 0.92; }
  100% { transform: scaleY(1.08) scaleX(0.92) translateY(-1px); opacity: 1; }
}

@keyframes fire-spark {
  0%   { transform: scale(1);    opacity: 0.9; }
  100% { transform: scale(1.25); opacity: 1; }
}

/* ── Calendar timer badge ──────────────────── */
.cal-timer {
  gap: 7px;
  font-variant-numeric: tabular-nums;
  padding: 5px 13px 5px 10px;
}
.cal-timer__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple-dark);
  flex-shrink: 0;
  animation: timer-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes timer-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}