/* ── Ziele (Goals) ────────────────────────────────────────── */
.goals-header {
  padding: var(--s-5) var(--s-5) var(--s-3);
  display: flex; align-items: center; justify-content: space-between;
}
.goals-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
}
.goals-add-btn {
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--r-full);
  padding: 8px 14px; font-size: 13px; font-weight: 700;
  transition: transform var(--dur-base) var(--ease);
}
.goals-add-btn:active { transform: scale(0.96); }
.goals-list { padding: 0 var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.goal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.goal-card.hit { border-color: color-mix(in srgb, var(--xp) 50%, transparent); }
/* Stale-Ziel (lange nicht gemacht): dezenter Akzent + Comeback-Banner. */
.goal-card.stale { border-color: color-mix(in srgb, var(--xp) 35%, var(--border)); }
.goal-comeback-hint {
  font-size: 12px; line-height: var(--lh-normal); color: var(--xp);
  background: color-mix(in srgb, var(--xp) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--xp) 30%, transparent);
  border-radius: var(--r-sm);
  padding: 6px 10px;
}
.goal-comeback-hint b { font-weight: 700; }
/* Klickbarer Card-Body (Head + Progress) — oeffnet den Verlauf.
   Setzt nur Layout + Cursor; visuell soll der Body wie bisher aussehen,
   damit die Buttons rechts die Hauptaktionen bleiben. */
.goal-card-body {
  display: flex; flex-direction: column; gap: var(--s-3);
  cursor: pointer;
  border-radius: var(--r-sm);
  /* Negative Margins + Padding: Click-Hitbox geht bis an die Kartenraender,
     damit auch das Padding der Karte selbst klickbar ist. */
  margin: calc(-1 * var(--s-2));
  padding: var(--s-2);
  transition: background var(--dur-fast) var(--ease);
}
.goal-card-body:hover { background: color-mix(in srgb, var(--surface2) 50%, transparent); }
.goal-card-body:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.goal-card-head { display: flex; align-items: center; gap: var(--s-3); }
.goal-emoji { font-size: 1.6rem; flex-shrink: 0; }
.goal-meta { flex: 1; min-width: 0; }
.goal-name { font-family: var(--font-display); font-size: var(--fs-body); line-height: var(--lh-snug); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Streak-Badge: erscheint inline rechts neben dem Goal-Name ab 2 Perioden
   in Folge. Kompakte Pille mit Flammen-Glyph, leicht ausgegraut. */
.goal-streak-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, #f97316 18%, var(--surface2));
  color: #f97316;
  border: 1px solid color-mix(in srgb, #f97316 40%, var(--border));
  white-space: nowrap;
}
.goal-sub  { font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; }
.goal-card-progress {
  height: 8px; background: var(--track-empty, var(--surface2)); border: 1px solid var(--border);
  border-radius: var(--r-full); overflow: hidden;
}
.goal-progress-fill {
  height: 100%; background: var(--primary);
  transition: width 700ms var(--ease);
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
}
/* Pulse-Glow: ein Shimmer-Streifen wandert einmal von links nach rechts ueber
   den Fill, sobald ein neuer Eintrag gespeichert wurde. Triggert via Klasse
   `.progress-pulse`, die main.js nach renderAll() setzt. */
.goal-progress-fill.progress-pulse::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%);
  transform: translateX(-100%);
  animation: progress-pulse-sweep 700ms var(--ease) both;
  pointer-events: none;
}
@keyframes progress-pulse-sweep {
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .goal-progress-fill.progress-pulse::after { animation: none; }
}

/* =============================================================
   Goal-Celebration: 🎯-Burst beim Erreichen des Wochenziels.
   Host wird zentriert auf der Goal-Card platziert (left/top via JS),
   die einzelnen Partikel nutzen CSS-Custom-Props (--dx/--dy/--rot)
   fuer ihren Zielvektor.
   ============================================================= */
.goal-celebration {
  position: fixed; z-index: 135;
  pointer-events: none;
  width: 0; height: 0;
}
.goal-celebration-piece {
  position: absolute;
  left: 0; top: 0;
  font-size: 22px;
  transform: translate(-50%, -50%);
  animation: goal-celebrate 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  will-change: transform, opacity;
}
@keyframes goal-celebrate {
  0%   { transform: translate(-50%, -50%) scale(0.4) rotate(0deg); opacity: 0; }
  15%  { transform: translate(-50%, -50%) scale(1.1) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.9) rotate(var(--rot)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .goal-celebration-piece { animation: goal-celebrate-reduced 600ms ease-out both; }
  @keyframes goal-celebrate-reduced {
    0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    40%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
  }
}
.goal-card.hit .goal-progress-fill { background: var(--xp); }
/* Goal-Actions: nur noch der +Eintrag-Button, in voller Karten-Breite.
   Klemmbrett + Trash sind raus — Verlauf oeffnet sich via Card-Klick,
   Trash lebt im Verlauf-Modal. */
.goal-actions { display: flex; }
.goal-btn-add {
  flex: 1;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 13px; font-weight: 600;
  transition: transform var(--dur-base) var(--ease);
}
.goal-btn-add:active { transform: scale(0.97); }
.goal-btn-add.primary { background: var(--primary); color: #fff; border-color: transparent; }
.goal-btn-icon {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 13px;
  transition: transform var(--dur-base) var(--ease);
}
.goal-btn-icon:active { transform: scale(0.97); }

/* Trash im Verlauf-Modal: dezent, klare Hover-Warnfarbe. */
.goal-history-footer {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  display: flex; justify-content: center;
}
.goal-history-trash {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 14px; font-size: 13px;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.goal-history-trash:hover { color: var(--danger); border-color: var(--danger); }
.goals-empty {
  padding: var(--s-6) var(--s-5);
  text-align: center; color: var(--muted);
  font-size: var(--fs-body);
}

/* ── Searchable Activity Combobox ─────────────────────────── */
.combobox {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface2);
  overflow: hidden;
}
.combobox.open { border-color: var(--primary); }
.combobox-search {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0;
}
.combobox-search input {
  flex: 1;
  background: transparent; border: none;
  padding: 14px;
  color: var(--text); font-size: var(--fs-body);
}
.combobox-search input:focus { outline: none; }
.combobox-search::before {
  content: '🔍';
  padding-left: 12px;
  font-size: 14px; opacity: 0.6;
}
.combobox-clear {
  padding: 8px 14px; color: var(--muted);
  background: transparent; border: none;
  display: none;
}
.combobox.has-value .combobox-clear { display: block; }
.combobox-panel {
  display: none;
  border-top: 1px solid var(--border);
}
.combobox.open .combobox-panel { display: block; }
.combobox-section + .combobox-section { border-top: 1px solid var(--border); }
.combobox-section-title {
  padding: 10px 14px 6px;
  font-size: var(--fs-micro); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
}
.combobox-list {
  max-height: 200px;
  overflow-y: auto;
  padding-bottom: 6px;
}
.combobox-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  background: transparent; border: none;
  color: var(--text); font-size: var(--fs-body);
  text-align: left;
  transition: background var(--dur-base) var(--ease);
}
.combobox-item:hover, .combobox-item.selected { background: var(--surface); }
.combobox-item-emoji { font-size: 1.2rem; }
.combobox-empty {
  padding: 14px;
  color: var(--muted); font-size: var(--fs-micro);
  text-align: center;
}

/* ── Jahres-Grid (Verlauf-Modal) ──────────────────────────────
   26 Zeilen mit je [KW-Nummer | 7 Tage | Lücke | 7 Tage | KW-Nummer].
   Tageszellen sind quadratische Punkte; KW-Pillen tragen den Hit-State
   der Woche (rot/gelb/grün/lila). */
.ygrid-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-bottom: 16px;
}
.ygrid-head {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.ygrid {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ygrid-row {
  display: grid;
  /* KW-Label | 7 Tage | Lücke | 7 Tage | KW-Label.
     1fr fuer die Tageszellen, kleine fixe Spalten fuer Labels + Gap. */
  grid-template-columns: 22px repeat(7, 1fr) 8px repeat(7, 1fr) 22px;
  gap: 2px;
  align-items: center;
}
.ygrid-day {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 3px;
  background: var(--surface2);
  border: 1px solid transparent;
}
/* Tag mit mindestens 1 Eintrag → Lila-Akzent (App-Farbe). Default fuer den
   Streak-Verlauf; die Goal-Ansicht ueberschreibt das pro Wochen-Hit-State. */
.ygrid-day.has {
  background: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, white 0%);
}
/* Goal-Ansicht: aktive Tage tragen den Hit-State ihrer Woche — exakt erreicht
   (=) ist gruen, erst echtes Übertreffen (>) ist lila. */
.ygrid-day.has.has-partial {
  background: #f59e0b;
  border-color: color-mix(in srgb, #f59e0b 45%, white 0%);
}
.ygrid-day.has.has-hit {
  background: #10b981;
  border-color: color-mix(in srgb, #10b981 45%, white 0%);
}
.ygrid-day.has.has-over {
  background: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, white 0%);
}
/* Vor Account-Erstellung: ausgegraut + diagonaler Streifen, damit klar ist
   "konntest du gar nicht erreichen". */
.ygrid-day.pre {
  background: repeating-linear-gradient(
    45deg,
    var(--surface) 0,
    var(--surface) 3px,
    transparent 3px,
    transparent 6px
  );
  opacity: 0.45;
}
.ygrid-day.future {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
}
.ygrid-gap { width: 100%; }

.ygrid-kw {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
  border-radius: var(--r-full);
  padding: 2px 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.ygrid-kw-left  { text-align: center; }
.ygrid-kw-right { text-align: center; }

/* Hit-States. Ampel + lila fuer "uebertroffen" (App-Farbe). */
.ygrid-kw.is-miss    { background: color-mix(in srgb, #ef4444 20%, transparent); border-color: color-mix(in srgb, #ef4444 35%, transparent); color: #fca5a5; }
.ygrid-kw.is-partial { background: color-mix(in srgb, #f59e0b 22%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, transparent); color: #fcd34d; }
.ygrid-kw.is-hit     { background: color-mix(in srgb, #10b981 22%, transparent); border-color: color-mix(in srgb, #10b981 40%, transparent); color: #6ee7b7; }
.ygrid-kw.is-over    { background: var(--primary); border-color: var(--primary); color: #fff; }
.ygrid-kw.is-neutral { /* default */ }

.ygrid-kw.pre,
.ygrid-kw.future {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  color: var(--muted-deep);
}
.ygrid-kw.current {
  outline: 1px solid var(--primary);
  outline-offset: 1px;
}

.ygrid-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
  font-size: var(--fs-micro);
  color: var(--muted);
}
.ygrid-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ygrid-swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ygrid-swatch.miss    { background: color-mix(in srgb, #ef4444 28%, transparent); border: 1px solid color-mix(in srgb, #ef4444 50%, transparent); }
.ygrid-swatch.partial { background: color-mix(in srgb, #f59e0b 30%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 55%, transparent); }
.ygrid-swatch.hit     { background: color-mix(in srgb, #10b981 30%, transparent); border: 1px solid color-mix(in srgb, #10b981 55%, transparent); }
.ygrid-swatch.over    { background: var(--primary); border: 1px solid var(--primary); }
.ygrid-swatch.paused  { background: color-mix(in srgb, #38bdf8 28%, transparent); border: 1px solid color-mix(in srgb, #38bdf8 55%, transparent); }

/* ── Goal Pause / Krankheits-Markierung ──────────────────────────────────────
   Eine Pause-Woche schuetzt den Streak, ohne als Hit zu zaehlen. Visuelle
   Sprache bewusst „beruhigend": kuehler Blau-Ton (Erholung), kein Rot. */
.ygrid-kw.is-paused {
  background: color-mix(in srgb, #38bdf8 22%, transparent);
  border-color: color-mix(in srgb, #38bdf8 45%, transparent);
  color: #7dd3fc;
}

.goal-pause-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, #38bdf8 18%, var(--surface2));
  color: #7dd3fc;
  border: 1px solid color-mix(in srgb, #38bdf8 45%, var(--border));
  white-space: nowrap;
}

.goal-card.paused {
  border-color: color-mix(in srgb, #38bdf8 50%, transparent);
  background: color-mix(in srgb, #38bdf8 6%, var(--surface));
}
.goal-card.paused .goal-progress-fill {
  background: color-mix(in srgb, #38bdf8 80%, transparent);
}

.goal-btn-icon.active {
  background: color-mix(in srgb, #38bdf8 18%, transparent);
  border-color: color-mix(in srgb, #38bdf8 50%, var(--border));
  color: #7dd3fc;
}

.goal-history-week.paused {
  background: color-mix(in srgb, #38bdf8 6%, transparent);
  border-radius: var(--r-sm);
  padding: var(--s-2);
}
.goal-history-week-summary.paused {
  color: #7dd3fc;
}
.goal-history-pause-hint {
  font-size: var(--fs-micro);
  color: var(--muted);
  font-style: italic;
  padding: var(--s-2) 0;
}

/* Pause-Modal — Optionen + Erklärtext. */
.goal-pause-body {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-2) 0;
}
.goal-pause-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin: 0;
}
.goal-pause-rule {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, #38bdf8 10%, var(--surface2));
  border: 1px solid color-mix(in srgb, #38bdf8 30%, var(--border));
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}
.goal-pause-rule-emoji { font-size: 1.4rem; line-height: 1; }
.goal-pause-joke {
  font-size: var(--fs-micro);
  color: var(--muted);
  margin: 0;
  font-style: italic;
}
.goal-pause-options {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-top: var(--s-2);
}
.goal-pause-option {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.goal-pause-option:active { transform: scale(0.99); }
.goal-pause-option:hover  { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.goal-pause-option.is-paused {
  border-color: color-mix(in srgb, #38bdf8 50%, var(--border));
  background: color-mix(in srgb, #38bdf8 10%, var(--surface2));
}
.goal-pause-option-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.goal-pause-option-label { font-weight: 600; font-size: var(--fs-body); }
.goal-pause-option-sub { font-size: var(--fs-micro); color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-pause-option-state {
  font-size: var(--fs-micro); color: var(--muted);
  white-space: nowrap;
}
.goal-pause-option.is-paused .goal-pause-option-state { color: #7dd3fc; }
.goal-pause-option.is-expandable .goal-pause-option-state { color: var(--primary); }

.goal-pause-picker {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
}
.goal-pause-picker[hidden] { display: none; }
.goal-pause-picker-label {
  font-size: var(--fs-micro);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.goal-pause-picker-row {
  display: flex; gap: var(--s-2); align-items: center;
}
.goal-pause-week-input {
  flex: 1; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  color: var(--text);
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}
.goal-pause-week-input::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
}
.goal-pause-picker-hint {
  font-size: var(--fs-micro);
  color: var(--muted);
}



/* =============================================================
   GOAL VERLAUF / STATISTIK — Tabs und Stats-View im Modal.
   ============================================================= */
.goal-history-modal-box {
  max-width: 480px; width: 100%;
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.goal-history-tabs {
  display: flex; gap: 4px;
  margin: var(--s-3) 0 var(--s-2);
  border-bottom: 1px solid var(--border);
}
.goal-history-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 8px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.goal-history-tab:hover { color: var(--text); }
.goal-history-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.goal-history-panel {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.goal-history-panel[hidden] { display: none; }

/* Range-Selector (7 / 30 / Gesamt) im Stats-Panel. */
.goal-stat-range {
  display: flex; gap: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 3px;
  margin-bottom: var(--s-3);
}
.goal-stat-range-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.goal-stat-range-btn.is-active {
  background: var(--primary);
  color: #fff;
}
.goal-stat-range-btn:not(.is-active):hover { color: var(--text); }

/* Stats-Grid (2x3 oder 3x2 abhaengig von Bildschirmbreite). */
.goal-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
@media (min-width: 480px) {
  .goal-stat-grid { grid-template-columns: repeat(3, 1fr); }
}
.goal-stat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  text-align: center;
}
.goal-stat-val {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.goal-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted);
  margin-top: 2px;
}
.goal-stat-sub {
  font-size: 10px;
  color: var(--muted-deep);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.goal-stat-section {
  margin-bottom: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}
.goal-stat-section-head {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted);
  margin-bottom: var(--s-3);
}

.goal-stat-svg {
  width: 100%; height: auto;
  display: block;
}

/* Tageszeit-Buckets als kleine Saeulen mit Emoji unter dem Bar. */
.goal-stat-buckets {
  display: flex; align-items: flex-end;
  gap: var(--s-2);
  height: 100px;
}
.goal-stat-bucket {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  height: 100%;
}
.goal-stat-bucket-bar {
  width: 100%;
  min-height: 4px;
  background: var(--surface3);
  border-radius: 3px 3px 0 0;
  margin-top: auto;
  transition: background var(--dur-fast) var(--ease);
}
.goal-stat-bucket.is-top .goal-stat-bucket-bar { background: var(--primary); }
.goal-stat-bucket-emoji {
  font-size: 16px;
  line-height: 1;
}
.goal-stat-bucket-label {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}
.goal-stat-bucket-val {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.goal-stat-trend-wrap { padding: var(--s-1) 0; }
.goal-stat-trend-axis {
  display: flex; justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.goal-stat-trend-unit {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted-deep);
}
.goal-stat-trend-empty {
  font-size: var(--fs-small);
  color: var(--muted);
  text-align: center;
  padding: var(--s-4) 0;
}

.goal-stat-empty {
  text-align: center;
  padding: var(--s-8) var(--s-4);
  color: var(--muted);
  font-size: var(--fs-small);
}
.goal-stat-empty-emoji {
  font-size: 36px;
  margin-bottom: var(--s-2);
}