/* ==========================================================================
   Legal documents — Trust Center
   These pages carry lawyer-authored text published verbatim, so the styling
   does one job: make a long, dense, numbered document readable. No decoration,
   no reveal animations, nothing that competes with the words.

   Latin only. The documents are published in English and are not translated,
   so this sheet never has to solve Arabic typography.
   ========================================================================== */

.legal {
  padding-block: var(--space-8) var(--space-9);
}

.legal__inner {
  max-width: 78ch;
  margin-inline: auto;
}

/* A trail back to the hub, because these pages are deep and are often opened
   from a direct link rather than by browsing. */
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}
.legal__back:hover { color: var(--link-accent); }

.legal h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: var(--space-6);
}

.legal h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.35;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
}
/* The first heading follows the metadata table, which already closes itself. */
.legal h2:first-of-type { border-top: 0; padding-top: 0; }

.legal h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.legal p {
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.75;
}

.legal ul,
.legal ol {
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
  padding-inline-start: 1.35rem;
  line-height: 1.75;
}
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: var(--space-2); }
.legal li::marker { color: var(--purple-500); }

.legal strong { color: var(--text); font-weight: 700; }

.legal a {
  color: var(--link-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- tables ---------------------------------------------------------------
   Legal tables run wide and must never widen the page. Each one scrolls
   inside its own container instead. */
.legal .table-scroll {
  overflow-x: auto;
  margin-bottom: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  min-width: 30rem;
}

.legal thead th {
  text-align: start;
  font-weight: 700;
  color: var(--text);
  background: var(--bg-elevated-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.legal tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-muted);
  vertical-align: top;
}
.legal tbody tr:last-child td { border-bottom: 0; }

/* The document header table — Document ID, Version, Owner — is reference data,
   not prose. Its first column is a label, so it reads as one. */
.legal__meta table { min-width: 0; }
.legal__meta tbody td:first-child {
  color: var(--text);
  font-weight: 600;
  width: 34%;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .legal__meta tbody td:first-child { width: 42%; white-space: normal; }
}

/* --- hub ------------------------------------------------------------------ */

.doc-group + .doc-group { margin-top: var(--space-8); }

.doc-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.doc-group__head h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}
.doc-group__count {
  color: var(--text-faint);
  font-size: .85rem;
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.doc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  transition: border-color .18s ease, transform .18s ease;
}
.doc-card:hover {
  border-color: var(--purple-600);
  transform: translateY(-1px);
}
.doc-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.35;
}
.doc-card__desc {
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.6;
  flex: 1;
  margin: 0;
}
.doc-card__link {
  color: var(--link-accent);
  font-size: .87rem;
  font-weight: 600;
}

/* A standing note that applies to every document below it. */
.legal-note {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  margin-bottom: var(--space-7);
  border: 1px solid var(--accent-soft-border);
  border-inline-start: 3px solid var(--purple-600);
  border-radius: var(--radius-md);
  background: var(--accent-soft-bg);
  color: var(--text);
  font-size: .95rem;
  line-height: 1.7;
}
.legal-note p { margin: 0; }
.legal-note p + p { margin-top: var(--space-3); }