/* Mom & Calm — me time, weekly reset, wins & badges, printables, share card, confetti. */

/* mood faces */
.moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mood {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; min-height: 64px;
  border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast), background var(--t-fast);
}
.mood-emoji { font-size: 1.8rem; line-height: 1; filter: grayscale(0.6); transition: filter var(--t-fast); }
.mood-label { font-size: 0.7rem; text-align: center; }
.mood[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); transform: translateY(-2px); }
.mood[aria-pressed="true"] .mood-emoji, .mood:hover .mood-emoji { filter: none; }
.moods-mini { margin-top: 12px; gap: 6px; }
.moods-mini .mood { min-height: 44px; padding: 6px 2px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.moods-mini .mood-emoji { font-size: 1.4rem; }
.mood-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; margin-bottom: 12px; }
.mood-day { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-radius: 12px; background: var(--surface); }
.mood-day[data-today] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.mood-day-emoji { font-size: 1.4rem; color: var(--ink-3); }

/* wins */
.wins-card { background: linear-gradient(160deg, var(--gold-wash), var(--surface) 70%); border-color: transparent; }
.win-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.win-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface); font-weight: 450; }
.win-day + .win-day { margin-top: 8px; }

/* badges */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin-bottom: 10px; }
.badge {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 10px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1.5px dashed var(--line-strong);
}
.badge-emoji { font-size: 2.2rem; filter: grayscale(1); opacity: 0.4; }
.badge-title { font-weight: 500; line-height: 1.25; color: var(--ink-3); }
.badge[data-earned] { background: linear-gradient(160deg, var(--gold-wash), var(--surface)); border: 1.5px solid var(--gold); }
.badge[data-earned] .badge-emoji { filter: none; opacity: 1; animation: pop 600ms var(--ease); }
.badge[data-earned] .badge-title { color: var(--ink); }

/* weekly reset */
.reset { width: min(720px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.reset-top { display: flex; justify-content: space-between; align-items: center; }
.reset-title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); font-weight: 400; }
.reset-title:focus { outline: none; }
.reset-body { min-height: 40vh; }
.reset-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.reset-day { padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.reset-day[data-today] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.reset-day h3 { font-size: var(--fs-md); }
.reset-item { font-size: var(--fs-sm); display: flex; gap: 6px; align-items: baseline; }
.reset-item .dot { width: 8px; height: 8px; flex: none; }
.priority-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.priority-list li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--gold-wash); }
.priority-list li[data-empty] { background: var(--surface-2); color: var(--ink-3); border: 1.5px dashed var(--line-strong); }
.prio-n { font-size: var(--fs-xl); font-weight: 600; color: var(--accent-ink); width: 1.2em; }
.prio-text { flex: 1; font-weight: 450; }
.reset-done-line { font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-size: var(--fs-xl); color: var(--accent-ink); }
.glance { background: linear-gradient(160deg, var(--blush), var(--surface) 65%); border-color: transparent; }
.glance-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; margin-bottom: 12px; }
.glance-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 12px; background: var(--surface); }
.glance-n { font-size: var(--fs-xl); font-weight: 600; }
.glance-dots { display: flex; gap: 2px; min-height: 8px; }
.glance-dots .dot { width: 7px; height: 7px; }
.glance-prios { margin: 4px 0 8px; padding-left: 1.2em; }
.prio-card { background: linear-gradient(160deg, var(--gold-wash), var(--surface) 70%); border-color: transparent; }
.reset-nudge { text-decoration: none; color: var(--ink); background: var(--sage); }

/* printables */
.print-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.print-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; min-height: 120px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease);
}
.print-card:hover { transform: translateY(-2px) rotate(-0.5deg); }
.print-emoji { font-size: 1.8rem; }

/* share card */
.share-preview { display: grid; place-items: center; padding: 10px; border-radius: var(--r-md); background: var(--surface-sunk); }
.share-canvas { width: 100%; max-width: 360px; height: auto; border-radius: 14px; box-shadow: var(--shadow-2); }

/* confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 600; overflow: hidden; }
.confetti span {
  position: absolute; top: -20px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; opacity: 0.9;
  animation: confetti-fall var(--d) cubic-bezier(0.25, 0.6, 0.5, 1) var(--delay) forwards;
}
@keyframes confetti-fall { to { transform: translate(var(--drift), 110vh) rotate(var(--r)); opacity: 0.7; } }

/* ---------- Bee ---------- */
.bee { display: flex; align-items: center; gap: 10px; margin-top: -4px; }
.bee-svg { flex: none; width: 46px; height: 46px; animation: bee-float 4s ease-in-out infinite; }
.bee-svg svg { width: 100%; height: 100%; }
.bee-say {
  position: relative; margin: 0; padding: 8px 14px; border-radius: 16px 16px 16px 4px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  font-size: var(--fs-sm); color: var(--ink-2); max-width: 46ch;
}
@keyframes bee-float { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(2px, -4px) rotate(3deg); } }

/* ---------- feature counts (About) ---------- */
.feature-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 16px; }
.fc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: var(--surface); text-align: center; }
.fc .num { font-size: var(--fs-xl); font-weight: 600; color: var(--accent-ink); }
.fc .hint { line-height: 1.2; }