/* StructuralClaw site shell: the parts every page shares (base, top nav, beta bar, footer,
   focus ring). Linked right after theme.css and before a page's own <style>, so a page can still
   override any of it. Colours come only from the tokens in theme.css; nothing here hard-codes a
   surface colour, so a page that uses these classes follows the dark palette for free.

   Markup contract (scripts/shell.py writes it into every page):
     <nav class="topnav">  brand + five links, aria-current="page" on the section you are in
     <div class="betabar"> one line of release news under the nav
     <footer>              optional <nav> of links, then the small print */

*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.55}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--ink);padding:.5rem .8rem;z-index:10}
.skip:focus{left:.5rem;top:.5rem}

/* top nav */
.topnav{background:var(--navy);border-bottom:1px solid var(--navy-line)}
.topnav .wrap{max-width:1180px;margin:0 auto;padding:.6rem 1.4rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.topnav .brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.topnav .brand img{width:22px;height:22px;border-radius:5px}
.topnav .brand em{font-style:normal;color:#e8977a}
.topnav .links{display:flex;gap:1.1rem;flex-wrap:wrap;margin-left:auto}
.topnav .links a{color:#cfd6dd;text-decoration:none;font-size:.92rem;padding:.15rem 0;border-bottom:2px solid transparent}
.topnav .links a:hover{color:#fff}
.topnav .links a[aria-current="page"]{color:#fff;border-bottom-color:var(--rust)}
@media (max-width:560px){
  .topnav .links{margin-left:0;width:100%;gap:.9rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .topnav .links::-webkit-scrollbar{display:none}
  .topnav .links a{white-space:nowrap}
}

/* release bar */
.betabar{background:var(--rust2);color:#fff;font-size:.88rem}
.betabar .wrap{max-width:1180px;margin:0 auto;padding:.45rem 1.4rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.betabar .tag{background:rgba(255,255,255,.18);border-radius:4px;padding:.05rem .45rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.betabar a{color:#fff;font-weight:600;white-space:nowrap}
@media (max-width:560px){.betabar .msg{display:none}}

/* footer */
footer{max-width:1180px;margin:0 auto;padding:2rem 1.4rem;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
footer nav{margin-bottom:.6rem;display:flex;gap:1rem;flex-wrap:wrap}
footer nav a{color:var(--muted)}

@media print{.topnav,.betabar{display:none}}