* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---- theme ----
   Light or dark on <html data-theme>, set by a script in <head>: the
   system's choice unless picked under Me. Colours only ever come from these
   tokens; the map reads some of them too. */
:root {
  color-scheme: light;
  --bg: #f4f0e8;
  --panel: #fbf8f3;
  --raised: #ffffff;
  --sunken: #ebe5da;
  --border: #e0d9cc;
  --text: #26231f;
  --muted: #857d72;
  --accent: #2c8a5e;
  --accent-ink: #ffffff;
  --accent-dim: #2c8a5e1f;
  --ink: #26231f; /* primary buttons */
  --ink-text: #fbf8f3;
  --danger: #b5483a;
  --pin: #c0603f;
  --pin-ink: #ffffff;
  --map-bg: #e9e4dc;
  --country-lit: #2c8a5e;
  --country-line: #c9c0b2;
  --glass: #fbf8f3d9;
  --shadow: 0 10px 30px -12px rgba(60, 45, 25, 0.28), 0 2px 6px rgba(60, 45, 25, 0.08);
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --tabbar-h: calc(64px + env(safe-area-inset-bottom));
  --rail-w: 84px;
  --panel-w: 400px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171d27;
  --panel: #1d2531;
  --raised: #253041;
  --sunken: #131921;
  --border: #2e3a4c;
  --text: #e8edf4;
  --muted: #8fa0b5;
  --accent: #4ecb8d;
  --accent-ink: #10281c;
  --accent-dim: #4ecb8d26;
  --ink: #e8edf4;
  --ink-text: #171d27;
  --danger: #e06c75;
  --pin: #4ecb8d;
  --pin-ink: #10281c;
  --map-bg: #2c353c;
  --country-lit: #4ecb8d;
  --country-line: #3a4a60;
  --glass: #1d2531d9;
  --shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  /* biome-ignore lint/suspicious/noDuplicateProperties: 100vh stays for browsers without dvh */
  height: 100dvh;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  /* No sideways overscroll as back / forward in the browser. */
  overscroll-behavior-x: none;
}

.hidden {
  display: none !important;
}
a {
  color: var(--accent);
}
h1,
h2,
.card-title,
.serif {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.muted {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
.center {
  text-align: center;
}
.error {
  color: var(--danger);
  font-size: 0.85rem;
}
.form-msg {
  font-size: 0.85rem;
}
.form-msg.ok {
  color: var(--accent);
}
.form-msg.error {
  color: var(--danger);
}
.hint {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}
.hint a {
  color: var(--muted);
}
.auth-links {
  margin-top: 2px;
}

/* ---- motion ----
   Things that appear rise and fade in; screens slide. Everything is off for
   people who ask their system for less motion. */
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes sheet-in {
  from {
    transform: translateY(100%);
  }
}
@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  70% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
@keyframes ring {
  0%,
  100% {
    box-shadow:
      0 0 0 3px var(--panel),
      0 0 0 5px var(--pin);
  }
  50% {
    box-shadow:
      0 0 0 3px var(--panel),
      0 0 0 8px color-mix(in srgb, var(--pin) 35%, transparent);
  }
}
@keyframes wave {
  0%,
  60%,
  100% {
    transform: rotate(0);
  }
  10%,
  30% {
    transform: rotate(16deg);
  }
  20%,
  40% {
    transform: rotate(-8deg);
  }
}
@keyframes scan-line {
  0%,
  100% {
    top: 8%;
  }
  50% {
    top: 88%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}