/* bstack.cc pages: bpad's legal page as is (components/LegalPage.tsx and
   app/globals.css .legal), a paper sheet with 12 px corners on cream, DM Mono,
   ink text, muted dates. Only the colors change per tool, through tokens.css
   (copied from design/ at build; the hub keeps the default bstack accent). */
html, body { margin: 0; background: var(--sidebar-bg); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }

.wrap { max-width: 680px; margin: 0 auto; padding: 40px var(--pad-phone); }
@media (min-width: 768px) { .wrap { padding: 64px var(--pad-phone); } }

header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
header a { display: flex; }
nav { display: flex; gap: 16px; font-size: var(--fs-ui-sm); color: var(--muted); }
nav a, .foot a { text-decoration: none; }
nav a:hover, .foot a:hover { text-decoration: underline; }

.sheet {
  background: var(--editor-bg); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 32px 24px; color: var(--ink); font-size: var(--fs-ui-base); line-height: 1.7;
}
@media (min-width: 768px) { .sheet { padding: 48px; } }
.sheet h1 { font-size: 26px; font-weight: var(--fw-medium); letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.sheet .date { color: var(--muted); font-size: var(--fs-ui-sm); margin: 6px 0 28px; }
.sheet h2 { font-size: 16px; font-weight: var(--fw-medium); margin: 32px 0 8px; }
.sheet p { margin: 0 0 12px; }
.sheet .quiet { color: var(--muted); }
.sheet ul { margin: 0 0 12px; padding-left: 1.5em; }
.sheet a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.foot { margin-top: 24px; text-align: center; font-size: var(--fs-ui-xs); color: var(--muted); }
.foot a + a::before { content: "·"; margin: 0 8px; display: inline-block; }