/*
 * Prose layout for the legal pages (/privacy, and anything like it later).
 *
 * Loaded AFTER site.css, which is where the tokens live. This file defines no
 * colours of its own: everything below reads --bg-*, --text-*, --accent and
 * --border so the page cannot drift from the app when the palette moves.
 *
 * Nothing here may be inlined into the HTML. The site CSP is
 * `style-src 'self' https://fonts.googleapis.com` with no 'unsafe-inline', so
 * a <style> block or a style="" attribute is silently dropped and the page
 * renders unstyled. Anything new goes in a stylesheet file, and gets its own
 * entry in public/_headers.
 */

/* ── Page frame ──────────────────────────────────────────────────────────── */

.legal-page { padding: 54px 0 80px; }

.legal-head { border-bottom: 1px solid var(--border); padding-bottom: 26px; margin-bottom: 34px; }
.legal-head h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin: 10px 0 0; }
.legal-head .updated {
  font-size: .8rem;
  color: var(--text-faint);
  margin-top: 12px;
}

/* Back to the site. Sits above the title so it is the first thing in the tab
   order after the skip link, rather than stranding a reader at the bottom. */
.legal-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; color: var(--text-dim);
  transition: color .15s;
}
.legal-back:hover { color: var(--accent); }
.legal-back svg { width: 14px; height: 14px; }

/* ── The short version ───────────────────────────────────────────────────── */

.tldr {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 42px;
}
.tldr h2 { font-size: 1rem; margin: 0 0 14px; }
.tldr ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.tldr li {
  position: relative;
  padding-left: 20px;
  font-size: .92rem;
  color: var(--text-dim);
  max-width: 72ch;
}
/* Gold as a marker, never as a fill. Same rule the rest of the site follows. */
.tldr li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.tldr li strong { color: var(--text); font-weight: 600; }

/* ── Sections ────────────────────────────────────────────────────────────── */

.legal-body { display: flex; flex-direction: column; gap: 40px; }

.legal-body section { scroll-margin-top: 24px; }
.legal-body h2 {
  font-size: 1.28rem;
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
/* The number is the section's address, used by the in-page links above. It is
   information, not ornament: the sections are referred to by number from the
   Discord app and from the intent-review submission. */
.legal-body h2 .n {
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .04em;
}
.legal-body h3 {
  font-size: .95rem;
  margin: 24px 0 8px;
  color: var(--text);
}
.legal-body p { max-width: 72ch; color: var(--text-dim); margin: 0 0 12px; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-body a { color: var(--accent); text-underline-offset: 2px; }

.legal-body ul { margin: 0 0 12px; padding-left: 20px; }
.legal-body li { color: var(--text-dim); margin-bottom: 7px; max-width: 70ch; }
.legal-body li:last-child { margin-bottom: 0; }
.legal-body li strong { color: var(--text); }

/* ── Data table ──────────────────────────────────────────────────────────── */

/* Its own scroll container: the page body must never scroll sideways on a
   phone because of one wide table. */
.data-scroll { overflow-x: auto; margin: 0 0 14px; }

.data-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .88rem;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-table th {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  white-space: nowrap;
}
.data-table td { color: var(--text-dim); }
.data-table td:first-child { color: var(--text); font-weight: 500; padding-right: 22px; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .keep { white-space: nowrap; color: var(--text-faint); }

/* ── Callout ─────────────────────────────────────────────────────────────── */

/* Used for the one thing people actually come to a policy like this to check:
   whether the bot reads their messages. */
.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  background: var(--bg-1);
  padding: 18px 20px;
  margin: 0 0 14px;
}
.callout p { margin-bottom: 10px; }
.callout p:last-child { margin-bottom: 0; }

/* ── Contact ─────────────────────────────────────────────────────────────── */

.contact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

@media (max-width: 640px) {
  .legal-page { padding: 34px 0 60px; }
  .tldr { padding: 18px 18px; }
}