/*
 * Legal + operational pages (privacy, terms, delete-account, security). One narrow measure, generous
 * rhythm, and no decoration competing with the text.
 */

.doc {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--sp-48) var(--sp-96);
}

.doc h1 {
  font-size: var(--fs-32);
  margin-bottom: var(--sp-8);
}

.doc h2 {
  font-size: var(--fs-20);
  margin-block: var(--sp-48) var(--sp-12);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--line);
  /* Anchor jumps from the on-page contents must clear the sticky nav. */
  scroll-margin-top: var(--sp-64);
}

.doc h3 {
  font-size: var(--fs-16);
  margin-block: var(--sp-24) var(--sp-8);
}

.doc p,
.doc li {
  color: var(--ink-2);
}

.doc__meta {
  color: var(--faint);
  font-size: var(--fs-14);
  margin-bottom: var(--sp-32);
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--sp-16);
  font-size: var(--fs-14);
}

.doc th,
.doc td {
  text-align: left;
  padding: var(--sp-12);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.doc th {
  color: var(--ink);
  font-weight: 650;
}

/* A wide table must scroll inside itself, never push the page sideways. */
.doc__scroll {
  overflow-x: auto;
}

/* "Updated <date>" chip at the top of a legal page. Filled brand pill using the brand/on-brand pairing
 * (same as buttons) so it clears WCAG-AA contrast in both light and dark — a tinted chip did not. */
.doc__updated {
  display: inline-block;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--on-brand);
  background: var(--brand-600);
  border-radius: var(--r-full);
  padding: var(--sp-4) var(--sp-12);
  margin-bottom: var(--sp-24);
}

/* On-page contents (privacy/terms): two columns on wide screens, one on narrow. No fixed height — CLS-safe. */
.toc {
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  background: var(--surface);
  padding: var(--sp-16) var(--sp-24);
  margin-block: var(--sp-24);
}

.toc__label {
  font-size: var(--fs-12);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--sp-8);
}

.toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--sp-24);
}

.toc li {
  margin-block: var(--sp-4);
  break-inside: avoid;
}

.toc a {
  color: var(--brand-600);
}

@media (max-width: 560px) {
  .toc ul {
    columns: 1;
  }
}

.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-600);
  border-radius: var(--r-12);
  background: var(--surface);
  padding: var(--sp-16) var(--sp-24);
  margin-block: var(--sp-24);
}

.callout--warn {
  border-left-color: var(--warning);
}

.callout p:last-child {
  margin-bottom: 0;
}

.status {
  margin-block: var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--r-12);
  font-size: var(--fs-14);
  display: none;
}

.status[data-kind="info"] {
  display: block;
  background: var(--surface-2);
  color: var(--ink-2);
}

.status[data-kind="ok"] {
  display: block;
  background: color-mix(in srgb, var(--positive) 12%, transparent);
  color: var(--positive);
}

.status[data-kind="error"] {
  display: block;
  background: color-mix(in srgb, var(--negative) 12%, transparent);
  color: var(--negative);
}

.step {
  margin-block: var(--sp-32);
}

.step[hidden] {
  display: none;
}