/* The legal documents: privacy, imprint, terms.
 *
 * A reading layout rather than a game screen, so like creators.css it opts out
 * of the centred flex body in style.css. Kept separate from creators.css even
 * though the two share a shape: that file is a marketing page and will drift
 * toward looking like one, and these three must stay plain and legible for as
 * long as they exist.
 *
 * No new colours. Everything here is a token from style.css, so both themes
 * carry these pages for free. */

.legal-body {
  display: block;
  align-items: initial;
  padding: 0;
}

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 80px;
}

.legal-head { padding: 8px 0 22px; }
.legal-back { color: var(--muted); text-decoration: none; font-size: 14px; }
.legal-back:hover { color: var(--text); }

.legal h1 {
  /* Every character of the display face is the same width, so a two-word title
     has a width that only the font-size can change. "Terms of Service" at a
     fixed 2rem ran past the edge of a phone. */
  font-size: clamp(1.15rem, 5.4vw, 2rem);
  margin: 0 0 6px;
}
/* h1 in style.css clips a gradient to the text; on a document page it should
   just be a heading, so the gradient has to be undone. The face stays: these
   pages carry the site's wordmark type like every other page. */
.legal h1 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.legal-updated {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 30px;
}

/* Section headings are signposts in a document you scroll — display type, like
   every other heading on the site. The prose under them stays on the body face;
   see the note on --font-display in style.css. */
.legal h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  font-size: 1.05rem;
  margin: 34px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; }
.legal h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  font-size: 0.85rem;
  margin: 20px 0 6px;
}

.legal p,
.legal li {
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent); }

/* The body face is already a monospace, so a code span does not need one of
   its own — the chip around it is what marks it as code now. */
.legal code {
  font-family: var(--font-body);
  font-size: 0.9em;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* A table of what is stored and why. The honest version of a privacy policy is
   mostly this, so it gets to be a real table rather than prose. */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 14px;
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--border);
}
.legal-table th {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
/* The first column used to be `white-space: nowrap`, to keep each recipient's
   name on one line. In the arcade face "Email provider" is fourteen characters
   at an em apiece and the row no longer fits a 320px phone, so the name wraps
   now. Auto table layout still keeps it on one line wherever there is room. */
.legal-table td:first-child { color: var(--text); font-weight: 600; }

/* The operator's own details, which only exist once (imprint.html) and which
   nobody but the operator can fill in. Marked so an unfilled deploy is
   impossible to mistake for a filled one. */
.legal-operator {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 18px;
}
.legal-operator p { margin: 0 0 4px; }
.legal-todo {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 1px 7px;
}
.legal-warn {
  border: 1px solid var(--danger);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 22px;
}
.legal-warn p { margin: 0; }

.legal-foot {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 16px;
  font-size: 13px;
}
.legal-foot a { color: var(--muted); text-decoration: none; }
.legal-foot a:hover { color: var(--text); }