/* Carabulario — Layout-Grundgerüst
   Schritt 2: responsiver App-Rahmen + Bottom Sheet mit drei Inhaltszuständen
   Wiederverwendet in Schritt 3
   Voraussetzung: carabulario-tokens.css
*/

* {
  box-sizing: border-box;
}

html {
  min-block-size: 100%;
  background: var(--color-background);
}

body {
  min-block-size: 100%;
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

button {
  font: inherit;
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: calc(var(--base-unit) / 2) solid var(--color-primary);
  outline-offset: var(--space-1);
}

.sr-only {
  position: absolute;
  inline-size: var(--space-1);
  block-size: var(--space-1);
  padding: 0;
  margin: calc(var(--space-1) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ein responsiver, zentrierter App-Rahmen für alle Zielgeräte. */
.app-shell {
  inline-size: var(--sheet-max-width);
  min-block-size: 100dvh;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--color-background);
}

/* Grid- und Flex-Kinder dürfen auf sehr schmalen Viewports schrumpfen. */
.app-header,
.app-main,
.app-toolbar,
.view-progress {
  min-inline-size: 0;
}

/* Fortschritt und Sprachumschaltung bleiben oben sichtbar. */
.app-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: grid;
  gap: var(--space-3);
  padding-block-start: max(var(--space-3), env(safe-area-inset-top));
  padding-block-end: var(--space-3);
  padding-inline: var(--page-padding-inline-fluid);
  background: var(--color-background);
}

.app-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.app-title-group {
  min-inline-size: 0;
}

.app-eyebrow,
.app-title {
  margin: 0;
}

.app-eyebrow {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.app-title {
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.language-switch {
  flex: 0 0 auto;
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
}

.language-switch__option {
  min-inline-size: var(--space-12);
  min-block-size: var(--space-12);
  padding-inline: var(--space-2);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}

.language-switch__option[data-language="de"][aria-pressed="true"] {
  background: var(--color-accent-de);
  color: var(--color-surface);
}

.language-switch__option[data-language="es"][aria-pressed="true"] {
  background: var(--color-accent-es);
  color: var(--color-text-primary);
}

.view-progress {
  block-size: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
}

.view-progress__value {
  inline-size: var(--progress, 0%);
  block-size: 100%;
  border-radius: inherit;
  background: var(--color-primary);
  transition: inline-size var(--motion-slow);
}

.app-main {
  min-block-size: 0;
  display: grid;
  padding-inline: var(--page-padding-inline-fluid);
  padding-block-end: calc(var(--space-16) + env(safe-area-inset-bottom));
}

.app-stage {
  min-block-size: 0;
  display: grid;
  place-items: center;
}

.stage-slot {
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-text-secondary);
  text-align: center;
}

/* Bottom Sheet: maximale Breite und Zentrierung folgen dem Token-System. */
.bottom-sheet {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  inline-size: var(--sheet-max-width);
  margin-inline: auto;
  pointer-events: none;
}

.bottom-sheet__surface {
  max-block-size: calc(100dvh - var(--space-4));
  overflow: hidden;
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sheet);
  pointer-events: auto;
}

.bottom-sheet[data-state="expanded"] .bottom-sheet__surface {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bottom-sheet__header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  padding-block-start: var(--space-2);
  background: var(--color-surface);
}

.bottom-sheet__handle {
  inline-size: 100%;
  min-block-size: var(--space-12);
  display: grid;
  place-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.bottom-sheet__grabber {
  inline-size: var(--space-8);
  block-size: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-text-secondary);
  opacity: 0.5;
}

.bottom-sheet__hint {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

/*
  Die Zustände sind inhaltlich definiert:
  - collapsed: nur Header/Griff
  - half: zusätzlich Vokabelkarte
  - expanded: zusätzlich Erweiterungsbereich

  0fr/1fr animiert den realen Inhalt. Es werden keine drei festen
  Sheet-Höhen erfunden.
*/
.bottom-sheet__region {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--motion-slow),
    opacity var(--motion-base),
    visibility var(--motion-slow);
}

.bottom-sheet__region-inner {
  min-block-size: 0;
  overflow: hidden;
}

.bottom-sheet[data-state="half"] .bottom-sheet__half,
.bottom-sheet[data-state="expanded"] .bottom-sheet__half,
.bottom-sheet[data-state="expanded"] .bottom-sheet__expanded {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}

.vocabulary-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--page-padding-inline-fluid) var(--space-6);
}

.vocabulary-card__language,
.vocabulary-card__term,
.vocabulary-card__translation {
  margin: 0;
}

.vocabulary-card__language {
  color: var(--color-accent-de);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.vocabulary-card__term {
  font-size: var(--text-vocabulary-fluid);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
}

.vocabulary-card__translation {
  color: var(--color-accent-es);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

.vocabulary-card__action {
  min-block-size: var(--space-12);
  padding-inline: var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-surface);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: opacity var(--motion-fast);
}

.vocabulary-card__action:hover {
  opacity: 0.9;
}

.sheet-details {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--page-padding-inline-fluid);
  padding-block-end: max(var(--space-6), env(safe-area-inset-bottom));
}

.sheet-details__item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
}

.sheet-details__label,
.sheet-details__placeholder {
  margin: 0;
}

.sheet-details__label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.sheet-details__placeholder {
  color: var(--color-text-primary);
  font-size: var(--text-base);
}

@media (prefers-reduced-motion: reduce) {
  .bottom-sheet__region {
    transition: opacity var(--motion-base);
  }
}