/* display: contents preserves the existing desktop header's flex layout. */
.header-menu { display:contents }
.menu-toggle { display:none }
.header-menu .mobile-only { display:none }
@media(max-width:767px) {
  .topbar .wrap { align-items:center }
  .menu-toggle {
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; width:44px; min-height:44px; padding:10px; margin-left:auto;
    border:1px solid var(--line); border-radius:8px;
    background:var(--surface); color:var(--text); cursor:pointer;
  }
  .menu-toggle span { display:block; width:22px; height:2px; background:currentColor }
  .menu-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
  .menu-toggle[aria-expanded="true"] { border-color:var(--accent); color:var(--accent) }
  .topbar .header-menu { display:none; width:100%; min-width:0; order:3 }
  .topbar .header-menu[data-open="true"] { display:grid; gap:12px }
  .topbar .header-menu nav { display:grid; width:100%; gap:0; margin:0; order:0 }
  .topbar .header-menu nav a { display:flex; align-items:center; min-height:44px; padding:10px 0; border-bottom:1px solid var(--line) }
  .topbar .header-menu .themes { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:16px; order:0 }
  .topbar .header-menu .themes span { display:none }
  .topbar .header-menu .themes button { min-height:44px }
}