/* River — the shared styles: what every page has, the home page, Privacy and
   the Documentation alike. The tokens, the bar and its wordmark, the footer,
   the light page theme (body.page) and its prose, and the Get the Beta
   overlay. Each page adds its own on top: styles.css (the home page: the
   river, the iPad, the cards, the fader) and docs.css (the Documentation).

   Colours are the app's Midnight theme (Theme.midnight) on the home page,
   and the sections' inverted theme — Paper, warmed halfway to stone — on the
   pages of their own. */

:root {
  /* Theme.midnight */
  --midnight-ground: #161B26;     /* firstColor */
  --midnight-second: #5A6378;     /* secondColor */
  --midnight-fg: #E6ECF5;         /* foregroundColor */
  --midnight-highlight: #3FB8A6;  /* highlightedColor, meterColorA */
  --midnight-secondary: #B38BD9;  /* secondaryHighlightColor */
  --midnight-tertiary: #8C7BE0;   /* tertiaryHighlightColor */

  --river-ground: #000000;

  --fg: var(--midnight-fg);
  --fg-dim: #9AA3B6;              /* secondColor lifted for body text on black */
  --accent: var(--midnight-highlight);
  --accent-ink: #0B1E1B;
  --rule: rgba(230, 236, 245, 0.16);

  --bar-h: 60px;                  /* the pinned bar's height */

  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; }
body {
  background: var(--river-ground);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- the bar: pinned at the top ----------
   No ground of its own: the wordmark stands alone on the left, and the three
   links share a capsule on the right — the tabs' capsule, so the two read as
   one family. The strip between them isn't a control. */
.bar {
  position: sticky; top: 0; z-index: 30;
  height: var(--bar-h);
  display: flex; justify-content: space-between; align-items: center;
  padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  margin-left: 16px;
  transform: scale(var(--wordmark, 1)); transform-origin: 0 0;
  font-weight: 600; font-size: 19px; letter-spacing: 0.02em; text-decoration: none;
}
/* River at three times the bar's type. The whole wordmark — River and the
   byline with it — shrinks to 58% (about 33px) as the page scrolls and the
   byline fades (--wordmark, 1 → 0.58, from wordmark.js), from its top-left corner. A
   transform, so the bar's layout doesn't move under it. */
.wordmark .name {
  /* Rounded, to sit softly by the handwriting: Apple's own (SF Pro Rounded,
     as ui-rounded) where the system has it, Nunito everywhere else. */
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", var(--sans);
  font-weight: 500; letter-spacing: -0.012em;
  display: inline-block; font-size: 57px; line-height: 1;
}
.wordmark .by { font-weight: 600; font-size: 14px; color: var(--fg-dim); letter-spacing: 0; margin-right: 4px; }
.wordmark { color: #fff; }
/* The maker's name in its own hand, drawn inline as an SVG
   so its strokes can be thickened a touch:
   traced from a thin pen, at 30px they'd blend into the black and read grey.
   The stroke is in screen pixels (non-scaling): 1.4px, so 0.7px either side
   whatever size the drawing is, rather than growing with it. White, as River is. Nudged down so its writing line sits on the baseline. */
.wordmark .maker {
  display: inline-block; height: 90px; width: auto; aspect-ratio: 2213 / 614;
  color: #fff; overflow: visible;
  transform: translateY(27px);
}
/* "by Inquisitive Software" gives way as the page scrolls, leaving River:
   --byline runs 1 → 0 over the first stretch of scroll (wordmark.js). */
.wordmark .by, .wordmark .maker { opacity: var(--byline, 1); }
.bar-links {
  display: flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: rgba(22, 27, 38, 0.78); border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.7);
  font-size: 18px; font-weight: 600;
}
.bar-links a {
  text-decoration: none; color: var(--fg-dim); white-space: nowrap;
  padding: 7px 16px; border-radius: 999px;
  transition: color 0.2s, filter 0.2s;
}
.bar-links a:hover { color: var(--fg); }
/* The page you're on: a capsule of its own, but a faint one — a quiet "you
   are here", where Get the Beta is a solid "do this". The call to action
   closes the row, so the two don't sit side by side. */
.bar-links a[aria-current="page"]:not(.beta) { color: var(--fg); background: rgba(230, 236, 245, 0.14); }
/* Get the Beta, in Midnight's tertiary highlight, so the call to action
   stands apart from the teal of the current tab. */
.bar-links .beta { background: var(--midnight-tertiary); color: var(--midnight-ground); }
.bar-links .beta:hover { color: var(--midnight-ground); filter: brightness(1.08); }

@media (max-width: 760px) {
  .bar-links { font-size: 16px; }
  .bar-links a { padding: 5px 10px; }
  .wordmark { font-size: 17px; }
  .wordmark .name { font-size: 44px; }
  .wordmark .maker { height: 66px; transform: translateY(20px); }
}

/* Under ~800px the bar has room for River and the links, not the maker's
   name too. */
@media (max-width: 800px) {
  .wordmark .by, .wordmark .maker { display: none; }
}
.wordmark.byline-gone .by, .wordmark.byline-gone .maker { visibility: hidden; }

/* ---------- footer ---------- */
.foot {
  text-align: center; display: grid; gap: 16px; justify-items: center;
  padding: clamp(72px, 14vh, 140px) 16px max(40px, env(safe-area-inset-bottom));
}
.sub { margin: 0; max-width: 46ch; color: var(--fg-dim); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.5; text-wrap: balance; }
.cta {
  display: inline-block; text-decoration: none; font-weight: 500; font-size: 15px;
  background: var(--accent); color: var(--accent-ink);
  padding: 11px 20px; border-radius: 999px;
}
.cta:hover { filter: brightness(1.08); }
.credit { margin: 0; font-size: 14px; color: var(--fg-dim); opacity: 0.7; }
.credit a { color: inherit; text-underline-offset: 2px; }
.credit a:hover { color: var(--fg); }
.copyright { margin: 0; font-size: 14px; color: var(--fg-dim); opacity: 0.7; }
.page .copyright { color: var(--page-dim); }

/* ---------- pages of their own: Privacy, the Documentation ----------
   The sections' inverted theme as the whole page: their stone white as the
   ground, their ink as the type. The bar keeps its place and its parts, in
   the inverse: River and the handwriting in ink, the links' capsule light. */
body.page {
  --page-ground: #DFDBD4;
  --page-ink: #2C2A27;
  --page-dim: #59534D;
  --page-rule: rgba(44, 42, 39, 0.14);
  --page-accent: #23756D;
  background: var(--page-ground); color: var(--page-ink);
}
.page .wordmark, .page .wordmark .maker { color: var(--page-ink); }
.page .wordmark .by { color: var(--page-dim); }
.page .bar-links {
  background: rgba(255, 255, 255, 0.45); border-color: var(--page-rule);
  box-shadow: 0 8px 24px -12px rgba(44, 42, 39, 0.35);
}
.page .bar-links a { color: var(--page-dim); }
.page .bar-links a:hover { color: var(--page-ink); }
.page .bar-links a[aria-current="page"]:not(.beta) { color: var(--page-ink); background: rgba(44, 42, 39, 0.10); }
.page .bar-links .beta, .page .bar-links .beta:hover { color: var(--midnight-ground); }
.page .bar-links .beta[aria-current="page"] { box-shadow: inset 0 0 0 2px rgba(22, 27, 38, 0.35); }

.page-main { padding: clamp(40px, 10vh, 110px) 20px 0; }
.page-main article { max-width: 720px; margin: 0 auto; }
.page-main h1 {
  margin: 0 0 16px; font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(34px, 5vw, 56px); line-height: 1.08;
}
.page-main .updated { margin: -20px 0 32px; font-size: 14px; }
.page-main .lede { margin: 0 0 32px; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; color: var(--page-dim); }
.page-main h2 { margin: 0 0 10px; font-weight: 600; font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.01em; }
.page-main p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: var(--page-dim); max-width: 40em; }
/* A page's topics: plain, between rules. */
.page-main .topic { padding: 24px 0; border-top: 1px solid var(--page-rule); }
.page-main .topic:last-child { padding-bottom: 0; }
.page-main .topic p:last-child { margin-bottom: 0; }
.page-main a { color: var(--page-accent); }
.page-main a.cta { color: #fff; background: var(--page-accent); margin-top: 6px; }
.page .foot { padding-top: clamp(56px, 10vh, 100px); }
.page .credit { color: var(--page-dim); }
.page .back { color: var(--page-accent); font-weight: 600; text-decoration: none; }
.page .back:hover { text-decoration: underline; }

/* ---------- Get the Beta: the overlay ----------
   A <dialog> (beta-form.js), in the sections' inverted theme: a stone-white
   card over a dimmed, blurred page. */
.beta-dialog {
  --card: #DFDBD4; --ink: #2C2A27; --dim: #59534D; --rule: rgba(44, 42, 39, 0.18); --teal: #23756D;
  border: 0; padding: 0; background: transparent; color: var(--ink);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
}
.beta-dialog::backdrop { background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.beta-dialog[open] { animation: beta-in 0.25s ease-out; }
@keyframes beta-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .beta-dialog[open] { animation: none; } }
.beta-card, .beta-done {
  position: relative; display: grid; gap: 14px;
  background: var(--card); border-radius: 24px; padding: 32px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}
.beta-dialog [hidden] { display: none !important; }   /* display: grid above would otherwise show both panels */
.beta-dialog h2 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }
.beta-lede, .beta-done p { margin: 0 0 4px; color: var(--dim); font-size: 16px; line-height: 1.5; }
.beta-dialog label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.beta-dialog .optional { font-weight: 400; color: var(--dim); }
.beta-dialog input, .beta-dialog textarea {
  font: inherit; font-weight: 400; font-size: 16px; color: var(--ink);
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--rule); border-radius: 12px;
  padding: 10px 12px; resize: vertical;
}
.beta-dialog input:focus, .beta-dialog textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: transparent; }
.beta-dialog input::placeholder, .beta-dialog textarea::placeholder { color: #8A8278; }
.beta-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.beta-note { margin: 0; font-size: 13px; color: var(--dim); }
.beta-note a { color: var(--teal); }
.beta-status { margin: 0; min-height: 1.2em; font-size: 14px; color: #8A3B2E; }
.beta-send {
  justify-self: start; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
  padding: 10px 20px; border-radius: 999px; border: 0;
  background: var(--midnight-tertiary, #8C7BE0); color: var(--midnight-ground, #161B26);
}
.beta-send:disabled { opacity: 0.6; cursor: progress; }
.beta-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(44, 42, 39, 0.08); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.beta-close:hover { background: rgba(44, 42, 39, 0.14); }

/* ---------- Contact: the form on a page of its own ----------
   The beta overlay's fields and button, on the page rather than a card. */
.contact-form { display: grid; gap: 16px; max-width: 560px; }
.contact-form label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; color: var(--page-ink); }
.contact-form .optional { font-weight: 400; color: var(--page-dim); }
.contact-form input, .contact-form textarea {
  font: inherit; font-weight: 400; font-size: 16px; color: var(--page-ink);
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(44, 42, 39, 0.18); border-radius: 12px;
  padding: 10px 12px; resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--page-accent); outline-offset: 0; border-color: transparent; }
.page-main .contact-note { margin: 0; font-size: 14px; }
.page-main .contact-status { margin: 0; min-height: 1.2em; font-size: 14px; color: #8A3B2E; }
.contact-send {
  justify-self: start; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
  padding: 10px 20px; border-radius: 999px; border: 0;
  background: var(--midnight-tertiary); color: var(--midnight-ground);
  transition: filter 0.2s;
}
.contact-send:hover { filter: brightness(1.08); }
.contact-send:disabled { opacity: 0.6; cursor: progress; }
.contact-done h2 { margin: 0 0 10px; font-weight: 600; font-size: 24px; }

/* The footer's way to the contact page, on every River page. */
.foot .contact { font-weight: 600; text-decoration: none; color: var(--accent); }
.page .foot .contact { color: var(--page-accent); }
.foot .contact:hover { text-decoration: underline; }