/* The legal pages (Privacy Policy, Terms of Service): a light banner, then a contents list that stays in view beside one
   reading column, and a slim footer. Loaded after /site.css, whose tokens (colours, type, spacing, radii) are the only values
   used here; the few widths that are this layout's own are named once below. Ported from Eki's design (astro-site 6d8135b,
   site/src/styles/global.css), fablane#137. Every class starts with legal-, so nothing here reaches the other pages. */
:root {
  --legal-side: 18rem;          /* the contents list */
  --legal-measure: 46rem;       /* the reading column */
  --legal-num: 2.75rem;         /* a clause's number, beside its text */
  --legal-title-measure: 24ch;
  --legal-lede-measure: 38rem;
}

/* banner */
.legal-hero { background: var(--mist); padding-block: var(--space-8) var(--space-12); }
.legal-hero-in { display: grid; gap: var(--space-4); }
.legal-hero-title { margin-top: var(--space-8); max-width: var(--legal-title-measure); font-size: var(--text-h2); font-weight: var(--weight-medium); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); text-wrap: balance; }
.legal-hero-lede { max-width: var(--legal-lede-measure); color: var(--ink-muted); }

/* contents list beside the text */
.legal-shell { display: grid; grid-template-columns: var(--legal-side) minmax(0, var(--legal-measure)); gap: var(--space-16); padding-block: var(--space-12) var(--space-24); align-items: start; }
.legal-side { position: sticky; top: var(--space-6); max-height: calc(100vh - var(--space-12)); overflow-y: auto; font-size: var(--text-small); }
.legal-side a { text-decoration: none; }
.legal-toc-sum { display: none; }
.legal-toc-doc + .legal-toc-doc { margin-top: var(--space-4); }
.legal-toc-title { display: block; padding-block: var(--space-2); color: var(--ink); font-weight: var(--weight-medium); }
.legal-toc-list { list-style: none; padding: 0 0 0 var(--space-3); border-left: 1px solid var(--line); }
.legal-toc-list a { display: block; margin-left: -1px; padding: var(--space-2) var(--space-3); border-left: 2px solid transparent; color: var(--ink-muted); }
.legal-toc-list a:hover { color: var(--ink); }
/* legal.js marks the section being read */
.legal-toc-list a[aria-current] { color: var(--emph); border-left-color: var(--emph); font-weight: var(--weight-medium); }
.legal-back { display: inline-block; margin-top: var(--space-8); color: var(--ink-muted); }

/* the text */
.legal-doc-title { font-size: var(--text-h3); font-weight: var(--weight-medium); line-height: var(--leading-h3); }
.legal-updated { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.legal-section { margin-top: var(--space-12); }
.legal-heading { margin-bottom: var(--space-4); font-size: var(--text-title); font-weight: var(--weight-medium); line-height: var(--leading-title); scroll-margin-top: var(--space-6); }
.legal-clause { display: grid; grid-template-columns: var(--legal-num) 1fr; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-body); line-height: var(--leading-body); }
.legal-num { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* phones and tablets: one column, and the contents list is a box above the text that folds away */
@media (max-width: 899px) {
  .legal-shell { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-6) var(--space-16); }
  .legal-side { position: static; max-height: none; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); }
  .legal-toc-sum { display: block; cursor: pointer; font-weight: var(--weight-medium); }
  .legal-toc[open] .legal-toc-sum { margin-bottom: var(--space-3); }
}

/* footer */
.legal-footer { padding-block: var(--space-6); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.legal-footer-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-8); }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.legal-footer a { text-decoration: none; }
.legal-footer a:hover, .legal-footer a[aria-current] { color: var(--ink); }