/* ---------------------------------------------------------------------------
 * The privacy policy and the terms (D192). Long reading in the player's 393
 * column: body copy at the secondary text colour, gold only on links, and the
 * hierarchy kept flat the way the player surface is (headings step by weight
 * more than by size).
 * ------------------------------------------------------------------------ */
.legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--text-secondary);
}

.legal h2 {
  margin-top: var(--space-6);
  font-size: var(--type-body-lg-size);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.legal h3 {
  margin-top: var(--space-2);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.legal strong {
  color: var(--text-primary);
}

/* Tailwind's preflight strips list markers (see CLAUDE.md); a policy's lists
   are content, so they get theirs back. */
.legal ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-5);
  list-style: disc;
}

.legal a {
  color: var(--text-gold);
}

.legal__updated {
  font-size: var(--type-caption-size);
  color: var(--text-tertiary);
}

.legal__links {
  margin-top: var(--space-6);
}

/* The draft banner: the raised wash with a gold edge, never a fill (D29). */
.legal__draft {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--gold-wash-selected);
  border: var(--border-width) solid var(--gold-500);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
}

.legal__draft-title {
  font-weight: var(--font-weight-semibold);
  color: var(--text-gold);
}

/* Under the sign-up forms and the sign-in screen. */
.legal-agreement,
.legal-footer {
  font-size: var(--type-caption-size);
  color: var(--text-tertiary);
  text-align: center;
}

.legal-agreement a,
.legal-footer a {
  color: var(--text-gold);
}

.legal-footer {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}