/* Search box (top-left). Uses the map page's colour tokens. */
.sr-box { position: absolute; top: 12px; left: 12px; z-index: 3; width: min(380px, calc(100vw - 72px)); }
.sr-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px 10px 36px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--fg);
  box-shadow: 0 2px 8px rgb(0 0 0 / .12); }
.sr-input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.sr-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: .6; pointer-events: none; }
.sr-box:has(.sr-list:not([hidden])) .sr-icon { top: 22px; }
.sr-list { list-style: none; margin: 6px 0 0; padding: 4px; background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 18px rgb(0 0 0 / .18);
  max-height: min(60vh, 520px); overflow-y: auto; }
.sr-list li { display: flex; gap: 10px; align-items: center; padding: 8px 8px; border-radius: 8px; cursor: pointer; }
.sr-list li.sr-active, .sr-list li:hover { background: var(--bg); }
.sr-list li.sr-none { cursor: default; opacity: .7; }
.sr-text { display: grid; min-width: 0; }
.sr-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-text small { opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-ico { flex: none; width: 19px; height: 19px; background-repeat: no-repeat; }
.sr-emoji { display: grid; place-items: center; font-size: 15px; }

/* Category filter buttons, under the search box. Scrolls sideways on small screens. */
.ft-row { position: absolute; top: 60px; left: 12px; right: 56px; z-index: 2; display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; }
.ft-row::-webkit-scrollbar { display: none; }
.ft-row button { flex: none; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  cursor: pointer; box-shadow: 0 1px 4px rgb(0 0 0 / .12); white-space: nowrap; }
.ft-row button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.ft-ico { width: 19px; height: 19px; background-repeat: no-repeat; flex: none; }
.ft-hint { position: absolute; bottom: 104px; left: 50%; transform: translateX(-50%); z-index: 2; background: var(--panel);
  color: var(--fg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 14px;
  box-shadow: 0 2px 8px rgb(0 0 0 / .15); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }

/* Map / Satellite switch, bottom-left */
.bm-btn { position: absolute; left: 12px; bottom: 28px; z-index: 2; width: 64px; height: 64px; padding: 0;
  border: 2px solid #fff; border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .3);
  background: none; display: grid; }
.bm-thumb { grid-area: 1 / 1; background: radial-gradient(circle at 30% 30%, #6f8f4e, #3d5a33 45%, #2c6f8f 70%, #1f3b4f); }
.bm-to-map .bm-thumb { background: linear-gradient(135deg, #f2efe9 0 40%, #f9d29c 40% 46%, #f2efe9 46% 70%, #aad3df 70%); }
.bm-label { grid-area: 1 / 1; align-self: end; font: 600 11px/1.2 system-ui, sans-serif; color: #fff; padding: 3px 2px;
  background: rgb(0 0 0 / .55); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* voice search */
.sr-has-mic .sr-input { padding-right: 46px; }
.sr-mic { position: absolute; right: 6px; top: 5px; width: 36px; height: 34px; border: 0; border-radius: 8px; background: none;
  font-size: 18px; line-height: 1; cursor: pointer; opacity: .75; }
.sr-mic:hover, .sr-mic:focus-visible { opacity: 1; background: var(--bg); }
.sr-mic.on { opacity: 1; background: #d93025; animation: sr-pulse 1.2s ease-in-out infinite; }
@keyframes sr-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(217 48 37 / .45); } 50% { box-shadow: 0 0 0 8px rgb(217 48 37 / 0); } }
.sr-note { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--panel); color: var(--fg); font-size: 13px;
  box-shadow: 0 2px 8px rgb(0 0 0 / .15); }
.sr-note[hidden] { display: none; }
.sr-has-mic .sr-icon { top: 22px; }   /* stay on the input line when a voice message shows below */