/* The two legal pages (src/tolk-legal.html: terms, privacy), on top of site.css. A reading page, not a showcase:
   the headline and date, the short version in the site's white panel, then the text in one measured column with
   the contents beside it on a wide screen (above it on a phone). Numbered headings count themselves. */
.legal{padding-top:clamp(8px,2vw,24px)}
.legal-head{max-width:760px}
.legal-head h1{margin-top:18px}
.legal-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;color:var(--ink-3);font-size:15px}

/* The short version: the site's white panel, five numbered points in two columns */
.legal-summary{margin-top:clamp(36px,5vw,56px);background:var(--surface);border:1px solid var(--line);border-radius:36px;padding:clamp(28px,4.5vw,56px)}
.legal-summary h2{margin:0;font:600 15px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink)}
.legal-summary ol{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px;counter-reset:short}
.legal-summary li{position:relative;padding-left:46px;counter-increment:short;font-size:17px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.legal-summary li::before{content:counter(short);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--tint);color:var(--blue-ink);display:grid;place-items:center;font:700 13px/1 var(--sans)}
.legal-summary-note{margin:24px 0 0;font-size:14px;color:var(--ink-3)}

/* The text and its contents */
.legal-grid{margin-top:clamp(44px,6vw,80px);display:grid;grid-template-columns:220px minmax(0,720px);gap:clamp(32px,5vw,88px);align-items:start}
.legal-toc{position:sticky;top:24px;font-size:14px}
.legal-toc p{margin:0 0 10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:var(--ink-3)}
.legal-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.legal-toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:1px solid transparent;color:var(--ink-2);line-height:1.35}
.legal-toc a:hover{color:var(--ink);border-left-color:var(--brand)}

.legal-body{counter-reset:part;font-size:17px;line-height:1.65;color:var(--ink-2)}
.legal-body h2{counter-increment:part;margin:clamp(40px,5vw,56px) 0 0;scroll-margin-top:24px;font:500 clamp(26px,2.4vw,32px)/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.legal-body h2:first-child{margin-top:0}
.legal-body h2::before{content:counter(part) ".";display:inline-block;min-width:1.5em;color:var(--blue-ink)}
.legal-body h3{margin:28px 0 0;font:600 18px/1.35 var(--sans);color:var(--ink)}
.legal-body p{margin:14px 0 0;text-wrap:pretty}
.legal-body ul,.legal-body ol{margin:12px 0 0;padding-left:1.4em}
.legal-body li{margin-top:8px;padding-left:4px}
.legal-body li::marker{color:var(--blue-ink)}
.legal-body strong{color:var(--ink);font-weight:600}
.legal-body a{text-decoration:underline;text-decoration-color:#B9CCE8;text-underline-offset:3px}
.legal-body a:hover{text-decoration-color:currentColor}
.legal-body .aside{margin-top:18px;padding:16px 20px;border-radius:16px;background:var(--tint);color:#184C8A;font-size:15px}
.legal-body .aside p{margin:0}
.legal-body .aside p + p{margin-top:8px}

/* The privacy page's inventory: what, why, where, how long */
.legal-body table{width:100%;margin-top:18px;border-collapse:collapse;font-size:15px;line-height:1.5}
.legal-body th,.legal-body td{padding:12px 14px 12px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.legal-body thead th{border-top:0;padding-top:0;font:600 13px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.legal-body tbody th{font-weight:600;color:var(--ink);width:26%}
.legal-body tbody td:last-child{padding-right:0}

@media (max-width: 960px){
  .legal-grid{grid-template-columns:1fr;gap:36px}
  .legal-toc{position:static;padding:22px 24px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
  .legal-toc ol{border-left:0;columns:2;column-gap:28px}
  .legal-toc a{padding:5px 0;margin:0;border-left:0;break-inside:avoid}
}
@media (max-width: 640px){
  .legal-summary ol{grid-template-columns:1fr;gap:16px}
  .legal-toc ol{columns:1}
  .legal-body table,.legal-body thead,.legal-body tbody,.legal-body tr,.legal-body th,.legal-body td{display:block}
  .legal-body thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .legal-body tr{padding:16px 0;border-top:1px solid var(--line)}
  .legal-body tbody th,.legal-body td{border:0;padding:0;width:auto}
  .legal-body td{margin-top:6px}
  .legal-body td::before{content:attr(data-th) " · ";font-weight:600;color:var(--ink-3);font-size:13px}
}
@media (max-width: 460px){ .legal-summary{border-radius:28px;margin-inline:calc(var(--gutter) * -.5)} }