/* vektr.app phone menu: at 700px and below the top links become a Menu button and a full-width panel under the bar. Needs menu.js (it adds html.mnu-on); without it the links simply stay visible as before. */
:root{--m-bg:#f5f6f6;--m-fg:#101217;--m-ln:#d9dddd;--m-acc:#0b7684}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--m-bg:#101217;--m-fg:#f5f6f6;--m-ln:#2f363e;--m-acc:#34b6c5}}
:root[data-theme="dark"]{--m-bg:#101217;--m-fg:#f5f6f6;--m-ln:#2f363e;--m-acc:#34b6c5}
.mbtn,.mjoin{display:none}
@media (max-width:700px){
  html.mnu-on .bar{position:relative}
  html.mnu-on .bar .join{display:none}
  html.mnu-on .mbtn{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border-radius:10px;border:1px solid #f5f6f666;background:transparent;color:#f5f6f6;cursor:pointer}
  html.mnu-on .mbtn svg{pointer-events:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  html.mnu-on .mbtn:focus-visible{outline:2px solid #5fd3e0;outline-offset:2px}
  html.mnu-on nav.tabs.mnu{position:absolute;left:0;right:0;top:100%;z-index:20;display:block;width:auto;margin:0;padding:0;gap:0;background:var(--m-bg);color:var(--m-fg);box-shadow:0 12px 28px rgba(0,0,0,.28);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility 0s .15s}
  html.mnu-on nav.tabs.mnu.open{visibility:visible;opacity:1;transform:none;transition:opacity .15s,transform .15s}
  html.mnu-on nav.tabs.mnu a{display:flex;align-items:center;width:100%;min-height:54px;padding:12px 20px;margin:0;border:0;border-top:1px solid var(--m-ln);border-radius:0;background:transparent;color:var(--m-fg);font:600 17px Figtree,system-ui,sans-serif;text-decoration:none}
  html.mnu-on nav.tabs.mnu a[aria-current="page"]{color:var(--m-acc);background:transparent;box-shadow:inset 4px 0 0 var(--m-acc)}
  html.mnu-on nav.tabs.mnu a:focus-visible{outline:2px solid var(--m-acc);outline-offset:-4px}
  html.mnu-on nav.tabs.mnu a.mjoin{display:flex;color:var(--m-acc)}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){html.mnu-on nav.tabs.mnu,html.mnu-on nav.tabs.mnu.open{transition:none;transform:none}}
