/* Shared public shell. Native controls and tokens come from their own layers. */
body { color:var(--tp-text-secondary); background:var(--tp-surface-canvas); line-height:1.6; }
.shell { width:min(100%,var(--page-max,1200px)); margin-inline:auto; padding-inline:var(--page-pad,clamp(16px,4vw,48px)); }
.topbar { position:sticky; top:0; z-index:20; background:var(--tp-surface-canvas); border-bottom:1px solid var(--tp-border-default); }
.topbar-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--tp-text-primary); font-weight:600; text-decoration:none; white-space:nowrap; }
.mark { display:none; }
nav.links { display:flex; align-items:center; flex-wrap:wrap; gap:clamp(18px,2vw,34px); font-size:var(--tp-font-size-sm); }
nav.links a { color:var(--tp-text-secondary); text-decoration:none; padding-block:10px; }
nav.links a:hover { color:var(--tp-accent); }
.topbar-actions { display:flex; align-items:center; gap:var(--tp-space-2); }
.skip-link { position:absolute; top:8px; left:12px; transform:translateY(-160%); z-index:100; padding:10px 12px; background:var(--tp-surface-input); color:var(--tp-text-primary); }
.skip-link:focus-visible { transform:none; }
main { padding-block:clamp(22px,4vw,56px); }
h1,h2,h3 { color:var(--tp-text-primary); line-height:1.2; letter-spacing:var(--tp-font-tracking-tight); scroll-margin-top:110px; }
h1,h2 { font-family:var(--tp-font-family-display); font-weight:400; }
h1 { font-size:clamp(2rem,3.4vw,2.8rem); }
p { line-height:1.75; }
code { padding:.12em .3em; background:var(--tp-surface-panel); color:var(--tp-text-primary); border-radius:var(--tp-radius-xs); overflow-wrap:anywhere; }
.muted { color:var(--tp-text-muted); }
.section { display:grid; gap:var(--tp-space-3); }
.btnrow { display:flex; flex-wrap:wrap; align-items:center; gap:var(--tp-space-2); }
.card { padding:var(--tp-space-4); border:1px solid var(--tp-border-default); border-radius:var(--tp-radius-md); background:var(--tp-surface-panel); }
.toc { padding:var(--tp-space-6); }
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; padding-block:28px; font-size:var(--tp-font-size-sm); }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; }
footer { border-top:1px solid var(--tp-border-default); }
footer a { color:var(--tp-text-secondary); }
@media(max-width:820px) { .topbar-inner { flex-wrap:wrap; min-height:64px; padding-block:12px; gap:12px; } nav.links { order:3; width:100%; gap:24px; } }
@media print { .topbar,.skip-link,footer { display:none; } main { padding:0; } }
