/* Privacy notice and Terms pages. Extends styles.css. */
.legal h2 { margin-top: 2.25rem; }
.legal ul, .legal ol { padding-left: 1.4rem; max-width: 65ch; }
.legal li { margin-bottom: 0.4rem; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.legal blockquote { margin: 1rem 0; padding: 0.9rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); max-width: 65ch; }
.legal blockquote p { margin: 0; }
.legal a { overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.legal table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.95rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); }
.legal thead th { background: var(--tint); font-weight: 700; }
.legal tbody tr:last-child td { border-bottom: 0; }
/* v1.0.1: narrow screens (max 37.5rem = 600px): each table row becomes a card; every cell is stacked full width and
   labelled with its column header (labels keyed by the table's existing aria-label; header text copied exactly). The
   visual header row is hidden but kept for assistive technology. No markup change. */
@media (max-width: 37.5rem) {
  .table-wrap { overflow-x: visible; }
  .legal table { min-width: 0; }
  .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
  .legal thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .legal tbody tr { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
  .legal tbody tr:last-child { border-bottom: 0; }
  .legal td { border-bottom: 0; padding: 0.3rem 0.85rem; overflow-wrap: anywhere; }
  .legal td::before { display: block; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
  .table-wrap[aria-label="Table: What, Why, Legal basis"] td:nth-child(1)::before { content: "What"; }
  .table-wrap[aria-label="Table: What, Why, Legal basis"] td:nth-child(2)::before { content: "Why"; }
  .table-wrap[aria-label="Table: What, Why, Legal basis"] td:nth-child(3)::before { content: "Legal basis"; }
  .table-wrap[aria-label="Table: Provider, Role, What they do"] td:nth-child(1)::before { content: "Provider"; }
  .table-wrap[aria-label="Table: Provider, Role, What they do"] td:nth-child(2)::before { content: "Role"; }
  .table-wrap[aria-label="Table: Provider, Role, What they do"] td:nth-child(3)::before { content: "What they do"; }
  .table-wrap[aria-label="Table: Data, How long"] td:nth-child(1)::before { content: "Data"; }
  .table-wrap[aria-label="Table: Data, How long"] td:nth-child(2)::before { content: "How long"; }
}