/* ============================================================
   SKEION — legal pages (legal-notice.html, privacy.html)
   Loaded after /assets/site/site.css. Small on purpose: the long text itself is the
   shared .prose component; this file adds the reading layout (a sticky table of
   contents beside the text) and the numbered section titles. The 404 has its own file (notfound.css).
   Guide: docs/build/13-design-system.md, docs/build/14-page-legal.md
   ============================================================ */

/* ---------- Page head: the "last updated" line ---------- */
.legal-meta {
  margin-top: 22px; font: 400 0.75rem/1.5 var(--f-mono); letter-spacing: 0.06em; color: var(--ink-3);
  hyphens: manual; -webkit-hyphens: manual;
}

/* ---------- Reading layout: table of contents (rail) + text ----------
   Below 1024 px there is no rail: the text is one column, the sections follow each other. */
.legal-grid { display: block; }
.legal-toc { display: none; }
.legal-prose { max-width: 68ch; counter-reset: legal; }

@media (min-width: 1024px) {
  .legal-grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
    align-items: start; padding-left: var(--idx);
  }
  .legal-toc { display: block; grid-column: 1 / span 3; position: sticky; top: calc(var(--hdr) + 28px); }
  .legal-prose { grid-column: 5 / -1; }
}

/* Table of contents: a numbered column of rules, like the contents page of a report */
.legal-toc-h {
  margin-bottom: 14px; font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.legal-toc-list { counter-reset: toc; border-top: 1px solid var(--line); }
.legal-toc-list li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.legal-toc-list a {
  display: flex; align-items: baseline; gap: 14px; min-height: 44px; padding: 10px 0;
  font-size: 0.95rem; line-height: 1.35; color: var(--ink-2); text-decoration: none;
  hyphens: manual; -webkit-hyphens: manual; transition: color 0.2s;
}
.legal-toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  content: counter(toc, decimal-leading-zero) / "";   /* decorative: the title carries the meaning */
  flex: none; font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.1em; color: var(--ink-3); transition: color 0.2s;
}
@media (hover: hover) {
  .legal-toc-list a:hover { color: var(--ink); }
  .legal-toc-list a:hover::before { color: var(--teal); }
}

/* ---------- The text: sections separated by a rule that draws itself, numbered titles ---------- */
.legal-prose .prose-section { position: relative; padding: 0 0 clamp(30px, 3.4vw, 46px); border-top: 0; counter-increment: legal; }
.legal-prose .prose-section:last-child { padding-bottom: 0; }
.legal-prose .prose-section > .rule { margin-bottom: 26px; }
.legal-prose h2 {
  display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); align-items: baseline;
  scroll-margin-top: 28px;   /* html already adds scroll-padding-top (header height): this keeps the section rule in view */
}
.legal-prose h2::before {
  content: counter(legal, decimal-leading-zero);
  content: counter(legal, decimal-leading-zero) / "";
  font: 500 0.78rem/1 var(--f-mono); letter-spacing: 0.12em; color: var(--ink-3);
}
@media (max-width: 599px) { .legal-prose h2 { grid-template-columns: 2.4rem minmax(0, 1fr); } }

/* Facts (term · value): a narrower term column than the shared default, the text column is ~68ch */
@media (min-width: 768px) {
  .legal-prose .facts { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); column-gap: 24px; }
}
.legal-prose .facts dd { font-size: clamp(16px, calc(0.23vw + 14.8px), 17.5px); }
.legal-prose .callout { max-width: none; }

/* Inline code (a storage key) */
.legal-prose code {
  padding: 1px 6px; border-radius: 3px; background: rgba(240, 252, 255, 0.07);
  font: 400 0.88em var(--f-mono); color: var(--ink); white-space: nowrap;
}