/* ============================================================================
   LEGAL: /privacy and /terms on the sub page system (9 Oct 2026). Reading pages, no instrument.
   Loaded in PageStyles, after sub.css. Every rule under .sp, tokens only.

   Markup: header.sp-head.is-plain (eyebrow, h1, lede, the date as a .stamp record), then
   div.legal > nav.legal-toc (p.list-tag + ul > li > a, one per heading) + article.prose.legal-doc
   (the document: h2[id][data-ch], p, strong run-in heads, a record list for the cookies).

   Phone: the contents first, as hairline rows (each a 44px target), then the document.
   Desktop (1180px): the contents hold still in the first three columns, the section being read
   marked by legal.js (orange square, ink); the document reads in columns 5 to 12 at a measure of
   about seventy characters. Right to left needs nothing here: every property is logical.
   ============================================================================ */

.sp .legal { border-top: 1px solid var(--lp-rule); padding-block: 40px 80px; }

/* ---- the contents ---- */
.sp .legal-toc { margin-bottom: 48px; }
.sp .legal-toc ul { border-top: 1px solid var(--lp-ink); }
.sp .legal-toc a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 0; border-bottom: 1px solid var(--lp-rule); font-size: 15px; line-height: 1.35; color: var(--lp-ink-2); text-decoration: none; }
.sp .legal-toc a::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--lp-rule-2); }
.sp .legal-toc a:hover, .sp .legal-toc a:focus-visible { color: var(--lp-ink); }
.sp .legal-toc a.is-cur { color: var(--lp-ink); font-weight: 600; }
.sp .legal-toc a.is-cur::before { background: var(--lp-accent); }

/* ---- the document: one calm column ---- */
.sp .legal-doc { max-width: 40em; }
.sp .legal-doc > h2:first-child { margin-top: 0; }
.sp .legal-doc h2 { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--lp-rule); }
.sp .legal-doc > h2:first-child { padding-top: 0; border-top: 0; }
.sp .legal-doc p + p { margin-top: 14px; }

/* the cookies: a record list inside the prose (name in the record face, its job beside it),
   so the prose list marker and indent are taken off */
.sp .legal-doc .legal-rec { margin-block: 20px; }
.sp .legal-doc .legal-rec li { padding-inline-start: 0; }
.sp .legal-doc .legal-rec li::before { content: none; }
.sp .legal-doc .legal-rec li + li { margin-top: 0; }
.sp .legal-doc .legal-rec .lg-k { color: var(--lp-ink); overflow-wrap: anywhere; }
.sp .legal-doc .legal-rec .lg-x { font-size: 16px; line-height: 1.55; color: var(--lp-ink-2); }

/* an English document on a page in another language (SiteEnFallback marks it lang="en" dir="ltr"):
   on /ar the header's English keeps to the right edge with the Arabic eyebrow above it, while the
   contents and the document read left to right as English does */
[dir="rtl"] .sp .sp-head [dir="ltr"] { text-align: end; }

@media (min-width: 1180px) {
  .sp .legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: 96px 140px; }
  .sp .legal-toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--lp-nav-h) + 40px); max-height: calc(100vh - var(--lp-nav-h) - 80px); overflow-y: auto; margin-bottom: 0; }
  .sp .legal-doc { grid-column: 5 / span 8; max-width: 38em; }
  .sp .legal-doc h2 { margin-top: 48px; padding-top: 32px; }
  .sp .legal-doc .legal-rec .lg-x { font-size: 17px; }
}