/* Shortcut configuration follows the existing Layers panel and grouped rail. */
.vertex-v3 #app #mapShortcutChoices[hidden] { display:none!important; }
.vertex-v3 #app#app#app#app#app#app #layerPanel>.panel-head { display:grid!important; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); }
.vertex-v3 #app#app#app#app#app#app #layerPanel>.panel-head>div:not(.curtain-grabber) { grid-area:1 / 1; min-width:0; }
.vertex-v3 #app#app#app#app#app#app #layerPanel #closeLayers { grid-area:1 / 3; justify-self:end; }
.vertex-v3 #app#app#app#app#app#app #layerPanel #editMapShortcuts { display:grid; grid-area:1 / 2; place-items:center; justify-self:center; flex:0 0 44px; width:44px; height:44px; padding:10px; margin:0; border:0; border-radius:50%; background:transparent; color:var(--ui-text); }
.vertex-v3 #app#app#app#app#app#app #layerPanel #editMapShortcuts[aria-expanded="true"] { background:var(--ui-green); }
.vertex-v3 #app#app#app#app#app#app #layerPanel #editMapShortcuts svg { color:var(--ui-text)!important; stroke:currentColor!important; }
.vertex-v3 #app#app#app#app#app#app #layerPanel:has(#mapShortcutChoices:not([hidden]))>:not(.panel-head):not(#mapShortcutChoices) { display:none!important; }
.vertex-v3 #app#app#app#app#app#app #mapShortcutChoices { min-width:0; margin:12px 0 0; padding:0; border:0; }
.vertex-v3 #app #mapShortcutChoices legend { padding:0; font:650 17px/1.4 system-ui; }
.vertex-v3 #app #mapShortcutChoices p { margin:6px 0 12px; color:var(--ui-muted); font:500 12px/1.4 system-ui; }
.vertex-v3 #app #mapShortcutOptions { display:flex; flex-direction:column; }
.vertex-v3 #app #mapShortcutOptions label { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:0 4px; border-bottom:1px solid #ffffff14; color:var(--ui-text); font:500 14px/1.3 system-ui; cursor:pointer; }
.vertex-v3 #app #mapShortcutOptions input { flex:none; width:20px; height:20px; margin:0; accent-color:var(--ui-green); }
.vertex-v3 #app #mapShortcutOptions label:has(input:disabled) { opacity:.5; }
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app#app #mapShortcuts { position:absolute; z-index:44; right:0; bottom:calc(100% + var(--map-control-gap)); display:flex; flex-direction:column; width:46px; box-sizing:border-box; max-height:max(46px,calc(100dvh - max(var(--corner-clear,120px),120px) - 266px - env(safe-area-inset-bottom))); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; border:1px solid #ffffff30; border-radius:23px; background:var(--ui-surface); box-shadow:0 4px 14px #0005; pointer-events:auto; }
  .vertex-v3 #app#app#app#app#app#app#app#app #thumbRail { translate:none!important; }
  .vertex-v3 #app#app#app#app#app#app#app#app #mapSheet[data-mode="home"]:not(:has(#placeCard:not(.collapsed):not([hidden]))) #mapContextStack { right:74px!important; }
  .vertex-v3 #app #mapShortcuts:empty { display:none; }
  .vertex-v3 #app#app#app#app#app#app#app #thumbRailGroup button { pointer-events:auto; }
  .vertex-v3 #app#app#app#app#app#app#app #mapShortcuts button { flex:0 0 46px; width:44px!important; min-width:44px!important; height:46px!important; padding:0!important; border:0!important; border-bottom:1px solid #ffffff1f!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
  .vertex-v3 #app #mapShortcuts button:last-child { border-bottom:0!important; }
  .vertex-v3 #app#app#app#app#app#app#app #mapShortcuts button[aria-pressed="true"] { background:var(--ui-green)!important; color:#fff!important; }
  .vertex-v3 #app#app#app#app#app#app#app:has(#recordSheet:not([hidden]),#routeDetail:not([hidden]),#activeSession:not([hidden]),#exploreSheet:not([hidden]),#youSheet:not([hidden]),#activitiesSheet:not([hidden]),#activityDetail:not([hidden]),#compareSheet:not([hidden]),#replayControls:not([hidden])) #mapShortcuts { display:none!important; }
  .vertex-v3 #app #mapShortcuts button:focus-visible { outline:2px solid var(--ui-yellow); outline-offset:-3px; }
}

/* A roller-blind reveal: the top rises while the straight bottom stays tucked
   behind the dock. Translate is separate from legacy transform:none!important. */
@media (max-width:899px) {
  /* Unready legends must still measure, but must not paint ahead of the reveal. */
  .vertex-v3 #app#app#app#app#app#app#app#app #mapSheet #mapContextStack:not([aria-hidden="false"]) {
    visibility:hidden;
    pointer-events:none;
  }
  .vertex-v3 #app#app#app#app#app#app#app#app:has(#mapSheet[data-mode="home"]) #thumbDock {
    border-radius:28px!important;
    border-top:1px solid #ffffff30!important;
  }
  .vertex-v3 #app#app#app#app#app#app#app#app #mapSheet[data-mode="home"]:not(:has(#placeCard:not(.collapsed):not([hidden]))) #mapContextStack[aria-hidden="false"] {
    bottom:calc(var(--map-dock-height,82px) - 28px)!important;
    border:1px solid #ffffff30!important;
    border-radius:22px 22px 0 0!important;
    padding:10px 0 38px!important;
    max-height:min(42dvh,calc(100dvh - var(--corner-clear,120px) - var(--map-dock-height,82px) - 24px));
    overflow-y:auto!important;
    box-shadow:0 -4px 20px #0004!important;
    will-change:translate,clip-path;
    animation:layer-card-rise 480ms cubic-bezier(.22,.65,.35,1) both;
  }
}
@keyframes layer-card-rise {
  from { translate:0 calc(100% - 28px); clip-path:inset(0 0 100% 0 round 22px 22px 0 0); }
  to { translate:0 0; clip-path:inset(0 0 0 0 round 22px 22px 0 0); }
}
@media (prefers-reduced-motion:reduce) {
  .vertex-v3 #app#app#app#app#app#app#app#app #mapSheet #mapContextStack { animation:none!important; }
}