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

   Geschichtserzaehlung: Stile des Bau-Pakets "music" — Musik-Liste mit Import (Fortschritt, Bericht), Musik-Detail. Praefix .music-.
   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
   ───────────────────────────────────────────────────────────────────────── */

.music-import { gap: var(--space-2); }

.music-hint,
.music-storage {
  margin: 0;
  font-size: var(--font-size-small);
}

/* Fortschritt waehrend des Imports */
.music-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.music-progress[hidden] { display: none; }

.music-progress__caption {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Bericht nach dem Import — bleibt stehen (auch im Ruhigen Modus sichtbar) */
.music-report {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-m);
  background: var(--color-surface);
}

.music-report[hidden] { display: none; }
.music-report p { margin: 0; overflow-wrap: anywhere; }

/* Hinweise "erst installieren" und "Datei fehlt" */
.music-blocked,
.music-missing {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--color-warning-soft);
  color: var(--color-text);
}

.music-blocked[hidden] { display: none; }
.music-blocked p,
.music-missing p { margin: 0; }
.music-blocked a { color: var(--color-primary-text); font-weight: var(--font-weight-semibold); }

/* Datei-Angaben im Detail */
.music-facts {
  display: grid;
  grid-template-columns: minmax(7em, auto) 1fr;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.music-facts dt { color: var(--color-text-secondary); }
.music-facts dd { margin: 0; overflow-wrap: anywhere; }

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