/* =========================================================
   v1.35 — Mobile product density + native hierarchy
   Keep desktop untouched. Mobile app bar owns section identity.
   ========================================================= */
@media(max-width:780px){
  :root{
    --mobile-edge:14px!important;
    --v131-appbar:54px!important;
    --v131-tabbar:58px!important;
  }

  .app{grid-template-rows:54px minmax(0,1fr)!important}
  .topbar{height:54px!important;min-height:54px!important;max-height:54px!important;grid-template-rows:54px!important;padding:0 8px 0 10px!important}
  .mobile-app-title-v131{height:46px!important;padding:0 5px!important;gap:7px!important}
  .mobile-app-title-v131 strong{font-size:16px!important;line-height:1.05!important;font-weight:720!important;letter-spacing:-.015em!important}
  .mobile-app-title-v131 small{font-size:10.5px!important;line-height:1.15!important;margin-top:2px!important}
  .mobile-title-chevron-v131{font-size:12px!important}
  .search-trigger,#avatarBtn{width:38px!important;height:38px!important;min-width:38px!important}

  .page{padding:10px var(--mobile-edge) calc(66px + env(safe-area-inset-bottom,0px))!important}

  /* Grouped surfaces: closer to native app lists than desktop dashboard cards. */
  .panel{border-radius:15px!important;box-shadow:none!important}
  .panel-h{min-height:43px!important;padding:0 12px!important}
  .panel-h h3{font-size:14px!important;font-weight:680!important}
  .panel-h .meta{font-size:10.5px!important}
  .panel-b{padding:7px 10px!important}

  .att-row{min-height:56px!important;padding:7px 2px!important;gap:8px!important}
  .att-main b{font-size:13px!important;line-height:1.22!important}
  .att-main span{font-size:11px!important;line-height:1.3!important;margin-top:2px!important}
  .account-card{min-height:55px!important;padding:8px 9px!important;border-radius:12px!important;margin-bottom:6px!important}
  .account-card b{font-size:13px!important}
  .account-card p{font-size:11px!important;margin-top:2px!important}

  /* Bottom navigation: lighter, lower, and visually part of the app chrome. */
  .mobile-nav{
    height:calc(60px + env(safe-area-inset-bottom,0px))!important;
    min-height:60px!important;padding:3px 4px calc(5px + env(safe-area-inset-bottom,0px))!important;
    box-shadow:0 -1px 0 var(--stroke-subtle),0 -10px 24px rgba(0,0,0,.12)!important;
  }
  .mobile-nav button{min-height:50px!important;font-size:10.5px!important;gap:2px!important;border-radius:12px!important}
  .mobile-nav button b{width:22px!important;height:22px!important}
  .mobile-nav button span{font-size:10.5px!important}
  .mobile-nav button.active{background:color-mix(in srgb,var(--accent) 7%,transparent)!important}

  /* HOME — app bar is the title. Remove the duplicated web-dashboard hero. */
  #home{padding-top:8px!important}
  #home>.page-head{display:none!important}

  #home>.status-line{
    margin:0 -2px 8px!important;padding:0 2px 3px!important;gap:6px!important;
    overflow-x:auto!important;flex-wrap:nowrap!important;scroll-snap-type:x proximity!important;
  }
  #home>.status-line span{
    min-height:27px!important;padding:0 8px!important;font-size:10px!important;
    background:var(--surface-inset)!important;border-color:var(--stroke-subtle)!important;
    scroll-snap-align:start!important;
  }
  #home>.status-line span i{width:5px!important;height:5px!important;margin-right:2px!important}

  #home>.g2{gap:10px!important;margin-top:0!important}
  #home>.g2>.panel{margin:0!important}
  #home>.g2>.panel .panel-b.attention{padding:3px 12px 5px!important}
  #home>.g2>.panel:nth-child(2) .panel-b{padding:7px!important}

  #home>.g4{margin-top:10px!important;padding-bottom:3px!important;gap:7px!important}
  #home>.g4 .metric{flex-basis:min(67vw,245px)!important;min-height:80px!important;padding:11px!important;border-radius:14px!important}
  #home>.g4 .metric .k{font-size:10px!important}
  #home>.g4 .metric .v{font-size:21px!important;margin:4px 0 0!important}
  #home>.g4 .metric .d{font-size:10px!important;margin-top:3px!important}

  #home>.panel{margin-top:10px!important}
  #home .job{min-height:52px!important;padding:7px 0!important}
  #home .job>div:first-child b{font-size:12.5px!important}
  #home .job>div:first-child span{font-size:10.5px!important}

  /* Keep secondary explanatory copy progressive on the home screen. */
  #home #homeRadarWidget .panel-h .meta{display:none!important}
  #home #homeRadarWidget .radar-mini-side p{font-size:10.5px!important;line-height:1.35!important}

  /* General mobile rhythm for dense areas. */
  .section-bar{margin-bottom:7px!important}
  .section-bar:has(.toolset){min-height:34px!important}
  .filterbar,.channel-tabs,.publish-tabs,.mail-tabs-v118{margin-bottom:8px!important}
}

@media(max-width:360px){
  :root{--mobile-edge:12px!important}
  #home>.status-line span{font-size:9.7px!important;padding:0 7px!important}
  .panel-h{padding:0 10px!important}
  .panel-b{padding-left:8px!important;padding-right:8px!important}
}