/*
  The terms pages, and the owner's accept screen.

  A contract is read, not scanned, so this file's whole job is a measure narrow
  enough to read and a vertical rhythm that survives ten headings. Everything
  else comes from app.css.
*/

.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.legal__head { margin-bottom: 2rem; }

.legal__head h1 {
  font-size: var(--step-3);
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
}

.legal__switch {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.legal__switch a {
  padding: 0.5rem 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.legal__switch a:hover { color: var(--ink); }

.legal__switch a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

/* --- The document itself -------------------------------------------------- */

.legal__body { line-height: 1.7; }

.legal__body h2 {
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  margin: 2.25rem 0 0.75rem;
}

.legal__body p,
.legal__body ul { margin: 0 0 1rem; }

.legal__body ul { padding-left: 1.25rem; }
.legal__body li { margin-bottom: 0.35rem; }

.legal__body em { font-style: normal; font-weight: 700; }

/*
  The draft warning.

  Amber rather than red, for the same reason the impersonation bar is: nothing
  has gone wrong, but something is true that must not be forgotten. It is the
  first thing on the page on purpose — a reader who takes these terms at face
  value is the failure this notice exists to prevent.
*/
.legal-draft {
  border: 1px solid rgb(217 119 6 / 45%);
  background: rgb(217 119 6 / 8%);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin: 0 0 1.5rem;
  font-size: var(--step--1);
  line-height: 1.6;
}

.legal-meta {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

/* --- Version history ------------------------------------------------------ */

.legal__history {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.legal__history h2 { font-size: var(--step-0); margin: 0 0 0.75rem; }
.legal__history ul { list-style: none; padding: 0; margin: 0; }
.legal__history li { margin-bottom: 0.4rem; font-size: var(--step--1); }
.legal__history .muted { margin-left: 0.5rem; }

/* --- The owner's accept screen -------------------------------------------- */

/*
  The document scrolls inside its own box rather than the page.

  Not to force anyone to scroll it — that is theatre, and the tick-box is the
  consent either way. It is so the accept control stays on screen beside the
  text: an owner who has to scroll past eleven sections to find the button reads
  none of them the second time.
*/
.legal__body--scroll {
  max-height: 26rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  background: var(--surface);
}

.legal__accept {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.legal__accept .btn { margin-top: 1rem; }
.legal__accept .muted { margin: 1rem 0 0; font-size: var(--step--1); }

@media (max-width: 599px) {
  .legal { padding: 1.25rem 0 3rem; }
  .legal__body--scroll { max-height: 18rem; padding: 1rem; }
}