/* Flame-with-ring composite used on dashboard streak chips and on the
   /streaks page chip cards. The ring fills proportionally to the
   buffer left (T / window); at T = 0 the stroke turns destructive so
   the urgency is unmissable. The colored disc inherits --pad from the
   surrounding chip. */

.streak-flame {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  flex-shrink: 0;
}

.streak-flame__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Rotate so the progress arc starts at 12 o'clock and walks clockwise. */
  transform: rotate(-90deg);
}

.streak-flame__ring-track {
  fill: none;
  /* Verlopen tijd reads as a faint hint of the category color rather
     than a saturated competitor to the progress arc — bigger contrast
     between "left" and "spent". */
  stroke: color-mix(in srgb, var(--pad, var(--color-primary)) 10%, transparent);
  stroke-width: 3;
}

.streak-flame__ring-progress {
  fill: none;
  stroke: var(--pad, var(--color-primary));
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 220ms ease, stroke 200ms ease;
}

.streak-flame__disc {
  position: absolute;
  /* Inset by the ring's stroke + a hair of breathing room so the disc
     sits inside the ring instead of clipping it. */
  inset: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pad, var(--color-primary)) 12%, transparent);
  color: var(--pad, var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
}

.streak-flame__count {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Same optical correction as .lvl-row__num — Cormorant glyphs sit
     low in their em-box, so nudge up slightly to land visually
     centered in the disc. */
  transform: translateY(-0.08em);
}

/* The "vandaag / morgen / nog Xd" label sits below the chip's existing
   label row. Compact, color-muted by default; turns destructive (and
   slightly heavier) at T = 0. `margin-top: auto` pins it to the bottom
   of the chip's flex column so the labels line up across chips even
   when the names above wrap to a different number of lines. */
.streak-expiry {
  font-size: 0.6875rem;
  color: var(--color-muted-fg);
  letter-spacing: 0.02em;
  text-align: center;
  margin-top: auto;
}

.streak-expiry--urgent {
  color: var(--color-destructive);
  font-weight: 500;
}