/* Simple public pages: legal (/terms, /privacy), phone pairing (/mobile) and
   the 404/500 pages. Layout only; components come from base.css. */

/* ---------- Long-form legal text ---------- */
.prose { max-width: calc(68ch + 2 * var(--s-4)); font-size: var(--text-lg); line-height: 1.7; }
.prose > * + * { margin-top: var(--s-4); }
.prose h1 { font-size: var(--text-4xl); }
.prose section { scroll-margin-top: 88px; }
.prose section h2 { font-size: var(--text-2xl); margin: var(--s-8) 0 var(--s-3); scroll-margin-top: 88px; }
.prose ul, .prose ol { padding-left: var(--s-6); }
.prose li + li { margin-top: var(--s-2); }
.prose p, .prose li { color: var(--fg-muted); }
.prose strong { color: var(--fg); }
.prose .banner { margin-top: var(--s-12); display: block; color: var(--fg); }
.toc h2 { font-size: var(--text-lg); margin-bottom: var(--s-2); }
.toc ol { margin: 0; columns: 2 16ch; column-gap: var(--s-8); }
.toc li { break-inside: avoid; }
.toc a { display: inline-block; padding: 2px 0; }

/* ---------- Phone pairing ---------- */
.pair { max-width: 720px; display: flex; flex-direction: column; gap: var(--s-6); }
.pair-back { align-self: flex-start; margin-left: calc(-1 * var(--s-3)); }
.pair-lead { font-size: var(--text-lg); max-width: 60ch; margin-top: calc(-1 * var(--s-3)); }
.pair-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.pair-steps > li { display: flex; gap: var(--s-4); align-items: flex-start; }
.pair-steps > li > div { flex: 1; min-width: 0; }
.pair-steps h2 { font-size: var(--text-xl); margin-bottom: var(--s-1); }
.pair-num {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: var(--line-w) solid var(--ink); box-shadow: var(--e-1);
  background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: var(--text-lg);
}
.pair-scan .pair-num { background: var(--pop); color: var(--on-pop); }
.pair-code {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center;
  padding: var(--s-5); border: var(--line-w) dashed var(--border-strong); border-radius: var(--r-lg);
}
.pair-qr { width: min(240px, 100%); border: var(--line-w) solid var(--ink); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e-2); }
.pair-qr svg { width: 100%; height: auto; }
.pair-text { font-size: var(--text-3xl); font-weight: 700; letter-spacing: .2em; color: var(--pop); margin-top: var(--s-2); overflow-wrap: anywhere; }
.pair-countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg); }
.pair-code.is-expired .pair-qr, .pair-code.is-expired .pair-text { opacity: .25; }
.pair-code.is-expired .pair-status { color: var(--warning); font-weight: 700; }
.pair-url { overflow-wrap: anywhere; margin-top: var(--s-2); }
.pair details summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; }
.pair-devices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pair-devices li { padding: var(--s-3) var(--s-4); }
.pair-devices strong { margin-right: var(--s-2); }

/* ---------- 404 / 500 ---------- */
.oops { max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding-top: var(--s-12); }
.oops-sticker {
  font-size: var(--text-5xl); font-weight: 800; line-height: 1; padding: var(--s-3) var(--s-6);
  background: var(--pop); color: var(--on-pop); border: var(--line-w) solid var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--e-3); transform: rotate(-4deg);
}
.oops p { color: var(--fg-muted); font-size: var(--text-lg); max-width: 44ch; }