/* Stage 11CE6B — auth-aware mobile app drawer navbar */
:root{
  --app-drawer-width:min(88vw,390px);
  --app-drawer-ease:cubic-bezier(.2,.8,.2,1);
}

.site-nav a.is-active{
  background:#111827;
  color:#fff;
  box-shadow:0 8px 20px rgba(15,23,42,.16);
}
.site-nav a.is-active:hover{background:#111827;color:#fff}
.mobile-header-primary{display:none}

.app-drawer-backdrop,
.app-mobile-drawer{display:none}

@media (max-width:1100px){
  .site-header{z-index:820}
  .site-header-shell{
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:10px;
    min-height:72px;
  }
  .site-nav.site-nav-desktop{display:none!important}
  .site-header-actions{display:none!important}
  .site-nav-toggle{
    display:inline-flex;
    position:relative;
    z-index:2;
    width:46px;
    height:46px;
    border-radius:15px;
    flex:0 0 46px;
  }
  .mobile-header-primary{
    display:inline-flex;
    min-height:42px;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    border:1px solid rgba(79,70,229,.16);
    border-radius:14px;
    background:#f5f3ff;
    color:#4338ca;
    font-size:.79rem;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
  }
  .mobile-header-primary:focus-visible,
  .site-nav-toggle:focus-visible,
  .app-drawer-close:focus-visible,
  .app-drawer-link:focus-visible{
    outline:3px solid rgba(79,70,229,.34);
    outline-offset:2px;
  }
  .app-drawer-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:990;
    background:rgba(15,23,42,.52);
    opacity:0;
    visibility:hidden;
    transition:opacity .24s ease,visibility .24s ease;
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }
  .app-drawer-backdrop[hidden]{display:block}
  .app-mobile-drawer{
    display:flex;
    position:fixed;
    z-index:1000;
    top:0;
    right:0;
    bottom:0;
    width:var(--app-drawer-width);
    max-width:100%;
    flex-direction:column;
    background:#f8fafc;
    box-shadow:-28px 0 70px rgba(15,23,42,.24);
    transform:translate3d(104%,0,0);
    visibility:hidden;
    transition:transform .3s var(--app-drawer-ease),visibility .3s var(--app-drawer-ease);
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    overflow:hidden;
  }
  body.nav-drawer-open{overflow:hidden;touch-action:none}
  body.nav-drawer-open .app-drawer-backdrop{
    opacity:1;
    visibility:visible;
  }
  body.nav-drawer-open .app-mobile-drawer{
    transform:translate3d(0,0,0);
    visibility:visible;
  }
  .app-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:82px;
    padding:16px 16px 14px 18px;
    border-bottom:1px solid #e2e8f0;
    background:rgba(255,255,255,.96);
  }
  .app-drawer-user,
  .app-drawer-brand{
    display:flex;
    min-width:0;
    align-items:center;
    gap:12px;
  }
  .app-drawer-user>div,
  .app-drawer-brand>div{display:grid;min-width:0;gap:3px}
  .app-drawer-user strong,
  .app-drawer-brand strong{
    overflow:hidden;
    color:#0f172a;
    font-size:.98rem;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .app-drawer-user span:not(.app-drawer-avatar),
  .app-drawer-brand span{
    overflow:hidden;
    color:#64748b;
    font-size:.75rem;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .app-drawer-avatar{
    display:inline-flex;
    width:44px;
    height:44px;
    flex:0 0 44px;
    align-items:center;
    justify-content:center;
    border-radius:15px;
  }
  .app-drawer-brand img{
    display:block;
    width:auto;
    height:42px;
    max-width:min(210px,68vw);
    flex:0 1 auto;
    border-radius:0;
    object-fit:contain;
    object-position:left center;
  }
  .app-drawer-avatar{
    background:linear-gradient(145deg,#4f46e5,#7c3aed);
    color:#fff;
    font-size:.85rem;
    font-weight:900;
    letter-spacing:.04em;
    box-shadow:0 10px 24px rgba(79,70,229,.22);
  }
  .app-drawer-brand img{border:0;background:transparent}
  .app-drawer-close{
    display:inline-flex;
    width:44px;
    height:44px;
    flex:0 0 44px;
    align-items:center;
    justify-content:center;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#fff;
    color:#334155;
    cursor:pointer;
    touch-action:manipulation;
  }
  .app-drawer-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .app-drawer-content{
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:12px 14px 22px;
    scrollbar-width:thin;
  }
  .app-drawer-section{padding:8px 0 6px}
  .app-drawer-section+.app-drawer-section{border-top:1px solid #e2e8f0;margin-top:6px;padding-top:14px}
  .app-drawer-label{
    padding:0 10px 8px;
    color:#94a3b8;
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
  }
  .app-drawer-nav{display:grid;gap:7px}
  .app-drawer-link{
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 20px;
    min-height:64px;
    align-items:center;
    gap:10px;
    padding:8px 10px 8px 8px;
    border:1px solid transparent;
    border-radius:18px;
    color:#1e293b;
    text-decoration:none;
    transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .app-drawer-link:hover,
  .app-drawer-link:active{
    background:#fff;
    border-color:#e2e8f0;
    transform:translateY(-1px);
  }
  .app-drawer-link.is-active{
    background:#fff;
    border-color:#c7d2fe;
    box-shadow:0 10px 24px rgba(79,70,229,.09);
  }
  .app-drawer-link-primary{
    background:linear-gradient(135deg,#4f46e5,#6d28d9);
    color:#fff;
    box-shadow:0 14px 28px rgba(79,70,229,.2);
  }
  .app-drawer-link-primary:hover,
  .app-drawer-link-primary:active,
  .app-drawer-link-primary.is-active{
    background:linear-gradient(135deg,#4338ca,#5b21b6);
    border-color:transparent;
    color:#fff;
  }
  .app-drawer-link-danger{color:#b91c1c}
  .app-drawer-link-danger .app-drawer-icon{background:#fef2f2;color:#dc2626}
  .app-drawer-icon{
    display:inline-flex;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#eef2ff;
    color:#4f46e5;
  }
  .app-drawer-link-primary .app-drawer-icon{background:rgba(255,255,255,.16);color:#fff}
  .app-drawer-icon svg,
  .app-drawer-chevron svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .app-drawer-copy{display:grid;min-width:0;gap:3px}
  .app-drawer-copy strong{
    overflow:hidden;
    font-size:.91rem;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .app-drawer-copy small{
    overflow:hidden;
    color:#64748b;
    font-size:.72rem;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .app-drawer-link-primary .app-drawer-copy small{color:rgba(255,255,255,.78)}
  .app-drawer-chevron{display:inline-flex;color:#94a3b8}
  .app-drawer-chevron svg{width:17px;height:17px}
  .app-drawer-link-primary .app-drawer-chevron{color:rgba(255,255,255,.72)}
  .app-drawer-footer{
    display:grid;
    gap:2px;
    padding:13px 20px calc(13px + env(safe-area-inset-bottom));
    border-top:1px solid #e2e8f0;
    background:#fff;
  }
  .app-drawer-footer span{color:#334155;font-size:.78rem;font-weight:800}
  .app-drawer-footer small{color:#94a3b8;font-size:.68rem}
}

@media (max-width:560px){
  .site-header-shell{padding-left:14px;padding-right:14px}
  .site-brand{gap:9px;min-width:0}
  .site-brand{max-width:min(150px,40vw)}
  .site-brand .brand-logo{width:auto;height:36px;max-width:100%;border-radius:0;object-fit:contain;object-position:left center}
  .site-brand span{overflow:hidden;font-size:.92rem;text-overflow:ellipsis;white-space:nowrap}
  .mobile-header-primary{min-height:40px;padding:0 11px;font-size:.72rem}
  .site-nav-toggle{width:42px;height:42px;flex-basis:42px;border-radius:13px}
}

@media (max-width:390px){
  .site-brand{max-width:min(122px,34vw)}
  .site-brand .brand-logo{height:32px}
  .site-brand span{display:none}
  .app-mobile-drawer{width:min(92vw,370px)}
  .app-drawer-link{grid-template-columns:44px minmax(0,1fr) 18px;min-height:61px}
  .app-drawer-icon{width:42px;height:42px}
}

@media (min-width:1101px){
  body.nav-drawer-open{overflow:auto}
}

@media (prefers-reduced-motion:reduce){
  .app-drawer-backdrop,
  .app-mobile-drawer,
  .app-drawer-link{transition:none!important}
}