/* Shared skin for the legal pages (launch-ops §7.2).
   Separate from index.html's inline CSS on purpose: the landing is one
   art-directed page, these are three documents that must read the same
   as each other and stay readable for years. Nothing here is decorative
   beyond what makes a long text legible. */

@font-face {
  font-family: 'Play'; src: url('assets/Play-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Play'; src: url('assets/Play-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root {
  --bg: #04060a;
  --panel: #0a0f18;
  --line: #1a2438;
  --ink: #e2e9f5;
  --dim: #8090a8;
  --accent: #4d8dff;
  --warn: #ffc14d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.7 'Play', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: min(760px, 90vw); margin: 0 auto; }

/* Back to the landing, on every page: a document reached from a search
   engine is a dead end otherwise. */
.top {
  border-bottom: 1px solid var(--line);
  padding: 18px 0; margin-bottom: 44px;
}
.top a { color: var(--dim); text-decoration: none; font-size: 15px; }
.top a:hover { color: var(--ink); }

h1 { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.2; margin: 0 0 10px; }
h2 {
  font-size: 21px; margin: 44px 0 14px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: 0; padding-top: 0; }

/* The version line is load-bearing, not a byline: consent is recorded
   against a version, so "which edition did I agree to" has to have a
   visible answer. */
.meta { color: var(--dim); font-size: 15px; margin: 0 0 40px; }

p, li { margin: 0 0 14px; }
ol, ul { padding-left: 22px; }
li { margin-bottom: 10px; }
a { color: var(--accent); }

/* Numbered clauses so a ban reason can cite one. Without a citable
   number every ban turns into an argument about what the rules meant. */
.clauses { counter-reset: clause; list-style: none; padding-left: 0; }
.clauses > li { counter-increment: clause; position: relative; padding-left: 46px; }
.clauses > li::before {
  content: counter(clause) '.'; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums;
}
.clauses ol { list-style: none; counter-reset: sub; padding-left: 0; margin-top: 10px; }
.clauses ol > li { counter-increment: sub; position: relative; padding-left: 46px; }
.clauses ol > li::before {
  content: counter(clause) '.' counter(sub); position: absolute; left: 0; top: 0;
  color: var(--dim); font-variant-numeric: tabular-nums;
}

.note {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--panel); padding: 16px 20px; margin: 24px 0;
}
.note--warn { border-left-color: var(--warn); }
.note p:last-child { margin-bottom: 0; }

footer {
  border-top: 1px solid var(--line); margin-top: 64px; padding: 24px 0 60px;
  color: var(--dim); font-size: 15px;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
}
footer a { color: var(--dim); }