/* Legal pages: long-form reading layout with a side index of all legal pages.
   Shares tokens, nav and footer styles with styles.css. */

.legal {
  display: grid;
  grid-template-columns: 240px minmax(0, 720px);
  justify-content: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: 140px var(--gutter) var(--space-section);
}

.legal__aside { position: sticky; top: 110px; align-self: start; }

.legal__back {
  display: inline-block;
  margin-bottom: 2rem;
  font: 400 0.8rem / 1 var(--font-mono);
  color: var(--color-muted);
  text-decoration: none;
}

.legal__back:hover { color: var(--color-brand-deep); }

.legal__nav { display: grid; gap: 2px; border-left: 1px solid var(--color-line); }

.legal__nav a {
  padding: 8px 0 8px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}

.legal__nav a:hover { color: var(--color-brand-deep); }

.legal__nav a[aria-current="page"] {
  border-left-color: var(--color-brand);
  color: var(--color-ink);
  font-weight: 500;
}

.legal__doc h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); }

.legal__meta {
  margin: 1.4rem 0 0;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-line);
  font: 400 0.8rem / 1.7 var(--font-mono);
  color: var(--color-muted);
}

.legal__meta a { color: var(--color-ink-soft); }

.legal__doc h2 {
  margin: 2.8rem 0 0.9rem;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  letter-spacing: -0.02em;
  scroll-margin-top: 100px;
}

.legal__doc p,
.legal__doc li { color: var(--color-ink-soft); }

.legal__doc ul { padding-left: 1.2rem; }
.legal__doc li { margin: 0.4rem 0; }
.legal__doc li::marker { color: var(--color-brand); }
.legal__doc strong { font-weight: 500; color: var(--color-ink); }
.legal__doc a { color: var(--color-brand-deep); }

.legal__note {
  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--color-brand);
  background: var(--color-surface);
  border-radius: 0 10px 10px 0;
}

.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__legal a { color: var(--color-muted); text-decoration: none; }
.footer__legal a:hover { color: var(--color-brand-deep); }

@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; padding-top: 110px; }
  .legal__aside { position: static; }
  .legal__nav { grid-auto-flow: column; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--color-line); }
  .legal__nav a { white-space: nowrap; padding: 10px 14px; border-left: 0; border-bottom: 2px solid transparent; margin: 0 0 -1px; }
  .legal__nav a[aria-current="page"] { border-bottom-color: var(--color-brand); }
}