/* 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) auto; }
.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 / 2; justify-self:end; }
.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:600 17px/1.4 var(--font-sans); }
.vertex-v3 #app #mapShortcutChoices p { margin:6px 0 12px; color:var(--ui-muted); font:500 12px/1.4 var(--font-sans); }
.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 rgba(var(--g-ink-rgb),0.078); color:var(--ui-text); font:500 14px/1.3 var(--font-sans); 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 rgba(var(--g-ink-rgb),0.188); border-radius:999px; background:var(--ui-surface); box-shadow:0 4px 14px rgba(var(--g-shadow-rgb),0.240); pointer-events:auto; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
  .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 rgba(var(--g-ink-rgb),0.122)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
  .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:var(--g-contrast)!important; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
  .vertex-v3 #app#app#app#app#app#app#app[data-h44]:not(#_h) #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[data-h45]:not(#_h) #thumbDock {
    border-radius:22px!important;
    border-top:1px solid rgba(var(--g-ink-rgb),0.188)!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 rgba(var(--g-ink-rgb),0.188)!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 rgba(var(--g-shadow-rgb),0.240)!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; }
}

/* Buttons on the map: a card at the end of the Map panel with the chosen buttons and Edit. */
.vertex-v3 #app#app#app#app#app#app#app#app #layerPanel .layer-grid-section>#editMapShortcuts { display:flex!important; align-items:center!important; gap:10px!important; width:100%!important; height:auto!important; min-height:60px!important; margin:0!important; padding:10px 12px 10px 10px!important; border:0!important; border-radius:14px!important; background:var(--g-surface)!important; color:var(--g-contrast)!important; text-align:left; cursor:pointer; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app #mapShortcutSummary { display:flex; flex:1; flex-wrap:wrap; gap:6px; min-width:0; }
.vertex-v3 #app#app #mapShortcutSummary i { display:grid; place-items:center; width:40px; height:40px; border-radius:14px; background:var(--g-raised); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app #mapShortcutSummary i svg { width:20px; height:20px; color:var(--g-contrast); }
.vertex-v3 #app#app #mapShortcutSummary small { padding:0 4px; color:var(--g-muted); font:500 14px/1.3 var(--font-sans); }
.vertex-v3 #app#app#app#app#app#app#app#app #layerPanel #editMapShortcuts>b { color:var(--g-accent)!important; font:600 15px/1 var(--font-sans)!important; }
.vertex-v3 #app#app #editMapShortcuts>svg { flex:none; width:18px!important; height:18px!important; color:var(--g-accent); margin-left:-6px; }
/* Editor: title and count on one line, the buttons as the map will show them, then one switch per layer. */
.vertex-v3 #app#app #mapShortcutChoices:not([hidden]) { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:12px; }
.vertex-v3 #app#app #mapShortcutChoices legend { float:left; grid-column:1; }
.vertex-v3 #app#app #mapShortcutCount { grid-column:2; grid-row:1; color:var(--ui-muted); font:600 14px/1.4 var(--font-sans); }
.vertex-v3 #app#app #mapShortcutChoices>p,.vertex-v3 #app#app #mapShortcutPreview,.vertex-v3 #app#app #mapShortcutOptions,.vertex-v3 #app#app #mapShortcutsDone { grid-column:1 / -1; }
.vertex-v3 #app#app #mapShortcutPreview { display:flex; flex-wrap:wrap; gap:6px; min-height:44px; margin:0 0 10px; padding:8px; border-radius:14px; background:var(--g-base); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app #mapShortcutPreview i { display:grid; place-items:center; width:40px; height:40px; border-radius:14px; background:var(--g-raised); color:var(--ui-text); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app #mapShortcutPreview i svg { width:20px; height:20px; }
.vertex-v3 #app#app #mapShortcutPreview small { align-self:center; padding:0 6px; color:var(--ui-muted); font:500 13px/1.3 var(--font-sans); }
.vertex-v3 #app#app #mapShortcutOptions label>span { display:flex; align-items:center; gap:12px; min-width:0; }
.vertex-v3 #app#app #mapShortcutOptions label>span svg { flex:none; width:22px; height:22px; color:var(--ui-muted); }
.vertex-v3 #app#app #mapShortcutOptions label:has(input:checked)>span svg { color:var(--g-accent); }
.vertex-v3 #app#app #mapShortcutStatus:empty { display:none; }
.vertex-v3 #app#app #mapShortcutsDone { margin:14px 0 4px; height:48px; border:0; border-radius:14px; background:var(--g-accent); color:var(--g-contrast); font:600 15px/1 var(--font-sans); cursor:pointer; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}