/**
 * The published legal documents (SUP-12).
 *
 * Deliberately NOT the app theme. These pages are read in three places — a new
 * tab, an iframe inside the document viewer, and (via fetch) inside the
 * scroll-to-accept modal — and in all three they should read as a contract:
 * white paper, one measure, real margins.
 *
 * Self-contained, so a legal page loads no Bootstrap and no webfont. Inside a
 * framed modal that matters: the frame fetches everything again, and a webfont
 * request there means the reader watches the contract reflow. The system stack
 * renders as Segoe UI on Windows and San Francisco on a Mac — modern, already
 * on the machine, and what the reader's OS has optimised for small text.
 *
 * Sizes are in `em` below the body, so changing the one px value rescales the
 * whole document and nothing drifts out of proportion.
 *
 * `.rbpg-agreement` in rbpg-theme.css styles the same markup when it is pulled
 * into the signing modal. The two must stay in step — what you sign and what
 * you re-read afterwards are the same document.
 */

:root {
  --legal-ink: #1a1a1a;
  --legal-muted: #6b6b6b;
  --legal-rule: #d8d4cc;
}

html, body {
  background: #fff;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--legal-ink);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Measured in `ch` rather than rem, so the line length stays at a readable
   number of CHARACTERS whatever the font size is. At 14px sans this is the
   difference between a contract and a wall. The side padding is what stops the
   text hugging the edge inside a narrow iframe. */
.legal-doc {
  max-width: 82ch;
  margin: 0 auto;
  padding: 3rem 2.75rem 4.5rem;
}

.legal-doc h1 {
  font-size: 1.5em;
  font-weight: 650;
  line-height: 1.25;
  margin: 0 0 .4rem;
  letter-spacing: -.01em;
}

.legal-doc h2 {
  font-size: 1em;
  font-weight: 650;
  margin: 2em 0 .5em;
  letter-spacing: -.005em;
}

.legal-doc p {
  margin: 0 0 .9em;
  text-align: left;
}

/* Numbered clauses hang: the number sits in the left margin and the text of a
   wrapped line stays aligned under the text of the first. This is how a
   contract is set, and it is also what makes 141 clauses skimmable — without
   it every clause is an identical grey block. */
.legal-doc .clause,
.legal-doc .sub {
  padding-left: 3.4em;
  text-indent: -3.4em;
  margin-bottom: .75em;
}
.legal-doc .clause > .num,
.legal-doc .sub > .num,
.legal-doc h2 > .num {
  display: inline-block;
  width: 3.4em;
  text-indent: 0;
  font-variant-numeric: tabular-nums;
}
.legal-doc .sub { margin-left: 2.4em; }
.legal-doc h2 > .num { font-weight: 650; }

/* A clause heading should not be stranded at the foot of a column or page. */
.legal-doc h2 { break-after: avoid; page-break-after: avoid; }
.legal-doc .clause, .legal-doc .sub { break-inside: avoid; }

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25em 0 1.75em;
  font-size: .857em; /* 12px against a 14px body */
  line-height: 1.45;
}
.legal-doc th,
.legal-doc td {
  border: 1px solid var(--legal-rule);
  padding: .55em .7em;
  text-align: left;
  vertical-align: top;
}
.legal-doc th { font-weight: 650; background: #faf9f7; }

.legal-doc a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Title block: version and issuer, then a rule. This is the part a reader
   checks against what the platform says they signed. */
.legal-meta {
  font-size: .857em; /* 12px */
  color: var(--legal-muted);
  margin: 0 0 1.8em;
  padding-bottom: 1.4em;
  border-bottom: 1px solid var(--legal-rule);
  font-variant-numeric: tabular-nums;
}

.legal-note {
  font-size: .857em; /* 12px */
  line-height: 1.5;
  color: var(--legal-muted);
  margin: 0 0 1.8em;
  padding: .8em 1em;
  border-left: 3px solid var(--legal-rule);
  background: #faf9f7;
}

.legal-foot {
  margin: 3em 0 0;
  padding-top: 1.2em;
  border-top: 1px solid var(--legal-rule);
  font-size: .857em; /* 12px */
  color: var(--legal-muted);
}

/* On a phone the measure is the viewport, so only the padding needs easing.
   The size stays put — 14px is already comfortable and shrinking it further
   on the smallest screen is the wrong direction. */
@media (max-width: 40rem) {
  .legal-doc { padding: 1.75rem 1.25rem 3rem; }
}

@media print {
  .legal-doc { max-width: none; padding: 0; }
  .legal-note { display: none; }
}