/* ==========================================================================
   legal.css — long-form policy pages (Terms of Service, Privacy Policy)
   Two columns: a sticky "On this page" index (left) + the prose article
   (right, capped measure). Collapses to a single column with a foldable
   index on tablet / mobile.
   Markup:
     <div class="container legal">
       <details class="legal-toc" open>
         <summary>On this page</summary>
         <nav><ol><li><a href="#s1">1. …</a></li>…</ol></nav>
       </details>
       <article class="legal-prose">
         <p class="legal-updated">Last updated …</p>
         <p class="legal-intro">…</p>
         <section id="s1"><h2>1. …</h2><p>…</p></section>
         …
       </article>
     </div>
   ========================================================================== */

.legal {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: var(--space-56);
  align-items: start;
}

/* ── On-this-page index ───────────────────────────────────────────────── */
.legal-toc {
  position: sticky;
  top: var(--space-100);
  max-height: calc(100vh - var(--space-110));
  overflow: auto;
}
.legal-toc summary {
  list-style: none;
  cursor: default;
  margin-bottom: var(--space-14);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted);
}
.legal-toc summary::-webkit-details-marker { display: none; }
/* Desktop: the index is always shown regardless of the <details> open state.
   The markup ships closed-by-default so it starts collapsed on mobile; these
   rules force-reveal it on the sticky desktop rail. Modern engines gate a
   closed <details>'s content behind ::details-content, so reveal that too. */
.legal-toc > nav { display: block; }
.legal-toc::details-content { content-visibility: visible; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-toc li { margin: 0; }
.legal-toc a {
  display: block;
  padding: var(--space-5) 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-card);
  color: var(--ink-3);
}
.legal-toc a:hover { color: var(--brand-ink); }

/* ── Prose article ────────────────────────────────────────────────────── */
.legal-prose { max-width: 72ch; }
.legal-prose > :first-child { margin-top: 0; }

.legal-updated {
  margin: 0 0 var(--space-12);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
}
.legal-intro {
  margin: 0 0 var(--space-8);
  font-size: var(--fs-subhead);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.legal-prose section {
  margin-top: var(--space-32);
  padding-top: var(--space-32);
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--space-100);
}
.legal-prose h2 {
  margin: 0 0 var(--space-12);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
  color: var(--ink);
}
.legal-prose h3 {
  margin: var(--space-20) 0 var(--space-8);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--ink-2);
}
.legal-prose p {
  margin: 0 0 var(--space-14);
  color: var(--ink-3);
  line-height: var(--lh-prose);
}
.legal-prose p:last-child { margin-bottom: 0; }
.legal-prose ul {
  margin: var(--space-8) 0 var(--space-14);
  padding-left: var(--space-22);
  color: var(--ink-3);
  line-height: var(--lh-prose);
}
.legal-prose li { margin-bottom: var(--space-6); }
.legal-prose a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-prose strong { color: var(--ink-2); font-weight: var(--fw-bold); }

/* Emphasised inline note (e.g. medical / emergency callout in the ToS) */
.legal-note {
  margin: var(--space-16) 0;
  padding: var(--space-14) var(--space-18);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.legal-note strong { color: var(--ink); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .legal { grid-template-columns: 1fr; gap: var(--space-24); }
  .legal-toc {
    position: static;
    max-height: none;
    padding: var(--space-16) var(--space-18);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .legal-toc summary {
    cursor: pointer;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .legal-toc[open] summary { margin-bottom: var(--space-14); }
  .legal-toc summary::after {
    content: '';
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center / contain no-repeat;
    transition: transform var(--dur-base) var(--ease);
  }
  .legal-toc[open] summary::after { transform: rotate(180deg); }
  /* Mobile honours the fold: collapsed by default, taps open the index. */
  .legal-toc:not([open])::details-content { content-visibility: hidden; }
  .legal-toc ol {
    columns: 2;
    column-gap: var(--space-24);
  }
}
@media (max-width: 720px) {
  .legal-prose { max-width: none; }
  .legal-toc ol { columns: 1; }
}