/* ============================================================
   AIS GAMES — legal pages (privacy.html, games/<id>/privacy.html)
   Long-form text: numbered sections, lists, a table of what is kept.
   Requires: tokens.css, main.css — every value here is a token.
   ============================================================ */

.legal {
  width: var(--w-cards);
  margin-inline: auto;
  padding-block: var(--section-pad) var(--pad-section);
  color: var(--ink-dim);
  line-height: var(--lh-copy);
}
.legal > * { max-width: var(--w-narrow); }
.legal-meta {
  margin-bottom: var(--sp-7);
  font-size: var(--text-sm);
}
.legal h2 {
  margin: var(--sp-8) 0 var(--sp-3);
  color: var(--ink);
  font-size: var(--text-h3);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-display);
}
.legal h3 {
  margin: var(--sp-6) 0 var(--sp-2);
  color: var(--ink);
  font-size: var(--text-md);
}
.legal p + p,
.legal p + ul,
.legal ul + p { margin-top: var(--sp-3); }
.legal ul {
  margin: 0;
  padding-left: var(--list-indent);
}
.legal li + li { margin-top: var(--sp-2); }
.legal li::marker { color: var(--accent-text); }
.legal strong { color: var(--ink); }
/* Links inside running text keep a plain underline: in long-form copy they
   must read as links before anyone hovers them. */
.legal a { color: var(--accent-text); }
.legal code {
  font-size: var(--text-sm);
  color: var(--ink);
}

/* ---------- An app's own policy (games/<id>/privacy.html) ----------
   Written by scripts/build-pages.mjs from _policy.html. Its head is the game
   page's: a way back, the pill, the game's name. */
.policy-head .back-link {
  display: inline-block;
  margin-bottom: var(--sp-5);
}
.policy-head .card-eyebrow {
  margin-bottom: var(--sp-4);
  background: var(--scrim-page);
}
/* Who to write to, set apart from the running text */
.legal-box {
  margin-block: var(--sp-5);
  padding: var(--pad-card);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
/* A policy in two languages shows one; the switch is shown by js/legal.js,
   so without scripts both languages simply follow each other. */
.legal-langs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}
.legal-langs[hidden] { display: none; }
.legal-langs button {
  padding: var(--tag-pad-y) var(--tag-pad-x);
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) var(--tag-mix), var(--bg));
  color: var(--ink);
  font: inherit;
  font-weight: var(--w-ui);
  font-size: var(--text-chip);
  letter-spacing: var(--tracking-ui);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.legal-langs button:hover { background: color-mix(in srgb, var(--ink) var(--tag-mix-hover), var(--bg)); }
.legal-langs button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}
/* With the switch, the shown language starts right under it */
.js .legal-lang > :first-child { margin-top: 0; }