/* ============================================================
   Riffshed doc pages (privacy, support) — v2 liquid glass.
   Shares the palette + glass tokens from tokens.css; light only,
   to match the landing.
   ============================================================ */
html { color-scheme: light only; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  position: relative; min-height: 100vh;
}
::selection { background: var(--accent); color: var(--accent-ink-on); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Aurora backdrop — same warm blobs as the landing. */
body::before {
  content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 30% at 16% 12%, var(--aurora-1), transparent 70%),
    radial-gradient(30% 26% at 88% 20%, var(--aurora-3), transparent 72%),
    radial-gradient(42% 38% at 72% 90%, var(--aurora-2), transparent 72%);
  filter: saturate(112%);
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: doc-aurora 42s var(--ease-standard) infinite alternate; }
}
@keyframes doc-aurora {
  from { transform: translate3d(-1.4%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(2%, 1.6%, 0) scale(1.07); }
}

/* Sticky glass nav. */
.doc-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  backdrop-filter: blur(28px) saturate(165%);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: 0 1px 0 var(--glass-hi) inset;
}
.doc-nav-inner {
  max-width: 720px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.wordmark {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 24px; letter-spacing: -0.02em; color: var(--ink); line-height: 1;
  text-decoration: none;
}
.wordmark .dot { color: var(--accent); }

.lang-toggle {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--glass-edge); border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.lang-toggle button {
  appearance: none; border: 0; background: transparent;
  padding: 7px 14px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}
.lang-toggle button[data-active="true"] { background: var(--ink); color: var(--bg-raised); }

/* Content on a frosted sheet. */
.page { max-width: 720px; margin: 0 auto; padding: 40px 24px 96px; }
.sheet {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-2xl);
  box-shadow: var(--glass-shadow), 0 1px 0 var(--glass-hi) inset;
  padding: clamp(28px, 5vw, 56px);
}

.meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
h1 {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(40px, 7vw, 56px); letter-spacing: -0.02em; line-height: 1.04;
  margin: 14px 0 8px; color: var(--ink);
}
h1 .dot { color: var(--accent); }
h2 {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 24px; letter-spacing: -0.01em; margin: 36px 0 10px; color: var(--ink);
}
p { color: var(--ink-2); margin: 0 0 14px; }
ul { color: var(--ink-2); padding-left: 20px; margin: 0 0 14px; }
li { margin: 6px 0; }
a { color: var(--accent); text-underline-offset: 3px; }
strong { color: var(--ink); }
code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px;
}

/* Support email highlight. */
.email-card {
  margin: 24px 0 8px; padding: 24px 26px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-edge); border-radius: var(--radius-xl);
  box-shadow: 0 1px 0 var(--glass-hi) inset;
}
.email-card .label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.email-card a {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(22px, 4vw, 28px); letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; word-break: break-all;
}
.email-card a:hover { color: var(--accent); }

.back {
  display: inline-block; margin-top: 28px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-2); text-decoration: none;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--glass-edge); background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: transform var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.back:hover { transform: translateY(-1px); color: var(--ink); }

section[hidden] { display: none; }

/* Opaque fallback where backdrop-filter is unsupported. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .doc-nav { background: var(--bg-overlay); }
  .sheet, .email-card, .lang-toggle, .back { background: var(--bg-raised); }
  body::before { opacity: 0.6; }
}