/* Doc/FAQ prose — Relayrix brand. Tokens from brand.css. */
.doc-page{max-width:820px;margin:40px auto;padding:0 clamp(16px,4vw,32px)}
.doc-prose{color:var(--color-text-strong);font-size:16px;line-height:1.7}
.doc-prose h1{font-size:30px;font-weight:700;margin:0 0 16px}
.doc-prose h2{font-size:22px;font-weight:700;margin:28px 0 10px}
.doc-prose h3{font-size:18px;font-weight:700;margin:22px 0 8px}
.doc-prose p{margin:0 0 14px}
.doc-prose ul,.doc-prose ol{margin:0 0 14px 22px}
.doc-prose li{margin:4px 0}
.doc-prose a{color:var(--color-primary)}
.doc-prose a:hover{color:var(--color-primary-hover)}
/* INLINE code must wrap. skeleton.css:547 sets a blanket `code{white-space:nowrap}`
   for the whole site; a single long token — "3 sent · 0 failed · 3 NOT SENT — the
   900s send budget ran out before exec3@x.org, …" — then rendered 1278px wide and
   dragged /docs/settings-and-security out to 1325px at a 390px viewport (3.4x).
   skeleton is shared by every page, so the override lives here. */
.doc-prose code{font-family:var(--font-mono);font-size:14px;background:var(--color-primary-tint);
  padding:2px 6px;border-radius:6px;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.doc-prose pre{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:14px;overflow-x:auto;max-width:100%}
/* FENCED blocks are exempt: they stay pre-formatted and scroll inside their <pre>.
   Needed explicitly — `.doc-prose code` (0,1,1) outranks skeleton's `pre > code` (0,0,2),
   so without this the rule above would also unwrap block code. */
.doc-prose pre code{background:none;padding:0;white-space:pre;overflow-wrap:normal;word-break:normal}
.doc-prose table{border-collapse:collapse;width:100%;margin:0 0 14px}
.doc-prose th,.doc-prose td{border:1px solid var(--color-border);padding:8px 10px;text-align:left}
.doc-prose th{background:var(--color-background);font-weight:600}
/* Wide tables scroll inside themselves instead of pushing the page sideways.
   MarkdownRenderer escapes raw HTML, so no wrapper <div> can be authored in the
   markdown and Parsedown emits a bare <table> straight into .doc-prose — hence
   the container has to BE the table: display:block turns it into its own scroll
   box (the rows fall into an anonymous table box that may exceed it), while
   border-collapse, inherited, still applies. Scoped to narrow viewports on
   purpose: display:block also drops the "fill the column" behaviour of
   width:100%, so desktop keeps the real table box and its current layout. The
   widest table's min-content is ~440px, far inside the ~700px column at 760px. */
@media (max-width:760px){
  .doc-prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* Base callout — markdown "> " blockquotes had no styling at all before 2026-07-28. */
.doc-prose blockquote{margin:0 0 16px;padding:12px 16px;border-left:3px solid var(--color-border);
  background:var(--color-background);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--color-text-muted)}
.doc-prose blockquote p:last-child{margin-bottom:0}
.doc-prose hr{border:0;border-top:1px solid var(--color-border);margin:28px 0}

/* ── Screenshots in help docs (2026-07-29) ──
   MarkdownRenderer escapes raw HTML, so <figure>/<figcaption> can't be authored
   in the markdown. A screenshot is `![alt](src)` with the italic caption on the
   VERY NEXT LINE — no blank line between them. That matters: Parsedown has
   breaksEnabled off, so the two stay siblings inside one <p> and `img + em`
   matches. Put a blank line between them and the caption becomes its own <p>,
   the adjacency breaks, and the caption silently renders as body-sized italic
   text. No width/height attrs are available either, hence height:auto. */
.doc-prose img{display:block;width:100%;height:auto;margin:20px 0 8px;
  border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow)}
.doc-prose img + em{display:block;margin:0 0 20px;font-size:13.5px;
  color:var(--color-text-muted)}

/* ── Legal pages: /terms and /privacy (2026-07-28) ──
   Long-form contract prose. Narrower measure than the help docs, a masthead that
   separates the title + "Last updated" from the body, numbered sections that are
   scannable at a glance, and print styles — these get filed and forwarded. */
.doc-page--legal{max-width:768px;margin:48px auto 72px}
.doc-prose--legal{font-size:16.5px;line-height:1.75}

/* Masthead: h1 + the "**Last updated: …**" paragraph Parsedown emits right after it. */
.doc-prose--legal h1{font-size:34px;letter-spacing:-.02em;margin:0 0 6px}
.doc-prose--legal > h1 + p{margin:0 0 24px;padding-bottom:20px;font-size:13.5px;font-weight:600;
  color:var(--color-text-muted);border-bottom:1px solid var(--color-border)}
.doc-prose--legal > h1 + p strong{font-weight:600}

/* "Draft for review" notice — amber so it reads as a caveat, not body copy. */
.doc-prose--legal blockquote{border-left-width:3px;border-left-color:var(--color-warning);
  background:var(--color-background); /* fallback before color-mix */
  background:color-mix(in srgb,var(--color-warning) 8%,var(--color-surface));
  color:var(--color-text-strong);font-size:14.5px;line-height:1.6;margin-bottom:28px}

/* Numbered sections get a rule above so the document scans as clauses. */
.doc-prose--legal h2{font-size:19px;letter-spacing:-.01em;margin:36px 0 12px;padding-top:26px;
  border-top:1px solid var(--color-border)}
.doc-prose--legal > h1 + p + blockquote + h2,
.doc-prose--legal > h1 + p + h2{border-top:0;padding-top:0;margin-top:28px}
.doc-prose--legal h3{font-size:16.5px;margin:24px 0 8px}
.doc-prose--legal p,.doc-prose--legal li{color:var(--color-text-strong)}
.doc-prose--legal ul,.doc-prose--legal ol{margin:0 0 16px;padding-left:22px}
.doc-prose--legal li{margin:8px 0}
/* Lead-in terms like "**Changes.** We may update these Terms…" */
.doc-prose--legal li > strong:first-child{color:var(--color-text-strong)}
.doc-prose--legal em{color:var(--color-text-muted)}

.doc-legal__foot{display:flex;flex-wrap:wrap;gap:20px;margin-top:44px;padding-top:20px;
  border-top:1px solid var(--color-border);font-size:14px;font-weight:600}

@media (max-width:600px){
  .doc-page--legal{margin:28px auto 48px}
  .doc-prose--legal{font-size:16px}
  .doc-prose--legal h1{font-size:27px}
  .doc-prose--legal h2{font-size:17.5px;margin-top:30px;padding-top:22px}
}

@media print{
  .nav,.footer,.doc-legal__foot{display:none}
  .doc-page--legal{max-width:none;margin:0}
  .doc-prose--legal{font-size:11pt;line-height:1.5;color:#000}
  .doc-prose--legal h2{page-break-after:avoid;border-top-color:#999}
  .doc-prose--legal p,.doc-prose--legal li{color:#000;orphans:3;widows:3}
  .doc-prose--legal blockquote{background:none;border-left:2px solid #999;color:#000}
  .doc-prose--legal a{color:#000;text-decoration:underline}
}
.doc-index{max-width:900px;margin:40px auto;padding:0 clamp(16px,4vw,32px)}
.doc-index h1{font-size:28px;font-weight:700;margin:0 0 16px}
/* legacy list (unused since the 2026-07-24 card-grid redesign) */
.doc-index__list{list-style:none;margin:0;padding:0}
.doc-index__list li{margin:0 0 10px}
.doc-index__list a{display:inline-block;font-weight:600;font-size:16px}

/* ── Doc index card grid (2026-07-24) ── */
.doc-index__head{margin-bottom:22px}
.doc-index__head h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.doc-index__head p{color:var(--color-text-muted);margin:0;font-size:15px}
.doc-index__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.doc-card{display:block;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:border-color .15s,transform .1s}
.doc-card:hover{border-color:var(--color-primary);transform:translateY(-1px)}
.doc-card__ic{width:38px;height:38px;border-radius:10px;background:var(--color-primary-tint);
  color:var(--color-primary);display:grid;place-items:center;margin-bottom:12px}
.doc-card__ic svg{width:20px;height:20px}
.doc-card__title{display:block;font-size:15.5px;font-weight:700;color:var(--color-text-strong);margin-bottom:5px}
.doc-card__desc{display:block;font-size:13.5px;color:var(--color-text-muted)}
.doc-card__go{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--color-primary)}
.doc-card__go svg{width:14px;height:14px}