/* Shared chrome for the legal pages. Kept in its own file because the privacy
   policy, the terms and the deletion page are three documents that must look
   like one publication, and a legal page that renders in a different typeface
   from the site it belongs to reads as an impostor. */

.legal-page {
  background: var(--bg-warm);
  min-height: 100svh;
}

.legal-head {
  padding-top: calc(var(--header-total) + var(--sp-8));
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--line);
}

.legal-head .wrap,
.legal-body { max-width: 860px; margin-inline: auto; }
.legal-title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  font-weight: 800;
  text-wrap: balance;
}
.legal-meta {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.legal-updated {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* A table of contents that a reader can actually use. Legal documents are
   long; burying the headings is how people conclude there is nothing to
   find and then ask us for it in email instead. */
.legal-toc {
  margin-top: var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  columns: 2;
  column-gap: var(--sp-7);
}
.legal-toc h2 {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-3);
  break-after: avoid;
}
.legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; break-inside: avoid; }
.legal-toc a {
  display: flex;
  gap: var(--sp-3);
  padding-block: 5px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-out);
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  padding-top: 2px;
}
.legal-toc a:hover { color: var(--indigo-deep); }

/* One left edge for the whole document. `margin-inline: auto` was inherited
   from .wrap, so narrowing max-width silently CENTRED the body against a
   left-aligned header, and the two halves of the page read as separate
   documents. The measure is applied to the prose, not to the container. */
.legal-body { padding-block: var(--sp-8) var(--sp-10); }
.legal-body > p,
.legal-body > ul,
.legal-body > ol,
.legal-body > h2,
.legal-body > h3,
.legal-body > .legal-callout { max-width: 68ch; }
.legal-body h2 {
  font-size: 1.25rem;
  letter-spacing: var(--tracking-tight);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  scroll-margin-top: calc(var(--header-total) + var(--sp-4));
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-size: 1rem;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.01em;
}
.legal-body p { margin-bottom: var(--sp-4); color: var(--ink-soft); line-height: var(--lh-loose); }
.legal-body ul, .legal-body ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; color: var(--ink-soft); }
.legal-body li { margin-bottom: var(--sp-2); line-height: var(--lh-loose); }
.legal-body li::marker { color: var(--ink-faint); }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a {
  color: var(--indigo-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-body a:hover { color: var(--indigo); }

/* Tables carry the processor list and the rights matrix. Hairlines under
   every row of a long document is the lazy default; these are short. */
.legal-table-wrap { overflow-x: auto; margin-bottom: var(--sp-5); }
.legal-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.legal-table th, .legal-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-table thead th {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-faint);
  font-weight: 700;
  border-bottom-color: var(--line-strong);
}
.legal-table td { color: var(--ink-soft); }
.legal-table td strong { color: var(--ink); }

/* The one thing a reader must not miss on a legal page. */
.legal-callout {
  margin: var(--sp-5) 0;
  padding: var(--sp-5);
  border-left: 3px solid var(--indigo);
  background: var(--indigo-tint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.legal-callout p { margin: 0; color: var(--ink); }
.legal-callout p + p { margin-top: var(--sp-3); }

.legal-foot {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-6) var(--sp-9);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.legal-foot a { color: var(--indigo-deep); text-decoration: underline; text-underline-offset: 2px; }

.legal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.legal-card {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.legal-card h3 { margin: 0 0 var(--sp-2); font-size: 1rem; letter-spacing: -0.01em; }
.legal-card p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-loose); }

@media (max-width: 640px) {
  .legal-toc { columns: 1; }
  .legal-body { font-size: 1rem; }
}

/* ── Legal facts the operator still has to fill in ──────────────────────
   Every placeholder carries data-legal-todo and is painted so it cannot be
   missed in a preview. scripts/check-legal.mjs refuses to let a build ship
   while any remain. */
[data-legal-todo] {
  background: color-mix(in srgb, var(--amber, #F4CB3D) 45%, transparent);
  border-radius: 4px;
  padding: 0 .25em;
  color: var(--ink);
  font-weight: 600;
}

/* ── The legal-request form ────────────────────────────────────────────── */
.legal-form select,
.legal-form textarea {
  width: 100%;
  padding: .8125rem 1rem;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.legal-form textarea { resize: vertical; min-height: 7.5rem; }
.legal-form fieldset { border: 0; margin: 0; padding: 0; }
.legal-form legend { font-weight: 600; color: var(--ink); margin-bottom: var(--sp-2); }
.legal-form .field-hint { font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--sp-1); }
.legal-form [hidden] { display: none !important; }
.legal-contacts { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-bottom: var(--sp-6); }
.legal-contacts .legal-card p + p { margin-top: var(--sp-2); }

/* The tables scroll sideways on a phone, so their wrappers take keyboard
   focus (WCAG 2.1.1). Show where focus is. */
.legal-table-wrap:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; border-radius: 6px; }