/* ── Legal & support pages ─────────────────────────────────────────────
   A reading surface, not a landing page. One column, generous measure,
   real hierarchy — these are documents somebody has to be able to follow
   under stress, which is the only time most people open one.

   Every colour comes from variables.css, so these pages follow the same
   light/dark switch as the rest of the site. Nothing is styled inline:
   the CSP here has no `unsafe-inline` and `style-src-attr` falls back to
   `style-src`, so a `style="…"` attribute is silently dropped.
   ──────────────────────────────────────────────────────────────────── */

body.legal {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.legal-shell {
  max-width: 74ch;
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* ── masthead ───────────────────────────────────────────────────────── */

.legal-top {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 24px 0 0;
}

.legal-home {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
}

.legal-home:hover { color: var(--color-primary); }

/* The language switch. The Dutch text is the binding one and the pages say
   so; this is the control that makes that checkable rather than a claim. */
.legal-lang {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
}

.legal-lang a,
.legal-lang span {
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text-muted);
}

.legal-lang a:hover { background: var(--color-hover); color: var(--color-text); }

.legal-lang .on {
  background: var(--color-primary-20);
  color: var(--color-text);
  font-weight: 600;
}

/* ── document head ──────────────────────────────────────────────────── */

.legal-head { padding: 40px 0 8px; }

.legal-head h1 {
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}

.legal-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.legal-meta {
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 13.5px;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.legal-meta b { color: var(--color-text); font-weight: 600; }

/* ── body copy ──────────────────────────────────────────────────────── */

.legal-shell h2 {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.018em;
  margin: 52px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.legal-shell h3 {
  font-size: 16.5px;
  line-height: 1.35;
  margin: 30px 0 0;
  color: var(--color-text);
}

.legal-shell p { margin: 14px 0 0; }

.legal-shell ul,
.legal-shell ol { margin: 14px 0 0; padding-left: 22px; }

.legal-shell li { margin: 7px 0 0; }

.legal-shell a { color: var(--color-primary); }

.legal-shell strong { color: var(--color-text); font-weight: 650; }

.legal-muted { color: var(--color-text-muted); }

/* A defined term, and the thing a clause refers back to. */
.legal-term {
  font-family: var(--font-code);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--color-muted-20);
}

/* ── tables ─────────────────────────────────────────────────────────── */

/* Wide content scrolls inside its own box. A privacy table with five columns
   must never be the reason the whole page scrolls sideways on a phone. */
.legal-table-wrap {
  margin: 18px 0 0;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.legal-shell table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 480px;
}

.legal-shell th,
.legal-shell td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
}

.legal-shell th {
  background: var(--color-surface);
  font-weight: 650;
  color: var(--color-text);
  white-space: nowrap;
}

.legal-shell tbody tr:last-child td { border-bottom: 0; }

/* ── call-outs ──────────────────────────────────────────────────────── */

.legal-note {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 14.5px;
}

.legal-note p:first-child { margin-top: 0; }

/* Something the reader gives up, or something we do not do yet. These earn a
   different colour because burying them in body text is how a document becomes
   technically true and practically misleading. */
.legal-note.warn { border-left-color: var(--color-error); }

.legal-draft {
  margin: 24px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  background: var(--color-error-bg);
  color: var(--color-text);
  font-size: 14.5px;
}

.legal-todo {
  background: var(--color-error-bg);
  color: var(--color-error);
  padding: 0 4px;
  border-radius: 3px;
}

/* ── identity block ─────────────────────────────────────────────────── */

.legal-identity {
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.legal-identity dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  font-size: 14.5px;
}

.legal-identity dt { color: var(--color-text-muted); }
.legal-identity dd { margin: 0; }

@media (max-width: 480px) {
  .legal-identity dl { grid-template-columns: 1fr; gap: 2px; }
  .legal-identity dd { margin-bottom: 10px; }
}

/* ── index page ─────────────────────────────────────────────────────── */

.legal-index { margin: 28px 0 0; display: grid; gap: 12px; }

.legal-card {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
}

.legal-card:hover { border-color: var(--color-primary); }

.legal-card b { display: block; font-size: 16px; font-weight: 650; }

.legal-card span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ── foot ───────────────────────────────────────────────────────────── */

.legal-foot {
  margin: 64px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 13.5px;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.legal-foot a { color: var(--color-text-muted); }
.legal-foot a:hover { color: var(--color-primary); }

.legal-skip {
  position: absolute;
  left: -9999px;
}

.legal-skip:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
}