/* Carabulario — Screen 1: Lenkrad & Instrumente */

.screen-one {
  align-content: start;
  gap: var(--space-3);
  padding-block-start: var(--space-2);
}

.screen-one__instruction {
  inline-size: 100%;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
}

.dashboard-schematic {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 8 / 7;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.dashboard-schematic__art {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.dashboard-schematic__surface {
  fill: var(--color-primary-light);
}

.dashboard-schematic__line,
.dashboard-schematic__gauge,
.dashboard-schematic__wheel,
.dashboard-schematic__wheel-hub,
.dashboard-schematic__control,
.dashboard-schematic__module,
.dashboard-schematic__module-control,
.dashboard-schematic__console,
.dashboard-schematic__hazard,
.dashboard-schematic__symbol,
.dashboard-schematic__hazard-symbol,
.dashboard-schematic__tick {
  vector-effect: non-scaling-stroke;
  stroke: var(--color-text-secondary);
  stroke-width: calc(var(--base-unit) / 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-schematic__line,
.dashboard-schematic__gauge,
.dashboard-schematic__wheel,
.dashboard-schematic__control,
.dashboard-schematic__symbol,
.dashboard-schematic__hazard-symbol,
.dashboard-schematic__tick {
  fill: none;
}

.dashboard-schematic__line--strong,
.dashboard-schematic__wheel,
.dashboard-schematic__wheel-hub,
.dashboard-schematic__control {
  stroke: var(--color-text-primary);
}

.dashboard-schematic__line--muted {
  opacity: 0.5;
}

.dashboard-schematic__gauge,
.dashboard-schematic__module,
.dashboard-schematic__console {
  fill: var(--color-surface);
}

.dashboard-schematic__gauge--small {
  fill: var(--color-background);
}

.dashboard-schematic__wheel-hub,
.dashboard-schematic__module-control,
.dashboard-schematic__hazard {
  fill: var(--color-primary-light);
}

.dashboard-schematic__hazard-symbol {
  stroke: var(--color-error);
}

.dashboard-schematic__tick {
  stroke: var(--color-primary);
}

.bottom-sheet__handle:disabled {
  cursor: default;
  opacity: 1;
}

.vocabulary-card__heading-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
}

.vocabulary-card__heading {
  min-inline-size: 0;
}

.vocabulary-card__audio-placeholder {
  flex: 0 0 auto;
  inline-size: var(--space-12);
  block-size: var(--space-12);
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.vocabulary-card__audio-placeholder svg {
  inline-size: var(--space-6);
  block-size: var(--space-6);
  fill: none;
  stroke: currentColor;
  stroke-width: calc(var(--base-unit) / 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vocabulary-card__translation-group {
  display: grid;
  gap: var(--space-1);
}

.vocabulary-card__translation-language {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.bottom-sheet[data-primary-language="de"] .vocabulary-card__language,
.bottom-sheet[data-primary-language="de"] .sheet-details__item--primary .sheet-details__label,
.bottom-sheet[data-primary-language="es"] .vocabulary-card__translation-language,
.bottom-sheet[data-primary-language="es"] .sheet-details__item--secondary .sheet-details__label {
  color: var(--color-accent-de);
}

.bottom-sheet[data-primary-language="es"] .vocabulary-card__language,
.bottom-sheet[data-primary-language="es"] .sheet-details__item--primary .sheet-details__label,
.bottom-sheet[data-primary-language="de"] .vocabulary-card__translation-language,
.bottom-sheet[data-primary-language="de"] .sheet-details__item--secondary .sheet-details__label {
  color: var(--color-accent-es);
}

.vocabulary-card__action[data-state="learned"] {
  background: var(--color-success);
}

.vocabulary-card__action:disabled {
  cursor: default;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-schematic,
  .vocabulary-card__audio-placeholder {
    scroll-behavior: auto;
  }
}

/* Der vollständige View-Titel darf auf schmalen Geräten umbrechen. */
.app-title {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.bottom-sheet[data-primary-language="de"] .vocabulary-card__translation {
  color: var(--color-accent-es);
}

.bottom-sheet[data-primary-language="es"] .vocabulary-card__translation {
  color: var(--color-accent-de);
}