/* ==========================================================================
   views.css — Layout der drei Ansichten. Nutzt ausschließlich Tokens und
   ergänzt Komponenten, überschreibt sie aber nicht.
   ========================================================================== */

/* --- Check-in ("Was war heute gut?") ------------------------------------- */

.checkin-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.checkin__intro {
  min-width: 0;
}

.checkin__greeting {
  font-size: var(--fs-sm);
  color: var(--c-text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.checkin__question {
  font-size: var(--fs-2xl);
  margin-top: var(--sp-1);
}

.step-label {
  width: fit-content;
  margin-top: var(--sp-3);
  padding: 0.2rem var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--c-bg-sunk);
  color: var(--c-text-faint);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.checkin__hint {
  margin-top: var(--sp-2);
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

/* Der Speichern-Bereich klebt über der Navigation, damit er ohne Scrollen
   erreichbar bleibt. */
.checkin__save {
  position: sticky;
  bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  padding-top: var(--sp-2);
}

.checkin-action {
  padding: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  background: color-mix(in srgb, var(--c-surface) 94%, transparent);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
}

.checkin-action__hint {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--c-text-faint);
  font-size: var(--fs-xs);
  text-align: center;
}

.energy-card {
  padding: var(--sp-4);
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--touch-min);
  margin: calc(var(--sp-2) * -1) 0 var(--sp-1);
  padding: var(--sp-2) var(--sp-2);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.back-button__icon {
  width: 1.1rem;
  height: 1.1rem;
}

.energy-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-clay-soft);
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.energy-summary__icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--c-clay);
}

.method-panel {
  min-width: 0;
}

.method-panel__intro {
  margin-bottom: var(--sp-4);
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
}

.starter-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.starter {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text-soft);
  text-align: left;
  cursor: pointer;
}

.starter[aria-pressed="true"] {
  border-color: var(--c-sage);
  background: var(--c-sage-soft);
  color: var(--c-text);
}

.completion-field,
.own-sentence-field {
  margin-top: var(--sp-4);
}

.completion-field__label {
  color: var(--c-text);
}

/* Aufklappbares Freitextfeld — optional, nie Voraussetzung. */
.checkin__note[open] .checkin__note-summary {
  margin-bottom: var(--sp-3);
}

.checkin__note-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

/* Heute bereits gesammelte Lichter. */
.today__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.today__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
}

/* --- Verlauf -------------------------------------------------------------- */

.timeline__day + .timeline__day {
  margin-top: var(--sp-5);
}

.timeline__date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.entry {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.entry + .entry {
  margin-top: var(--sp-2);
}

.entry__energy {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-bg-sunk);
  font-size: var(--fs-lg);
  color: var(--c-clay);
}

.entry__energy-icon {
  width: 1.3rem;
  height: 1.3rem;
}

.entry__body {
  flex: 1;
  min-width: 0;
}

.entry__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.entry__line {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
}

/* Der Lichtpunkt vor jeder festgehaltenen Sache — das Signature-Motiv. */
.entry__dot {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.4rem;
  border-radius: var(--r-pill);
  background: var(--c-honey);
}

.entry__meta {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
}

/* Sammlung aller Lichter als ruhige Übersicht über dem Verlauf. */
.constellation {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-3);
}

.constellation__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-honey);
  opacity: 0.85;
}

/* --- Einstellungen -------------------------------------------------------- */

.settings__section + .settings__section {
  margin-top: var(--sp-4);
}

.settings__title,
.reminder__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.settings__title-icon,
.reminder__label-icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--c-clay);
  flex: none;
}

.reminder__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  align-items: end;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.reminder__time {
  grid-column: 2;
  grid-row: 1;
}

.reminder__actions,
.reminder__status {
  margin-top: var(--sp-3);
}

.reminder__status {
  color: var(--c-text-soft);
}

.reminder__privacy {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
}

.settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}

.settings__row + .settings__row {
  border-top: 1px solid var(--c-border);
}

.settings__chip-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.settings__chip-icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--c-text-faint);
}

.settings__add {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
}

.settings__add .field__input {
  flex: 1;
  min-width: 0;
  width: auto;
}

@media (max-width: 22rem) {
  .app__main {
    padding-inline: var(--sp-3);
  }

  .card {
    padding: var(--sp-3);
  }

  .energy__option {
    padding-inline: var(--sp-1);
  }

  .settings__add {
    flex-direction: column;
  }

  .reminder__field {
    grid-template-columns: 1fr;
  }

  .reminder__time {
    grid-column: 1;
    grid-row: auto;
  }
}

.settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.settings__actions .btn {
  flex: 1 1 8rem;
}