/* Reset, typography, shell layout, responsive drawer, print (ARCHITECTURE.md 3.2). Owner: WP0, later WP7. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs)/var(--lh) var(--font)}
h1,h2,h3,h4{line-height:1.25;margin:0 0 var(--sp-3)}
h1{font-size:1.75rem}
h2{font-size:1.3rem;margin-top:var(--sp-6)}
h3{font-size:1.08rem}
h4{font-size:1rem}
p,ul,ol,dl,figure{margin:0 0 var(--sp-3)}
ul,ol{padding-left:1.4em}
a{color:var(--accent)}
img,svg,video{max-width:100%}
code,kbd,pre,samp{font-family:var(--mono);font-size:.92em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0}
[hidden]{display:none!important}

.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:8px 12px;background:var(--surface);color:var(--ink);border:1px solid var(--accent);border-radius:var(--radius-sm)}
.skip:focus{left:8px}

/* Shell: fixed sidebar on wide screens */
#side{position:fixed;inset:0 auto 0 0;width:240px;display:flex;flex-direction:column;overflow-y:auto;background:var(--surface);border-right:1px solid var(--line);z-index:20}
#side .brand{display:block;padding:var(--sp-4);font-weight:700;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
#nav{flex:1;padding:var(--sp-2) 0}
#nav ul{list-style:none;margin:0;padding:0}
#nav a{display:flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:6px var(--sp-4);color:var(--ink);text-decoration:none;border-left:3px solid transparent;line-height:1.3}
#nav a:hover{background:var(--bg)}
#nav a[aria-current="page"]{border-left-color:var(--accent);background:var(--accent-soft);font-weight:600}
.nav-group-label{display:block;padding:var(--sp-3) var(--sp-4) var(--sp-1);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nav-group a{font-size:.93rem}
.nav-n{min-width:1.4em;color:var(--muted);font-variant-numeric:tabular-nums}
.side-foot{display:grid;gap:var(--sp-2);padding:var(--sp-4);border-top:1px solid var(--line)}
#countdown{font-size:.9rem}
#top{display:none}
main{margin-left:240px;padding:var(--sp-5) var(--sp-5) var(--sp-6);min-width:0}
main:focus{outline:none}
#view>*{max-width:1180px;margin-inline:auto}
.page,.page>*{min-width:0}
.scroll-x{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Under 900 px the sidebar is an off-canvas drawer (body.open) */
@media (max-width:900px){
 #top{display:flex;align-items:center;gap:var(--sp-3);position:sticky;top:0;z-index:10;padding:var(--sp-2) var(--sp-3);background:var(--surface);border-bottom:1px solid var(--line)}
 #crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
 #side{width:min(280px,85vw);transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s;box-shadow:var(--shadow)}
 body.open #side{transform:none;visibility:visible;transition:transform .2s ease}
 body.open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:15}
 main{margin-left:0;padding:var(--sp-4) var(--sp-3) var(--sp-6)}
 html{scroll-padding-top:64px} /* scrollIntoView and anchors clear the sticky header */
}

/* Motion: reduced motion and the "Pause motion" toggle (body.paused) stop CSS animation */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* Print: no shell, black on white, 11 pt, rows never split, checkboxes as empty squares */
@media print{
 #side,#top,.skip,.no-print{display:none!important}
 :root,[data-theme]{--bg:#fff;--surface:#fff;--ink:#000;--muted:#333;--line:#999;--accent:#000;--shadow:none}
 body{background:#fff;color:#000;font-size:11pt}
 main{margin:0;padding:0}
 a{color:#000;text-decoration:none}
 tr,li,.card,.callout{break-inside:avoid}
 .card,.callout{box-shadow:none}
 input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:12px;height:12px;border:1px solid #000;background:#fff}
}