/* Header streak pill flame and the streak pop-up (#streakPopover). */

/* ---------- Header pill flame ---------- */
.ps-pill-flame { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; }
.ps-pill-flame svg { width: 18px; height: 18px; fill: #c4cbc5; }
.ps-pill-flame.active svg,
.ps-pill-flame.saved svg { fill: #ff6a2b; }
.ps-pill-flame.saved svg { filter: drop-shadow(0 0 3px rgba(255, 140, 40, 0.45)); }
.streak-pill[aria-expanded="true"] { border-color: #18201c; box-shadow: 0 0 0 3px rgba(24, 32, 28, 0.08); }

/* ---------- Pop-up ---------- */
.sp {
  --sp-ink: #18201c;
  --sp-ink-2: #2a332e;
  --sp-muted: #5b655f;
  --sp-faint: #7c857f;
  --sp-line: #dce2da;
  --sp-paper-2: #eef1ea;
  --sp-green: #1f8a5b;
  --sp-flame-1: #ffb020;
  --sp-flame-2: #ff6a2b;
  --sp-ice: #3fa7e0;
  --sp-ice-soft: #e4f4fc;
  width: min(360px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--sp-line);
  border-radius: 20px;
  background: #fff;
  color: var(--sp-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  box-shadow: 0 24px 60px rgba(24, 32, 28, 0.18), 0 4px 12px rgba(24, 32, 28, 0.06);
  animation: sp-in 0.18s ease-out;
}
.sp[hidden] { display: none; }
.sp * { box-sizing: border-box; }
.sp p { margin: 0; }
@keyframes sp-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

.sp-hero { display: flex; align-items: center; gap: 16px; padding: 22px 22px 20px; background: linear-gradient(135deg, #fff6e5 0%, #ffe6d6 55%, #ffdbe0 100%); }
.sp[data-state="broken"] .sp-hero,
.sp[data-state="new"] .sp-hero { background: linear-gradient(135deg, #f3f5f1 0%, #e9ede6 100%); }
.sp[data-state="saved"] .sp-hero { background: linear-gradient(135deg, #fff4dc 0%, #ffe1c9 50%, #e5f5ea 100%); }

.sp-flame-wrap { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); }
.sp-flame { width: 42px; height: 42px; transform-origin: 50% 90%; }
.sp[data-state="active"] .sp-flame,
.sp[data-state="saved"] .sp-flame { animation: sp-flicker 2.4s ease-in-out infinite; }
@keyframes sp-flicker { 0%, 100% { transform: scale(1) rotate(0deg); } 30% { transform: scale(1.04, 0.97) rotate(-1.5deg); } 60% { transform: scale(0.98, 1.03) rotate(1.5deg); } }
.sp[data-state="broken"] .sp-flame,
.sp[data-state="new"] .sp-flame { filter: grayscale(1); opacity: 0.45; }
.sp-saved-tick { position: absolute; right: -6px; bottom: -6px; display: none; place-items: center; width: 26px; height: 26px; border: 3px solid #fff; border-radius: 50%; background: var(--sp-green); }
.sp-saved-tick svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.sp[data-state="saved"] .sp-saved-tick { display: grid; }

.sp-headline { flex: 1; min-width: 0; }
.sp-count { display: flex; align-items: baseline; gap: 8px; }
.sp-count strong { font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
.sp-count span { font-size: 1rem; font-weight: 800; color: var(--sp-ink-2); }
.sp-sub { margin-top: 6px !important; font-size: 0.88rem; color: var(--sp-muted); }
.sp-best[hidden] { display: none; }
.sp-best { align-self: flex-start; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); font-size: 0.74rem; font-weight: 800; color: var(--sp-ink-2); }
.sp-best svg { width: 13px; height: 13px; fill: #d99a10; }

.sp-body { padding: 18px 22px 20px; }
.sp-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px !important; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sp-faint); }
.sp-label b { font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--sp-ink); }
.sp-pips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sp-pips i { height: 10px; border-radius: 999px; background: var(--sp-paper-2); }
.sp-pips i.on { background: linear-gradient(90deg, var(--sp-flame-1), var(--sp-flame-2)); }
.sp[data-state="saved"] .sp-pips i.on { background: var(--sp-green); }
.sp-message { margin-top: 10px !important; font-size: 0.92rem; color: var(--sp-ink-2); }
.sp-message strong { color: var(--sp-ink); }

.sp-week { margin-top: 20px; }
.sp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sp-day { display: grid; justify-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; color: var(--sp-faint); }
.sp-day i { position: relative; display: grid; place-items: center; width: 100%; max-width: 38px; aspect-ratio: 1; border-radius: 12px; background: var(--sp-paper-2); }
.sp-day i svg { position: relative; width: 18px; height: 18px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sp-day.saved i { background: linear-gradient(160deg, var(--sp-flame-1), var(--sp-flame-2)); box-shadow: 0 4px 10px rgba(255, 106, 43, 0.28); }
.sp-day.saved i svg { stroke: #fff; stroke-width: 3.2; }
.sp-day.missed i::after { content: ""; width: 10px; height: 2px; border-radius: 2px; background: #b7bfb9; }
.sp-day.frozen i { background: var(--sp-ice-soft); }
.sp-day.frozen i svg { stroke: var(--sp-ice); stroke-width: 2; }
.sp-day.today { color: var(--sp-ink); }
.sp-day.today i { background: conic-gradient(var(--sp-flame-2) calc(var(--p, 0) * 1%), var(--sp-paper-2) 0); }
.sp-day.today i::before { content: ""; position: absolute; inset: 4px; border-radius: 9px; background: #fff; }
.sp-day.today.saved i { background: linear-gradient(160deg, var(--sp-flame-1), var(--sp-flame-2)); }
.sp-day.today.saved i::before { display: none; }

.sp-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 18px; border-top: 1px solid var(--sp-line); }
.sp-reward { display: inline-flex; align-items: center; gap: 8px; color: var(--sp-muted); font-size: 0.84rem; font-weight: 700; }
.sp-reward-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #fde9ec; }
.sp-reward-ic svg { width: 15px; height: 15px; fill: #e3485f; }
.sp-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 10px; background: var(--sp-ink); color: #fff !important; font-size: 0.88rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.sp-cta:hover { background: #000; }
.sp-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* For accounts without Premium the shell adds a "Premium" tag; keep the button solid and compact. */
.sp-cta.premium-locked-link { opacity: 1; }
.sp-cta .premium-lock-mark { order: 3; margin-left: 2px; padding: 1px 6px; border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.14); color: #ffd9a8; font-size: 0.66rem; }
.sp-reward { flex: 1; min-width: 0; }
.sp a:focus-visible { outline: 3px solid #4668ff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sp, .sp-flame { animation: none !important; }
}