/* A visual Hong Kong map-tool browser, kept separate from drawer geometry. */
#mobileAppShell .app-menu-browser {
  --menu-harbour:#125769;--menu-ink:#173b48;--menu-paper:#edf5f3;--menu-surface:#f7fafc;--menu-survey:#e7b44a;--menu-sage:#709788;
  container-type:inline-size;min-width:0;color:var(--menu-ink);font-family:var(--font-body,"Source Sans 3","Chiron Hei HK",sans-serif);
}
#mobileAppShell .app-menu-quick {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:0 0 12px;margin:0 0 8px;border-bottom:1px solid var(--app-line);}
#mobileAppShell .app-menu-quick:has(>button:only-child) {grid-template-columns:minmax(0,1fr);}
#mobileAppShell .app-menu-quick>button {display:flex;flex-direction:column;gap:5px;min-height:66px;padding:8px 2px;border:0;border-top:0;background:transparent;border-radius:12px;font-size:14px;font-weight:600;color:var(--menu-harbour);}
#mobileAppShell .app-menu-quick>button svg {width:24px;height:24px;stroke-width:2;}
#mobileAppShell .app-menu-quick>button:active {background:var(--menu-paper);}
#mobileAppShell .app-menu-filter-row {display:flex;align-items:center;gap:8px;margin:0 0 14px;}
#mobileAppShell .app-menu-filters {display:flex;gap:5px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;}
#mobileAppShell .app-menu-filters::-webkit-scrollbar {display:none;}
#mobileAppShell .app-menu-filters>button {flex:none;min-width:44px;min-height:44px;padding:7px 5px;border:0;border-top:0;border-radius:9px;background:transparent;color:var(--app-muted);font-size:13px;font-weight:600;white-space:nowrap;}
#mobileAppShell .app-menu-filters>button[aria-pressed=true] {background:var(--menu-harbour)!important;color:#f7fafc;}
#mobileAppShell .app-menu-details {flex:none;min-width:44px;min-height:44px;padding:7px 2px;border:0;border-top:0;border-radius:9px;background:transparent;color:var(--app-muted);font-size:12px;text-decoration:underline;text-underline-offset:3px;}
#mobileAppShell .app-menu-details[aria-pressed=true] {background:var(--menu-paper)!important;color:var(--menu-harbour);text-decoration:none;}
#mobileAppShell .app-menu-tile-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 9px;align-items:start;}
#mobileAppShell .app-menu-tile-wrap {min-width:0;}
#mobileAppShell .app-menu-tile-wrap:has(>.app-menu-tile[hidden]) {display:none;}
#mobileAppShell .app-menu-tile {
  position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;width:100%;min-width:0;min-height:0;
  padding:0 0 2px;border:0;border-top:0;border-radius:9px;background:transparent;color:var(--menu-ink);box-shadow:none;text-align:center;text-shadow:none;
}
#mobileAppShell .app-menu-art {position:relative;display:block;width:100%;height:auto;aspect-ratio:1.22;overflow:hidden;border-radius:9px;background:#d7e9e8;isolation:isolate;}
#mobileAppShell .app-menu-art>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:scale(1.13);z-index:-1;}
#mobileAppShell .app-menu-art>svg {position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:none;filter:drop-shadow(0 1px 1px #173b4855);z-index:1;}
#mobileAppShell .app-menu-art>img.app-menu-art-comparison {left:50%;width:50%;object-position:60% 35%;transform:scale(1.13);clip-path:inset(0 0 0 6%);z-index:0;}
#mobileAppShell .app-menu-tile-label {display:block;margin:7px 0 0;font-size:14px;line-height:1.2;font-weight:600;letter-spacing:0;overflow-wrap:anywhere;}
#mobileAppShell .app-menu-tile-description {display:none;margin:6px 0 0;font-size:12px;font-weight:400;line-height:1.3;color:var(--app-muted);}
#mobileAppShell .app-menu-tile>.app-tool-state {display:none;}
#mobileAppShell .app-menu-browser[data-details=true] .app-menu-tile-description {display:block;}
#mobileAppShell .app-menu-tile[aria-pressed=true] {background:transparent!important;}
#mobileAppShell .app-menu-tile[aria-pressed=true] .app-menu-art {outline:3px solid var(--menu-harbour);outline-offset:-3px;}
#mobileAppShell .app-menu-tile[aria-pressed=true] .app-menu-art::after {content:'✓';position:absolute;right:5px;bottom:5px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--menu-harbour);color:#f7fafc;font:700 13px/1 var(--font-body);z-index:2;}
#mobileAppShell .app-menu-tile[aria-pressed=true] .app-menu-tile-label {color:var(--menu-harbour);font-weight:700;}
#mobileAppShell .app-menu-tile:focus-visible {outline:3px solid var(--menu-harbour)!important;outline-offset:3px!important;}
#mobileAppShell .app-menu-tile:active .app-menu-art {filter:brightness(.88);}
#mobileAppShell .app-menu-browser .app-menu-tile.professional-locked::after {
  position:absolute!important;top:5px!important;right:5px!important;left:auto!important;bottom:auto!important;align-self:auto;width:19px;height:19px;margin:0;
  border:1px solid #f7fafc99;border-radius:6px;background-color:#f7fafcec;background-size:11px;z-index:3;
}
#mobileAppShell .app-menu-preview-credits {margin:20px 0 0;color:var(--app-muted);font-size:10px;line-height:1.4;}
html[data-theme=dark] #mobileAppShell .app-menu-browser {--menu-ink:#edf5f3;--menu-harbour:#9bdae3;--menu-paper:#25444b;--menu-surface:#173b48;}
html[data-theme=dark] #mobileAppShell .app-menu-filters>button[aria-pressed=true] {background:#9bdae3!important;color:#173b48;}
html[data-theme=dark] #mobileAppShell .app-menu-tile[aria-pressed=true] .app-menu-art::after {color:#173b48;}
@container(max-width:280px) {
  #mobileAppShell .app-menu-tile-grid {gap:13px 7px;}
  #mobileAppShell .app-menu-filter-row {gap:4px;}
  #mobileAppShell .app-menu-filters>button {padding-inline:0;font-size:12px;}
}