/* Expanded sidebar: peer destinations first, with map preferences in a
   separate disclosure. The scrollable content stays beneath its header. */
body.map-first-app #appMenuDrawer {
  inset: 12px auto 12px 10px; width: min(332px,calc(100vw - 20px));
  height: auto; max-height: none; padding: 0; overflow: clip;
  display: grid; grid-template-rows: auto minmax(0,1fr);
  border: 1px solid var(--apple-glass-border); border-radius: var(--apple-panel-radius);
}
body.map-first-app #appMenuScrim { background: #0003; }
#appMenuDrawer .app-menu-head {
  flex: 0 0 auto; min-height: 80px; padding: 14px 15px; gap: 12px;
  border-bottom: 1px solid #ffffff14;
}
#appMenuDrawer .app-menu-brand { display: flex; align-items: center; gap: 11px; }
#appMenuDrawer .app-menu-head h2 { font-size: .9375rem; font-weight: 650; line-height: 1.35; }
#appMenuDrawer .app-menu-head h2 > span { display: block; color: var(--muted); font-size: .75rem; font-weight: 450; }
#appMenuDrawer .menu-app-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; background: #b82d2a; }
#appMenuDrawer .menu-app-icon svg { width: 23px; height: 23px; fill: #fff; }
#appMenuDrawer .app-menu-close { flex: 0 0 36px; min-width: 36px; width: 36px; height: 36px; min-height: 36px; border-radius: 50%; background: #ffffff0d; color: var(--muted); }
#appMenuDrawer .app-menu-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 7px 15px; scrollbar-width: thin; scrollbar-color: #ffffff40 transparent; }
#appMenuDrawer .menu-navigation { display: block; padding: 0; margin: 0; border: 0; }
#appMenuDrawer .menu-group { padding: 0; margin: 0 0 14px; }
#appMenuDrawer .menu-group > h3 { margin: 0; padding: 10px 12px 5px; font-size: .6875rem; line-height: 1.5; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
#appMenuDrawer .menu-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
  padding: 9px 12px; margin: 0; border: 0; border-radius: calc(var(--apple-panel-radius) - 8px);
  background: transparent; color: var(--text); box-shadow: none; text-decoration: none;
  font: inherit; font-size: .875rem; font-weight: 450; line-height: 1.4; text-align: left; cursor: pointer;
}
#appMenuDrawer .menu-row[hidden] { display: none; }
#appMenuDrawer .menu-row > svg { flex: 0 0 21px; width: 21px; height: 21px; fill: none; stroke: #ff8a80; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
#appMenuDrawer .menu-row > span:not(.menu-count,.menu-accessory,.menu-settings-chevron) { flex: 1; min-width: 0; }
#appMenuDrawer .menu-row > small { margin-left: auto; color: var(--muted); font-size: .6875rem; font-weight: 450; white-space: nowrap; }
#appMenuDrawer .menu-row:hover { background: #ffffff0c; }
#appMenuDrawer .menu-row[aria-current='true'] { background: #ffffff18; font-weight: 600; }
#appMenuDrawer .menu-count { margin-left: auto; color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
#appMenuDrawer .menu-accessory { margin-left: auto; color: var(--muted); }
#appMenuDrawer .menu-zoom-row { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 2px 12px 2px 45px; gap: 12px; font-size: .8125rem; color: var(--muted); }
#appMenuDrawer .menu-zoom-row > div { display: flex; gap: 4px; }
#appMenuDrawer .menu-zoom-row button { width: 44px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 10px; background: #ffffff0c; color: var(--text); font-size: 1.25rem; cursor: pointer; }
#appMenuDrawer .menu-data-actions { padding-top: 4px; border-top: 1px solid #ffffff14; }
#appMenuDrawer .menu-settings { padding-top: 6px; border-top: 1px solid #ffffff14; }
#appMenuDrawer .menu-settings > summary { list-style: none; }
#appMenuDrawer .menu-settings > summary::-webkit-details-marker { display: none; }
#appMenuDrawer .menu-settings-chevron { margin-left: auto; font-size: 1.25rem; color: var(--muted); transform: rotate(0); }
#appMenuDrawer .menu-settings[open] .menu-settings-chevron { transform: rotate(90deg); }
#appMenuDrawer .menu-settings-content { padding: 8px 8px 0; }
#appMenuDrawer .sidebar-visibility-row { min-height: 44px; padding: 6px 4px; gap: 10px; grid-template-columns: 21px minmax(0,1fr) 36px; border-radius: 12px; }
#appMenuDrawer .sidebar-visibility-icon { width: 21px; height: 21px; }
#appMenuDrawer .sidebar-visibility-copy strong { font-size: .8125rem; font-weight: 450; }
#appMenuDrawer .app-menu-section { display: grid; gap: 8px; padding: 12px 4px; }
#appMenuDrawer .app-menu-section > h3 { padding: 0; margin: 0; font-size: .8125rem; font-weight: 600; }
#appMenuDrawer .distance-preferences { grid-template-columns: minmax(0,1fr) 130px; align-items: center; }
#appMenuDrawer .distance-preferences > p { grid-column: 1 / -1; }
#appMenuDrawer .app-menu-section :is(select,.field select) { min-width: 0; width: 100%; min-height: 36px; padding: 6px 8px; font-size: .75rem; border-radius: 10px; }
#appMenuDrawer .app-menu-section .field { display: grid; grid-template-columns: minmax(0,1fr) 130px; align-items: center; gap: 12px; font-size: .8125rem; }
#appMenuDrawer .small-note { margin: 0; font-size: .6875rem; line-height: 1.5; color: var(--muted); }
#appMenuDrawer .menu-setting-label { margin: 8px 0 0; font-size: .75rem; color: var(--muted); }
#appMenuDrawer .drawer-map-style-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
#appMenuDrawer .map-style-option { display: grid; justify-content: stretch; align-content: end; min-height: 62px; padding: 34px 5px 6px; border: 1px solid #ffffff20; border-radius: 12px; font-size: .6875rem; font-weight: 450; text-align: center; color: var(--text); background: #ffffff06; }
#appMenuDrawer .map-style-option::before { inset: 7px 7px auto; width: auto; height: 22px; border: 0; border-radius: 5px; background: linear-gradient(135deg,transparent 40%,#818a91 41% 45%,transparent 46%),#202326; }
#appMenuDrawer .map-style-option[data-map-style='light']::before { background: linear-gradient(135deg,transparent 40%,#fff 41% 45%,transparent 46%),#cdd3d5; }
#appMenuDrawer .map-style-option[data-map-style='bright']::before { background: linear-gradient(135deg,transparent 40%,#d6a46c 41% 45%,transparent 46%),#e6dfca; }
#appMenuDrawer .map-style-option[data-map-style='liberty']::before { background: linear-gradient(135deg,transparent 40%,#fff 41% 45%,transparent 46%),#acc7aa; }
#appMenuDrawer .map-style-option[data-map-style='fiord']::before { background: linear-gradient(135deg,transparent 40%,#7d96ad 41% 45%,transparent 46%),#293a4d; }
#appMenuDrawer .map-style-option[data-map-style='threeD']::before { background: linear-gradient(135deg,transparent 40%,#718da3 41% 45%,transparent 46%),#cde3c8; }
#appMenuDrawer .map-style-option[aria-pressed='true'] { background: #ffffff12; border-color: #ff8a80; font-weight: 600; box-shadow: none; }
@media (max-width: 820px) {
  body.map-first-app #appMenuDrawer { inset: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); width: auto; max-width: 380px; }
  #appMenuDrawer .app-menu-close { flex-basis: 44px; width: 44px; height: 44px; min-height: 44px; }
  #appMenuDrawer .menu-zoom-row button { height: 44px; min-height: 44px; }
  #appMenuDrawer .app-menu-section :is(select,.field select) { min-height: 44px; }
}
@media (prefers-contrast: more) {
  #appMenuDrawer .menu-row[aria-current='true'] { outline: 1px solid currentColor; outline-offset: -1px; }
}