/* ─────────────────────────────────────────────────────────────────────────
   biodanza-cockpit — css/modules.css

   Geschichtserzaehlung: Die Stile der einzelnen Screens. Mehrere Bau-Pakete
   arbeiten parallel an der App — damit sie sich nicht gegenseitig
   ueberschreiben, hat jedes Modul hier genau EINEN markierten Abschnitt
   (Vertrag Abschnitt 7):

       / * ── modul: <name> ── * /   …   / * ── ende: <name> ── * /

   Jedes Paket schreibt NUR zwischen seine beiden Marken. Regeln fuer alle:
     - Farben nur als var(--color-...) (sonst bleibt der Screen im Dunkel-
       und Ruhig-Modus hell), Abstaende als var(--space-...)
     - Klassen mit Modul-Praefix (.music-..., .session-...), damit nichts
       in fremde Screens hineinwirkt
     - Ruhiger Modus: :root[data-quiet="true"] .mein-element { ... }
     - Session-Schrift: var(--font-size-session-title/-body/-timer)
     - Druck-Regeln eigener Exporte: @media print { #print-root ... }

   ── DECISION — eine Datei mit Abschnitten vs. eine CSS-Datei je Modul ──
     Grund (Vertrag): eine Datei = ein Request, keine Precache-Pflege je
     Modul; die Marken machen Zustaendigkeit greppbar
     (grep -n "── modul:" app/css/modules.css).

   ── DECISION (2026-10-08, Modul-Bau) — Fach-Pakete in eigene css/mod-*.css ──
     vs. weiter Abschnitte in dieser Datei. Grund: Beim Modul-Bau schreiben
     SIEBEN Agents gleichzeitig; ein einziges Komplett-Neuschreiben dieser
     Datei wuerde fremde Abschnitte loeschen. Eigene Dateien machen das
     unmoeglich (7 kleine Requests mehr, alle im Precache). Start und
     Einstellungen (Kern) bleiben hier.
   ───────────────────────────────────────────────────────────────────────── */


/* ── modul: start ── */
/* Startscreen (S1-S4): Hinweis auf laufende Session, sechs grosse Kacheln
   (2 Spalten Handy, 3 Tablet), zwei Link-Zeilen, Schnellzugriff unten. */
.start {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.start-resume {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-m);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.start-resume__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.start-resume__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.start-resume__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.start-resume__title {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
}

.start-resume__name {
  font-weight: var(--font-weight-semibold);
}

.start-resume__detail {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

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

.start-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 136px;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-l);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  overflow-wrap: normal;
  hyphens: auto;
  touch-action: manipulation;
  transition: transform var(--duration-fast) var(--ease-out), filter var(--duration-fast);
}

.start-tile__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.start-tile__icon .icon {
  width: 32px;
  height: 32px;
}

/* "Session starten" ist DIE Workshop-Aktion: als einzige Kachel gefuellt */
.start-tile--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.start-tile--primary .start-tile__icon {
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
}

.start-tile:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}

.start-links,
.start-hints {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.start-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.start-quick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-align: left;
  text-decoration: none;
  overflow-wrap: normal;
  touch-action: manipulation;
}

.start-quick .icon {
  color: var(--color-primary-text);
}

.start-quick__label {
  flex: 1 1 auto;
  min-width: 0;
}

/* Schalter fuer Dunkel-/Ruhig-Modus (role="switch"): an = Petrol + Haken */
.start-quick__check {
  display: none;
  flex: none;
}

.start-quick--switch[aria-checked="true"] {
  border-color: transparent;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.start-quick--switch[aria-checked="true"] .icon {
  color: inherit;
}

.start-quick--switch[aria-checked="true"] .start-quick__check {
  display: inline-grid;
}

@media (min-width: 600px) {
  .start-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .start-tile {
    min-height: 160px;
    font-size: 18px;
  }

  .start-footer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Sicherung faellig (Vertrag 10.2): Warn-Icon in der Link-Zeile */
.start-backup .link-row__icon {
  color: var(--color-danger-text);
}

/* Ruhiger Modus: Hinweise stehen unten (start.js placeHints) und sind
   gedaempft — Erinnerung, kein Alarm im abgedunkelten Raum. */
:root[data-quiet="true"] .start-backup .link-row__icon {
  color: var(--color-text-secondary);
}

/* Ruhiger Modus: noch groessere Kacheln, Schnellzugriff wie Buttons */
:root[data-quiet="true"] .start-tile {
  min-height: 152px;
}

:root[data-quiet="true"] .start-quick {
  font-size: var(--font-size-body);
}
/* ── ende: start ── */


/* ── modul: settings ── */
/* Einstellungen (ST1): Abschnitte auf Flaechen, Zeilen durch Linien getrennt. */
.settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.settings .section + .section {
  margin-top: 0;
}

.settings .section--card .section__content > .field {
  padding: var(--space-3) 0;
}

.settings-storage {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.settings-storage__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.settings-storage__head .icon {
  color: var(--color-primary-text);
}

.settings-storage__title {
  flex: 1 1 auto;
  font-weight: var(--font-weight-medium);
}

.settings-storage__usage {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.settings-storage__status {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.settings-storage__status.is-safe {
  color: var(--color-success-text);
}

.settings-install {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.settings-install__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: 1.4em;
  list-style: decimal;
}

.settings-install__step::marker {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-text);
}

/* Wichtigster Satz der Anleitung (getrennte Speicher Tab/App) — abgesetzt */
.settings-install__afterwards {
  padding: var(--space-3);
  border-radius: var(--radius-m);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.settings-install__key {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-inline: 2px;
  border-radius: var(--radius-s);
  background: var(--color-surface-muted);
  color: var(--color-primary-text);
  vertical-align: middle;
}

.settings-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
}

.settings-info dt {
  color: var(--color-text-secondary);
}

.settings-info dd {
  font-weight: var(--font-weight-medium);
}

/* Sicherung faellig (14+ Tage, Vertrag 10.2): Icon und Erklaerung in Warnfarbe */
.settings .link-row.is-due .link-row__icon,
.settings .link-row.is-due .link-row__description {
  color: var(--color-danger-text);
}

/* Offline "bereit ✓" in Erfolgsfarbe (Text-Variante: 4.6:1 auf Weiss/Sand) */
.settings-info dd.is-safe {
  color: var(--color-success-text);
}

.settings-info__privacy {
  padding: var(--space-3) 0;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.settings-info__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

/* Antworten auf bewusste Tipps (Update suchen, Installieren, Aufraeumen):
   inline statt Toast — auch im Ruhigen Modus sichtbar (Vertrag 9.4 Falle 18) */
.settings-info__update-status,
.settings-install__status,
.diagnose__status {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

/* Geraete-Diagnose (/einstellungen/diagnose): Werkzeuge oben, darunter
   Abschnitte mit Begriff/Wert-Zeilen; "gut" (offline bereit, dauerhaft)
   in Erfolgsfarbe. Am Tablet zwei Knopf-Spalten. */
.diagnose__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

@media (min-width: 600px) {
  .diagnose__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* "Neu messen" (ghost) ueber die ganze Breite statt allein links */
  .diagnose__actions .btn--ghost {
    grid-column: 1 / -1;
  }
}

.diagnose__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.diagnose__body .section + .section {
  margin-top: 0;
}

.diagnose__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
}

.diagnose__facts dt {
  color: var(--color-text-secondary);
}

.diagnose__facts dd {
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.diagnose__facts dd.is-good {
  color: var(--color-success-text);
}

/* Tablet: Begriffe in fester Spalte, Werte direkt daneben (steht NACH der
   Grundregel — gleiche Spezifitaet, spaeter gewinnt; gesehen 1024 px). */
@media (min-width: 600px) {
  .diagnose__facts {
    grid-template-columns: minmax(0, 16em) minmax(0, 1fr);
  }
}

.diagnose__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-size: var(--font-size-small);
}

.diagnose__error-time {
  display: block;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.diagnose__error-text {
  overflow-wrap: anywhere;
}
/* ── ende: settings ── */


/* Fach-Pakete (session, vivencia+library, music, notes+reflection,
   blocks+participants, finance+calendar+ausschreibung, backup) schreiben
   ihre Stile seit dem Modul-Bau in css/mod-<paket>.css — siehe DECISION oben. */