/* legal.css — the public legal-document layer (/app/privacy, /app/terms).
   NotePort skin (light canvas, one teal accent). Loads AFTER tokens.css +
   noteport.css; tokens only — a hex literal in this file is a defect.
   These pages run under the /app CSP: no inline styles, ever. */

/* base body/link styling rides noteport.css (loads first); only the stronger body
   ink differs here. The old `html{scroll-behavior:smooth}` re-declaration is GONE on
   purpose — it re-broke noteport.css's prefers-reduced-motion override (a11y fix). */
body.np-legal { color: var(--np-text-strong); }

/* ── top bar ── */
.np-doc-topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--np-s3);
  padding: var(--np-s3) var(--np-s5);
  background: var(--np-paper); border-bottom: var(--np-border);
}
.np-doc-topbar .np-lockup--sm { text-decoration: none; }
/* W25: the lockup mark is a shared <img> asset now; noteport.css (untouchable) sizes
   only `.np-lockup--sm svg`, so the img mirrors those exact declarations here. */
.np-lockup--sm img { width: 24px; height: 24px; margin-right: 10px; flex: 0 0 auto; }
.np-doc-topbar .spacer { flex: 1; }
.np-doc-topbar a { font: 600 13px var(--np-font-body); color: var(--np-slate); }
.np-doc-topbar a:hover { color: var(--np-ink); text-decoration: none; }

/* ── document ── */
.np-doc { max-width: 760px; margin: 0 auto; padding: var(--np-s7) var(--np-s5) var(--np-s8); }
.np-doc-eyebrow {
  font: 700 11px var(--np-font-display); text-transform: uppercase; letter-spacing: .12em;
  color: var(--np-teal-deep); margin-bottom: var(--np-s3);
}
.np-doc h1 { margin: 0 0 10px; font: 800 34px/1.15 var(--np-font-display); letter-spacing: -.02em; color: var(--np-ink); }
.np-doc .updated { margin: 0 0 var(--np-s6); font: var(--np-small); color: var(--np-slate); }
.np-doc h2 { margin: var(--np-s6) 0 var(--np-s3); font: 700 21px/1.25 var(--np-font-display); letter-spacing: -.01em; color: var(--np-ink); scroll-margin-top: 80px; }
.np-doc h3 { margin: var(--np-s5) 0 var(--np-s2); font: 700 15.5px/1.3 var(--np-font-display); color: var(--np-ink); }
.np-doc p { margin: 0 0 var(--np-s4); }
.np-doc ul { margin: 0 0 var(--np-s4); padding-left: 22px; }
.np-doc li { margin: 0 0 9px; }
.np-doc strong { color: var(--np-ink); font-weight: 600; }
.np-doc .lead { font-size: 16.5px; }
.np-doc .callout {
  border: 1px solid var(--np-band-sub); background: var(--np-teal-tint);
  border-radius: var(--np-radius-card); padding: var(--np-s4) 18px; margin: 0 0 var(--np-s4);
}
.np-doc .legalese { font-size: 13.5px; line-height: 1.7; color: var(--np-slate); letter-spacing: .01em; }
.np-doc address {
  font-style: normal; line-height: 1.7;
  border-left: 2px solid var(--np-teal);
  padding: var(--np-s1) 0 var(--np-s1) var(--np-s4); margin: var(--np-s2) 0 0;
}

/* ── footer ── */
.np-doc-footer {
  border-top: var(--np-border);
  max-width: 760px; margin: 0 auto; padding: var(--np-s5) var(--np-s5) var(--np-s7);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  font: var(--np-small); color: var(--np-slate);
}
.np-doc-footer a { color: var(--np-slate); }
.np-doc-footer a:hover { color: var(--np-ink); text-decoration: none; }
.np-doc-footer .spacer { flex: 1; }

@media (max-width: 560px) {
  .np-doc { padding: var(--np-s6) var(--np-s4) var(--np-s7); }
  .np-doc h1 { font-size: 28px; }
}