/* Compact mobile toolbar and grouped, translucent navigation popover. */
:root { --site-header-height: 88px; }
.site-header { position: fixed; inset: 0 0 auto; width: 100%; z-index: 100; }
body:has(> .site-header) { padding-top: var(--site-header-height); }
html:has(body > .site-header) { scroll-padding-top: calc(var(--site-header-height) + 12px); }
@media (max-width: 760px) { :root { --site-header-height: 77px; } }
.mobile-navigation { display: none; }
@media (max-width: 760px) {
  .site-header { background: rgba(243, 239, 231, .88); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-bottom: 1px solid var(--line); }
  .site-header .nav { position: relative; min-height: 76px; flex-direction: row; align-items: center; padding: .75rem 0; gap: .75rem; }
  .site-header .brand { justify-content: flex-start; gap: .55rem; min-width: 0; }
  .site-header .brand-mark { width: 38px; height: 38px; }
  .site-header .brand-name { display: block; font-size: .65rem; }
  .site-header .brand strong { font-size: .95rem; white-space: nowrap; }
  .site-header .nav-links { width: auto; align-items: center; justify-content: flex-end; gap: .5rem; }
  .site-header .nav-links > :is(.nav-section-link, .nav-library-link, .nav-divider) { display: none; }
  .site-header .push-header-button,
  .site-header .mobile-navigation summary { box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px; max-height: 44px; padding: 0; flex: 0 0 44px; border-radius: 14px; }
  .site-header .push-header-button > svg:not(.push-subscribed-check),
  .site-header .mobile-navigation summary > svg { width: 20px; height: 20px; }
  .site-header .mobile-navigation { display: block; position: static; }
  .mobile-navigation summary { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(23, 63, 67, .1); background: rgba(255, 255, 255, .65); box-shadow: 0 2px 6px rgba(23, 63, 67, .04); }
  .mobile-navigation[open] summary { background: var(--accent); color: white; }
  .mobile-navigation summary svg path { transform-origin: center; transform-box: fill-box; transition: transform .18s ease; }
  .mobile-navigation[open] summary svg path:first-child { transform: translateY(4px) rotate(45deg); }
  .mobile-navigation[open] summary svg path:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-navigation > .mobile-navigation-panel { top: calc(100% + .4rem); left: 50%; right: auto; width: calc(100vw - 2rem); transform: translateX(-50%); min-width: 0; max-height: calc(100dvh - var(--site-header-height) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: .75rem; display: grid; gap: .65rem; border: 1px solid rgba(255, 255, 255, .75); border-radius: 24px; background: rgba(246, 243, 237, .97); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); box-shadow: 0 20px 60px rgba(23, 45, 48, .18), 0 3px 8px rgba(23, 45, 48, .06); animation: mobile-navigation-in .18s ease-out; }
  .mobile-navigation-heading { margin: .2rem .65rem 0; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .mobile-navigation-group { overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, .78); }
  .mobile-navigation .mobile-navigation-group a { display: flex; align-items: center; gap: .8rem; min-height: 50px; padding: .75rem .9rem; border-radius: 0; color: var(--accent); font-size: .95rem; font-weight: 600; }
  .mobile-navigation-group a + a { border-top: 1px solid var(--line); }
  .mobile-navigation-group a svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-navigation .mobile-navigation-group a::after { content: none; }
  .mobile-navigation-group a:is(:hover, :focus-visible) { background: rgba(23, 63, 67, .07); }
  .mobile-navigation-group a:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: -3px; }
  .mobile-navigation-group a[aria-current="page"] { background: rgba(201, 110, 76, .12); color: var(--primary-dark); }
  .mobile-navigation-chevron { margin-left: auto; color: var(--muted); font-size: 1.4rem; line-height: 1; }
}
@keyframes mobile-navigation-in { from { opacity: 0; transform: translate(-50%, -6px) scale(.98); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mobile-navigation > .mobile-navigation-panel { animation: none; } .mobile-navigation summary svg path { transition: none; } }