/* =============================================================
   DASHBOARD
   ============================================================= */
.dash-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* padding-bottom: internes Atemraum-Mass im Hero. margin-bottom: externer
     Abstand zur ersten Section — entspricht dem Section-zu-Section-Rhythmus
     (s-4 = 16px). Ohne margin-bottom klebt die naechste Card direkt an der
     Hero-Border, weil --surface vs --bg visuell kaum trennt. */
  padding: var(--s-6) 18px var(--s-3);
  margin-bottom: var(--s-4);
  display: flex; align-items: center; gap: var(--s-4);
}
.hero-avatar {
  width: 72px; height: 72px; border-radius: var(--r-lg);
  background: var(--surface2); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; flex-shrink: 0;
  transition: box-shadow var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
}
.hero-info { flex: 1; }
.hero-greeting {
  font-family: var(--font-display);
  font-size: var(--fs-micro); color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  margin-bottom: 2px;
}
.hero-level {
  font-family: var(--font-mono);
  font-size: var(--fs-h1); line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.hero-level span { color: var(--primary); }
.hero-sub { font-size: var(--fs-small); color: var(--muted); }
.hero-streak {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  flex-shrink: 0; padding: var(--s-2) var(--s-3);
  border-left: 1px solid var(--border);
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease);
}
.hero-streak:hover, .hero-streak:focus-visible {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  outline: none;
}
.hero-streak-num {
  font-family: var(--font-mono);
  font-size: var(--fs-h2); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-streak-label {
  font-family: var(--font-display);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--muted);
}

/* dash-section: einheitliche horizontale Polsterung und gleicher Vertical-
   Rhythm zwischen den Sections. Frueher waren padding-bottom/top pro
   Section unterschiedlich gesetzt — das hat eine inkonsistente Treppe
   zwischen Boost / Idee / Crew / Freunde produziert. Jetzt: horizontal
   gleich, vertikal nur via margin-bottom (eine Source-of-Truth).
   .dash-section-friends bekommt flex:1, damit sie auf grossen Screens
   den restlichen Raum fuellt; alle anderen sind flex:0 auto. */
.dash-section { padding: 0 var(--s-5); margin-bottom: var(--s-4); flex: 0 0 auto; }
.dash-section:last-child  { margin-bottom: var(--s-5); }
.dash-section-friends { flex: 1 1 auto; }
.dash-section[hidden] { margin: 0; }
.dash-section-label {
  font-family: var(--font-display);
  font-size: var(--fs-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-3);
  display: flex; justify-content: space-between; align-items: center;
}
.dash-section-label a {
  font-family: inherit; font-size: 10px; color: var(--primary);
  letter-spacing: var(--tracking-wider); cursor: pointer;
}

/* (Dash XP-Banner entfernt — XP/Level-Info steht schon in der TopBar.) */

/* =============================================================
   DASHBOARD: Welcome-/Idee-Platzhalter.
   Steht oberhalb des Friends-Feeds und ersetzt die frueher hier
   angezeigte Heute-Quest-Liste (die war redundant zum Quests-Tab).
   Soll nicht zu praesent sein — dezente Karte mit Mailto-Link.
   ============================================================= */
/* (Idee/Friends/Crew teilen sich jetzt das gemeinsame .dash-section-Rezept,
   keine Section-spezifischen padding-Tweaks mehr noetig.) */
/* Kompakte Idee-Zeile statt grosse Welcome-Karte — eine Zeile mit Eyebrow,
   Hinweis und Mail-Link. Nimmt deutlich weniger Platz, damit die Hauptinhalte
   (Crew, Freunde) hoeher rutschen. */
/* Dezenter Feedback-Hinweis — kein Button, nur ein feiner Ein-Zeiler mit
   Inline-Link. Bewusst unauffaellig, soll nicht wie ein CTA wirken. */
.dash-idea-card {
  padding: var(--s-1) var(--s-2);
  text-align: center;
}
.dash-idea-text {
  font-family: var(--font-body);
  font-size: 12px; line-height: var(--lh-normal);
  color: var(--muted-deep);
}
.dash-idea-mail {
  color: var(--primary); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  white-space: nowrap;
}
.dash-idea-mail:hover { border-bottom-color: var(--primary); }

/* =============================================================
   DASHBOARD: Friends-Feed („Deine Freunde") — kompakte Zeilenliste.
   Jede Karte = Container mit zwei Klick-Zielen: links die Info-Flaeche
   (oeffnet das Friend-Detail-Modal) und rechts ein eigener Motivieren-
   Button (sendet eine Push-Erinnerung). Frueher lag Motivieren im
   Detail-Modal, hat dort aber den Schliessen-Knopf vom Screen geschoben.
   ============================================================= */
.dash-friends-list {
  display: flex; flex-direction: column; gap: 6px;
}
.dash-friend-row {
  display: flex; align-items: stretch; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
  transition: background var(--dur-fast) var(--ease);
}
.dash-friend-row:hover { background: color-mix(in srgb, var(--surface2) 60%, transparent); }
.dash-friend-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.dash-friend-main:active { transform: scale(0.985); }
.dash-friend-avatar {
  width: 38px; height: 38px; border-radius: var(--r-full);
  background: var(--surface2); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
/* "Heute aktiv": gruener Ring um den Avatar. Frueher hing dafuer ein
   eigener Dot rechts neben dem Namen — jetzt ist die Information am
   Avatar verankert, was visuell ruhiger ist. */
.dash-friend-avatar.is-active {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 25%, transparent);
}
.dash-friend-meta { flex: 1; min-width: 0; }
.dash-friend-name {
  font-family: var(--font-display); font-size: var(--fs-body);
  line-height: var(--lh-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-friend-sub {
  font-size: var(--fs-micro); color: var(--muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-friend-sep { opacity: 0.5; }
/* Streak inline in der Sub-Zeile — ersetzt die frueher freischwebende
   Pille zwischen Meta und Motivieren-Button. */
.dash-friend-streak-inline {
  color: #f97316;
  font-weight: 600;
  letter-spacing: 0;
}
/* Motivieren-Button: vertikal kompakte Pille rechts an der Karte.
   Eigene Stop-Propagation in JS, damit ein Tap hier nicht zusaetzlich
   das Friend-Detail-Modal oeffnet. */
.dash-friend-poke {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-width: 64px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 9px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.dash-friend-poke:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); }
.dash-friend-poke:active { transform: scale(0.94); }
.dash-friend-poke:disabled, .dash-friend-poke.busy { opacity: 0.5; cursor: progress; }
.dash-friend-poke-icon { font-size: 16px; line-height: 1; }
.dash-friend-poke-label { line-height: 1; font-weight: 700; }
.dash-friends-empty {
  padding: var(--s-5) var(--s-4);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.dash-friends-empty-text {
  font-size: var(--fs-small); color: var(--muted); text-align: center;
}
.dash-friends-add {
  font-family: var(--font-display); font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--primary); background: transparent; padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  border-radius: var(--r-full);
}

/* =============================================================
   STREAK-Zahl Flip-Animation (Dashboard + TopBar).
   Triggered von renderDashboard, wenn sich der Wert geaendert hat.
   ============================================================= */
@keyframes num-flip {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  45%  { transform: translateY(-8px) scale(0.85); opacity: 0; }
  55%  { transform: translateY(8px) scale(0.85); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.num-flip {
  animation: num-flip 360ms var(--ease-spring) both;
}
@media (prefers-reduced-motion: reduce) {
  .num-flip { animation: none; }
}

/* =============================================================
   AVATAR-PULSE: kurzer Glow + Scale-Pulse, getriggert nach
   Schliessen des Level-Up-Modals. Macht das neue Stage-Emoji
   spuerbar, anstatt es einfach kommentarlos zu ersetzen.
   ============================================================= */
@keyframes avatar-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 60%, transparent); }
  35%  { transform: scale(1.15); box-shadow: 0 0 0 14px color-mix(in srgb, var(--primary) 0%, transparent); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
}
/* Kein animation-fill-mode `both` — sonst klebt der finale Keyframe-State
   (box-shadow: transparent) und ueberschreibt die inline gesetzte Stage-Aura
   im hero-avatar nach Animationsende. */
.avatar-pulse {
  animation: avatar-pulse 900ms var(--ease-spring);
}
@media (prefers-reduced-motion: reduce) {
  .avatar-pulse { animation: none; }
}

/* ── Streak-Rettung-Banner (Vortag nachtragen) ──────────────────────────────
   Erscheint nur, wenn gestern nichts eingetragen wurde. Handlungsaufforderung,
   deshalb warm/auffaellig (Streak-Orange), aber freundlich statt alarmierend. */
.streak-repair-banner {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, #f97316 13%, var(--surface));
  border: 1px solid color-mix(in srgb, #f97316 40%, transparent);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.streak-repair-banner:active { transform: scale(0.99); }
.streak-repair-banner:hover { background: color-mix(in srgb, #f97316 18%, var(--surface)); }
.streak-repair-icon { font-size: 1.6rem; flex-shrink: 0; }
.streak-repair-body { flex: 1; min-width: 0; }
.streak-repair-title {
  font-family: var(--font-display); font-size: var(--fs-body); line-height: var(--lh-snug);
}
.streak-repair-sub { font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; }
.streak-repair-fineprint {
  font-size: var(--fs-micro); color: var(--muted); opacity: 0.8;
  margin-top: 5px; font-style: italic;
}
.streak-repair-cta {
  flex-shrink: 0; align-self: center;
  font-family: var(--font-display); font-size: var(--fs-micro);
  color: #f97316; white-space: nowrap;
}