/* Roberto AI Engineering Lab V9 — mobile navigation clickability fix.
   Keeps the complete V8 visual system while repairing stacking, backdrop,
   safe-area spacing, touch target sizing, and drawer interaction. */

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

/* Keep both navbar rows above every page effect and make their controls
   explicit pointer targets. */
.top-stack{
  z-index:700 !important;
  isolation:isolate;
  pointer-events:auto;
}
.masthead,
.ticker-wrapper{
  position:relative;
  z-index:2;
  pointer-events:auto;
}
.masthead a,
.masthead button,
.ticker-wrapper button{
  position:relative;
  z-index:3;
  pointer-events:auto !important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Disable the former body pseudo-element backdrop. Because .screen creates
   an isolated stacking context, that backdrop could sit above the drawer. */
body.drawer-open::before{
  content:none !important;
  display:none !important;
}
body.drawer-open{
  overflow:hidden;
  overscroll-behavior:none;
}

/* A real, clickable backdrop now shares the same stacking context as the
   drawer, while staying below it and below the fixed navbar. */
.drawer-backdrop{
  display:none;
  margin:0;
  padding:0;
  border:0;
  appearance:none;
  background:rgba(0,0,0,.66);
}

@media (max-width:1020px){
  .drawer-backdrop{
    display:block;
    position:fixed;
    z-index:340;
    inset:var(--top-h) 0 var(--footer-h);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    transition:opacity .22s ease,visibility .22s ease;
  }
  body.drawer-open .drawer-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .module-nav{
    z-index:360 !important;
    visibility:visible;
    pointer-events:none;
    will-change:transform;
  }
  body.drawer-open .module-nav{
    pointer-events:auto;
  }
  body.drawer-open .module-nav,
  body.drawer-open .module-nav *{
    visibility:visible;
    pointer-events:auto;
  }
  .mobile-menu,
  .header-search{
    min-width:48px;
    min-height:48px;
  }
  .mobile-menu:focus-visible,
  .header-search:focus-visible,
  .lifecycle-rail button:focus-visible,
  .module-nav button:focus-visible{
    outline:3px solid var(--lc-accent);
    outline-offset:2px;
  }
}

@media (max-width:720px){
  :root,
  :root[data-theme]{
    --top-h:calc(124px + var(--safe-top));
  }
  .top-stack{
    height:var(--top-h) !important;
  }
  .masthead{
    height:calc(76px + var(--safe-top)) !important;
    padding-top:var(--safe-top) !important;
    padding-inline:10px !important;
  }
  .ticker-wrapper{
    height:48px !important;
    min-height:48px;
  }
  .mobile-menu,
  .header-search{
    width:48px !important;
    height:48px !important;
    flex:0 0 48px;
  }
  .runtime-pill{
    min-width:40px;
    min-height:40px;
    flex:0 0 40px;
  }
  .masthead-logo{
    min-width:0;
    flex:1 1 auto;
  }
  .masthead-logo img{
    flex:0 0 auto;
  }
  .masthead-logo span{
    min-width:0;
  }
  .masthead-logo b{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .ticker-label{
    min-width:78px !important;
    width:78px;
    flex:0 0 78px;
    padding-inline:5px !important;
  }
  .lifecycle-rail{
    height:48px;
  }
  .lifecycle-rail button{
    min-width:0 !important;
    min-height:48px;
    padding:0 3px !important;
  }
  .lifecycle-rail button span{
    font-size:10px !important;
  }
  .module-nav{
    top:var(--top-h) !important;
    bottom:var(--footer-h) !important;
    height:auto !important;
    max-height:calc(100svh - var(--top-h) - var(--footer-h));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width:430px){
  .masthead{
    gap:6px !important;
    padding-inline:8px !important;
  }
  .masthead-left,
  .masthead-right{
    gap:6px !important;
  }
  .masthead-logo{
    gap:6px !important;
  }
  .masthead-logo img{
    width:38px !important;
    height:38px !important;
  }
  .masthead-logo b{
    font-size:12px !important;
  }
  .masthead-logo small{
    display:none !important;
  }
  .runtime-pill{
    width:38px !important;
    min-width:38px;
    height:38px !important;
    min-height:38px;
    flex-basis:38px;
  }
  .ticker-label{
    min-width:72px !important;
    width:72px;
    flex-basis:72px;
    letter-spacing:.12em !important;
    font-size:7px !important;
  }
  .lifecycle-rail button span{
    font-size:9px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .drawer-backdrop,
  .module-nav{
    transition:none !important;
  }
}