/* ─────────────────────────────────────────────────────────────────────────
   biodanza-cockpit — css/mod-session.css

   Geschichtserzaehlung: Stile des Bau-Pakets "session+audio" — Session starten (Soundcheck), Session-Flow (grosse Schrift, Musikbereich, Ausklang-Animation, Schnellzugriffs-Leiste). Praefix .session-.
   Gehoert NUR diesem Paket (Parallel-Bau-Schutz, DECISION in modules.css).

   Regeln fuer alle Modul-Stile:
     - Farben nur als var(--color-...), Abstaende als var(--space-...) —
       sonst bleibt der Screen im Dunkel- und Ruhig-Modus hell
     - Klassen mit Modul-Praefix, damit nichts in fremde Screens wirkt
     - Ruhiger Modus: :root[data-quiet="true"] .mein-element { ... }
     - Touch-Ziele mindestens 44 px; 360 px Breite ohne horizontales Scrollen
   ───────────────────────────────────────────────────────────────────────── */

/* ── Session starten ── */
.session-soundcheck {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-l);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.session-soundcheck__status { margin: 0; font-weight: var(--font-weight-semibold); }
.session-soundcheck__status:empty { display: none; }
.session-hint { margin: 0; font-size: var(--font-size-small); }

.session-choice__message {
  margin: 0;
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-body);
}

/* ── Session-Flow ── */
.session-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Fuellt die Hoehe, damit die Schnellzugriffs-Leiste auch bei kurzem Inhalt unten steht */
  min-height: calc(100dvh - var(--topbar-h) - var(--screen-pad) * 2);
}


.session-progress { display: flex; flex-direction: column; gap: var(--space-1); }

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

.session-progress__text {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.session-flow__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.session-exercise { display: flex; flex-direction: column; gap: var(--space-2); }

.session-title {
  margin: 0;
  font-size: var(--font-size-session-title);
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.session-title-es {
  margin: 0;
  font-size: var(--font-size-subtitle);
  font-style: italic;
  color: var(--color-text-secondary);
}

.session-description {
  margin: 0;
  font-size: var(--font-size-session-body);
  line-height: var(--line-height-body);
}

.session-planning summary {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  list-style: none;
}

/* display:flex nimmt dem <summary> den Standard-Pfeil — eigener Pfeil, dreht beim Oeffnen */
.session-planning summary::-webkit-details-marker { display: none; }

.session-planning summary::before {
  content: "";
  border-block: 6px solid transparent;
  border-inline-start: 8px solid currentColor;
  transition: transform var(--duration-fast) var(--ease-out);
}

.session-planning[open] summary::before { transform: rotate(90deg); }

.session-planning__body {
  white-space: pre-wrap;
  font-size: var(--font-size-session-body);
  padding: var(--space-2) 0;
}

/* Musikbereich */
.session-music {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-l);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.session-song { margin: 0; font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.session-status { margin: 0; color: var(--color-text-secondary); }
.session-planned { margin: 0; font-size: var(--font-size-small); }

.session-timer {
  margin: 0;
  font-size: var(--font-size-session-timer);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.session-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

/* Der grosse Play/Pause-Knopf — mit dem Daumen blind treffbar */
.session-play.icon-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
}

.session-resume { max-width: 420px; }
.session-resume[hidden] { display: none; }

/* Ausklang: Balken schrumpft mit dem Countdown, Bereich pulsiert sanft */
.session-fadebar {
  width: 100%;
  max-width: 420px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-progress-track);
  overflow: hidden;
  visibility: hidden;
}

.session-fadebar__fill {
  width: 100%;
  height: 100%;
  background: var(--color-progress-fill);
  transform-origin: left center;
  transition: transform var(--duration-base) linear;
}

.session-music.is-fading .session-fadebar { visibility: visible; }

.session-music.is-fading {
  animation: session-breathe 2.4s ease-in-out infinite;
}

@keyframes session-breathe {
  0%, 100% { box-shadow: var(--shadow-card); }
  50% { box-shadow: 0 0 0 4px var(--color-primary-soft); }
}

.session-timeup { align-self: center; }
.session-timeup[hidden] { display: none; }

.session-wake-hint {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-m);
  background: var(--color-warning-soft);
  font-size: var(--font-size-small);
}

.session-wake-hint[hidden] { display: none; }

.session-note { display: flex; flex-direction: column; gap: var(--space-1); }

/* Schnellzugriffs-Leiste (F5): klebt unten, Tab-Leiste ist im Flow aus */
.session-quickbar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-bars);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  /* oben auto: steht bei kurzem Inhalt am unteren Rand; seitlich bis an den Bildschirmrand */
  margin: auto calc(var(--screen-pad) * -1) 0;
  padding: var(--space-2) var(--screen-pad) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--color-nav-bg);
  box-shadow: var(--shadow-raised);
}

.session-quickbar .btn { flex: 1; min-width: 0; }

/* Datei-Overlay: gross, scrollbar, Text gut lesbar */
.session-file-sheet { max-height: 92dvh; }

.session-note-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--font-size-session-body);
  line-height: var(--line-height-body);
}

/* Ergebnis */
.session-summary { align-items: stretch; text-align: center; }
.session-summary__icon { margin: var(--space-4) 0 0; color: var(--color-success-text); }
.session-summary__text { margin: 0; font-size: var(--font-size-subtitle); }

/* Tablet quer: Uebung links, Musik + Notiz rechts (D7) */
@media (min-width: 900px) {
  .session-flow__body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }

  .session-flow__side { display: flex; flex-direction: column; gap: var(--space-4); }
}

@media (max-width: 899px) {
  .session-flow__side { display: flex; flex-direction: column; gap: var(--space-4); }
}

:root[data-quiet="true"] .session-music,
:root[data-quiet="true"] .session-soundcheck {
  box-shadow: none;
  border: 1px solid var(--color-divider);
}

:root[data-quiet="true"] .session-music.is-fading { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .session-music.is-fading { animation: none; }
}