/* ============================================================
   privacy.css — WorkSet Apply · Privacy & Data-Protection Notice
   A layered legal document: a plain-language summary sits above the
   formal text, a sticky numbered contents rail carries the reader.
   Built entirely on design-tokens.css so it moves with the brand
   and supports light mode automatically.
   ============================================================ */

.legal-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6); }

/* ── Draft-for-review banner ─────────────────────────────── */
.legal-draft {
  display: flex; gap: var(--s-3); align-items: flex-start;
  margin: var(--s-8) auto 0; padding: var(--s-4) var(--s-5);
  background: var(--warning-soft); border: 1px solid var(--warning);
  border-radius: var(--r-md); font-size: var(--t-sm);
  color: var(--text-secondary); line-height: 1.55;
}
.legal-draft strong { color: var(--warning); }
.legal-draft .ico { font-size: var(--t-md); line-height: 1; flex: none; }

/* ── Header ──────────────────────────────────────────────── */
.legal-head { padding: var(--s-12) 0 var(--s-6); }
.legal-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.legal-title {
  font-size: clamp(var(--t-3xl), 6vw, var(--t-4xl)); font-weight: 800;
  line-height: 1.03; letter-spacing: -0.02em; margin: var(--s-3) 0 var(--s-5);
}
.legal-lede { font-size: var(--t-md); color: var(--text-secondary); max-width: 58ch; line-height: 1.6; }
.legal-meta {
  margin-top: var(--s-6); display: flex; gap: var(--s-6) var(--s-8); flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--text-tertiary);
}
.legal-meta b { color: var(--text-secondary); font-weight: 600; }

/* ── At-a-glance (the signature layer) ───────────────────── */
.glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--s-4); margin-top: var(--s-8);
}
.glance-card {
  background: var(--bg-glass); border: 1px solid var(--border-default);
  border-radius: var(--r-md); padding: var(--s-5);
}
.glance-card h3 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--accent); font-weight: 600; margin-bottom: var(--s-2);
}
.glance-card p { font-size: var(--t-sm); color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* ── Body: contents rail + reading column ────────────────── */
.legal-body {
  display: grid; grid-template-columns: 245px minmax(0, 1fr);
  gap: var(--s-12); margin-top: var(--s-16); align-items: start;
}
.toc { position: sticky; top: var(--s-8); }
.toc-title {
  font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-tertiary); margin-bottom: var(--s-3);
}
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.toc a {
  display: flex; gap: var(--s-3); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); border-left: 2px solid transparent;
  color: var(--text-secondary); font-size: var(--t-sm); line-height: 1.35;
  text-decoration: none; transition: color var(--d-fast), background var(--d-fast);
}
.toc a .n { font-family: var(--font-mono); color: var(--text-tertiary); flex: none; }
.toc a:hover { color: var(--text-primary); background: var(--bg-glass); }
.toc a.active { color: var(--accent); background: var(--accent-soft); border-left-color: var(--accent); }
.toc a.active .n { color: var(--accent); }

/* ── Reading column ──────────────────────────────────────── */
.legal-content { max-width: 68ch; }
.legal-section { padding-top: var(--s-12); scroll-margin-top: var(--s-8); }
.legal-section:first-child { padding-top: 0; }
.legal-section > h2 {
  display: flex; gap: var(--s-4); align-items: baseline;
  font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--s-5);
}
.legal-section > h2 .n { font-family: var(--font-mono); font-size: var(--t-lg); color: var(--accent); flex: none; }
.legal-content h3 { font-size: var(--t-md); font-weight: 600; color: var(--text-primary); margin: var(--s-6) 0 var(--s-3); }
.legal-content p { color: var(--text-secondary); font-size: var(--t-base); line-height: 1.7; margin: 0 0 var(--s-4); }
.legal-content ul { margin: 0 0 var(--s-4); padding-left: var(--s-5); color: var(--text-secondary); line-height: 1.7; }
.legal-content li { margin-bottom: var(--s-2); }
.legal-content strong { color: var(--text-primary); font-weight: 600; }
.legal-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── "In short" plain-language callout ───────────────────── */
.inshort {
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5);
}
.inshort .lbl {
  font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--accent);
}
.inshort p { color: var(--text-primary); font-size: var(--t-sm); line-height: 1.6; margin: var(--s-1) 0 0; }

/* ── Placeholder the reviewing lawyer fills in ───────────── */
.fill { color: var(--warning); border-bottom: 1px dashed var(--warning); padding: 0 2px; white-space: nowrap; }

/* ── Legal-basis / processor tables ──────────────────────── */
.table-wrap { overflow-x: auto; margin-bottom: var(--s-5); border: 1px solid var(--border-default); border-radius: var(--r-md); }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 520px; }
.legal-table th, .legal-table td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-subtle); vertical-align: top; line-height: 1.5; }
.legal-table th { color: var(--text-tertiary); text-transform: uppercase; font-size: var(--t-xs); letter-spacing: 0.06em; font-weight: 600; }
.legal-table td { color: var(--text-secondary); }
.legal-table tr:last-child td { border-bottom: none; }
.legal-table .basis { color: var(--accent); font-weight: 500; white-space: nowrap; }

/* ── Rights grid ─────────────────────────────────────────── */
.rights { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.right-card { border: 1px solid var(--border-default); border-radius: var(--r-md); padding: var(--s-4); }
.right-card h4 { font-size: var(--t-sm); color: var(--text-primary); margin: 0 0 var(--s-1); }
.right-card p { font-size: var(--t-xs); color: var(--text-tertiary); margin: 0; line-height: 1.5; }

/* ── Back-to-top + footer spacing ────────────────────────── */
.legal-end { margin: var(--s-16) 0 var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--border-subtle); font-size: var(--t-sm); color: var(--text-tertiary); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .legal-body { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .toc { position: static; order: -1; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: var(--s-4); }
  .toc ol { max-height: 42vh; overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .toc a { transition: none; }
  html { scroll-behavior: auto; }
}