/* ============================================================
   dumbphone/privacy/ — tregua's privacy policy, and the shell of
   dumbphone/support/, which links this file rather than copying it: it is the
   same kind of page — back link, title, prose — so one stylesheet keeps the
   two from drifting. Retuning anything here restyles both pages: check both.

   Loaded AFTER shared/base.css and ../app.css, so it overrides NO token: the
   canvas, the signal orange, IBM Plex Mono for labels and IBM Plex Sans for
   prose all arrive from the landing. What is local here is only what a long
   document needs and a landing does not — a measure, leading, and a heading
   hierarchy that survives sixteen numbered sections twice over.

   Adapted from /legal/legal.css (the shell the other policies use) rather than
   linking it: that file lives at the repo root, and the only host that serves
   THIS file uploads dumbphone/ plus rewritten shared assets, nothing else
   (README -> The tregua card is hosted off-domain). Linking /legal/legal.css
   would ship a naked page on trytregua.app. Keep the two in mind together, but
   they are deliberately separate files.

   The landing is a page you scan; this is a page you read. Every number below
   was measured in a browser at 1440 / 390 / 320 px, not guessed.
   ============================================================ */

.legal { padding-top: clamp(2.25rem, 7vh, 4rem); }

/* ---- reading measure ----
   Set in characters, not pixels, so it tracks IBM Plex Sans's own width through
   every step of --fs-body's clamp instead of drifting with it. `.container` is
   border-box and carries its own inline padding, so the ch budget has to add
   it back.

   54ch, not 66: `ch` is the width of the "0" glyph, and in a proportional face
   an average lowercase run is far narrower than a digit — so a 66ch column
   measured 86 characters per line, well past the 60-75 a reader scans back
   through comfortably. 54ch measures 70 (median, counted per visual line at
   1440px). base.css's --maxw-prose, a flat 680px, measured 78 and does not
   track the face at all. Re-measure rather than re-guess if --fs-body or the
   family ever moves. */
.legal .container { max-width: calc(54ch + 2 * clamp(1.25rem, 5vw, 2.5rem)); }

/* ---- back to the landing ---- */
.legal .back {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 2.25rem;
  transition: color 0.2s;
}
.legal .back img { width: 24px; height: 24px; border-radius: 7px; }
.legal .back:hover { color: var(--text-1); }

/* ---- document head ----
   The title is .display, so app.css has already made it roman mono. Smaller
   than --fs-h1: a document title is a label for what follows, not a headline
   competing with the landing's hero. */
.legal__title { font-size: clamp(1.75rem, 2.6vw + 0.8rem, 2.4rem); margin-bottom: 0.75rem; }

/* --text-2, not the --text-3 the other four policies use for this line. Those
   inherit a documented contrast failure (AGENTS.md); this page starts clean and
   has no reason to import one. 5.9:1 on true black. */
.legal .dateline {
  font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--text-2);
  letter-spacing: 0.06em; margin-bottom: 2.25rem;
}

/* ---- the plain-language precis ----
   Every claim in it restates a section below. Selected as
   `.legal p.legal__summary`, not `.legal__summary`: `.legal p` further down is
   more specific than a lone class, so it would win on colour, leading and
   margin whatever the source order, and this box would render as ordinary body
   copy. Do not "simplify" the selector — here or in the print block, which
   repeats it for the same reason. */
.legal p.legal__summary {
  font-size: clamp(1.02rem, 0.7vw + 0.9rem, 1.15rem);
  line-height: 1.6; color: var(--text-1);
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--brand-accent);
  border-radius: var(--radius-card);
  padding: clamp(1.05rem, 3vw, 1.5rem);
  margin-bottom: 0;
}
.legal p.legal__summary strong { color: var(--text-1); font-weight: 600; }

/* ---- sections ----
   Sixteen of them, so the seam between two carries the hierarchy: a hairline
   plus real space, which is how the landing separates its own blocks. Cheaper
   than a second heading weight and it makes the numbering scannable by giving
   each number a band of its own. Each <section> also has an id (en-1 … es-16),
   so a specific clause can be linked; scroll-margin keeps a jumped-to heading
   clear of the viewport edge. */
.legal__doc section { padding-top: 2.4rem; scroll-margin-top: 1.5rem; }
.legal__doc section + section { margin-top: 2.4rem; border-top: 1px solid var(--hairline); }

/* Mono, accent, roman. The headings are the one place this document speaks in
   the launcher's voice — the same division app.css sets up for the landing:
   mono is the product talking, sans is prose. tabular-nums keeps "1." and "10."
   on the same rhythm, and the accent passes AA on black at 6.8:1. */
.legal h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-accent);
  margin-bottom: 0.85rem;
  text-wrap: balance;
}

/* ---- prose ----
   1.75 rather than base.css's 1.6: longer lines and a long read want more air
   between them, and on a true-black canvas tight leading reads as a block. */
.legal p { color: var(--text-2); line-height: 1.75; }
.legal p + p { margin-top: 1rem; }
.legal p strong, .legal li strong { color: var(--text-1); font-weight: 500; }
/* Scoped to .legal__doc, not .legal: every link INSIDE the policy is underlined,
   because in a legal document a link is part of the sentence and colour alone is
   not a reliable signal. The chrome around it — the back link — keeps base.css's
   bare treatment. */
.legal__doc a {
  color: var(--brand-accent);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: from-font;
}

/* Em-dash bullets in the accent — the same marker .split__col uses on the
   landing, here as a ::before so the markup stays the source's own <li>. The
   dash hangs in its own gutter and wrapped lines align under the text, not
   under the dash. */
.legal ul { margin: 0.9rem 0 0; }
.legal p + ul { margin-top: 0.9rem; }
.legal ul + p { margin-top: 1rem; }
.legal li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-2);
  line-height: 1.7;
}
.legal li + li { margin-top: 0.55rem; }
.legal li::before {
  content: "\2014";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono);
  color: var(--brand-accent);
}

/* ---- language toggle ----
   Hidden until the inline script flags itself in, so a no-JS visitor is never
   offered a control that cannot work. Without JS both languages simply render,
   one after the other — the correct fallback for a legal document. */
.lang { display: none; gap: 0.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.has-lang-toggle .lang { display: flex; }
.lang__btn {
  font: inherit; font-size: var(--fs-cap); font-family: var(--font-mono);
  letter-spacing: 0.06em;
  padding: 0.45rem 0.95rem;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.lang__btn:hover { color: var(--text-1); border-color: var(--brand-accent); }
.lang__btn.is-active {
  color: var(--brand-accent-ink);
  background: var(--brand-accent);
  border-color: var(--brand-accent);
}

/* The script hides a language with the `hidden` attribute; make sure no display
   rule above can out-specify it. */
[hidden] { display: none !important; }

/* Second language follows the first when there is no JS to hide it. */
.legal__doc + .legal__doc { margin-top: 4.5rem; padding-top: 3.5rem; border-top: 1px solid var(--hairline-strong); }
.has-lang-toggle .legal__doc + .legal__doc { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- narrow screens ----
   At 320px the container's own padding is already at the bottom of its clamp;
   what needs to give is the section rhythm, which otherwise spends a third of a
   short viewport on whitespace between two headings. */
@media (max-width: 400px) {
  .legal__doc section { padding-top: 1.9rem; }
  .legal__doc section + section { margin-top: 1.9rem; }
  .legal .back { margin-bottom: 1.75rem; }
}

/* ---- print ----
   A policy is the one page here anyone saves or archives, and the screen
   palette is near-white text on true black. Chrome and Safari drop backgrounds
   by default while still honouring the declared colour, so on paper this would
   come out blank. Force ink instead, and drop the chrome that means nothing
   there. The `hidden` attribute above is left alone: with JS on only the chosen
   language prints, with JS off both do, which is the right fallback. */
@media print {
  html, body { background: #fff !important; color: #111 !important; }
  .halo, .lang, .back, .footer, .skip-link { display: none !important; }

  .legal { padding-top: 0; }
  .legal .container { max-width: none; }
  .legal .eyebrow, .legal__title, .legal h2 { color: #111 !important; }
  .legal p, .legal li, .legal .dateline { color: #222 !important; }
  .legal p strong, .legal li strong { color: #111 !important; }
  .legal a { color: #111 !important; }
  .legal li::before { color: #111 !important; }

  .legal p.legal__summary {
    color: #111 !important;
    background: transparent !important;
    border: 1px solid #bbb !important;
    border-left: 3px solid #111 !important;
  }

  .legal__doc section + section,
  .legal__doc + .legal__doc { border-top-color: #bbb !important; }
  .legal__doc section { break-inside: avoid; }
}