/* ============================================================
   legal/ — the shared shell for every hosted policy.
   Loaded after shared/base.css by /legal/<app>/privacy/.

   It deliberately overrides NO --brand-* token. A policy is the
   site's own document, not a product ad, so all five inherit the
   base palette and read as one set. It is also deliberately not
   personal.css: tuning the homepage must never restyle a legal page.
   ============================================================ */

/* A legal page is prose. Same measure as the logbook notes. */
.legal .container { max-width: var(--maxw-prose); }
.legal { padding-top: clamp(3.5rem, 11vh, 7rem); }

.legal .back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--text-2); font-size: var(--fs-sm); margin-bottom: 2rem;
}
.legal .back:hover { color: var(--text-1); }

.legal__title { font-size: clamp(2rem, 4vw + 0.5rem, 3rem); margin-bottom: 0.9rem; }
.legal .dateline {
  font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--text-3);
  letter-spacing: 0.08em; margin-bottom: 2rem;
}

/* The plain-language precis. Every claim in it restates a section below.
   Selected as `.legal p.legal__summary`, not `.legal__summary`: `.legal p`
   below is more specific than a lone class, so it would win on colour,
   line-height and margin no matter 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.05rem, 0.8vw + 0.95rem, 1.25rem);
  line-height: 1.55; 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.1rem, 3vw, 1.6rem);
  margin-bottom: 3rem;
}

.legal h2 {
  font-size: var(--fs-h3); color: var(--brand-accent);
  margin: 2.6rem 0 0.8rem;
}
.legal p { color: var(--text-2); line-height: 1.65; margin-bottom: 1rem; }
.legal p b { color: var(--text-1); font-weight: 500; }
.legal a { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---- 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 — which is the correct fallback for a legal document. */
.lang { display: none; gap: 0.5rem; margin-bottom: 2.5rem; }
.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);
}
.lang__btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* 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: 4rem; padding-top: 3rem; border-top: 1px solid var(--hairline); }
.has-lang-toggle .legal__doc + .legal__doc { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- print ----
   A policy is the one page here anyone saves or archives, and the screen palette
   is near-white text on near-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, and with JS off both do, which is the right fallback for a legal
   document. */
@media print {
  html, body { background: #fff !important; color: #111 !important; }
  .halo, .lang, .back, .footer, .skip-link { display: none !important; }

  .legal { padding-top: 0; }
  .legal .eyebrow, .legal__title, .legal h2, .legal p b { color: #111 !important; }
  .legal p, .legal .dateline { color: #222 !important; }
  .legal a { 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 + .legal__doc { border-top-color: #bbb; }
}