/* ============================================================================
   Mobile Editorial-Dashboard — additiv, hinter MobilePreview (th-mobile-preview).
   ----------------------------------------------------------------------------
   Sichtbar NUR bei `body.md-active` — die Klasse setzt mobile-dashboard.js,
   und zwar erst wenn: Flag ON  UND  (Viewport <= 768px  ODER  native App)
   UND das Editorial-Layout erfolgreich gerendert wurde. Ohne die Klasse ist
   #mobile-dash display:none -> null Einfluss auf das heutige Dashboard.
   Nur Tokens aus style.css, Light + Dark gespiegelt.
   ============================================================================ */

#mobile-dash { display: none; }
body.md-active #mobile-dash { display: block; }

/* Bei aktivem Editorial-Layout die bisherigen <main>-Inhalte ausblenden.
   #mobile-dash ist ein direktes Kind von <main>; alle anderen Kinder weg. */
body.md-active main > *:not(#mobile-dash) { display: none; }
/* Editorial-Inhalt bringt seine eigene horizontale Rhythmik mit. */
body.md-active main { padding-left: 0; padding-right: 0; }

/* ---- lokaler Hero-Maßstab (style.css kennt kein --fs-3xl) ---- */
.mdash { --md-hero: clamp(2.9rem, 15vw, 3.6rem); }

.mdash {
  font-family: var(--ff-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.mdash .eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.mdash .serif  { font-family: var(--ff-serif); font-variant-numeric: lining-nums tabular-nums; }
.mdash .up   { color: var(--c-good); }
.mdash .down { color: var(--c-bad); }
.mdash .flat { color: var(--muted); }

/* ---- Kopf ---- */
.mdash-head { padding: var(--sp-6) var(--sp-5) var(--sp-2); }
.mdash-head h1 {
  font-family: var(--ff-sans); font-weight: 600;
  font-size: var(--fs-xl); letter-spacing: -0.01em;
  margin: 4px 0 0; color: var(--text);
}
.mdash-head .sub { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 4px; }

/* ---- Hero: Renn-Countdown (nur wenn ein nächstes Rennen existiert) ---- */
.mdash-hero { padding: var(--sp-4) var(--sp-5) var(--sp-2); }
.mdash-hero .val {
  font-family: var(--ff-serif); font-weight: 500;
  font-size: var(--md-hero); line-height: 1; letter-spacing: -0.02em; color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
}
.mdash-hero .val small {
  font-family: var(--ff-sans); font-size: var(--fs-lg); color: var(--muted);
  font-weight: 400; margin-left: 8px; letter-spacing: 0;
}

/* ---- Wochenumfang ---- */
.mdash-week { padding: 0 var(--sp-5) var(--sp-5); }
.mdash-week .eyebrow .win {
  color: var(--muted); margin-left: 8px; font-size: 10px;
}
.mdash-week .big {
  font-family: var(--ff-serif); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1; color: var(--text); margin-top: 6px;
  font-size: var(--md-hero); font-variant-numeric: lining-nums tabular-nums;
}
.mdash-week .big small {
  font-family: var(--ff-sans); font-size: var(--fs-lg); color: var(--muted);
  font-weight: 400; margin-left: 8px;
}
.mdash-week .delta { margin-top: var(--sp-3); font-size: var(--fs-sm); }
/* Wenn ein Rennen ansteht, ist der Countdown der große Wert -> Wochenumfang
   rückt eine Stufe zurück (kompakter, wie in der Design-Vorschau). */
.mdash.has-race .mdash-week .big { font-size: var(--fs-xl); }

.mdash-hair { height: 1px; background: var(--border); margin: 0 var(--sp-5); }

/* ---- Insights-Sektion (I2) ----------------------------------------------
   Wiederverwendung der bestehenden .insights-*-Klassen aus style.css; hier
   nur die Selrow von Grid auf horizontal wischbar umstellen + editoriale
   Abstaende. Alles auf #mobile-dash gescoped -> Desktop-Insights unberuehrt. */
.mdash-insights { padding: var(--sp-5) 0 var(--sp-2); }
.mdash-insights-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 var(--sp-5) var(--sp-3);
}
.mdash-insights-head .mdash-cfg { color: var(--muted); }

#mobile-dash .insights-selrow {
  display: flex;
  grid-template-columns: none;           /* Grid aus style.css aufheben */
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--sp-5) 4px;
  margin: 0 0 var(--sp-4);
  scrollbar-width: none;
}
#mobile-dash .insights-selrow::-webkit-scrollbar { display: none; }
#mobile-dash .insights-mtile {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
}

#mobile-dash .insights-chart-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  padding: 0 var(--sp-5);
}
#mobile-dash .insights-chart-title { text-align: left; }
#mobile-dash .mdash-controls { display: flex; gap: 8px; flex-wrap: wrap; }
#mobile-dash .insights-plot { margin: var(--sp-3) var(--sp-5) 0; }
#mobile-dash .insights-legend,
#mobile-dash .insights-drill { padding: var(--sp-2) var(--sp-5) 0; }

/* ---- Wellness-Check-in (relozierter #wellness-container) ------------------
   Der Check-in ist EIN Element, das Desktop und Editorial teilen — dashboard.js
   rendert dieselbe .wz-*-Markup in beide. Die Editorial-Optik kommt deshalb
   ausschliesslich als Ueberschreibung hier unter .mdash-wellness; der Desktop-
   Wizard bleibt unveraendert. Ziel ist "Sektion": kein Karten-Rahmen, Raender
   und Eyebrow wie bei "Letzte Aktivitaeten", Radien aus den Tokens statt der
   14 px, die der Wizard aus dem Mockup mitgebracht hat.
   Abstaende sitzen an der Karte, nicht am Slot: loadWellnessCard() leert den
   Container, sobald heute beantwortet ist — ein gepolsterter Slot liesse
   danach taeglich eine Luecke unter dem Kopf stehen. -------------------------- */
.mdash-wellness .wellness-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Trennlinie wie .mdash-hair, aber an der Karte: verschwindet mit ihr, sobald
     der Check-in beantwortet ist — eine separate Hairline bliebe stehen. */
  border-bottom: 1px solid var(--border);
  /* Seitenabstand traegt der margin, damit die Linie wie .mdash-hair auf
     --sp-5 eingerueckt endet statt ueber die volle Breite zu laufen. */
  padding: 0 0 var(--sp-5);
  /* Unten mitgezaehlt, weil .mdash-week kein oberes Padding hat — sonst klebt
     der Wochenumfang an der Trennlinie. Faellt mit der Karte weg, sobald der
     Check-in beantwortet ist. */
  margin: var(--sp-5);
}

/* Kopf: die h3-Ueberschrift wird zum Eyebrow wie jede andere Sektionsmarke.
   Der Text bleibt im DOM (Ueberschriften-Hierarchie), nur die Optik kippt. */
.mdash-wellness .wz-head h3 {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.mdash-wellness .wz-prog,
.mdash-wellness .wellness-skip-link {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.mdash-wellness .wellness-skip-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}
/* Kopfzeile: "Wie fühlst du dich heute?" + "Frage 1 von 4" + "Später" sprengt
   auf 390 px die Zeile und bricht dreifach um. Den Fortschritt traegt deshalb
   die ohnehin vorhandene Punktreihe — kompakter und ruhiger. Der Zaehlertext
   bleibt fuer Screenreader erhalten (sr-only statt display:none), sonst ginge
   die einzige nicht-visuelle Fortschrittsangabe verloren. */
.mdash-wellness .wz-prog {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mdash-wellness .wz-dots { margin: var(--sp-3) 0 0; }

.mdash-wellness .wz-stage { min-height: 0; padding-top: var(--sp-4); }
.mdash-wellness .wzq {
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-4);
  /* Platz fuer zwei Zeilen, sonst wandert die Skala hoch, sobald eine Frage
     kuerzer ist als die vorige ("Und die Stimmung?"). */
  min-height: 60px;
}

/* Skala: fuenf gleich breite Felder statt fester 56-px-Kacheln — Hairline-
   Rahmen, Token-Radius, keine Fuellflaeche. Die max-width deckelt sie auf
   breiteren Geraeten (Tablet quer, 768 px): ohne sie zieht flex:1 jedes Feld
   auf ~142 px auseinander. */
.mdash-wellness .wzscale { gap: var(--sp-2); max-width: 420px; }
.mdash-wellness .wzbtn {
  flex: 1;
  width: auto;
  height: 46px;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--text-soft);
  font-size: var(--fs-md);
}
.mdash-wellness .wzbtn:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent);
  transform: none;
}
.mdash-wellness .wzanchor {
  max-width: 420px;   /* buendig unter der Skala */
  font-family: var(--ff-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Fertig-Zustand: Chips und Button auf dieselbe knappe Radien-Skala. */
.mdash-wellness .wzresult { border-radius: var(--r-2); background: transparent; }
.mdash-wellness .wzredo { border-radius: var(--r-2); }

/* ---- Empfehlung (relozierte rec-card) + letzte Aktivitaeten (I: Rec+Acts) -- */
.mdash-rec { padding: var(--sp-5) var(--sp-5) 0; }
.mdash-rec:empty { display: none; }
.mdash-rec .recommendation-container,
.mdash-rec .rec-card { margin: 0; }

.mdash-acts { padding: var(--sp-5) 0 var(--sp-8); }
.mdash-acts-head { padding: 0 var(--sp-5) var(--sp-2); }
.mdash-act {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.mdash-act:last-child { border-bottom: 0; }
.mdash-act .ic {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--surface-2); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.mdash-act .m { flex: 1; min-width: 0; }
.mdash-act .m .a { font-size: var(--fs-sm); color: var(--text); font-weight: 500; }
.mdash-act .m .b {
  font-family: var(--ff-mono); font-size: 10px; color: var(--muted);
  letter-spacing: 0.03em; text-transform: uppercase; margin-top: 2px;
}
.mdash-act .val { font-family: var(--ff-serif); font-size: var(--fs-md); color: var(--text); }
.mdash-act-empty { padding: var(--sp-3) var(--sp-5); color: var(--muted); font-size: var(--fs-sm); }

/* ============================================================================
   Mobile Bottom-Nav (I4) — sichtbar nur bei body.mnav-on (mobile-nav.js setzt
   das bei Flag ON + Mobile/native). Nur Tokens; Light + Dark.
   ============================================================================ */
.mnav { display: none; }

/* Top-Nav auf Mobile ausblenden, Bottom-Nav zeigen + Platz schaffen. */
body.mnav-on nav:not(.mnav) { display: none; }
/* Die Top-Nav trug das obere Safe-Area-Padding (Abstand zur Statusleiste).
   Ohne sie muss <main> es selbst tragen — sonst rutscht der Inhalt unter die
   Statusleiste (weisser Streifen). Unten Platz fuer die fixe Bar inkl. Safe-Area. */
body.mnav-on main {
  padding-top: max(env(safe-area-inset-top, 0px), var(--safe-top, 0px));
  padding-bottom: calc(76px + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px)));
}

body.mnav-on .mnav {
  display: flex;
  /* top: auto noetig — style.css setzt `nav { position: sticky; top: 0 }`;
     ohne Reset gewinnt das geerbte top:0 und die Bar klebt oben statt unten. */
  /* z-index 1100 wie die alte Top-Nav — sonst verdecken Leaflet-Controls
     (Heatmap) die Bar. Chatbot-Bubble liegt mit 1200 darueber. */
  position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 1100;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  padding-bottom: max(env(safe-area-inset-bottom), var(--safe-bottom, 0px));
}
.mnav-tab {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px;
  color: var(--muted); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mnav-tab.on { color: var(--accent-text); }
.mnav-tab span {
  font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: 0.03em; text-transform: uppercase;
}

/* "Mehr"-Menue */
.mnav-menu {
  position: fixed; right: 8px; z-index: 1101;
  bottom: calc(60px + max(env(safe-area-inset-bottom), var(--safe-bottom, 0px)));
  background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 6px; min-width: 190px;
}
.mnav-menu[hidden] { display: none; }
.mnav-menu a {
  display: block; padding: 11px 13px; border-radius: 7px;
  color: var(--text); text-decoration: none; font-size: var(--fs-sm);
}
.mnav-menu a:hover { background: var(--surface); }
.mnav-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.mnav-menu-action {
  display: block; width: 100%; text-align: left;
  padding: 11px 13px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text);
  font-family: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.mnav-menu-action:hover { background: var(--surface); }