/*
 * Long-form reading, for privacy.html and terms.html.
 *
 * A separate file rather than more rules in styles.css: the app stylesheet is
 * for an application, all dense controls and tight vertical rhythm, and legal
 * text needs the opposite. Loaded only by the two pages that want it.
 *
 * The colours come from the tokens styles.css already defines, so these pages
 * follow the light and dark themes without redefining a single palette. That
 * also means they cannot drift: change a token there and this moves with it.
 */

.legalpage {
  background: var(--plane);
  color: var(--text-primary);
  font-family: var(--font);
  margin: 0;
  /* The app's grid background belongs to the app, not to a wall of prose. */
  background-image: none;
}

.legal {
  /* Roughly 70 characters at this size, which is the width a paragraph wants
   * to be read at. The app's own layout is far wider and would be punishing
   * for fifteen numbered sections. */
  max-width: 43rem;
  margin: 0 auto;
  padding: 32px 20px 96px;
  line-height: 1.65;
  font-size: 1rem;
}

.legal__nav {
  margin-bottom: 40px;
  font-size: 0.9rem;
}

.legal__nav a {
  color: var(--text-secondary);
  text-decoration: none;
}

.legal__nav a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.legal h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 8px;
  text-wrap: balance;
}

.legal__dates {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0 0 32px;
}

/* What moved since this was first published. A "last updated" date on its own
 * tells you something changed and leaves you to diff two documents you never
 * kept a copy of. */
.legal__change {
  display: inline-block;
  margin-top: 6px;
  color: var(--text-secondary);
}

.legal h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  /* Generous space above, little below: a heading should sit with the text it
   * introduces rather than floating between two blocks equally. */
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-wrap: balance;
}

.legal h3 {
  font-size: 1rem;
  margin: 28px 0 8px;
}

.legal p {
  margin: 0 0 16px;
}

.legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal li {
  margin-bottom: 8px;
}

.legal a {
  color: var(--series-1);
}

.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--grid);
  border-radius: 4px;
  padding: 1px 5px;
}

/* The opening summary. Sits above the first rule so it reads as part of the
 * title block rather than as section zero. */
.legal__summary {
  background: var(--wall-bg);
  border: 1px solid var(--wall-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 8px;
}

.legal__summary p {
  margin-bottom: 12px;
}

/* Pulled out of the flow because someone skimming for it should find it:
 * how to delete an account, and what the draft warning actually says. */
.legal__callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--series-1);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  padding: 18px 20px;
  margin: 0 0 20px;
}

.legal__callout--warn {
  border-left-color: var(--critical);
}

.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 0.9375rem;
}

.legal__table th,
.legal__table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.legal__table th {
  font-weight: 600;
  border-bottom-color: var(--axis);
}

/* A three-column table on a phone has to be allowed to scroll, or it drags
 * the whole page sideways with it. */
@media (max-width: 34rem) {
  .legal__table {
    display: block;
    overflow-x: auto;
    white-space: normal;
  }
}

.legal__foot {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}