.mobile-tabs,.mobile-about{display:none}
.data-panel{display:flex;flex-direction:column;flex:1;gap:22px;min-height:0}
@media(max-width:700px){
  html,body{height:100%;overflow:hidden}
  .app{display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden}
  .sidebar{display:contents}
  .sidebar>header{order:0;flex:none;padding:max(12px,env(safe-area-inset-top)) 16px 10px;background:var(--bg)}
  .language-switch{margin:0 0 10px;justify-content:flex-end}
  .language-switch button{min-height:36px;padding:7px 12px}
  .eyebrow{margin:0 0 5px;font-size:10px}
  h1{font-size:21px;line-height:1.2;margin-bottom:6px;letter-spacing:-.025em}
  html[lang=zh-Hant-HK] h1{font-size:22px;line-height:1.3}
  .sidebar>header>.intro{font-size:12px;line-height:1.4}
  html[lang=zh-Hant-HK] .sidebar>header>.intro{font-size:12px}
  .intro-explainer{display:none}
  .mobile-about{display:block;margin-top:7px}
  .mobile-about summary{font-size:12px;padding:3px 0;color:var(--blue)}
  .mobile-about p{font-size:12px;line-height:1.55;color:var(--muted);margin:7px 0}
  .sidebar>header:has(.mobile-about[open]){max-height:38dvh;overflow-y:auto}
  .search-section{order:1;flex:none;padding:0 16px 10px;background:var(--bg);z-index:1200}
  .search-section label{font-size:12px;margin-bottom:5px}
  .search-box input{padding:10px 12px;min-height:44px;font-size:16px}
  #clear-search{min-width:44px}
  #search-results{left:16px;right:16px;top:calc(100% - 10px);max-height:40dvh}
  #search-results button{min-height:44px}
  .mobile-tabs{order:2;display:flex;flex:none;padding:0 16px;gap:20px;border-bottom:1px solid var(--border);background:var(--bg)}
  .mobile-tabs button{min-height:44px;flex:1;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font-weight:600}
  .mobile-tabs button[aria-selected=true]{color:var(--blue);border-bottom-color:var(--blue)}
  .map-panel{order:3;flex:1;min-height:0}
  #map{height:100%;min-height:0}
  .map-heading{left:10px;top:10px;padding:8px 10px;max-width:calc(100% - 120px)}
  .map-subtitle{display:none}
  .map-button{right:10px;top:10px;min-height:44px;padding:8px 12px}
  .legend{left:10px;bottom:26px;width:165px;padding:10px 12px}
  .leaflet-control-zoom a{width:42px!important;height:42px!important;line-height:42px!important}
  .data-panel{order:3;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:20px 18px max(20px,env(safe-area-inset-bottom));gap:18px}
  .data-panel h2{font-size:22px}
  .data-panel .sidebar-bottom{margin-top:0}
  .data-panel .annual-chart{max-width:440px;margin-left:auto;margin-right:auto;width:100%}
  .data-panel .period-label{margin-bottom:14px}
  .data-panel .total-value{font-size:34px}
  .ranking button,.download{min-height:44px}
  .overall-summary>summary,.sidebar-bottom>details>summary{min-height:44px;align-content:center}
  .watermark{padding-bottom:4px}
  .app[data-mobile-view=map]>.sidebar>.data-panel{display:none}
  .app[data-mobile-view=data]>.map-panel{display:none}
}
@media(max-width:700px) and (max-height:600px){
  .sidebar>header>.intro,.eyebrow,.mobile-about{display:none}
  .sidebar>header{padding:8px 14px}
  .language-switch{float:right;margin:0 0 0 10px}
  h1,html[lang=zh-Hant-HK] h1{font-size:18px;margin:0}
  .search-section label{display:none}
}