/* The app renders a 100vh frame; default body margin would make the window
   itself scrollable by the margin's worth. */
body {
  margin: 0;
}

@font-face {
  font-family: 'Obvia';
  src: url('/fonts/Obvia_Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Obvia';
  src: url('/fonts/Obvia_Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Obvia';
  src: url('/fonts/Obvia_Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Obvia';
  src: url('/fonts/Obvia_Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Obvia';
  src: url('/fonts/Obvia_Bold.otf') format('opentype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Obvia';
  src: url('/fonts/Obvia_Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Legal pages (/privacy, /terms) ─────────────────────────────────────
   Plain HTML, no Tamagui: they must render without JavaScript, print, and
   read in an in-app browser on a phone. Colors follow the brand ground
   (#050C14 dark) and the cyan secondary (#11D2DB) for links. */
/* The ground is the <main>, full-bleed and at least a full viewport tall —
   the readable column is .legal-inner inside it. Putting max-width on the
   element that also carries the background painted a 44rem stripe of dark
   down the middle of a white page. Scoped here rather than on <body> so the
   admin dashboard, which shares this stylesheet, is untouched. */
.legal {
  --legal-bg: #ffffff;
  --legal-text: #0f172a;
  --legal-muted: #64748b;
  --legal-rule: rgba(15, 23, 42, 0.12);
  --legal-link: #0a9ea6;
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: 'Obvia', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--legal-text);
  background: var(--legal-bg);
}
.legal-inner {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
}
@media (prefers-color-scheme: dark) {
  .legal {
    --legal-bg: #050c14;
    --legal-text: #e6edf3;
    --legal-muted: #8b98a5;
    --legal-rule: rgba(230, 237, 243, 0.14);
    --legal-link: #11d2db;
  }
}
.legal a {
  color: var(--legal-link);
  text-decoration: none;
}
.legal a:hover {
  text-decoration: underline;
}
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--legal-rule);
}
.legal-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.legal-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* Height-driven so the lockup's own 518x138 ratio sets the width. */
.legal-brand img {
  display: block;
  height: 2rem;
  width: auto;
}
.legal h1 {
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.legal-draft {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--legal-link);
  border-radius: 0.5rem;
  color: var(--legal-muted);
  font-size: 0.9375rem;
}
.legal-updated {
  color: var(--legal-muted);
  font-size: 0.9375rem;
  margin: 0 0 2rem;
}
.legal-intro {
  font-size: 1.125rem;
}
.legal h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2.25rem 0 0.75rem;
}
.legal p {
  margin: 0 0 1rem;
}
.legal ul {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}
.legal li {
  margin-bottom: 0.5rem;
}

/* ── BrandLoader ─────────────────────────────────────────────────────
   Shown while the admin waits on the session. Ground matches the app's
   dark splash so the hand-off into the dashboard doesn't flash white. */
.brand-loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #050c14;
}
.brand-loader img {
  width: 72px;
  height: 72px;
  animation: brand-loader-breathe 1.6s ease-in-out infinite;
}
@keyframes brand-loader-breathe {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.55;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-loader img {
    animation: none;
  }
}