/* Shared styling for the legal documents. Loaded alongside app.css, which
   supplies the topbar and brand mark, so this file only has to dress the prose.

   Split out rather than repeated inline in each document: there are five of
   them now and a copied style block drifts the moment one page is edited.

   .todo marks a fact only the company can supply (an address, a state of
   formation). It is deliberately loud. A placeholder that looks like ordinary
   text is how a bracketed blank ends up published. */

.legal { max-width: 720px; margin: 0 auto; padding: 32px 32px 64px; }
.legal h1 { margin: 0 0 8px; }

.legal h2 {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cds-text-secondary);
  margin: 40px 0 12px;
}

.legal h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--cds-text-primary); font-size: 16px; line-height: 1.5; }
.legal ul { padding-left: 24px; margin: 8px 0 16px; }
.legal li { margin-bottom: 6px; }

.legal .sample {
  background: var(--cds-layer-01);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.32px;
  word-break: break-word;
  margin: 12px 0;
}

.legal .date { color: var(--cds-text-secondary); font-size: 12px; letter-spacing: 0.32px; }

/* the row of links between the legal documents */
.legal .docnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 24px 0 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cds-border-subtle);
  font-size: 14px;
}

.legal .docnav a[aria-current] { color: var(--cds-text-primary); text-decoration: none; }

.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--cds-border-subtle); vertical-align: top; }
.legal th { color: var(--cds-text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }

/* a fact the company still has to supply before this page is fit to publish */
.legal .todo {
  background: #8a3ffc;
  color: #ffffff;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.32px;
}

/* a clause that needs a lawyer's eye, not just a fact filled in */
.legal .review {
  border-left: 3px solid var(--cds-support-warning, #f1c21b);
  background: var(--cds-layer-01);
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
}

.legal .review strong { color: var(--cds-text-primary); }