/* ==========================================================================
   canopy. — Base Styles
   ========================================================================== */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow-x: hidden; /* Generalabsicherung gegen seitliches Scrollen/Wischen
    -- einzelne Ursachen (z.B. zu kleine Eingabefeld-Schrift) wurden zwar
    behoben, aber auf dem echten Gerät trat horizontales Scrollen an
    mehreren Stellen weiter auf. Statt jede einzelne Ursache einzeln zu
    jagen: hier hart blockieren, das eine bewusst horizontal scrollbare
    Element (.vpd-table-scroll) hat sein eigenes overflow-x:auto und bleibt
    davon unberührt. */
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  /* Verhindert Safari-Bounce/Pull-to-refresh, wichtig für App-Feeling */
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

/* Zahlen/Messwerte IMMER Monospace — zieht sich durch die ganze App */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* App-Shell: volle Höhe, Content scrollt, Tab-Bar bleibt fix */
#app {
  position: relative;
  min-height: 100dvh;
  padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom));
}

.view {
  display: none;
  padding: var(--space-4);
  /* KEIN zusätzliches --safe-top hier: .topbar (davor im Fluss) rechnet die
     Notch-Aussparung schon in ihr eigenes padding-top ein und hat damit den
     Freiraum bereits "verbraucht" -- ein zweites Mal addiert erzeugt eine
     riesige, unnötige Lücke zwischen Kopfzeile und Inhalt (nur auf echten
     Geräten mit Notch sichtbar, nie im Desktop-Testbrowser, s. Absprache). */
  max-width: 560px;
  margin: 0 auto;
}

.view.active {
  display: block;
}

.empty-state {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.empty-state strong {
  display: block;
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: var(--space-1);
}

/* Zugänglichkeit: sichtbarer Fokus-Ring statt Browser-Default zu entfernen */
:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}