/* Roberto AI Engineering Lab V10 — mobile search alignment + full-height drawer.
   Loaded after V8/V9 so the fixes remain isolated and easy to audit. */

:root{
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

@media (max-width:1020px){
  /* Keep the right-hand controls in a stable compact group. */
  .masthead-left{
    min-width:0;
  }
  .masthead-right{
    flex:0 0 auto;
    margin-left:auto;
    justify-content:flex-end !important;
    align-items:center !important;
  }

  /* Replace the font glyph with a geometrically centered CSS search mark.
     This avoids the visual left-offset caused by the ⌕ character metrics. */
  .header-search{
    position:relative !important;
    display:grid !important;
    place-items:center !important;
    justify-content:center !important;
    align-content:center !important;
    align-self:center !important;
    width:50px !important;
    min-width:50px !important;
    height:50px !important;
    min-height:50px !important;
    flex:0 0 50px !important;
    padding:0 !important;
    line-height:1 !important;
    overflow:visible;
  }
  .header-search::before{
    content:"" !important;
    position:absolute;
    left:50%;
    top:50%;
    width:14px;
    height:14px;
    border:2.5px solid currentColor;
    border-radius:50%;
    box-sizing:border-box;
    transform:translate(-58%,-58%);
  }
  .header-search::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:8px;
    height:2.5px;
    border-radius:999px;
    background:currentColor;
    transform:translate(1px,5px) rotate(-45deg);
    transform-origin:left center;
  }
  .header-search span,
  .header-search kbd{
    display:none !important;
  }

  /* The drawer now reaches the real bottom edge. It no longer stops above
     the fixed quick-navigation bar, so the menu forms one complete panel. */
  .module-nav{
    z-index:620 !important;
    top:var(--top-h) !important;
    bottom:0 !important;
    height:calc(100svh - var(--top-h)) !important;
    height:calc(100dvh - var(--top-h)) !important;
    max-height:calc(100svh - var(--top-h)) !important;
    max-height:calc(100dvh - var(--top-h)) !important;
    padding-bottom:calc(18px + var(--safe-bottom)) !important;
  }
  .drawer-backdrop{
    z-index:600 !important;
    inset:var(--top-h) 0 0 !important;
  }
  body.drawer-open .fastext-bar{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
}

@media (max-width:720px){
  :root,
  :root[data-theme]{
    --top-h:calc(128px + var(--safe-top));
  }
  .top-stack{
    height:var(--top-h) !important;
  }
  .masthead{
    height:calc(80px + var(--safe-top)) !important;
    min-height:calc(80px + var(--safe-top));
    padding-top:var(--safe-top) !important;
    padding-inline:12px !important;
  }
  .ticker-wrapper{
    height:48px !important;
    min-height:48px !important;
  }
  .mobile-menu{
    width:52px !important;
    min-width:52px !important;
    height:52px !important;
    min-height:52px !important;
    flex:0 0 52px !important;
  }
  .runtime-pill{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    flex:0 0 42px !important;
  }
  .masthead-logo{
    flex:0 1 auto !important;
    min-width:0 !important;
  }
  .masthead-logo > span{
    min-width:0;
  }
  .module-nav{
    width:min(340px,92vw) !important;
    padding-top:14px !important;
  }
}

@media (max-width:430px){
  .masthead{
    gap:7px !important;
    padding-inline:10px !important;
  }
  .masthead-left,
  .masthead-right{
    gap:7px !important;
  }
  .masthead-logo{
    gap:7px !important;
  }
  .header-search{
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    flex-basis:48px !important;
  }
  .masthead-logo img{
    width:38px !important;
    height:38px !important;
  }
  .masthead-logo b{
    font-size:12px !important;
  }
  .runtime-pill{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    flex-basis:40px !important;
  }
}

@media (max-width:370px){
  .masthead{
    gap:5px !important;
    padding-inline:8px !important;
  }
  .masthead-left,
  .masthead-right,
  .masthead-logo{
    gap:5px !important;
  }
  .mobile-menu{
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    flex-basis:48px !important;
  }
  .masthead-logo b{
    max-width:78px;
  }
}

@media (prefers-reduced-motion:reduce){
  body.drawer-open .fastext-bar{
    transition:none !important;
  }
}