/* Hallmark · macrostructure: Long Document · genre: editorial
 * theme: locked (design.md project — src/constants/tokens.ts "instrument")
 * nav: N1a · knobs: position=left/right split, links=text, sticky=no
 * footer: Ft2 · knobs: order=wordmark/links/credit, separator=middot, density=spaced
 * enrichment: none — typography only · motion: motion-cut (no library in project)
 * eyebrows: zero · pre-emit critique: P5 H5 E5 S5 R5 V4
 *
 * Grammar inherited from the app's design.md: hairline-ruled documents on
 * paper, not stacks of floating cards. Card chrome is reserved for genuine
 * objects; on this site there are none, so there are no cards.
 */

@import url("tokens.css");

/* — Reset ———————————————————————————————————— */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: clip;          /* never `hidden` — breaks position:sticky */
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-prose);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* — Shell ———————————————————————————————————— */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--space-inset);
}

/* — Skip link ———————————————————————————————— */
.skip {
  position: absolute;
  left: var(--space-inset);
  top: var(--space-sm);
  transform: translateY(-250%);
  background: var(--color-accent);
  color: var(--color-paper);
  padding: var(--space-sm) var(--space-base);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  z-index: 10;
}
.skip:focus { transform: translateY(0); }

/* — N1a nav ——————————————————————————————————
   Two destinations, genuinely. Not sticky: this is a document, and a bar that
   follows you down a privacy policy is chrome with nothing to do. */
.nav {
  border-bottom: var(--rule-hair) solid var(--color-border);
}
.nav__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-base);
  padding-block: var(--space-lg);
  flex-wrap: wrap;
}
.nav__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-title);
  letter-spacing: -0.015em;
  line-height: var(--leading-tight);
  color: var(--color-ink);
  text-decoration: none;
}
.nav__mark:hover { color: var(--color-accent); }
.nav__links {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-caption);
}
.nav__link {
  white-space: nowrap;          /* clickable text never wraps */
  color: var(--color-ink-secondary);
  text-decoration: none;
  padding-block: var(--space-xs);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.nav__link:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.nav__link[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }

/* — Document ————————————————————————————————— */
.doc { padding-block: var(--space-4xl) var(--space-5xl); }

.doc__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.022em;
  margin: 0 0 var(--space-lg);
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 18ch;
}
.doc__stamp {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-micro);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-2xl);
}

.prose { max-width: var(--measure); }
/* Reset and flow at the SAME specificity, flow declared second so it wins.
   `.prose p { margin: 0 }` would out-specify the owl and collapse the rhythm. */
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: var(--space-lg); }

.lede {
  font-size: var(--text-lede);
  color: var(--color-ink-secondary);
  text-wrap: pretty;
}

/* Section heads emerge from the flow — bold short phrases, not banners. */
.prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: -0.012em;
  margin: var(--space-4xl) 0 var(--space-sm);
  padding-top: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-border);
  overflow-wrap: anywhere;
  min-width: 0;
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.prose h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  line-height: 1.4;
  margin: var(--space-2xl) 0 var(--space-xs);
  color: var(--color-ink);
}

.prose ul { padding-left: 0; list-style: none; }
.prose li {
  position: relative;
  padding-left: var(--space-lg);
  margin-top: var(--space-sm);
  color: var(--color-ink-secondary);
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: var(--rule-hair);
  background: var(--color-accent);
}
.prose li strong { color: var(--color-ink); font-weight: 600; }

.prose a,
.row__a a,
.serious a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-short) var(--ease-out);
}
.prose a:hover,
.row__a a:hover,
.serious a:hover { text-decoration-thickness: 2px; }

.prose strong { font-weight: 600; }
.prose em { font-style: italic; }   /* body-copy emphasis only — never headings */

/* Quiet compliance voice, per design.md: last in the scroll, smallest voice. */
.note {
  margin-top: var(--space-4xl);
  padding-top: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-border);
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
  max-width: var(--measure);
}

/* A genuine object: the one bordered block on the site, used where the app
   itself uses one — a serious statement that has to stop the eye. */
.serious {
  margin-top: var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
  border: var(--rule-hair) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-caption);
  color: var(--color-ink-secondary);
  max-width: var(--measure);
}
.serious strong { color: var(--color-ink); }

/* Fill-me-in marker — impossible to publish by accident. */
.todo {
  background: var(--color-warning-muted);
  color: var(--color-warning);
  font-family: var(--font-numeric);
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: var(--rule-hair) solid currentColor;
}

/* Definition rows — the support page's Q/A and the settings glossary. */
.rows { margin-top: var(--space-xl); max-width: var(--measure); }
.row {
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-border-faint);
}
.row:last-child { border-bottom: var(--rule-hair) solid var(--color-border-faint); }
.row__q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-title);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
  overflow-wrap: anywhere;
  min-width: 0;
}
.row__a { margin: 0; color: var(--color-ink-secondary); }
.row__a + .row__a { margin-top: var(--space-md); }

.num {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* — Ft2 footer — inline single line ——————————— */
.foot {
  border-top: var(--rule-hair) solid var(--color-border);
  padding-block: var(--space-xl) var(--space-3xl);
  font-size: var(--text-micro);
  color: var(--color-ink-muted);
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-base);
}
.foot__mark { font-family: var(--font-display); font-weight: 700; color: var(--color-ink-secondary); }
.foot a { color: var(--color-ink-muted); text-decoration: none; white-space: nowrap; border-bottom: var(--rule-hair) solid var(--color-border); }
.foot a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.foot__sep { color: var(--color-border); }
.foot__credit { margin-left: auto; }

/* — Focus: instant, never transitioned ————————— */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* — Narrow ——————————————————————————————————— */
@media (max-width: 30rem) {
  :root { --space-inset: 20px; }
  .nav__inner { padding-block: var(--space-base); }
  .foot__credit { margin-left: 0; flex-basis: 100%; }
}