/* Shared chrome for every page — header, language menu, toast, base resets and
   font tokens that were previously copy-pasted into every page's own inline
   <style>. Plain CSS (no @apply/theme()), safe to link normally. */

/* Anti-flash guard — secondary copy. The guard script each multilingual page
   keeps right after <meta charset> hides the page itself, by writing
   `visibility: hidden` straight onto <html>'s inline style attribute the
   instant a language mismatch is detected — before this file, or any other
   external resource, has necessarily even started loading, let alone
   finished. That inline write is what actually blocks the flash; nothing on
   this page depends on this stylesheet in particular being fresh, so a stale
   cached copy of it (a CDN or proxy holding an old version, browser HTTP
   cache, anything) cannot bring the flash back. This rule just mirrors that
   same effect via the class the guard also sets, for anyone reading computed
   styles or grepping CSS rather than the inline attribute. See index.html
   (or any other page with the guard) for the full explanation. */
html.i18n-pending body { visibility: hidden; }

:root {
  color-scheme: light;
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { overflow-y: scroll; scrollbar-gutter: stable; scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; }
.brand-logo { display: block; }
h1 { font-family: var(--font-serif); }

.language-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 140ms ease, visibility 140ms ease, transform 140ms ease;
}

.language-menu-button[aria-expanded="true"] + .language-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-option[aria-checked="true"]::after {
  content: "✓";
  font-size: 0.75rem;
}

.mobile-nav-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 140ms ease, visibility 140ms ease, transform 140ms ease;
}

.mobile-nav-button[aria-expanded="true"] + .mobile-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav-item[aria-current="page"] {
  color: var(--color-base-content);
  background: var(--color-base-200);
}

.app-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  max-width: calc(100% - 48px);
  padding: 13px 18px;
  color: var(--color-neutral-content);
  background: var(--color-neutral);
  border-radius: var(--radius-box);
  box-shadow: 0 12px 40px color-mix(in oklab, var(--color-neutral) 18%, transparent);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.app-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 680px) {
  .app-toast {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}