/* Privacy notice, terms of use. Loads after site.css (the Map design system); no web fonts, no requests
   to other sites. Long text lives in .prose (site.css); this file adds the draft banner, the short-version
   panel, tables that stack on phones, and the dotted rules between sections. */

.legal { padding: 0 0 var(--space-8); }
.legal .updated { margin: 0; color: var(--ink-soft); font-weight: 700; }

/* The AI DRAFT banner stays until Jonathan approves the wording (see the comment on each page). */
.draft-banner {
  background: #fff1c4;
  color: var(--ink);
  border: var(--line);
  border-left-width: 10px;
  border-left-color: var(--gold-deep);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  padding: 0.8rem 1rem;
  margin: 0 0 var(--space-5);
  font-size: var(--step--1);
}
.draft-banner strong { font-weight: 800; }

.legal .short { margin: 0 0 var(--space-5); }
.legal .short h2 { font-size: 1.6rem; margin: 0 0 var(--space-2); }
.legal .short ul { margin: 0; }
.legal .short li + li { margin-top: 0.4em; }

/* Prose: links read as links, and sections are parted by a dotted trail like the game's aiming arc. */
.legal .prose { max-width: none; }
.legal .prose a { color: var(--lake); font-weight: 700; }
.legal .prose a:hover { color: var(--ink); }
.legal .prose h2 {
  font-size: clamp(1.7rem, 4.5vw, 2.2rem);
  margin: var(--space-7) 0 var(--space-3);
  padding-top: var(--space-5);
  border-top: 5px dotted rgba(42, 29, 18, 0.35);
}
.legal .prose h2:first-child { margin-top: 0; }
.legal .prose p, .legal .prose ul, .legal .prose ol { margin-top: 0; }
.legal .prose ul, .legal .prose ol { padding-left: 1.3em; }

/* Tables: a cream card with a dark outline; on phones each row becomes its own labelled block. */
.legal .table-wrap { margin: 0 0 var(--space-4); }
.legal .prose table { font-size: 1.02rem; border-radius: var(--radius-m); box-shadow: var(--shadow-s); }
.legal .prose th { background: var(--paper-deep); border-bottom: var(--line); }
.legal .prose tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 719px) {
  .legal .table-wrap { overflow: visible; }
  .legal .prose table, .legal .prose tbody, .legal .prose tr, .legal .prose td { display: block; width: 100%; }
  .legal .prose table { background: none; border: 0; box-shadow: none; }
  .legal .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal .prose tr {
    background: var(--paper); border: var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-s);
    padding: 0.35rem 0.9rem 0.5rem; margin: 0 0 var(--space-4);
  }
  .legal .prose td { border-bottom: 0; padding: 0.4em 0; }
  .legal .prose td::before {
    content: attr(data-label); display: block;
    font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
  }
}

.legal-foot {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: 5px dotted rgba(42, 29, 18, 0.35);
  font-weight: 700;
}
.legal-foot a { color: var(--lake); }