/* Lagos Life: streak (owner 5d, N7). Spec: site/game-patterns.html#streak */
.ll-streak {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius-panel);
  background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); color: var(--ink);
}
.ll-streak__title { margin: 0; display: flex; align-items: center; gap: var(--space-1-5); font: var(--type-title-sm); font-variant-numeric: tabular-nums; }
.ll-streak__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; }
.ll-streak__day {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0-5);
  width: 100%; max-width: var(--streak-day-size); aspect-ratio: 1; margin: 0 auto; border-radius: 50%;
  background: var(--paper); color: var(--ink-soft); font: var(--type-micro);
}
.ll-streak__day-emoji { font-family: var(--font-emoji); font-size: var(--icon-xs); line-height: 1; }
.ll-streak__day[data-day="done"] { background: var(--leaf-soft); color: var(--ink); }
.ll-streak__day[data-day="done"] .ll-streak__day-emoji { font-size: var(--icon-xs); }
.ll-streak__day[aria-current="date"] { box-shadow: 0 0 0 2px var(--sunset-deep); color: var(--ink); }
.ll-streak__day[aria-current="date"][data-day="ready"] { animation: ll-glow var(--duration-glow) var(--ease-in-out) infinite; }
.ll-streak__day[data-day="missed"] { background: transparent; box-shadow: inset 0 0 0 1px var(--border-control); color: var(--ink-inactive); }
.ll-streak__note { margin: 0; font: var(--type-label-sm); color: var(--ink-soft); }
/* Streak chip: the compact state on the HUD / Hustle header. */
.ll-streak-chip { display: inline-flex; align-items: center; gap: var(--space-1-5); height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--mist); color: var(--ink); font: var(--type-label); font-variant-numeric: tabular-nums; }
.ll-streak-chip[data-streak="done"] { background: var(--leaf-soft); }
.ll-streak-chip[data-streak="pending"] { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-deep); }
.ll-streak-chip[data-streak="broken"] { background: var(--mist); color: var(--ink-soft); }
/* Milestone: one celebration template for day 7, 30, 100, 365. */
.ll-milestone {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center;
  padding: var(--space-6) var(--pad-sheet); border-radius: var(--radius-sheet);
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--gold), var(--glow-gold), var(--shadow-overlay); color: var(--ink);
}
.ll-milestone__num { margin: 0; font: var(--type-display); font-variant-numeric: tabular-nums; }
.ll-milestone__title { margin: 0; font: var(--type-title); }
.ll-milestone__body { margin: 0; font: var(--type-body); color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .ll-streak__day[aria-current="date"][data-day="ready"] { animation: none; box-shadow: 0 0 0 2px var(--sunset-deep), var(--glow-gold); } }