/* ------------------------------------------------------------------
 * Legal document pages.
 *
 * These get read carefully, printed, and filed. Priorities: a comfortable
 * measure, unambiguous hierarchy, tables that survive a 360px viewport,
 * and all-caps liability clauses that stay legible rather than shouting.
 * ------------------------------------------------------------------ */

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter) var(--space-3xl);
}

/* The sidebar column only exists when there is a table of contents. Short
   pages (support, account deletion) have none, and must not have their body
   squeezed into a 15rem column. */
@media (min-width: 64rem) {
  .legal-layout--toc {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-3xl);
  }
}

/* ---- Table of contents -------------------------------------------- */

.legal-toc {
  font-size: var(--text-body-sm);
}

@media (min-width: 64rem) {
  .legal-toc {
    position: sticky;
    top: 5.5rem;
    align-self: start;
    max-height: calc(100svh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Desktop-only heading. On narrow screens the <summary> is the heading, and
   showing both renders "On this page" twice. */
.legal-toc__title {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: var(--space-md);
}

@media (min-width: 64rem) {
  .legal-toc__title {
    display: block;
  }
}

.legal-toc ol {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.legal-toc a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--ink-dim);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: var(--leading-normal);
}

.legal-toc a:hover {
  color: var(--ink);
  background: var(--bg-card);
  border-left-color: var(--line-strong);
}

.legal-toc a[aria-current='true'] {
  color: var(--clay);
  border-left-color: var(--clay);
  background: var(--bg-card);
}

/* On narrow screens the TOC collapses into a disclosure. */
.legal-toc__disclosure {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: var(--space-md);
}

.legal-toc__disclosure > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--clay);
}

.legal-toc__disclosure[open] > summary {
  margin-bottom: var(--space-md);
}

/* The disclosure stays open so the list is present without JavaScript, but on
   a phone a 20-item contents list would bury the document. Cap it and let it
   scroll inside itself. */
.legal-toc__disclosure[open] > ol {
  max-height: 40svh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 64rem) {
  .legal-toc__disclosure {
    border: 0;
    background: none;
    padding: 0;
  }

  .legal-toc__disclosure > summary {
    display: none;
  }

  .legal-toc__disclosure[open] > ol {
    max-height: none;
    overflow-y: visible;
  }
}

/* ---- Document body ------------------------------------------------ */

.legal-doc {
  max-width: var(--measure);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-dim);
}

.legal-doc > * + * {
  margin-top: var(--space-md);
}

.legal-doc h2 {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--text-headline-lg);
  scroll-margin-top: 5.5rem;
}

.legal-doc h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-doc h3 {
  margin-top: var(--space-xl);
  color: var(--ink);
  font-size: var(--text-headline-md);
  scroll-margin-top: 5.5rem;
}

.legal-doc strong {
  color: var(--ink);
  font-weight: 600;
}

.legal-doc ul,
.legal-doc ol {
  padding-left: 1.25em;
}

.legal-doc li + li {
  margin-top: var(--space-sm);
}

.legal-doc li::marker {
  color: var(--ink-mute);
}

.legal-doc hr {
  margin-block: var(--space-2xl);
  border: 0;
  border-top: 1px solid var(--line);
}

.legal-doc a {
  overflow-wrap: anywhere;
}

/* Blockquotes carry emphasis notes in these documents, not citations. */
.legal-doc blockquote {
  margin-block: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-card);
  border-left: 3px solid var(--ochre);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.legal-doc blockquote > :first-child {
  margin-top: 0;
}

/* ---- Tables -------------------------------------------------------
   Wide tables scroll inside their own container. The page body must
   never scroll sideways. */

.table-scroll {
  margin-block: var(--space-lg);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-md);
}

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

.legal-doc thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elev);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

.legal-doc tbody tr:last-child td {
  border-bottom: 0;
}

.legal-doc tbody tr:hover {
  background: rgb(244 236 222 / 0.02);
}

/* A two-column table with an empty header row is a key/value summary. */
.legal-doc .table-scroll--kv thead {
  display: none;
}

.legal-doc .table-scroll--kv td:first-child {
  color: var(--ink);
  font-weight: 500;
  width: 45%;
}

/* ---- Uppercase liability clauses ---------------------------------
   Long all-caps runs are near-unreadable at body weight. Ease the
   tracking, drop the size slightly, and set them apart rather than
   letting them shout inline. */

.legal-doc .clause-caps {
  margin-block: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  letter-spacing: 0.01em;
  color: var(--ink-dim);
}

.legal-doc .clause-caps strong {
  font-weight: 600;
}

/* ---- Effective-date banner ---------------------------------------- */

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.legal-meta strong {
  color: var(--ink-dim);
  font-weight: 500;
}

@media print {
  .legal-layout {
    display: block;
    padding: 0;
  }

  .legal-doc {
    max-width: none;
    color: #000;
  }

  .legal-doc h2 {
    break-after: avoid;
  }

  .table-scroll {
    overflow: visible;
    border-color: #999;
  }

  .legal-doc .clause-caps {
    border-color: #999;
    background: none;
  }
}