/* Privacy and Terms. Plain reading layout: ~70ch column, contents list on desktop. */
.legal { padding-top: 48px; padding-bottom: 72px; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .legal { padding-top: 72px; padding-bottom: 96px; } }
@media (min-width: 1000px) { .legal { grid-template-columns: 220px minmax(0, 70ch); gap: 64px; align-items: start; } }

.legal-toc { font-size: 14px; }
@media (min-width: 1000px) { .legal-toc { position: sticky; top: 96px; } }
.legal-toc-title { font: 500 12px/1.4 var(--ss-font-mono); color: var(--ss-text-2); margin: 0 0 10px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ss .legal-toc a { display: block; padding: 6px 0; color: var(--ss-text-2); text-decoration: none; }
.ss .legal-toc a:hover { color: var(--ss-text); text-decoration: underline; }
.legal-toc summary { display: none; }
/* Phones and tablets (Shrav 2026-10-12: "needs to show it's expandable"): a bar with the section count and a chevron in a
   circle, on a raised background so it reads as a control. Opening slides the list down where the browser can animate
   to auto height (Chrome, Edge); others open instantly. */
@media (max-width: 999px) {
  .legal-toc { border: 1px solid var(--ss-line-strong); border-radius: var(--ss-r-lg); background: var(--ss-surface); interpolate-size: allow-keywords; }
  .legal-toc summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 16px; list-style: none;
    font: 500 13px/1.4 var(--ss-font-mono); color: var(--ss-text); border-radius: var(--ss-r-lg); }
  .legal-toc summary::-webkit-details-marker { display: none; }
  .legal-toc summary:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; }
  .legal-toc-count { margin-left: auto; color: var(--ss-text-3); font-weight: 400; }
  .legal-toc-chev { flex: none; width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--ss-raised); color: var(--ss-text);
    transition: transform var(--ss-ease); }
  .legal-toc[open] .legal-toc-chev { transform: rotate(180deg); }
  .legal-toc nav { padding: 0 16px 12px; }
  .legal-toc .legal-toc-title { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .legal-toc::details-content { block-size: 0; overflow: hidden; transition: block-size .26s cubic-bezier(.16, 1, .3, 1), content-visibility .26s allow-discrete; }
    .legal-toc[open]::details-content { block-size: auto; }
  }
}

.legal-body { max-width: 70ch; font-size: 16px; line-height: 1.65; color: var(--ss-text); }
.ss .legal-body h1 { font-size: clamp(32px, 7vw, 44px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 12px; }
.ss .legal-body h2 { font-size: 22px; line-height: 1.25; margin: 40px 0 12px; scroll-margin-top: 88px; }
.ss .legal-body h3 { font-size: 18px; line-height: 1.3; margin: 28px 0 10px; scroll-margin-top: 88px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 14px; padding-left: 22px; }
.legal-body li { margin: 0 0 6px; }
.legal-updated { font: 400 13px/1.4 var(--ss-font-mono); color: var(--ss-text-2); margin: 0 0 20px; }
.legal-draft { margin: 0 0 24px; }
.legal-body a { overflow-wrap: anywhere; }

/* Colour-coded contents (2026-10-12): a dot in each section's palette colour, the same dot beside its heading, and the
   section you're reading in bold with a bar in its colour. Colours come from ss-palette (data-rc, pinned per section). */
.legal-toc ol { border-left: 1px solid var(--ss-line); }
.ss .legal-toc li a { position: relative; margin-left: -1px; padding: 6px 0 6px 26px; border-left: 2px solid transparent; transition: color .15s, border-color .15s; }
.legal-toc li a::before { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--rc, var(--ss-text-3)); opacity: .7; }
.ss .legal-toc li a.is-here { color: var(--ss-text); font-weight: 600; border-left-color: var(--rc, var(--ss-accent)); }
.legal-toc li a.is-here::before { opacity: 1; }
.legal-body h2[data-rc]::before { content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 10px 0 0; border-radius: 50%;
  background: var(--rc, var(--ss-accent)); vertical-align: .12em; }