/* ToolNest mobile navigation (phones and tablets, up to 900px wide).
   The desktop header is untouched: both the button and the panel stay hidden above 900px. */
.top .mnav-toggle,.top .mnav{display:none}
.top .mnav[hidden]{display:none!important}
@media(max-width:900px){
  .top .mnav-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s}
  .top.light .mnav-toggle{border-color:var(--line,#D9E4E1)}
  .top .mnav-toggle:hover{background:rgba(127,127,127,.2)}
  .top .mnav-toggle:focus-visible{outline:2px solid var(--ring,#5FE3CB);outline-offset:2px}
  .mnav-ico,.mnav-ico::before,.mnav-ico::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s,background .2s}
  .mnav-ico{position:relative}
  .mnav-ico::before,.mnav-ico::after{content:"";position:absolute;left:0}
  .mnav-ico::before{top:-6px}
  .mnav-ico::after{top:6px}
  .mnav-toggle[aria-expanded="true"] .mnav-ico{background:transparent}
  .mnav-toggle[aria-expanded="true"] .mnav-ico::before{transform:translateY(6px) rotate(45deg)}
  .mnav-toggle[aria-expanded="true"] .mnav-ico::after{transform:translateY(-6px) rotate(-45deg)}

  .top .mnav{display:flex;flex-direction:column;align-items:stretch;gap:2px;pointer-events:auto;width:100%;max-width:380px;margin:8px 0 0 auto;padding:8px;border-radius:24px;background:#052625;border:1px solid rgba(255,255,255,.14);color:#EAF4F1;font-size:16px;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}
  .top.light .mnav{background:var(--surface,#fff);color:var(--ink,#0B2220);border-color:var(--line,#D9E4E1)}
  .top .mnav a:not(.btn){display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:14px;font-size:16px;font-weight:600;opacity:1;text-decoration:none;color:inherit}
  .top .mnav a:not(.btn):hover{background:rgba(127,127,127,.16)}
  .top .mnav a:not(.btn):focus-visible,.top .mnav .btn:focus-visible{outline:2px solid var(--ring,#5FE3CB);outline-offset:-2px}
  .top .mnav a[aria-current]{background:rgba(95,227,203,.14);color:#5FE3CB}
  .top.light .mnav a[aria-current]{background:rgba(15,107,92,.1);color:var(--brand,#0F6B5C)}
  .top .mnav .btn{min-height:48px!important;margin-top:6px;padding:0 18px!important;font-size:16px!important;border-radius:14px}
}
/* On phones the header pill has room for the logo, the menu button (and the search button on the homepage).
   The "Find my tool" button moves into the menu, where it is the last item. */
@media(max-width:480px){.top .bar nav .btn{display:none}}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .mnav-ico,.mnav-ico::before,.mnav-ico::after,.top .mnav-toggle{transition:none}
}
/* Without JavaScript the button could not open anything, so it stays out of sight. */
@media(scripting:none){.top .mnav-toggle{display:none}}