/* progress-cosmetics.css
   Styles for the retention/progress feature set on the Calendar tab:
   the periodic recap / streak-break recovery card (mirrors the visual shape
   of .getting-started-card in onboarding.css) and the additive cosmetic
   rewards layered onto the existing meal-card wrapper — a streak-flame
   overlay and an optional accent-color tint. Nothing here changes any of
   the 7 meal-card styles themselves; these only add to the shared wrapper
   every style already renders into. */

/* ── Progress recap / streak-break recovery card ──────────────────────── */

.progress-recap-card {
  background: #fff;
  border: 1px solid #dbe7f5;
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(8, 52, 99, 0.06);
}

.progress-recap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.progress-recap-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: #083463;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.progress-recap-title i {
  color: #c47d11;
}

.progress-recap-dismiss {
  border: none;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  color: #94a7bd;
  cursor: pointer;
  padding: 4px 6px;
}

.progress-recap-body {
  font-size: 0.87rem;
  font-weight: 600;
  color: #24344d;
  margin: 0 0 0.5rem;
}

.progress-recap-approx-note {
  font-size: 0.72rem;
  color: #94a7bd;
  font-weight: 600;
}

.progress-recap-save-btn {
  border: none;
  border-radius: 10px;
  background: #1b6fd8;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
  cursor: pointer;
}

.progress-recap-save-btn:hover {
  background: #1660bd;
}

.progress-recap-link {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1b6fd8;
  text-decoration: none;
}

.progress-recap-link:hover {
  text-decoration: underline;
}

/* ── Additive cosmetic rewards on meal cards ──────────────────────────── */
/* Layered onto the shared .cal-meal-card wrapper (see main-calendar.js /
   meal-queue-controller.js buildMealCard()) so they apply identically
   across every one of the 7 free styles — none of the 7 style renderers in
   shared/meal-card-content.js are touched. */

.cal-meal-card,
.queue-meal-card {
  position: relative;
}

.cal-card-streak-flame {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  pointer-events: none;
}

/* Accent-color unlock: tints borders/badges the current style already
   draws, via one custom property — never restructures the card. */
.cal-meal-card[data-card-accent="gold"],
.queue-meal-card[data-card-accent="gold"] {
  --card-accent: #c47d11;
  border-left-color: var(--card-accent);
}
.cal-meal-card[data-card-accent="gold"] .meal-serving-badge,
.queue-meal-card[data-card-accent="gold"] .meal-serving-badge {
  background: rgba(196, 125, 17, 0.14);
  color: #935e0c;
}

/* Founding-badge ribbon — profile-level, not per-card (see account.js /
   sidebar avatar), included here just to keep every progress-cosmetics rule
   in one file. */
.founding-badge-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 800;
  color: #935e0c;
  background: rgba(196, 125, 17, 0.14);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
}