@media(max-width:700px){
  header{height:48px;padding:0 10px;gap:8px}
  .header-seal{width:32px;height:32px}
  .logo{font-size:18px}
  .hstats{display:none!important}
  .map-home-btn{top:79px!important}
  .mobile-inner-stats{display:flex!important}
  #tool-filter-row{display:none!important}
  #tool-select-row{display:none!important}
  .chip.show-tool,.chip-divider,.tool-key{display:none!important}
  #tool-select-inline{display:inline-block!important}
  .rsel{display:none!important}
  #mobile-stats{display:none!important}

  .header-right{gap:6px}
  .hdr-btn{padding:6px 9px;font-size:12px;letter-spacing:.02em}
  .hdr-btn svg{width:16px;height:16px}
  .logo{font-size:16px}
  #acct-dropdown{position:fixed;top:52px;right:8px;left:auto;min-width:0;width:calc(100vw - 16px);max-width:360px;z-index:1500}

  .huser strong{font-size:13px}
  .hbtn{font-size:12px;padding:5px 10px}
  #app{flex-direction:column}
  .body{flex-direction:column;flex:1;overflow:hidden}
  .mwrap{flex:1;min-height:0;position:relative}
  .sidebar{width:100%!important;opacity:1!important;flex-shrink:0;border-right:none;border-top:1px solid var(--bd);height:auto;overflow:visible;background:rgba(13,36,22,.9);backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .sidebar.collapsed{height:40px;overflow:hidden}
  .llist{display:none!important;flex:none!important}
  .llist.active{display:block!important;max-height:40vh;overflow-y:auto!important}
  .sidebar .detail{display:none!important}
  .tabs{background:rgba(18,45,28,.75)}
  .tab{color:var(--soft-d);font-size:14px;padding:12px 8px;border-bottom-color:transparent;border-bottom-width:2px;margin-bottom:-1px}
  .tab.on{color:var(--gold);border-bottom-color:var(--gold);font-size:15px}
  .frow{padding:8px 14px}
  .frow-label{font-size:12px;margin-bottom:5px}
  .chip{font-size:13px;padding:5px 11px;border-width:1px;gap:4px}
  .chip-dot{width:7px;height:7px}
  .srow{padding:6px 14px}
  .sinput{font-size:14px;padding:8px 11px;border-width:1px}
  .log-scope-row{padding:8px 14px;gap:6px}
  .log-scope-btn{padding:7px 10px;font-size:13px}
  .tog{display:none}
  #tab-groups .district-list{display:none!important}
  .district-detail{position:fixed!important;top:auto!important;bottom:0!important;left:0!important;right:0!important;max-height:60vh!important;overflow-y:auto;border-radius:12px 12px 0 0;box-shadow:0 -4px 28px rgba(0,0,0,.5);z-index:820;background:rgba(13,36,22,.97);border-top:1px solid var(--bd);-webkit-overflow-scrolling:touch;will-change:transform}
  .district-detail:not(.on){display:none!important}
  .map-overlays{top:7px;right:7px;gap:6px}
  #map-progress{display:none}
  .progress{min-width:160px;padding:8px 12px}
  .prog-title{font-size:12px;margin-bottom:5px}
  .prog-row{gap:7px;margin-bottom:5px}
  .prog-label{font-size:12px;width:64px}
  .prog-track{height:5px}
  .prog-count{font-size:11px;min-width:36px}
  .legend{padding:7px 10px}
  .leg-title{font-size:12px;margin-bottom:4px}
  .leg-item{font-size:12px;gap:6px;margin-bottom:3px}
  .leg-dot{width:10px;height:10px}
  .locate-btn{position:fixed!important;bottom:14px;left:14px;z-index:820;padding:8px 13px;font-size:14px;gap:5px;transition:bottom .25s ease}
  .locate-btn span{font-size:18px}
  .saving{bottom:14px;right:14px;font-size:13px;padding:8px 13px}
  #mobile-detail{display:none;position:fixed;top:auto;bottom:0;left:0;right:0;max-height:55vh;overflow-y:auto;border-radius:12px 12px 0 0;box-shadow:0 -4px 28px rgba(0,0,0,.5);z-index:810;background:rgba(13,36,22,.94);border-top:1px solid var(--bd);-webkit-overflow-scrolling:touch;flex-direction:column;will-change:transform}
  #mobile-detail.on{display:flex}
  #mobile-detail .detail-head{padding:14px 16px 0}
  #mobile-detail .detail-head-right{gap:9px}
  #mobile-detail .detail-close{font-size:22px}
  #mobile-detail .gmaps-btn{font-size:13px;padding:7px 10px}
  #mobile-detail .gmaps-btn svg{width:14px;height:14px}
  #mobile-detail .detail-type{font-size:12px}
  #mobile-detail .detail-name{font-size:20px}
  #mobile-detail .detail-addr{font-size:13px}
  #mobile-detail .detail-body{padding:11px 16px 16px}
  #mobile-detail .detail-cleared{font-size:14px;padding:9px 12px;margin-bottom:9px}
  #mobile-detail .tool-label{font-size:13px;margin-bottom:6px}
  #mobile-detail .tool-btns{gap:8px;margin-bottom:9px}
  #mobile-detail .tool-btn{padding:10px 6px;font-size:14px;border-width:1.5px}
  #mobile-detail .btn-mark{padding:11px;font-size:14px}
  #mobile-detail .btn-unmark{padding:9px;font-size:13px;margin-top:7px}
  #log-list{max-height:170px!important;overflow-y:auto!important}
  #log-detail{display:none!important}
  .mobile-inner-stats{font-size:13px}
  .mobile-inner-stats strong{font-size:14px}
  .tool-select-inline{font-size:13px!important;padding:5px 26px 5px 11px!important}
  .gtype-btn{font-size:14px!important;padding:8px 16px!important}
  #dd-name{font-size:26px!important}
  .district-detail-head{padding:14px 16px 8px!important}
  .district-detail-body{padding:0 16px 24px!important;font-size:14px}
  .district-detail-body .detail-cleared{font-size:13px!important;padding:8px 12px!important;margin-bottom:8px!important}
  .district-detail-body .btn-mark{font-size:14px!important;padding:12px!important;width:100%!important;margin-bottom:6px!important}
  .district-detail-body .btn-unmark{font-size:13px!important;padding:10px!important;width:100%!important}
  .district-detail-body select{font-size:14px!important;padding:9px 10px!important;color-scheme:dark;background:#0a1c11!important;color:var(--gold)!important}
  #log-list .log-entry{font-size:14px!important}

  /* Swipe-to-dismiss grabber at the top of mobile bottom sheets. Visual
     affordance that the sheet can be dragged. Sits above everything inside
     the sheet; 24-sheets.js treats it as a drag start zone. */
  .sheet-grabber{position:sticky;top:0;display:flex;justify-content:center;align-items:center;padding:8px 0 4px;background:transparent;flex-shrink:0;touch-action:none;z-index:2}
  .sheet-grabber::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:rgba(201,168,76,.45)}
}

/* Hide grabber on desktop (the sheet isn't a sheet) */
@media(min-width:701px){
  .sheet-grabber{display:none!important}
}