/* Shared theme + scene layer for the static pages (download / roadmap / faq / privacy / terms).
   Loaded AFTER each page's inline <style> so its overrides win at equal specificity.
   Mirrors the homepage's light palette and theme-btn — the toggle itself is injected by
   /site-scene.js and both share the homepage's localStorage key (corvie-site-theme). */

[data-theme="light"] {
  color-scheme: light;
  --canvas: #f5f1f7;
  --panel: #e9dced;
  --plate: rgba(70, 35, 80, 0.05);
  --plate-strong: rgba(70, 35, 80, 0.09);
  --line: rgba(40, 20, 50, 0.13);
  --text: #26192e;
  --muted: #665d73;
  --lavender: #7a5f9e;
  --faint: #93889f;
  --hair: rgba(40, 20, 50, 0.09);
  --hair-2: rgba(40, 20, 50, 0.18);
}
/* overscroll strategy: Safari ignores overscroll-behavior on the page scroller and always
   paints the rubber band with the root background — and fixed underlays bounce WITH the page
   on iOS, so no layer can recolor the band. Instead the page's bottom edge FADES into this
   exact root color (the hills mask below), making whatever Safari reveals seamless. */
html { background: #12101a; }
html[data-theme="light"] { background: #f5f1f7; }
/* the scene layers live at z-index:-1 — they can only show through if the BODY paints no
   background of its own (html carries it; body's opaque canvas would cover negative-z children).
   body is the positioning root for the scene layers, and svh keeps iOS Safari's collapsing
   toolbar from opening a dead band past the page end. */
/* flex column so the footer can pin to the body's bottom on short pages (tall desktop windows
   left it floating mid-screen, detached from its striations) — see the footer rule */
body { background: transparent; position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
/* the page surface: painted by a pseudo-layer BELOW the scene (sky -2, hills -1) instead of by
   body's own background, because iOS uses body's background-color for the rubber-band region —
   body must stay transparent for the striation-toned overscroll to show */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--canvas);
  pointer-events: none;
}
/* no rubber-band past the page edges — overscroll exposed the bare canvas as a black band
   below the last striation on iOS */
html { overscroll-behavior-y: none; }

[data-theme="light"] .nav::after { background: rgba(245, 241, 247, 0.35); border-color: rgba(40, 20, 50, 0.14); }
[data-theme="light"] .nav a:not(.brand) { color: rgba(40, 25, 55, 0.62); }
[data-theme="light"] .nav a:not(.brand):hover { color: rgba(30, 18, 42, 0.95); background: rgba(40, 20, 50, 0.07); }
[data-theme="light"] .nav .account-link { color: rgba(40, 25, 55, 0.75); border-color: rgba(40, 20, 50, 0.16); }
[data-theme="light"] .nav::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(40, 20, 50, 0.05); }

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 2px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.theme-btn:hover { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.08); }
[data-theme="light"] .theme-btn { border-color: rgba(40, 20, 50, 0.16); color: rgba(40, 25, 55, 0.7); }
[data-theme="light"] .theme-btn:hover { color: rgba(30, 18, 42, 0.95); background: rgba(40, 20, 50, 0.07); }
/* the toggle icons are inline SVGs, not text glyphs — iOS renders ☾/☀ as emoji at emoji sizes,
   which made the two states render differently and shoved the Account button sideways */
.theme-btn { flex: 0 0 auto; }
.theme-btn svg { display: block; width: 16px; height: 16px; }
.theme-btn .tb-sun { display: none; }
[data-theme="light"] .theme-btn .tb-moon { display: none; }
[data-theme="light"] .theme-btn .tb-sun { display: block; }

/* the plum magpie mark drowns on paper — same lift the extension gives its brand mark */
[data-theme="light"] .brand img { filter: brightness(1.38) saturate(1.03); }

.nav .account-link { flex: 0 0 auto; white-space: nowrap; }

/* touch: no hover to lean on, so links carry a faint chip + stronger text at rest (they read as
   washed-out floating labels otherwise) and every tap gets a real pressed state — fill + a quick
   scale-down — so the bar feels reactive */
@media (hover: none) and (pointer: coarse) {
  /* no rest chip on the plain links (bubbles read ugly) — weight + contrast carry the substance.
     the PRESS is the satisfaction: press in fast (90ms) so a quick tap still reaches full depth,
     then spring back slowly (360ms overshoot) so the pop stays visible after the finger lifts;
     the deep scale gives real travel to see. */
  .nav a:not(.brand) {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
    transform: scale(1);
    -webkit-tap-highlight-color: transparent;
    transition: transform 360ms cubic-bezier(0.34, 1.7, 0.42, 1), background 300ms ease, color 260ms ease;
  }
  .nav a:not(.brand):active {
    color: #fff; background: rgba(255, 255, 255, 0.22); transform: scale(0.82);
    transition: transform 90ms ease-out, background 90ms ease-out, color 90ms ease-out;
  }
  .nav .account-link {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.06);
    transform: scale(1);
    -webkit-tap-highlight-color: transparent;
    transition: transform 360ms cubic-bezier(0.34, 1.7, 0.42, 1), background 300ms ease, border-color 300ms ease;
  }
  .nav .account-link:active {
    background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.36); transform: scale(0.9);
    transition: transform 90ms ease-out, background 90ms ease-out, border-color 90ms ease-out;
  }
  .theme-btn {
    transform: scale(1);
    -webkit-tap-highlight-color: transparent;
    transition: transform 360ms cubic-bezier(0.34, 1.7, 0.42, 1), background 300ms ease, border-color 300ms ease;
  }
  .theme-btn:active {
    background: rgba(255, 255, 255, 0.22); transform: scale(0.8);
    transition: transform 90ms ease-out, background 90ms ease-out;
  }
  [data-theme="light"] .nav a:not(.brand) { color: rgba(40, 25, 55, 0.82); }
  [data-theme="light"] .nav a:not(.brand):active { color: #1e122a; background: rgba(40, 20, 50, 0.18); }
  [data-theme="light"] .nav .account-link { color: rgba(40, 25, 55, 0.9); background: rgba(40, 20, 50, 0.05); }
  [data-theme="light"] .nav .account-link:active { background: rgba(40, 20, 50, 0.18); border-color: rgba(40, 20, 50, 0.32); }
  [data-theme="light"] .theme-btn:active { background: rgba(40, 20, 50, 0.16); }
}

/* phones: links huddle by the brand on the left, theme + Account anchor the right, and the
   slack lives between the two groups instead of between every button */
@media (max-width: 780px) {
  .nav { gap: 5px; padding: 0 9px; }
  .nav .brand { margin-right: 2px; }
  .nav a.hide-sm { font-size: 0.78rem; padding: 7px 6px; }
  .theme-btn { margin-left: auto; width: 33px; height: 33px; }
  .theme-btn svg { width: 15px; height: 15px; }
  .nav .account-link { font-size: 0.78rem; padding: 7px 13px; margin-left: 4px; }
}
/* iPhone-width: Features (a homepage anchor) steps out so the remaining links stay big */
@media (max-width: 560px) {
  .nav { gap: 1px; padding: 0 8px; }
  .nav a.hide-xs { display: none; }
  .nav a.hide-sm { font-size: 0.7rem; padding: 6px 4px; }
  .theme-btn { width: 31px; height: 31px; }
  .nav .account-link { font-size: 0.7rem; padding: 6px 10px; margin-left: 2px; }
}

/* ---- the sketch scene layers (striations + sky), injected by /site-scene.js ---- */
:root {
  --stria-far: #2b1a33;
  --stria-near: #432245;
}
[data-theme="light"] {
  --stria-far: #d3c2da;
  --stria-near: #c6afd0;
}
/* both layers scroll WITH the page — one background you move through, hills waiting at the
   bottom of the document. (fixed + negative z-index also rendered unreliably on iOS Safari.) */
.site-hills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(120px, 20vh, 210px);
  z-index: -1;
  pointer-events: none;
  /* the striations melt into the canvas at the page foot, so the document's bottom edge IS the
     root color and Safari's rubber band continues it seamlessly */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent);
}
.site-hills .far { fill: var(--stria-far); }
.site-hills .near { fill: var(--stria-near); opacity: 0.75; }
/* the sky spans the WHOLE document, one layer beneath the hills, above the canvas surface.
   svg is a replaced element: inset alone won't stretch it, the explicit sizes do */
.site-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.site-perch {
  position: absolute;
  width: 110px;
  height: 84px;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.rm { position: relative; }
.site-rail-bird {
  position: absolute;
  left: -38px;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

/* the footer sits ON the striation band: margin-top auto pins it to the body's bottom when the
   content is shorter than the window (body is a flex column), collapsing to zero on long pages;
   the 48px gap moves to padding so it survives either way. no divider line, matching the
   homepage. safe-area padding keeps it clear of the iPhone home indicator. */
footer { margin-top: auto; padding-top: 48px; position: relative; z-index: 1; border-top: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }