/* A compact header on phones, using each site's own colors and typeface. */
html{scrollbar-gutter:stable}
/* The closed page keeps its gutter; a full-screen modal needs the whole viewport. */
html.mobile-menu-open{overflow:hidden;scrollbar-gutter:auto}
.mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex-shrink:0;min-height:44px;padding:.55rem .75rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);font:inherit;font-size:.9375rem;cursor:pointer}
.mobile-menu-toggle[hidden]{display:none!important}
.mobile-menu-toggle svg,.mobile-menu-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mobile-menu{position:fixed;inset:0;margin:0;width:100vw;height:100vh;max-height:100vh;height:100dvh;max-height:100dvh;max-width:none;box-sizing:border-box;padding:max(1.25rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left));background:var(--bg);color:var(--ink);border:0;border-radius:0;overflow-y:auto;overscroll-behavior:contain;font:inherit;scrollbar-color:var(--line) var(--bg)}
.mobile-menu[open]{animation:menu-enter 180ms cubic-bezier(.16,1,.3,1)}
.mobile-menu::backdrop{background:rgb(0 0 0 / .45)}
.mobile-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:.5rem}
.mobile-menu-heading h2{font:inherit;font-size:1.2rem;font-weight:650;letter-spacing:normal;line-height:1.3;margin:0}
.mobile-menu-close{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:.5rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);cursor:pointer}
.mobile-menu .site-nav,.mobile-menu .tool-nav{display:flex;flex-direction:column;align-items:stretch;justify-content:start;gap:0;width:100%;max-width:none;padding:0;margin:0;border:0;font:inherit}
.mobile-menu nav a{display:flex;align-items:center;min-height:48px;margin:0;padding:.8rem .2rem;border-bottom:1px solid var(--line);font:inherit;font-size:1rem;line-height:1.35;color:var(--ink);text-decoration:none;box-shadow:none;overflow-wrap:anywhere}
.mobile-menu nav a:hover{background:var(--tint);color:var(--ink)}
.mobile-menu nav a[aria-current=page]{color:var(--accent);font-weight:700;box-shadow:none}
.mobile-menu #theme-toggle{display:block;width:100%;max-width:none;margin:1.25rem 0 .25rem;min-height:44px;padding:.7rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);font:inherit;font-size:.9375rem}
.mobile-menu-toggle:hover,.mobile-menu-close:hover{background:var(--tint)}
@keyframes menu-enter{from{transform:translateX(20px)}to{transform:translateX(0)}}
@media screen and (max-width:47.99em){.site-header[data-mobile-menu-ready=true]{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:.75rem!important}.site-header[data-mobile-menu-ready=true] .brand{font-size:clamp(1.125rem,4.8vw,1.7rem);white-space:normal;min-width:0;flex-shrink:1;overflow-wrap:anywhere}.site-header[data-mobile-menu-ready=true] .brand svg{flex-shrink:0}.site-header[data-mobile-menu-ready=true] .mobile-menu-toggle{margin-inline-start:auto}}
@media(prefers-reduced-motion:reduce){.mobile-menu[open]{animation:none}}
@media print{.mobile-menu,.mobile-menu-toggle{display:none!important}}

/* Intermediate windows use a bounded dialog; tablet widths restore the header. */
@media screen and (min-width:40.01em) and (max-width:47.99em){
 .mobile-menu{inset:2rem 0 auto;margin:0 auto;width:calc(100vw - 3rem);max-width:36rem;height:auto;max-height:calc(100vh - 4rem);max-height:calc(100dvh - 4rem);padding:1.5rem;border:1px solid var(--line);border-radius:var(--radius,.3rem)}
}