#tools-menu-button { top: calc(16px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: auto; height: 48px; padding: 0 14px; gap: 8px; border-radius: var(--radius-md); color: var(--text); font-weight: 600; }
.search-fab { width: 300px; }
.search-fab .search-fab-btn { display: flex; align-items: center; width: 100%; min-height: 48px; border-radius: var(--radius-md); justify-content: flex-start; padding: 0 14px; gap: 10px; font: inherit; color: var(--text-dim); }
.search-fab-btn svg { flex-shrink: 0; }
.search-fab.open .search-fab-btn { display: none; }
.search-fab-btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-fab .search-field { width: 100%; min-height: 48px; border-radius: var(--radius-md); }
.search-fab #search-results { width: 100%; border-radius: var(--radius-md); }
/* Centred, clear of the 300px search box on the left (and as much on the right). */
.topbar { border-radius: var(--radius-md); padding: 2px 4px; max-width: calc(100dvw - 664px); }
.chip { border-radius: var(--radius-sm); }
.results-action { font-weight: 650; }
.chip-results > svg { display: none; }
#layers-btn { width: auto; padding: 0 14px; gap: 8px; border-radius: var(--radius-md); }
@media (max-width: 1050px) {
  .search-fab { width: 250px; }
  /* Beside the search box and Menu, which keep clear of a landscape iPhone's notch. Menu's
     label grows with the browser's text size (about 3.1rem; its icon and padding are 58px),
     so its room does too. */
  .topbar { left: calc(max(16px, env(safe-area-inset-left)) + 262px); right: calc(max(12px, env(safe-area-inset-right)) + 61px + 3.1rem); transform: none; max-width: none; }
}
@media (max-width: 760px) {
  .search-fab, .search-fab.open { top: calc(12px + env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: calc(68px + 3.1rem); width: auto; }
  #tools-menu-button { top: calc(12px + env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
  .topbar { top: calc(68px + env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); transform: none; max-width: none; }
  .results-cluster { margin-left: auto; }
  .search-fab.open #search-results { width: calc(100dvw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); right: auto; }
}
.tools-menu { max-width: 420px; }
.tools-menu .modal-body { min-height: 0; padding: 16px 20px max(20px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.tools-menu-links { display: grid; gap: 8px; }
.tools-menu-links :is(a, button) { display: flex; align-items: center; gap: 12px; min-height: 48px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); color: var(--text); text-align: left; font: inherit; font-size: var(--text-md); text-decoration: none; cursor: pointer; }
.tools-menu-links :is(a, button):hover { background: var(--chip-active); }
.tools-menu-links svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: var(--accent-fg); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tools-menu :is(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-note { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 8px; color: var(--text-dim); font-size: var(--text-sm); line-height: 1.5; }
.menu-note summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
.menu-data-links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.menu-data-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-fg); text-underline-offset: 3px; }
/* Between the bars and its button, however tall the sheet below is; it scrolls if short. */
#layers-panel { max-height: calc(100dvh - var(--map-bottom, 0px) - 148px - env(safe-area-inset-bottom) - var(--top-chrome, 74px)); overflow-y: auto; }