/* ==========================================================================
   Splitscreen — legal documents (/terms, /privacy)
   ==========================================================================

   Loaded AFTER site.css, which supplies every token, the reset, the type
   scale, the nav and the footer. Nothing here redefines a token — this file
   is only the long-form reading surface that the marketing page never needed.

   House style still applies: flat, two-tone, hairline rules, no glow. What is
   added here is a reading column, a hung mono section index, and a sticky
   contents rail — print-page habits, because a legal document is read the way
   a document is read, not the way a landing page is scanned.

   One rule that is not negotiable: **no .reveal on legal text.** On the
   marketing page an element that starts at opacity 0 and is lifted by an
   IntersectionObserver is a flourish. Here it would mean that a reader with a
   broken script sees a blank contract. Everything below is visible on paint.
   ========================================================================== */

/* ---------- shell ---------- */

/* Narrower than the marketing shell. A contract read at 1240px is a contract
   nobody finishes; the column below lands at roughly 74 characters. */
.legal {
  --legal-col: 74ch;
  padding: clamp(2.6rem, 6vh, 4.5rem) 0 clamp(4.5rem, 10vh, 7rem);
}

.legal__grid {
  display: grid;
  gap: clamp(2.4rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 1040px) {
  .legal__grid {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
}

/* ---------- masthead ---------- */

.legal__head {
  max-width: 46ch;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}

.legal__head h1 { margin-bottom: 1.1rem; }
.legal__head .lede { max-width: 42ch; }

/* Effective date, entity, jurisdiction. Mono, because these are the fields a
   reader checks rather than reads — and a monospace row reads as a stamp. */
.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 1.8rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-4);
}
.legal__meta b {
  display: block;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--bone-2);
  margin-top: 0.25rem;
}

/* ---------- contents rail ---------- */

.toc {
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (min-width: 1040px) {
  .toc {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-hard) transparent;
  }
}

.toc h2 {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--bone-4);
  margin-bottom: 1rem;
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  border-left: 1px solid var(--line);
}

.toc li { counter-increment: toc; }

.toc a {
  display: flex;
  gap: 0.7em;
  padding: 0.42rem 0 0.42rem 0.9rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--bone-3);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.7em;
  letter-spacing: 0.08em;
  color: var(--bone-4);
  flex: none;
  padding-top: 0.25em;
}
.toc a:hover { color: var(--bone); border-left-color: var(--line-hard); }

/* Set by the scrollspy in the page. Progressive enhancement only — with the
   script dead the rail is still a working list of links. */
.toc a.is-here {
  color: var(--bone);
  border-left-color: var(--c, var(--p1));
}
.toc a.is-here::before { color: var(--c, var(--p1)); }

/* On narrow screens the rail becomes a plain block above the text, which is
   where a contents list belongs on a phone anyway. */
@media (max-width: 1039px) {
  .toc {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
  }
  .toc ol {
    columns: 2;
    column-gap: 1.4rem;
    border-left: 0;
  }
  .toc a { padding-left: 0; border-left: 0; }
  .toc a:hover { border-left: 0; }
  .toc a.is-here { border-left: 0; }
}

/* ---------- the reading column ---------- */

.doc {
  max-width: var(--legal-col);
  font-size: 0.95rem;
}

.doc > section {
  padding-top: clamp(2.4rem, 5vw, 3.4rem);
  scroll-margin-top: 5.5rem;
}
.doc > section + section { border-top: 1px solid var(--line-soft); }
.doc > section:first-child { padding-top: 0; }

/* Section heads carry a mono index in the margin on wide screens, matching
   .sec__no on the marketing page — but horizontal, since these run in a list
   rather than one to a screen. */
.doc h2 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -0.022em;
  margin-bottom: 1.2rem;
  position: relative;
}
.doc h2 .n {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--bone-4);
  margin-bottom: 0.7rem;
}
@media (min-width: 1360px) {
  .doc h2 .n {
    position: absolute;
    top: 0.45rem;
    left: -4.6rem;
    margin: 0;
    text-align: right;
    width: 3.4rem;
  }
}

.doc h3 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--bone);
  margin: 1.9rem 0 0.6rem;
}

.doc p { color: var(--bone-2); }
.doc strong { color: var(--bone); font-weight: 600; }
.doc a:not(.btn) {
  color: var(--p1-t);
  border-bottom: 1px solid rgba(147, 166, 255, 0.35);
  transition: border-color 0.25s var(--ease);
}
.doc a:not(.btn):hover { border-bottom-color: currentColor; }

/* Lists take the room__list treatment: a hairline dash rather than a bullet,
   so a long enumeration of obligations still reads as prose. */
.doc ul, .doc ol {
  margin: 0 0 1.05em;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.doc li { padding-left: 1.5rem; position: relative; color: var(--bone-2); }
.doc ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.7rem;
  height: 1px;
  background: var(--line-hard);
}
.doc ol { counter-reset: sub; }
.doc ol > li { counter-increment: sub; }
.doc ol > li::before {
  content: '(' counter(sub, lower-alpha) ')';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: var(--bone-4);
}

/* ---------- the summary panel ---------- */

.tldr {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  margin-bottom: 0.4rem;
}
.tldr h2 {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-bottom: 1.1rem;
}
.tldr ul { margin-bottom: 0; }
.tldr li { font-size: 0.9rem; }
.tldr .fine {
  margin: 1.2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.82rem;
  color: var(--bone-4);
}

/* ---------- callout ---------- */

/* A left rule in a player colour and nothing else. On black a 2px vermilion
   edge is already the loudest thing on the page; a filled box would shout. */
.note {
  --c: var(--p1);
  border-left: 2px solid var(--c);
  background: var(--panel);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
}
.note--p2 { --c: var(--p2); }
.note--p3 { --c: var(--p3); }
.note h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--c);
}
.note p, .note li { font-size: 0.9rem; }
.note > :last-child { margin-bottom: 0; }

/* ---------- the data table ---------- */

/* What we hold, why, and for how long. A table because three parallel facts
   about twelve categories is a table, and prose would bury it. It scrolls
   inside its own box rather than pushing the page sideways. */
.tbl-wrap {
  margin: 1.5rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

/* The prose column is capped at 74ch, which is right for sentences and much
   too narrow for four columns — it squeezes "How long" into five lines. Above
   1240px the grid column is ~150px wider than the text sitting in it, so the
   table alone reclaims part of that. Gated at 1240px because below it the
   column is already narrower than 74ch and there is no slack to borrow. */
@media (min-width: 1240px) {
  .tbl-wrap { width: calc(100% + 6rem); }
}
.tbl {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.84rem;
  line-height: 1.5;
}
.tbl th, .tbl td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.tbl thead th {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-4);
  background: var(--band);
  border-bottom-color: var(--line);
  white-space: nowrap;
}
.tbl tbody th {
  font-weight: 600;
  color: var(--bone);
  width: 12rem;
}
.tbl td { color: var(--bone-3); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td, .tbl tbody tr:hover th { background: var(--panel); }

/* ---------- closing block ---------- */

.legal__end {
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  padding-top: clamp(1.8rem, 4vw, 2.4rem);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
}
.legal__end p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--bone-4);
  max-width: 40ch;
}

/* ---------- print ---------- */

/* Somebody will print this, or save it to PDF before deleting their account.
   Give them a document rather than a screenshot of a dark website. */
@media print {
  body::after, .top, .foot, .skip, .toc, .legal__end { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .legal { padding: 0; }
  .doc, .legal__head { max-width: none; }
  .doc h2, .doc h3, .legal__head h1 { color: #000; }
  .doc p, .doc li, .legal__head .lede { color: #111; }
  .doc > section { page-break-inside: avoid; border-top: 1px solid #ccc; }
  .note, .tldr { border: 1px solid #999; background: none; }
  .doc a:not(.btn) { color: #000; border-bottom: 0; }
  .doc a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #555; }
  .tbl-wrap { overflow: visible; }
  .tbl { min-width: 0; }
}