/* Terms, returns, privacy.
 *
 * One rule governs this sheet: these pages exist to be *read*, not to be
 * scrolled past. Most policy pages are set at the width of their container,
 * which on this layout is 1200px — about 160 characters a line, roughly
 * double the point at which the eye stops finding the next line reliably. So
 * the column is capped at the body measure and the headings are given enough
 * air to work as waypoints, because the way someone actually uses a returns
 * policy is to scan for the one heading that matches their problem.
 *
 * No colour of its own, no cards, no boxes. Every value is a token.
 */

.legal {
  /* `--measure` is in ch, so this tracks the body face rather than a pixel
     guess that would drift if the type changed. */
  max-width: var(--measure);
  margin: 0 auto;
}

.legal h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2xs);
}

/* Section headings carry the scanning weight, so they get a visible step
   above them and sit tight to the paragraph they introduce. `h2 + p` margins
   collapse against this, hence the asymmetry. */
.legal h2 {
  font-size: var(--text-lg);
  margin: var(--space-xl) 0 var(--space-xs);
}

.legal p,
.legal li {
  color: var(--ink-2);
  line-height: 1.65;
}

.legal p { margin: 0 0 var(--space-md); }

.legal ul {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

.legal li { margin-bottom: var(--space-xs); }

/* `<strong>` inside body copy goes back to full ink — a bolded run in the
   secondary grey reads as a different kind of emphasis than it is. */
.legal strong { color: var(--ink); }

.legal__updated {
  margin: 0 0 var(--space-xl);
  color: var(--ink-3);
  font-size: var(--text-sm);
}

/* A gap in the policy, shown rather than hidden.
 *
 * These three pages each have a branch that fires when `BRAND.contactEmail`
 * is empty, and the whole point of that branch is that nobody — owner or
 * customer — can read the page and not notice. Styled as the error it is:
 * the danger colour on its own tinted surface, with a rule down the side, so
 * it does not read as a tip. It should look wrong, because it is.
 */
.legal__todo {
  margin: 0 0 var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--danger-soft);
  color: var(--danger);
}

.legal__todo strong { color: var(--danger); }

/* The order confirmation. The reference is the one thing on the page a
   customer may need to write down, so it is given its own weight rather than
   being a sentence in a paragraph. */
.order-ref {
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  font-size: var(--text-md);
}
.order-ref strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  /* Tabular, so a number is never kerned into something ambiguous when read
     aloud or copied. */
  font-variant-numeric: tabular-nums;
}

.order-lines { padding-left: var(--space-md); }
.order-total { font-variant-numeric: tabular-nums; }
.order-note { color: var(--ink-3); font-size: var(--text-sm); }

/* ---- Rate table ------------------------------------------------------------
   One table on one page — the letter bands on /shipping. Written as a real
   `<table>` with `<th scope>` rather than a styled grid, because it IS tabular
   data: a screen reader reading "Large letter, 235 × 165 × 10mm, $4.90" needs
   the row and column headings to come with the cell, and a grid of divs cannot
   supply them.

   Scrolls sideways inside its own box on a narrow screen rather than forcing
   the page to. Three columns of dimensions will not fit a phone, and a table
   that widens the document gives every paragraph on the page a horizontal
   scrollbar. */
.legal__table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: var(--space-md) 0 var(--space-lg);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.legal__table caption {
  margin-bottom: var(--space-xs);
  text-align: left;
  font-weight: 600;
  color: var(--ink-3);
}

.legal__table th,
.legal__table td {
  padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.legal__table thead th {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.legal__table tbody th {
  font-weight: 600;
  color: var(--ink);
}

/* The rate column: tabular figures so the dollar amounts line up on the
   decimal point down the column, which is the only reason to put money in a
   table rather than a sentence. */
.legal__table td:last-child {
  font-variant-numeric: tabular-nums;
}