/* ALTER v0.9 — mobile command center + navigation polish */
@media(max-width:860px){
  body.mobile-nav-open{overflow:hidden}

  .sidebar{
    width:min(82vw,310px)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    padding:
      calc(12px + env(safe-area-inset-top))
      12px
      calc(12px + env(safe-area-inset-bottom))
      12px!important;
  }
  .sidebar::after{display:none!important}
  .sidebar .brand{
    min-height:54px;
    padding:5px 48px 14px 8px!important;
    gap:10px!important;
  }
  .sidebar .brand h1{font-size:17px!important}
  .sidebar .brand small{font-size:7px!important;letter-spacing:.1em!important}
  .mobile-nav-close{
    display:grid!important;
    place-items:center;
    position:absolute;
    top:calc(13px + env(safe-area-inset-top));
    right:12px;
    width:38px;
    height:38px;
    border:1px solid var(--line);
    border-radius:10px;
    background:rgba(255,255,255,.025);
    color:#b9c1cb;
    font:300 24px/1 var(--sans);
    z-index:3;
  }
  .mobile-nav-close:active{background:rgba(255,255,255,.07)}

  .sidebar .nav{
    flex:0 1 auto!important;
    max-height:calc(100dvh - 210px)!important;
    padding:10px 0!important;
    gap:2px!important;
  }
  .sidebar .nav button{
    min-height:42px!important;
    padding:8px 10px!important;
    border-radius:9px!important;
    font-size:12px!important;
  }
  .sidebar .nav-icon{
    width:22px!important;
    font-size:11px!important;
  }

  .sidebar-foot{
    margin-top:auto!important;
    padding:10px 8px 0!important;
  }
  .sidebar-foot .sys-row{
    justify-content:flex-start!important;
    gap:10px!important;
    flex-wrap:wrap!important;
    line-height:1.45!important;
    font-size:7px!important;
  }
  .sidebar-foot .sys-row span:last-child{
    opacity:.72;
  }
  .intel-sources-link{
    margin-top:7px!important;
    font-size:6.5px!important;
  }

  .topbar{
    grid-template-areas:
      "menu brand actions"
      "search search search"!important;
  }
  .topbar::before{
    content:"ALTER";
    grid-area:brand;
    display:block;
    justify-self:center;
    color:#d9dde3;
    font:800 13px var(--sans);
    letter-spacing:.22em;
    padding-left:.22em;
  }
  .topbar::after{display:none!important}

  .content{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .page-head{
    gap:8px!important;
    margin-bottom:14px!important;
    padding-bottom:11px!important;
  }
  .page-head h2{
    margin-top:5px!important;
    margin-bottom:5px!important;
    font-size:25px!important;
  }
  .page-head p{
    max-width:100%!important;
    font-size:11px!important;
  }

  /* Command Center: only the KPI cards stay in a compact 2x2 grid. */
  .content > .grid.cols-4{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .content > .grid.cols-4 > .stat{
    min-height:0!important;
    padding:14px!important;
    border-radius:14px!important;
  }
  .content > .grid.cols-4 > .stat .micro{
    font-size:7px!important;
    line-height:1.35!important;
    letter-spacing:.11em!important;
  }
  .content > .grid.cols-4 > .stat .num{
    margin-top:8px!important;
    font-size:25px!important;
  }
  .content > .grid.cols-4 > .stat .delta{
    margin-top:6px!important;
    font-size:7px!important;
    line-height:1.35!important;
  }
  .content > .grid.cols-4 > .hero-card,
  .content > .grid.cols-4 > .card.card-pad,
  .content > .grid.cols-4 > .span-2{
    grid-column:1/-1!important;
  }
  .content > .grid.cols-4 > .hero-card{
    min-height:0!important;
    padding:18px!important;
  }
  .content > .grid.cols-4 > .hero-card h3{
    margin:17px 0 7px!important;
    font-size:22px!important;
  }
  .content > .grid.cols-4 > .hero-card p{
    font-size:11px!important;
    line-height:1.6!important;
  }
  .content > .grid.cols-4 > .hero-card .hero-meta{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    margin-top:18px!important;
  }
  .content > .grid.cols-4 > .hero-card .hero-meta strong{
    font-size:15px!important;
  }
  .content > .grid.cols-4 > .hero-card .hero-meta span{
    font-size:6.5px!important;
    line-height:1.3!important;
  }
  .content > .grid.cols-4 > .card.card-pad{
    padding:15px!important;
  }

  .nav-backdrop{
    background:rgba(0,0,0,.66)!important;
    backdrop-filter:blur(7px)!important;
  }
}

@media(min-width:861px){
  .mobile-nav-close{display:none!important}
}

@media(max-width:390px){
  .content > .grid.cols-4{gap:8px!important}
  .content > .grid.cols-4 > .stat{padding:12px!important}
  .content > .grid.cols-4 > .stat .num{font-size:23px!important}
}