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

   Geschichtserzaehlung: Das Fundament unter allen Screens. Erst ein knapper
   Reset (gleiche Ausgangslage in Chrome, Safari, Firefox), dann Typografie
   nach D7, dann das Geruest der App-Shell aus index.html:

       #topbar        klebt oben (Titel, Zurueck, Aktionen)
       #screen        der Inhalt — hier scrollt die Seite
       .app-bottom    klebt unten: Update-Hinweis, "Laeuft gerade", Tabs

   und zuletzt kleine Hilfsklassen, die jedes Modul benutzen darf
   (.stack, .row, .muted ...), damit nicht jedes Modul eigene Abstaende
   erfindet.

   ── DECISION — Dokument scrollt vs. #screen als eigener Scroll-Container ──
     Gewaehlt: die Seite (window) scrollt, TopBar und Unterleiste sind
     position: sticky. vs. fixe Hoehe + overflow:auto auf #screen.
     Grund: Nur der Dokument-Scroll bekommt auf iOS das "Statusleiste
     antippen = nach oben" und die native Schwung-Physik; Router und Module
     koennen einfach window.scrollTo() benutzen. Sticky statt fixed spart
     jede Hoehen-Rechnung fuer padding-bottom — die Unterleiste nimmt ihren
     Platz im Fluss ein, egal ob "Laeuft gerade" sichtbar ist oder nicht.

   ── DECISION — overscroll-behavior: none auf html ──
     vs. Browser-Standard (Pull-to-Refresh in Chrome Android, Gummiband iOS).
     Grund: Ein versehentliches Herunterziehen mitten in der Session laedt
     sonst die Seite neu und unterbricht die Musik.
   ───────────────────────────────────────────────────────────────────────── */


/* ── Reset ──
      Box-Modell vereinheitlichen, Standard-Raender weg, Formular-Elemente
      erben die Schrift (sonst 13 px System-Schrift in Buttons). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
  background: var(--color-bg);
  /* Fokus und scrollIntoView landen nie unter den klebenden Leisten
     (WCAG 2.4.11). Gesehen: Klick-Ziel unter der TopBar verdeckt. Unten
     Platz fuer Tab-Leiste + evtl. "Laeuft gerade" (64 px). */
  scroll-padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + var(--space-2));
  scroll-padding-bottom: calc(var(--bottomnav-h) + 64px + env(safe-area-inset-bottom, 0px));
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure, blockquote, fieldset {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

fieldset {
  padding: 0;
  border: 0;
}

img, video, canvas {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

/* iOS zoomt in Eingabefelder unter 16 px hinein — nie kleiner werden lassen */
input, select, textarea {
  font-size: max(16px, 1em);
}

[hidden] {
  display: none !important;
}


/* ── Typografie (D7) ──
      Titel 28/700, Untertitel 20/600, Fliesstext 16/400, Hilfstext 14. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-tap-highlight-color: transparent;
  /* Lange Woerter (URLs, Mailadressen) brechen nur, wenn sie allein nicht
     in die Zeile passen. 'anywhere' liess enge Flex-Zeilen mitten im Wort
     umbrechen ("Almacenamie|nto", gesehen im Screenshot 360 px). */
  overflow-wrap: break-word;
}

h1, .title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

h2, .subtitle {
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

h3 {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

small, .text-small {
  font-size: var(--font-size-small);
}

.muted, .text-secondary {
  color: var(--color-text-secondary);
}

a {
  color: var(--color-primary-text);
  text-underline-offset: 2px;
}

strong, b {
  font-weight: var(--font-weight-semibold);
}

/* Technische Werte (Pfade, Fehlertexte, Diagnose): Systemschrift mit fester
   Breite, leicht kleiner, damit sie im Fliesstext nicht hervorsticht. */
code, pre, kbd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  font-size: 0.92em;
}


/* ── Fokus ──
      Sichtbarer Ring nur bei Tastatur-Navigation (:focus-visible), damit
      Finger-Tipps keinen Rahmen hinterlassen. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* ── App-Shell-Geruest ──
      Reihenfolge im <body>: #topbar, #screen, .app-bottom, dann die
      Overlay-Wurzeln (#modal-root, #toast-root) und #print-root. */
#topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-bars);
}

#screen {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding:
    var(--screen-pad)
    calc(var(--screen-pad) + env(safe-area-inset-right, 0px))
    calc(var(--screen-pad) + var(--space-2))
    calc(var(--screen-pad) + env(safe-area-inset-left, 0px));
}

#screen:focus {
  outline: none;
}

/* Ohne Tab-Leiste (Session-Flow) traegt der Inhalt selbst den unteren
   Sicherheitsabstand (Home-Indikator auf iPhones). */
body[data-nav="hidden"] #screen {
  padding-bottom: calc(var(--screen-pad) + env(safe-area-inset-bottom, 0px));
}

.app-bottom {
  position: sticky;
  bottom: 0;
  z-index: var(--z-bars);
}

/* Hinweis ohne JavaScript (index.html <noscript>) */
.noscript {
  margin: var(--space-5) var(--screen-pad);
  font-weight: var(--font-weight-semibold);
}

/* Druck-Wurzel ist am Bildschirm nie sichtbar (print.css zeigt sie) */
#print-root {
  display: none;
}

/* Scroll-Sperre, solange ein Modal offen ist (ui/modal.js) */
html.is-scroll-locked,
html.is-scroll-locked body {
  overflow: hidden;
}


/* ── Hilfsklassen fuer Module ──
      Bewusst wenige: Stapel, Reihe, Umbruch-Reihe, randlos, nur-Screenreader. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

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

.row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.spacer {
  flex: 1 1 auto;
}

.truncate {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Element darf bis an den Bildschirmrand reichen (hebt --screen-pad auf) */
.bleed {
  margin-inline: calc(-1 * var(--screen-pad));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Inline-SVG aus ui/icons.js: folgt der Textfarbe, schrumpft nie */
.icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  overflow: visible;
}