/* Shared phone and tablet layout for every page */
.m-menu-btn,.m-side-bar,.m-backdrop{display:none}
img,video{max-width:100%;height:auto}

@media (max-width:980px){
  .header{padding:0 16px}
  .header .nav,.header .nav-mono{display:none}
  .m-menu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:none;color:var(--fg-0);cursor:pointer;border-radius:6px}
  .m-menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .m-menu-btn .l{display:block;width:20px;height:1.5px;background:currentColor;position:relative;transition:background 160ms}
  .m-menu-btn .l::before,.m-menu-btn .l::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor;transition:transform 200ms}
  .m-menu-btn .l::before{top:-6px}
  .m-menu-btn .l::after{top:6px}
  body.m-nav-open .m-menu-btn .l{background:transparent}
  body.m-nav-open .m-menu-btn .l::before{transform:translateY(6px) rotate(45deg)}
  body.m-nav-open .m-menu-btn .l::after{transform:translateY(-6px) rotate(-45deg)}
  body.m-nav-open .header .nav{display:flex;flex-direction:column;gap:0;position:fixed;top:60px;left:0;right:0;z-index:70;background:var(--bg-0);border-bottom:1px solid var(--line);padding:8px 0 12px;box-shadow:0 24px 40px -20px rgba(0,0,0,0.8)}
  body.m-nav-open .header .nav a{padding:14px 20px;font-size:16px;color:var(--fg-1)}
  body.m-nav-open .header .nav a.active{color:var(--accent)}
  body.m-nav-open .header .nav .m-ver{padding:14px 20px 6px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;color:var(--fg-3);border-top:1px solid var(--line);margin-top:6px}
  .m-backdrop{display:block;position:fixed;inset:60px 0 0 0;z-index:60;background:rgba(0,0,0,0.55);opacity:0;pointer-events:none;transition:opacity 200ms}
  body.m-nav-open .m-backdrop{opacity:1;pointer-events:auto;inset:0;z-index:45}
  body.m-nav-open{overflow:hidden}
}

@media (max-width:800px){
  .m-side-bar{display:flex;position:sticky;top:60px;z-index:40;background:rgba(10,12,14,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .m-side-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 16px;background:none;border:none;color:var(--fg-1);font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;text-align:left}
  .m-side-btn svg{flex-shrink:0;color:var(--accent)}
  .m-side-btn .cur{margin-left:auto;color:var(--fg-3);letter-spacing:0.04em;text-transform:none;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}

  body .layout{display:block}
  body .layout>.sidebar{display:block!important;position:fixed!important;top:60px!important;left:0;bottom:0;width:min(320px,86vw)!important;height:auto!important;max-height:none!important;z-index:65;background:var(--bg-0);border-right:1px solid var(--line)!important;border-bottom:none!important;padding:20px 12px 60px!important;overflow-y:auto;transform:translateX(-102%);transition:transform 240ms ease;-webkit-overflow-scrolling:touch}
  body.m-side-open .layout>.sidebar{transform:none;box-shadow:24px 0 48px -16px rgba(0,0,0,0.8)}
  body.m-side-open .m-backdrop{opacity:1;pointer-events:auto}
  body.m-side-open{overflow:hidden}
  .sidebar .nav-link,.sidebar .ver-link{min-height:44px;align-items:center}

  .content{padding:28px 18px 72px!important;max-width:none!important}
  .page-title{font-size:clamp(34px,9vw,48px)!important}
  .page-lede{font-size:16px!important}
  pre{white-space:pre-wrap;overflow-wrap:anywhere}
  code{overflow-wrap:anywhere}
  .footer-inner{flex-direction:column;gap:10px}
}

@media (max-width:600px){
  .version-head{flex-wrap:wrap;row-gap:6px}
  .filters{flex-wrap:wrap}
  .filter-search{width:100%;flex:1 1 100%}
  .entries li,.feature-item-desc,.doc-body p,.doc-body li{font-size:15px}
  .entries .sub li{font-size:14px}
  .usecase{gap:20px}
  .h1{font-size:clamp(40px,12vw,64px)}
}