*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-display);
  min-height: 100%;
}

body {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

h1, h2, h3, p { margin: 0 0 var(--space-3) 0; }

h1, h2, h3 { font-family: var(--font-heading); }

button, input, select { font-family: inherit; }

a { color: var(--color-accent); }

/* .lang-word is defined in modes.css (loaded after this file and after
   components.css) so it reliably wins the cascade over .btn/.flashcard-lemma,
   which also set font-family and have equal selector specificity. */

/* Kirilir/Janzet are both decorative and don't reliably cover every digit
   glyph (Kirilir has no "8" at all) - anything that can contain numerals
   (streak counts, due counters, level badges) stays in Space Mono via this. */
.font-fallback-numerals { font-family: var(--font-numerals); }

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

.skeleton {
  background: linear-gradient(90deg, var(--color-paper-dim) 25%, #e5e5da 37%, var(--color-paper-dim) 63%);
  background-size: 400% 100%;
  animation: skeleton-shine 1.4s ease infinite;
  border-radius: var(--radius);
}

@keyframes skeleton-shine {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.view {
  animation: view-fade-in var(--transition-medium);
}

@keyframes view-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--color-ink);
  color: var(--color-paper);
  text-align: center;
  padding: var(--space-1) var(--space-2);
  font-size: 0.85rem;
  transform: translateY(-100%);
  transition: transform var(--transition-medium);
}

.offline-banner.is-visible { transform: translateY(0); }