/* Privacy and terms pages. Loaded after site-nav.css (tokens, base, header and footer);
   light by default, dark only when the visitor chose it (site-theme.js sets data-theme). */
.legal-main { padding: clamp(28px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); }
.legal-wrap { max-width: calc(820px + 2 * var(--gutter)); }
.legal-crumb { margin-bottom: 18px; font-size: 0.88rem; }
.legal-crumb ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.legal-crumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--line-strong); }
.legal-crumb a { color: var(--muted); }
.legal-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 44px); box-shadow: var(--card-shadow);
  overflow-wrap: anywhere;
}
.legal-card h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 6px; letter-spacing: -0.025em; }
.legal-card h2 { font-size: 1.18rem; margin: 30px 0 8px; }
.legal-card .meta { color: var(--muted); margin: 0 0 22px; font-size: 0.92rem; }
.legal-card ul { padding-left: 1.2em; }
.legal-card li { margin: 6px 0; }
.legal-card code { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 24px 0 0; font-size: 0.92rem; }
.legal-links a { display: inline-block; min-height: 32px; line-height: 32px; }

/* Cookies page: storage inventory tables, the cookie-settings panel and the in-page contents. */
.legal-card h3 { font-size: 1rem; margin: 22px 0 6px; }
.legal-card .legal-lede { font-size: 1.05rem; color: var(--text); }
.legal-toc { margin: 0 0 8px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.legal-toc p { margin: 0 0 6px; font-size: 0.82rem; font-weight: var(--weight-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.legal-toc ol { margin: 0; padding-left: 1.2em; columns: 2 220px; column-gap: 28px; }
.legal-toc li { margin: 3px 0; break-inside: avoid; }
.legal-table-wrap { margin: 12px 0 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; overflow-wrap: normal; }
.legal-table caption { text-align: left; padding: 10px 14px; font-weight: var(--weight-strong); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.legal-table thead th { font-size: 0.78rem; font-weight: var(--weight-label); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.legal-table tbody tr:last-child > * { border-bottom: 0; }
.legal-table tbody th code { white-space: nowrap; }
.legal-none { margin: 12px 0; padding: 12px 16px; border-left: 3px solid var(--line-strong); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.legal-settings { margin: 30px 0 0; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); scroll-margin-top: calc(var(--header-h, 72px) + 16px); }
.legal-settings h2 { margin-top: 0; }
.legal-settings__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 16px 0 0; }
.legal-settings .form-status { flex: 1 1 260px; }

/* Small screens: each table row becomes a labelled block instead of scrolling sideways. */
@media (max-width: 640px) {
  .legal-table-wrap { overflow-x: visible; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal-table, .legal-table caption, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: auto; }
  .legal-table tbody tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .legal-table tbody tr:last-child { border-bottom: 0; }
  .legal-table tbody th, .legal-table td { border: 0; padding: 4px 14px; }
  .legal-table td[data-label]::before { content: attr(data-label) ": "; font-weight: var(--weight-strong); color: var(--muted); }
}