/* Komponenten: Shell, Aura, Kopfzeile, Tab-Bar, Karten, Formen */

/* App-Shell: alles liegt auf Creme */
.shell {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/*
  Aura: zwei bis drei große, weiche Verläufe hinter dem oberen Screenbereich.
  Sie laufen nach unten in Creme aus, Karten und Listen liegen im ruhigen Bereich.
  Jedes Modul hat eine feste Kombination (js/aura.js), Inhalt liegt immer darüber.
*/
.aura {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: var(--aura-height);
  overflow: hidden;
  pointer-events: none;
}

.aura-layer {
  position: absolute;
  inset: 0;
  animation: aura-in var(--aura-fade) var(--easing);
}

@keyframes aura-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*
  Verlauf von base zu transparent. --intensity (0 bis 1) steuert Größe und Deckkraft,
  wo ein Wert sichtbar werden soll. multiply lässt Überlagerungen zu Mischtönen werden.
*/
.blob {
  --intensity: 0.7;
  --size: calc(240px + 180px * var(--intensity));
  --c: var(--butter);
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle closest-side, var(--c) 0%, var(--c) 35%, transparent 100%);
  opacity: calc(0.45 + 0.55 * var(--intensity));
  filter: blur(var(--aura-blur));
  mix-blend-mode: multiply;
  will-change: transform;
  transition: width var(--duration) var(--easing), height var(--duration) var(--easing), opacity var(--duration) var(--easing);
}

.blob--butter { --c: var(--butter); }
.blob--mandarine { --c: var(--mandarine); }
.blob--koralle { --c: var(--koralle); }
.blob--rose { --c: var(--rose); }
.blob--periwinkle { --c: var(--periwinkle); }
.blob--salbei { --c: var(--salbei); }

/* Positionierte Blobs der Aura: Mittelpunkt bei --x/--y */
.aura .blob {
  left: var(--x);
  top: var(--y);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
}

/* Kopfzeile: transparent über der Aura, beim Scrollen Creme */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--header-height) + var(--safe-top));
  padding: var(--safe-top) calc(var(--page-margin) + var(--safe-right)) 0 calc(var(--page-margin) + var(--safe-left));
  background: transparent;
  transition: background-color var(--duration) var(--easing), box-shadow var(--duration) var(--easing);
}

.app-header h1 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Zurück-Pfeil links, bündig mit dem Seitenrand wie das Einstellungs-Icon rechts */
.icon-button--back {
  margin: 0 var(--space-1) 0 -10px;
}

.app-header--scrolled {
  background: var(--color-bg);
  box-shadow: 0 var(--line-width) 0 var(--color-tabline);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-right: -10px;
  border-radius: 50%;
  transition: background-color var(--duration) var(--easing);
}

.icon-button:active,
.icon-button[aria-current="page"] {
  background: var(--color-fill);
  box-shadow: inset 0 0 0 var(--line-width) var(--color-outline);
}

/* Hauptbereich über der Aura, Platz für die Tab-Bar lassen */
.view {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: var(--space-1) calc(var(--page-margin) + var(--safe-right)) calc(var(--tabbar-height) + var(--safe-bottom) + var(--space-3)) calc(var(--page-margin) + var(--safe-left));
  overflow-x: hidden;
  animation: view-in var(--duration) var(--easing);
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Tab-Bar: Creme mit feiner Linie, nur Icons, aktiver Tab mit weichem Blob in der Modulfarbe */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
  background: var(--color-bg);
  border-top: var(--line-width) solid var(--color-tabline);
}

.tab {
  --tab-tone: var(--butter);
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--tabbar-height);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration) var(--easing);
}

.tab[data-route="heute"] { --tab-tone: var(--rose); }
.tab[data-route="training"] { --tab-tone: var(--mandarine); }
.tab[data-route="medis"] { --tab-tone: var(--butter); }
.tab[data-route="checkin"] { --tab-tone: var(--koralle); }
.tab[data-route="essen"] { --tab-tone: var(--salbei); }

.tab svg {
  position: relative;
  z-index: 1;
  width: var(--tab-icon);
  height: var(--tab-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--tab-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab[aria-current="page"] {
  color: var(--color-text);
}

/* Blob: weicher Verlauf von base zu transparent, wie die Aura */
.tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tab-tone) 0%, var(--tab-tone) 38%, transparent 70%);
}

.icon-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Karte: transparent mit 1 px Kontur in Ink 14 Prozent, Radius 24, die Aura scheint durch */
.card {
  position: relative;
  padding: var(--space-3);
  background: transparent;
  border: var(--line-width) solid var(--color-outline);
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
}

.card > * {
  position: relative;
}

.card .blob {
  z-index: -1;
}

/* Aktions-Karte: früher Ink, jetzt wie jede Karte, keine dunklen Flächen mehr */

/* Platzhalter-Ansicht der leeren Module */
.placeholder {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

/* Abstände: Abschnitte großzügig, Karten 12 px */
.stack {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-2);
}

.stack-tight {
  display: grid;
  gap: var(--card-gap);
}

/* Eingabefelder als Pille, 16 px Schrift, sonst zoomt Safari beim Fokussieren */
.field {
  display: grid;
  gap: var(--space-1);
}

.input {
  width: 100%;
  min-height: var(--button-height);
  padding: 0 var(--space-3);
  font: inherit;
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-fill);
  border: 1.5px solid var(--color-outline);
  border-radius: var(--radius-pill);
  transition: border-color var(--duration) var(--easing);
  -webkit-appearance: none;
  appearance: none;
}

.input:focus {
  outline: none;
  border-color: var(--tone-deep);
}

.hint {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Fehler: Koralle als Punkt, der Text selbst bleibt Ink */
.error-text {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.error-text::before {
  content: "";
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--koralle-deep);
  transform: translateY(1px);
}

/* Buttons als Pille: primär gefüllt in der Modulfarbe, sekundär Kontur und Text in deep */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--button-height);
  padding: 0 var(--space-3);
  font-weight: 800;
  white-space: nowrap;
  color: var(--tone-deep);
  background: transparent;
  border: 1.5px solid var(--tone-deep);
  border-radius: var(--radius-pill);
  transition: background-color var(--duration) var(--easing), opacity var(--duration) var(--easing), transform var(--duration) var(--easing);
}

.button:active {
  transform: scale(0.98);
}

.button:disabled {
  opacity: 0.4;
}

.button--primary {
  color: var(--tone-on);
  background: var(--tone-fill);
  border-color: var(--tone-fill);
}

.button--primary:active {
  opacity: 0.85;
}

.button--danger {
  color: var(--creme);
  background: var(--koralle-deep);
  border-color: var(--koralle-deep);
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}

.button-row .button {
  padding: 0 var(--space-2);
}

/* Karten, die einen Zustand zeigen */
.status-card,
.warning-card {
  display: grid;
  gap: var(--space-1);
}

.status-card .button-row {
  margin-top: var(--space-2);
}

/* Modaler Dialog */
.dialog {
  width: min(100% - 2 * var(--page-margin), 360px);
  padding: var(--space-3);
  color: var(--color-text);
  background: var(--color-bg);
  border: 0;
  border-radius: var(--radius-card);
}

.dialog::backdrop {
  background: rgba(22, 22, 22, 0.3);
}

.dialog form {
  display: grid;
  gap: var(--space-2);
}

/* Bestätigen steht im DOM vorne, erscheint aber rechts */
.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  direction: rtl;
}

.dialog-actions > * {
  direction: ltr;
}

/* Rückmeldung am unteren Rand, oberhalb der Tab-Bar */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-height) + var(--safe-bottom) + var(--space-2));
  z-index: 20;
  width: max-content;
  max-width: calc(100% - 2 * var(--page-margin));
  padding: 12px var(--space-3);
  font-weight: 700;
  color: var(--color-bg);
  background: var(--color-text);
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity var(--duration) var(--easing), transform var(--duration) var(--easing);
}

.toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast--error {
  color: #FFFFFF;
  background: var(--koralle-deep);
}

/* Profil-Formular und Onboarding */
.intro {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-2);
}

.fieldset {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.fieldset legend {
  padding: 0;
  margin-bottom: var(--space-1);
}

/* Schalter: Pille mit Kreis-Knopf */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap-min);
}

.switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--color-line);
  cursor: pointer;
  transition: background-color var(--duration) var(--easing);
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform var(--duration) var(--easing);
}

.switch:checked {
  background: var(--tone-deep);
}

.switch:checked::after {
  transform: translateX(20px);
}

/* Regler mit großer Zahl */
.range-block {
  display: grid;
  gap: var(--space-1);
}

.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--tap-min);
  margin: 0;
  background: transparent;
}

.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-line);
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  margin-top: -14px;
  border-radius: 50%;
  background: var(--tone-deep);
  border: 0;
}

.range::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-line);
}

.range::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tone-deep);
  border: 0;
}

/* Checkbox-Zeilen, z. B. Schonungs-Tags: runde Haken */
.check-list {
  display: grid;
}

.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-1) 0;
}

.check-row + .check-row {
  border-top: var(--line-width) solid var(--color-line);
}

.check-row input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 1.5px solid var(--color-text);
  border-radius: 50%;
  transition: background-color var(--duration) var(--easing);
}

.check-row input:checked {
  border-color: var(--tone-deep);
  background: var(--tone-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4EFE6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* Chips und Tags: Pille, 32 px hoch, Tap-Fläche nach oben und unten erweitert */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px var(--space-1);
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--chip-height);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-fill);
  box-shadow: inset 0 0 0 var(--line-width) var(--color-outline);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration) var(--easing), color var(--duration) var(--easing);
}

.chip:has(input:checked) {
  box-shadow: none;
}

.chip::before {
  content: "";
  position: absolute;
  inset: -6px 0;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Gewählt: deep der Modulfarbe mit weißer Schrift */
.chip--salbei:has(input:checked) { color: #FFFFFF; background: var(--salbei-deep); }
.chip--butter:has(input:checked) { color: #FFFFFF; background: var(--butter-deep); }
.chip--mandarine:has(input:checked) { color: #FFFFFF; background: var(--mandarine-deep); }
.chip--koralle:has(input:checked) { color: #FFFFFF; background: var(--koralle-deep); }
.chip--rose:has(input:checked) { color: #FFFFFF; background: var(--rose-deep); }

.chip:has(input:focus-visible) {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* Onboarding: ohne Profil keine Tab-Bar und kein Einstellungs-Icon */
.shell--onboarding .tabbar,
.shell--onboarding .app-header .icon-button {
  display: none;
}

.shell--onboarding .view {
  padding-bottom: calc(var(--safe-bottom) + var(--space-4));
}

a.button {
  text-decoration: none;
}

/* Training */
.day-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

/* Monat neben der Tageszahl, auf einer Grundlinie */
.month {
  font-size: var(--font-size-month);
  font-weight: var(--font-weight-month);
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.card-number {
  font-size: var(--font-size-card-number);
  font-weight: var(--font-weight-card-number);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.button--large {
  min-height: 56px;
  font-size: 16px;
}

.button--small {
  gap: 6px;
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  font-size: 14px;
  text-decoration: none;
}

.button--small svg,
.set-check svg,
.stepper-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phase-card,
.active-card,
.next-card {
  display: grid;
  gap: var(--space-1);
}

.next-card .button,
.active-card .button {
  margin-top: var(--space-1);
}

.plan-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: plan;
}

.plan-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px 0;
  border-bottom: var(--line-width) solid var(--color-line);
  counter-increment: plan;
}

.plan-list li:last-child {
  border-bottom: 0;
}

.plan-list li span:first-child::before {
  content: counter(plan) "  ";
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.plan-list .secondary {
  flex: none;
  font-size: 13px;
}

/* Wochenziel als Ring */
.week {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}

.week > .label {
  justify-self: start;
}

.week .week-bar {
  width: 100%;
  margin-bottom: var(--space-1);
}

.ring {
  position: relative;
  width: 200px;
  height: 200px;
}

.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring circle {
  fill: none;
  stroke-width: 12;
}

.ring-track {
  stroke: var(--color-line);
}

.ring-value {
  stroke: url(#ring-mandarine);
  stroke-linecap: round;
  transition: stroke-dashoffset 600ms var(--easing);
}

.ring-stop-from { stop-color: var(--mandarine); }
.ring-stop-to { stop-color: var(--mandarine-deep); }

.ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
}

.last-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
}

.last-feel {
  display: grid;
  justify-items: end;
  gap: 4px;
}

/* Laufende Einheit */
.session-head {
  display: grid;
  gap: 4px;
  padding-top: var(--space-2);
}

.check-text {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Dauer wie "75 s" nie umbrechen */
.check-text .secondary {
  flex-shrink: 0;
  white-space: nowrap;
}

.exercise-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
}

.exercise-image {
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 135;
  object-fit: cover;
  object-position: 50% 69%;
  border-radius: 16px;
  background: var(--color-bg);
}

.exercise-head {
  display: grid;
  gap: 4px;
}

.progression {
  display: flex;
  gap: var(--space-1);
  align-items: baseline;
}

.progression::before {
  content: "";
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--mandarine-deep);
  transform: translateY(-1px);
}

.exercise-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.cue-list,
.hint-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
}

.details {
  border-top: var(--line-width) solid var(--color-line);
}

.details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-min);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.details summary::-webkit-details-marker {
  display: none;
}

.details summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text-secondary);
}

.details[open] summary::after {
  content: "−";
}

.details .hint-list {
  padding-bottom: var(--space-2);
}

/* Sätze */
.set-list {
  display: grid;
  gap: var(--space-1);
}

.set-row {
  display: grid;
  gap: var(--space-1);
  padding: 12px var(--space-2);
  background: var(--color-fill);
  box-shadow: inset 0 0 0 var(--line-width) var(--color-outline);
  border-radius: 20px;
  transition: background-color var(--duration) var(--easing);
}

.set-row--done {
  background: color-mix(in srgb, var(--mandarine) 30%, var(--color-bg));
  box-shadow: none;
}

.set-top {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.set-top .label {
  flex: 1;
}

.rpe {
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-fill);
  border: var(--line-width) solid var(--color-outline);
  border-radius: var(--radius-pill);
  -webkit-appearance: none;
  appearance: none;
}

.set-check {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--color-text);
  border-radius: 50%;
  transition: background-color var(--duration) var(--easing), transform var(--duration) var(--easing);
}

.set-check svg {
  width: 26px;
  height: 26px;
  stroke-width: 2;
  opacity: 0.35;
}

.set-check:active {
  transform: scale(0.94);
}

.set-row--done .set-check {
  background: var(--mandarine-deep);
  border-color: var(--mandarine-deep);
  color: #FFFFFF;
}

.set-row--done .set-check svg {
  opacity: 1;
}

.set-steppers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-1);
}

/* Stepper: Pille mit zwei runden Knöpfen */
.stepper {
  display: grid;
  grid-template-columns: var(--tap-min) 1fr var(--tap-min);
  align-items: center;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-fill);
  box-shadow: inset 0 0 0 var(--line-width) var(--color-outline);
}

.stepper-button {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  background: transparent;
  color: var(--tone-deep);
  box-shadow: inset 0 0 0 var(--line-width) var(--color-outline);
}

.stepper-button:active {
  background: var(--color-line);
}

.stepper-value {
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.add-set {
  justify-self: start;
}

/* Pausentimer */
.rest-timer {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--tabbar-height) + var(--safe-bottom) + var(--space-1));
  z-index: 30;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2) var(--space-2);
  overflow: hidden;
  isolation: isolate;
  /* Liegt über dem Inhalt, deshalb deckend in Creme mit Kontur */
  background: var(--color-bg);
  border: var(--line-width) solid var(--color-outline);
  border-radius: var(--radius-card);
  animation: view-in var(--duration) var(--easing);
}

.rest-timer .blob {
  top: 50%;
  left: 50%;
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  z-index: -1;
}

.rest-timer .button-row {
  width: 100%;
}

/* Solange der Timer steht, lässt sich der Inhalt bis über ihn scrollen */
body:has(.rest-timer) .view {
  padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 240px);
}

/* Dialoge im Training */
.sheet {
  display: grid;
  gap: var(--space-2);
}

.sheet[open] {
  display: grid;
}

.alt-row {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-1) 0 var(--space-2);
  border-bottom: var(--line-width) solid var(--color-line);
}

.alt-name {
  font-weight: 600;
}

.feel-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1);
}

/* Gesamtgefühl: fünf Kreise */
.feel-option {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: var(--tap-circle);
  height: var(--tap-circle);
  font-size: 20px;
  font-weight: 800;
  background: var(--color-fill);
  box-shadow: inset 0 0 0 var(--line-width) var(--color-outline);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--duration) var(--easing);
}

.feel-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feel-option:has(input:checked) {
  background: var(--mandarine);
  box-shadow: none;
}

.feel-scale {
  display: flex;
  justify-content: space-between;
}

/* Mehrzeilig geht nicht als Pille, daher Kartenradius */
.textarea {
  min-height: 96px;
  padding: 14px var(--space-3);
  border-radius: var(--radius-card);
  resize: vertical;
}

/* Fortschritt */
/* Umschalter: Pille aus Sand, aktives Segment Ink */
.segmented {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  background: transparent;
  box-shadow: inset 0 0 0 var(--line-width) var(--color-outline);
  border-radius: var(--radius-pill);
}

.segment {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--tap-min);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segment:has(input:checked) {
  color: var(--tone-on);
  background: var(--tone-fill);
}

.chart-card {
  display: grid;
  gap: var(--space-1);
}

.chart {
  width: 100%;
  height: auto;
  margin-top: var(--space-1);
  overflow: visible;
}

.chart-line {
  fill: none;
  stroke: var(--mandarine-deep);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Punkte und Markierungen in Koralle deep */
.chart-dot {
  fill: var(--koralle-deep);
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* Unternavigation als Links */
.segmented--links .segment {
  color: var(--color-text);
  text-decoration: none;
}

.segmented--links .segment[aria-current="page"] {
  color: var(--tone-on);
  background: var(--tone-fill);
}

/* Medis */
.meds-head,
.home-intro {
  position: relative;
  display: grid;
  gap: 4px;
  padding-top: var(--space-2);
}

.slot {
  display: grid;
  gap: var(--space-1);
}

.slot-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.slot-title .secondary {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

.med-list {
  display: grid;
  padding: 4px var(--space-2);
}

.med-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 72px;
  padding: 12px 0;
}

.med-row + .med-row {
  border-top: var(--line-width) solid var(--color-line);
}

.med-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.med-name {
  font-weight: 700;
}

/* Tag als Pille */
.med-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  vertical-align: 1px;
  border-radius: var(--radius-pill);
  background: var(--butter);
}

.med-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--color-text);
  border-radius: 50%;
  transition: background-color var(--duration) var(--easing), transform var(--duration) var(--easing);
}

.med-check svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.3;
}

.med-check:active {
  transform: scale(0.94);
}

.med-row--done .med-check {
  color: #FFFFFF;
  background: var(--butter-deep);
  border-color: var(--butter-deep);
}

.med-row--done .med-check svg {
  opacity: 1;
}

.med-check--disabled {
  border-style: dashed;
  border-color: var(--color-line);
}

.med-row--later {
  color: var(--color-text-secondary);
}

.med-row--later .med-name {
  font-weight: 500;
}

.med-row--measure {
  align-items: stretch;
}

.measure-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.measure-form .button {
  grid-column: 1 / -1;
}

.measure-field {
  display: grid;
  gap: 4px;
}

.measure-field .input {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.streak-card {
  display: grid;
  gap: 4px;
}

.streak-card .blob {
  --size: calc(160px + 160px * var(--intensity));
  top: -70px;
  right: -60px;
}

.adherence-list {
  display: grid;
  padding: 4px var(--space-2);
}

.adherence-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 64px;
}

.adherence-row + .adherence-row {
  border-top: var(--line-width) solid var(--color-line);
}

/* Messwerte: zwei Himmel-Töne */
.chart-line--sys {
  stroke: var(--periwinkle-deep);
  stroke-width: 1.5;
}

.chart-line--dia {
  stroke: color-mix(in srgb, var(--periwinkle-deep) 55%, var(--periwinkle));
  stroke-width: 1.5;
}

.chart-legend {
  display: flex;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.legend::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  margin-right: 6px;
  vertical-align: middle;
}

.legend--sys::before { background: var(--periwinkle-deep); }
.legend--dia::before { background: color-mix(in srgb, var(--periwinkle-deep) 55%, var(--periwinkle)); }

.manage-card {
  display: grid;
  gap: 4px;
}

.manage-card .button-row {
  margin-top: var(--space-1);
}

.manage-card--paused h2 {
  color: var(--color-text-secondary);
}

.date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}

.date-row .input {
  min-width: 0;
}



/* Badge am Tab */
.tab {
  position: relative;
}

.tab-badge {
  position: absolute;
  top: calc(50% - 22px);
  left: calc(50% + 6px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
  color: #FFFFFF;
  background: var(--butter-deep);
  border-radius: var(--radius-pill);
  z-index: 2;
}

/* Erinnerungen */
.time-list {
  display: grid;
  gap: var(--space-1);
}

.time-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1);
}

.code {
  margin: 0 0 var(--space-1);
  padding: 12px;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  background: var(--color-bg);
  border-radius: 16px;
}



/* Kopfbereich im Aura-Bereich: Begrüßung, Tageszahl, Werte */
.hero {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-2);
}

.hero .button {
  justify-self: start;
  margin-top: var(--space-1);
}

/* Check-in */
.date-nav {
  display: grid;
  grid-template-columns: var(--tap-min) 1fr var(--tap-min);
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

.date-step {
  margin: 0;
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
}

.date-nav-text {
  display: grid;
  gap: 2px;
}

.slider-card {
  display: grid;
  gap: var(--space-2);
}

.slider-card--mandarine { --tone: var(--mandarine); }
.slider-card--salbei { --tone: var(--salbei); }
.slider-card--koralle { --tone: var(--koralle); }
.slider-card--periwinkle { --tone: var(--periwinkle); }
.slider-card--rose { --tone: var(--rose); }

.slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

/* Fünf Kreise, gewählte Stufen im base-Ton, satter mit höherem Wert. Zahl bleibt Ink. */
.tap-scale {
  display: grid;
  grid-template-columns: repeat(5, var(--tap-circle));
  justify-content: space-between;
}

.tap {
  display: grid;
  place-items: center;
  width: var(--tap-circle);
  height: var(--tap-circle);
  font-size: 18px;
  font-weight: 800;
  background: var(--color-fill);
  box-shadow: inset 0 0 0 var(--line-width) var(--color-outline);
  border-radius: 50%;
  transition: background-color var(--duration) var(--easing), transform var(--duration) var(--easing);
}

.tap:active {
  transform: scale(0.95);
}

.tap--on {
  background: color-mix(in srgb, var(--tone) calc(30% + var(--level) * 70%), var(--color-bg));
  box-shadow: none;
}

.tap-ends {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--space-1) * -1);
}

.cycle-card {
  display: grid;
  gap: var(--space-1);
}

.save-status {
  text-align: center;
}

/* Auswertung */
.trend-line {
  stroke-width: 1.5;
}

.line--mandarine { stroke: var(--mandarine-deep); }
.line--periwinkle { stroke: var(--periwinkle-deep); }
.line--salbei { stroke: var(--salbei-deep); }
.line--koralle { stroke: var(--koralle-deep); }
.line--rose { stroke: var(--rose-deep); }

/* Markierungen in Koralle deep: Training als Strich, Periode als Punkt */
.marker--training {
  stroke: var(--koralle-deep);
  stroke-width: 2;
  stroke-linecap: round;
}

.marker--period {
  fill: var(--koralle-deep);
}

.chart-legend--wrap {
  flex-wrap: wrap;
  gap: 6px var(--space-2);
}

.legend--mandarine::before { background: var(--mandarine-deep); }
.legend--periwinkle::before { background: var(--periwinkle-deep); }
.legend--salbei::before { background: var(--salbei-deep); }
.legend--koralle::before { background: var(--koralle-deep); }
.legend--rose::before { background: var(--rose-deep); }

.legend--training::before {
  width: 2px;
  height: 10px;
  background: var(--koralle-deep);
}

.legend--period::before {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--koralle-deep);
}

/* Kalenderpunkte in Auswertungen: 12 px, eine Zeile pro Woche */
.dot-calendar {
  display: grid;
  grid-template-columns: repeat(7, var(--dot));
  justify-content: space-between;
  row-gap: 14px;
  margin-top: var(--space-1);
}

.dot-calendar-head {
  display: grid;
  grid-template-columns: repeat(7, var(--dot));
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-align: center;
}

.cal-dot {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--color-line);
}

.cal-dot--training { background: var(--mandarine-deep); }
.cal-dot--period { background: var(--koralle-deep); }
.cal-dot--empty { background: transparent; }

.legend--cal-training::before,
.legend--cal-period::before,
.legend--cal-none::before {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
}

.legend--cal-training::before { background: var(--mandarine-deep); }
.legend--cal-period::before { background: var(--koralle-deep); }
.legend--cal-none::before { background: var(--color-line); }

.stat-card {
  display: grid;
  gap: var(--space-2);
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.stat-cell {
  display: grid;
  gap: 4px;
}

.stat-list {
  display: grid;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 60px;
}

.stat-row + .stat-row {
  border-top: var(--line-width) solid var(--color-line);
}



/* Essen */
.food-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/*
  Wochentags-Leiste (Training, Medis, Essen): Kreise 40 px,
  aktiver Tag in deep der Modulfarbe mit weißer Zahl, markierte Tage mit Punkt darunter.
*/
.week-bar {
  --week-tone: var(--color-text);
  display: grid;
  grid-template-columns: repeat(7, var(--day-circle));
  justify-content: space-between;
}

.week-bar--mandarine { --week-tone: var(--mandarine-deep); }
.week-bar--butter { --week-tone: var(--butter-deep); }
.week-bar--salbei { --week-tone: var(--salbei-deep); }

.week-day {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-bottom: 12px;
  color: var(--color-text);
  text-decoration: none;
}

/* Tap-Fläche seitlich auf 44 px erweitern, die Kreise bleiben bündig am Seitenrand */
a.week-day::before {
  content: "";
  position: absolute;
  inset: 0 calc((var(--day-circle) - var(--tap-min)) / 2);
}

.week-day .label {
  font-size: 11px;
}

.week-circle {
  display: grid;
  place-items: center;
  width: var(--day-circle);
  height: var(--day-circle);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--color-fill);
  box-shadow: inset 0 0 0 var(--line-width) var(--color-outline);
  border-radius: 50%;
  transition: background-color var(--duration) var(--easing);
}

.week-day--today .week-circle {
  box-shadow: inset 0 0 0 1.5px var(--color-text);
}

.week-day--active .week-circle {
  color: #FFFFFF;
  background: var(--week-tone);
  box-shadow: none;
}

.week-day--marked::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--week-tone);
}

.meal-card {
  display: grid;
  gap: var(--space-1);
}

.meal-head {
  display: grid;
  gap: 2px;
}

.meal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.rating-dot {
  flex: none;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-line);
}

.rating-dot--gruen { background: var(--salbei-deep); }
.rating-dot--gelb { background: var(--butter-deep); }
.rating-dot--rot { background: var(--koralle-deep); }

.test-tag {
  display: inline-flex;
  align-items: center;
  height: var(--chip-height);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--rose);
}

.ingredient-list {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.ingredient-list li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.recipe-text {
  display: grid;
  gap: var(--space-1);
}

.recipe-text ol,
.recipe-text ul {
  margin: 0;
  padding-left: 20px;
}

.swap-list {
  display: grid;
  gap: 4px;
  margin: var(--space-2) 0;
}

.alt-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: 8px 0;
  text-align: left;
  border-bottom: var(--line-width) solid var(--color-line);
}

.thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}

.thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--button-height);
  font-weight: 700;
  background: var(--color-fill);
  box-shadow: inset 0 0 0 var(--line-width) var(--color-outline);
  border-radius: var(--radius-pill);
  transition: background-color var(--duration) var(--easing);
}

.thumb svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thumb-down {
  transform: rotate(180deg);
}

.thumb[aria-pressed="true"] {
  color: #FFFFFF;
  background: var(--salbei-deep);
  box-shadow: none;
}

.food-list {
  display: grid;
  padding: 4px var(--space-2);
}

.food-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 60px;
  padding: 8px 0;
}

.food-row + .food-row {
  border-top: var(--line-width) solid var(--color-line);
}

.rating-text {
  flex: none;
  max-width: 88px;
  text-align: right;
}




.report-preview {
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
}


/* In Karten kleinere Verläufe, sie zeigen dort nur einen Wert */
.card .blob {
  --size: calc(140px + 140px * var(--intensity));
}

/* Datum beim Blättern: Titelgröße, damit es auf eine Zeile passt */
.date-nav h2 {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-title);
  letter-spacing: -0.02em;
}

/* Trainingsanpassung: Regionen, Bewegungen, Aufbauen */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.until-list {
  display: grid;
  gap: var(--space-1);
}

.until-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 180px);
  align-items: center;
  gap: var(--space-2);
}

.input--date {
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
}

.check-label {
  display: grid;
  gap: 2px;
}

.check-label .secondary {
  font-size: 14px;
}

/* Was sich geändert hat */
.changes-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.change {
  display: grid;
  gap: 2px;
  padding-left: var(--space-2);
  border-left: 2px solid var(--mandarine-deep);
}

.change--removed {
  border-left-color: var(--color-text-secondary);
}

.change-name {
  font-weight: 700;
}

/* Vorgaben als Freitext, Zeilenumbrüche bleiben */
.guidance-text {
  white-space: pre-line;
}

/* Startseite: Uhrzeit rechts auf der Grundlinie von Tageszahl und Monat */
.clock {
  margin-left: auto;
  font-size: var(--font-size-month);
  font-weight: var(--font-weight-month);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* Leere Abschnitte der Startseite nehmen keinen Abstand ein */
.home > div:empty {
  display: none;
}

/*
  Modul-Ton: body[data-tone] setzt ihn je Ansicht (auch für Dialoge und Pausentimer),
  .tone-<farbe> an einzelnen Elementen, z. B. für Buttons in ein anderes Modul.
  Primärbutton: Füllung tone-fill, Schrift tone-on. Butter trägt Ink-Schrift.
*/
[data-tone="butter"], .tone-butter { --tone: var(--butter); --tone-deep: var(--butter-deep); --tone-fill: var(--butter-strong); --tone-on: var(--ink); }
[data-tone="mandarine"], .tone-mandarine { --tone: var(--mandarine); --tone-deep: var(--mandarine-deep); --tone-fill: var(--mandarine-deep); --tone-on: var(--creme); }
[data-tone="koralle"], .tone-koralle { --tone: var(--koralle); --tone-deep: var(--koralle-deep); --tone-fill: var(--koralle-deep); --tone-on: var(--creme); }
[data-tone="rose"], .tone-rose { --tone: var(--rose); --tone-deep: var(--rose-deep); --tone-fill: var(--rose-deep); --tone-on: var(--creme); }
[data-tone="periwinkle"], .tone-periwinkle { --tone: var(--periwinkle); --tone-deep: var(--periwinkle-deep); --tone-fill: var(--periwinkle-deep); --tone-on: var(--creme); }
[data-tone="salbei"], .tone-salbei { --tone: var(--salbei); --tone-deep: var(--salbei-deep); --tone-fill: var(--salbei-deep); --tone-on: var(--creme); }

/* Große Zahlen in der deep-Farbe ihres Moduls, die Tageszahl der Startseite bleibt Ink */
.number,
.card-number {
  color: var(--tone-deep);
}

.number--ink {
  color: var(--color-text);
}

/* Fortschrittsring in Mandarine deep */
.ring-stop-from,
.ring-stop-to {
  stop-color: var(--mandarine-deep);
}

/*
  Startseite als Dashboard: Kopf, dann Abschnitte als Kontur-Karten mit 12 px Abstand.
*/
.home {
  gap: var(--card-gap);
}

.home > .hero {
  padding-bottom: var(--space-2);
}

.dash-card {
  display: grid;
  gap: var(--space-2);
}

/* Karte als Link: öffnet den Bereich, ohne Unterstreichung */
.dash-link {
  color: inherit;
  text-decoration: none;
}

.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-head svg,
.dash-row svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--color-text-secondary);
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Kompakte Zeilen: Haken 44 px, Tap-Ziel bleibt erfüllt */
.dash-card .med-row {
  min-height: 52px;
  padding: 4px 0;
}

.dash-card .med-row + .med-row {
  padding-top: var(--space-1);
}

.dash-card .med-check {
  width: var(--tap-min);
  height: var(--tap-min);
}

.dash-card .med-check svg {
  width: 22px;
  height: 22px;
}

.dash-done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Check-in-Werte als kleine Kreise im base-Ton ihres Sliders */
.value-circles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  row-gap: var(--space-2);
}

.value-item {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.value-circle {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: var(--tone);
  border-radius: 50%;
}

.value-label {
  /* Normale Schreibweise statt Versalien, damit vier Werte in eine Reihe passen */
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text-secondary);
}

.dash-training {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.mini-ring {
  width: 56px;
  height: 56px;
  flex: none;
  transform: rotate(-90deg);
}

.mini-ring circle {
  fill: none;
  stroke-width: 5;
}

.mini-ring-track {
  stroke: var(--color-line);
}

.mini-ring-value {
  stroke: var(--mandarine-deep);
  stroke-linecap: round;
}

.mini-ring text {
  font-size: 14px;
  font-weight: 800;
  fill: var(--color-text);
  transform: rotate(90deg);
  transform-origin: 28px 28px;
}

.dash-protection {
  padding-top: var(--space-2);
  border-top: var(--line-width) solid var(--color-line);
}

/* Zeile als Link, z. B. ein Gericht, das die Rezeptkarte öffnet */
.dash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap-min);
  color: inherit;
  text-decoration: none;
}

.dash-row + .dash-row {
  padding-top: var(--space-1);
  border-top: var(--line-width) solid var(--color-line);
}

/* Zyklus: Kalenderstreifen, je Tag ein Kreis, Blutung als Füllung in Rosé, Symptome als Punkt */
.cycle-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 4px;
}

.strip-day {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--tap-min);
  padding-bottom: 8px;
  color: var(--color-text);
  text-decoration: none;
}

/* Tap-Fläche seitlich auf 44 px erweitern, die Spalten sind auf 375 px nur gut 41 px breit */
a.strip-day::before {
  content: "";
  position: absolute;
  inset: 0 -2px;
}

.strip-circle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--line-width) var(--color-outline);
}

.strip-circle--1 { background: color-mix(in srgb, var(--rose) 45%, var(--color-bg)); box-shadow: none; }
.strip-circle--2 { background: var(--rose); box-shadow: none; }
.strip-circle--3 { background: color-mix(in srgb, var(--rose-deep) 55%, var(--rose)); box-shadow: none; }
.strip-circle--4 { color: #FFFFFF; background: var(--rose-deep); box-shadow: none; }

.strip-day--today .strip-circle {
  box-shadow: inset 0 0 0 1.5px var(--color-text);
}

.strip-day--selected .strip-circle {
  outline: 2px solid var(--rose-deep);
  outline-offset: 2px;
}

.strip-day--symptoms::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose-deep);
}

.strip-day--future {
  opacity: 0.45;
}

.cycle-day-line {
  margin-top: calc(var(--space-2) * -1);
}

/* Symptome: Zeile mit drei Kreisen für Stärke 1 bis 3 (leer, base, deep) */
.symptom-list,
.symptom-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.symptom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  min-height: 52px;
}

.symptom-row + .symptom-row {
  border-top: var(--line-width) solid var(--color-line);
}

.symptom-label {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  /* Lange Wörter wie Stimmungsschwankungen dürfen trennen */
  hyphens: auto;
  overflow-wrap: anywhere;
}

.intensity {
  display: flex;
  flex: none;
  /* Die Tap-Fläche des letzten Kreises darf ins Kartenpolster ragen, der Kreis bleibt bündig */
  margin-right: -9px;
}

.intensity-dot {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
}

.intensity-dot::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--rose-deep);
  transition: background-color var(--duration) var(--easing);
}

.intensity-dot--1.intensity-dot--on::before { background: var(--rose); }
.intensity-dot--2.intensity-dot--on::before { background: color-mix(in srgb, var(--rose-deep) 55%, var(--rose)); }
.intensity-dot--3.intensity-dot--on::before { background: var(--rose-deep); }

/* Muster: Punktreihe je Symptom über die Zyklustage, Beschriftung darüber */
.pattern-row {
  display: grid;
  gap: 4px;
  padding: var(--space-1) 0;
}

.pattern-row + .pattern-row {
  border-top: var(--line-width) solid var(--color-line);
}

.pattern-row .symptom-label {
  font-size: 14px;
}

.pattern-dots {
  display: grid;
  grid-template-columns: repeat(var(--days), minmax(0, 1fr));
  align-items: center;
  height: 12px;
  background: linear-gradient(var(--color-line), var(--color-line)) center / 100% 1px no-repeat;
}

.pattern-dot {
  justify-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rose-deep) calc(var(--share) * 100%), transparent);
}

.pattern-axis {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Symptome des Tages als ruhige Tags auf der Startseite */
.symptom-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.symptom-tag {
  display: inline-flex;
  align-items: center;
  height: var(--chip-height);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rose-deep);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 var(--line-width) var(--rose-deep);
}

/* Nachhaken: ab 22 Uhr Medikamente mit Koralle-Markierung, solange etwas offen ist */
.dash-card--nudge {
  border-color: var(--koralle-deep);
}

.nudge-text {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-weight: 700;
  color: var(--koralle-deep);
}

.nudge-text::before {
  content: "";
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--koralle-deep);
  transform: translateY(1px);
}

/* Status der Mitteilungen: Punkt in der passenden Farbe, Text bleibt Ink */
.push-status {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.push-status::before {
  content: "";
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--color-line);
  transform: translateY(1px);
}

.push-status--active::before { background: var(--salbei-deep); }
.push-status--denied::before,
.push-status--unsupported::before { background: var(--koralle-deep); }