body.ui-today-active.ui-shell-enabled {
  color: var(--text);
  font-family: var(--font-system);
  background: var(--page);
}

body.ui-today-active.ui-shell-enabled .app {
  background: var(--page);
}

body.ui-today-active.ui-shell-enabled .main {
  width: 100%;
  max-width: none;
  height: 100dvh !important;
  padding: var(--space-4) var(--space-4) calc(var(--space-5) * 4) !important;
  overflow-y: auto;
}

body.ui-today-active #todayDashboard {
  display: block;
  color: var(--text);
  font-family: var(--font-system);
}

.today-overview {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  max-width: calc(var(--space-5) * 32);
  margin: 0 auto;
}

.today-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-height);
  margin-bottom: var(--space-2);
}

.today-header h1 {
  margin: 0;
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-tab-root) / 1.2 var(--font-system);
}

/* Kopfzeile: klein «Heute» (bzw. «Gestern», «Morgen») über dem Datum; das Datum bleibt auf einer Zeile. */
.today-header__title {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.today-header__title:focus {
  outline: none;
}

.today-header__label {
  min-height: calc(var(--font-size-section) * 1.4);
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-section) / 1.4 var(--font-system);
}

/* Das Datum passt in allen Sprachen auf eine Zeile; wird es doch zu lang, bricht es um, statt abgeschnitten zu werden
   (vorher overflow hidden: bei 1.2 Zeilenabstand kappte das die Unterlängen, z. B. das «p» in «Sept.»). */
.today-header__date {
  overflow-wrap: break-word;
}

/* Sehr schmale Geräte (unter 360 px): das Datum passt mit der Grösse der Unterscreen-Titel auf eine Zeile. */
@media (max-width: 359px) {
  .today-header__date {
    font-size: var(--font-size-subscreen);
  }
}

.today-header__actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-1);
}

.today-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-button);
}

/* Mit einer Hand erreichbar (Stand 28.09.2026, docs/spec/01-today.md): Lupe und Mikrofon der Kopfzeile noch einmal unten
   rechts über der Tab-Leiste, bündig mit ihrem rechten Rand, auf Handy und Tablet (unter 1024 px). Neutral wie die
   Kopfzeile, keine zweite primäre Aktion: Fläche --card mit Rahmen, ohne Schatten, Icons in --text, Tippflächen 44 px.
   Today bekommt unten so viel mehr Platz, dass die letzte Karte über der Gruppe endet. */
.today-reach {
  position: fixed;
  right: max(var(--space-4), calc((100vw - var(--tab-bar-max-width)) / 2));
  bottom: calc(var(--tab-bar-clearance) + var(--space-2));
  z-index: 25;
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.today-reach__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
}

/* Vor der Anmeldung nicht, und nicht, solange ein Hinweis über der Tab-Leiste steht (Speicher, neue Fassung;
   css/reliability.css): Der Hinweis hat dort Vorrang, die Kopfzeile bleibt. */
body.auth-locked .today-reach,
body:has(.storage-notice:not([hidden])) .today-reach {
  display: none;
}

@media (max-width: 1023px) {
  body.ui-today-active.ui-shell-enabled .main {
    padding-bottom: calc(var(--tab-bar-clearance) + var(--control-height) + var(--space-5)) !important;
  }
}

@media (min-width: 1024px) {
  .today-reach {
    display: none;
  }
}

.today-icon-button .bo-icon,
.today-reach__button .bo-icon,
.today-activity .bo-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
}

.today-card-heading,
.today-card-title {
  margin: 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-section) / 1.4 var(--font-system);
}

/* Kopf einer Today-Karte: Titel, rechts Zahl oder Zeitraum, ganz rechts höchstens ein Icon-Knopf (44 px Trefferfläche,
   der Kopf wird dadurch nicht höher). */
.today-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-5);
}

.today-card-head .today-card-title {
  flex: 1 1 auto;
  min-width: 0;
}

/* Erfasste Tage der Woche: Hat die Zahl neben dem Titel keinen Platz (Italienisch «Nutrizione questa settimana» stand bei
   320 px in drei Zeilen), rückt sie unter den Titel. */
.today-week .today-card-head {
  flex-wrap: wrap;
  column-gap: var(--space-2);
  row-gap: 0;
}

.today-card-count {
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.today-card-close {
  flex: 0 0 auto;
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0;
  color: var(--text-2);
}

.today-card-close .bo-icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* «Heute zu tun»: eine Liste; Knöpfe führen zur Stelle, Einnahmen werden direkt abgehakt. */
.today-todo {
  display: grid;
  gap: var(--space-1);
}

.today-todo__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-todo__list li + li {
  border-top: 1px solid var(--border);
}

.today-todo__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.today-todo__row > span {
  display: grid;
  min-width: 0;
}

.today-todo__row small {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

/* Texte umbrechen statt abschneiden (z. B. der vollständige Hinweis zu einer länger ausgesetzten Spritze). */
.today-todo__row strong {
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / 1.3 var(--font-system);
  overflow-wrap: anywhere;
}

.today-todo__row > .bo-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--text-2);
}

.today-todo__row > .bo-icon:last-child {
  color: var(--text-3);
}

.today-todo .today-todo__list + .today-routine {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

/* Einnahmen: Kästchen auf derselben Kante wie die Icons der Zeilen darüber; die ganze Zeile ist antippbar. */
.today-todo .today-routine__row {
  grid-template-columns: var(--icon-size) minmax(0, 1fr);
  gap: var(--space-3);
}

.today-todo .today-routine__row input {
  width: var(--icon-size);
  height: var(--icon-size);
}

.today-empty {
  padding: var(--space-3) var(--space-1);
}

/* «Erste Schritte»: haken sich aus den Daten ab. «Wiedereinstieg»: ein Satz und ein freiwilliger Knopf. */
.today-gap,
.today-steps,
.today-review,
.today-week {
  display: grid;
  gap: var(--space-3);
}

.today-steps__list {
  display: grid;
  margin: calc(var(--space-2) * -1) 0 calc(var(--space-2) * -1);
  padding: 0;
  list-style: none;
}

.today-steps__list li + li {
  border-top: 1px solid var(--border);
}

.today-steps__row {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) 0;
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.today-steps__mark {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--card);
  border: 1px solid var(--text-3);
  border-radius: var(--radius-pill);
}

.today-steps__row.is-done .today-steps__mark {
  background: var(--accent);
  border-color: var(--accent);
}

.today-steps__mark .bo-icon {
  width: var(--space-3);
  height: var(--space-3);
}

.today-steps__row.is-done {
  color: var(--text-2);
}

.today-steps__row > .bo-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--text-3);
}

/* Wochenrückblick: drei Zahlen, ein Satz, ein Balken, ein freiwilliger nächster Schritt. Die Spalten sind gleich breit,
   aber nie schmaler als ihr längstes Wort (Französisch «Entraînements» ragte bei 320 px mit breiter Schrift hinaus). */
.today-review__numbers {
  display: grid;
  grid-auto-columns: minmax(min-content, 1fr);
  grid-auto-flow: column;
  gap: var(--space-3);
}

.today-review__number {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
}

.today-review__number span,
.today-review__number small {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.today-review__number strong {
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / 1.3 var(--font-system);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.today-review__number[data-review="trend"] strong {
  color: var(--accent);
}

.today-review__sentence,
.today-gap__text {
  margin: 0;
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.today-review > .ui-progress {
  margin-top: calc(var(--space-2) * -1);
}

/* Morgenzeile: die Zahlen von gestern, ohne Karte. */
.today-morning {
  margin: 0;
  padding: var(--space-1) var(--space-1) 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  font-variant-numeric: tabular-nums;
}

/* Tageskarte: eine Karte mit Heldenzahl, Balken und den drei Makros darunter. */
.today-day-card {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Der Titel behält sein Wort; ein langer Satz rechts («320 de plus que l’objectif du jour» bei 320 px) bricht um. */
.today-day-card__head {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) auto auto;
  gap: var(--space-2);
  align-items: center;
}

.today-day-card__head > .bo-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--text-3);
}

.today-day-card__side {
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.today-day-card__hero {
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-hero) / 1.2 var(--font-system);
  font-variant-numeric: tabular-nums;
}

.today-day-card__hero small {
  color: var(--text-2);
  font-size: var(--font-size-value);
  font-weight: var(--font-weight-regular);
}

.today-overview .ui-progress,
.today-overview .ui-progress__fill {
  display: block;
}

.today-day-card__macros {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-3);
  padding-top: var(--space-1);
}

.today-day-card__macro {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.today-day-card__label {
  overflow: hidden;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-day-card__value {
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-list) / 1.3 var(--font-system);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ui-progress.is-mid .ui-progress__fill {
  background: var(--accent-mid);
}

.ui-progress.is-light .ui-progress__fill {
  background: var(--accent-light);
}

/* Erfasste Tage der Woche: gefüllt = erfasst, Umriss = nicht erfasst (neutral), gestrichelt = pausiert, hell = später. */
.today-week__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-week__day {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
}

.today-week__dot {
  box-sizing: border-box;
  width: var(--space-3);
  height: var(--space-3);
  border: 1px solid var(--text-3);
  border-radius: var(--radius-pill);
}

.today-week__day.is-logged .today-week__dot {
  background: var(--accent);
  border-color: var(--accent);
}

.today-week__day.is-paused .today-week__dot {
  border-style: dashed;
}

/* Tage vor dem ersten Eintrag eines neuen Kontos: hell wie «steht noch bevor», zählen nicht mit. */
.today-week__day.is-future .today-week__dot,
.today-week__day.is-before .today-week__dot {
  border-color: var(--border);
}

.today-week__label {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.today-week__day.is-today .today-week__label {
  color: var(--text);
  font-weight: var(--font-weight-medium);
}

.today-week__note {
  margin: 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.today-text-button {
  justify-self: start;
  min-height: var(--control-height);
  margin: calc(var(--space-3) * -1) 0 calc(var(--space-3) * -1);
  padding: 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.today-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.today-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.today-pair-grid .ui-metric-tile {
  min-height: calc(var(--control-height) + var(--space-5));
}

.today-pair-grid small {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.today-weight-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  width: 100%;
  text-align: left;
}

.today-weight-card__value {
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system);
}

.today-weight-card__delta {
  grid-column: 2;
  color: var(--accent);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

/* Trend mit Rate statt Tagesdifferenz (Stand 28.09.2026): Pfeil und Betrag in --accent, der Rest der Zeile gedämpft. */
.today-weight-card__rate {
  color: var(--accent);
}

.today-weight-chart {
  grid-column: 1 / -1;
  min-height: calc(var(--space-5) * 3);
  margin-top: var(--space-2);
}

.today-weight-chart svg {
  display: block;
  width: 100%;
  height: calc(var(--space-5) * 3);
}

.today-weight-chart polyline {
  fill: none;
  stroke: var(--text-3);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.today-chart-empty {
  margin: var(--space-5) 0 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
  text-align: center;
}

.today-activity {
  margin-top: var(--space-2);
}

.today-activity h2 {
  margin: 0 0 var(--space-1);
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-section) / 1.4 var(--font-system);
}

.today-activity .ui-list-row {
  width: 100%;
  color: var(--text);
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  text-align: left;
}

.today-activity .ui-list-row:last-child {
  border-bottom: 0;
}

/* Letzte Aktivität: lange Titel und Notizen brechen um (vorher eine Zeile mit «…», und die Spalte wuchs über die Karte
   hinaus); die Spalte bleibt so breit wie der Platz zwischen den Icons. */
.today-activity .ui-list-row > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}

.today-activity .ui-list-row strong,
.today-activity .ui-list-row small {
  display: block;
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  overflow-wrap: break-word;
}

.today-activity .ui-list-row strong {
  font-size: var(--font-size-list);
}

.today-activity .ui-list-row small {
  color: var(--text-3);
  font-size: var(--font-size-label);
}

.today-overview button:focus-visible,
.today-overview input:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: var(--space-1);
}

@media (max-width: 480px) {
  .today-overview {
    max-width: none;
  }
}

/* Nachricht zur Woche an den Coach (Wochenrückblick, Stand 28.09.2026): Blatt von unten mit einem Feld und zwei Knöpfen. */
.review-message-sheet__body {
  display: grid;
  gap: var(--space-3);
}

.review-message-sheet__status {
  margin: 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}