/* Legal pages — meta header, version stamp, integrity hash.
   Content itself inherits mh-post-body typography. */

/* The site nav is position:fixed; legal pages put content at the top of <main>,
   so clear the nav the same way the rest of the site does (else the eyebrow/H1
   render behind the logo — badly on mobile). */
main { padding-top: calc(var(--nav-height) + var(--space-4) + var(--space-14)); padding-bottom: var(--space-16); }

.legal-meta { margin-bottom: 2.5rem; }
.legal-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--color-text-muted, #777);
  margin: 0 0 0.5rem;
}
.legal-version { font-size: 0.9rem; color: var(--color-text-muted, #777); margin: 0.25rem 0; }
.legal-note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted, #777);
  max-width: 62ch;
  margin-top: 0.75rem;
}
.legal-body { max-width: 70ch; }
.legal-body table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin: 1rem 0; }
.legal-body td, .legal-body th { border: 1px solid var(--color-border, #e2e2e2); padding: 0.4rem 0.6rem; vertical-align: top; }
.legal-rule { margin: 3rem 0 1rem; border: 0; border-top: 1px solid var(--color-border, #e2e2e2); }
.legal-hash { font-size: 0.75rem; color: var(--color-text-muted, #777); }
.legal-hash code { word-break: break-all; }

/* ───────────────────────── Legal hub (index) ───────────────────────── */
.legal-meta .lead {
  font-size: 1.15rem; line-height: 1.5; color: var(--color-text-muted);
  max-width: 56ch; margin-top: var(--space-4);
}
.legal-hub { margin-top: var(--space-12); }
.legal-group { margin-top: var(--space-10); }
.legal-group:first-child { margin-top: 0; }
.legal-hub .legal-group-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 500; color: var(--color-text-muted);
  margin: 0 0 var(--space-3); padding: 0;
}
.legal-rows {
  border: 1px solid var(--color-border); border-radius: 14px;
  overflow: hidden; background: var(--color-bg);
}
.legal-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  text-decoration: none; color: var(--color-text);
  transition: background 0.15s ease;
}
.legal-row:first-child { border-top: 0; }
.legal-row:hover { background: var(--color-bg-soft); }
.legal-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.legal-row-title { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; }
.legal-row-desc { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.4; }
.legal-row-tag {
  flex-shrink: 0; font-size: 0.72rem; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  background: var(--color-bg-soft); border: 1px solid var(--color-border);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.legal-row-ext { margin-left: 5px; color: var(--color-text-muted); font-size: 0.85em; }
.legal-hub-foot { margin-top: var(--space-12); font-size: 0.9rem; }

/* ───────── Legal document: sticky table-of-contents (desktop only) ───────── */
.legal-doc { display: block; }
.legal-toc { display: none; }
.legal-body :is(h2, h3)[id] { scroll-margin-top: calc(var(--nav-height) + var(--space-12)); }
@media (min-width: 920px) {
  .legal-doc {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: var(--space-14);
    align-items: start;
  }
  .legal-doc .legal-article { margin: 0; max-width: none; }
  .legal-toc {
    display: block;
    position: sticky;
    top: calc(var(--nav-height) + var(--space-8));
    max-height: calc(100vh - var(--nav-height) - var(--space-12));
    overflow-y: auto;
  }
}
.legal-toc-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-text-muted); margin: 0 0 var(--space-3); font-weight: 500;
}
.legal-toc ul { list-style: none; margin: 0; padding: 0; }
.legal-toc a {
  display: block; padding: 5px 0 5px var(--space-3);
  font-size: 0.78rem; line-height: 1.35;
  color: var(--color-text-muted); text-decoration: none;
  border-left: 2px solid var(--color-border);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.legal-toc a:hover { color: var(--color-text); border-left-color: var(--color-text); }