/* Muve · shared site styles — base, backdrop, nav, footer, buttons, glass, document pages. */
@font-face {
  font-family: "Muve";
  src: url("/fonts/Muve.ttf") format("truetype");
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-style: normal; margin: 0; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
main { flex: 1; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }

.skip {
  position: absolute; left: var(--space-md); top: -3rem; z-index: 50;
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  background: var(--color-cta); color: var(--color-cta-text); font-weight: 800; text-decoration: none;
}
.skip:focus-visible { top: var(--space-md); }

/* Backdrop — the app's blurred bokeh photo under an espresso scrim. Fixed so glass always has something to frost. */
.backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--color-ember), transparent 60%),
    linear-gradient(to bottom, oklch(20.4% 0.008 50 / 0.25), oklch(20.4% 0.008 50 / 0.55) 55%, var(--color-page) 100%),
    url("/img/bokeh.jpg") center / cover no-repeat,
    var(--color-page);
}
.backdrop--dim {
  background:
    linear-gradient(to bottom, oklch(20.4% 0.008 50 / 0.6), var(--color-page-deep) 70%),
    url("/img/bokeh.jpg") center top / cover no-repeat,
    var(--color-page);
}

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }

/* Glass — the app's primary dark-mode surface */
.glass {
  background: var(--color-glass);
  border: var(--rule);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--color-glass-strong); }
}

/* Nav — floating glass pill, same material as the app's tab bar */
.nav {
  position: sticky; top: var(--space-sm); z-index: 20;
  margin: var(--space-sm) auto 0;
  width: min(100% - 2 * var(--gutter), var(--page-max));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg);
  border-radius: var(--radius-pill);
}
.nav__home { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav__home img { height: 1.375rem; width: auto; }
.nav__links { display: flex; align-items: center; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0; }
.nav__links a:not(.btn) {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill);
  color: var(--color-text-2); font-weight: 700; font-size: var(--text-sm); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav__links a:not(.btn):hover { color: var(--color-text); background: var(--color-fill-soft); }
.nav__links a[aria-current="page"] { color: var(--color-text); }
@media (max-width: 40rem) {
  .nav__links .nav__secondary { display: none; }
}

/* Buttons — white pill CTA (ctaPrimary), quiet glass pill (ctaSecondary) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 2.75rem; padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-pill);
  font: 800 var(--text-sm) / 1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn svg { width: 1.15em; height: 1.15em; fill: currentColor; flex-shrink: 0; }
.btn--primary { background: var(--color-cta); color: var(--color-cta-text); }
.btn--primary:hover { background: var(--color-cta-hover); transform: translateY(-1px); }
.btn--quiet { background: var(--color-fill); color: var(--color-text); }
.btn--quiet:hover { background: var(--color-glass-edge-strong); }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 3.5rem; padding: 0 var(--space-xl); font-size: var(--text-md); }

/* Footer */
.footer { padding-block: var(--space-2xl) var(--space-xl); }
.footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding-top: var(--space-xl); border-top: var(--rule);
}
.footer__mark img { height: 1.25rem; width: auto; opacity: 0.85; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); list-style: none; margin: 0; padding: 0; }
.footer__links a {
  color: var(--color-text-3); font-weight: 700; font-size: var(--text-sm); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--color-text); }
.footer__legal { width: 100%; color: var(--color-text-3); font-size: var(--text-xs); }

/* Document pages — privacy, terms, safety, support, delete account */
.doc { padding-block: var(--space-2xl) var(--space-3xl); }
.doc__panel { max-width: 46rem; margin-inline: auto; padding: clamp(var(--space-lg), 4vw, var(--space-2xl)); }
.doc__panel > * + * { margin-top: var(--space-md); }
.doc h1 { font-family: var(--font-body); font-weight: 900; font-size: var(--text-2xl); letter-spacing: -0.01em; }
.doc .doc__meta { color: var(--color-text-3); font-size: var(--text-sm); font-weight: 700; margin-top: var(--space-xs); }
.doc h2 { font-weight: 800; font-size: var(--text-lg); margin-top: var(--space-2xl); }
.doc h3 { font-weight: 800; font-size: var(--text-md); margin-top: var(--space-lg); }
.doc p, .doc li { color: var(--color-text-2); max-width: 65ch; }
.doc ul, .doc ol { padding-left: 1.25rem; }
.doc li + li { margin-top: var(--space-2xs); }
.doc strong { color: var(--color-text); font-weight: 800; }
.doc a { color: var(--color-accent); text-underline-offset: 3px; }
.doc a:hover { text-decoration-thickness: 2px; }
.doc .callout {
  padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md);
  background: var(--color-accent-soft); border: 1px solid var(--color-accent-soft); color: var(--color-text);
}
.doc .callout p { color: var(--color-text); }

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