/*
 * pages.css - long form typography for the three static pages: /journal,
 * /terms and /privacy.
 *
 * These pages reuse base.css for the shell (header, brand, ghost buttons,
 * footer) and add nothing but a reading column. They ship no JavaScript at
 * all, so everything here has to hold up without a single class being toggled
 * at runtime.
 *
 * Rules inherited from the rest of the build:
 *   1. Colour only ever comes from a token. No literal hex lives in this file.
 *   2. Nothing is defined only inside a media query. The light theme block at
 *      the bottom corrects roles that stop working on a near-white page, and
 *      every one of those properties already has a base value above it.
 *   3. Mobile first. The breakpoints widen; they never repair.
 *
 * Load order is tokens.css, base.css, then this file, so equal-specificity
 * overrides of a base component resolve here without !important.
 */

/* ----------------------------------------------------- shell corrections -- */

/*
 * base.css hides header ghost buttons below 600px, because on the app the
 * Journal link is a nicety the footer repeats. On a document page the header
 * link is the only way back to the product without using browser history, so
 * it is restored. One extra class of specificity is enough; the base rule sits
 * inside a media query, which changes nothing about how it is weighed.
 */
.doc-page .header-actions a.ghost-button { display: inline-flex; }

/* The page you are already on stays visible but stops inviting a click. */
.ghost-button[aria-current='page'] {
  color: var(--text-primary);
  border-color: var(--divider-strong);
  background: var(--bg-elevated);
  cursor: default;
}

/* -------------------------------------------------------- reading column -- */

.doc-main {
  width: 100%;
  max-width: var(--shell-max);
  /* Same guard the app shell uses: a wide descendant must not be able to push
   * the page sideways. */
  min-width: 0;
  margin-inline: auto;
  padding: calc(var(--step) * 8) var(--gutter) calc(var(--step) * 12);
}

/* Focused only by the skip link, which is a screen reader move rather than a
 * visible focus event. Keyboard users still get the ring on real controls. */
.doc-main:focus { outline: none; }

.doc {
  width: 100%;
  min-width: 0;
  /* ~68 characters. Wider than this and the eye loses the start of the next
   * line; the measure, not the viewport, is what sets comfortable reading. */
  max-width: 68ch;
  margin-inline: auto;
  line-height: 1.7;
  color: var(--text-primary);
  /* A long URL or a storage key must wrap rather than widen the column. */
  overflow-wrap: break-word;
}

/*
 * Vertical rhythm is one owl selector per block container, so nothing needs a
 * bottom margin and no adjacent margins ever collapse into a surprise.
 */
.doc > * + *,
.doc-entry > * + *,
.doc-section > * + *,
.doc-note > div > * + * { margin-top: calc(var(--step) * 4); }

/* ------------------------------------------------------------ headings -- */

.doc h1 {
  font-size: clamp(29px, 6vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.doc h2 {
  font-size: clamp(20px, 3.4vw, 25px);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.doc h3 {
  font-size: 16px;
  color: var(--text-primary);
}

/* An h2 needs no margin of its own: .doc-section and .doc-entry own the space
 * above their heading, so it never has to be corrected back to zero when it
 * lands first. An h3 opens a subdivision inside a section, so it takes more
 * room than the owl gives it. */
.doc h3 { margin-top: calc(var(--step) * 6); }

.doc-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.doc-lede {
  font-size: clamp(17px, 2.4vw, 19px);
  line-height: 1.55;
  color: var(--text-muted);
}

/* --------------------------------------------------------------- prose -- */

.doc p,
.doc li { max-width: 100%; }

.doc strong { font-weight: 600; color: var(--text-primary); }

.doc em { font-style: italic; }

/* base.css strips list styling for the app's chrome; prose wants it back. */
.doc ul,
.doc ol {
  padding-left: 1.4em;
  list-style: disc;
}

.doc ol { list-style: decimal; }
.doc li + li { margin-top: calc(var(--step) * 2); }
.doc li::marker { color: var(--accent); }
.doc ol li::marker { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.doc blockquote {
  margin: 0;
  padding: calc(var(--step) * 0.5) 0 calc(var(--step) * 0.5) calc(var(--step) * 5);
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
}

.doc code {
  padding: 0.12em 0.4em;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  color: var(--text-primary);
  /* A key like ponbond.wallet.rdns has no spaces to break at. */
  overflow-wrap: anywhere;
}

/*
 * Links carry the lime plus a permanent underline. Colour alone would fail
 * anyone who cannot separate lime from white text, and inside a paragraph the
 * underline is the affordance that actually reads as "link".
 */
.doc a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s var(--ease), text-decoration-thickness 0.15s var(--ease);
}

.doc a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------- meta -- */

.doc-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step) calc(var(--step) * 2);
  padding-top: calc(var(--step) * 4);
  border-top: 1px solid var(--divider);
  font-size: 13.5px;
  color: var(--text-muted);
}

/* A separator that costs no character and disappears cleanly when the byline
 * wraps onto two lines. */
.doc-byline .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--divider-strong);
  flex: none;
}

.doc-updated {
  font-size: 13.5px;
  color: var(--text-muted);
}

.doc-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.doc-fine { font-size: 13.5px; color: var(--text-muted); }

/* ---------------------------------------------------------- callout box -- */

.doc-note {
  display: flex;
  gap: calc(var(--step) * 3);
  padding: calc(var(--step) * 4);
  border: 1px solid var(--divider);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: 0.95em;
  line-height: 1.6;
}

.doc-note > svg {
  width: 18px;
  height: 18px;
  flex: none;
  /* Optical alignment with the cap height of the first line, not the box. */
  margin-top: 3px;
  color: var(--accent);
}

.doc-note > div { min-width: 0; }

/* The "have a lawyer read this" variant. Amber rather than lime, because it is
 * a caveat about the document rather than a point being made in it. */
.doc-note.doc-warn {
  background: var(--bg-elevated);
  border-color: var(--divider-strong);
  border-left-color: var(--warning);
}

.doc-note.doc-warn > svg { color: var(--warning); }

/* ------------------------------------------------------------- entries -- */

/* Journal entries are separated by a rule; terms and privacy sections are not,
 * because their headings already carry the structure. */
.doc > .doc-entry {
  margin-top: calc(var(--step) * 11);
  padding-top: calc(var(--step) * 9);
  border-top: 1px solid var(--divider);
}

.doc > .doc-section { margin-top: calc(var(--step) * 10); }

.doc-entry-head > h2 { margin-top: calc(var(--step) * 2); }

/* ----------------------------------------------------------- back link -- */

.doc .doc-back {
  margin-top: calc(var(--step) * 12);
  padding-top: calc(var(--step) * 8);
  border-top: 1px solid var(--divider);
}

.doc .doc-back a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--step) * 2);
  padding: calc(var(--step) * 2.5) calc(var(--step) * 4);
  border: 1px solid var(--divider-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.doc .doc-back a:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.doc .doc-back svg { width: 15px; height: 15px; flex: none; }

/* --------------------------------------------------------- breakpoints -- */

@media (max-width: 439px) {
  .doc-main { padding-top: calc(var(--step) * 6); }
  .doc-note { padding: calc(var(--step) * 3.5); gap: calc(var(--step) * 2.5); }
  /* Two header links plus the brand still fit at 360px once base.css tightens
   * the pills, so nothing is dropped here. */
}

@media (min-width: 768px) {
  .doc-main { padding-block: calc(var(--step) * 12) calc(var(--step) * 16); }
  .doc { line-height: 1.72; }
  .doc > .doc-entry { margin-top: calc(var(--step) * 13); padding-top: calc(var(--step) * 10); }
}

@media (min-width: 1280px) {
  /* The column is already at its measure; the extra width buys air, not size. */
  .doc-main { padding-block: calc(var(--step) * 16) calc(var(--step) * 20); }
}

/* -------------------------------------------- light theme corrections -- */

/*
 * --accent measures 1.07:1 on the light page background, so anything that
 * carries meaning in lime has to hand the job over on a pale page.
 *
 * Text links take the olive --chart-line darkened toward ink with color-mix,
 * measured at 4.73:1 on --bg-page. The declaration above each mix is the
 * fallback for an engine that drops it, and it is deliberately --text-primary
 * rather than --chart-line: raw olive is 2.87:1 on this background, which
 * fails AA for body text, and a link that loses its colour still keeps the
 * permanent underline that marks it as a link. Ink degrades legibly; olive
 * degrades to unreadable.
 *
 * Decorative lime (markers, rules, the plain callout icon) only needs 3:1, so
 * it moves to --chart-line unmixed.
 *
 * .doc-warn is excluded from all of that and darkened on its own axis instead.
 * The lime rules used to catch it on specificity, because :root[data-theme]
 * plus one class outranks the .doc-note.doc-warn pair. That repainted the
 * amber "have a lawyer read this" callout olive and made the warning variant
 * identical to an ordinary note. Amber is the whole signal; it keeps it.
 *
 * Hover lives in its own (hover: hover) blocks so the pointer-coarse reset at
 * the bottom of the file cannot be outranked by a theme selector.
 *
 * Both triggers are covered, and every property below already has a base value
 * defined outside a media query.
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .doc a {
    color: var(--text-primary);
    color: color-mix(in srgb, var(--chart-line) 72%, var(--text-primary));
  }
  :root:not([data-theme='dark']) .doc li::marker { color: var(--text-subtle); }
  :root:not([data-theme='dark']) .doc blockquote { border-left-color: var(--chart-line); }
  :root:not([data-theme='dark']) .doc-note:not(.doc-warn) { border-left-color: var(--chart-line); }
  :root:not([data-theme='dark']) .doc-note:not(.doc-warn) > svg { color: var(--chart-line); }
  :root:not([data-theme='dark']) .doc-note.doc-warn {
    border-left-color: var(--warning);
    border-left-color: color-mix(in srgb, var(--warning) 65%, var(--text-primary));
  }
  :root:not([data-theme='dark']) .doc-note.doc-warn > svg {
    color: var(--warning);
    color: color-mix(in srgb, var(--warning) 65%, var(--text-primary));
  }
}

@media (prefers-color-scheme: light) and (hover: hover) {
  :root:not([data-theme='dark']) .doc a:hover { color: var(--text-primary); }
  :root:not([data-theme='dark']) .doc .doc-back a:hover { border-color: var(--chart-line); }
}

:root[data-theme='light'] .doc a {
  color: var(--text-primary);
  color: color-mix(in srgb, var(--chart-line) 72%, var(--text-primary));
}
:root[data-theme='light'] .doc li::marker { color: var(--text-subtle); }
:root[data-theme='light'] .doc blockquote { border-left-color: var(--chart-line); }
:root[data-theme='light'] .doc-note:not(.doc-warn) { border-left-color: var(--chart-line); }
:root[data-theme='light'] .doc-note:not(.doc-warn) > svg { color: var(--chart-line); }
:root[data-theme='light'] .doc-note.doc-warn {
  border-left-color: var(--warning);
  border-left-color: color-mix(in srgb, var(--warning) 65%, var(--text-primary));
}
:root[data-theme='light'] .doc-note.doc-warn > svg {
  color: var(--warning);
  color: color-mix(in srgb, var(--warning) 65%, var(--text-primary));
}

@media (hover: hover) {
  :root[data-theme='light'] .doc a:hover { color: var(--text-primary); }
  :root[data-theme='light'] .doc .doc-back a:hover { border-color: var(--chart-line); }
}

/* Pointer-coarse devices never get a hover state that can stick after a tap.
 * The back button's lime ring is the visible one, so it is reset too, not just
 * the fill. */
@media (hover: none) {
  .doc a:hover { text-decoration-thickness: 1px; }
  .doc .doc-back a:hover { border-color: var(--divider-strong); background: transparent; }
}