/* Shared base for every page: reset, type, focus, top bar, brand, buttons, page wrapper, intro and footer.
   Colours and shape come from tokens.css. Page families add their own components (pages.css for level and hub pages,
   app.css for everything newer; Flashcards, Glossary and Cheat sheet keep only what is specific to them inline). */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--text-primary);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
code,pre,kbd{font-family:var(--mono)}
code{background:var(--surface-3);border:1px solid var(--border);padding:.05em .35em;border-radius:4px;font-size:.9em}
pre{background:var(--code-bg);color:var(--code-text);padding:14px 16px;border-radius:var(--r-2);overflow-x:auto;font-size:.85rem;line-height:1.5;margin:10px 0;-webkit-overflow-scrolling:touch}
pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .4em;font-weight:600}
h2{font-size:1.5rem;letter-spacing:-.01em}
h3{font-size:1.2rem}
h4{font-size:1rem}
p{margin:0 0 .8em}
.muted{color:var(--text-secondary)}
.small{font-size:.875rem}
:focus-visible{outline:3px solid var(--gold-line);outline-offset:2px}
[id]{scroll-margin-top:calc(76px + var(--sat))}

/* top bar (same as Flashcards) */
.top{position:sticky;top:0;z-index:30;background:var(--surface-1);border-bottom:1px solid var(--border);padding:calc(8px + var(--sat)) calc(16px + var(--sar)) 8px calc(16px + var(--sal))}
.top .in{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;min-height:44px;min-width:0}
.brand .mark{width:26px;height:26px;background:var(--graphite);border:1px solid var(--border-strong);box-shadow:inset 0 -3px 0 var(--grail-gold);border-radius:var(--r-1);display:grid;place-items:center;color:var(--graphite-text);font-weight:700;font-size:.8rem;flex:none}
.brand small{font-weight:500;color:var(--text-secondary);font-size:.85rem}
.top .sp{flex:1}
.btn{border:1px solid var(--border-strong);background:var(--surface-1);padding:8px 14px;border-radius:4px;font-size:.88rem;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--text-muted)}
.btn.sm{min-height:34px;padding:5px 11px;font-size:.82rem}
.btn.primary{background:var(--grail-gold);border-color:var(--gold-line);color:var(--on-gold);font-weight:600}
.btn[hidden]{display:none}
.iconbtn{min-width:40px;padding:0}
.iconbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}

.wrap{max-width:880px;margin:0 auto;padding:0 calc(20px + var(--sar)) 0 calc(20px + var(--sal))}
.intro{padding:28px 0 8px}
.intro h1{font-size:clamp(1.7rem,4.5vw,2.5rem);letter-spacing:-.02em;font-weight:700;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.intro h1 .hl{color:var(--text-primary)}
.intro h1 .tag{font-size:.78rem;letter-spacing:0;font-weight:500}
.intro p{color:var(--text-secondary);max-width:70ch}
/* reading width: running prose stops near 72 characters; layout rows, tables and the scenario workspace stay full width */
section>p,section>details>ol,.stagehead p,.story p,.tkfoot,.asg .brief,.topic>p,details.refs ul,.xcat ul,.tkbody>:is(p,ul,ol,blockquote,.callout,.tree),details.how dl,.tplbody p,.g p{max-width:72ch}
.foot{padding:30px 0 calc(40px + var(--sab));color:var(--text-muted);font-size:.82rem}
.foot .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
@media (hover:none){.btn:hover{border-color:var(--border-strong)}}
@media (max-width:640px){
  .wrap{padding:0 calc(16px + var(--sar)) 0 calc(16px + var(--sal))}
  .intro{padding:20px 0 4px}
  .brand small,.top .clabel{display:none}
  .btn.sm{min-height:40px}
}