/* ============================================================
   Legal pages — /notice, /privacy
   Mirrors .settings-page layout with a wider max-width for prose.
   ============================================================ */

.legal-page {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-07);
}

.legal-page-inner {
  max-width: var(--page-prose-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
}

.legal-page h1 {
  font: var(--font-weight-semibold) var(--font-size-500)/1.2 var(--font-family-sans);
  color: var(--text-primary);
  margin: 0;
}

.legal-page h2 {
  font: var(--font-weight-semibold) var(--font-size-400)/1.4 var(--font-family-sans);
  color: var(--text-primary);
  margin: var(--spacing-05) 0 0 0;
}

.legal-page p {
  font: var(--font-weight-regular) var(--font-size-350)/1.5 var(--font-family-sans);
  color: var(--text-secondary);
  margin: 0;
}

.legal-page strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.legal-page a {
  color: var(--interactive);
  text-decoration: underline;
}

.legal-page ul,
.legal-page ol {
  font: var(--font-weight-regular) var(--font-size-350)/1.5 var(--font-family-sans);
  color: var(--text-secondary);
  margin: 0;
  padding-left: var(--spacing-05);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-02);
}

.legal-page li::marker {
  color: var(--text-helper);
}

.legal-page .lp-meta {
  font: var(--font-weight-regular) var(--font-size-300)/1.4 var(--font-family-sans);
  color: var(--text-helper);
  letter-spacing: var(--font-letter-spacing-looser);
  margin: 0;
}

.legal-page .lp-divider {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border-subtle-01);
  margin: var(--spacing-04) 0 0 0;
}

/* Small data tables (Privacy Notice §2, §4, §6) */
.lp-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--font-weight-regular) var(--font-size-325)/1.5 var(--font-family-sans);
  color: var(--text-secondary);
}

.lp-table th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  padding: var(--spacing-03) var(--spacing-04);
  border-bottom: 1px solid var(--border-subtle-01);
  background: var(--layer-01);
}

.lp-table td {
  padding: var(--spacing-03) var(--spacing-04);
  border-bottom: 1px solid var(--border-subtle-01);
  vertical-align: top;
}

.lp-table tr:last-child td {
  border-bottom: 0;
}