/* mdcinco site header: the same header on every page (hub, each tool, the account pages), so moving between them
   changes only what is below it. Served at /shared/site-header.css; needs /brand/tokens.css. Markup:

   <header class="md-header">
     <div class="md-header-brand">
       <a class="md-header-logo" href="/">…wordmark svg…</a>
       <a class="md-header-tool" href="/lol/"><b>Tool name</b><span>optional line</span></a>   (tools only)
     </div>
     <div class="md-header-side">
       <div data-user-menu></div>
       <a class="md-header-coffee" href="https://ko-fi.com/gaminglycus" target="_blank" rel="noopener">☕ …</a>
       <p class="md-header-note">optional, the page's own line</p>
     </div>
   </header>

   Put it first inside a container of --md-max-width with --md-space-4 side padding and --md-space-8 top padding.
   Aion (Next) mirrors these rules in apps/aion-tools/src/components/layout/site-header.css: change both together. */
.md-header{display:flex;flex-wrap:wrap;gap:var(--md-space-3) var(--md-space-6);align-items:end;justify-content:space-between;border-bottom:2px solid var(--md-ink);padding-bottom:var(--md-space-4);margin-bottom:var(--md-space-8)}
.md-header-brand{display:flex;flex-wrap:wrap;align-items:center;gap:var(--md-space-2) var(--md-space-4);margin:0;line-height:0}
.md-header-brand h1{margin:0;line-height:0}
.md-header-logo{display:block;color:var(--md-ink);padding:var(--md-space-1) 0}
.md-header-logo svg{display:block;height:32px;width:auto}
.md-header-logo:focus-visible,.md-header-tool:focus-visible,.md-header-coffee:focus-visible{outline:2px solid var(--md-accent);outline-offset:2px}
.md-header-tool{display:block;padding-left:var(--md-space-4);border-left:var(--md-border);color:var(--md-ink);text-decoration:none;line-height:1.2}
.md-header-tool b{display:block;font:800 var(--md-display-sm)/1 var(--md-font-display);letter-spacing:.01em}
.md-header-tool>span{display:block;font-size:var(--md-text-xs);color:var(--md-muted);margin-top:var(--md-space-1)}
.md-header-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--md-space-3);margin-left:auto}
.md-header-coffee{font:600 var(--md-text-sm)/1.2 var(--md-font-body);color:var(--md-ink);text-decoration:none;padding:var(--md-space-1) var(--md-space-3);border:var(--md-border);border-radius:var(--md-radius);transition:border-color .12s,background-color .12s}
.md-header-coffee:hover{border-color:var(--md-ink);background:var(--md-surface)}
.md-header-note{margin:0;font-size:var(--md-text-sm);color:var(--md-muted);max-width:32ch;text-align:right}
.md-header-note b{color:var(--md-ink);font-weight:600}